"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import TextAbout from '@/components/sections/about/TextAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="medium"
        sizing="medium"
        background="noise"
        cardStyle="glass-elevated"
        primaryButtonStyle="flat"
        secondaryButtonStyle="solid"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        { name: "Shop", id: "#products" },
        { name: "About", id: "#about" },
        { name: "Benefits", id: "#features" },
        { name: "FAQ", id: "#faq" },
      ]}
      brandName="rhode"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitKpi
      background={{ variant: "glowing-orb" }}
      title="The Glow is in the Details."
      description="Chic, intentional, and high-performance skincare for your barrier. Experience the Rhode aesthetic."
      kpis={[
        { value: "100%", label: "Pure Ingredients" },
        { value: "Vegan", label: "Cruelty-Free" },
        { value: "Chic", label: "Skincare Essential" },
      ]}
      enableKpiAnimation={true}
      imageSrc="http://img.b2bpic.net/free-photo/cosmetic-product-branding-with-neutral-background_23-2149504627.jpg"
      imageAlt="Rhode luxury skincare"
      mediaAnimation="blur-reveal"
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={true}
      title="Effortless beauty, redefined."
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwelve
      animationType="blur-reveal"
      textboxLayout="split"
      useInvertedBackground={true}
      title="The Rhode Aesthetic"
      description="Performance skincare that doubles as a chic accessory."
      features={[
        { id: "f1", label: "01", title: "Glossy Finish", items: ["High-shine lip care", "Elevated look", "Glossy texture"] },
        { id: "f2", label: "02", title: "Rich Nutrition", items: ["Nutrient-dense", "Healthy skin", "Deep hydration"] },
        { id: "f3", label: "03", title: "Chic Design", items: ["Sophisticated packaging", "Beautiful design", "Modern aesthetic"] },
      ]}
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardThree
      animationType="blur-reveal"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        { id: "p1", name: "Signature Lip Gloss", price: "$18", imageSrc: "http://img.b2bpic.net/free-photo/lip-gloss-pink-nude_23-2149504680.jpg" },
        { id: "p2", name: "Glazing Serum", price: "$32", imageSrc: "http://img.b2bpic.net/free-photo/skincare-serum-bottle_23-2149504690.jpg" },
        { id: "p3", name: "Rich Moisturizer", price: "$35", imageSrc: "http://img.b2bpic.net/free-photo/moisturizing-face-cream_23-2149504700.jpg" },
      ]}
      title="Curated Essentials"
      description="Our most loved products, reimagined for your glow."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      cardAnimation="blur-reveal"
      useInvertedBackground={true}
      cardTitle="Loved by the Chic"
      cardTag="Testimonials"
      testimonials={[
        { id: "1", name: "Maya A.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-smiling_23-2149504780.jpg" },
        { id: "2", name: "Leo S.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-minimal_23-2149504790.jpg" },
      ]}
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      animationType="blur-reveal"
      gridVariant="bento-grid"
      textboxLayout="split"
      useInvertedBackground={false}
      title="Proven Glow"
      description="Elevating your daily beauty ritual with proven care."
      metrics={[
        { id: "m1", value: "98%", description: "Visible radiance improvement" },
        { id: "m2", value: "100%", description: "Loved for style & performance" },
      ]}
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      faqsAnimation="blur-reveal"
      sideTitle="Glossary"
      sideDescription="Everything you need to know about our signature glow."
      faqs={[
        { id: "q1", title: "Are these glosses sticky?", content: "Not at all. Our formula is designed for smooth, glassy comfort." },
        { id: "q2", title: "Is Rhode dermatologist-tested?", content: "Yes, all our formulas are rigorously tested for your skin barrier." },
      ]}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      tag="Exclusive Access"
      title="Join the Rhode Circle"
      description="Subscribe to the Rhode journal for beauty secrets and exclusive early access."
      background={{ variant: "sparkles-gradient" }}
      useInvertedBackground={true}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/skincare-luxury-branding_23-2149504655.jpg"
      logoText="rhode"
      columns={[
        { title: "Shop", items: [{ label: "Collection", href: "#products" }, { label: "Journal", href: "#" }] },
        { title: "Social", items: [{ label: "Instagram", href: "#" }, { label: "TikTok", href: "#" }] },
        { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}