"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import { Droplets, Moon, Sparkles, Sun } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="mediumSizeLargeTitles"
        background="blurBottom"
        cardStyle="gradient-radial"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "About",
          id: "about",
        },
        {
          name: "Products",
          id: "products",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="Lumière Skin"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDoubleCarousel
      background={{
        variant: "gradient-bars",
      }}
      title="Radiate Beauty Naturally"
      description="Experience our curated collection of botanical skincare, designed to restore your glow with nature's purest ingredients."
      leftCarouselItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/colorful-cosmetics-jars_23-2147787923.jpg",
          imageAlt: "Luxury skincare bottle mockup",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/young-caucasian-woman-hotel-room-bathrobe-white-towel-had-with-cigar_343596-403.jpg",
          imageAlt: "Skincare routine organic ingredients",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-texture-cream_23-2149409592.jpg",
          imageAlt: "Skincare cream close up texture",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/different-bottles-skincare-oils-marble-background_23-2148317660.jpg",
          imageAlt: "Skincare oil premium bottle",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-with-trendy-hairstyle_23-2149406009.jpg",
          imageAlt: "Natural beauty cream jar studio",
        },
      ]}
      rightCarouselItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/monochrome-beauty-product-skincare_23-2151307229.jpg",
          imageAlt: "Skincare routine luxury jar",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-cosmetic-jar-against-beige-backdrop_23-2151978993.jpg",
          imageAlt: "Hand holding a cosmetic jar against a beige backdrop",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/view-male-beauty-products-with-rock-stone-display_23-2150435231.jpg",
          imageAlt: "View of male beauty products with rock or stone display",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/transparent-skin-care-moisture-recipient-arrangement_23-2148761461.jpg",
          imageAlt: "Transparent skin care moisture recipient arrangement",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-elegant-skincare-container-with-pearls_181624-30633.jpg",
          imageAlt: "Top view of an elegant skincare container with pearls",
        },
      ]}
      buttons={[
        {
          text: "Shop Now",
        },
      ]}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/outdoor-portrait-woman-white-wedding-dress-sitting-near-blue-swimming-pool-with-flowers-orchid_343596-191.jpg",
          alt: "Portrait 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/woman-with-white-clay-from-back-body-treatmenta_633478-2520.jpg",
          alt: "Portrait 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/sensual-glamour-beautiful-woman-model-with-fresh-daily-makeup-with-nude-lips-color-clean-healthy-skin-face_158538-13994.jpg",
          alt: "Portrait 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/elegant-pale-girl-with-golden-earrings-expressing-amazement-close-up-shot-sensual-brunette-lady-with-plant_197531-14068.jpg",
          alt: "Portrait 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/shining-white-paint-strokes_23-2147746807.jpg",
          alt: "Portrait 5",
        },
      ]}
      avatarText="Loved by thousands"
      marqueeItems={[
        {
          type: "image",
          src: "http://img.b2bpic.net/free-vector/gold-spa-logo-template-wellness-luxury-design-health-wellness-business-vector-set_53876-143588.jpg",
          alt: "Logo 1",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-vector/detailed-holistic-logo-template_23-2148855797.jpg",
          alt: "Logo 2",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-vector/leaf-business-logo-template-organic-product-branding-vector_53876-157499.jpg",
          alt: "Logo 3",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-vector/bright-candle-label-template-design_742173-3778.jpg",
          alt: "Logo 4",
        },
        {
          type: "image",
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=m329ob",
          alt: "Logo 5",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TestimonialAboutCard
      useInvertedBackground={false}
      tag="Our Philosophy"
      title="Clean, Proven, Botanical"
      description="We believe in transparency and the power of botanicals. No harsh chemicals, just results that feel as good as they look."
      subdescription="Every ingredient is sourced with care for your skin and the planet."
      icon={Sparkles}
      imageSrc="http://img.b2bpic.net/free-photo/smiley-woman-wearing-white-blouse_23-2148749924.jpg"
      mediaAnimation="blur-reveal"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureHoverPattern
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      features={[
        {
          icon: Droplets,
          title: "Hydration Boost",
          description: "Deeply moisturize every layer of your skin.",
        },
        {
          icon: Sun,
          title: "Daily Protection",
          description: "Defend against environmental stressors daily.",
        },
        {
          icon: Moon,
          title: "Evening Repair",
          description: "Support natural regeneration overnight.",
        },
      ]}
      title="Your Daily Ritual"
      description="Transform your skin with daily rituals backed by science and nature."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",
          name: "Hydrating Serum",
          price: "$48",
          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-serum-bottle-leaf_23-2148899372.jpg",
        },
        {
          id: "p2",
          name: "Revitalizing Cream",
          price: "$62",
          imageSrc: "http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232256.jpg",
        },
        {
          id: "p3",
          name: "Eye Renewal",
          price: "$55",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-nail-polish-floating-water_23-2150963111.jpg",
        },
        {
          id: "p4",
          name: "Face Oil",
          price: "$75",
          imageSrc: "http://img.b2bpic.net/free-photo/essential-oil-bottles-isolated-white_1182-1133.jpg",
        },
        {
          id: "p5",
          name: "Daily Cleanser",
          price: "$38",
          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-cream-container-with-green-background_23-2149249529.jpg",
        },
        {
          id: "p6",
          name: "Night Treatment",
          price: "$85",
          imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669139.jpg",
        },
      ]}
      title="Best Sellers"
      description="Our most loved skincare essentials."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",
          name: "Sarah Miller",
          imageSrc: "http://img.b2bpic.net/free-photo/wedding-bride_23-2148105977.jpg",
        },
        {
          id: "t2",
          name: "John Doe",
          imageSrc: "http://img.b2bpic.net/free-photo/blondy-young-woman-black-dress_613910-7050.jpg",
        },
        {
          id: "t3",
          name: "Emily Chen",
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-recording-himself_23-2150336054.jpg",
        },
        {
          id: "t4",
          name: "Marcus Reid",
          imageSrc: "http://img.b2bpic.net/free-photo/people-lifestyle-concept-indoor-shot-joyful-pretty-teenage-girl-with-straight-fair-hair-embracing-back-chair-sitting-backwards-closing-eyes-because-bright-sunshine-smiling-broadly_344912-29.jpg",
        },
        {
          id: "t5",
          name: "Lila Vance",
          imageSrc: "http://img.b2bpic.net/free-photo/beauty-woman-face-closeup-isolated-black-background-beautiful-model-girl-makeup-gorgeous-lady-with-perfect-skin_639032-157.jpg",
        },
      ]}
      cardTitle="What They Say"
      cardTag="Loved By You"
      cardAnimation="slide-up"
    />
  </div>

  <div id="socialProof" data-section="socialProof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Vogue Beauty",
        "Elle Style",
        "Cosmo Magazine",
        "Beauty Insider",
        "Allure Picks",
      ]}
      title="As Featured In"
      description="Proudly recognized by these top beauty publications."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "f1",
          title: "Are products vegan?",
          content: "Yes, everything we create is 100% plant-based and vegan.",
        },
        {
          id: "f2",
          title: "Is it safe for sensitive skin?",
          content: "Our ingredients are gentle and rigorously tested for all skin types.",
        },
        {
          id: "f3",
          title: "How long until I see results?",
          content: "Many report glowing skin within 14 days of consistent use.",
        },
      ]}
      sideTitle="Questions?"
      sideDescription="Find answers to your skincare routine queries."
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Start Your Journey"
      description="Have questions? Our experts are ready to build a customized plan for your unique skin."
      inputs={[
        {
          name: "name",
          type: "text",
          placeholder: "Your Name",
          required: true,
        },
        {
          name: "email",
          type: "email",
          placeholder: "Your Email",
          required: true,
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/empty-ski-resort-used-winter-sports_482257-76560.jpg"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Company",
          items: [
            {
              label: "About",
              href: "#about",
            },
            {
              label: "Blog",
              href: "#",
            },
          ],
        },
        {
          title: "Support",
          items: [
            {
              label: "Contact",
              href: "#contact",
            },
            {
              label: "FAQ",
              href: "#faq",
            },
          ],
        },
        {
          title: "Legal",
          items: [
            {
              label: "Privacy",
              href: "#",
            },
            {
              label: "Terms",
              href: "#",
            },
          ],
        },
      ]}
      bottomLeftText="© 2024 Lumière Skin"
      bottomRightText="All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
