"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
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">
      <FeatureCardEight
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        { title: "Glossy Finish", description: "High-shine lip care for an elevated look.", imageSrc: "http://img.b2bpic.net/free-photo/lip-gloss-product-beauty-branding_23-2149504640.jpg" },
        { title: "Rich Nutrition", description: "Nutrient-dense formulas for soft, healthy skin.", imageSrc: "http://img.b2bpic.net/free-photo/skincare-routine-essential_23-2149504660.jpg" },
        { title: "Chic Design", description: "Sophisticated packaging that looks beautiful anywhere.", imageSrc: "http://img.b2bpic.net/free-photo/skincare-luxury-branding_23-2149504655.jpg" },
      ]}
      title="The Rhode Aesthetic"
      description="Performance skincare that doubles as a chic accessory."
    />
  </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">
      <TestimonialCardThirteen
      animationType="blur-reveal"
      textboxLayout="default"
      useInvertedBackground={false}
      description="Join the global community embracing the glow."
      testimonials={[
        { id: "1", name: "Maya A.", handle: "@maya.glow", testimonial: "The lip gloss is absolutely iconic. Chic and nourishing.", rating: 5 },
        { id: "2", name: "Leo S.", handle: "@leoskin", testimonial: "Perfect routine for that effortless look. Simply expensive.", rating: 5 },
      ]}
      showRating={true}
      title="Loved by the Chic"
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardEleven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      description="Elevating your daily beauty ritual with proven care."
      metrics={[
        { id: "m1", value: "98%", title: "Glow Index", description: "Visible radiance improvement.", imageSrc: "http://img.b2bpic.net/free-photo/skincare-product-splash_23-2149504720.jpg" },
        { id: "m2", value: "100%", title: "Chic Appeal", description: "Loved for style & performance.", imageSrc: "http://img.b2bpic.net/free-photo/beauty-product-texture_23-2149504730.jpg" },
      ]}
      title="Proven Glow"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      description="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." },
      ]}
      title="Glossary"
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={true}
      background={{ variant: "sparkles-gradient" }}
      text="Subscribe to the Rhode journal for beauty secrets and exclusive early access."
      buttons={[{ text: "Join the Circle", href: "#" }]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        { items: [{ label: "Shop", href: "#products" }, { label: "Journal", href: "#" }] },
        { items: [{ label: "Instagram", href: "#" }, { label: "TikTok", href: "#" }] },
        { items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
      ]}
      logoText="rhode"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
