// === Reusable product page =================================================
const { useState: useStateProd, useEffect: useEffectProd } = React;

// — Hero visuals (one per product) ——————————————————————————————

/**
 * Hero visual estilo pillars__stage (como Facturación “CAE en segundos”)
 * pero con la captura del dash Basket adentro.
 */
function HeroCommerce() {
  return (
    <div className="hero-stage">
      <div className="hero-stage__label">Commerce · headless</div>
      <h3 className="hero-stage__title">Operación <em>unificada</em></h3>
      <p className="hero-stage__desc">
        Pedidos, stock y canales en un solo panel — la misma base que <em>Basket Bliss</em> y Shine Bright.
      </p>
      <div className="hero-stage__frame">
        <img
          src="uploads/commerce-hero.png?v=3"
          alt="Basket Admin — panel de operaciones"
          loading="eager"
          decoding="async"
        />
      </div>
    </div>
  );
}


function ProductStageShell({ label, title, desc, children, dark, agro }) {
  const mod = agro ? ' hero-stage--agro' : dark ? ' hero-stage--dark' : '';
  return (
    <div className={'hero-stage' + mod}>
      <div className="hero-stage__label">{label}</div>
      <h3 className="hero-stage__title">{title}</h3>
      {desc && <p className="hero-stage__desc">{desc}</p>}
      <div className="hero-stage__frame hero-stage__frame--mock">
        {children}
      </div>
    </div>
  );
}

function HeroFactura() {
  return (
    <ProductStageShell
      label="Facturación · ARCA"
      title={<>CAE <em>real</em></>}
      desc={<>Emitís, ARCA responde y el PDF sale al cliente — en segundos.</>}
    >
      <div className="stage-mock stage-mock--factura hero-stage__inner-mock">
        <div className="stage-mock__bar">
          <span className="stage-mock__bar-title">Factura A · 0001-00000128</span>
          <span className="stage-mock__pill stage-mock__pill--ok">CAE OK</span>
        </div>
        <div className="stage-mock__body">
          <div className="stage-mock__row">
            <div>
              <div className="stage-mock__label">Cliente</div>
              <div className="stage-mock__value">Lácteos del Sur S.A.</div>
              <div className="stage-mock__muted">CUIT 30-71234567-8</div>
            </div>
            <div style={{textAlign:'right'}}>
              <div className="stage-mock__label">Total</div>
              <div className="stage-mock__value stage-mock__value--lg">$ 84.250</div>
            </div>
          </div>
          <div className="stage-mock__divider" />
          <div className="stage-mock__meta">
            <div><span className="stage-mock__label">CAE</span><div className="stage-mock__mono">70123456789012</div></div>
            <div><span className="stage-mock__label">Vto.</span><div className="stage-mock__mono">19/06/2026</div></div>
            <div><span className="stage-mock__label">ARCA</span><div className="stage-mock__mono" style={{color:'#7EE0A8'}}>~1.2s</div></div>
          </div>
          <div className="stage-mock__actions">
            <span className="stage-mock__chip">PDF enviado</span>
            <span className="stage-mock__chip">Mail cliente</span>
            <span className="stage-mock__chip">IVA 21%</span>
          </div>
        </div>
      </div>
    </ProductStageShell>
  );
}

function HeroBI() {
  const bars = [38, 52, 44, 61, 49, 72, 58, 80, 64, 76, 88, 95];
  const max = Math.max(...bars);
  return (
    <ProductStageShell
      label="Business Intelligence"
      title={<>Datos que <em>te avisan</em></>}
      desc={<>KPIs en vivo y asesor IA con los números de <em>tu empresa</em>.</>}
    >
      <div className="hero-stage__mock" style={{display:'flex', flexDirection:'column', gap:14}}>
        <div style={{display:'flex', gap:10}}>
          <div style={{
            flex:1, background:'rgba(244,239,230,.08)', border:'1px solid rgba(244,239,230,.12)',
            borderRadius:14, padding:'14px 16px', color:'#F4EFE6'
          }}>
            <div style={{fontSize:10.5, opacity:.55, letterSpacing:'.05em', textTransform:'uppercase'}}>Margen bruto</div>
            <div style={{fontSize:24, marginTop:6, letterSpacing:'-.02em'}}>42,8%</div>
            <div style={{fontSize:11, color:'#9BB369', marginTop:4}}>+3,2 pp · vs mes anterior</div>
          </div>
          <div style={{
            flex:1, background:'rgba(244,239,230,.08)', border:'1px solid rgba(244,239,230,.12)',
            borderRadius:14, padding:'14px 16px', color:'#F4EFE6'
          }}>
            <div style={{fontSize:10.5, opacity:.55, letterSpacing:'.05em', textTransform:'uppercase'}}>CMV</div>
            <div style={{fontSize:24, marginTop:6, letterSpacing:'-.02em'}}>57,2%</div>
            <div style={{fontSize:11, color:'#E37449', marginTop:4}}>Objetivo ≤ 70%</div>
          </div>
        </div>
        <div style={{
          background:'rgba(244,239,230,.06)', border:'1px solid rgba(244,239,230,.12)',
          borderRadius:14, padding:16, color:'#F4EFE6', flex:1,
          display:'flex', flexDirection:'column'
        }}>
          <div style={{display:'flex', justifyContent:'space-between', opacity:.55, fontSize:10.5, letterSpacing:'.05em', textTransform:'uppercase'}}>
            <span>Ventas mensuales</span><span>2026</span>
          </div>
          <div style={{display:'flex', alignItems:'flex-end', gap:6, marginTop:18, flex:1, minHeight:90}}>
            {bars.map((v, i) => (
              <div key={i} style={{
                flex:1, height: (v/max*100)+'%',
                background: i === bars.length-1 ? '#E37449' : 'rgba(244,239,230,.4)',
                borderRadius:'4px 4px 0 0'
              }}/>
            ))}
          </div>
          <div style={{display:'flex', justifyContent:'space-between', opacity:.5, fontSize:10, marginTop:8, fontFamily:'var(--font-mono)'}}>
            <span>ENE</span><span>MAR</span><span>MAY</span><span>JUL</span><span>SEP</span><span>NOV</span>
          </div>
        </div>
        <div style={{
          background:'rgba(195,113,73,.10)', border:'1px solid rgba(227,116,73,.3)',
          borderRadius:14, padding:14, color:'#F4EFE6', fontSize:13, display:'flex', gap:12
        }}>
          <span style={{
            width:28, height:28, borderRadius:'50%', background:'#E37449',
            display:'grid', placeItems:'center', flexShrink:0, color:'#1A1A1A'
          }}>
            <IconSparkle size={14}/>
          </span>
          <div>
            <div style={{fontWeight:500}}>Asesor IA — sugerencia</div>
            <div style={{opacity:.75, marginTop:2, fontSize:12, lineHeight:1.4}}>
              Renegociá con tu proveedor top (32% del CMV) antes del 30/06. Podrías recuperar ~4 pp de margen.
            </div>
          </div>
        </div>
      </div>
    </ProductStageShell>
  );
}

/** POS UI reutilizable — ticket + pagos (diseño PymeStudio Retail) */
function PosScreen({ compact }) {
  return (
    <div className={'pos-screen' + (compact ? ' pos-screen--compact' : '')}>
      <div className="pos-screen__top">
        <span>Caja 1 · Abierta</span>
      </div>
      <div className="pos-screen__ticket">
        <div className="pos-screen__ticket-h">
          <span>Ticket #00428</span>
          <span>14:32</span>
        </div>
        {[
          ['Remera básica · M', 2, 18900],
          ['Pantalón cargo · 42', 1, 32400],
          ['Cinturón cuero', 1, 9800],
        ].map((it, i) => (
          <div key={i} className="pos-screen__line">
            <span><em>×{it[1]}</em> {it[0]}</span>
            <span>${it[2].toLocaleString('es-AR')}</span>
          </div>
        ))}
        <div className="pos-screen__total">
          <span>Total</span>
          <strong>$ 80.000</strong>
        </div>
      </div>
      <div className="pos-screen__pays">
        {[
          { label: 'MODO QR', sub: 'Interoperable', active: true },
          { label: 'Mercado Pago', sub: 'QR · cuotas' },
          { label: 'Tarjeta', sub: '12 s/interés' },
          { label: 'Efectivo', sub: '' },
        ].map((m, i) => (
          <div key={i} className={'pos-screen__pay' + (m.active ? ' is-active' : '')}>
            <div className="pos-screen__pay-l">{m.label}</div>
            {m.sub && <div className="pos-screen__pay-s">{m.sub}</div>}
          </div>
        ))}
      </div>
      <div className="pos-screen__client">
        <span>Cliente · Camila R. · Gold</span>
        <span>+800 pts</span>
      </div>
    </div>
  );
}

/**
 * Hero Retail: mostrador real (foto) + tablet con nuestro POS.
 * Atmósfera LED aparte en ProductPage.
 */
function HeroRetail() {
  return (
    <div className="counter-hero">
      <div className="counter-hero__photo" aria-hidden="true">
        <img
          src="uploads/retail-counter.jpg"
          alt=""
          className="counter-hero__photo-img"
        />
        <div className="counter-hero__photo-shade" />
      </div>
      <div className="counter-hero__stage">
        <div className="counter-hero__label">Retail · POS en mostrador</div>
        <h3 className="counter-hero__title">Mostrador en <em>cualquier tablet</em></h3>
        <p className="counter-hero__desc">
          Nuestro POS en tablet sobre el mostrador — MODO, Mercado Pago y ticket listo.
        </p>
        <div className="counter-hero__device">
          <div className="counter-hero__bezel">
            <div className="counter-hero__notch" aria-hidden="true" />
            <PosScreen />
          </div>
          <div className="counter-hero__stand" aria-hidden="true" />
        </div>
      </div>
    </div>
  );
}

