"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqBase from '@/components/sections/faq/FaqBase';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="mediumLarge"
        sizing="medium"
        background="noiseDiagonalGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Shop",          id: "/products"},
        {
          name: "About",          id: "#about"},
        {
          name: "Gallery",          id: "#gallery"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="FKD WRLD"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroLogo
      logoText="FKD WRLD"
      description="Crafting the future of premium streetwear. High-end silhouettes for the modern movement."
      buttons={[
        {
          text: "Shop Now",          href: "/products"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-chair-inside_23-2149359824.jpg"
      imageAlt="FKD WRLD Hero Hoodie"
      showDimOverlay={true}
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",          name: "Midnight Hoodie",          price: "$120",          variant: "Black",          imageSrc: "http://img.b2bpic.net/free-photo/woman-making-jacket-close-up_23-2148898084.jpg?_wi=1"},
        {
          id: "p2",          name: "Concrete Hoodie",          price: "$120",          variant: "Grey",          imageSrc: "http://img.b2bpic.net/free-photo/view-woman-wearing-stylish-fedora-hat_23-2150711559.jpg?_wi=1"},
        {
          id: "p3",          name: "Shadow Hoodie",          price: "$135",          variant: "Charcoal",          imageSrc: "http://img.b2bpic.net/free-photo/young-lady-oversized-hoodie-pants-holding-hands-head-looking-annoyed-front-view_176474-58539.jpg?_wi=1"},
        {
          id: "p4",          name: "Graphic Icon",          price: "$145",          variant: "Black",          imageSrc: "http://img.b2bpic.net/free-vector/black-white-instagram-stories_79603-759.jpg?_wi=1"},
        {
          id: "p5",          name: "Essential Hoodie",          price: "$110",          variant: "Black",          imageSrc: "http://img.b2bpic.net/free-photo/fashion-photo-young-magnificent-woman-black-shirt_158595-1040.jpg"},
        {
          id: "p6",          name: "Core Essential",          price: "$110",          variant: "Grey",          imageSrc: "http://img.b2bpic.net/free-photo/teenager-wearing-white-hoodie-portrait_23-2149359831.jpg"},
      ]}
      title="Featured Collection"
      description="Premium oversized hoodies, redefined for the streets."
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={true}
      title="Defined by Culture"
      description="FKD WRLD isn't just a brand; it's a movement. We merge architectural cuts with high-end fabrications to deliver streetwear that commands attention."
      metrics={[
        {
          value: "100%",          title: "Heavy Cotton"},
        {
          value: "24/7",          title: "Street Ready"},
        {
          value: "Ltd",          title: "Drops"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/sensual-girl-all-black-red-lips-hat-goth-dramatic-woman-hold-white-chrysanthemum-flower-against-graffiti-wall_627829-6268.jpg"
      imageAlt="Streetwear Lifestyle"
      mediaAnimation="blur-reveal"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="gallery" data-section="gallery">
      <MetricCardEleven
      animationType="scale-rotate"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "g1",          value: "City",          title: "Tokyo Nights",          description: "Urban exploration.",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-posing-outdoors_23-2150204396.jpg"},
        {
          id: "g2",          value: "Culture",          title: "Studio Sessions",          description: "Creative process.",          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-friends-posing-night-with-flash_23-2150204453.jpg"},
        {
          id: "g3",          value: "Brand",          title: "FKD Aesthetic",          description: "Defined by us.",          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-new-york-city-daytime_23-2149488557.jpg"},
      ]}
      title="Lifestyle Gallery"
      description="From the streets to the studio. Always FKD."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",          name: "Jax S.",          role: "Creative",          company: "FKD Crew",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-with-long-blonde-hair-wearing-red-jacket_23-2149020151.jpg"},
        {
          id: "t2",          name: "Mina K.",          role: "Stylist",          company: "FKD Crew",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/outdoor-shot-curly-haired-woman-wears-sunglasses-jacket-hoodie-checks-time-smartwatch-spends-free-time-walking-city-sunny-weather-uses-application-modern-lifestyle-concept_273609-60619.jpg"},
        {
          id: "t3",          name: "Leo B.",          role: "Producer",          company: "FKD Crew",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-posing-outside_23-2149439874.jpg"},
        {
          id: "t4",          name: "Sara D.",          role: "Designer",          company: "FKD Crew",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/fashion-glamour-woman-trendy-fur-coat-glasses-with-gold-jewelry-posing-city_291650-702.jpg"},
        {
          id: "t5",          name: "Ren M.",          role: "Model",          company: "FKD Crew",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/pop-punk-aesthetic-portrait-woman-posing-inside-building_23-2149371489.jpg"},
      ]}
      title="Community Voices"
      description="Hear what the movement thinks."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "f1",          title: "Shipping times?",          content: "Orders ship within 48 hours."},
        {
          id: "f2",          title: "Sizing guide?",          content: "Our hoodies are oversized. Size down for regular fit."},
        {
          id: "f3",          title: "Returns policy?",          content: "Free returns within 30 days."},
      ]}
      title="Common Inquiries"
      description="Everything you need to know about your order."
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="newsletter" data-section="newsletter">
      <ContactCTA
      useInvertedBackground={true}
      background={{
        variant: "plain"}}
      tag="FKD CLUB"
      title="Stay Informed"
      description="Join our newsletter for early access to limited drops."
      buttons={[
        {
          text: "Join Club",          href: "#"},
      ]}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "plain"}}
      tag="SUPPORT"
      title="Get In Touch"
      description="Questions about your order? We're here for you."
      buttons={[
        {
          text: "Email Us",          href: "mailto:hello@fkdwrld.com"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="FKD WRLD"
      columns={[
        {
          title: "Links",          items: [
            {
              label: "Shop",              href: "/products"},
            {
              label: "About",              href: "#about"},
          ],
        },
        {
          title: "Social",          items: [
            {
              label: "Instagram",              href: "https://instagram.com"},
            {
              label: "TikTok",              href: "https://tiktok.com"},
          ],
        },
      ]}
      copyrightText="© 2025 | FKD WRLD"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
