"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="entrance-slide"
        borderRadius="pill"
        contentWidth="compact"
        sizing="large"
        background="grid"
        cardStyle="gradient-radial"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="layered"
        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: "gradient-bars",
      }}
      title="Glazed skin, delivered."
      description="Rhode creates skincare essentials designed to nourish your skin barrier and give you that signature glow."
      kpis={[
        {
          value: "100%",
          label: "Clinically Tested",
        },
        {
          value: "Vegan",
          label: "Cruelty Free",
        },
        {
          value: "Safe",
          label: "Dermatologist Tested",
        },
      ]}
      enableKpiAnimation={true}
      imageSrc="http://img.b2bpic.net/free-photo/dreamy-aesthetic-cosmetic-product-with-fresh-background_23-2151382914.jpg"
      imageAlt="Rhode skincare product"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/beautiful-sensual-brunette-standing-naked-smiling-carefree_176420-20671.jpg",
          alt: "Happy customer testimonial",
        },
        {
          src: "http://img.b2bpic.net/free-photo/cute-young-woman-skincare-portrait_624325-3441.jpg",
          alt: "Skincare enthusiast profile",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-happy-fit-girl-sportswear-laughing_1153-7828.jpg",
          alt: "Glowing skin portrait",
        },
        {
          src: "http://img.b2bpic.net/free-photo/happy-beautiful-blond-lady-white-dress-looking-camera-pretty-lady-posing-indoors_549566-350.jpg",
          alt: "Radiant skin user",
        },
        {
          src: "http://img.b2bpic.net/free-photo/headshot-attractive-female-with-charming-smile-having-blue-eyes-dimples-cheeks-rejoicing-summer-vacations-going-spend-them-abroad-with-her-boyfriend-beauty-emotions-concept_176532-8266.jpg",
          alt: "Rhode community member",
        },
      ]}
      avatarText="Loved by 10k+ customers"
      marqueeItems={[
        {
          type: "text",
          text: "Dermatologist Formulated",
        },
        {
          type: "text",
          text: "Fragrance-Free",
        },
        {
          type: "text",
          text: "Gluten-Free",
        },
        {
          type: "text",
          text: "Vegan & Cruelty Free",
        },
        {
          type: "text",
          text: "Barrier Friendly",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={true}
      title="Less is more. We believe in simplicity."
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardEight
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Deep Hydration",
          description: "Powerful ingredients to lock in moisture all day.",
          imageSrc: "http://img.b2bpic.net/free-vector/20-skin-solid-glyph-icon-presentation_1142-22865.jpg",
        },
        {
          title: "Clean Ingredients",
          description: "Free from harsh chemicals and synthetic fillers.",
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-natural-body-butter-leaves-plain-background_23-2148241839.jpg",
        },
        {
          title: "Barrier Support",
          description: "Fortifies your skin for a healthy, radiant finish.",
          imageSrc: "http://img.b2bpic.net/free-photo/blooming-spring-portrait-beautiful-woman_23-2151954365.jpg",
        },
      ]}
      title="Why Rhode Works"
      description="Formulated with performance-based ingredients that hydrate, plump, and protect your skin."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",
          name: "Lip Treatment",
          price: "$16",
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-natural-cosmetics-concept_23-2148578622.jpg",
        },
        {
          id: "p2",
          name: "Face Cream",
          price: "$29",
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-cream-leaf-with-white-background_23-2148241826.jpg",
        },
        {
          id: "p3",
          name: "Glazing Serum",
          price: "$29",
          imageSrc: "http://img.b2bpic.net/free-photo/different-pipettes-with-cotton-balls_23-2148317653.jpg",
        },
        {
          id: "p4",
          name: "Skincare Set",
          price: "$68",
          imageSrc: "http://img.b2bpic.net/free-photo/women-s-day-still-life-with-makeup-jewelry_23-2149263168.jpg",
        },
        {
          id: "p5",
          name: "Body Moisturizer",
          price: "$28",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238337.jpg",
        },
        {
          id: "p6",
          name: "Facial Mist",
          price: "$24",
          imageSrc: "http://img.b2bpic.net/free-photo/packaging-concept_23-2147672777.jpg",
        },
      ]}
      title="Shop the Essentials"
      description="Explore our curated collection of everyday skincare must-haves."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardThirteen
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "Sarah J.",
          handle: "@sarahskin",
          testimonial: "My skin has never felt better! Total game changer.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-woman-getting-special-skin-treatment-beautiful-girl-applying-serum-isolated-white-background-smooth-skin-without-wrinkles_657921-610.jpg",
        },
        {
          id: "2",
          name: "Michael L.",
          handle: "@mlglow",
          testimonial: "Simple, effective, and beautiful. Obsessed.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-girl-with-perfect-light-brown-skin-beautiful-curly-black-hair-smiling-camera-studio_633478-963.jpg",
        },
        {
          id: "3",
          name: "Emily R.",
          handle: "@emmy_r",
          testimonial: "Finally found a routine that works for my sensitive skin.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67039.jpg",
        },
        {
          id: "4",
          name: "David K.",
          handle: "@dk_skincare",
          testimonial: "Everything I need in one sleek routine. Fantastic products.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-blue-eyed-female-with-gym-outfit_181624-14551.jpg",
        },
        {
          id: "5",
          name: "Jane D.",
          handle: "@janed_glow",
          testimonial: "Rhode makes my mornings so much easier and my skin glowing.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/beauty-portrait-young-woman_23-2149403019.jpg",
        },
      ]}
      showRating={true}
      title="Beloved by You"
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardEleven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",
          value: "95%",
          title: "Improved Hydration",
          description: "Across clinical trials.",
          imageSrc: "http://img.b2bpic.net/free-photo/drag-person-putting-makeup_23-2149256321.jpg",
        },
        {
          id: "m2",
          value: "98%",
          title: "Dermatologist Approved",
          description: "Highly trusted formulas.",
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-hydro-alcoholic-gel-with-copy-space_23-2148775333.jpg",
        },
        {
          id: "m3",
          value: "100%",
          title: "Customer Satisfaction",
          description: "Loved by our global community.",
          imageSrc: "http://img.b2bpic.net/free-photo/adult-male-getting-hair-loss-treatment_23-2149152771.jpg",
        },
      ]}
      title="Proven Results"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",
          title: "Are Rhode products vegan?",
          content: "Yes, all our products are 100% vegan.",
        },
        {
          id: "q2",
          title: "Is it safe for sensitive skin?",
          content: "Yes, our formulas are dermatologist-tested and gentle.",
        },
        {
          id: "q3",
          title: "Where can I track my order?",
          content: "You will receive a tracking link in your confirmation email.",
        },
      ]}
      title="Frequently Asked Questions"
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={true}
      background={{
        variant: "sparkles-gradient",
      }}
      text="Join the Rhode community for updates, tips, and skincare secrets."
      buttons={[
        {
          text: "Sign Up for Newsletter",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        {
          items: [
            {
              label: "Shop",
              href: "#products",
            },
            {
              label: "About",
              href: "#about",
            },
            {
              label: "FAQ",
              href: "#faq",
            },
          ],
        },
        {
          items: [
            {
              label: "Instagram",
              href: "#",
            },
            {
              label: "Twitter",
              href: "#",
            },
            {
              label: "Support",
              href: "#",
            },
          ],
        },
        {
          items: [
            {
              label: "Privacy Policy",
              href: "#",
            },
            {
              label: "Terms of Service",
              href: "#",
            },
          ],
        },
      ]}
      logoText="rhode"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
