"use client"

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import { Sparkles, TrendingUp, Users, Star } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="small"
      sizing="mediumLargeSizeLargeTitles"
      background="circleGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <ReactLenis root>
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="UMBRA"
          navItems={[
            { name: "Collection", id: "products" },
            { name: "Craft", id: "ingredients" },
            { name: "Journal", id: "blog" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="A Fragrance That Lingers Long After You Leave"
          description="Discover our award-winning perfumes crafted with rare botanicals."
          background={{ variant: "plain" }}
          carouselItems={[
            { id: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare-luxury/hero-1.webp?_wi=1" },
            { id: "2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare-luxury/hero-2.webp?_wi=1" },
            { id: "3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare-luxury/hero-3.webp?_wi=1" },
            { id: "4", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare-luxury/hero-4.webp" },
            { id: "5", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare-luxury/hero-5.webp" },
            { id: "6", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare-luxury/hero-6.webp" }
          ]}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="As Seen In"
          description="Our fragrance house featured in leading publications."
          names={["Vogue", "Harper's Bazaar", "Elle", "Forbes", "Allure"]}
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardTwo
          title="Exquisite Collection"
          description="Hand-crafted glass bottles and rare scents."
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          products={[
            { id: "1", brand: "UMBRA", name: "Solum", price: "$185", rating: 5, reviewCount: "128", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare-luxury/product-1.webp" },
            { id: "2", brand: "UMBRA", name: "Aura", price: "$165", rating: 4.8, reviewCount: "95", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare-luxury/product-2.webp" },
            { id: "3", brand: "UMBRA", name: "Velour", price: "$125", rating: 4.9, reviewCount: "78", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare-luxury/product-3.webp" },
            { id: "4", brand: "UMBRA", name: "Noir", price: "$195", rating: 5, reviewCount: "150", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare-luxury/product-4.webp" }
          ]}
        />
      </div>

      <div id="ingredients" data-section="ingredients">
        <FeatureCardSix
          title="The Art Behind Our Fragrances"
          description="Meticulously composed with rare essences."
          features={[
            { title: "Rare Ingredient Sourcing", description: "Sourced from sustainable fields.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare-luxury/hero-1.webp?_wi=2" },
            { title: "Master Perfumers", description: "Crafted by world-renowned noses.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare-luxury/hero-2.webp?_wi=2" },
            { title: "Lasting Sillage", description: "Exceptional longevity.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare-luxury/hero-3.webp?_wi=2" }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Investor Insights"
          description="Strategic growth in the luxury sector."
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          metrics={[
            { id: "1", icon: TrendingUp, title: "Market Share", value: "14%" },
            { id: "2", icon: Users, title: "Customer Retention", value: "87%" },
            { id: "3", icon: Star, title: "Brand Loyalty", value: "92%" }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="Client Experiences"
          description="Hear why our community chooses UMBRA."
          testimonials={[
            { id: "1", name: "Amara Osei", handle: "@amara", testimonial: "The scent is absolutely divine and long-lasting." },
            { id: "2", name: "Chloe Marchand", handle: "@chloe", testimonial: "Simply the best fragrance I have ever owned." }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="blog" data-section="blog">
        <BlogCardOne
          title="The UMBRA Journal"
          description="Explore the science of perfumery."
          blogs={[]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Everything you need to know."
          faqs={[]}
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get in Touch"
          description="Reach out to our team for inquiries."
          inputs={[
            { name: "email", type: "email", placeholder: "Enter your email" },
            { name: "message", type: "text", placeholder: "Your message" }
          ]}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          logoText="Primockos"
          columns={[
            { title: "Products", items: [{ label: "Shop All", href: "#products" }, { label: "Gift Sets", href: "#" }] },
            { title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Investors", href: "#metrics" }] }
          ]}
        />
      </div>
      </ReactLenis>
    </ThemeProvider>
  );
}