"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="smallMedium"
        sizing="mediumLargeSizeMediumTitles"
        background="noise"
        cardStyle="outline"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        { name: "Funzionamento", id: "come-funziona" },
        { name: "Caso Tango", id: "caso-tango" },
        { name: "Contatti", id: "contatti" },
      ]}
      brandName="Quadra AI"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlay
      title="Il margine che pensavi di aver perso, lo ritrovi qui."
      description="Quadra legge i tuoi DDT, listini e fatture, scova gli errori di prezzo e ti restituisce gli euro che il fornitore non ti ha mai accreditato. Tu fai una foto. Al resto pensiamo noi."
      buttons={[
        { text: "Prenota demo gratuita", href: "#contatti" },
        { text: "Vedi come funziona", href: "#come-funziona" },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/woman-with-protective-mask-using-her-mobile-phone-shop_23-2148480572.jpg"
      avatars={[
        { src: "http://img.b2bpic.net/free-photo/person-s-hand-showing-mobile-phone-screen-display-mall_23-2148041765.jpg", alt: "A person's hand showing mobile phone screen display in the mall" },
        { src: "http://img.b2bpic.net/free-photo/close-up-woman-s-hand-showing-her-smart-phone-with-white-screen-display_23-2148041780.jpg", alt: "Close-up of woman's hand showing her smart phone with white screen display" },
        { src: "http://img.b2bpic.net/free-photo/woman-takes-photo-vegetable-smoothie-smartphone-blogger-takes-photo-food-concept-weight-loss-detox_169016-41706.jpg", alt: "A woman takes a photo of a vegetable smoothie on smartphone" },
        { src: "http://img.b2bpic.net/free-photo/blank-display-phone-with-vegetable-white-backdrop_23-2148193163.jpg", alt: "Blank display phone with vegetable in white backdrop" },
        { src: "http://img.b2bpic.net/free-photo/isolated-shot-hands-holding-tablet-phone-white-wall_181624-46816.jpg", alt: "Isolated shot of hands holding a tablet and a phone on white wall" },
      ]}
      avatarText="Unisciti ai gestori GDO che hanno già recuperato il proprio margine"
    />
  </div>

  <div id="problema" data-section="problema">
      <MediaAbout
      useInvertedBackground={false}
      title="Ogni giorno il tuo supermercato perde margine."
      description="Un supermercato medio perde 5-6 punti di margine all'anno in errori di prezzo non contestati. Prezzi fatturati errati, DDT dispersi e note di credito dimenticate sono il quotidiano di chi non ha Quadra."
      imageSrc="http://img.b2bpic.net/free-photo/greenscreen-device-eco-store_482257-76672.jpg"
    />
  </div>

  <div id="come-funziona" data-section="come-funziona">
      <FeatureCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "Scatta",          description: "Fai una foto al DDT con il telefono.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/woman-checking-her-delivery-groceries_23-2149950116.jpg" },
          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/rear-view-dark-skinned-student-holding-smart-phone-with-blank-screen-your-information-writing-down-notes-copybook-while-learning-university-library-canteen_273609-7526.jpg" }
        },
        {
          title: "Analisi",          description: "L'AI legge tutto in 20 secondi.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-hands-taking-photos_23-2149294451.jpg" },
          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/delivery-man-giving-groceries-order-customer_23-2149950078.jpg" }
        },
        {
          title: "Confronta",          description: "Confronta automaticamente con il listino.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-taking-photos_23-2149002424.jpg" },
          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/woman-with-hygienic-mask-rubber-gloves-shopping-cart-grocery-buying-fruit-corona-virus-preparing-pandemic-quarantine_342744-1055.jpg" }
        },
        {
          title: "Recupera",          description: "Approvi e recuperi il margine.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/person-taking-photo-plate-fruit-with-smartphone_23-2149428223.jpg" },
          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/top-view-hand-holding-blank-phone-variety-lunchboxes_23-2148520485.jpg" }
        },
      ]}
      showStepNumbers={true}
      title="Semplice, veloce, concreto."
      description="Quadra trasforma un'operazione complessa in un gesto da pochi secondi."
    />
  </div>

  <div id="caso-tango" data-section="caso-tango">
      <MediaAbout
      useInvertedBackground={false}
      title="Tango, Bolognano. In produzione dal 2026."
      description="Fabio Taffoni gestisce il supermercato Tango. Da quando ha installato Quadra, ogni DDT è controllato. 23 DDT al mese, 36 fornitori connessi e 99% di accuratezza."
      imageSrc="http://img.b2bpic.net/free-photo/local-retailer-taking-care-his-business_23-2149349404.jpg"
    />
  </div>

  <div id="differenziatori" data-section="differenziatori">
      <FeatureCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "Fatto in Italia",          description: "Capiamo le logiche GDO italiane.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/man-delivering-groceries-customers_23-2149950074.jpg" },
          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/person-shopping-with-face-mask_23-2149565258.jpg" }
        },
        {
          title: "Zero Attriti",          description: "Se sai usare la fotocamera, sai usare Quadra.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/senior-woman-arranging-vegetables-shelf_329181-14924.jpg" },
          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/person-holding-cellphone-front-workplace_23-2147890226.jpg" }
        },
        {
          title: "Dati Protetti",          description: "Server in Europa, GDPR compliant.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/worker-typing-his-phone_1150-179.jpg" },
          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/businessman-using-digital-tablet-office_1262-2239.jpg" }
        },
        {
          title: "Testato sul Campo",          description: "Ogni funzione risolve un problema reale.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/smartphone-with-groceries-delivery-application_23-2149950119.jpg" },
          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/horizontal-shallow-focus-guy-looking-happily-something-supermarket_181624-60635.jpg" }
        },
      ]}
      showStepNumbers={false}
      title="Non un altro gestionale. Un assistente."
      description="Quadra nasce da un problema vero, vissuto sul campo."
    />
  </div>

  <div id="metriche" data-section="metriche">
      <MetricCardSeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        { id: "m1", value: "20s", title: "Tempo operazione", items: ["Dalla foto alla notifica"] },
        { id: "m2", value: "99%", title: "Accuratezza AI", items: ["Massima precisione garantita"] },
        { id: "m3", value: "6%+", title: "Punti margine", items: ["Risparmio annuale stimato"] },
        { id: "m4", value: "0", title: "Software da installare", items: ["Zero costi infrastrutturali"] },
      ]}
      title="Numeri che contano."
      description="Efficienza reale senza complicazioni."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        { id: "f1", title: "Devo cambiare il gestionale?", content: "No, Quadra si affianca perfettamente." },
        { id: "f2", title: "Quanto costa?", content: "Canone mensile fisso che si ripaga subito." },
        { id: "f3", title: "Dove finiscono i dati?", content: "Server in Germania, massima sicurezza." },
        { id: "f4", title: "Quanto ci mette a partire?", content: "Solo una settimana." },
        { id: "f5", title: "E se l'AI sbaglia?", content: "Tu confermi ogni nota inviata." },
      ]}
      title="Domande comuni."
      description="Chiarezza immediata sui tuoi dubbi."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contatti" data-section="contatti">
      <ContactSplit
      useInvertedBackground={false}
      background={{ variant: "plain" }}
      title="Prenota la tua demo."
      description="20 minuti, senza impegno. Parli direttamente con chi ha costruito Quadra."
      mediaAnimation="slide-up"
      tag="Contatti"
      imageSrc="http://img.b2bpic.net/free-photo/local-retailer-taking-care-his-client_23-2149349427.jpg"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        { title: "Azienda", items: [{ label: "Privacy", href: "#" }, { label: "Termini", href: "#" }] },
      ]}
      logoText="Quadra AI"
      copyrightText="© 2026 | Bernabeo & Taffoni · Italia"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}