"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 FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import { Droplets, Shield, Sparkles, User, Info, Package, Phone } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="mediumLarge"
        sizing="medium"
        background="noiseDiagonalGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="glass"
        headingFontWeight="semibold"
    >
      <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">
      <HeroSplitKpi
      background={{ variant: "sparkles-gradient" }}
      title="Unveil Your Natural Radiance"
      description="Discover botanical skincare designed to nourish and restore your skin’s true potential."
      imageSrc="http://img.b2bpic.net/free-photo/beautiful-girl-with-towel-using-beauty-product_1157-31103.jpg"
      kpis={[
        { value: "98%", label: "Glowing Results" },
        { value: "24h", label: "Deep Hydration" },
        { value: "100%", label: "Pure Organic" },
      ]}
      buttons={[{ text: "Shop Collections", href: "#products" }]}
    />
  </div>

  <div id="about" data-section="about">
      <TestimonialAboutCard
      tag="Our Story"
      title="Science Meets Botanical Wisdom"
      description="At Lumina, we believe in the power of nature combined with dermatological innovation. Every batch is crafted with precision to ensure maximum potency and purity."
      subdescription="We refuse to compromise on quality, sourcing only the finest rare botanical extracts for your daily ritual."
      icon={Info}
      imageSrc="http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238283.jpg"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardSeven
      animationType="blur-reveal"
      title="The Lumina Promise"
      description="Premium ingredients, sustainable sourcing, and transformative results for every skin type."
      textboxLayout="split"
      features={[
        { title: "Pure Actives", description: "Rare plant-based extracts that work deep within your skin barrier.", imageSrc: "http://img.b2bpic.net/free-photo/grapefruit-oil-serum-bottle-put-green-light-background_1150-28091.jpg" },
        { title: "Deep Hydration", description: "Lock in essential moisture for a plump and vibrant complexion.", imageSrc: "http://img.b2bpic.net/free-photo/hand-with-white-cream-blue-background_23-2152029099.jpg" },
      ]}
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardThree
      gridVariant="one-large-left-three-stacked-right"
      animationType="slide-up"
      title="Curated Skin Essentials"
      description="Experience our best-selling botanical formulas for your daily glow."
      textboxLayout="split"
      products={[
        { id: "p1", name: "Renew Serum", price: "$78", imageSrc: "http://img.b2bpic.net/free-photo/assortment-cosmetic-bottles-jars_23-2152029108.jpg" },
        { id: "p2", name: "Velvet Night Cream", price: "$85", imageSrc: "http://img.b2bpic.net/free-photo/beauty-cream-with-natural-elements_23-2148173802.jpg" },
        { id: "p3", name: "Balance Toner", price: "$42", imageSrc: "http://img.b2bpic.net/free-photo/hand-sanitizer-gel-copy-space_23-2148758798.jpg" },
        { id: "p4", name: "Glow Brightener", price: "$65", imageSrc: "http://img.b2bpic.net/free-photo/healthy-jojoba-oil-arrangement_23-2149047718.jpg" },
      ]}
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardOne
      gridVariant="bento-grid"
      animationType="depth-3d"
      title="Clinical Excellence"
      description="Evidence-based skincare results backed by science."
      metrics={[
        { id: "m1", title: "Radiance", value: "94%", description: "Visible clarity improvement.", icon: Sparkles },
        { id: "m2", title: "Hydration", value: "24h", description: "Long-lasting moisture retention.", icon: Droplets },
        { id: "m3", title: "Support", value: "100%", description: "Barrier protection efficiency.", icon: Shield },
      ]}
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardThirteen
      showRating={true}
      animationType="blur-reveal"
      title="Community Love"
      description="Hear from our glowing community members."
      textboxLayout="default"
      testimonials={[
        { id: "t1", name: "Elena R.", handle: "@skinjoy", testimonial: "My skin feels transformed and completely rejuvenated!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-bed-sitting-pillow_273609-4819.jpg" },
        { id: "t2", name: "Sarah J.", handle: "@beautyguru", testimonial: "Finally, organic ingredients that actually work.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-women-hanging-out_23-2149168545.jpg" },
      ]}
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      faqs={[
        { id: "q1", title: "Vegan & Cruelty-Free?", content: "Yes, 100% certified." },
        { id: "q2", title: "Shipping?", content: "Global shipping available." },
      ]}
      title="Common Questions"
      textboxLayout="split"
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      tag="Newsletter"
      title="Start Your Glow"
      description="Get 15% off your first order by joining our community today."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="Lumina Skincare"
      leftLink={{ text: "Privacy Policy", href: "#" }}
      rightLink={{ text: "Terms & Conditions", href: "#" }}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}