"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import { Award, Droplet, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="small"
        sizing="largeSmallSizeMediumTitles"
        background="blurBottom"
        cardStyle="glass-elevated"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="glass"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingInline
            navItems={[
              { name: "Collection", id: "products" },
              { name: "Process", id: "about" },
              { name: "Story", id: "features" },
              { name: "Reviews", id: "testimonials" },
            ]}
            brandName="Zyora"
            button={{ text: "Get Started", href: "#contact" }}
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroSplitDoubleCarousel
            background={{ variant: "gradient-bars" }}
            title="The Essence of Unspoken Elegance"
            description="Zyora Perfumes captures the fleeting moments of beauty, bottled into timeless scents that define your unique aura."
            leftCarouselItems={[
              { imageSrc: "http://img.b2bpic.net/free-photo/closeup-bottles-with-dispensers-liquid-soap_169016-23454.jpg", imageAlt: "Lux Perfume" },
              { imageSrc: "http://img.b2bpic.net/free-photo/flower_1308-5009.jpg", imageAlt: "Essence Art" },
              { imageSrc: "http://img.b2bpic.net/free-photo/close-up-nail-care-treatment_23-2149262906.jpg", imageAlt: "Golden Glow" },
              { imageSrc: "http://img.b2bpic.net/free-photo/high-angle-compostable-beauty-product-flowers_23-2149353143.jpg", imageAlt: "Floral Mist" },
              { imageSrc: "http://img.b2bpic.net/free-photo/crispy-potato-chips-with-tomato-sauce-snack-concept_1150-23578.jpg", imageAlt: "Botanicals" },
            ]}
            rightCarouselItems={[
              { imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669104.jpg", imageAlt: "Liquid Motion" },
              { imageSrc: "http://img.b2bpic.net/free-photo/assortment-dry-tea-golden-vintage-mini-plates-tea-types_114579-7737.jpg", imageAlt: "Botanicals" },
              { imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669103.jpg", imageAlt: "Floral Mist" },
              { imageSrc: "http://img.b2bpic.net/free-photo/view-charcoal-different-forms_23-2149654126.jpg", imageAlt: "Golden Glow" },
              { imageSrc: "http://img.b2bpic.net/free-photo/purple-carnation-falling-into-water_23-2148151473.jpg", imageAlt: "Essence Art" },
            ]}
            buttons={[{ text: "Explore Collection", href: "#products" }]}
          />
        </div>

        <div id="about" data-section="about">
          <AboutMetric
            useInvertedBackground={true}
            title="Crafting Artistry"
            metrics={[
              { icon: Sparkles, label: "Botanical Extracts", value: "200+" },
              { icon: Droplet, label: "Perfumers World-wide", value: "50" },
              { icon: Award, label: "Years Experience", value: "15" },
            ]}
            metricsAnimation="slide-up"
          />
        </div>

        <div id="features" data-section="features">
          <FeatureCardThree
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="bento-grid"
            useInvertedBackground={false}
            features={[
              { title: "Artisan Distillation", description: "Centuries-old techniques for modern scents.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-working-beer-factory_23-2150573933.jpg" },
              { title: "Rare Essences", description: "Sourced from the most hidden gardens.", imageSrc: "http://img.b2bpic.net/free-photo/perfume-bottle_74190-5175.jpg" },
              { title: "Eco-Conscious", description: "Bottled in sustainable elegance.", imageSrc: "http://img.b2bpic.net/free-photo/glass-texture-background-beige_53876-145163.jpg" },
            ]}
            title="Why Zyora?"
            description="Discover the meticulous craftsmanship behind every drop."
          />
        </div>

        <div id="products" data-section="products">
          <ProductCardThree
            animationType="scale-rotate"
            textboxLayout="default"
            gridVariant="uniform-all-items-equal"
            useInvertedBackground={true}
            products={[
              { id: "p1", name: "Velvet Amber", price: "$120", imageSrc: "http://img.b2bpic.net/free-photo/front-view-light-bottle-with-golden-cap-isolated-white-floor_140725-11640.jpg" },
              { id: "p2", name: "Midnight Iris", price: "$145", imageSrc: "http://img.b2bpic.net/free-vector/minimalist-wedding-wine-label-template_742173-7439.jpg" },
              { id: "p3", name: "Golden Bloom", price: "$110", imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669153.jpg" },
              { id: "p4", name: "Dark Musk", price: "$160", imageSrc: "http://img.b2bpic.net/free-photo/man-s-accessories-wooden-surface_8353-10515.jpg" },
              { id: "p5", name: "Travel Atomizer", price: "$45", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-bottle-with-luxurious-art-nouveau-inspired-sun-relief-background_23-2151420736.jpg" },
              { id: "p6", name: "Floral Essence", price: "$95", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-bottle-with-luxurious-art-nouveau-inspired-sun-relief-background_23-2151420729.jpg" },
            ]}
            title="Our Signature Scents"
            description="Exquisite blends for every personality."
          />
        </div>

        <div id="pricing" data-section="pricing">
          <PricingCardEight
            textboxLayout="default"
            useInvertedBackground={false}
            animationType="slide-up"
            plans={[
              { id: "s1", badge: "Discovery", price: "$30/mo", subtitle: "Monthly Samples", buttons: [{ text: "Get Started" }], features: ["3x 5ml vials", "Free shipping"] },
              { id: "s2", badge: "Signature", price: "$95/mo", subtitle: "Full Size", buttons: [{ text: "Get Started" }], features: ["1x 50ml bottle", "Member discounts"] },
              { id: "s3", badge: "Collector", price: "$150/mo", subtitle: "Customized", buttons: [{ text: "Get Started" }], features: ["1x 100ml bottle", "Exclusive events"] },
            ]}
            title="Select Your Fragrance Experience"
            description="Subscriptions tailored to your aromatic taste."
          />
        </div>

        <div id="metrics" data-section="metrics">
          <MetricCardSeven
            animationType="depth-3d"
            textboxLayout="default"
            useInvertedBackground={true}
            metrics={[
              { id: "m1", value: "100k+", title: "Scent Profiles", items: ["Unique creations", "Hand-crafted"] },
              { id: "m2", value: "45", title: "Global Boutiques", items: ["Exclusive locations", "Paris to Tokyo"] },
              { id: "m3", value: "99%", title: "Satisfaction", items: ["Loyal members", "Trusted brand"] },
            ]}
            title="Global Impact"
            description="Touching lives through fine fragrances."
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardThirteen
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            showRating={true}
            testimonials={[
              { id: "t1", name: "Elena R.", handle: "@elena_scents", testimonial: "The Velvet Amber is life-changing.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smart-looking-teacher_53876-23045.jpg" },
              { id: "t2", name: "Marcus L.", handle: "@ml_frag", testimonial: "Simply the best craftsmanship.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-modern-female_23-2148415853.jpg" },
              { id: "t3", name: "Sofia G.", handle: "@sofiag_perfume", testimonial: "The travel atomizer is so convenient.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-wearing-hat_23-2149213184.jpg" },
              { id: "t4", name: "Liam T.", handle: "@liamt_scents", testimonial: "Customer service is top-notch.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/deaf-woman-communicating-through-sign-language_23-2148590375.jpg" },
              { id: "t5", name: "Nina W.", handle: "@ninaw_perfume", testimonial: "Sophisticated and elegant scents.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-person-football-game_23-2149015525.jpg" },
            ]}
            title="Customer Stories"
            description="What our scent enthusiasts are saying."
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactCenter
            useInvertedBackground={true}
            background={{ variant: "sparkles-gradient" }}
            title="Stay In the Know"
            description="Join our newsletter for exclusive fragrance launches and members-only events."
            tag="Newsletter"
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterLogoReveal
            logoText="Zyora"
            leftLink={{ text: "Privacy Policy", href: "#" }}
            rightLink={{ text: "Contact Us", href: "#contact" }}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
