"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSignup from '@/components/sections/hero/HeroSignup';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Sparkles, Package, Users, Star, Globe, Heart } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumLarge"
      background="aurora"
      cardStyle="inset"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Style"
          navItems={[
            { name: "Shop", id: "products" },
            { name: "About", id: "about" },
            { name: "Reviews", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Shop Now", href: "#products" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSignup
          title="Discover Your Perfect Style"
          description="Curated collections of premium clothing designed for the modern individual. Elevate your wardrobe with our exclusive pieces."
          tag="Premium Fashion"
          tagIcon={Sparkles}
          background={{ variant: "sparkles-gradient" }}
          inputPlaceholder="Enter your email for exclusive offers"
          buttonText="Get Early Access"
          onSubmit={(email) => console.log('Signup:', email)}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardFour
          title="Featured Collections"
          description="Handpicked essentials that define modern style and comfort"
          tag="New Arrivals"
          tagIcon={Package}
          products={[
            {
              id: "1",              name: "Classic Linen T-Shirt",              price: "$65",              variant: "White, Black, Sage  4 Colors",              imageSrc: "http://img.b2bpic.net/free-photo/shirt-mockup-concept-with-plain-clothing_23-2149448760.jpg",              imageAlt: "Classic Linen T-Shirt",              isFavorited: false
            },
            {
              id: "2",              name: "Tailored Denim Jeans",              price: "$120",              variant: "Light Blue, Dark Indigo  3 Colors",              imageSrc: "http://img.b2bpic.net/free-photo/shirt-mockup-concept-with-plain-clothing_23-2149448756.jpg",              imageAlt: "Tailored Denim Jeans",              isFavorited: false
            },
            {
              id: "3",              name: "Elegant Evening Dress",              price: "$185",              variant: "Black, Navy, Burgundy  2 Colors",              imageSrc: "http://img.b2bpic.net/free-photo/shirt-mockup-concept-with-plain-clothing_23-2149448743.jpg",              imageAlt: "Elegant Evening Dress",              isFavorited: false
            },
            {
              id: "4",              name: "Premium Wool Jacket",              price: "$250",              variant: "Charcoal, Camel, Black  3 Colors",              imageSrc: "http://img.b2bpic.net/free-photo/shirt-mockup-concept-with-plain-clothing_23-2149448762.jpg",              imageAlt: "Premium Wool Jacket",              isFavorited: false
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          buttons={[{ text: "View All Products", href: "#products" }]}
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Why Choose Style"
          description="We believe fashion should be accessible, sustainable, and empowering. Every piece in our collection is carefully curated to celebrate individuality and confidence."
          tag="About Style"
          imageSrc="http://img.b2bpic.net/free-photo/portrait-beautiful-lady-trench-coat-lingerie-black-shoes-heels-standing-thoughtfully-looking-camera_574295-5625.jpg"
          imageAlt="Style Fashion Collection"
          useInvertedBackground="noInvert"
          buttons={[{ text: "Learn Our Story", href: "#about" }]}
        />
      </div>

      <div id="highlights" data-section="highlights">
        <FeatureCardSixteen
          title="Why Our Customers Love Style"
          description="Experience the difference quality craftsmanship and customer care make"
          tag="What Sets Us Apart"
          negativeCard={{
            items: [
              "Fast fashion compromises quality",              "Unclear material sourcing",              "Limited size inclusivity",              "Poor customer support"
            ]
          }}
          positiveCard={{
            items: [
              "Premium sustainable materials",              "Transparent ethical sourcing",              "Sizes XS to 3XL available",              "24/7 dedicated support team"
            ]
          }}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="collections" data-section="collections">
        <MetricCardOne
          title="Our Impact"
          description="Building a community of style-conscious individuals worldwide"
          tag="By The Numbers"
          metrics={[
            {
              id: "1",              value: "50K",              title: "Happy Customers",              description: "Worldwide community of fashion enthusiasts",              icon: Users
            },
            {
              id: "2",              value: "500+",              title: "Unique Pieces",              description: "Curated collection of premium clothing",              icon: Package
            },
            {
              id: "3",              value: "95%",              title: "Satisfaction Rate",              description: "Customer satisfaction and repeat purchases",              icon: Star
            },
            {
              id: "4",              value: "40+",              title: "Global Countries",              description: "Shipping to fashion lovers worldwide",              icon: Globe
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="What Our Customers Say"
          description="Real feedback from real fashion lovers who trust Style"
          tag="Customer Reviews"
          tagIcon={Heart}
          testimonials={[
            {
              id: "1",              name: "Sarah Martinez",              handle: "@sarahstyled",              testimonial: "Finally found a brand that understands quality and style. Every piece I've purchased from Style has exceeded my expectations. The fit is perfect and the materials are incredible!",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",              imageAlt: "Sarah Martinez"
            },
            {
              id: "2",              name: "James Thompson",              handle: "@jthompson88",              testimonial: "The customer service team at Style went above and beyond to help me find the perfect jacket. They're knowledgeable, friendly, and genuinely care about customer satisfaction.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg",              imageAlt: "James Thompson"
            },
            {
              id: "3",              name: "Emily Chen",              handle: "@emilyfindsthestyle",              testimonial: "I love how Style combines fashion with sustainability. Knowing that my clothes are ethically made makes me feel good about my purchases. Plus, the designs are absolutely stunning!",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-good-looking-smiling-friendly-female-trainee-ready-tackle-assignments-smiling-broadly-feeling-lucky-day-work-self-assured-encouraged-achieve-success-goal-white-wall_176420-35567.jpg",              imageAlt: "Emily Chen"
            },
            {
              id: "4",              name: "Michael Rodriguez",              handle: "@mrodriguez_fashion",              testimonial: "Style has transformed my wardrobe. The quality is unmatched at this price point, and the collection is diverse enough to match any style aesthetic. Highly recommend!",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",              imageAlt: "Michael Rodriguez"
            }
          ]}
          showRating={true}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Stay Connected with Style"
          description="Subscribe to our newsletter for exclusive offers, styling tips, and new collection launches. Join thousands of fashion enthusiasts receiving Style's latest updates."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email", required: true }
          ]}
          textarea={{
            name: "message",            placeholder: "How can we help?",            rows: 4,
            required: false
          }}
          useInvertedBackground="noInvert"
          imageSrc="http://img.b2bpic.net/free-photo/portrait-indigenous-person-integrated-into-modern-life_23-2151102537.jpg"
          mediaPosition="right"
          buttonText="Subscribe"
          onSubmit={(data) => console.log('Contact:', data)}
        />
      </div>

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