"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterSplit from '@/components/sections/footer/FooterSplit';
import { Sparkles, Heart, Search, Mail, Phone, MapPin } from "lucide-react";

export default function Page() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="large"
      sizing="medium"
      background="fluid"
      cardStyle="noise"
      primaryButtonStyle="neon-glow-border"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="StyleMatch"
          navItems={[
            { name: "Search", id: "search" },
            { name: "How It Works", id: "how-it-works" },
            { name: "Brands", id: "brands" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Start Searching",
            href: "#search"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="Find Your Perfect Brand Match"
          description="Search for any clothing style and discover brands that match your taste. Get personalized brand recommendations instantly."
          tag="Smart Fashion Discovery"
          tagIcon={Sparkles}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766247954480-jda2xd2t.jpg"
          imageAlt="Fashion shopping interface"
          buttons={[
            {
              text: "Start Searching",
              href: "#search"
            },
            {
              text: "Learn More",
              href: "#how-it-works"
            }
          ]}
        />
      </div>

      <div id="search" data-section="search">
        <FeatureCardSixteen
          title="Smart Clothing Search Engine"
          description="Our AI-powered platform understands your style preferences and connects you with brands you'll love."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          negativeCard={{
            title: "Without Our Engine",
            items: [
              "Endless browsing through unknown brands",
              "Difficulty finding your style match",
              "No personalized brand suggestions",
              "Wasting time on irrelevant shops"
            ]
          }}
          positiveCard={{
            title: "With StyleMatch",
            items: [
              "Instant brand recommendations",
              "Perfect style matches discovered",
              "Personalized shopping experience",
              "Save time, find your brands"
            ]
          }}
          animationType="slide-up"
        />
      </div>

      <div id="brands" data-section="brands">
        <ProductCardFour
          title="Discover Recommended Brands"
          description="Based on your search, here are brands that match your style preferences perfectly."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          tag="Your Matches"
          tagIcon={Heart}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          containerStyle="default"
          products={[
            {
              id: "1",
              name: "Premium Casual Wear",
              price: "$50-150",
              variant: "Modern Basics • 5 Colors",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766250302553-fgnqh61i.jpg",
              imageAlt: "T-shirt collection"
            },
            {
              id: "2",
              name: "Stylish Outerwear",
              price: "$120-300",
              variant: "Seasonal Jackets • 8 Colors",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766247953617-xl6i8c5j.jpg",
              imageAlt: "Jacket collection"
            },
            {
              id: "3",
              name: "Classic Denim",
              price: "$60-200",
              variant: "Premium Fit • 6 Colors",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766250303489-hnf0j7qv.jpg",
              imageAlt: "Jeans collection"
            }
          ]}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Trusted by Fashion Lovers"
          description="Partner with leading brands recognized worldwide for style and quality."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          logos={[
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140106374-le5uxrj5.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140107205-4bafhl5z.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140109000-ndb7534s.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766250304665-iryylp0q.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140110880-q16dspxs.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140108208-9jx2n5py.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140111672-sfjpgvql.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183580042-1z23mdom.jpg"
          ]}
        />
      </div>

      <div id="how-it-works" data-section="how-it-works">
        <MetricCardFourteen
          title="Simple three-step process to discover brands you'll love. Search, match, explore."
          tag="How It Works"
          useInvertedBackground="noInvert"
          metrics={[
            {
              id: "1",
              value: "Step 1",
              description: "Enter any clothing style, brand, or look you're interested in"
            },
            {
              id: "2",
              value: "Step 2",
              description: "Our AI engine analyzes and finds matching brands instantly"
            },
            {
              id: "3",
              value: "Step 3",
              description: "Browse recommendations and shop directly from your matches"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="StyleMatch completely changed how I shop. I found brands I never knew existed that perfectly match my style. Highly recommend!"
          rating={5}
          author="Sarah Chen, Fashion Enthusiast"
          avatars={[
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140062551-7eyqwr2v.jpg",
              alt: "Sarah"
            },
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766182321167-i4kvpj5f.jpg",
              alt: "John"
            },
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766250306070-vb1yt84n.jpg",
              alt: "Emma"
            },
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140063369-vzpeyskp.jpg",
              alt: "Michael"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Everything you need to know about searching and discovering brands."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",
              title: "How does the brand matching work?",
              content: "Our AI engine analyzes your search queries and compares them against our database of thousands of brands. We use style, price point, quality, and customer reviews to find the best matches for your preferences."
            },
            {
              id: "2",
              title: "Can I search for specific clothing items?",
              content: "Yes! You can search for clothing types (like 'casual t-shirts'), styles (like 'minimalist'), price ranges, or even describe the look you want. Our search is flexible and understands natural language."
            },
            {
              id: "3",
              title: "Are the recommendations personalized?",
              content: "Our recommendations become more personalized as you use the platform. Each search helps us understand your style better, so future suggestions will be increasingly tailored to you."
            },
            {
              id: "4",
              title: "Can I shop directly from recommendations?",
              content: "Yes! Each recommended brand has a direct link to their shop or website. You can browse their collections and make purchases directly from there."
            },
            {
              id: "5",
              title: "Is StyleMatch free to use?",
              content: "Our basic search and brand recommendations are completely free. We also offer premium features for users who want advanced filters and personalized style profiles."
            },
            {
              id: "6",
              title: "How often are brand recommendations updated?",
              content: "We update our brand database and product information daily. New brands are added regularly, ensuring you always have access to the latest and most relevant recommendations."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Ready to discover your style?"
          ctaDescription="Start searching now and find brands that match your fashion preferences perfectly."
          ctaButton={{
            text: "Begin Search",
            href: "#search"
          }}
          ctaIcon={Search}
          useInvertedBackground="noInvert"
          animationType="slide-up"
          faqs={[
            {
              id: "1",
              title: "What if I don't find what I'm looking for?",
              content: "Our search engine is constantly learning. If you don't find matches initially, try different search terms or descriptions. You can also contact our support team for personalized brand recommendations."
            },
            {
              id: "2",
              title: "Do you work with all brands?",
              content: "We partner with hundreds of major and emerging brands. We're always adding new ones. If there's a specific brand you'd like to see featured, let us know!"
            },
            {
              id: "3",
              title: "How can I provide feedback?",
              content: "We love hearing from our users! You can share feedback directly through your account settings or email us at feedback@stylematch.com with your suggestions."
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSplit
          logoText="StyleMatch"
          title="Find your perfect brand match in seconds. Smart fashion discovery starts here."
          columns={[
            {
              title: "Product",
              items: [
                { label: "Search Engine", href: "#search" },
                { label: "Brand Recommendations", href: "#brands" },
                { label: "How It Works", href: "#how-it-works" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "#about" },
                { label: "Blog", href: "#blog" },
                { label: "Careers", href: "#careers" }
              ]
            },
            {
              title: "Resources",
              items: [
                { label: "Help Center", href: "#help" },
                { label: "Contact", href: "#contact" },
                { label: "FAQ", href: "#faq" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Privacy Policy", href: "/privacy" },
                { label: "Terms of Service", href: "/terms" },
                { label: "Cookie Policy", href: "/cookies" }
              ]
            }
          ]}
          contactItems={[
            {
              icon: Mail,
              text: "support@stylematch.com"
            },
            {
              icon: Phone,
              text: "+1 (555) 123-4567"
            },
            {
              icon: MapPin,
              text: "123 Fashion Street, Style City, SC 12345"
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}