"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="smallMedium"
        sizing="largeSmallSizeMediumTitles"
        background="circleGradient"
        cardStyle="gradient-radial"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Products",
          id: "products",
        },
        {
          name: "About",
          id: "about",
        },
        {
          name: "Testimonials",
          id: "testimonials",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="T-Money Products"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitKpi
      background={{
        variant: "plain",
      }}
      title="Elevate Your Streetwear Game"
      description="Discover T-Money Products: where premium urban quality meets daily comfort. Our latest collection is built for the bold and the restless."
      kpis={[
        {
          value: "10K+",
          label: "Happy Customers",
        },
        {
          value: "500+",
          label: "Unique Styles",
        },
        {
          value: "24/7",
          label: "Style Support",
        },
      ]}
      enableKpiAnimation={true}
      buttons={[
        {
          text: "Shop Now",
          href: "#products",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/person-using-eco-transport-new-york_23-2149219979.jpg"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-white-hoodie-blue-jeans-posing-against-neon-background_89887-1131.jpg",
          alt: "Stylish customer 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/stylish-brunette-girl-wear-leather-jacket-shorts-with-backpack-against-shipping-container_627829-8008.jpg",
          alt: "Stylish customer 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/well-dressed-young-male-model-posing-steps-with-gently-smile-indoor-photo-curious-african-guy-wears-hat_197531-22071.jpg",
          alt: "Stylish customer 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/young-people-skateboarding-japan_23-2149331736.jpg",
          alt: "Stylish customer 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/young-happy-readhead-bearded-man-with-backpack-retro-camera_171337-7895.jpg",
          alt: "Stylish customer 5",
        },
      ]}
      avatarText="Join our community of trendsetters"
      marqueeItems={[
        {
          type: "text",
          text: "PREMIUM QUALITY",
        },
        {
          type: "text",
          text: "FAST SHIPPING",
        },
        {
          type: "text",
          text: "ECO-CONSCIOUS",
        },
        {
          type: "text",
          text: "URBAN STYLE",
        },
        {
          type: "text",
          text: "DAILY COMFORT",
        },
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentySeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          id: "f1",
          title: "Superior Fabrics",
          descriptions: [
            "High-grade cottons and blends for maximum durability.",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-wool-texture-details_23-2149620489.jpg",
        },
        {
          id: "f2",
          title: "Eco-Conscious",
          descriptions: [
            "Sustainable production methods that respect our planet.",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/light-brown-beige-pants-outdoors-still-life_23-2150756273.jpg",
        },
        {
          id: "f3",
          title: "Rapid Shipping",
          descriptions: [
            "Get your new look delivered to your door in days.",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-shipping-boxes-arrangement_23-2148790085.jpg",
        },
      ]}
      title="Built for Every Day"
      description="We prioritize quality, sustainability, and effortless style in every garment we produce."
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={false}
      title="Our Craft"
      description="T-Money Products was born in a small studio with a big vision: creating apparel that feels as authentic as the people who wear it. We balance tradition with modern edge."
      metrics={[
        {
          value: "100%",
          title: "Quality Assured",
        },
        {
          value: "50+",
          title: "Global Partners",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/young-fashion-designer-working-her-workshop-alone_23-2148877353.jpg"
      mediaAnimation="slide-up"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",
          name: "Signature Hoodie",
          price: "$85",
          variant: "Classic Black",
          imageSrc: "http://img.b2bpic.net/free-photo/full-view-stylish-woman-city-looking-away_197531-33381.jpg",
        },
        {
          id: "p2",
          name: "Urban Sweater",
          price: "$65",
          variant: "Ash Gray",
          imageSrc: "http://img.b2bpic.net/free-photo/empty-shopping-mall-with-casual-formal-wear-brands_482257-88618.jpg",
        },
        {
          id: "p3",
          name: "Bomber Jacket",
          price: "$120",
          variant: "Olive",
          imageSrc: "http://img.b2bpic.net/free-photo/isolated-spring-sweater-concept_1194-638660.jpg",
        },
        {
          id: "p4",
          name: "Street Joggers",
          price: "$55",
          variant: "Black",
          imageSrc: "http://img.b2bpic.net/free-photo/stylish-hipster-arab-man-guy-sunglasses-posed-outdoor-street-sunset-against-gray-wall_627829-2738.jpg",
        },
        {
          id: "p5",
          name: "Logo Cap",
          price: "$25",
          variant: "Midnight",
          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-empty-notebook-cellphone-woman-s-accessories-black-concept-top-view-isolated-white-background_1428-526.jpg",
        },
        {
          id: "p6",
          name: "Daily Sneakers",
          price: "$95",
          variant: "White",
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-athletic-woman-s-legs-with-copy-space_23-2148444908.jpg",
        },
      ]}
      title="New Arrivals"
      description="Fresh drops from our signature collections."
    />
  </div>

  <div id="social" data-section="social">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Urban Outfitters",
        "Street Trend",
        "Style Daily",
        "Culture Fit",
        "Moda Street",
        "Global Vogue",
        "Urban Edge",
      ]}
      title="Trusted by Creators"
      description="Join thousands of style enthusiasts across the world."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",
          name: "Alex River",
          role: "Photographer",
          company: "Studio X",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/good-looking-laughing-girl-waiting-party-choosing-attire_197531-7001.jpg",
        },
        {
          id: "t2",
          name: "Jamie Lee",
          role: "Designer",
          company: "Creative Hub",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-personal-shopper-working_23-2148924143.jpg",
        },
        {
          id: "t3",
          name: "Morgan West",
          role: "Student",
          company: "University",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-man-sitting-sofa_1098-927.jpg",
        },
        {
          id: "t4",
          name: "Casey Hill",
          role: "Blogger",
          company: "Vogue Daily",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-woman-shorts-sitting-floor_1140-531.jpg",
        },
        {
          id: "t5",
          name: "Drew Kim",
          role: "Architect",
          company: "Build Co",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-male-wearing-suit-tie-standing-classroom_181624-14287.jpg",
        },
      ]}
      kpiItems={[
        {
          value: "4.9",
          label: "Avg Rating",
        },
        {
          value: "95%",
          label: "Satisfaction",
        },
        {
          value: "100%",
          label: "Customer Support",
        },
      ]}
      title="Community Love"
      description="See why our community keeps coming back."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      tag="Let's Connect"
      title="Need Help With Your Style?"
      description="Questions about sizing, shipping, or collaborations? Reach out today."
      buttons={[
        {
          text: "Contact Us",
          href: "mailto:hello@tmoneyproducts.com",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="T-Money Products"
      columns={[
        {
          title: "Shop",
          items: [
            {
              label: "Products",
              href: "#products",
            },
            {
              label: "Collections",
              href: "#",
            },
          ],
        },
        {
          title: "Support",
          items: [
            {
              label: "Shipping",
              href: "#",
            },
            {
              label: "Returns",
              href: "#",
            },
          ],
        },
        {
          title: "Company",
          items: [
            {
              label: "About",
              href: "#about",
            },
            {
              label: "Contact",
              href: "#contact",
            },
          ],
        },
      ]}
      copyrightText="© 2024 T-Money Products. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
