"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="smallMedium"
        sizing="mediumLargeSizeMediumTitles"
        background="floatingGradient"
        cardStyle="gradient-mesh"
        primaryButtonStyle="flat"
        secondaryButtonStyle="layered"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Shop",
          id: "#shop",
        },
        {
          name: "Solutions",
          id: "#solutions",
        },
        {
          name: "About",
          id: "#about",
        },
        {
          name: "Support",
          id: "#support",
        },
      ]}
      brandName="KAYNAR"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardCarousel
      background={{
        variant: "gradient-bars",
      }}
      title="Mastery in Every Detail."
      description="KAYNAR defines the standard for premium, high-utility organization solutions designed for the modern lifestyle."
      buttons={[
        {
          text: "Shop Collection",
          href: "#shop",
        },
      ]}
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/travel-suitcase-preparations-packing_23-2149070265.jpg",
          imageAlt: "Minimalist premium organization solution",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/keyboard-near-tablet-cup-smartphone-plant-monitor-cooling-fan_23-2148036906.jpg",
          imageAlt: "KAYNAR trunk organization",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/happy-customers-car-dealership_23-2149106165.jpg",
          imageAlt: "Premium cable management",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/desktop-with-notebook-watch_23-2148128821.jpg",
          imageAlt: "Travel organization gear",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-designer-choosing-textile-material-her-work_171337-14490.jpg",
          imageAlt: "Desk organization solutions",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/sample-pebbles-jar-table_107420-63896.jpg",
          imageAlt: "Home and office optimization",
        },
      ]}
    />
  </div>

  <div id="best-sellers" data-section="best-sellers">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="asymmetric-60-wide-40-narrow"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",
          brand: "KAYNAR",
          name: "Premium Trunk Organizer",
          price: "€129.00",
          rating: 5,
          reviewCount: "128",
          imageSrc: "http://img.b2bpic.net/free-photo/car-being-taking-care-workshop_23-2149580543.jpg",
        },
        {
          id: "p2",
          brand: "KAYNAR",
          name: "Minimalist Cable Hub",
          price: "€59.00",
          rating: 5,
          reviewCount: "89",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-hardware-component-background_23-2148882609.jpg",
        },
        {
          id: "p3",
          brand: "KAYNAR",
          name: "Seat Gap Organizer",
          price: "€45.00",
          rating: 4,
          reviewCount: "210",
          imageSrc: "http://img.b2bpic.net/free-photo/car-being-taking-care-workshop_23-2149580540.jpg",
        },
        {
          id: "p4",
          brand: "KAYNAR",
          name: "Travel Gear Case",
          price: "€89.00",
          rating: 5,
          reviewCount: "45",
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-black-spaghetti-tagliatelle-with-notebook_23-2148461728.jpg",
        },
        {
          id: "p5",
          brand: "KAYNAR",
          name: "Modular Drawer System",
          price: "€149.00",
          rating: 5,
          reviewCount: "112",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-packed-car-traveling_23-2151030896.jpg",
        },
        {
          id: "p6",
          brand: "KAYNAR",
          name: "Desk Cable Set",
          price: "€39.00",
          rating: 5,
          reviewCount: "304",
          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-desk-arrangement-with-ssd-laptop_23-2149328281.jpg",
        },
      ]}
      title="Best Sellers"
      description="Essential organizational tools for the refined modern home."
    />
  </div>

  <div id="lifestyle" data-section="lifestyle">
      <FeatureCardTwelve
      animationType="slide-up"
      textboxLayout="inline-image"
      useInvertedBackground={false}
      features={[
        {
          id: "f1",
          label: "Travel",
          title: "Precision Travel",
          items: [
            "Modular compartments",
            "Premium durable fabrics",
            "Weather-resistant design",
          ],
        },
        {
          id: "f2",
          label: "Office",
          title: "Distraction Free",
          items: [
            "Hidden cable routing",
            "Modular desk layout",
            "Ergonomic efficiency",
          ],
        },
        {
          id: "f3",
          label: "Automotive",
          title: "Seamless Transit",
          items: [
            "Non-slip design",
            "Collapsible storage",
            "High-impact materials",
          ],
        },
      ]}
      title="Living, Optimized."
      description="Transform your environment into a sanctuary of efficiency."
    />
  </div>

  <div id="about" data-section="about">
      <TextSplitAbout
      useInvertedBackground={false}
      title="The KAYNAR Promise"
      description={[
        "At KAYNAR, we believe that refined organization is the key to clarity. We engineer premium solutions that bridge the gap between aesthetic beauty and daily utility, serving the modern professional who demands perfection in every detail.",
      ]}
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          value: "50K+",
          description: "Global Homes Transformed",
        },
        {
          id: "m2",
          value: "4.9/5",
          description: "Average Satisfaction Rating",
        },
        {
          id: "m3",
          value: "12+",
          description: "Premium Countries Served",
        },
      ]}
      title="Our Impact"
      description="Efficiency reflected in every metric."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFive
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",
          name: "Elena M.",
          date: "Oct 2023",
          title: "Game Changer",
          quote: "The trunk organizer is pure quality. Clean, modular, and fits my BMW perfectly.",
          tag: "Verified Buyer",
          avatarSrc: "asset://avatar-1",
          imageSrc: "http://img.b2bpic.net/free-photo/smartphone-glasses-near-laptop-white_23-2147768897.jpg",
        },
        {
          id: "t2",
          name: "Marcus W.",
          date: "Sep 2023",
          title: "Pure Elegance",
          quote: "The desk organizer solved my cable clutter overnight. Premium feel indeed.",
          tag: "Verified Buyer",
          avatarSrc: "asset://avatar-2",
          imageSrc: "http://img.b2bpic.net/free-photo/modern-shop-prepared-live-auction_23-2149947500.jpg",
        },
        {
          id: "t3",
          name: "Sarah K.",
          date: "Aug 2023",
          title: "Must Have",
          quote: "Finally, organization gear that doesn't compromise on design. Highly recommended.",
          tag: "Verified Buyer",
          avatarSrc: "asset://avatar-3",
          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-dried-flowers-arrangement_23-2149591628.jpg",
        },
        {
          id: "t4",
          name: "David L.",
          date: "Jul 2023",
          title: "High Quality",
          quote: "Durable, sleek, and incredibly practical. KAYNAR is the new standard.",
          tag: "Verified Buyer",
          avatarSrc: "asset://avatar-4",
          imageSrc: "http://img.b2bpic.net/free-photo/modern-shop-prepared-live-auction_23-2149947496.jpg",
        },
        {
          id: "t5",
          name: "Sophie H.",
          date: "Jun 2023",
          title: "Minimalist Heaven",
          quote: "Simple, efficient, and beautiful. Perfectly fits my modern office aesthetic.",
          tag: "Verified Buyer",
          avatarSrc: "asset://avatar-5",
          imageSrc: "http://img.b2bpic.net/free-photo/empty-workplace-office_1098-21662.jpg",
        },
      ]}
      title="Refined Reviews"
      description="What the modern elite say about KAYNAR."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",
          title: "What materials do you use?",
          content: "We source high-durability polymers and premium fabrics chosen for their longevity and sleek aesthetics.",
        },
        {
          id: "q2",
          title: "Do you ship to Germany?",
          content: "Absolutely. We offer fast, tracked shipping across the entire EU region.",
        },
        {
          id: "q3",
          title: "What if I'm not satisfied?",
          content: "We offer a 30-day money-back guarantee with no questions asked on all unused products.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/top-view-business-desk-arrangement_23-2148128260.jpg"
      mediaAnimation="slide-up"
      title="Common Questions"
      description="Answers to keep your transition to a KAYNAR lifestyle seamless."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient",
      }}
      tag="Get in touch"
      title="Refinement Awaits."
      description="Have questions about a custom solution for your home or office? Reach out to our team."
      buttons={[
        {
          text: "Contact Support",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        {
          items: [
            {
              label: "Returns Policy",
              href: "#",
            },
            {
              label: "Shipping Policy",
              href: "#",
            },
          ],
        },
        {
          items: [
            {
              label: "Privacy Policy",
              href: "#",
            },
            {
              label: "Terms of Service",
              href: "#",
            },
          ],
        },
      ]}
      logoText="KAYNAR"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
