"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroCarouselLogo from "@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo";
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import { Star, Rocket } from "lucide-react";

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="mediumSizeLargeTitles"
      background="fluid"
      cardStyle="glass-elevated"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="ANLY"
          navItems={[
            { name: "Templates", id: "templates" },
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "FAQ", id: "faq" },
          ]}
          button={{
            text: "Browse Templates",            href: "/templates"}}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCarouselLogo
          logoText="ANLY"
          description="Professional Website Templates, Built for Business. Choose your template, select your service level, and launch in minutes."
          buttons={[
            { text: "Browse Templates", href: "/templates" },
            { text: "View Pricing", href: "#pricing" },
          ]}
          slides={[
            {
              imageSrc: "http://img.b2bpic.net/free-vector/business-landing-page-with-photo_23-2148248047.jpg",              imageAlt: "Portfolio template showcase"},
            {
              imageSrc: "http://img.b2bpic.net/free-vector/business-landing-page-with-photo_23-2148293486.jpg",              imageAlt: "Business website template"},
            {
              imageSrc: "http://img.b2bpic.net/free-vector/healthy-restaurant-landing-page-template_23-2148757974.jpg",              imageAlt: "Restaurant template showcase"},
          ]}
          autoplayDelay={5000}
          showDimOverlay={true}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSeven
          title="How ANLY Works"
          description="Three simple steps to launch your professional website"
          tag="Easy Process"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="blur-reveal"
          features={[
            {
              id: 1,
              title: "Choose Your Template",              description:
                "Browse 50+ professionally designed templates across portfolio, business, restaurant, and agency categories. Filter by style, industry, and features to find your perfect match.",              imageSrc: "http://img.b2bpic.net/free-psd/flat-design-landing-page-gardening-template_23-2149357558.jpg",              imageAlt: "Template selection interface"},
            {
              id: 2,
              title: "Select Your Service Level",              description:
                "Pick from Template Only, Template + Setup, or Customized Template options. Choose your editing subscription tier based on your customization needs.",              imageSrc: "http://img.b2bpic.net/free-vector/flat-business-infographic-with-photo_23-2148228064.jpg",              imageAlt: "Service tier selection"},
            {
              id: 3,
              title: "Launch & Customize",              description:
                "Get instant access to your template with our editing tools. Use our subscription service for ongoing customizations or manage edits yourself through our intuitive interface.",              imageSrc: "http://img.b2bpic.net/free-vector/content-management-system-home-page_23-2148811885.jpg",              imageAlt: "Website customization interface"},
          ]}
        />
      </div>

      <div id="socialProof" data-section="socialProof">
        <SocialProofOne
          title="Trusted by Thousands"
          description="Join freelancers, agencies, and small business owners using ANLY templates"
          tag="Social Proof"
          textboxLayout="default"
          useInvertedBackground={false}
          names={[
            "Freelance Creative Co",            "TechFlow Agencies",            "BuildMore Studios",            "DesignHub Pro",            "StartUp Launch",            "Portfolio Masters",            "Business Growth Inc",            "Web Innovation Lab"]}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Subscription Tiers"
          description="Flexible editing subscriptions to match your customization needs"
          tag="Pricing Plans"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="scale-rotate"
          plans={[
            {
              id: "basic",              price: "$29/year",              name: "Basic",              features: [
                "5 edits per year",                "Email support",                "Template library access",                "Basic customization tools"],
              buttons: [
                { text: "Get Started", href: "/contact" },
                { text: "Learn More", href: "#" },
              ],
            },
            {
              id: "standard",              badge: "Most Popular",              badgeIcon: Star,
              price: "$59/year",              name: "Standard",              features: [
                "10 edits per year",                "Priority email support",                "Template library access",                "Advanced customization",                "Analytics dashboard"],
              buttons: [
                { text: "Get Started", href: "/contact" },
                { text: "Learn More", href: "#" },
              ],
            },
            {
              id: "premium",              price: "$149/year",              name: "Premium",              features: [
                "Unlimited edits",                "24/7 priority support",                "Template library access",                "Custom design requests",                "Advanced analytics",                "White-label options"],
              buttons: [
                { text: "Get Started", href: "/contact" },
                { text: "Learn More", href: "#" },
              ],
            },
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="What Our Users Say"
          description="Real feedback from creators, agencies, and business owners who've launched with ANLY"
          tag="Testimonials"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              role: "Freelance Designer",              company: "Creative Collective",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/front-view-professional-business-woman-suit_23-2148603020.jpg",              imageAlt: "Sarah Johnson"},
            {
              id: "2",              name: "Michael Chen",              role: "Agency Owner",              company: "TechFlow Designs",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-suit-looking-camera_23-2148112202.jpg",              imageAlt: "Michael Chen"},
            {
              id: "3",              name: "Emily Rodriguez",              role: "Restaurant Owner",              company: "Modern Bistro Group",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/happy-young-businesswoman-holding-diary-looking-camera-workplace_23-2148187204.jpg",              imageAlt: "Emily Rodriguez"},
            {
              id: "4",              name: "David Kim",              role: "Small Business Owner",              company: "StartUp Ventures",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-confident-businessman-wearing-glasses_158595-5353.jpg",              imageAlt: "David Kim"},
          ]}
          kpiItems={[
            { value: "2500+", label: "Active Users" },
            { value: "98%", label: "Satisfaction Rate" },
            { value: "50+", label: "Template Library" },
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Everything you need to know about ANLY templates and services"
          tag="Help & Support"
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="blur-reveal"
          faqs={[
            {
              id: "1",              title: "What's included in each template?",              content:
                "Every template includes a fully responsive design, SEO optimization, contact forms, social media integration, and access to our editing tools. Additional features vary by template type and tier."},
            {
              id: "2",              title: "Can I customize the templates?",              content:
                "Yes! All templates are fully customizable. You can edit content, colors, fonts, and layout using our intuitive interface. Premium subscribers get unlimited edits and priority support for customizations."},
            {
              id: "3",              title: "Do I need coding knowledge?",              content:
                "Not at all! Our templates and editing tools are designed for non-technical users. Everything is drag-and-drop, making it easy for anyone to create and maintain a professional website."},
            {
              id: "4",              title: "What are the subscription tiers for?",              content:
                "Subscriptions cover editing services. Basic includes 5 edits/year, Standard includes 10 edits/year, and Premium includes unlimited edits with priority support. You can purchase templates separately or bundled with subscriptions."},
            {
              id: "5",              title: "Can agencies use these templates for clients?",              content:
                "Yes! Our Professional & Agencies tier includes white-label options, making templates perfect for reselling to your clients. Volume pricing is available for agencies using multiple templates."},
            {
              id: "6",              title: "What payment methods do you accept?",              content:
                "We accept all major credit cards, PayPal, and offer monthly billing options. Enterprise customers can arrange custom payment terms. All transactions are secure and encrypted."},
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          title="Ready to Launch Your Professional Website?"
          description="Join thousands of freelancers, agencies, and businesses already using ANLY templates. Browse templates, customize with ease, and launch today."
          tagIcon={Rocket}
          background={{ variant: "rotated-rays-animated-grid" }}
          useInvertedBackground={false}
          inputPlaceholder="Enter your email"
          buttonText="Browse Templates"
          termsText="By signing up, you agree to our Terms and Conditions. We respect your privacy and will only send template updates and special offers."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="ANLY"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}