"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureProcessSteps from '@/components/sections/feature/FeatureProcessSteps';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Leaf, Sparkles, ShoppingBag, Heart, CheckCircle, Award } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="largeSmall"
      background="aurora"
      cardStyle="soft-shadow"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Clear"
          navItems={[
            { name: "Shop", id: "products" },
            { name: "About", id: "about" },
            { name: "Sustainability", id: "features" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "View Collection",            href: "#products"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardDashboard
          tag="Sustainable Fashion"
          tagIcon={Leaf}
          title="Fashion That's Refreshingly Clear"
          description="Premium sustainable clothing designed with transparency at every step. Know your impact, feel the quality, wear with confidence."
          background={{ variant: "radial-gradient" }}
          buttons={[
            { text: "Shop Now", href: "#products" },
            { text: "Learn More", href: "#about" }
          ]}
          dashboard={{
            title: "Our Impact",            logoIcon: Leaf,
            imageSrc: "http://img.b2bpic.net/free-photo/woman-clothesline-fields_23-2148170148.jpg",            imageAlt: "Sustainable fashion collection",            searchPlaceholder: "Find your perfect piece",            buttons: [
              { text: "Explore", href: "#products" },
              { text: "Sustainability Report", href: "#features" }
            ],
            sidebarItems: [
              { icon: ShoppingBag },
              { icon: Leaf },
              { icon: Heart }
            ],
            stats: [
              {
                title: "Materials",                values: [100, 100, 100],
                valueSuffix: "%",                description: "Organic & sustainable"
              },
              {
                title: "Carbon Neutral",                values: [2024, 2025, 2026],
                valuePrefix: "By ",                description: "Production timeline"
              },
              {
                title: "Customers",                values: [5200, 8400, 12100],
                description: "Join our community"
              }
            ],
            chartTitle: "Growth Impact",            chartData: [
              { value: 40 },
              { value: 60 },
              { value: 80 },
              { value: 70 },
              { value: 90 }
            ],
            listTitle: "Latest Updates",            listItems: [
              {
                icon: CheckCircle,
                title: "New organic cotton line",                status: "Available"
              },
              {
                icon: Leaf,
                title: "Zero-waste packaging",                status: "Launched"
              },
              {
                icon: Award,
                title: "Eco-certified production",                status: "Verified"
              }
            ]
          }}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardFour
          title="Featured Collection"
          description="Discover our carefully curated selection of sustainable essentials"
          tag="New Arrivals"
          tagIcon={Sparkles}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          products={[
            {
              id: "1",              name: "Organic Cotton T-Shirt",              price: "$45",              variant: "White  3 Colors",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-cute-young-girl-smiling_23-2148675714.jpg",              imageAlt: "Organic cotton white t-shirt",              isFavorited: false
            },
            {
              id: "2",              name: "Sustainable Denim",              price: "$89",              variant: "Classic Blue  2 Washes",              imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-leaning-wall-white-tshirt-terracotta-pants_24972-2945.jpg",              imageAlt: "Sustainable denim jeans",              isFavorited: false
            },
            {
              id: "3",              name: "Eco-Friendly Sweater",              price: "$65",              variant: "Natural Beige  4 Sizes",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-adorable-young-girl-smiling_23-2148675717.jpg",              imageAlt: "Organic wool sweater",              isFavorited: false
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Our Mission"
          tagIcon={Leaf}
          title="Transparency in Every Thread"
          description="Clear was founded on a simple principle: fashion should never come at the expense of our planet or people. We believe in radical transparency, ethical production, and timeless design that lasts. Every piece tells a story of sustainability."
          metrics={[
            {
              value: "100%",              title: "Traceable Supply Chain"
            },
            {
              value: "Zero",              title: "Harmful Chemicals Used"
            }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/researchers-looking-alternative-energy-souces_23-2149311440.jpg"
          imageAlt="Sustainable production facility"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureProcessSteps
          tag="Our Process"
          tagIcon={Sparkles}
          title="Sustainable Fashion Made Simple"
          description="We've reimagined fashion production to prioritize people and the planet without compromising on style or quality."
          useInvertedBackground="invertDefault"
          steps={[
            {
              number: "01",              title: "Ethically Sourced Materials",              tag: "Verified",              description: "We partner with certified organic and fair-trade suppliers who share our values. Every material is traceable and responsibly sourced."
            },
            {
              number: "02",              title: "Carbon-Neutral Production",              tag: "Certified",              description: "Our facilities use renewable energy and sustainable practices. We offset remaining emissions through verified environmental projects."
            },
            {
              number: "03",              title: "Timeless Design",              tag: "Durable",              description: "We design for longevity, not trends. Each piece is built to last, reducing waste and encouraging mindful consumption."
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="What Our Community Says"
          description="Join thousands of conscious consumers who've made the switch to sustainable fashion"
          tag="Testimonials"
          tagIcon={Heart}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          showRating={true}
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              handle: "@sarahmitchell",              testimonial: "Finally found a brand that aligns with my values. The quality is exceptional and knowing exactly where my clothes come from makes me feel good about every purchase.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",              name: "James Chen",              handle: "@jchen_studio",              testimonial: "The transparency is incredible. I appreciate being able to trace exactly how my pieces were made. Clear is redefining what sustainable fashion means.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",              imageAlt: "James Chen"
            },
            {
              id: "3",              name: "Emma Rodriguez",              handle: "@emmadesigns",              testimonial: "These pieces are investment-worthy. The durability and timeless design mean I actually wear everything. No more fast fashion guilt.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg",              imageAlt: "Emma Rodriguez"
            },
            {
              id: "4",              name: "Lisa Wang",              handle: "@lisawang_eco",              testimonial: "Clear changed how I think about fashion. The quality speaks for itself, and the mission-driven approach is truly refreshing.",              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: "Lisa Wang"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Stay Updated"
          title="Join the Clear Community"
          description="Subscribe to our newsletter for sustainable fashion tips, new collections, and exclusive offers from Clear."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground="invertDefault"
          inputPlaceholder="Enter your email"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe at any time. By subscribing, you agree to receive marketing emails from Clear."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Shop",              items: [
                { label: "New Arrivals", href: "#products" },
                { label: "Collections", href: "#products" },
                { label: "Sale", href: "#products" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Sustainability", href: "#features" },
                { label: "Impact Report", href: "#features" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Contact", href: "#contact" },
                { label: "FAQ", href: "#" },
                { label: "Returns", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Clear | Sustainable Fashion. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}