"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Sparkles, Star, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="largeSizeMediumTitles"
      background="aurora"
      cardStyle="gradient-radial"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          navItems={[
            { name: "About", id: "about" },
            { name: "Services", id: "features" },
            { name: "Portfolio", id: "product" },
            { name: "Pricing", id: "pricing" },
            { name: "Testimonials", id: "testimonial" }
          ]}
          brandName="Webild"
          button={{ text: "View Our Work", href: "product" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="Webild"
          description="We combine intelligent automation with human design to launch professional websites for your business in days, not months. See how company owners like you are already online."
          buttons={[
            { text: "View Our Work", href: "product" },
            { text: "Get Started", href: "#pricing" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP431LJkn9B49wp9ANEtEnz5um/a-modern-web-design-studio-workspace-wit-1772480841923-2c270ea0.png"
          imageAlt="AI-powered web design studio"
          showDimOverlay={true}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="Why Webild"
          tagIcon={Zap}
          title="Fast, affordable websites powered by AI and human expertise"
          useInvertedBackground={false}
          buttons={[
            { text: "Learn Our Process", href: "features" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardMedia
          title="Our Process"
          description="From discovery to deployment, we use AI to accelerate every stage while maintaining the human touch that makes websites truly effective."
          tag="Methodology"
          features={[
            {
              id: "1",              title: "Discovery & Strategy",              description: "We understand your business goals and target audience, using AI-powered insights to inform our strategy.",              tag: "Phase 1",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP431LJkn9B49wp9ANEtEnz5um/illustration-showing-user-research-proce-1772480843188-8cd6366c.png",              imageAlt: "Research and discovery phase"
            },
            {
              id: "2",              title: "Design & Prototyping",              description: "Our designers create stunning visuals while AI assists with layout optimization and accessibility compliance.",              tag: "Phase 2",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP431LJkn9B49wp9ANEtEnz5um/illustration-of-modern-website-design-pr-1772480842960-edd63d89.png",              imageAlt: "Design and prototyping phase"
            },
            {
              id: "3",              title: "Development & Testing",              description: "We build fast, scalable websites using modern technology and AI-assisted code optimization.",              tag: "Phase 3",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP431LJkn9B49wp9ANEtEnz5um/illustration-of-web-development-workflow-1772480842726-6326703d.png",              imageAlt: "Development and testing phase"
            },
            {
              id: "4",              title: "Launch & Support",              description: "We deploy your site and provide ongoing support to ensure your success and continuous improvement.",              tag: "Phase 4",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP431LJkn9B49wp9ANEtEnz5um/illustration-showing-website-launch-and--1772480842980-a998ba9f.png",              imageAlt: "Launch and support phase"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="product" data-section="product">
        <ProductCardThree
          title="Recent Work"
          description="Explore websites we've built for businesses like yours. Each project showcases our ability to create high-converting, beautiful websites that drive real results."
          tag="Portfolio"
          products={[
            {
              id: "1",              name: "E-Commerce Fashion Brand",              price: "View Project",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP431LJkn9B49wp9ANEtEnz5um/a-beautiful-e-commerce-website-homepage--1772480843485-34ed0a65.png",              imageAlt: "E-commerce website for fashion brand"
            },
            {
              id: "2",              name: "SaaS Analytics Platform",              price: "View Project",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP431LJkn9B49wp9ANEtEnz5um/a-sleek-saas-product-dashboard-interface-1772480842570-e8bef2ed.png",              imageAlt: "SaaS product dashboard interface"
            },
            {
              id: "3",              name: "Professional Services Site",              price: "View Project",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP431LJkn9B49wp9ANEtEnz5um/a-professional-service-provider-website--1772480845486-e95ca796.png",              imageAlt: "Professional services website"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Trusted by Innovative Companies"
          description="From startups to established businesses, companies across industries rely on Webild to build their web presence."
          tag="Partners"
          textboxLayout="default"
          useInvertedBackground={false}
          names={["Stripe", "Figma", "Slack", "Notion", "Monday.com", "Zapier", "Intercom", "Miro"]}
          logos={[
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP431LJkn9B49wp9ANEtEnz5um/stripe-company-logo-minimal-and-modern-f-1772480840948-3b1e4092.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP431LJkn9B49wp9ANEtEnz5um/figma-design-tool-logo-colorful-collabor-1772480842127-3760d891.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP431LJkn9B49wp9ANEtEnz5um/slack-communication-platform-logo-colorf-1772480841533-ec26831a.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP431LJkn9B49wp9ANEtEnz5um/notion-productivity-platform-logo-minima-1772480841250-f4d94321.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP431LJkn9B49wp9ANEtEnz5um/monday-com-work-management-platform-logo-1772480841198-e6c6627e.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP431LJkn9B49wp9ANEtEnz5um/zapier-automation-platform-logo-distinct-1772480841110-30f43b1e.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP431LJkn9B49wp9ANEtEnz5um/intercom-customer-communication-platform-1772480841784-4e3504c8.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP431LJkn9B49wp9ANEtEnz5um/miro-collaborative-whiteboard-platform-l-1772480841616-9d99800a.png"
          ]}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Simple, Transparent Pricing"
          description="No hidden fees. Choose the plan that works best for your business. All plans include free consultations and revisions."
          tag="Pricing"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          plans={[
            {
              id: "basic",              price: "$2,999",              name: "Starter",              buttons: [
                { text: "Get Started", href: "contact" },
                { text: "Chat to Sales", href: "contact" }
              ],
              features: [
                "5-10 page website",                "Mobile responsive design",                "Basic SEO optimization",                "2 months support included",                "AI-powered copywriting assistance"
              ]
            },
            {
              id: "pro",              badge: "Most Popular",              badgeIcon: Sparkles,
              price: "$6,999",              name: "Professional",              buttons: [
                { text: "Get Started", href: "contact" },
                { text: "Chat to Sales", href: "contact" }
              ],
              features: [
                "15-25 page website",                "E-commerce integration",                "Advanced SEO optimization",                "6 months support included",                "Analytics dashboard setup",                "AI-powered optimization tools"
              ]
            },
            {
              id: "enterprise",              price: "$12,999+",              name: "Enterprise",              buttons: [
                { text: "Get Started", href: "contact" },
                { text: "Chat to Sales", href: "contact" }
              ],
              features: [
                "Unlimited pages",                "Full e-commerce platform",                "Custom integrations",                "12 months priority support",                "Advanced analytics & reporting",                "AI-driven personalization engine"
              ]
            }
          ]}
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP431LJkn9B49wp9ANEtEnz5um/professional-headshot-of-a-confident-fem-1772480841048-b0aa8f21.png",              imageAlt: "Sarah Mitchell, CEO"
            },
            {
              id: "2",              name: "David Chen",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP431LJkn9B49wp9ANEtEnz5um/professional-headshot-of-a-male-entrepre-1772480841605-8f87050d.png",              imageAlt: "David Chen, Founder"
            },
            {
              id: "3",              name: "Jessica Rodriguez",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP431LJkn9B49wp9ANEtEnz5um/professional-headshot-of-a-female-market-1772480841151-fbccd8f8.png",              imageAlt: "Jessica Rodriguez, Marketing Director"
            },
            {
              id: "4",              name: "Michael Thompson",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP431LJkn9B49wp9ANEtEnz5um/professional-headshot-of-a-male-business-1772480842066-71431911.png",              imageAlt: "Michael Thompson, Business Owner"
            },
            {
              id: "5",              name: "Emma Wilson",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP431LJkn9B49wp9ANEtEnz5um/professional-headshot-of-a-female-startu-1772480842439-1941180f.png",              imageAlt: "Emma Wilson, Startup Founder"
            },
            {
              id: "6",              name: "James Patterson",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP431LJkn9B49wp9ANEtEnz5um/professional-headshot-of-a-male-creative-1772480841644-d223523b.png",              imageAlt: "James Patterson, Creative Director"
            }
          ]}
          cardTitle="Over 150+ satisfied clients have launched successful websites with Webild"
          cardTag="See what they're saying"
          cardTagIcon={Star}
          cardAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Everything you need to know about our AI-powered website building services"
          tag="Support"
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "How long does it take to build a website?",              content: "Most websites are launched in 4-8 weeks depending on complexity. Our AI-assisted process accelerates development while maintaining quality. We keep you updated every step of the way."
            },
            {
              id: "2",              title: "Will my website be mobile responsive?",              content: "Absolutely. All Webild websites are fully responsive and tested across all devices. We use AI-powered design tools to ensure optimal viewing on mobile, tablet, and desktop."
            },
            {
              id: "3",              title: "What if I want to make changes after launch?",              content: "Your plan includes ongoing support. All clients get access to our support portal for updates and modifications. Enterprise clients receive dedicated support specialists."
            },
            {
              id: "4",              title: "Do you provide SEO optimization?",              content: "Yes! SEO is built into every website we create. We use AI-powered tools to optimize structure, content, and metadata for search engines. Higher-tier plans include ongoing optimization."
            },
            {
              id: "5",              title: "Can you integrate with my existing tools?",              content: "Yes. We can integrate with most popular platforms including CRM systems, email marketing tools, analytics platforms, and e-commerce solutions."
            },
            {
              id: "6",              title: "What's included in the support?",              content: "Support includes bug fixes, minor updates, performance monitoring, and technical assistance. The duration varies by plan (2, 6, or 12 months of included support)."
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Webild"
          columns={[
            {
              title: "Product",              items: [
                { label: "Our Services", href: "#features" },
                { label: "Portfolio", href: "#product" },
                { label: "Pricing", href: "#pricing" },
                { label: "Process", href: "#features" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Testimonials", href: "#testimonial" },
                { label: "FAQ", href: "#faq" },
                { label: "Contact", href: "#" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Blog", href: "#" },
                { label: "Case Studies", href: "#" },
                { label: "Documentation", href: "#" },
                { label: "Support", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" },
                { label: "Accessibility", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Webild | Websites Built Fast with AI"
        />
      </div>
    </ThemeProvider>
  );
}
