"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 FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MediaAbout from '@/components/sections/about/MediaAbout';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="mediumSmall"
        sizing="largeSmallSizeLargeTitles"
        background="floatingGradient"
        cardStyle="outline"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",
          id: "#hero",
        },
        {
          name: "Collections",
          id: "#products",
        },
        {
          name: "About",
          id: "#about",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="TrendStyle"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlay
      title="Define Your Style"
      description="Premium apparel designed for the modern individual. Quality, sustainability, and trend-focused designs at your fingertips."
      buttons={[
        {
          text: "Shop Collections",
          href: "#products",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/lifestyle-leisure-recreation-activity-icon_53876-21314.jpg"
      imageAlt="Fashion model wearing premium clothing"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/young-woman-with-full-shopping-bags_329181-5074.jpg",
          alt: "Customer 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/shopping-concept-close-up-portrait-young-beautiful-attractive-redhair-girl-smiling-looking-camera_1258-119094.jpg",
          alt: "Customer 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/women-holding-shopping-bags-with-copy-space_23-2148385726.jpg",
          alt: "Customer 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/single-s-day-banner-design_23-2149667427.jpg",
          alt: "Customer 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/top-view-hand-holding-furoshiki-package_23-2150274477.jpg",
          alt: "Customer 5",
        },
      ]}
      avatarText="Join 10,000+ happy customers"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyEight
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          id: "f1",
          title: "Premium Quality",
          subtitle: "Crafted to last",
          category: "Durability",
          value: "100%",
        },
        {
          id: "f2",
          title: "Fast Shipping",
          subtitle: "At your door",
          category: "Logistics",
          value: "24h",
        },
        {
          id: "f3",
          title: "Secure Checkout",
          subtitle: "Safe & easy",
          category: "Payment",
          value: "SSL",
        },
      ]}
      title="Why Choose Us"
      description="We prioritize quality materials, ethical production, and seamless shopping experiences."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",
          name: "Classic Denim Jacket",
          price: "$120",
          imageSrc: "http://img.b2bpic.net/free-photo/stylish-casual-hipster-girl-jeans-wear-glasses-against-large-graffiti-wall_627829-7743.jpg",
        },
        {
          id: "p2",
          name: "Organic Cotton Tee",
          price: "$35",
          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-people-laying-together_23-2149525610.jpg",
        },
        {
          id: "p3",
          name: "Linen Summer Shirt",
          price: "$65",
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-smiling-model-with-horns-hairstyle-dressed-summer-hipster-white-t-shirt-clothes-sexy-carefree-girl-posing-street-near-wall-trendy-funny-positive-woman-having-fun-sunglasses_158538-6656.jpg",
        },
        {
          id: "p4",
          name: "Slim Fit Chinos",
          price: "$80",
          imageSrc: "http://img.b2bpic.net/free-photo/full-body-shot-thoughtful-sporty-slim-woman-dressed-sportswear-carries-karemat-looks-away-outdoors_273609-55460.jpg",
        },
        {
          id: "p5",
          name: "Wool Knit Sweater",
          price: "$95",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-sweater-covering-face-with-cap_23-2147966106.jpg",
        },
        {
          id: "p6",
          name: "Urban Street Hoodie",
          price: "$75",
          imageSrc: "http://img.b2bpic.net/free-photo/horizontal-shot-thoughtful-swag-african-girl-with-pensive-expression_273609-44921.jpg",
        },
      ]}
      title="New Arrivals"
      description="Explore our latest seasonal collections."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={false}
      testimonial="The quality of the clothing is unmatched! Fast shipping and perfect fit every time. My go-to brand."
      rating={5}
      author="Sarah Miller"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/happy-woman-glasses-smiling-against-window_197531-16936.jpg",
          alt: "Customer 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/young-confident-stylish-man-coat-intently-looking-away-outdoor_574295-1325.jpg",
          alt: "Customer 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-professional-female-photographer-street-photographing-camera-photo-shoot-photosession-city_639032-2484.jpg",
          alt: "Customer 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/crazy-man-funny-expression_1194-3203.jpg",
          alt: "Customer 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/front-view-young-woman-with-white-jacket-just-standing-pink-background-lady-emotions-fashion-feeling-color-woman_140725-99194.jpg",
          alt: "Customer 5",
        },
      ]}
      ratingAnimation="slide-up"
      avatarsAnimation="slide-up"
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={true}
      title="Our Story"
      description="Founded with a vision to redefine everyday style through sustainable and ethical practices, TrendStyle bridges the gap between high fashion and daily comfort."
      imageSrc="http://img.b2bpic.net/free-photo/cheerful-young-fashion-designer-linen-red-dress-smiles-sincerely-charming-woman-holds-pencils-draws-cloth-pattern-craft-paper-sheet_197531-29816.jpg"
      imageAlt="Our workshop studio"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",
          title: "What is your return policy?",
          content: "We offer returns within 30 days of purchase for unused items.",
        },
        {
          id: "q2",
          title: "Do you offer worldwide shipping?",
          content: "Yes, we ship to over 50 countries globally.",
        },
        {
          id: "q3",
          title: "How do I find my size?",
          content: "Check our detailed sizing guide available on every product page.",
        },
      ]}
      title="Common Questions"
      description="Here is what you need to know about shopping with us."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={true}
      background={{
        variant: "plain",
      }}
      tag="Get In Touch"
      title="Stay Connected"
      description="Join our newsletter for updates, exclusive offers, and early access to new arrivals."
      buttons={[
        {
          text: "Subscribe Now",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="TrendStyle"
      columns={[
        {
          title: "Shop",
          items: [
            {
              label: "New Arrivals",
              href: "#products",
            },
            {
              label: "Sale",
              href: "#",
            },
          ],
        },
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "#about",
            },
            {
              label: "Contact",
              href: "#contact",
            },
          ],
        },
        {
          title: "Legal",
          items: [
            {
              label: "Privacy Policy",
              href: "#",
            },
            {
              label: "Terms of Service",
              href: "#",
            },
          ],
        },
      ]}
      copyrightText="© 2024 TrendStyle. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
