"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqBase from '@/components/sections/faq/FaqBase';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="mediumLarge"
        background="none"
        cardStyle="glass-depth"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        { name: "Finds", id: "#finds" },
        { name: "FAQ", id: "#faq" },
        { name: "Community", id: "#contact" },
      ]}
      brandName="cadenreps.pl"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitKpi
      background={{ variant: "gradient-bars" }}
      title="Najlepsze znaleziska w jednym miejscu"
      description="Twoja brama do świata najwyższej jakości produktów. Odkryj starannie wyselekcjonowane linki i dołącz do społeczności pasjonatów."
      kpis={[
        { value: "10k+", label: "Sprawdzonych linków" },
        { value: "5k+", label: "Aktywnych członków" },
        { value: "24/7", label: "Aktualizacje ofert" }
      ]}
      enableKpiAnimation={true}
      buttons={[{ text: "Sprawdź listę", href: "#finds" }, { text: "Dołącz teraz", href: "#contact" }]}
      imageSrc="http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-digital-particle-design_1048-12790.jpg"
      mediaAnimation="blur-reveal"
    />
  </div>

  <div id="finds" data-section="finds">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="split-description"
      gridVariant="one-large-left-three-stacked-right"
      title="Polecane produkty"
      description="Najświeższe dropy wyselekcjonowane przez ekspertów."
      useInvertedBackground={false}
      products={[
        { id: "1", name: "Nike TN Black", price: "120 PLN", imageSrc: "http://img.b2bpic.net/free-photo/bride-s-wedding-shoes-stand-wood-floor-outdoor_8353-9649.jpg" },
        { id: "2", name: "Nike TN White", price: "120 PLN", imageSrc: "http://img.b2bpic.net/free-photo/denim-sneakers-street-style_53876-15369.jpg" },
        { id: "3", name: "Sport Runner", price: "140 PLN", imageSrc: "http://img.b2bpic.net/free-photo/young-female-ballerina-wearing-pointe-shoe-sneaker-indoors-botanical-garden_23-2149344175.jpg" },
        { id: "4", name: "Air Elite", price: "180 PLN", imageSrc: "http://img.b2bpic.net/free-photo/person-wearing-black-leather-boots_250224-308.jpg" }
      ]}
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      faqs={[
        { id: "1", title: "Jak korzystać z arkusza?", content: "Wystarczy kliknąć przycisk w sekcji produktów i filtrować według preferencji." },
        { id: "2", title: "Czy linki są bezpieczne?", content: "Weryfikujemy każdego sprzedawcę przed dodaniem do bazy." },
        { id: "3", title: "Jak dołączyć do grupy?", content: "Wystarczy zarejestrować się przez formularz kontaktowy poniżej." }
      ]}
      title="Najczęstsze pytania"
      description="Wszystko, co musisz wiedzieć o społeczności."
      faqsAnimation="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      showCard={true}
    />
  </div>

  <div id="socialProof" data-section="socialProof">
      <SocialProofOne
      names={["RepCommunity", "SneakerHeat", "TrustRep", "StyleVault"]}
      title="Zaufane partnerstwa"
      description="Współpracujemy z najlepszymi w branży."
      textboxLayout="default"
      useInvertedBackground={false}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      title="Zostań członkiem"
      description="Zapisz się do naszej bazy, aby otrzymywać powiadomienia o nowych dropach i eventach społecznościowych."
      inputs={[
        { name: "name", type: "text", placeholder: "Twoje imię" },
        { name: "email", type: "email", placeholder: "Twój email" }
      ]}
      useInvertedBackground={false}
      buttonText="Dołącz"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="cadenreps.pl"
      columns={[
        { title: "Produkt", items: [{ label: "Arkusz", href: "#" }, { label: "Poradniki", href: "#" }] },
        { title: "Społeczność", items: [{ label: "Discord", href: "#" }, { label: "Instagram", href: "#" }] }
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}