import { useEffect, useState } from 'react';
import { medir, medirVisita } from '../lib/medicion';

// Portales externos (otras apps). En dev = localhost; en produccion = las URLs publicas.
const PROD = import.meta.env.PROD;
const PORTAL_REPARTIDOR = PROD ? 'https://repartidor.gustitoxpress.app' : 'http://localhost:5175';
const VITRINA = PROD ? 'https://pedir.gustitoxpress.app' : 'http://localhost:5173';
const TIENDA_DEMO = `${VITRINA}/demo-gustito`;
// Mensaje predeterminado: identifica que el contacto viene de la web de Gustito Xpress
const WHATSAPP_SOPORTE =
  'https://wa.me/584127930168?text=' +
  encodeURIComponent('Hola 👋, te escribo desde la web de Gustito Xpress. Quiero montar mi negocio.');

type Modo = 'entrar' | 'crear';

export default function Landing({
  onAuth,
  onLegal,
}: {
  onAuth: (m: Modo) => void;
  onLegal: (d: 'terminos' | 'privacidad') => void;
}) {
  useEffect(() => {
    medirVisita();
  }, []);
  // Toda apertura del modal de auth pasa por aqui: se mide en UN solo lugar.
  const auth = (m: Modo) => {
    medir(m === 'crear' ? 'click_registro' : 'click_entrar');
    onAuth(m);
  };
  return (
    <div className="min-h-screen bg-noche text-white">
      <Nav onAuth={auth} />
      <Hero onAuth={auth} />
      <Dolores />
      <CocinaPapel />
      <CerebroIA />
      <ParaComensales />
      <ElPanel />
      <Comparacion onAuth={auth} />
      <Caracteristicas />
      <Mision />
      <Contacto />
      <CtaFooter onAuth={auth} onLegal={onLegal} />
    </div>
  );
}

function Glifo({ className = 'h-7 w-7' }: { className?: string }) {
  return (
    <svg viewBox="0 0 512 512" className={className} aria-hidden>
      <circle cx="256" cy="256" r="150" fill="none" stroke="currentColor" strokeWidth="34" />
      <g fill="currentColor" transform="rotate(-32 256 256)">
        <rect x="245" y="214" width="22" height="150" rx="11" />
        <rect x="236" y="152" width="8" height="66" rx="4" />
        <rect x="252" y="152" width="8" height="66" rx="4" />
        <rect x="268" y="152" width="8" height="66" rx="4" />
        <rect x="236" y="208" width="40" height="14" rx="7" />
      </g>
      <g fill="currentColor" transform="rotate(32 256 256)">
        <rect x="245" y="202" width="22" height="162" rx="11" />
        <ellipse cx="256" cy="174" rx="27" ry="38" />
      </g>
    </svg>
  );
}

function Flecha() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <path d="M5 12h14M13 6l6 6-6 6" />
    </svg>
  );
}

function Logo() {
  return (
    <a href="#top" className="flex shrink-0 items-center gap-2">
      <span className="grid h-8 w-8 place-items-center rounded-xl bg-dorado text-noche">
        <Glifo className="h-5 w-5" />
      </span>
      <span className="text-base font-extrabold leading-tight tracking-tight text-white">
        Gustito <span className="text-dorado">Xpress</span>
      </span>
    </a>
  );
}

function Nav({ onAuth }: { onAuth: (m: Modo) => void }) {
  const [open, setOpen] = useState(false);
  const links: [string, string][] = [
    [VITRINA, 'Pedir comida'],
    ['#por-que', 'Por qué Gustito'],
    ['#para-negocios', 'Para negocios'],
    ['#para-comensales', 'Para comensales'],
    ['#contacto', 'Contacto'],
  ];
  return (
    <header id="top" className="fixed inset-x-0 top-0 z-50 border-b border-white/10 bg-noche/80 backdrop-blur-md">
      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6">
        <Logo />
        <nav className="hidden items-center gap-6 md:flex">
          {links.map(([href, label]) => (
            <a
              key={label}
              href={href}
              onClick={() => href === VITRINA && medir('click_vitrina')}
              className="text-sm font-medium text-niebla transition-colors hover:text-white"
            >
              {label}
            </a>
          ))}
        </nav>
        <div className="hidden items-center gap-3 md:flex">
          <button onClick={() => onAuth('entrar')} className="px-4 py-2 text-sm font-semibold text-white transition-colors hover:text-dorado">
            Entrar
          </button>
          <button onClick={() => onAuth('crear')} className="rounded-2xl bg-dorado px-4 py-2 text-sm font-bold text-noche transition-colors hover:bg-dorado-oscuro">
            Registra tu negocio
          </button>
        </div>
        <button
          onClick={() => setOpen((v) => !v)}
          className="grid h-10 w-10 place-items-center rounded-xl text-white transition-colors hover:bg-superficie-2 md:hidden"
          aria-label={open ? 'Cerrar menu' : 'Abrir menu'}
        >
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
            {open ? <path d="M6 6l12 12M18 6L6 18" /> : <path d="M4 7h16M4 12h16M4 17h16" />}
          </svg>
        </button>
      </div>
      {open && (
        <div className="flex flex-col gap-4 border-t border-white/10 bg-superficie px-4 pb-6 pt-4 md:hidden">
          {links.map(([href, label]) => (
            <a key={label} href={href} onClick={() => setOpen(false)} className="text-base font-medium text-niebla hover:text-white">
              {label}
            </a>
          ))}
          <hr className="border-white/10" />
          <button onClick={() => { setOpen(false); onAuth('entrar'); }} className="text-left text-base font-semibold text-white hover:text-dorado">
            Entrar
          </button>
          <button onClick={() => { setOpen(false); onAuth('crear'); }} className="rounded-2xl bg-dorado px-5 py-3 text-center text-base font-bold text-noche">
            Registra tu negocio gratis
          </button>
        </div>
      )}
    </header>
  );
}

