"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import { Globe, Layers, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="medium"
        sizing="mediumLargeSizeMediumTitles"
        background="noise"
        cardStyle="gradient-mesh"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="solid"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Shop",
          id: "#products",
        },
        {
          name: "About",
          id: "#about",
        },
      ]}
      brandName="CULT"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlay
      title="UNSTRUCTURED REALITY"
      description="SEASON 01 COLLECTION. EXPERIMENTAL LUXURY."
      imageSrc="http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-2628.jpg?_wi=1"
      textPosition="bottom-left"
      showDimOverlay={true}
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardFour
      textboxLayout="default"
      gridVariant="asymmetric-60-wide-40-narrow"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",
          name: "STRUCTURED HOODIE",
          price: "$450",
          variant: "Oversized",
          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-nature-close-up_23-2148877533.jpg?_wi=1",
        },
        {
          id: "p2",
          name: "RAW DENIM",
          price: "$380",
          variant: "Wide-leg",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-walking-white-blouse-terracotta-pants-minimalist-setting_24972-2967.jpg?_wi=1",
        },
        {
          id: "p3",
          name: "TECH JERSEY",
          price: "$290",
          variant: "Fitted",
          imageSrc: "http://img.b2bpic.net/free-photo/fashionable-fedora-hat-studio_23-2150744037.jpg?_wi=1",
        },
        {
          id: "p4",
          name: "LEATHER UTILITY VEST",
          price: "$620",
          variant: "Structured",
          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-nature-close-up_23-2148877533.jpg?_wi=2",
        },
      ]}
      title="COLLECTION"
      description="A curated series of high-fashion silhouettes designed for the contemporary urban landscape."
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={false}
      title="DESIGN ETHOS"
      metricsAnimation="blur-reveal"
      metrics={[
        {
          icon: Layers,
          label: "Fabric Types",
          value: "12+",
        },
        {
          icon: Globe,
          label: "Global Stockists",
          value: "45",
        },
        {
          icon: Users,
          label: "Community Members",
          value: "10k+",
        },
      ]}
    />
  </div>

  <div id="testimonial" data-section="testimonial">
      <TestimonialCardTen
      textboxLayout="default"
      useInvertedBackground={false}
      title="VOICES"
      description="Perspectives from our community."
      testimonials={[
        {
          id: "t1",
          title: "True Innovation",
          quote: "The most refreshing take on street-luxury I have encountered this year.",
          name: "Alex Rivet",
          role: "Fashion Critic",
          imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-2628.jpg?_wi=2",
        },
        {
          id: "t2",
          title: "Essential Cuts",
          quote: "The oversized fits are perfectly proportioned. Quality is unmatched.",
          name: "Sarah Chen",
          role: "Creative Director",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-walking-white-blouse-terracotta-pants-minimalist-setting_24972-2967.jpg?_wi=2",
        },
        {
          id: "t3",
          title: "Avant-Garde",
          quote: "Every piece feels like a sculpture you can wear. Truly experimental.",
          name: "Marcus Vane",
          role: "Designer",
          imageSrc: "http://img.b2bpic.net/free-photo/fashionable-fedora-hat-studio_23-2150744037.jpg?_wi=2",
        },
      ]}
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      title="INQUIRIES"
      description="Common questions about the brand."
      faqsAnimation="blur-reveal"
      faqs={[
        {
          id: "f1",
          title: "What is the return policy?",
          content: "We offer returns within 14 days of delivery for unworn items in original packaging.",
        },
        {
          id: "f2",
          title: "Do you ship internationally?",
          content: "Yes, we ship to over 100 countries globally via DHL Express.",
        },
        {
          id: "f3",
          title: "How do I care for my garments?",
          content: "Please follow the care labels inside each garment, typically dry clean only for structured pieces.",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="CULT"
      copyrightText="© 2025 CULT STUDIOS."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}