"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="small"
        sizing="largeSizeMediumTitles"
        background="fluid"
        cardStyle="gradient-bordered"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="solid"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Início",          id: "/"},
        {
          name: "Loja",          id: "#loja"},
        {
          name: "Tech",          id: "#tech"},
        {
          name: "Motor",          id: "#motor"},
        {
          name: "Street",          id: "#street"},
        {
          name: "Sobre",          id: "#sobre"},
        {
          name: "Contato",          id: "#contato"},
      ]}
      brandName="KREUX"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardRotatedCarousel
      background={{
        variant: "gradient-bars"}}
      title="ENGENHARIA EM MOVIMENTO"
      description="Streetwear técnico para velocidade, sistemas e cultura urbana."
      buttons={[
        {
          text: "Ver coleção",          href: "#loja"},
        {
          text: "Conheça a KREUX",          href: "#sobre"},
      ]}
      carouselItems={[
        {
          id: "1",          videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=99lq91&_wi=1",          imageAlt: "Streetwear Lifestyle",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=99lq91&_wi=2"},
        {
          id: "2",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=lsbziv",          imageAlt: "Industrial Fabric"},
        {
          id: "3",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=lubqk2",          imageAlt: "Motorsport Action"},
        {
          id: "4",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8nhz8z",          imageAlt: "Urban City Night"},
        {
          id: "5",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=czxpna",          imageAlt: "Abstract Tech Interface"},
        {
          id: "6",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=h6fu30",          imageAlt: "Racing Circuits"},
      ]}
    />
  </div>

  <div id="tech-motor-street" data-section="tech-motor-street">
      <FeatureCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "KREUX_TECH",          description: "Sistemas, precisão e estética industrial.",          phoneOne: {
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=n5x0gz"},
          phoneTwo: {
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=obk3r0"},
        },
        {
          title: "KREUX_MOTOR",          description: "Velocidade, circuitos e performance.",          phoneOne: {
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=089brt"},
          phoneTwo: {
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=twzqs4"},
        },
        {
          title: "KREUX_STREET",          description: "Presença urbana, atitude e moda.",          phoneOne: {
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jbr5n3"},
          phoneTwo: {
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ygo3wx"},
        },
      ]}
      showStepNumbers={false}
      title="Linhas KREUX"
      description="Sistemas de performance para cada ambiente."
    />
  </div>

  <div id="loja" data-section="loja">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",          name: "KREUX_TECH White Tee",          price: "R$ 249,00",          variant: "Minimalist",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zcdt2f"},
        {
          id: "p2",          name: "KREUX_MOTOR Interlagos",          price: "R$ 389,00",          variant: "Limited Edition",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=uaytzd"},
        {
          id: "p3",          name: "KREUX_STREET Division",          price: "R$ 289,00",          variant: "Streetwear",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nqlvyr"},
        {
          id: "p4",          name: "KREUX Core Black Tee",          price: "R$ 199,00",          variant: "Essential",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pw7qwb"},
        {
          id: "p5",          name: "KREUX Tech System",          price: "R$ 349,00",          variant: "Performance",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dttlh0"},
        {
          id: "p6",          name: "KREUX Racing Mesh",          price: "R$ 429,00",          variant: "Limited",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=atff5i"},
      ]}
      title="Lançamentos"
      description="Coleção atual desenvolvida para alta performance urbana."
    />
  </div>

  <div id="sobre" data-section="sobre">
      <TextSplitAbout
      useInvertedBackground={true}
      title="Sobre a KREUX"
      description={[
        "A KREUX é uma marca de streetwear técnico focada na intersecção entre tecnologia, automotivismo e cultura urbana.",        "Nossa engenharia em movimento cria vestuário para quem não aceita o estático. Desenvolvemos peças pensadas na performance, na estética dos sistemas e na atitude das ruas.",        "Cada peça é um drop limitado, garantindo a exclusividade de quem dita o ritmo."]}
    />
  </div>

  <div id="contato" data-section="contato">
      <ContactSplit
      useInvertedBackground={false}
      background={{
        variant: "gradient-bars"}}
      tag="Newsletter"
      title="Mantenha o sistema atualizado"
      description="Receba acesso prioritário aos nossos drops e conteúdos exclusivos."
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6ogcwp"
      mediaAnimation="slide-up"
      inputPlaceholder="Seu melhor e-mail"
      buttonText="Inscrever"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        {
          items: [
            {
              label: "Loja",              href: "#loja"},
            {
              label: "Tech",              href: "#tech"},
            {
              label: "Motor",              href: "#motor"},
            {
              label: "Street",              href: "#street"},
          ],
        },
        {
          items: [
            {
              label: "Sobre",              href: "#sobre"},
            {
              label: "Contato",              href: "#contato"},
            {
              label: "Privacidade",              href: "#"},
          ],
        },
        {
          items: [
            {
              label: "Instagram",              href: "https://instagram.com"},
            {
              label: "TikTok",              href: "https://tiktok.com"},
            {
              label: "Shopee",              href: "https://shopee.com"},
            {
              label: "Mercado Livre",              href: "https://mercadolivre.com"},
          ],
        },
      ]}
      logoText="KREUX"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