function Hero({ onAuth }: { onAuth: (m: Modo) => void }) {
  return (
    <section className="relative overflow-hidden pb-8 pt-24">
      <div className="pointer-events-none absolute -top-10 right-0 h-72 w-72 rounded-full bg-dorado/10 blur-3xl" />
      <div className="relative mx-auto grid max-w-6xl gap-10 px-4 lg:grid-cols-2 lg:items-start lg:gap-16">
        {/* Bloque principal: para negocios */}
        <div className="flex flex-col gap-5">
          <span className="inline-flex w-fit items-center gap-2 rounded-full bg-dorado/10 px-3.5 py-1 ring-1 ring-dorado/25">
            <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-dorado" />
            <span className="text-xs font-bold uppercase tracking-wider text-dorado">Hecho en Venezuela, para toda Venezuela</span>
          </span>
          <h1 className="text-4xl font-extrabold leading-tight tracking-tight text-white sm:text-5xl">
            Deja de atender tu negocio <span className="text-dorado">por WhatsApp a mano.</span>
          </h1>
          <p className="max-w-md text-base leading-relaxed text-niebla">
            El pedido entra solo, el pago se verifica antes de despachar, la comanda sale impresa en tu cocina
            y sabes cuánto ganaste. Arepera, pizzería, pollos, hamburguesas o postres: tu propia marca, tu propio
            delivery, y aquí nadie te cobra comisión por vender.
          </p>
          <p className="inline-flex w-fit items-center gap-2 rounded-2xl border border-verde/30 bg-verde/10 px-4 py-2 text-sm font-bold text-verde">
            Cada venta es tuya, completica. Cero comisión por pedido.
          </p>
          <div className="flex flex-col gap-3 sm:flex-row">
            <button
              onClick={() => onAuth('crear')}
              className="inline-flex items-center justify-center gap-2 rounded-2xl bg-dorado px-6 py-3.5 text-sm font-bold text-noche shadow-glow transition active:scale-95"
            >
              Quiero mi negocio así <Flecha />
            </button>
            <a
              href={WHATSAPP_SOPORTE}
              target="_blank"
              rel="noreferrer"
              onClick={() => medir('click_whatsapp')}
              className="inline-flex items-center justify-center gap-2 rounded-2xl border border-white/10 bg-superficie px-6 py-3.5 text-sm font-semibold text-white transition hover:border-white/20"
            >
              💬 Habla con nosotros
            </a>
          </div>

          {/* La otra mitad de la historia: el pedido cayendo en el panel del negocio */}
          <div className="gx-flota-lento mt-4 w-fit max-w-full rounded-2xl border border-verde/25 bg-superficie p-3.5 shadow-lg">
            <p className="text-[10px] font-bold uppercase tracking-widest text-niebla">Así lo vive tu panel</p>
            <div className="mt-1.5 flex items-center gap-3">
              <span className="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-verde/15 text-xl">🔔</span>
              <div className="min-w-0">
                <p className="text-sm font-extrabold text-white">¡Pedido nuevo! GX-0042 · $12.20</p>
                <p className="text-xs font-semibold text-niebla">Pago verificado. Ya está sonando impreso en tu cocina.</p>
              </div>
            </div>
          </div>
          <a
            href={TIENDA_DEMO}
            onClick={() => medir('click_demo')}
            className="text-sm font-bold text-dorado underline decoration-dorado/40 underline-offset-2 hover:decoration-dorado"
          >
            Mira una tienda de ejemplo funcionando, sin registrarte
          </a>
        </div>

        {/* Bloque secundario: para comensales */}
        <div className="flex flex-col items-start gap-4 border-t border-white/10 pt-8 lg:border-l lg:border-t-0 lg:pl-14 lg:pt-0">
          <p className="text-xs font-semibold uppercase tracking-widest text-niebla">¿Tienes hambre?</p>
          <h2 className="text-3xl font-extrabold leading-snug tracking-tight text-white sm:text-4xl">
            ¿Qué gustito te provoca <span className="text-dorado">ahorita?</span>
          </h2>

          {/* Antojos tocables: cada chip abre la vitrina */}
          <div className="flex flex-wrap gap-2">
            {['🌽 Arepas', '🍔 Hamburguesas', '🍕 Pizzas', '🍗 Pollo', '🌭 Perros', '🥟 Empanadas', '🌯 Shawarma', '🧁 Postres'].map((a) => (
              <a
                key={a}
                href={VITRINA}
                onClick={() => medir('click_vitrina')}
                className="rounded-full border border-white/15 bg-superficie px-3.5 py-1.5 text-sm font-bold text-white/85 transition hover:border-dorado/50 hover:bg-dorado/10 hover:text-dorado active:scale-95"
              >
                {a}
              </a>
            ))}
          </div>

          {/* Telefono de muestra: asi se ve pedir en Gustito */}
          <div className="relative mx-auto mt-3 w-full max-w-[290px] lg:mx-0">
            <div className="pointer-events-none absolute -inset-6 rounded-full bg-dorado/10 blur-2xl" />
            <div className="relative rounded-[2rem] border border-white/15 bg-superficie p-2.5 shadow-2xl">
              <div className="rounded-[1.6rem] bg-noche p-3.5">
                <div className="flex items-center gap-2.5">
                  <span className="grid h-9 w-9 place-items-center rounded-xl bg-dorado/15 text-lg">🍔</span>
                  <div className="min-w-0 flex-1">
                    <p className="truncate text-[13px] font-extrabold text-white">Sabor Criollo Express</p>
                    <p className="text-[10px] font-bold text-verde">● Abierto · Delivery y mesa</p>
                  </div>
                </div>
                <div className="mt-3 space-y-1.5">
                  {[
                    ['Hamburguesa doble', '$6.00', '1'],
                    ['Tequeños (10)', '$4.50', '1'],
                    ['Malta bien fría', '$1.20', '2'],
                  ].map(([nombre, precio, cant]) => (
                    <div key={nombre} className="flex items-center justify-between rounded-xl bg-superficie px-3 py-2">
                      <div className="min-w-0">
                        <p className="truncate text-xs font-bold text-white">{nombre}</p>
                        <p className="text-[11px] font-extrabold text-dorado">{precio}</p>
                      </div>
                      <span className="grid h-6 min-w-6 place-items-center rounded-full bg-dorado px-1.5 text-xs font-black text-noche">
                        {cant}
                      </span>
                    </div>
                  ))}
                </div>
                <div className="mt-3 flex items-center justify-between rounded-xl bg-dorado px-4 py-2.5">
                  <span className="text-xs font-extrabold text-noche">Pedir ahora</span>
                  <span className="text-sm font-black tabular-nums text-noche">$12.90</span>
                </div>
                <p className="mt-1.5 text-center text-[10px] font-semibold text-niebla">
                  Se convierte solo a bolívares con la tasa del día
                </p>
              </div>
            </div>
            {/* Globitos: lo que va pasando con tu pedido */}
            <span className="gx-flota absolute -top-3 right-2 rounded-xl border border-dorado/30 bg-noche px-3 py-1.5 text-[11px] font-bold text-dorado shadow-lg">
              🔔 ¡Tu pedido está listo!
            </span>
            <span className="gx-flota-lento absolute -left-3 top-1/3 rounded-xl border border-verde/30 bg-noche px-3 py-1.5 text-[11px] font-bold text-verde shadow-lg sm:-left-8">
              🛵 Va en camino
            </span>
            <span className="gx-flota-suave absolute -bottom-3 right-4 rounded-xl border border-white/20 bg-noche px-3 py-1.5 text-[11px] font-bold text-white shadow-lg">
              📍 Lo ves venir en el mapa
            </span>
          </div>

          <a
            href={VITRINA}
            onClick={() => medir('click_vitrina')}
            className="inline-flex items-center justify-center gap-2 self-stretch rounded-2xl bg-dorado px-6 py-3.5 text-sm font-bold text-noche shadow-glow transition hover:bg-dorado-oscuro active:scale-95 sm:self-start"
          >
            Ver qué hay cerca de ti <Flecha />
          </a>
          <p className="-mt-1 text-xs font-semibold text-niebla">
            Pides en dos toques, sin descargar nada, desde cualquier teléfono.{' '}
            <a
              href={TIENDA_DEMO}
              onClick={() => medir('click_demo')}
              className="font-bold text-dorado underline decoration-dorado/40 underline-offset-2 hover:decoration-dorado"
            >
              Curiosea la tienda de ejemplo
            </a>
          </p>
        </div>
      </div>
    </section>
  );
}

