"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroOverlay from "@/components/sections/hero/HeroOverlay";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
import TeamCardTwo from "@/components/sections/team/TeamCardTwo";
import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { Sparkles, TrendingUp, Zap, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="largeSmall"
      background="noise"
      cardStyle="solid"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="COFFENECT"
          navItems={[
            { name: "La Oportunidad", id: "oportunidad" },
            { name: "Cómo Funciona", id: "funciona" },
            { name: "Gamificación", id: "gamificacion" },
            { name: "Para Quién", id: "paraquien" }
          ]}
          button={{
            text: "Únete Ahora",            href: "#cta-final"
          }}
          animateOnLoad={true}
          navItemClassName="text-base font-light text-amber-100 hover:text-amber-300 transition-colors duration-300"
          buttonClassName="bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-600 hover:to-amber-700 text-espresso-dark px-6 py-2 rounded-full font-medium transition-all duration-300 shadow-lg hover:shadow-xl"
          buttonTextClassName="font-semibold"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Conecta el Café de Junín"
          description="Descubre microlotes premium, juega con la comunidad y accede a un ecosistema que redefinirá tu relación con el café. COFFENECT: donde consumidores, cafeterías y productores escriben la próxima historia del café peruano."
          tag="Movimiento Cultural"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/dark-aromatic-chocolate-coffee-beans-freshly-baked-hot-cool-dawn-inside-best-professional-roasting-machine_346278-553.jpg"
          imageAlt="Grano de café 3D animado - COFFENECT"
          textPosition="bottom-left"
          showBlur={true}
          showDimOverlay={true}
          buttons={[
            { text: "Soy Consumidor", href: "#cta-final" },
            { text: "Soy Cafetería", href: "#cta-final" }
          ]}
          buttonAnimation="slide-up"
          className="relative min-h-screen flex items-end justify-start"
          containerClassName="w-full h-full"
          textBoxClassName="text-left"
          titleClassName="text-5xl md:text-7xl font-light text-amber-100 leading-tight"
          descriptionClassName="text-lg md:text-xl text-amber-50 font-light max-w-2xl mt-4"
          tagClassName="inline-block px-3 py-1 rounded-full bg-amber-600/30 text-amber-200 text-sm font-medium mb-4"
          buttonClassName="px-6 py-3 rounded-full font-semibold transition-all duration-300"
          buttonContainerClassName="flex gap-4 mt-8"
        />
      </div>

      <div id="marquee" data-section="marquee">
        <SocialProofOne
          title=""
          description=""
          textboxLayout="default"
          useInvertedBackground={false}
          showCard={false}
          speed={50}
          names={[
            "Microlotes Premium",            "Chanchamayo Origin",            "22% Café Nacional",            "80+ Cafeterías",            "Gamificación PWA",            "Trazabilidad Total",            "Comunidad Junín",            "Especialidad Pura"
          ]}
          className="py-12 bg-gradient-to-r from-espresso-dark via-espresso-dark/95 to-espresso-dark"
          logoTextClassName="text-amber-300/80 font-light text-lg tracking-wide hover:text-amber-200 transition-colors"
        />
      </div>

      <div id="oportunidad" data-section="oportunidad">
        <FeatureCardThree
          title="La Oportunidad: Ahora es el Momento"
          description="El 22% del café nacional viene de Junín. Existe un ecosistema sin plataforma unificada. Los consumidores buscan origen. Las cafeterías necesitan diferenciación. Los productores merecen reconocimiento. COFFENECT es el movimiento que faltaba."
          tag="Tendencia de Mercado"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              id: "01",              title: "Conexión Directa",              description: "Consumidores descubren cafeterías que venden directamente de productores. Sin intermediarios innecesarios. Solo pasión por el café.",              imageSrc: "http://img.b2bpic.net/free-vector/technology-logo-template_23-2150529460.jpg",              imageAlt: "Conexión directa entre actores del café"
            },
            {
              id: "02",              title: "Crecimiento Asegurado",              description: "Cafeterías multiplican ingresos con datos de clientes leales. Productores alcanzan mercado local e internacional. Todos crecen juntos.",              imageSrc: "http://img.b2bpic.net/free-vector/crowdfunding-icons-set_98292-1915.jpg",              imageAlt: "Crecimiento económico compartido"
            },
            {
              id: "03",              title: "Movimiento Cultural",              description: "Ser parte de COFFENECT es ser parte de una revolución. Especialidad, trazabilidad, comunidad. Un nuevo estatus en la cultura cafetera.",              imageSrc: "http://img.b2bpic.net/free-vector/premium-golden-sticker-collection_23-2147626159.jpg",              imageAlt: "Movimiento cultural del café"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          buttons={[
            { text: "Descubre Más", href: "#funciona" }
          ]}
          buttonAnimation="slide-up"
          className="py-20"
          containerClassName="max-w-7xl mx-auto"
          textBoxTitleClassName="text-5xl md:text-6xl font-light text-amber-100 leading-tight mb-4"
          textBoxDescriptionClassName="text-lg text-amber-50 font-light max-w-3xl mb-12"
          cardTitleClassName="text-2xl font-light text-amber-100"
          cardDescriptionClassName="text-amber-50/80 font-light"
        />
      </div>

      <div id="funciona" data-section="funciona">
        <FeatureCardThree
          title="Cómo Funciona COFFENECT"
          description="Tres fases del movimiento. Cada una diseñada para maximizar tu experiencia."
          tag="Experiencia Gamificada"
          tagIcon={Zap}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              id: "01",              title: "Descubre & Juega",              description: "Explora cafeterías, productores y microlotes. Gana puntos, desbloquea logros, sube de nivel. Cada visita es una aventura en la PWA.",              imageSrc: "http://img.b2bpic.net/free-photo/male-hand-using-his-phone_181624-25728.jpg",              imageAlt: "Fase de descubrimiento y gamificación"
            },
            {
              id: "02",              title: "Gestiona & Crece",              description: "Para cafeterías: panel de analytics en tiempo real. Acceso a ofertas exclusivas. Conexión directa con productores premium de Chanchamayo.",              imageSrc: "http://img.b2bpic.net/free-photo/business-person-looking-finance-graphs_23-2150461313.jpg",              imageAlt: "Panel de gestión y crecimiento"
            },
            {
              id: "03",              title: "Conecta el Origen",              description: "Trazabilidad completa de cada grano. Historias de productores. Certificación de microlotes. El café con identidad que merece.",              imageSrc: "http://img.b2bpic.net/free-photo/barista-preparing-beverage_23-2149458072.jpg",              imageAlt: "Trazabilidad y conexión con origen"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          className="py-20 bg-espresso-dark/50"
          containerClassName="max-w-7xl mx-auto"
          textBoxTitleClassName="text-5xl md:text-6xl font-light text-amber-100 leading-tight mb-4"
          textBoxDescriptionClassName="text-lg text-amber-50 font-light max-w-3xl mb-12"
          cardTitleClassName="text-2xl font-light text-amber-100"
          cardDescriptionClassName="text-amber-50/80 font-light"
        />
      </div>

      <div id="paraquien" data-section="paraquien">
        <TeamCardTwo
          title="Para Quién es COFFENECT"
          description="Tres perfiles. Un mismo propósito: redefinir el café peruano desde Junín."
          tag="Ecosistema Conectado"
          tagIcon={Users}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          members={[
            {
              id: "1",              name: "El Consumidor",              role: "Joven Urbano Aspiracional",              description: "Busca origen. Valora especialidad. Quiere ser parte de un movimiento. En COFFENECT ganas puntos, desbloqueas niveles, accedes a eventos exclusivos con productores.",              imageSrc: "http://img.b2bpic.net/free-photo/person-paying-bill-restaurant-using-nfc-technology_23-2150039413.jpg",              imageAlt: "Consumidor de café especial",              socialLinks: []
            },
            {
              id: "2",              name: "La Cafetería",              role: "Emprendedor Diferenciado",              description: "Necesita identidad única. Quiere datos de clientes. Busca proveedores confiables. COFFENECT te conecta con 80+ cafeterías y productores premium en tiempo real.",              imageSrc: "http://img.b2bpic.net/free-photo/friendly-african-barista-gives-ordered-coffee-customer-modern-coffee-shop_613910-21579.jpg",              imageAlt: "Cafetería independiente premium",              socialLinks: []
            },
            {
              id: "3",              name: "El Productor",              role: "Microlotista de Chanchamayo",              description: "Cultiva excelencia. Merece reconocimiento. Necesita mercado seguro. En COFFENECT accedes directamente a cafeterías y consumidores que pagan por calidad.",              imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-hispanic-male-carrying-basket-with-cherry-red-coffee-beans_181624-57481.jpg",              imageAlt: "Productor de café microlote",              socialLinks: []
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          className="py-20"
          containerClassName="max-w-7xl mx-auto"
          textBoxTitleClassName="text-5xl md:text-6xl font-light text-amber-100 leading-tight mb-4"
          textBoxDescriptionClassName="text-lg text-amber-50 font-light max-w-3xl mb-12"
          roleClassName="text-2xl font-light text-amber-100"
          memberDescriptionClassName="text-amber-50/80 font-light"
        />
      </div>

      <div id="gamificacion" data-section="gamificacion">
        <MetricCardFourteen
          title="Sistema de Niveles: Tu Viaje en COFFENECT. Comienza como Curioso, termina como Sommelier Huancaíno. Cada acción suma. Cada milestone desbloquea experiencias nuevas."
          tag="Progresión Gamificada"
          tagAnimation="slide-up"
          useInvertedBackground={false}
          metrics={[
            {
              id: "1",              value: "Curioso",              description: "Acabas de llegar. Primeros 10 puntos. Acceso a catálogo de cafeterías. Invitación a evento de bienvenida."
            },
            {
              id: "2",              value: "Explorador",              description: "50 puntos. Visitas 3+ cafeterías. Desbloqueadas compras con descuento. Chat directo con productores."
            },
            {
              id: "3",              value: "Connoisseur",              description: "200 puntos. Catas exclusivas. Early access a microlotes. Tu badge visible en comunidad."
            },
            {
              id: "4",              value: "Sommelier Huancaíno",              description: "500+ puntos. Status máximo. Invitaciones a fincas. Influencia en decisiones de la plataforma."
            }
          ]}
          metricsAnimation="slide-up"
          className="py-20 bg-gradient-to-b from-espresso-dark/50 to-espresso-dark"
          containerClassName="max-w-7xl mx-auto"
          titleClassName="text-4xl md:text-5xl font-light text-amber-100 leading-tight"
          tagClassName="inline-block px-3 py-1 rounded-full bg-amber-600/30 text-amber-200 text-sm font-medium mb-4"
          valueClassName="text-3xl md:text-4xl font-light text-amber-300"
          descriptionClassName="text-amber-50/80 font-light"
        />
      </div>

      <div id="cta-final" data-section="cta-final">
        <ContactText
          text="La revolución cafetera comienza ahora. Eres consumidor, cafetería o productor. No importa. En COFFENECT todos ganamos. Acceso a la PWA. Comunidad Junín. El movimiento que faltaba."
          animationType="reveal-blur"
          buttons={[
            { text: "Descargar App", href: "https://coffenect.app" },
            { text: "Contactar", href: "#" }
          ]}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          className="py-24 bg-espresso-dark/80"
          containerClassName="max-w-4xl mx-auto"
          textClassName="text-4xl md:text-5xl font-light text-amber-100 text-center leading-tight"
          buttonContainerClassName="flex gap-4 justify-center mt-8"
          buttonClassName="px-8 py-3 rounded-full font-semibold transition-all duration-300"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Producto",              items: [
                { label: "Descubre", href: "#hero" },
                { label: "Cómo Funciona", href: "#funciona" },
                { label: "Gamificación", href: "#gamificacion" },
                { label: "App", href: "https://coffenect.app" }
              ]
            },
            {
              title: "Comunidad",              items: [
                { label: "Para Consumidores", href: "#paraquien" },
                { label: "Para Cafeterías", href: "#paraquien" },
                { label: "Para Productores", href: "#paraquien" },
                { label: "Eventos", href: "#" }
              ]
            },
            {
              title: "Junín",              items: [
                { label: "Chanchamayo", href: "#" },
                { label: "Sobre Nosotros", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Contacto", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 COFFENECT | Movimiento Cultural del Café Peruano | Junín"
          className="bg-espresso-dark border-t border-amber-900/50"
          containerClassName="max-w-7xl mx-auto"
          columnTitleClassName="text-amber-300 font-light text-lg mb-4"
          columnItemClassName="text-amber-50/70 hover:text-amber-300 transition-colors duration-300 font-light"
          copyrightTextClassName="text-amber-50/50 font-light text-center"
        />
      </div>
    </ThemeProvider>
  );
}