"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="largeSmall"
        background="fluid"
        cardStyle="subtle-shadow"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="solid"
        headingFontWeight="light"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            navItems={[
              { name: "Shop", id: "#products" },
              { name: "About", id: "#about" },
              { name: "Contact", id: "#contact" }
            ]}
            brandName="MODA"
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroBillboardRotatedCarousel
            background={{ variant: "rotated-rays-animated" }}
            title="Elevate Your Wardrobe with Timeless, Ethical Apparel"
            description="Premium apparel crafted for the conscious, contemporary individual."
            buttons={[{ text: "Shop Now", href: "#products" }]}
            carouselItems={[
              { id: "c1", imageSrc: "http://img.b2bpic.net/free-photo/fashionable-long-legs-brunette-model-long-black-cloak-posed-outdoor-winter-day-against-old-grunge-wall_627829-14032.jpg?_wi=1", imageAlt: "Model in streetwear" },
              { id: "c2", imageSrc: "http://img.b2bpic.net/free-photo/photo-serious-young-woman-with-bun-hairstyle-eyeliner-makeup-dressed-fashionable-outfit-keeps-hands-waist-poses-outdoors-against-urban-background-focused-camera-view-from_273609-57794.jpg", imageAlt: "Urban fashion style" },
              { id: "c3", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-blue-jacket_23-2149020778.jpg", imageAlt: "Editorial style shot" },
              { id: "c4", imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-hippie-women-models-summer-sunny-day-bright-colorful-hipster-clothes_158538-14303.jpg", imageAlt: "Summer lookbook model" },
              { id: "c5", imageSrc: "http://img.b2bpic.net/free-photo/cool-brunet-bearded-man-sunglasses-beige-shorts-orange-jacket-leans-white-wall-outside-crosses-arms_197531-28761.jpg", imageAlt: "Modern clothing fashion" },
              { id: "c6", imageSrc: "http://img.b2bpic.net/free-photo/stylish-sexy-woman-dressed-elegant-tuxedo-suit-walking-city-summer-spring-day_285396-8010.jpg", imageAlt: "Fashion aesthetic model" }
            ]}
          />
        </div>

        <div id="about" data-section="about">
          <MediaAbout
            useInvertedBackground={false}
            title="Designed with Purpose"
            description="We believe in high-quality materials and ethical production. Every garment tells a story of craftsmanship and dedication to timeless style."
            imageSrc="http://img.b2bpic.net/free-photo/craftsman-tailoring-studio_482257-84190.jpg"
            imageAlt="Behind the scenes of our fashion studio"
          />
        </div>

        <div id="products" data-section="products">
          <ProductCardFour
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="uniform-all-items-equal"
            useInvertedBackground={false}
            products={[
              { id: "p1", name: "Essential Cotton Tee", price: "$45", variant: "White", imageSrc: "http://img.b2bpic.net/free-photo/coffee-cup-with-gift-box-notepad_23-2147992512.jpg" },
              { id: "p2", name: "Urban Denim Jacket", price: "$120", variant: "Vintage Indigo", imageSrc: "http://img.b2bpic.net/free-photo/young-japanese-woman-with-jacket-posing-mirror_23-2148870748.jpg" },
              { id: "p3", name: "Tailored Chinos", price: "$85", variant: "Navy", imageSrc: "http://img.b2bpic.net/free-photo/composition-fathers-day-with-accessories_23-2147790928.jpg" },
              { id: "p4", name: "Summer Midi Dress", price: "$95", variant: "Floral Print", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-smiling-female-trendy-summer-overalls-sexy-woman-with-posing-near-yellow-wall-studio-positive-model-having-fun-cheerful-happy_158538-25384.jpg" },
              { id: "p5", name: "Signature Hoodie", price: "$70", variant: "Slate Gray", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-white-hoodie-blue-jeans-posing-against-neon-background_89887-1138.jpg" },
              { id: "p6", name: "Minimalist Leather Belt", price: "$50", variant: "Tan", imageSrc: "http://img.b2bpic.net/free-photo/fast-fashion-vs-slow-sustainable-fashion_23-2149134029.jpg" }
            ]}
            title="Explore Our Collection"
            description="Curated pieces designed to elevate your everyday wardrobe."
          />
        </div>

        <div id="features" data-section="features">
          <FeatureCardTwelve
            animationType="slide-up"
            textboxLayout="split"
            useInvertedBackground={false}
            features={[
              { id: "f1", label: "Ethical", title: "Sustainable Practices", items: ["Fair trade sourced", "Eco-friendly dyes", "Recycled packaging"] },
              { id: "f2", label: "Durability", title: "Built to Last", items: ["Reinforced stitching", "High-denier fabrics", "Wash-tested quality"] },
              { id: "f3", label: "Design", title: "Timeless Aesthetics", items: ["Classic silhouettes", "Versatile colors", "Minimalist aesthetic"] }
            ]}
            title="Quality Built In"
            description="We don't compromise on the details that make clothes last."
          />
        </div>

        <div id="pricing" data-section="pricing">
          <PricingCardNine
            animationType="slide-up"
            textboxLayout="split-description"
            useInvertedBackground={false}
            plans={[
              { id: "pl1", title: "Standard", price: "Free", period: "forever", features: ["Seasonal newsletter", "Standard shipping"], button: { text: "Sign Up" }, imageSrc: "http://img.b2bpic.net/free-photo/stylish-hipster-arab-man-guy-sunglasses-posed-outdoor-street-sunset-against-gray-wall_627829-2738.jpg" },
              { id: "pl2", title: "Insider", price: "$15", period: "/mo", features: ["Free express shipping", "Early access drops", "Member-only discounts"], button: { text: "Join for Exclusive Benefits" }, imageSrc: "http://img.b2bpic.net/free-photo/fashionable-long-legs-brunette-model-long-black-cloak-posed-outdoor-winter-day-against-old-grunge-wall_627829-14032.jpg?_wi=2" }
            ]}
            title="Membership Perks"
            description="Join our community for exclusive early access and savings."
          />
        </div>

        <div id="metrics" data-section="metrics">
          <MetricCardSeven
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            metrics={[
              { id: "m1", value: "10k+", title: "Happy Customers", items: ["Verified reviews", "Returning shoppers"] },
              { id: "m2", value: "500+", title: "Styles Created", items: ["Seasonal collections", "Limited editions"] },
              { id: "m3", value: "20+", title: "Partner Studios", items: ["Ethical workshops", "Expert tailors"] }
            ]}
            title="By The Numbers"
            description="Our community continues to grow every season."
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardTwelve
            useInvertedBackground={false}
            testimonials={[
              { id: "t1", name: "Alice M.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg" },
              { id: "t2", name: "Chloe S.", imageSrc: "http://img.b2bpic.net/free-photo/brown-eyed-curly-brunette-short-haired-woman-floral-trendy-dress-smiles-looks-camera-hoods-pencil-designs-new-clothes_197531-24076.jpg" },
              { id: "t3", name: "Mark D.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-positive-curly-woman-keeps-thumb-up-recommends-something-uses-modern-cellular-selling-clothes-online-internet-store-poses-against-white-background-with-clothes-hanging_273609-60491.jpg" },
              { id: "t4", name: "Sarah P.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-taking-break-after-shopping_23-2148660680.jpg" },
              { id: "t5", name: "Kevin L.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-blonde-woman-shirt-holding-arm-hip_171337-2724.jpg" }
            ]}
            cardTitle="Loved by You"
            cardTag="Community Feedback"
            cardAnimation="slide-up"
          />
        </div>

        <div id="faq" data-section="faq">
          <FaqBase
            textboxLayout="split"
            useInvertedBackground={false}
            faqs={[
              { id: "q1", title: "Do you offer returns?", content: "Yes, returns are accepted within 30 days of purchase for all unworn items." },
              { id: "q2", title: "Where do you ship?", content: "We ship globally to over 50 countries with tracking included." },
              { id: "q3", title: "Are materials sustainable?", content: "We prioritize organic and recycled materials in 80% of our current collection." }
            ]}
            title="Common Questions"
            description="Everything you need to know about your order."
            faqsAnimation="slide-up"
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBaseReveal
            logoText="MODA"
            columns={[
              { title: "Shop", items: [{ label: "New Arrivals", href: "#products" }, { label: "All Products", href: "#products" }] },
              { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Contact", href: "#contact" }] },
              { title: "Support", items: [{ label: "FAQs", href: "#faq" }, { label: "Terms", href: "#" }] }
            ]}
            copyrightText="© 2024 MODA Apparel. All rights reserved."
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