function Encabezado({ eyebrow, titulo, sub }: { eyebrow: string; titulo: string; sub?: string }) {
  return (
    <div className="mx-auto flex max-w-lg flex-col gap-3 text-center">
      <span className="text-sm font-bold uppercase tracking-widest text-dorado">{eyebrow}</span>
      <h2 className="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">{titulo}</h2>
      {sub && <p className="text-base leading-relaxed text-niebla">{sub}</p>}
    </div>
  );
}

// Los dolores que TODO dueño de comida en Venezuela reconoce al instante.
// Esta es la seccion que engancha: primero la herida, despues el alivio.
function Dolores() {
  const dolores: { mal: string; malDesc: string; bien: string }[] = [
    {
      mal: 'El chat se te llena y se pierden pedidos',
      malDesc: 'A las 8 de la noche tienes 40 mensajes, no sabes cuál va primero y uno se quedó sin responder.',
      bien: 'Aquí cada pedido entra ordenado, con su número, y nada se pierde.',
    },
    {
      mal: 'Te meten un capture falso',
      malDesc: 'Despachaste, y al rato el pago móvil nunca llegó. Comida regalada.',
      bien: 'El pago se verifica ANTES de que salga el pedido. Referencia chequeada, cero cuentos.',
    },
    {
      mal: 'Se va la luz o el internet y se para la venta',
      malDesc: 'Sin señal, el sistema se cae y la cola de clientes crece mirándote.',
      bien: 'Tu salón sigue vendiendo sin internet. Cuando vuelve la señal, todo se sube solo.',
    },
    {
      mal: 'No sabes cuánto ganas de verdad',
      malDesc: 'Vendes mucho pero la plata no cuadra, y no sabes qué plato te está dejando pérdida.',
      bien: 'Pregúntaselo a tu sistema: te dice cuánto te cuesta y cuánto ganas por cada plato, al centavo.',
    },
  ];
  return (
    <section id="por-que" className="bg-superficie-2 px-4 py-16 sm:px-6">
      <div className="mx-auto flex max-w-6xl flex-col gap-10">
        <Encabezado
          eyebrow="¿Te suena?"
          titulo="Los que llegaron antes digitalizaron el menú. Nosotros ordenamos el negocio."
          sub="Su tecnología termina justo donde empieza tu problema: cuando el pedido cae en un chat y ahí se queda. Gustito ejecuta el pedido completo, de la comanda al cobro."
        />
        <div className="grid gap-5 sm:grid-cols-2">
          {dolores.map((d) => (
            <div key={d.mal} className="flex flex-col gap-3 rounded-3xl border border-white/10 bg-noche p-6 transition duration-200 hover:-translate-y-1 hover:border-dorado/30">
              <div className="flex items-start gap-3">
                <span className="mt-0.5 grid h-8 w-8 shrink-0 place-items-center rounded-xl bg-red-500/15 text-lg">😩</span>
                <h3 className="text-lg font-extrabold leading-snug text-white">{d.mal}</h3>
              </div>
              <p className="text-sm leading-relaxed text-niebla">{d.malDesc}</p>
              <div className="mt-1 flex items-start gap-2.5 rounded-2xl border border-verde/25 bg-verde/10 p-3">
                <span className="text-base">✅</span>
                <p className="text-sm font-semibold leading-relaxed text-white">{d.bien}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// La cocina de papel: comandas impresas por puesto. Esto NADIE mas lo tiene en
// Venezuela. Se muestra con la FOTO REAL de un ticket saliendo en Arepa Power,
// un negocio que ya vende con Gustito (con su permiso).
function CocinaPapel() {
  return (
    <section className="px-4 py-16 sm:px-6">
      <div className="mx-auto flex max-w-6xl flex-col gap-10">
        <Encabezado
          eyebrow="Cocina de papel"
          titulo="Tu cocina no mira pantallas: recibe su comanda impresa"
          sub="Conectas una impresora sencilla y cada estación recibe lo suyo, en papel grande. El cocinero cocina, no aprende a usar una tablet."
        />
        <div className="grid items-center gap-10 lg:grid-cols-2">
          {/* Foto real: ticket saliendo en Arepa Power */}
          <div className="relative mx-auto w-full max-w-md">
            <div className="pointer-events-none absolute -inset-8 rounded-full bg-dorado/10 blur-3xl" />
            <div className="relative overflow-hidden rounded-3xl border border-white/15 bg-superficie shadow-2xl">
              <img
                src="/arepa-power-ticket.png"
                alt="Comanda real impresa saliendo en Arepa Power con Gustito Xpress"
                loading="lazy"
                className="block w-full"
              />
              <div className="flex items-center gap-2 border-t border-white/10 bg-noche/70 px-4 py-3">
                <span className="h-2 w-2 animate-pulse rounded-full bg-verde" />
                <p className="text-[13px] font-semibold text-white">
                  Foto real: una comanda saliendo en <span className="text-dorado">Arepa Power</span>, un negocio que ya vende con Gustito.
                </p>
              </div>
            </div>
            <span className="gx-flota absolute -right-2 top-4 rounded-xl border border-dorado/30 bg-noche px-3 py-1.5 text-[11px] font-bold text-dorado shadow-lg sm:-right-5">
              🖨️ Salió sola en la cocina
            </span>
          </div>

          <div className="flex flex-col gap-4">
            {[
              ['🖨️', 'Cada puesto lo suyo', 'La parrilla su comanda, la barra la suya, el carrito de arepas la suya. Nadie grita, nada se confunde.'],
              ['🧾', 'El negocio guarda su copia', 'Con cada pedido sale un respaldo para el negocio, con el cobro ya verificado. Tu control, en papel.'],
              ['🔌', 'Con una impresora sencilla', 'No necesitas equipos caros de nube. Sirve una térmica común de las que se consiguen aquí mismo.'],
              ['🔁', 'Se reimprime con un toque', 'Se trabó el papel o se acabó el rollo, vuelves a sacar la última comanda desde el panel. Nada se pierde.'],
            ].map(([emoji, titulo, desc]) => (
              <div key={titulo} className="flex items-start gap-3 rounded-2xl border border-white/10 bg-superficie p-4">
                <span className="text-2xl">{emoji}</span>
                <div>
                  <h3 className="text-[15px] font-extrabold text-white">{titulo}</h3>
                  <p className="text-[13px] leading-relaxed text-niebla">{desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// El Cerebro con IA: cuanto te cuesta y cuanto ganas por plato. Ningun
// competidor lo tiene hecho asi de facil (conversado). Es el arma moderna.
function CerebroIA() {
  return (
    <section className="bg-superficie-2 px-4 py-16 sm:px-6">
      <div className="mx-auto grid max-w-6xl items-center gap-10 lg:grid-cols-2">
        <div className="flex flex-col gap-5">
          <span className="inline-flex w-fit items-center gap-2 rounded-full bg-dorado/10 px-3.5 py-1 text-xs font-bold uppercase tracking-wider text-dorado ring-1 ring-dorado/25">
            🧠 Con inteligencia artificial
          </span>
          <h2 className="text-3xl font-extrabold leading-tight tracking-tight text-white sm:text-4xl">
            Tu negocio ahora <span className="text-dorado">piensa.</span>
          </h2>
          <p className="text-base leading-relaxed text-niebla">
            Le cuentas cómo haces tu plato, tal como se lo dirías a tu cocinera, y el Cerebro te dice cuánto te
            cuesta y cuánto ganas. Le tomas una foto a la factura del proveedor y los precios se actualizan solos.
            Cuando la harina o la carne suben, te avisa antes de que pierdas plata.
          </p>
          <ul className="flex flex-col gap-2.5">
            {[
              'Cuánto ganas por cada plato, al centavo',
              'Sube tus precios con la foto de la factura, sin teclear',
              'Un semáforo te dice qué plato va sano y cuál te está apretando',
            ].map((it) => (
              <li key={it} className="flex items-start gap-2.5 text-sm font-semibold text-white">
                <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-dorado" />
                {it}
              </li>
            ))}
          </ul>
        </div>
        {/* Mini tablero de margenes dibujado */}
        <div className="relative mx-auto w-full max-w-sm">
          <div className="pointer-events-none absolute -inset-8 rounded-full bg-dorado/10 blur-3xl" />
          <div className="relative rounded-3xl border border-white/15 bg-noche p-5 shadow-2xl">
            <p className="text-[10px] font-bold uppercase tracking-widest text-niebla">Costos y márgenes</p>
            <div className="mt-3 flex flex-col gap-2">
              {[
                ['🍔', 'Hamburguesa doble', 'Cuesta $2.10 · ganas $3.90', '65%', 'verde'],
                ['🍕', 'Pizza mediana', 'Cuesta $3.40 · ganas $2.60', '43%', 'dorado'],
                ['🥤', 'Refresco', 'Cuesta $0.90 · ganas $0.10', '10%', 'rojo'],
              ].map(([ico, nombre, detalle, pct, tono]) => {
                const c = tono === 'verde' ? 'text-verde' : tono === 'dorado' ? 'text-dorado' : 'text-red-400';
                const dot = tono === 'verde' ? 'bg-verde' : tono === 'dorado' ? 'bg-dorado' : 'bg-red-400';
                return (
                  <div key={nombre} className="flex items-center gap-3 rounded-2xl bg-superficie p-3">
                    <span className={`h-2.5 w-2.5 shrink-0 rounded-full ${dot}`} />
                    <span className="text-lg">{ico}</span>
                    <div className="min-w-0 flex-1">
                      <p className="truncate text-xs font-extrabold text-white">{nombre}</p>
                      <p className="truncate text-[11px] text-niebla">{detalle}</p>
                    </div>
                    <span className={`text-sm font-black tabular-nums ${c}`}>{pct}</span>
                  </div>
                );
              })}
            </div>
            <div className="mt-3 flex items-center gap-2 rounded-xl border border-dorado/30 bg-dorado/10 px-3 py-2">
              <span>⚠️</span>
              <p className="text-[11px] font-bold text-white">La harina subió 18%. Tu arepa bajó de 70% a 64%.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// PARA EL COMENSAL: el paso a paso de como consigue su comida, y por que puede
// comprar con confianza (sobre todo en delivery). Pedido explicito de Gilberto.
function ParaComensales() {
  const pasos: { n: string; emoji: string; titulo: string; desc: string }[] = [
    { n: '1', emoji: '🔗', titulo: 'Abre el link o escanea el QR', desc: 'Te lo pasa el negocio por WhatsApp o Instagram, o está en la mesa. No descargas ninguna app.' },
    { n: '2', emoji: '🍽️', titulo: 'Arma tu pedido a tu gusto', desc: 'Eliges tus contornos, tus extras, lo que quieras. El precio se ve claro en dólares y en bolívares.' },
    { n: '3', emoji: '🛵', titulo: 'Elige cómo lo quieres', desc: 'Te lo llevan a tu casa, lo buscas tú, o pides desde tu mesa en el local. Tú decides.' },
    { n: '4', emoji: '📲', titulo: 'Paga fácil y sin líos', desc: 'Pago móvil, efectivo o transferencia. Subes tu comprobante desde el mismo teléfono.' },
    { n: '5', emoji: '📍', titulo: 'Síguelo en vivo', desc: 'Ves cuando el negocio lo prepara y ves la moto acercándose en el mapa, en tiempo real.' },
    { n: '6', emoji: '😋', titulo: 'Y llega tu gustito', desc: 'Tu comida, del negocio que tú elegiste, con su marca y su sazón. Rapidito.' },
  ];
  const confianza: [string, string][] = [
    ['🏪', 'Le compras al negocio de verdad, con su nombre y su marca. No a un intermediario anónimo.'],
    ['🔒', 'Precio claro desde el principio, con la tasa del día. Sin comisiones escondidas ni sorpresas al final.'],
    ['🗺️', 'Ves al repartidor acercarse en el mapa, sabes su nombre y lo puedes llamar o escribir.'],
    ['📱', 'Pides desde cualquier teléfono, sin descargar nada y sin registrarte para siempre.'],
  ];
  return (
    <section id="para-comensales" className="px-4 py-16 sm:px-6">
      <div className="mx-auto flex max-w-6xl flex-col gap-10">
        <Encabezado
          eyebrow="Para ti que tienes hambre"
          titulo="Conseguir tu gustito es así de fácil"
          sub="Desde tu casa o desde la mesa del local, en dos toques y sin descargar nada. Mira lo sencillo que es."
        />
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {pasos.map((p) => (
            <div key={p.n} className="flex flex-col gap-3 rounded-3xl border border-white/10 bg-superficie p-6 transition duration-200 hover:-translate-y-1 hover:border-dorado/30">
              <div className="flex items-center gap-3">
                <span className="grid h-10 w-10 place-items-center rounded-2xl bg-dorado/10 text-lg font-black text-dorado ring-1 ring-dorado/25">
                  {p.n}
                </span>
                <span className="text-2xl">{p.emoji}</span>
              </div>
              <h3 className="text-[15px] font-extrabold text-white">{p.titulo}</h3>
              <p className="text-[13px] leading-relaxed text-niebla">{p.desc}</p>
            </div>
          ))}
        </div>

        {/* Confianza en el delivery */}
        <div className="overflow-hidden rounded-3xl border border-verde/20 bg-superficie">
          <div className="grid gap-8 p-8 md:grid-cols-2 md:p-10">
            <div className="flex flex-col gap-4">
              <span className="text-sm font-bold uppercase tracking-widest text-verde">Compra con confianza</span>
              <h3 className="text-2xl font-extrabold leading-tight text-white sm:text-3xl">
                Pedir por delivery aquí es seguro, y se nota
              </h3>
              <p className="text-base leading-relaxed text-niebla">
                No estás comprando a ciegas. Ves el negocio, ves el precio completo antes de pagar y ves tu pedido
                venir en el mapa. Si algo no cuadra, tienes al negocio y al repartidor a un mensaje de distancia.
              </p>
              <a
                href={VITRINA}
                onClick={() => medir('click_vitrina')}
                className="inline-flex w-fit items-center justify-center gap-2 rounded-2xl bg-dorado px-6 py-3.5 text-sm font-bold text-noche shadow-glow transition hover:bg-dorado-oscuro active:scale-95"
              >
                Ver negocios cerca de ti <Flecha />
              </a>
            </div>
            <ul className="flex flex-col gap-3">
              {confianza.map(([emoji, texto]) => (
                <li key={texto} className="flex items-start gap-3 rounded-2xl border border-white/10 bg-noche p-4">
                  <span className="text-2xl">{emoji}</span>
                  <p className="text-[13px] font-semibold leading-relaxed text-white">{texto}</p>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// El panel del negocio: el centro de control que el dueño abre cada mañana.
function ElPanel() {
  const beneficios: { emoji: string; titulo: string; desc: string }[] = [
    {
      emoji: '💵',
      titulo: 'Abres y ya sabes cómo vas',
      desc: 'Lo primero que ves: cuánto has vendido hoy, en dólares y en bolívares, con tu ticket promedio. Sin preguntarle a nadie.',
    },
    {
      emoji: '🍽️',
      titulo: 'Toda la sala de un vistazo',
      desc: 'Qué mesas están ocupadas, quién atiende cada una, cuál pidió la cuenta y cuánto lleva acumulado. Como un mapa de tu negocio.',
    },
    {
      emoji: '👥',
      titulo: 'Tu equipo, cada quien en lo suyo',
      desc: 'Meseros y repartidores entran con su propio usuario y ven solo lo que les toca. Tú ves todo, ellos trabajan tranquilos.',
    },
    {
      emoji: '📦',
      titulo: 'Caja, costos y clientes',
      desc: 'Registras los gastos del día, sabes cuánto te cuesta cada plato y conoces a tus clientes frecuentes: quién compra, qué pide, cuándo volvió.',
    },
    {
      emoji: '📄',
      titulo: 'El reporte se hace solo',
      desc: 'Al cerrar la jornada descargas tu reporte de ventas listo. Y los datos de tus clientes se guardan con cuidado.',
    },
    {
      emoji: '👜',
      titulo: 'Va contigo a todos lados',
      desc: 'El panel funciona en tu teléfono, en una tablet o en la computadora del local. Tu negocio en el bolsillo, de verdad.',
    },
  ];
  return (
    <section id="el-panel" className="bg-superficie-2 px-4 py-16 sm:px-6">
      <div className="mx-auto flex max-w-6xl flex-col gap-10">
        <Encabezado
          eyebrow="Tu centro de control"
          titulo="El panel que te muestra todo, clarito"
          sub="No es una lista de pedidos y ya: es el negocio completo en una sola pantalla, para decidir con la película clara."
        />
        <div className="grid items-center gap-10 lg:grid-cols-2">
          {/* Mini panel dibujado: lo que ve el dueño al abrir */}
          <div className="relative mx-auto w-full max-w-[400px]">
            <div className="pointer-events-none absolute -inset-8 rounded-full bg-dorado/10 blur-3xl" />
            <div className="relative rounded-3xl border border-white/15 bg-noche p-4 shadow-2xl">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <span className="grid h-8 w-8 place-items-center rounded-lg bg-dorado/15 text-base">🍔</span>
                  <p className="text-xs font-extrabold text-white">Sabor Criollo Express</p>
                </div>
                <span className="rounded-full bg-verde/15 px-2 py-0.5 text-[10px] font-bold text-verde">● Abierto</span>
              </div>
              <div className="mt-3 rounded-2xl bg-superficie p-3">
                <p className="text-[10px] font-bold uppercase tracking-wide text-niebla">Ventas de hoy</p>
                <p className="text-2xl font-black tabular-nums text-verde">$148.50</p>
                <p className="text-[11px] font-semibold tabular-nums text-niebla">Bs 25.245 · 23 pedidos · ticket $6.45</p>
              </div>
              <div className="mt-2 grid grid-cols-3 gap-2 text-center">
                {[
                  ['🛵', '3', 'Domicilios'],
                  ['🍽️', '4', 'Mesas'],
                  ['📋', '7', 'Activos'],
                ].map(([ico, n, lbl]) => (
                  <div key={lbl} className="rounded-xl bg-superficie p-2">
                    <p className="text-sm">{ico}</p>
                    <p className="text-lg font-black leading-none text-white">{n}</p>
                    <p className="text-[10px] font-semibold text-niebla">{lbl}</p>
                  </div>
                ))}
              </div>
              <div className="mt-2 grid grid-cols-3 gap-2">
                <div className="rounded-xl bg-superficie p-2 text-center">
                  <p className="text-[11px] font-extrabold text-white">Mesa 1</p>
                  <p className="text-[10px] font-bold text-verde">Libre</p>
                </div>
                <div className="rounded-xl bg-superficie p-2 text-center ring-1 ring-dorado/40">
                  <p className="text-[11px] font-extrabold text-white">Mesa 2</p>
                  <p className="text-[10px] font-bold text-dorado">Atiende Luis</p>
                </div>
                <div className="rounded-xl bg-superficie p-2 text-center ring-1 ring-verde/40">
                  <p className="text-[11px] font-extrabold text-white">Mesa 3</p>
                  <p className="text-[10px] font-bold text-verde">Por cobrar 🔔</p>
                </div>
              </div>
              <div className="mt-3 flex items-center justify-between rounded-xl bg-dorado px-4 py-2.5">
                <span className="text-xs font-extrabold text-noche">+ Nuevo pedido</span>
                <span className="text-xs font-black text-noche">Caja · Reporte</span>
              </div>
            </div>
            <span className="gx-flota absolute -right-2 top-16 rounded-xl border border-dorado/30 bg-noche px-3 py-1.5 text-[11px] font-bold text-dorado shadow-lg sm:-right-6">
              🔔 Mesa 3 pide la cuenta
            </span>
          </div>

          {/* Los beneficios contados clarito */}
          <div className="grid gap-4 sm:grid-cols-2">
            {beneficios.map((b) => (
              <div key={b.titulo} className="flex flex-col gap-2 rounded-2xl border border-white/10 bg-superficie p-4 transition duration-200 hover:-translate-y-1 hover:border-white/25">
                <span className="text-2xl">{b.emoji}</span>
                <h3 className="text-[15px] font-extrabold text-white">{b.titulo}</h3>
                <p className="text-[13px] leading-relaxed text-niebla">{b.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// Comparacion honesta (sin nombrar a nadie) + el diferencial llave en mano.
function Comparacion({ onAuth }: { onAuth: (m: Modo) => void }) {
  const filas: [string, string, string][] = [
    ['El pedido', 'Cae en un chat y ahí muere', 'Se ejecuta completo, de la cocina al cobro'],
    ['El pago', 'Confías en el capture y rezas', 'Se verifica antes de despachar'],
    ['Sin internet', 'Se cae todo', 'El salón sigue vendiendo'],
    ['La cocina', 'Alguien lee y grita el pedido', 'Sale impresa, partida por puesto'],
    ['Tu margen', 'No lo sabes', 'Te lo dice al centavo por plato'],
    ['El montaje', 'Te defiendes solo', 'Te lo instalamos y entrenamos a tu gente'],
  ];
  return (
    <section id="para-negocios" className="px-4 py-16 sm:px-6">
      <div className="mx-auto flex max-w-4xl flex-col gap-10">
        <Encabezado
          eyebrow="La diferencia"
          titulo="Un menú digital te toma el pedido. Gustito te maneja el negocio."
        />
        <div className="overflow-hidden rounded-3xl border border-white/10 bg-superficie">
          <div className="grid grid-cols-[1fr_1fr_1.2fr] gap-px bg-white/10 text-sm">
            <div className="bg-superficie px-3 py-3 text-[11px] font-bold uppercase tracking-wide text-niebla sm:px-5" />
            <div className="bg-superficie px-3 py-3 text-center text-[11px] font-bold uppercase tracking-wide text-niebla sm:px-5">Menú digital típico</div>
            <div className="bg-dorado/10 px-3 py-3 text-center text-[11px] font-black uppercase tracking-wide text-dorado sm:px-5">Gustito Xpress</div>
            {filas.map(([campo, malo, bueno]) => (
              <FilaComp key={campo} campo={campo} malo={malo} bueno={bueno} />
            ))}
          </div>
        </div>
        <div className="flex flex-col items-center gap-4 rounded-3xl border border-dorado/25 bg-dorado/5 p-8 text-center">
          <span className="text-3xl">🔧</span>
          <h3 className="text-2xl font-extrabold text-white">Instalado, no descargado</h3>
          <p className="max-w-xl text-base leading-relaxed text-niebla">
            No te soltamos una app para que te defiendas solo. Te lo dejamos funcionando: sistema, impresora
            conectada y tu gente entrenada. Tú vendes, nosotros montamos. Empiezas gratis.
          </p>
          <button
            onClick={() => onAuth('crear')}
            className="inline-flex items-center justify-center gap-2 rounded-2xl bg-dorado px-6 py-3.5 text-sm font-bold text-noche shadow-glow transition active:scale-95"
          >
            Quiero montar mi negocio <Flecha />
          </button>
        </div>
      </div>
    </section>
  );
}

function FilaComp({ campo, malo, bueno }: { campo: string; malo: string; bueno: string }) {
  return (
    <>
      <div className="flex items-center bg-superficie px-3 py-3.5 text-[13px] font-bold text-white sm:px-5">{campo}</div>
      <div className="flex items-center justify-center bg-superficie px-3 py-3.5 text-center text-[12px] leading-snug text-niebla sm:px-5">{malo}</div>
      <div className="flex items-center gap-1.5 bg-dorado/5 px-3 py-3.5 text-[12px] font-semibold leading-snug text-white sm:px-5">
        <span className="text-verde">✓</span> {bueno}
      </div>
    </>
  );
}

function Caracteristicas() {
  const feats: { emoji: string; title: string; desc: string; destacar?: boolean }[] = [
    {
      emoji: '💰',
      title: 'Lo tuyo es tuyo',
      desc: 'No nos metemos en tus ventas ni te cobramos por cada pedido. Tu negocio, tus clientes, tu plata. Nosotros solo ponemos la tecnología.',
      destacar: true,
    },
    {
      emoji: '🍽️',
      title: 'Servicio en mesa con QR',
      desc: 'El cliente pide y paga desde la mesa sin llamar a nadie. La cuenta se va acumulando sola.',
    },
    {
      emoji: '🧾',
      title: 'Cuentas separadas',
      desc: 'El grupo pide junto y paga por partes: cada quien lo suyo. La mesa se libera cuando está todo pagado.',
    },
    {
      emoji: '🤵',
      title: 'Modo mesero',
      desc: 'Tu equipo toma pedidos desde su teléfono, para quien no usa el QR. Cada pedido queda con el nombre de quien atendió.',
    },
    {
      emoji: '💵',
      title: 'Precios al día',
      desc: 'Publicas en dólares y se convierte solo a bolívares con la tasa del BCV. Nunca un precio viejo.',
    },
    {
      emoji: '🔔',
      title: 'Avisos al instante',
      desc: 'Te llega una notificación al teléfono aunque la app esté cerrada: nuevo pedido, pago por revisar, mesa que pide la cuenta.',
    },
    {
      emoji: '🏪',
      title: 'Tu propia marca',
      desc: 'Tu tienda con tu logo, tus colores y tu enlace único. Además apareces en el directorio para que te descubran.',
    },
    {
      emoji: '🤖',
      title: 'Menú con IA',
      desc: 'Sube la foto de tu carta y la inteligencia artificial arma el nombre y la descripción de tus productos.',
    },
  ];
  return (
    <section className="bg-superficie-2 px-4 py-16 sm:px-6">
      <div className="mx-auto flex max-w-6xl flex-col gap-10">
        <Encabezado
          eyebrow="Y además"
          titulo="Todo esto viene incluido"
          sub="Aparte de la cocina de papel, el Cerebro y el modo sin internet, tu negocio trae todas estas herramientas."
        />
        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {feats.map((f) => (
            <div
              key={f.title}
              className={`flex flex-col gap-4 rounded-3xl border p-6 transition duration-200 hover:-translate-y-1 ${
                f.destacar ? 'border-dorado/30 bg-dorado/10 hover:border-dorado/50' : 'border-white/10 bg-superficie hover:border-white/25'
              }`}
            >
              <span className="text-3xl">{f.emoji}</span>
              <h3 className="text-lg font-extrabold text-white">{f.title}</h3>
              <p className="text-sm leading-relaxed text-niebla">{f.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Mision() {
  return (
    <section className="px-4 py-16 sm:px-6">
      <div className="mx-auto max-w-6xl">
        <div className="relative overflow-hidden rounded-3xl border border-white/10 bg-superficie">
          <div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-dorado/20 via-transparent to-dorado/5" />
          <div className="relative grid gap-8 p-8 md:grid-cols-2 md:p-12">
            <div className="flex flex-col gap-6">
              <span className="text-sm font-bold uppercase tracking-widest text-dorado">Nuestra misión</span>
              <h2 className="text-3xl font-extrabold leading-tight tracking-tight text-white sm:text-4xl">
                Que el negocio de comida venezolano venda como los grandes.
              </h2>
              <p className="text-base leading-relaxed text-niebla">
                Cualquier negocio de comida en Venezuela merece vender con su propia marca y su propio delivery,
                sin depender de plataformas que se quedan con la mayor parte. Esa es nuestra misión.
              </p>
            </div>
            <div className="flex flex-col gap-6">
              <span className="text-sm font-bold uppercase tracking-widest text-dorado">Nuestra visión</span>
              <h2 className="text-3xl font-extrabold leading-tight tracking-tight text-white">
                De Maracaibo a Puerto Ordaz, con la misma tecnología.
              </h2>
              <p className="text-base leading-relaxed text-niebla">
                Una Venezuela donde la arepera del barrio, la pizzería del centro, los pollos de la esquina y el
                negocio de postres de casa tengan la misma tecnología que los grandes, al alcance de cualquiera.
              </p>
              <div className="flex items-center gap-3">
                <span className="grid h-10 w-10 place-items-center rounded-xl border border-dorado/30 bg-dorado/10 text-dorado">
                  <Glifo className="h-5 w-5" />
                </span>
                <p className="text-sm font-semibold text-white">Gustito Xpress, hecho en Venezuela</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Contacto() {
  return (
    <section id="contacto" className="bg-superficie-2 px-4 py-16 sm:px-6">
      <div className="mx-auto flex max-w-6xl flex-col gap-10">
        <Encabezado
          eyebrow="Contacto y soporte"
          titulo="¿Necesitas ayuda? Hablemos"
          sub="Seas un negocio, un cliente o un repartidor, escríbenos y te respondemos lo antes posible."
        />
        <div className="mx-auto grid w-full max-w-5xl gap-5 sm:grid-cols-3">
          <a
            href={WHATSAPP_SOPORTE}
            target="_blank"
            rel="noreferrer"
            onClick={() => medir('click_whatsapp')}
            className="flex flex-col gap-3 rounded-3xl border border-dorado/30 bg-noche p-6 transition hover:border-dorado/60"
          >
            <span className="text-3xl">💬</span>
            <h3 className="text-lg font-extrabold text-white">WhatsApp</h3>
            <p className="text-sm leading-relaxed text-niebla">Atención directa por mensaje o llamada.</p>
            <p className="text-base font-bold text-dorado">0412-7930168</p>
          </a>
          <a
            href="mailto:soporte@gustitoxpress.app"
            className="flex flex-col gap-3 rounded-3xl border border-white/10 bg-noche p-6 transition hover:border-white/25"
          >
            <span className="text-3xl">🛟</span>
            <h3 className="text-lg font-extrabold text-white">Soporte</h3>
            <p className="text-sm leading-relaxed text-niebla">Ayuda con tu cuenta o la plataforma.</p>
            <p className="break-all text-base font-bold text-dorado">soporte@gustitoxpress.app</p>
          </a>
          <a
            href="mailto:contacto@gustitoxpress.app"
            className="flex flex-col gap-3 rounded-3xl border border-white/10 bg-noche p-6 transition hover:border-white/25"
          >
            <span className="text-3xl">✉️</span>
            <h3 className="text-lg font-extrabold text-white">Contacto</h3>
            <p className="text-sm leading-relaxed text-niebla">Alianzas y temas comerciales.</p>
            <p className="break-all text-base font-bold text-dorado">contacto@gustitoxpress.app</p>
          </a>
        </div>
      </div>
    </section>
  );
}

function CtaFooter({ onAuth, onLegal }: { onAuth: (m: Modo) => void; onLegal: (d: 'terminos' | 'privacidad') => void }) {
  return (
    <>
      <section className="px-4 py-16 sm:px-6">
        <div className="mx-auto max-w-3xl">
          <div className="relative overflow-hidden rounded-3xl bg-gradient-to-br from-dorado to-dorado-oscuro p-8 text-center md:p-12">
            <div className="pointer-events-none absolute -top-10 -right-10 h-48 w-48 rounded-full bg-white/20 blur-2xl" />
            <div className="relative flex flex-col items-center gap-6">
              <span className="grid h-14 w-14 place-items-center rounded-2xl bg-noche/15 text-noche ring-1 ring-noche/20">
                <Glifo className="h-7 w-7" />
              </span>
              <h2 className="text-3xl font-extrabold text-noche sm:text-4xl">
                Deja de trabajarle al desorden. Ponle sistema a tu negocio.
              </h2>
              <p className="max-w-md text-base font-medium leading-relaxed text-noche/80">
                Registra tu negocio gratis y monta la máquina completa: pedidos, cocina, cobro verificado y
                delivery con tu marca. Sin enredos, y sin que nadie te cobre por vender lo tuyo.
              </p>
              <div className="flex flex-col gap-3 sm:flex-row">
                <button onClick={() => onAuth('crear')} className="rounded-2xl bg-noche px-8 py-4 text-base font-bold text-white transition active:scale-95">
                  Registra tu negocio gratis
                </button>
                <a
                  href={VITRINA}
                  onClick={() => medir('click_vitrina')}
                  className="rounded-2xl border border-noche/25 bg-noche/5 px-8 py-4 text-base font-bold text-noche transition hover:bg-noche/10 active:scale-95"
                >
                  Solo quiero comer
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <footer className="border-t border-white/10 px-4 py-12 sm:px-6">
        <div className="mx-auto flex max-w-6xl flex-col gap-8">
          <div className="flex flex-col justify-between gap-8 md:flex-row">
            <div className="flex max-w-xs flex-col gap-4">
              <Logo />
              <p className="text-sm leading-relaxed text-niebla">
                La plataforma venezolana para que tu negocio de comida venda con su marca: en línea, en la mesa y
                con su propio delivery. En toda Venezuela.
              </p>
              <p className="text-sm text-niebla">🇻🇪 Hecho en Venezuela</p>
            </div>
            <div className="grid grid-cols-2 gap-8 sm:grid-cols-3">
              <FooterCol titulo="Plataforma">
                <a className="foot" href={VITRINA}>Pedir comida</a>
                <a className="foot" href="#por-que">Por qué Gustito</a>
                <a className="foot" href="#para-negocios">Para negocios</a>
                <a className="foot" href={PORTAL_REPARTIDOR}>Soy repartidor</a>
              </FooterCol>
              <FooterCol titulo="Negocios">
                <button className="foot text-left" onClick={() => onAuth('crear')}>Registra tu negocio</button>
                <a className="foot" href="#para-comensales">Para comensales</a>
                <button className="foot text-left" onClick={() => onAuth('entrar')}>Entrar</button>
              </FooterCol>
              <FooterCol titulo="Legal">
                <button className="foot text-left" onClick={() => onLegal('terminos')}>Términos de uso</button>
                <button className="foot text-left" onClick={() => onLegal('privacidad')}>Privacidad</button>
              </FooterCol>
              <FooterCol titulo="Contacto">
                <a className="foot" href={WHATSAPP_SOPORTE} target="_blank" rel="noreferrer">WhatsApp 0412-7930168</a>
                <a className="foot" href="tel:+584127930168">Llamar 0412-7930168</a>
                <a className="foot break-all" href="mailto:contacto@gustitoxpress.app">contacto@gustitoxpress.app</a>
                <a className="foot break-all" href="mailto:soporte@gustitoxpress.app">soporte@gustitoxpress.app</a>
              </FooterCol>
            </div>
          </div>
          <div className="flex flex-col items-center justify-between gap-2 border-t border-white/10 pt-6 sm:flex-row">
            <p className="text-xs text-niebla">2026 Gustito Xpress. Todos los derechos reservados.</p>
            <p className="text-xs text-niebla">Date un gustito, rapidito</p>
          </div>
        </div>
      </footer>
    </>
  );
}

function FooterCol({ titulo, children }: { titulo: string; children: React.ReactNode }) {
  return (
    <div className="flex flex-col gap-3 [&_.foot]:text-sm [&_.foot]:text-niebla [&_.foot]:transition-colors hover:[&_.foot]:text-white">
      <p className="text-sm font-bold text-white">{titulo}</p>
      {children}
    </div>
  );
}
