"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import { Droplets, Shield, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="mediumLarge"
        sizing="medium"
        background="noiseDiagonalGradient"
        cardStyle="solid"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="solid"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "About",
          id: "about",
        },
        {
          name: "Products",
          id: "products",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="Lumina Skincare"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardCarousel
      background={{
        variant: "gradient-bars",
      }}
      title="Unveil Your Natural Radiance"
      description="Experience the purity of nature with our botanical skin care collections, designed to nourish, revitalize, and restore your skin's youthful glow."
      tag="Purely Organic"
      tagAnimation="slide-up"
      buttons={[
        {
          text: "Shop Collections",
          href: "#products",
        },
      ]}
      buttonAnimation="slide-up"
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-with-towel-using-beauty-product_1157-31103.jpg",
          imageAlt: "Model glowing skin",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/spa-composition-with-personal-hygiene-items-white-background-isolated_169016-19064.jpg",
          imageAlt: "Serum texture",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238283.jpg",
          imageAlt: "Botanical ingredients",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/woman-towel-resting-her-head-hand_23-2148537384.jpg",
          imageAlt: "Healthy skin close up",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/eucalyptus-populus-leaves-oats-oil-brush-la-stone-soap-concrete-backdrop_23-2148087701.jpg",
          imageAlt: "Skincare bottle",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/spa-still-life-with-natural-elements_23-2148201394.jpg",
          imageAlt: "Hydrated skin",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextSplitAbout
      useInvertedBackground={false}
      title="Science Meets Nature"
      description={[
        "At Lumina, we believe that your skin deserves the most potent, natural ingredients on Earth. Our formulas blend traditional botanical wisdom with modern dermatological science.",
        "Every product is handcrafted in small batches, ensuring freshness and maximum potency to reveal your skin's brightest, clearest potential.",
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardMedia
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "f1",
          title: "Potent Botanicals",
          description: "Derived from rare plants, our actives work deeply to heal and rejuvenate.",
          tag: "Nature-First",
          imageSrc: "http://img.b2bpic.net/free-photo/grapefruit-oil-serum-bottle-put-green-light-background_1150-28091.jpg",
        },
        {
          id: "f2",
          title: "Deep Hydration",
          description: "Moisture-locking complexes that restore balance and bounce throughout the day.",
          tag: "Hydrating",
          imageSrc: "http://img.b2bpic.net/free-photo/hand-with-white-cream-blue-background_23-2152029099.jpg",
        },
        {
          id: "f3",
          title: "Gentle Cleansing",
          description: "Purify your skin without stripping away the essential natural oils.",
          tag: "Soothing",
          imageSrc: "http://img.b2bpic.net/free-photo/aloe-vera-cucumber-with-beauty-cream_23-2148173814.jpg",
        },
      ]}
      title="Why Your Skin Loves Us"
      description="Discover the unique benefits that set our botanical formulations apart."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",
          brand: "Lumina",
          name: "Renew Serum",
          price: "$78",
          rating: 5,
          reviewCount: "124",
          imageSrc: "http://img.b2bpic.net/free-photo/assortment-cosmetic-bottles-jars_23-2152029108.jpg",
        },
        {
          id: "p2",
          brand: "Lumina",
          name: "Velvet Night Cream",
          price: "$85",
          rating: 5,
          reviewCount: "98",
          imageSrc: "http://img.b2bpic.net/free-photo/beauty-cream-with-natural-elements_23-2148173802.jpg",
        },
        {
          id: "p3",
          brand: "Lumina",
          name: "Balance Toner",
          price: "$42",
          rating: 4,
          reviewCount: "210",
          imageSrc: "http://img.b2bpic.net/free-photo/hand-sanitizer-gel-copy-space_23-2148758798.jpg",
        },
        {
          id: "p4",
          brand: "Lumina",
          name: "Glow Brightener",
          price: "$65",
          rating: 5,
          reviewCount: "156",
          imageSrc: "http://img.b2bpic.net/free-photo/healthy-jojoba-oil-arrangement_23-2149047718.jpg",
        },
        {
          id: "p5",
          brand: "Lumina",
          name: "Aloe Calm Gel",
          price: "$38",
          rating: 4,
          reviewCount: "342",
          imageSrc: "http://img.b2bpic.net/free-photo/aloe-vera-cucumber-with-beauty-cream_23-2148173812.jpg",
        },
        {
          id: "p6",
          brand: "Lumina",
          name: "Golden Nectar Oil",
          price: "$92",
          rating: 5,
          reviewCount: "89",
          imageSrc: "http://img.b2bpic.net/free-photo/dreamy-aesthetic-cosmetic-product-with-fresh-background_23-2151382893.jpg",
        },
      ]}
      title="Best Sellers"
      description="Explore our curated collection of botanical essentials for every skin type."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          icon: Sparkles,
          title: "Radiance Improvement",
          value: "94%",
        },
        {
          id: "m2",
          icon: Droplets,
          title: "Hydration Boost",
          value: "24h",
        },
        {
          id: "m3",
          icon: Shield,
          title: "Skin Barrier Support",
          value: "100%",
        },
      ]}
      title="Proven Results"
      description="Clinical studies show incredible improvements after consistent use."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",
          title: "Life changer!",
          quote: "My skin has never felt this soft or looked this bright.",
          name: "Elena R.",
          role: "User",
          imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-bed-sitting-pillow_273609-4819.jpg",
        },
        {
          id: "t2",
          title: "Truly organic",
          quote: "I love that I can read all the ingredients on the bottle.",
          name: "Sarah J.",
          role: "Influencer",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-women-hanging-out_23-2149168545.jpg",
        },
        {
          id: "t3",
          title: "Instant glow",
          quote: "The serum changed everything within two weeks.",
          name: "Maya L.",
          role: "Makeup Artist",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-book-close-up_23-2148973429.jpg",
        },
        {
          id: "t4",
          title: "So soothing",
          quote: "Perfect for sensitive skin like mine.",
          name: "Chloe B.",
          role: "User",
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-beautiful-woman-posing_23-2149652024.jpg",
        },
        {
          id: "t5",
          title: "Finally hydrated",
          quote: "No more dry patches. I'm obsessed.",
          name: "Jessica M.",
          role: "Dermatologist Assistant",
          imageSrc: "http://img.b2bpic.net/free-photo/fashion-outdoor-portrait-brunette-short-hair-woman-with-broom_343596-703.jpg",
        },
      ]}
      title="Loved by Skin Enthusiasts"
      description="Read what our community has to say about their journey to healthy skin."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",
          title: "Are products vegan?",
          content: "Yes, our entire collection is 100% vegan and cruelty-free.",
        },
        {
          id: "q2",
          title: "How long until I see results?",
          content: "Most users see visible results within 2-4 weeks of consistent daily usage.",
        },
        {
          id: "q3",
          title: "Do you ship globally?",
          content: "We ship to over 50 countries worldwide.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/master-applying-makeup-smiling-blond-woman_23-2148113227.jpg"
      mediaAnimation="slide-up"
      title="Questions Answered"
      description="Common curiosities about our process and ingredients."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      tag="Join Us"
      title="Stay Glowing"
      description="Sign up for 15% off your first order and exclusive skincare tips."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="Lumina Skincare"
      columns={[
        {
          title: "Shop",
          items: [
            {
              label: "All Products",
              href: "#products",
            },
            {
              label: "New Arrivals",
              href: "#",
            },
          ],
        },
        {
          title: "Support",
          items: [
            {
              label: "Contact",
              href: "#",
            },
            {
              label: "FAQ",
              href: "#",
            },
          ],
        },
        {
          title: "Company",
          items: [
            {
              label: "About",
              href: "#about",
            },
            {
              label: "Blog",
              href: "#",
            },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