function HeroAgro() {
  return (
    <ProductStageShell
      label="AgTech · Campo"
      title={<>Más que una <em>planilla</em></>}
      desc="Hacienda, cultivos y costos por ha — con modo offline."
      agro
    >
      <div className="agro-panel">
        <div className="agro-panel__card">
          <div className="agro-panel__row">
            <span className="agro-panel__muted">Lote 7 · La Esperanza</span>
            <span className="agro-panel__muted">148 ha</span>
          </div>
          <div className="agro-panel__title">Soja · campaña 25/26</div>
          <div className="agro-panel__kpis">
            <div>
              <div className="agro-panel__muted">Costo / ha</div>
              <div className="agro-panel__num">US$ 432</div>
            </div>
            <div>
              <div className="agro-panel__muted">Margen bruto</div>
              <div className="agro-panel__num agro-panel__num--ok">US$ 218</div>
            </div>
          </div>
        </div>
        <div className="agro-panel__card">
          <div className="agro-panel__muted">Hacienda · Rodeo cría</div>
          <div className="agro-panel__herd">
            {[['Vacas', 482], ['Vaq.', 96], ['Ternr.', 271], ['Toros', 18]].map((it) => (
              <div key={it[0]}>
                <div className="agro-panel__muted">{it[0]}</div>
                <div className="agro-panel__num agro-panel__num--sm">{it[1]}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="agro-panel__card agro-panel__card--chart">
          <div className="agro-panel__muted">Lluvias · últimos 30 días</div>
          <svg viewBox="0 0 200 48" className="agro-panel__svg" preserveAspectRatio="none">
            <path d="M0 40 L20 38 L40 32 L60 36 L80 24 L100 28 L120 16 L140 22 L160 12 L180 18 L200 14"
              fill="none" stroke="#9BB369" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
          <div className="agro-panel__row">
            <span className="agro-panel__muted">Acum. 128 mm</span>
            <span className="agro-panel__num--ok" style={{fontSize:12}}>+38 mm vs prom.</span>
          </div>
        </div>
      </div>
    </ProductStageShell>
  );
}

// — Product data ————————————————————————————————————————

const PRODUCTS = {
  'factura-facil': {
    slug: 'factura-facil',
    name: 'FacturaFácil',
    eyebrow: 'Producto · Facturación',
    status: { kind: 'live', text: 'Disponible' },
    HeroVisual: HeroFactura,
    title: <>Facturá con CAE real <em>en segundos.</em></>,
    sub: <>Conectado con ARCA en serio. Mono y RI, deuda CCMA en vivo, facturación masiva desde Mercado Pago y módulo de impuestos con <em>forecast</em>.</>,
    meta: [
      { label: 'Primera factura', value: <><em>menos de 2</em> min</> },
      { label: 'Comprobantes', value: <>A · B · C · <em>M</em></> },
      { label: 'Plan mínimo', value: <><em>Inicial</em></> },
    ],
    features: [
      { icon: <IconShield/>, title: <>CAE <em>real</em>, no simulado</>,
        desc: 'Conexión directa con los servidores de ARCA via wsfe v1. Factura A, B, C, M y MiPyME. Si ARCA está caída, guardamos como borrador y reintentamos.' },
      { icon: <IconUsers/>, title: <>Monotributo y <em>RI</em></>,
        desc: <>Soporte completo para ambos regímenes. Si cambiás de categoría, cambia el tipo de facturación con un click — sin <em>migrar</em> de sistema.</> },
      { icon: <IconSearch/>, title: <>Padrón A4 con <em>autocompletado</em></>,
        desc: <>Ingresás un CUIT y traemos razón social, IVA y domicilio fiscal en <em>tiempo real</em>.</> },
      { icon: <IconCard/>, title: <>Facturación masiva desde <em>Mercado Pago</em></>,
        desc: <>Importás cobros de MP (link, QR, transferencia) y emitís comprobantes en <em>lote</em> con un click. Sin tipear de nuevo.</> },
      { icon: <IconGlobe/>, title: <>Facturá las ventas de tu <em>e-commerce</em></>,
        desc: <>Pedidos de tienda online, headless o marketplaces: cada venta puede generar su factura ARCA automática o en lote, conectada a tu <em>operación</em>.</> },
      { icon: <IconChart/>, title: <>Módulo de <em>impuestos</em> con forecast</>,
        desc: 'Resumen mensual, presión fiscal, IIBB local y convenio multilateral, forecast a 3 meses y simulador con sliders de impacto. Premium.' },
      { icon: <IconBolt/>, title: <>Deuda <em>CCMA</em> en tiempo real</>,
        desc: 'Consulta directa a ARCA via AfipSDK. Desglose por concepto (Mono 020, Autónomos 021, OS 024), intereses, períodos expandibles. Badge de alerta cuando hay deuda.' },
      { icon: <IconFactura/>, title: <>PDF con QR <em>verificable</em></>,
        desc: <>Comprobante con QR que el receptor verifica en ARCA. Envío automático por email con tu <em>dominio</em>.</> },
      { icon: <IconBook/>, title: <>Reportes y exportación <em>CSV</em></>,
        desc: <>Exportás al formato que pide tu contador o banco. Compatible Tango, Bejerman y <em>Excel</em>.</> },
    ],
    extra: {
      eyebrow: 'Detalle',
      mockKind: 'factura',
      title: <>Lo que tu <em>contador</em> ya está pidiendo.</>,
      lede: <>Todo lo operativo de facturación electrónica para PyMEs en <em>Argentina</em>.</>,
      items: [
        <>Login con CUIT + clave fiscal · JWT <em>24hs</em></>,
        <>Punto de venta RCEL · Concepto <em>1/2/3</em></>,
        <>Receptor CF / CUIT / <em>DNI</em></>,
        <>Comprobantes recibidos con IVA <em>crédito</em></>,
        <>Carga de compras manuales para <em>RI</em></>,
        <>Histórico completo de <em>comprobantes</em></>,
        <>Notas de crédito y débito <em>asociadas</em></>,
        <>Listados y filtros por <em>todo</em></>,
        <>Panel admin con wizard de <em>alta</em></>,
        <>Multi-cliente · plan por <em>CUIT</em></>,
        <>Token MP por cliente, <em>aislado</em></>,
        <>Emails con tu <em>dominio</em></>,
      ]
    },
    integrations: [
      { name: 'ARCA / AFIP', note: 'CAE y padrón' },
      { name: 'Mercado Pago', note: 'Ventas y facturación en lote' },
      { name: 'E-commerce / OMS', note: 'Pedidos online a factura' },
      { name: 'AfipSDK', note: 'Webservices ARCA' },
      { name: 'Padrón A4', note: 'Autocompletado CUIT' },
      { name: 'Resend', note: 'PDF por email' },
    ],
    plan: { name: 'Inicial / Negocio', priceLabel: 'desde $ 25.000', period: '/mes ARS', desc: <>FacturaFácil desde plan Inicial. Impuestos y más potencia en <em>Negocio</em>.</> },
    faqs: [
      { q: '¿El CAE es real o simulado?', a: 'Real. Conexión directa con los servidores de ARCA. El comprobante es válido como factura electrónica y queda registrado en tu CUIT.' },
      { q: '¿Qué pasa si ARCA se cae?', a: 'Guardamos la factura como borrador y reintentamos automáticamente cada 60 segundos. Cuando ARCA vuelve, asigna CAE sin que hagas nada.' },
      { q: '¿Sirve para monotributistas?', a: 'Sí, desde el plan Inicial. Emitís factura C ilimitada. Cuando pasás a RI, cambiás el régimen con un click y empezás a facturar A y B.' },
      { q: '¿Puedo emitir facturas desde el celular?', a: 'Sí, la interfaz es responsive. Funciona desde el mostrador, la oficina o en movimiento — en Córdoba, CABA o donde operes.' },
      { q: '¿Trabajan en Córdoba y el interior?', a: 'Sí. Implementamos y damos soporte en Córdoba, CABA, GBA y todo el país, con horarios AR y onboarding remoto o híbrido.' },
    ],
  },

  'dashboard-bi': {
    slug: 'dashboard-bi',
    name: 'Dashboard BI',
    eyebrow: 'Producto · Business Intelligence',
    status: { kind: 'live', text: 'Disponible' },
    HeroVisual: HeroBI,
    title: <>Datos que <em>te avisan</em> antes que el problema crezca.</>,
    sub: <>Visibilidad financiera en tiempo real con un asesor IA que conoce tu negocio. Ventas, CMV, márgenes y forecast — sin pedirle al contador <em>cada mes</em>.</>,
    meta: [
      { label: 'Actualización', value: <><em>Tiempo real</em></> },
      { label: 'Asesor IA', value: <><em>Incluido</em></> },
      { label: 'Plan mínimo', value: <><em>Negocio</em></> },
    ],
    features: [
      { icon: <IconChart/>, title: 'Overview ejecutivo',
        desc: 'KPIs de ventas, CMV, margen bruto y resultado neto en un solo panel. Vista diaria, mensual y anual. Comparativa con período anterior.' },
      { icon: <IconSparkle/>, title: 'Asesor IA estratégico',
        desc: 'Agente con contexto real de tu negocio. Recomendaciones en español argentino — no respuestas genéricas.' },
      { icon: <IconUsers/>, title: 'Análisis de proveedores',
        desc: 'Concentración, Pareto y mapa de riesgo. Identifica el 20% que te genera el 80% del costo.' },
      { icon: <IconBolt/>, title: 'Simulador break-even',
        desc: 'Punto de equilibrio y escenarios de ventas, CMV y gastos con impacto en vivo sobre el resultado.' },
      { icon: <IconClock/>, title: 'Forecast fiscal a 3 meses',
        desc: 'Proyectamos tu carga impositiva, monotributo, IIBB y autónomos. Te avisa si te acercás al tope de categoría antes de cruzarlo.' },
      { icon: <IconPlug/>, title: 'Sync con Google Drive',
        desc: 'Actualizás tu planilla en Drive y el dashboard refleja los cambios en automático.' },
      { icon: <IconShield/>, title: 'Super Admin con PIN',
        desc: 'Acceso estratégico protegido. Analytics + IA separados del operativo del día a día.' },
      { icon: <IconArrowUpRight/>, title: 'Alertas automáticas',
        desc: 'CMV alto, margen negativo, monotributo cerca del tope. Te avisamos antes de que sea tarde.' },
    ],
    extra: {
      eyebrow: 'Caso real',
      mockKind: 'bi',
      title: <>De los números a la <em>acción.</em></>,
      lede: 'Resultados de un cliente entre oct-25 y feb-26 con el asesor IA.',
      items: [
        'CMV 84,5% (objetivo ≤70%) → alerta crítica',
        'Resultado neto −$9,4M → recomendación IA',
        'Monotributo Cat. H al 92% del tope → cambio de régimen',
        'Top 3 proveedores = 71% del costo',
        'IIBB CABA + PBA + Santa Fe por convenio',
        '5 escenarios, 1 implementado, +14% margen',
      ]
    },
    integrations: [
      { name: 'Google Drive', note: 'Planillas en sync' },
      { name: 'ARCA / AFIP', note: 'Datos fiscales' },
      { name: 'Mercado Pago', note: 'Cobros y conciliación' },
      { name: 'Resend', note: 'Alertas por email' },
    ],
    /* Business skills — agentes / capacidades de negocio del producto BI */
    skills: [
      { tag: 'CFO desk', icon: 'chart', title: 'Overview ejecutivo',
        desc: 'Ventas, CMV, margen y resultado neto en un panel. Comparativa diaria, mensual y anual vs período anterior.' },
      { tag: 'IA de negocio', icon: 'sparkle', title: 'Asesor IA estratégico',
        desc: 'Recomendaciones accionables con contexto real de tu PyME — en español argentino, no genéricas.' },
      { tag: 'Compras', icon: 'users', title: 'Riesgo de proveedores',
        desc: 'Concentración, Pareto y mapa de riesgo. Sabés a quién negociar y cuánto podés recuperar de margen.' },
      { tag: 'Simulación', icon: 'bolt', title: 'Break-even & escenarios',
        desc: 'Punto de equilibrio y what-if de ventas, CMV y gastos con impacto en vivo sobre el resultado.' },
      { tag: 'Fiscal AR', icon: 'clock', title: 'Forecast impositivo',
        desc: 'Proyección a 3 meses de monotributo, IIBB y carga fiscal. Alerta antes de cruzar topes de categoría.' },
      { tag: 'Ops', icon: 'shield', title: 'Alertas & control',
        desc: 'CMV alto, margen negativo, proveedor crítico. Señal temprana por email y en el panel.' },
    ],
    plan: { name: 'Negocio', priceLabel: 'desde $ 70.000', period: '/mes ARS', desc: <>Dashboard + asesor IA + impuestos + sync <em>Google Drive</em>.</> },
    faqs: [
      { q: '¿Cómo aprende la IA mi negocio?', a: 'Conectamos tus fuentes de datos (planilla en Drive, facturación, MP) y la IA tiene contexto completo del histórico. Las recomendaciones se basan en tus números reales, no en plantillas genéricas.' },
      { q: '¿Mis datos van a entrenar modelos públicos?', a: 'No. Tus datos se procesan de forma aislada por cliente, no se usan para entrenar modelos públicos ni se mezclan con datos de otras empresas.' },
      { q: '¿Funciona con Excel local sin Drive?', a: 'Sí, podés cargar manualmente. Pero la sync con Drive te evita tener que recargar cada vez que actualizás la planilla.' },
      { q: '¿Cuánto histórico cargás?', a: 'Recomendamos al menos 6 meses para que el asesor tenga base. Migración asistida hasta 24 meses sin costo.' },
      { q: '¿Trabajan en Córdoba y el interior?', a: 'Sí. Onboarding y soporte para PyMEs en Córdoba, CABA, GBA y todo el país, en español y horarios AR.' },
    ],
  },

  'retail': {
    slug: 'retail',
    name: 'Retail',
    eyebrow: 'Producto · POS + Retail OS',
    status: { kind: 'beta', text: 'Beta · Q3 2026' },
    HeroVisual: HeroRetail,
    title: <>El sistema que <em>se siente</em> como tu mostrador.</>,
    sub: <>POS + stock + clientes + backoffice ERP para comercios y gastronomía. MODO, Mercado Pago, fidelización y multi-sucursal — en cualquier <em>tablet o PC</em>.</>,
    meta: [
      { label: 'Hardware', value: <>Tablet o <em>PC</em></> },
      { label: 'Medios de pago', value: <><em>9</em> integrados</> },
      { label: 'Plan mínimo', value: <><em>Negocio</em></> },
    ],
    features: [
      { icon: <IconCard/>, title: <>POS en <em>tablet</em> o PC</>,
        desc: 'Sin hardware especial ni licencias. Cualquier dispositivo con navegador. Interfaz tipo Erply Berlin, full español, optimizada para tablet en landscape.' },
      { icon: <IconBolt/>, title: <>9 medios de pago <em>argentinos</em></>,
        desc: 'MODO QR (interoperable), Mercado Pago, Google Pay, Tarjeta en cuotas (Galicia, Santander, BBVA, Naranja X, HSBC), Transferencia 3.0, Ualá, Rapipago, PagoFácil, Efectivo.' },
      { icon: <IconBox/>, title: <>Inventario en <em>tiempo real</em></>,
        desc: <>Multi-depósito, variantes, barras y transferencias entre <em>sucursales</em>.</> },
      { icon: <IconUsers/>, title: <>CRM + <em>fidelización</em></>,
        desc: <>Grupos VIP/Mayorista, puntos y historial — con DNI o <em>teléfono</em>.</> },
      { icon: <IconChart/>, title: <>Dashboard con <em>KPIs</em></>,
        desc: <>Ticket promedio, retención, AOV y top productos por medio de <em>pago</em>.</> },
      { icon: <IconFactura/>, title: <>Facturación <em>ARCA</em> integrada</>,
        desc: 'Cada venta puede generar su factura automáticamente. Sin doble carga ni errores de sincronización. Usa FacturaFácil internamente.' },
      { icon: <IconClock/>, title: <>Fichaje y <em>cajas</em></>,
        desc: <>Roles, clock in/out con PIN, multi-caja y cierre del <em>día</em>.</> },
      { icon: <IconBook/>, title: <>Backoffice <em>completo</em></>,
        desc: <>Libro IVA, plan de cuentas y exportación a Tango, Bejerman y <em>ARCA</em>.</> },
    ],
    extra: {
      eyebrow: 'Retail OS',
      mockKind: 'retail',
      title: <>Pensado para <em>comercios reales.</em></>,
      lede: <>Del mostrador al backoffice, en la operatoria de <em>Argentina</em>.</>,
      items: [
        <>Vista cliente (customer-facing <em>display</em>)</>,
        <>Cuotas sin interés por banco con <em>TNA</em></>,
        <>Devoluciones y store <em>credit</em></>,
        <>Apartados y pedidos para <em>retiro</em></>,
        <>Cupones, gift cards y promos <em>2×1</em></>,
        <>Listas de precios VIP / <em>Mayorista</em></>,
        <>Pago combinado efectivo + <em>tarjeta</em></>,
        <>Comanda para <em>gastronomía</em></>,
        <>API REST y <em>webhooks</em></>,
        <>Multi-tienda · cadena <em>retail</em></>,
      ]
    },
    integrations: [
      { name: 'MODO', note: 'QR interoperable' },
      { name: 'Mercado Pago', note: 'QR y cuotas' },
      { name: 'Google Pay', note: 'Billetera digital' },
      { name: 'Naranja X', note: 'Cuotas y QR' },
      { name: 'Ualá', note: 'Pagos app' },
      { name: 'Rapipago', note: 'Red de cobro' },
      { name: 'BCRA Transf. 3.0', note: 'Transferencias' },
      { name: 'ARCA', note: 'Factura en la venta' },
    ],
    plan: { name: 'Negocio / Estudio', priceLabel: 'desde $ 70.000', period: '/mes ARS', desc: <>Retail + multi-sucursal. Estudio: propuesta a <em>medida</em>.</>, custom: true },
    faqs: [
      { q: '¿Qué hardware necesito?', a: 'Una tablet Android/iPad o cualquier PC con navegador moderno. Opcional: lector de código de barras USB o por Bluetooth, impresora térmica de tickets, cajón portamonedas.' },
      { q: '¿Sirve para gastronomía?', a: 'Sí. Tiene comanda para cocina, control de mesas, delivery y combos. Soportamos cafetería, restaurante, panadería, rotisería.' },
      { q: '¿Funciona offline?', a: 'Modo offline limitado: podés seguir vendiendo en caja, los tickets se sincronizan cuando vuelve la conexión. Para emisión de CAE necesita internet (lo guarda como borrador).' },
      { q: '¿Cuántas cajas puedo abrir simultáneas?', a: 'Sin límite en plan Business. Cada caja tiene su empleado activo y su balance independiente.' },
      { q: '¿Trabajan en Córdoba y el interior?', a: 'Sí. Implementamos en Córdoba, CABA, GBA y el resto del país con soporte en español y horarios AR.' },
    ],
  },

  'agropecuario': {
    slug: 'agropecuario',
    name: 'Agropecuario',
    eyebrow: 'Producto · AgTech',
    status: { kind: 'beta', text: 'Beta · Q3 2026' },
    HeroVisual: HeroAgro,
    title: <>El campo merece más que una <em>planilla.</em></>,
    sub: 'Gestión integral para el productor moderno. Hacienda, cultivos, costos por ha y liquidaciones — con modo offline arriba de la cosechadora.',
    meta: [
      { label: 'Modo offline', value: 'Completo' },
      { label: 'SENASA DT-e', value: 'Integrado' },
      { label: 'Plan mínimo', value: 'Negocio' },
    ],
    features: [
      { icon: <IconBox/>, title: 'Lotes y potreros',
        desc: 'Siembra, labores, aplicaciones y cosecha por lote. Historial completo de cada potrero.' },
      { icon: <IconUsers/>, title: 'Hacienda completa',
        desc: 'Animales, sanidad, pesadas y DT-e SENASA con trazabilidad por tropa.' },
      { icon: <IconChart/>, title: 'Costo real por ha / cabeza',
        desc: 'Costo y margen bruto agrícola y ganadero por actividad, campaña y período.' },
      { icon: <IconGlobe/>, title: 'Registro climático',
        desc: 'Lluvias y condiciones por lote, correlacionadas con rendimientos.' },
      { icon: <IconBook/>, title: 'Liquidaciones',
        desc: 'Granos y hacienda en formato corredor y frigorífico, con conciliación automática.' },
      { icon: <IconBolt/>, title: 'Offline para el campo',
        desc: 'Registrás sin conexión desde celular o tablet. Sincroniza al recuperar señal.' },
      { icon: <IconCard/>, title: 'Contratistas',
        desc: 'Labores, cosecha y flete con control de deuda y pagos.' },
      { icon: <IconFactura/>, title: 'Integración con ARCA',
        desc: 'Facturas de granos o hacienda directo desde el sistema, sin planillas.' },
    ],
    extra: {
      eyebrow: 'Cumplimiento',
      mockKind: 'agro',
      title: <>Normativa del <em>campo.</em></>,
      lede: 'SENASA, liquidaciones y trazabilidad para el productor en Argentina.',
      items: [
        'SENASA DT-e (Documentos de Tránsito electrónicos)',
        'RENSPA por establecimiento',
        'Trazabilidad completa por animal',
        'Formato corredor de granos (Cámara Arbitral)',
        'Formato frigorífico para liquidación de hacienda',
        'Remitos R-1 y R-2',
        'Boleto de marca y señal',
        'Inventario físico al 31/12 de cada año',
      ]
    },
    integrations: [
      { name: 'SENASA DT-e', note: 'Carta de porte y tránsito digital' },
      { name: 'ARCA / AFIP', note: 'Facturación de granos y hacienda' },
      { name: 'Google Drive', note: 'Planillas y documentación' },
      { name: 'API REST', note: 'ERP, corredores y frigoríficos' },
    ],
    skillsSection: {
      eyebrow: 'Campo digital',
      title: <>Carta de porte digital y skills del <em>campo.</em></>,
      lede: 'Del potrero al destino: DT-e, liquidaciones y trazabilidad sin planillas sueltas. Integrado a SENASA, ARCA y tu operación.',
    },
    skills: [
      { tag: 'Carta de porte', icon: 'book', title: 'Carta de porte digital',
        desc: 'Emití y gestioná la documentación de transporte de granos y hacienda en digital, lista para el camino.' },
      { tag: 'SENASA', icon: 'shield', title: 'DT-e electrónico',
        desc: 'Documentos de Tránsito electrónicos con RENSPA y firma. Sin entrar a la web de SENASA a cada movimiento.' },
      { tag: 'Trazabilidad', icon: 'users', title: 'Trazabilidad por tropa',
        desc: 'Seguimiento de animales y partidas de origen a destino. Historial completo para auditoría y frigorífico.' },
      { tag: 'Granos', icon: 'box', title: 'Liquidaciones de granos',
        desc: 'Formato corredor (Cámara Arbitral) y conciliación de partidas. Menos ida y vuelta con el acopio.' },
      { tag: 'Hacienda', icon: 'chart', title: 'Liquidaciones de hacienda',
        desc: 'Formato frigorífico, pesos y liquidación. Datos listos para facturar en ARCA.' },
      { tag: 'Campo', icon: 'bolt', title: 'Offline + sync',
        desc: 'Cargá movimientos sin señal. Al recuperar cobertura, sincroniza DT-e y registros al instante.' },
    ],
    plan: { name: 'Negocio', priceLabel: 'desde $ 70.000', period: '/mes ARS', desc: 'Agro + onboarding multi-establecimiento. Estudio a medida.' },
    faqs: [
      { q: '¿Funciona sin internet?', a: 'Sí, modo offline completo en celular y tablet. Registrás siembras, labores, pesadas y movimientos sin conexión, y cuando volvés al pueblo o la casa, sincroniza automático.' },
      { q: '¿Soportan carta de porte digital y SENASA DT-e?', a: 'Sí. Generamos DT-e y documentación de tránsito digital desde el sistema con tu RENSPA y firma electrónica, sin tener que entrar a la web de SENASA en cada viaje.' },
      { q: '¿Sirve para mixto agrícola + ganadero?', a: 'Sí, es el caso más común. Los costos se asignan por actividad y los reportes salen separados o consolidados, como prefieras.' },
      { q: '¿Importa datos de mi planilla actual?', a: 'Sí, te ayudamos a migrar desde Excel, Megagro, AgroCRM o cualquier otro sistema. La migración asistida está incluida.' },
      { q: '¿Trabajan con productores en Córdoba y el interior?', a: 'Sí. Onboarding multi-establecimiento y soporte en Córdoba, Santa Fe, Buenos Aires y el resto del país agro.' },
    ],
  },

  'ecommerce': {
    slug: 'ecommerce',
    name: 'Commerce',
    eyebrow: 'Producto · Headless & Omnichannel',
    status: { kind: 'live', text: 'Disponible' },
    HeroVisual: HeroCommerce,
    title: <>E-commerce headless.<br/><em>Omnichannel</em> de verdad.</>,
    sub: <>La misma arquitectura que usamos en Autonex, Shine Bright y Basket Bliss: storefronts desacoplados, stock unificado y fulfillment multi-canal — conectado a facturación <em>ARCA</em> y a tu operación en Argentina.</>,
    meta: [
      { label: 'Arquitectura', value: <>Headless <em>API-first</em></> },
      { label: 'Canales', value: <>Web · App · <em>Marketplaces</em></> },
      { label: 'Plan mínimo', value: <>Negocio / <em>Estudio</em></> },
    ],
    features: [
      { icon: <IconGlobe/>, title: <>Storefronts <em>headless</em></>,
        desc: <>Frontends desacoplados (React, Next, storefront custom). El catálogo, carrito y checkout viven en <em>APIs</em> — no en un monolito.</> },
      { icon: <IconBox/>, title: <>Stock <em>unificado</em></>,
        desc: <>Un inventario para tienda física, web y marketplaces. Evitás overselling y sincronizás depósitos en <em>tiempo real</em>.</> },
      { icon: <IconBolt/>, title: <>OMS <em>omnichannel</em></>,
        desc: <>Órdenes de todos los canales en un solo panel. Enrutamiento a depósito, pick & pack y tracking al <em>cliente</em>.</> },
      { icon: <IconCard/>, title: <>Checkout y <em>pagos AR</em></>,
        desc: <>Mercado Pago, MODO, transferencias y cuotas. Conciliación con facturación electrónica vía <em>FacturaFácil</em>.</> },
      { icon: <IconUsers/>, title: <>Clientes y <em>CRM</em></>,
        desc: <>Perfil unificado online + offline. Historial, segmentos y recompra — el mismo cliente en <em>POS y web</em>.</> },
      { icon: <IconPlug/>, title: <>API y <em>webhooks</em></>,
        desc: <>Integrá ERP, WMS, marketplaces o tu app. REST + eventos. La base de proyectos headless de <em>marca</em>.</> },
      { icon: <IconChart/>, title: <>Analytics de <em>canal</em></>,
        desc: <>Conversión, AOV y margen por canal y por SKU. Se alimenta al <em>Dashboard BI</em> de la suite.</> },
      { icon: <IconFactura/>, title: <>Facturación <em>integrada</em></>,
        desc: <>Cada pedido puede emitir su factura <em>ARCA</em> automáticamente. Sin exportar CSVs ni cargar de nuevo.</> },
    ],
    extra: {
      eyebrow: 'Headless commerce',
      title: <>Como en <em>Shine Bright</em> y Basket Bliss.</>,
      lede: <>Storefronts headless reales + panel admin. Misma base <em>omnichannel</em> que usamos en producción.</>,
      shots: [
        { src: 'uploads/commerce-shine.png', alt: 'Landing Shine Bright — repuestos', cap: 'Shine Bright' },
        { src: 'uploads/commerce-dash.png', alt: 'Admin Commerce — resumen y pedidos', cap: 'Admin · panel' },
        { src: 'uploads/commerce-store.png', alt: 'Basket Bliss — home landing', cap: 'Basket Bliss' },
      ],
      items: [
        <>Catálogo multi-locale y multi-moneda listo para <em>escala</em></>,
        <>Promociones, cupones y bundles <em>por canal</em></>,
        <>Click & collect + envío a <em>domicilio</em></>,
        <>Marketplace connectors (ML y otros según <em>proyecto</em>)</>,
        <>CMS headless para contenido y landing de <em>marca</em></>,
        <>Roles por operación: marketing, depósito, <em>CX</em></>,
        <>Observabilidad de pedidos y SLAs de <em>fulfillment</em></>,
        <>Onboarding con equipo de implementación <em>PymeStudio</em></>,
      ]
    },
    integrations: [
      { name: 'Mercado Pago', note: 'Checkout y conciliación' },
      { name: 'MODO', note: 'Pagos con QR y app' },
      { name: 'ARCA / FacturaFácil', note: 'Facturación electrónica' },
      { name: 'API REST', note: 'Catálogo, stock y pedidos' },
      { name: 'Webhooks', note: 'Eventos en tiempo real' },
      { name: 'Google Analytics', note: 'Conversión y canales' },
    ],
    plan: { name: 'Negocio / Estudio', priceLabel: 'Propuesta a medida', period: 'contactá al equipo', desc: <>Commerce headless + OMS + onboarding. Alcance según <em>canales y volumen</em>.</> },
    faqs: [
      { q: '¿Es un Shopify más?', a: 'No. Es una capa headless y omnichannel pensada para PyMEs y marcas en Argentina: storefronts custom o plataformas existentes, con stock, POS y web en un solo sistema.' },
      { q: '¿Sirve si ya tengo Tiendanube o Shopify?', a: 'Sí. Podemos actuar como OMS y capa de stock unificado, o migrar a headless cuando el negocio lo pida — sin rehacer toda la operación de un día para el otro.' },
      { q: '¿Incluye facturación ARCA?', a: 'Sí, vía FacturaFácil. Cada pedido puede emitir factura electrónica ARCA (ex AFIP) automáticamente o en lote, con CAE real y PDF al cliente.' },
      { q: '¿Trabajan en Córdoba y el interior?', a: 'Sí. Implementamos en Córdoba, CABA, GBA, Rosario, Mendoza, Tucumán y el resto del país. Soporte en español, horarios AR y onboarding remoto o híbrido.' },
      { q: '¿Cómo se implementa?', a: 'Discovery + arquitectura + go-live por fases. Primero canales críticos, después el resto — con equipo local que entiende Mercado Pago, MODO y la operatoria argentina.' },
    ],
  },
};

// — Reusable page sections ——————————————————————————————————————

const DASHBI_APP = (typeof location !== 'undefined' && location.hostname.endsWith('pymestudio.com.ar'))
  ? 'https://dashbi.pymestudio.com.ar/'
  : 'https://dashbi.pymestudio.xyz/';

function ProductHero({ data, onSignup }) {
  const Visual = data.HeroVisual;
  const openSignup = (e) => {
    if (onSignup) { e.preventDefault(); onSignup(); }
  };
  const isBI = data.slug === 'dashboard-bi';
  return (
    <section className="hero hero--product">
      <div className="hero__inner">
        <div>
          <div className="prod-eyebrow-row">
            <span className="eyebrow" style={{color:'rgba(255,255,255,.65)'}}>{data.eyebrow}</span>
          </div>
          <h1 className="hero__title">{data.title}</h1>
          <p className="hero__sub">{data.sub}</p>
          <div className="hero__ctas">
            {isBI ? (
              <BtnK href={DASHBI_APP} target="_blank" rel="noopener noreferrer">Abrir Dashboard BI</BtnK>
            ) : (
              <BtnK href="#probar" onClick={openSignup}>Probar gratis</BtnK>
            )}
            {isBI ? (
              <BtnK href="#probar" variant="ghost" onClick={openSignup}>Probar gratis</BtnK>
            ) : (
              <BtnK href={GMAIL_SALES} variant="ghost" target="_blank" rel="noopener noreferrer">Hablar con el equipo</BtnK>
            )}
          </div>
          <div className="prod-hero-meta">
            {data.meta.map((m, i) => (
              <div key={i} className="prod-hero-meta-item">
                {m.label}
                <strong>{m.value}</strong>
              </div>
            ))}
          </div>
        </div>
        <div>
          <Visual/>
        </div>
      </div>
    </section>
  );
}

function ProductFeatures({ data }) {
  return (
    <section>
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Funcionalidades</span>
          <h2 className="section-title">
            Todo lo que <em>hace</em> {data.name}.
          </h2>
        </div>
        <div className="feat-grid reveal">
          {data.features.map((f, i) => (
            <div key={i} className="feat">
              <div className="feat__icon">{f.icon}</div>
              <h3 className="feat__title">{f.title}</h3>
              <p className="feat__desc">{f.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/** Visual mock cards when product has no real screenshots (Factura, BI, etc.) */
function ExtraMockShots({ kind }) {
  if (kind === 'factura') {
    return (
      <div className="extra-mix__shots">
        <figure className="extra-mix__shot extra-mix__shot--main extra-mix__shot--ui">
          <div className="stage-mock stage-mock--factura hero-stage__inner-mock">
            <div className="stage-mock__bar">
              <span className="stage-mock__bar-title">Factura A · 0001-00000128</span>
              <span className="stage-mock__pill stage-mock__pill--ok">CAE OK</span>
            </div>
            <div className="stage-mock__body">
              <div className="stage-mock__row">
                <div>
                  <div className="stage-mock__label">Cliente</div>
                  <div className="stage-mock__value">Lácteos del Sur S.A.</div>
                  <div className="stage-mock__muted">CUIT 30-71234567-8</div>
                </div>
                <div style={{textAlign:'right'}}>
                  <div className="stage-mock__label">Total</div>
                  <div className="stage-mock__value stage-mock__value--lg">$ 84.250</div>
                </div>
              </div>
              <div className="stage-mock__divider" />
              <div className="stage-mock__meta">
                <div><span className="stage-mock__label">CAE</span><div className="stage-mock__mono">70123456789012</div></div>
                <div><span className="stage-mock__label">ARCA</span><div className="stage-mock__mono" style={{color:'#7EE0A8'}}>~1.2s</div></div>
              </div>
            </div>
          </div>
          <figcaption className="extra-mix__shot-cap">Comprobante · live</figcaption>
        </figure>
        <figure className="extra-mix__shot extra-mix__shot--top extra-mix__shot--ui">
          <div className="extra-ui-card">
            <div className="extra-ui-card__h">Mercado Pago · lote</div>
            <div className="extra-ui-card__row"><span>12 cobros</span><span className="extra-ui-card__ok">listos</span></div>
            <div className="extra-ui-card__row"><span>Total</span><span>$ 428.900</span></div>
            <div className="extra-ui-card__btn">Emitir facturas</div>
          </div>
          <figcaption className="extra-mix__shot-cap">Lote · MP</figcaption>
        </figure>
        <figure className="extra-mix__shot extra-mix__shot--bot extra-mix__shot--ui">
          <div className="extra-ui-card">
            <div className="extra-ui-card__h">Deuda CCMA</div>
            <div className="extra-ui-card__big">$ 42.180</div>
            <div className="extra-ui-card__muted">Mono 020 · Autónomos 021</div>
            <div className="extra-ui-card__warn">3 períodos con saldo</div>
          </div>
          <figcaption className="extra-mix__shot-cap">CCMA · ARCA</figcaption>
        </figure>
      </div>
    );
  }
  if (kind === 'bi') {
    return (
      <div className="extra-mix__shots">
        <figure className="extra-mix__shot extra-mix__shot--main extra-mix__shot--ui">
          <div className="extra-ui-card extra-ui-card--tall">
            <div className="extra-ui-card__h">Overview · mayo</div>
            <div className="extra-ui-kpis">
              <div><span>Ventas</span><strong>$ 428k</strong></div>
              <div><span>Margen</span><strong>32%</strong></div>
              <div><span>CMV</span><strong className="warn">68%</strong></div>
            </div>
            <div className="extra-ui-bars">{[40,65,45,80,55,90,70].map((h,i)=><i key={i} style={{height:h+'%'}}/>)}</div>
          </div>
          <figcaption className="extra-mix__shot-cap">Dashboard · KPIs</figcaption>
        </figure>
        <figure className="extra-mix__shot extra-mix__shot--top extra-mix__shot--ui">
          <div className="extra-ui-card">
            <div className="extra-ui-card__h">Asesor IA</div>
            <p className="extra-ui-card__p">Renegociá el top proveedor (32% del CMV). Recuperás ~4 pp de margen.</p>
          </div>
          <figcaption className="extra-mix__shot-cap">IA · insight</figcaption>
        </figure>
        <figure className="extra-mix__shot extra-mix__shot--bot extra-mix__shot--ui">
          <div className="extra-ui-card">
            <div className="extra-ui-card__h">Forecast fiscal</div>
            <div className="extra-ui-card__big">3 meses</div>
            <div className="extra-ui-card__muted">IIBB · mono · IVA</div>
          </div>
          <figcaption className="extra-mix__shot-cap">Proyección</figcaption>
        </figure>
      </div>
    );
  }
  if (kind === 'retail') {
    return (
      <div className="extra-mix__shots">
        <figure className="extra-mix__shot extra-mix__shot--main extra-mix__shot--ui extra-mix__shot--dark">
          <div className="extra-ui-card extra-ui-card--dark extra-ui-card--tall">
            <div className="extra-ui-card__h">Ticket #00428</div>
            <div className="extra-ui-card__row"><span>×2 Remera M</span><span>$ 37.800</span></div>
            <div className="extra-ui-card__row"><span>×1 Pantalón</span><span>$ 32.400</span></div>
            <div className="extra-ui-card__row extra-ui-card__row--total"><span>Total</span><span>$ 80.000</span></div>
            <div className="extra-ui-card__btn">MODO QR</div>
          </div>
          <figcaption className="extra-mix__shot-cap">POS · caja</figcaption>
        </figure>
        <figure className="extra-mix__shot extra-mix__shot--top extra-mix__shot--ui">
          <div className="extra-ui-card">
            <div className="extra-ui-card__h">Stock multi-depósito</div>
            <div className="extra-ui-card__row"><span>Local centro</span><span className="extra-ui-card__ok">OK</span></div>
            <div className="extra-ui-card__row"><span>Depósito norte</span><span className="extra-ui-card__warn">6 bajos</span></div>
          </div>
          <figcaption className="extra-mix__shot-cap">Inventario</figcaption>
        </figure>
        <figure className="extra-mix__shot extra-mix__shot--bot extra-mix__shot--ui">
          <div className="extra-ui-card">
            <div className="extra-ui-card__h">Medios de pago</div>
            <div className="extra-ui-chips"><span>MODO</span><span>MP</span><span>Tarjeta</span><span>Efectivo</span></div>
          </div>
          <figcaption className="extra-mix__shot-cap">Pagos AR</figcaption>
        </figure>
      </div>
    );
  }
  if (kind === 'agro') {
    return (
      <div className="extra-mix__shots">
        <figure className="extra-mix__shot extra-mix__shot--main extra-mix__shot--ui extra-mix__shot--agro">
          <div className="extra-ui-card extra-ui-card--dark extra-ui-card--tall">
            <div className="extra-ui-card__h">Lote 7 · La Esperanza</div>
            <div className="extra-ui-card__big">148 ha</div>
            <div className="extra-ui-card__muted">Soja 25/26 · US$ 432 / ha</div>
            <div className="extra-ui-card__ok">Margen US$ 218 / ha</div>
          </div>
          <figcaption className="extra-mix__shot-cap">Lote · costos</figcaption>
        </figure>
        <figure className="extra-mix__shot extra-mix__shot--top extra-mix__shot--ui">
          <div className="extra-ui-card">
            <div className="extra-ui-card__h">Hacienda · cría</div>
            <div className="extra-ui-card__row"><span>Vacas</span><span>482</span></div>
            <div className="extra-ui-card__row"><span>Terneros</span><span>271</span></div>
          </div>
          <figcaption className="extra-mix__shot-cap">Rodeo</figcaption>
        </figure>
        <figure className="extra-mix__shot extra-mix__shot--bot extra-mix__shot--ui">
          <div className="extra-ui-card">
            <div className="extra-ui-card__h">SENASA DT-e</div>
            <div className="extra-ui-card__ok">Listo para emitir</div>
            <div className="extra-ui-card__muted">RENSPA sincronizado</div>
          </div>
          <figcaption className="extra-mix__shot-cap">Normativa</figcaption>
        </figure>
      </div>
    );
  }
  return null;
}

function ProductExtra({ data }) {
  if (!data.extra) return null;
  const shots = data.extra.shots;
  const mockKind = data.extra.mockKind;
  const eyebrow = data.extra.eyebrow || 'Detalle';
  const hasVisual = (shots && shots.length) || mockKind;
  return (
    <section className="prod-section" style={{paddingTop:0}}>
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">{eyebrow}</span>
          <h2 className="section-title">{data.extra.title}</h2>
          {data.extra.lede && <p className="lede">{data.extra.lede}</p>}
        </div>
        {hasVisual ? (
          <div className="extra-mix reveal">
            {shots && shots.length ? (
              <div className={'extra-mix__shots' + (shots.length >= 4 ? ' extra-mix__shots--4' : '')}>
                {shots.map((s, i) => (
                  <figure
                    key={i}
                    className={
                      'extra-mix__shot' +
                      (shots.length >= 4
                        ? ''
                        : i === 0
                          ? ' extra-mix__shot--main'
                          : i === 1
                            ? ' extra-mix__shot--top'
                            : ' extra-mix__shot--bot')
                    }
                  >
                    <img src={s.src} alt={s.alt || s.cap || ''} loading="lazy" decoding="async" />
                    {s.cap && <figcaption className="extra-mix__shot-cap">{s.cap}</figcaption>}
                  </figure>
                ))}
              </div>
            ) : (
              <ExtraMockShots kind={mockKind} />
            )}
            <ul className="extra-mix__list">
              {data.extra.items.map((it, i) => (
                <li key={i}>
                  <span>{String(i + 1).padStart(2, '0')}</span>
                  <span>{it}</span>
                </li>
              ))}
            </ul>
          </div>
        ) : (
          <ul className="feat-list reveal">
            {data.extra.items.map((it, i) => (
              <li key={i}><span>{it}</span></li>
            ))}
          </ul>
        )}
      </div>
    </section>
  );
}

function integrationIcon(name) {
  const n = (name || '').toLowerCase();
  if (n.includes('mercado') || n.includes('modo') || n.includes('pago') || n.includes('ualá') || n.includes('uala') || n.includes('naranja') || n.includes('rapipago') || n.includes('bcra') || n.includes('google pay')) return <IconCard size={20} />;
  if (n.includes('arca') || n.includes('factura') || n.includes('afip') || n.includes('padr')) return <IconFactura size={20} />;
  if (n.includes('senasa')) return <IconShield size={20} />;
  if (n.includes('api') || n.includes('rest') || n.includes('afipsdk') || n.includes('resend')) return <IconPlug size={20} />;
  if (n.includes('webhook') || n.includes('claude') || n.includes('anthropic')) return <IconBolt size={20} />;
  if (n.includes('analytics') || n.includes('drive') || n.includes('google')) return <IconChart size={20} />;
  if (n.includes('web') || n.includes('globe') || n.includes('commerce') || n.includes('oms')) return <IconGlobe size={20} />;
  return <IconPlug size={20} />;
}

/** Official-style brand marks for "Se conecta a" (Simple Icons / brand marks) */
function BrandLogo({ name }) {
  const n = (name || '').toLowerCase();
  if (n.includes('drive') || (n.includes('google') && !n.includes('pay'))) {
    return (
      <span className="brand-logo brand-logo--drive" title="Google Drive">
        <img src="uploads/brands/googledrive-color.svg" alt="" width="28" height="28" />
      </span>
    );
  }
  if (n.includes('mercado') || n.includes('mp')) {
    return (
      <span className="brand-logo brand-logo--mp" title="Mercado Pago">
        <img src="uploads/brands/mercadopago.svg" alt="" width="22" height="22" />
      </span>
    );
  }
  if (n.includes('resend')) {
    return (
      <span className="brand-logo brand-logo--resend" title="Resend">
        <img src="uploads/brands/resend.svg" alt="" width="20" height="20" />
      </span>
    );
  }
  if (n.includes('arca') || n.includes('afip')) {
    return (
      <span className="brand-logo brand-logo--arca" title="ARCA">
        <svg viewBox="0 0 32 32" aria-hidden="true">
          <rect x="2" y="2" width="28" height="28" rx="6" fill="#0B3D5C"/>
          <path fill="#fff" d="M8 22V10h3.1c2.4 0 3.9 1.2 3.9 3.15 0 1.35-.75 2.4-2 2.85L16.8 22h-2.5l-3.4-5.2H10.6V22H8zm2.6-7.35h.55c1.15 0 1.85-.55 1.85-1.45s-.7-1.4-1.85-1.4H10.6v2.85z"/>
          <path fill="#4CB8EA" d="M18.2 22 21 10h2.5L26.3 22h-2.45l-.45-2.1h-2.85L20.1 22h-1.9zm3.55-4.05h1.9l-.95-4.35-.95 4.35z"/>
        </svg>
      </span>
    );
  }
  if (n.includes('senasa')) {
    return (
      <span className="brand-logo brand-logo--senasa" title="SENASA">
        <svg viewBox="0 0 40 40" aria-hidden="true">
          <rect width="40" height="40" rx="10" fill="#1B5E20"/>
          <circle cx="20" cy="18" r="8" fill="none" stroke="#C8E6C9" strokeWidth="1.6"/>
          <path d="M14 18c1.2-3 3.2-5 6-5s4.8 2 6 5" fill="none" stroke="#81C784" strokeWidth="1.5" strokeLinecap="round"/>
          <path d="M12 26h16" stroke="#A5D6A7" strokeWidth="1.4" strokeLinecap="round"/>
          <text x="20" y="33" textAnchor="middle" fill="#E8F5E9" fontSize="6.5" fontFamily="system-ui,sans-serif" fontWeight="700">SENASA</text>
        </svg>
      </span>
    );
  }
  if (n.includes('api') || n.includes('rest')) {
    return (
      <span className="brand-logo brand-logo--api" title="API REST">
        <svg viewBox="0 0 32 32" aria-hidden="true">
          <rect width="32" height="32" rx="8" fill="#17335E"/>
          <path d="M8 16h16M16 8v16" stroke="#4CB8EA" strokeWidth="2" strokeLinecap="round"/>
          <circle cx="16" cy="16" r="5" fill="none" stroke="#fff" strokeWidth="1.6"/>
        </svg>
      </span>
    );
  }
  return (
    <span className="brand-logo brand-logo--generic">
      {integrationIcon(name)}
    </span>
  );
}

function skillIcon(key) {
  const k = (key || '').toLowerCase();
  if (k === 'chart') return <IconChart size={20} />;
  if (k === 'sparkle') return <IconSparkle size={20} />;
  if (k === 'users') return <IconUsers size={20} />;
  if (k === 'bolt') return <IconBolt size={20} />;
  if (k === 'clock') return <IconClock size={20} />;
  if (k === 'shield') return <IconShield size={20} />;
  if (k === 'plug') return <IconPlug size={20} />;
  if (k === 'box') return <IconBox size={20} />;
  if (k === 'book') return <IconBook size={20} />;
  if (k === 'factura') return <IconFactura size={20} />;
  if (k === 'globe') return <IconGlobe size={20} />;
  if (k === 'card') return <IconCard size={20} />;
  return <IconChart size={20} />;
}

/** Business skills — reemplaza Integraciones (BI, Agro, etc.) */
function ProductSkills({ data }) {
  const skills = data.skills || [];
  const list = (data.integrations || []).map((item) =>
    typeof item === 'string' ? { name: item, note: '' } : item
  );
  const sec = data.skillsSection || {};
  if (!skills.length) return null;
  return (
    <section className="skills-section">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">{sec.eyebrow || 'Business skills'}</span>
          <h2 className="section-title">
            {sec.title || <>Capacidades de negocio que <em>ya corren</em> en tu panel.</>}
          </h2>
          <p className="lede">
            {sec.lede || 'No es un tablero vacío: skills de CFO, compras, fiscal y operaciones entrenados con la operatoria real de PyMEs argentinas.'}
          </p>
        </div>
        <div className="skills-grid reveal">
          {skills.map((s, i) => (
            <div key={i} className="skill-card">
              <span className="skill-card__icon" aria-hidden="true">{skillIcon(s.icon)}</span>
              <div>
                {s.tag && <div className="skill-card__tag">{s.tag}</div>}
                <h3 className="skill-card__title">{s.title}</h3>
                <p className="skill-card__desc">{s.desc}</p>
              </div>
            </div>
          ))}
        </div>
        {list.length > 0 && (
          <div className="skills-stack reveal">
            <div className="skills-stack__label">Se conecta a</div>
            <div className="skills-stack__grid">
              {list.map((item, k) => (
                <div key={k} className="skills-stack__card">
                  <BrandLogo name={item.name} />
                  <div className="skills-stack__body">
                    <div className="skills-stack__name">{item.name}</div>
                    {item.note ? <div className="skills-stack__role">{item.note}</div> : null}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

function ProductIntegrations({ data }) {
  const isEcom = data.slug === 'ecommerce';
  const list = (data.integrations || []).map((item) =>
    typeof item === 'string' ? { name: item, note: '' } : item
  );
  return (
    <section className="int-section" style={{paddingTop:0}}>
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Integraciones</span>
          <h2 className="section-title">
            Compatible con el stack que <em>ya usás.</em>
          </h2>
          <p className="lede">
            {isEcom
              ? 'Pagos, facturación, analytics y APIs nativas. Sin rehacer tu operación ni forzar un ecosistema cerrado.'
              : 'Conectamos con las herramientas que ya usás en Argentina — sin fricción y sin lock-in.'}
          </p>
        </div>
        <div className="int-grid reveal">
          {list.map((item, k) => (
            <div key={k} className="int-card">
              <span className="int-card__icon" aria-hidden="true">{integrationIcon(item.name)}</span>
              <div className="int-card__body">
                <div className="int-card__name">{item.name}</div>
                {item.note ? <div className="int-card__note">{item.note}</div> : null}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/** Omnichannel stack — reemplaza el closing genérico en Commerce */
function ProductOmniStack() {
  const layers = [
    { icon: <IconGlobe size={22} />, t: 'Storefront', d: 'Web, app o headless custom' },
    { icon: <IconBox size={22} />, t: 'Stock unificado', d: 'Un inventario, todos los canales' },
    { icon: <IconBolt size={22} />, t: 'OMS', d: 'Pedidos, pick & pack y estados' },
    { icon: <IconFactura size={22} />, t: 'Facturación', d: 'ARCA vía FacturaFácil' },
  ];
  return (
    <section className="omni-section">
      <div className="container">
        <div className="omni-panel reveal">
          <div className="omni-panel__copy">
            <span className="eyebrow" style={{color:'rgba(250,250,250,.55)'}}>Stack omnichannel</span>
            <h2 className="omni-panel__title">
              Un stack para vender en <em>todos los canales.</em>
            </h2>
            <p className="omni-panel__desc">
              Storefront, inventario, OMS y facturación en la misma arquitectura.
              La base de Basket Bliss, Shine Bright y proyectos headless a medida.
            </p>
            <div style={{display:'flex', gap:12, flexWrap:'wrap', marginTop:24}}>
              <BtnK href={GMAIL_SALES} variant="light" target="_blank" rel="noopener noreferrer">Hablar con el equipo</BtnK>
              <BtnK href="index.html#precios" variant="ghost">Ver planes</BtnK>
            </div>
          </div>
          <div className="omni-panel__layers">
            {layers.map((l) => (
              <div key={l.t} className="omni-layer">
                <span className="omni-layer__icon">{l.icon}</span>
                <div>
                  <div className="omni-layer__t">{l.t}</div>
                  <div className="omni-layer__d">{l.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function ProductPlan({ data, onSignup }) {
  const isCustom = data.slug === 'ecommerce' || data.plan.custom;
  const openSignup = (e) => {
    if (onSignup) { e.preventDefault(); onSignup(); }
  };
  if (isCustom) {
    return (
      <section>
        <div className="container">
          <div className="plan-custom reveal">
            <div className="plan-custom__main">
              <span className="eyebrow" style={{color:'rgba(255,255,255,.55)'}}>Implementación</span>
              <h2 className="plan-custom__title">
                Proyecto a medida sobre plan <em>Negocio / Estudio.</em>
              </h2>
              <p className="plan-custom__desc">
                Alcance según canales, volumen y stack. Discovery, arquitectura y go-live por fases —
                sin pack genérico ni precio de vitrina. Córdoba, CABA y todo el país.
              </p>
              <ul className="plan-custom__points">
                <li><IconCheck size={16}/> Arquitectura headless alineada a tu operación</li>
                <li><IconCheck size={16}/> Integración con pagos, ARCA y sistemas existentes</li>
                <li><IconCheck size={16}/> Onboarding con el equipo de PymeStudio</li>
              </ul>
              <div style={{display:'flex', gap:12, marginTop:28, flexWrap:'wrap'}}>
                <BtnK href="#probar" variant="light" onClick={openSignup}>Solicitar propuesta</BtnK>
                <BtnK href="index.html#precios" variant="ghost">Ver planes base</BtnK>
              </div>
            </div>
            <aside className="plan-custom__aside">
              <div className="plan-custom__aside-label">Inversión</div>
              <div className="plan-custom__aside-title">Según alcance</div>
              <p className="plan-custom__aside-text">
                Cotizamos por canales, integraciones y timeline.
                Respuesta en días hábiles con roadmap claro.
              </p>
              <a className="plan-custom__aside-link" href={GMAIL_SALES} target="_blank" rel="noopener noreferrer">
                hola@pymestudio.xyz <IconArrowUpRight size={14}/>
              </a>
            </aside>
          </div>
        </div>
      </section>
    );
  }
  return (
    <section>
      <div className="container">
        <div className="plan-callout reveal">
          <div>
            <span className="eyebrow" style={{color:'rgba(255,255,255,.55)'}}>Plan</span>
            <h2 className="plan-callout__title">
              Incluido en el plan <em>{data.plan.name}.</em>
            </h2>
            <p className="plan-callout__desc" style={{color:'rgba(244,239,230,.7)', marginTop:18, maxWidth:'42ch', fontSize:16}}>
              {data.plan.desc}
            </p>
            <div style={{display:'flex', gap:12, marginTop:24, flexWrap:'wrap'}}>
              <BtnK href="index.html#precios" variant="light">Ver todos los planes</BtnK>
              <BtnK href="#probar" variant="ghost" onClick={openSignup}>Probar gratis</BtnK>
            </div>
          </div>
          <div className="plan-callout__price">
            <span className="eyebrow" style={{alignSelf:'flex-end', color:'rgba(255,255,255,.5)'}}>desde</span>
            <span className="plan-callout__price-num">{data.plan.priceLabel || ('$ ' + data.plan.price)}</span>
            <span className="plan-callout__price-period">{data.plan.period}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function ProductFAQ({ data }) {
  const [open, setOpen] = useStateProd(0);
  return (
    <section>
      <div className="container">
        <div className="section-head section-head--center reveal">
          <span className="eyebrow">Preguntas frecuentes</span>
          <h2 className="section-title">
            Lo que la gente <em>nos pregunta</em> antes de arrancar.
          </h2>
        </div>
        <div className="faq reveal">
          {data.faqs.map((f, i) => {
            const isOpen = i === open;
            return (
              <div key={i} className={"faq__item" + (isOpen ? ' open' : '')}>
                <button className="faq__btn" onClick={() => setOpen(isOpen ? -1 : i)}>
                  <span>{f.q}</span>
                  <span className="faq__toggle"><IconPlus size={14}/></span>
                </button>
                <div className="faq__panel" style={{maxHeight: isOpen ? 240 : 0}}>
                  <p className="faq__answer">{f.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/** Cobertura AR — SEO local + mensaje de servicio (todas las product pages) */
function ProductCoverageAR({ productName }) {
  const zones = [
    { t: 'Córdoba', d: 'Base y proyectos en la provincia' },
    { t: 'CABA & GBA', d: 'PyMEs, retail y estudios contables' },
    { t: 'Litoral', d: 'Rosario, Santa Fe y alrededores' },
    { t: 'Cuyo & NOA', d: 'Mendoza, Tucumán y más' },
    { t: 'Todo el país', d: 'Implementación remota y soporte AR' },
    { t: 'Stack local', d: 'ARCA, Mercado Pago, MODO y SENASA' },
  ];
  const label = productName || 'PymeStudio';
  return (
    <section className="cover-ar" style={{paddingTop:0}}>
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Argentina</span>
          <h2 className="section-title">
            {label} para PyMEs de <em>todo el país.</em>
          </h2>
          <p className="lede">
            Diseñado para la operatoria argentina: normativa local, medios de pago del día a día
            y un equipo que entiende Córdoba, Buenos Aires y el interior.
          </p>
        </div>
        <div className="cover-ar__grid reveal">
          {zones.map((z) => (
            <div key={z.t} className="cover-ar__card">
              <div className="cover-ar__t">{z.t}</div>
              <div className="cover-ar__d">{z.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function productBlurb(p) {
  if (typeof p.sub === 'string') {
    const i = p.sub.indexOf('.');
    return i > 0 ? p.sub.slice(0, i + 1) : p.sub;
  }
  if (p.blurb) return p.blurb;
  const blurbs = {
    'factura-facil': 'Facturación electrónica con CAE real de ARCA.',
    'dashboard-bi': 'Visibilidad financiera y asesor IA en tiempo real.',
    'retail': 'POS, stock y pagos para comercios y gastronomía.',
    'agropecuario': 'Campo, hacienda, costos por ha y modo offline.',
    'ecommerce': 'Headless omnichannel con stock y OMS unificado.',
  };
  return blurbs[p.slug] || (p.name + ' en la suite PymeStudio.');
}

function ProductCrossSell({ currentSlug }) {
  const others = Object.values(PRODUCTS).filter(p => p.slug !== currentSlug);
  const iconFor = (s) =>
    s === 'factura-facil' ? <IconFactura/>
    : s === 'dashboard-bi' ? <IconChart/>
    : s === 'retail' ? <IconCard/>
    : s === 'ecommerce' ? <IconGlobe/>
    : <IconBox/>;
  return (
    <section style={{paddingTop:0}}>
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Más productos</span>
          <h2 className="section-title">
            El resto de la <em>suite</em> PymeStudio.
          </h2>
        </div>
        <div className="cross reveal">
          {others.map((p) => (
            <a key={p.slug} href={p.slug + '.html'} className="cross__card">
              <div className="cross__card-icon">{iconFor(p.slug)}</div>
              <h3 className="cross__card-name">{p.name}</h3>
              <p className="cross__card-desc">{productBlurb(p)}</p>
              <span className="cross__card-link">Ver detalle <IconArrowUpRight size={14}/></span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function ProductPage({ slug }) {
  const data = PRODUCTS[slug];
  const [scrolled, setScrolled] = useStateProd(false);
  const [menuOpen, setMenuOpen] = useStateProd(false);
  const [modal, setModal] = useStateProd(null);
  useReveal();
  useEffectProd(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  useEffectProd(() => {
    document.body.style.overflow = (menuOpen || modal) ? 'hidden' : '';
  }, [menuOpen, modal]);

  const isCommerce = slug === 'ecommerce';
  const isFactura = slug === 'factura-facil';
  const isRetail = slug === 'retail';
  const isBI = slug === 'dashboard-bi';
  const isAgro = slug === 'agropecuario';
  // Retail: 'neon' | 'warm' | 'night' | 'led'
  const RETAIL_ATM = 'led';
  // Dashboard BI: 'signal' | 'matrix' | 'pulse'
  const BI_ATM = 'signal';
  const atmClass = isCommerce
    ? 'atmosphere atmosphere--commerce'
    : isFactura
      ? 'atmosphere atmosphere--factura'
      : isRetail
        ? 'atmosphere atmosphere--retail-' + RETAIL_ATM
        : isBI
          ? 'atmosphere atmosphere--bi-' + BI_ATM
          : isAgro
            ? 'atmosphere atmosphere--agro'
            : 'atmosphere atmosphere--stripes';
  const hasCustomAtm = isCommerce || isFactura || isRetail || isBI || isAgro;
  return (
    <React.Fragment>
      <div className={atmClass} aria-hidden="true">
        <div className="atmosphere__base" />
        {!hasCustomAtm && <div className="atmosphere__stripes" />}
        {isCommerce && (
          <div className="atmosphere__commerce-fx">
            <span className="atmosphere__orb-c atmosphere__orb-c--1" />
            <span className="atmosphere__orb-c atmosphere__orb-c--2" />
            <span className="atmosphere__orb-c atmosphere__orb-c--3" />
            <span className="atmosphere__mesh" />
            <span className="atmosphere__sheen" />
          </div>
        )}
        {isFactura && (
          <div className="atmosphere__factura-fx">
            <span className="atmosphere__orb-f atmosphere__orb-f--1" />
            <span className="atmosphere__orb-f atmosphere__orb-f--2" />
            <span className="atmosphere__orb-f atmosphere__orb-f--3" />
            <span className="atmosphere__ticket" />
            <span className="atmosphere__paper-sheen" />
            <div className="atmosphere__cae-codes">
              <span>CAE 70123456789012</span>
              <span>0001-00000128</span>
              <span>wsfe v1 · OK</span>
              <span>IVA 21% · RI</span>
              <span>PDF · enviado</span>
            </div>
          </div>
        )}
        {isRetail && (
          <div className="atmosphere__retail-fx">
            <span className="atmosphere__orb-r atmosphere__orb-r--1" />
            <span className="atmosphere__orb-r atmosphere__orb-r--2" />
            <span className="atmosphere__orb-r atmosphere__orb-r--3" />
            {RETAIL_ATM === 'neon' && <span className="atmosphere__retail-scan" />}
            {RETAIL_ATM === 'warm' && (
              <span className="atmosphere__retail-bokeh">
                <i/><i/><i/><i/><i/><i/>
              </span>
            )}
            {RETAIL_ATM === 'night' && (
              <span className="atmosphere__retail-rings">
                <span/><span/><span/>
              </span>
            )}
            {RETAIL_ATM === 'led' && <span className="atmosphere__retail-barcode" />}
            <span className="atmosphere__retail-sheen" />
          </div>
        )}
        {isBI && (
          <div className="atmosphere__bi-fx">
            <span className="atmosphere__orb-b atmosphere__orb-b--1" />
            <span className="atmosphere__orb-b atmosphere__orb-b--2" />
            <span className="atmosphere__orb-b atmosphere__orb-b--3" />
            <span className="atmosphere__bi-grid" />
            <span className="atmosphere__bi-bars">
              <i/><i/><i/><i/><i/><i/><i/><i/><i/><i/>
            </span>
            {BI_ATM === 'matrix' && (
              <div className="atmosphere__bi-rain">
                <span>margen 32.4%</span>
                <span>cmv ↓ 2.1pp</span>
                <span>alert · proveedor</span>
                <span>forecast +3m</span>
                <span>break-even ok</span>
              </div>
            )}
            {BI_ATM === 'pulse' && (
              <span className="atmosphere__bi-pulse-ring">
                <span/><span/><span/>
              </span>
            )}
            <span className="atmosphere__bi-sheen" />
          </div>
        )}
        {isAgro && (
          <div className="atmosphere__agro-fx">
            <span className="atmosphere__orb-a atmosphere__orb-a--1" />
            <span className="atmosphere__orb-a atmosphere__orb-a--2" />
            <span className="atmosphere__orb-a atmosphere__orb-a--3" />
            <span className="atmosphere__agro-field" />
            <span className="atmosphere__agro-rows" />
            <span className="atmosphere__agro-sheen" />
          </div>
        )}
        {!hasCustomAtm && (
          <React.Fragment>
            <div className="atmosphere__glow atmosphere__glow--1" />
            <div className="atmosphere__glow atmosphere__glow--2" />
            <div className="atmosphere__glow atmosphere__glow--3" />
          </React.Fragment>
        )}
        <div className="atmosphere__vignette" />
      </div>
      <Nav
        onOpenMenu={() => setMenuOpen(true)}
        scrolled={scrolled}
        onLogin={() => setModal('login')}
        onSignup={() => setModal('signup')}
      />
      <Drawer
        open={menuOpen}
        onClose={() => setMenuOpen(false)}
        onLogin={() => setModal('login')}
        onSignup={() => setModal('signup')}
      />
      <LoginModal
        open={modal === 'login'}
        onClose={() => setModal(null)}
        onSwitch={() => setModal('signup')}
      />
      <SignupModal
        open={modal === 'signup'}
        onClose={() => setModal(null)}
        onSwitch={() => setModal('login')}
      />
      <main className="page">
        <ProductHero data={data} onSignup={() => setModal('signup')}/>
        <div className="content-box">
          <ProductFeatures data={data}/>
          <ProductExtra data={data}/>
          {isCommerce && <ProductOmniStack/>}
          {(isBI || isAgro) ? <ProductSkills data={data}/> : <ProductIntegrations data={data}/>}
          <ProductPlan data={data} onSignup={() => setModal('signup')}/>
          <ProductFAQ data={data}/>
          <ProductCoverageAR productName={data.name}/>
          {!isCommerce && <ProductCrossSell currentSlug={slug}/>}
          <Closing onSignup={() => setModal('signup')}/>
          <Footer/>
        </div>
      </main>
    </React.Fragment>
  );
}

// Fix Nav links so they point back home from product pages
// (existing Nav uses # anchors which won't work cross-page; we patch by
//  making the logo a real href to / )
window.mountProductPage = function(slug) {
  ReactDOM.createRoot(document.getElementById('root')).render(<ProductPage slug={slug}/>);
};