"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import { ArrowRight, CheckCircle, Sparkles, Target } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="largeSmallSizeMediumTitles"
        background="circleGradient"
        cardStyle="subtle-shadow"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Inicio",          id: "#hero"},
        {
          name: "Álbum",          id: "#grid"},
        {
          name: "Progreso",          id: "#progress"},
        {
          name: "Intercambio",          id: "#exchange"},
      ]}
      brandName="Panini Tracker"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDualMedia
      background={{
        variant: "gradient-bars"}}
      title="Controla tu pasión. Completa tu Álbum."
      description="La forma más rápida y profesional de organizar, trackear y completar tu colección de figuritas digital."
      tag="PWA Premium"
      buttons={[
        {
          text: "Ver Álbum",          href: "#grid"},
        {
          text: "Progreso",          href: "#progress"},
      ]}
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/woman-looking-her-phone-while-it-rains_23-2149260457.jpg",          imageAlt: "App Interface"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/person-playing-sudoku-game-tablet_23-2149073710.jpg",          imageAlt: "App View"}
      ]}
      mediaAnimation="slide-up"
      rating={5}
      ratingText="Usada por +10k coleccionistas"
      tagIcon={Sparkles}
    />
  </div>

  <div id="grid" data-section="grid">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="split-description"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={false}
      products={[
        {
          id: "1",          name: "Figurita #01",          price: "Pegada",          variant: "Premium",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-credit-card-holder_1262-15049.jpg"},
        {
          id: "2",          name: "Figurita #02",          price: "Faltante",          variant: "Normal",          imageSrc: "http://img.b2bpic.net/free-vector/soccer-elements-collection-with-equipment_23-2147786475.jpg"},
        {
          id: "3",          name: "Figurita #03",          price: "Repetida",          variant: "Holo",          imageSrc: "http://img.b2bpic.net/free-photo/online-shopping-mobile-banking-frowning-angry-girl-showing-horizontal-smartphone-screen-credit-card-standing-casual-clothes-against-white-background_176420-46378.jpg"},
        {
          id: "4",          name: "Figurita #04",          price: "Pegada",          variant: "Normal",          imageSrc: "http://img.b2bpic.net/free-photo/gradient-holographic-texture-background_84443-23077.jpg"},
        {
          id: "5",          name: "Figurita #05",          price: "Faltante",          variant: "Holo",          imageSrc: "http://img.b2bpic.net/free-photo/vibrant-clear-cassette-tape-with-vivid-background-color_23-2148289020.jpg"},
        {
          id: "6",          name: "Figurita #06",          price: "Pegada",          variant: "Premium",          imageSrc: "http://img.b2bpic.net/free-photo/skeptical-redhead-guy-glasses-showing-smartphone-screen-horizontally-smirk-frowning-disappoin_1258-77566.jpg"},
      ]}
      title="Explorador de Figuritas"
      description="Gestiona cada figurita individual. Marca como pegada, repetida o falta."
    />
  </div>

  <div id="progress" data-section="progress">
      <MetricCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",          value: "85%",          title: "Progreso Total",          description: "Figuritas pegadas al día",          icon: CheckCircle,
        },
        {
          id: "m2",          value: "12",          title: "Repetidas",          description: "Listas para intercambio",          icon: ArrowRight,
        },
        {
          id: "m3",          value: "45",          title: "Faltantes",          description: "Objetivo de hoy",          icon: Target,
        },
      ]}
      title="Estadísticas de Colección"
      description="Visualiza el avance de tu álbum en tiempo real."
    />
  </div>

  <div id="exchange" data-section="exchange">
      <FeatureCardTwentyThree
      animationType="slide-up"
      textboxLayout="split-description"
      useInvertedBackground={false}
      features={[
        {
          id: "f1",          title: "Escaneo QR Instantáneo",          tags: [
            "Seguridad",            "Velocidad"],
          imageSrc: "http://img.b2bpic.net/free-photo/selective-focus-shot-male-hand-holding-smartphone-with-cryptocurrencies-statistics-screen_181624-59051.jpg"},
        {
          id: "f2",          title: "Match por Geolocalización",          tags: [
            "Cercanía",            "Directo"],
          imageSrc: "http://img.b2bpic.net/free-photo/financial-forex-business-chart-report_53876-120081.jpg"},
        {
          id: "f3",          title: "Historial de Trades",          tags: [
            "Confianza",            "Auditado"],
          imageSrc: "http://img.b2bpic.net/free-photo/person-holding-phone-hands-dark-background_23-2148295843.jpg"},
      ]}
      title="Sistema de Intercambio Smart"
      description="Encuentra coleccionistas cercanos, escanea QR y gestiona tus trades de forma segura."
    />
  </div>

  <div id="testimonial" data-section="testimonial">
      <TestimonialCardTen
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",          title: "Increíble",          quote: "Completar el álbum nunca fue tan fácil y organizado.",          name: "Juan Pérez",          role: "Collector",          imageSrc: "http://img.b2bpic.net/free-photo/man-smiling_1187-3402.jpg"},
        {
          id: "2",          title: "Indispensable",          quote: "La función de intercambio por QR me salvó horas.",          name: "Ana García",          role: "Collector",          imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-holding-smartphone_23-2150652849.jpg"},
        {
          id: "3",          title: "Interfaz top",          quote: "Muy cómoda para usar en el bus o la fila.",          name: "Lucas Méndez",          role: "Collector",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-rich-man-holding-lottery-tickets_23-2149820192.jpg"},
        {
          id: "4",          title: "Rápida y fluida",          quote: "La mejor PWA deportiva que he probado hasta hoy.",          name: "Sofía Díaz",          role: "Collector",          imageSrc: "http://img.b2bpic.net/free-photo/senior-handsome-man-drinking-coffee-outside-street_1303-27535.jpg"},
        {
          id: "5",          title: "Elegante",          quote: "Me encanta cómo visualiza mis repetidas y faltantes.",          name: "Diego Castro",          role: "Collector",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-girl-with-smartphone-laughing-using-mobile-phone-app-isolated-white-background_1258-197264.jpg"},
      ]}
      title="Opiniones de Coleccionistas"
      description="Lo que dicen los usuarios sobre esta PWA."
    />
  </div>

  <div id="socialProof" data-section="socialProof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Liga Argentina",        "Fútbol Fanatics",        "Coleccionistas Club",        "Sticker World",        "Panini Central",        "Goal Tracker",        "Album Kings"]}
      title="Comunidad en Expansión"
      description="Miles de álbumes siendo completados en nuestra plataforma."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",          title: "¿Cómo instalo la PWA?",          content: "Toca el botón compartir en Safari y luego 'Agregar al inicio'."},
        {
          id: "q2",          title: "¿Se pierden mis figuritas?",          content: "No, los datos se guardan localmente en tu iPhone."},
        {
          id: "q3",          title: "¿Cómo intercambio?",          content: "Escanea el código QR de otro coleccionista directamente."},
      ]}
      title="Preguntas Frecuentes"
      description="Todo lo que necesitas saber para empezar."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "App",          items: [
            {
              label: "Inicio",              href: "#hero"},
            {
              label: "Álbum",              href: "#grid"},
            {
              label: "Progreso",              href: "#progress"},
          ],
        },
        {
          title: "Social",          items: [
            {
              label: "Instagram",              href: "#"},
            {
              label: "Twitter",              href: "#"},
          ],
        },
        {
          title: "Legal",          items: [
            {
              label: "Privacidad",              href: "#"},
            {
              label: "Términos",              href: "#"},
          ],
        },
      ]}
      logoText="Panini Tracker"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}