// --- BUNDLED FROM components\icons.jsx ---
// Icon set — inline SVGs, current color, 1.6 stroke.
const Icon = ({ name, size = 16, stroke = 1.6 }) => {
  const props = {
    width: size, height: size,
    viewBox: '0 0 24 24',
    fill: 'none',
    stroke: 'currentColor',
    strokeWidth: stroke,
    strokeLinecap: 'round',
    strokeLinejoin: 'round'
  };
  const paths = {
    dashboard: <><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></>,
    map: <><polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21 3 6"/><line x1="9" y1="3" x2="9" y2="18"/><line x1="15" y1="6" x2="15" y2="21"/></>,
    scan: <><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><line x1="7" y1="12" x2="17" y2="12"/></>,
    box: <><path d="M21 8L12 3 3 8v8l9 5 9-5V8z"/><path d="M3 8l9 5 9-5"/><path d="M12 13v8"/></>,
    chart: <><path d="M3 3v18h18"/><path d="M7 14l4-4 3 3 5-6"/></>,
    clock: <><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15 14"/></>,
    users: <><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></>,
    settings: <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h0a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v0a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></>,
    truck: <><rect x="1" y="6" width="14" height="11" rx="1"/><path d="M15 9h4l3 3v5h-7"/><circle cx="6" cy="19" r="2"/><circle cx="18" cy="19" r="2"/></>,
    arrow: <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="13 6 19 12 13 18"/></>,
    plus: <><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></>,
    wifi: <><path d="M5 12.55a11 11 0 0 1 14 0"/><path d="M1.42 9a16 16 0 0 1 21.16 0"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><line x1="12" y1="20" x2="12.01" y2="20"/></>,
    offline: <><line x1="1" y1="1" x2="23" y2="23"/><path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55"/><path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39"/><path d="M10.71 5.05A16 16 0 0 1 22.58 9"/><path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><line x1="12" y1="20" x2="12.01" y2="20"/></>,
  };
  return <svg {...props}>{paths[name]}</svg>;
};

window.Icon = Icon;


// --- BUNDLED FROM components\header.jsx ---
// Top construction bar + sticky nav
const BetaBar = () => (
  <div className="beta-bar">
    <div className="container beta-bar-content">
      <span className="beta-dot"></span>
      <span>Proyecto en construcción</span>
      <span className="beta-sep">·</span>
      <span>Beta estimada a inicios de 2027</span>
      <span className="beta-sep">·</span>
      <span>50 cupos fundadores</span>
    </div>
  </div>
);

const Header = () => (
  <header className="nav">
    <div className="container nav-inner">
      <a href="#top" className="brand">
        <span className="brand-mark">Elyce</span>
        <span className="brand-sub">Warehouse Management</span>
      </a>
      <ul className="nav-links">
        <li><a href="#manifiesto" className="nav-link">Manifiesto</a></li>
        <li><a href="#producto" className="nav-link">Producto</a></li>
        <li><a href="#capacidades" className="nav-link">Capacidades</a></li>
        <li><a href="#roadmap" className="nav-link">Roadmap</a></li>
        <li><a href="#cupos" className="nav-link">Precios</a></li>
        <li className="nav-cta">
          <a href="#waitlist" className="btn btn-primary" style={{padding: '10px 18px', fontSize: 13}}>
            Reservar cupo
            <span className="btn-arrow">→</span>
          </a>
        </li>
      </ul>
    </div>
  </header>
);

window.BetaBar = BetaBar;
window.Header = Header;


// --- BUNDLED FROM components\hero.jsx ---
const Hero = () => (
  <section className="hero" id="top">
    <div className="container">
      <div className="hero-meta reveal">
        <div className="hero-meta-item">
          <span className="eyebrow eyebrow-strong">v0.4 · en construcción</span>
        </div>
        <div className="hero-meta-item">
          <span className="eyebrow">·</span>
          <span className="eyebrow">Concepción, Chile</span>
        </div>
        <div className="hero-meta-item">
          <span className="eyebrow">·</span>
          <span className="eyebrow">Proyecto independiente · desde 2025</span>
        </div>
      </div>

      <h1 className="hero-wordmark reveal" data-delay="1">Elyce</h1>

      <div className="hero-tagline reveal" data-delay="2">
        <span>Warehouse Management System</span>
        <span>Construido desde la bodega, no desde la oficina.</span>
      </div>

      <div className="hero-statement">
        <div className="hero-statement-text reveal" data-delay="3">
          El primer WMS pensado <em>para PyMEs</em> que <em>no quieren un ERP</em>. Inventario en tiempo real, escaneo con la cámara del celular, mapa 2D de bodega y modo offline real.
        </div>
        <aside className="hero-aside reveal" data-delay="4">
          <div>
            <div className="eyebrow hero-aside-label">Para</div>
            <p className="hero-aside-text">Ferreterías, mini-markets, e-commerce y distribuidoras con bodegas de 50 a 2.000 SKUs.</p>
          </div>
          <div>
            <div className="eyebrow hero-aside-label">Por qué importa</div>
            <p className="hero-aside-text">Porque el WMS no debería costar más caro que tu bodega.</p>
          </div>
        </aside>
      </div>

      <div className="hero-cta reveal" data-delay="4">
        <a href="#waitlist" className="btn btn-primary">
          Reservar cupo fundador
          <span className="btn-arrow">→</span>
        </a>
        <a href="#producto" className="btn btn-ghost">
          Ver el producto
        </a>
      </div>

      <div className="hero-stats reveal">
        <div>
          <div className="hero-stat-num">50</div>
          <div className="hero-stat-label">cupos fundadores totales</div>
        </div>
        <div>
          <div className="hero-stat-num">$0</div>
          <div className="hero-stat-label">durante toda la beta</div>
        </div>
        <div>
          <div className="hero-stat-num">∞</div>
          <div className="hero-stat-label">modo offline real</div>
        </div>
        <div>
          <div className="hero-stat-num">1</div>
          <div className="hero-stat-label">propósito · la bodega</div>
        </div>
      </div>
    </div>
  </section>
);

window.Hero = Hero;


// --- BUNDLED FROM components\manifesto.jsx ---
const Manifesto = () => (
  <section className="section section-paper" id="manifiesto">
    <div className="container">
      <div className="section-header reveal">
        <div className="eyebrow">— 01 / Manifiesto</div>
        <h2 className="h-section">Una bodega no es una <em className="serif-italic" style={{color: 'var(--primary)'}}>hoja de cálculo</em>.</h2>
      </div>

      <div className="manifesto-grid">
        <div className="manifesto-quote reveal">
          “Elyce nació viendo a mi mamá pelear con planillas para llevar el stock de su negocio. Los WMS buenos eran <em>caros y complicados</em>, hechos para empresas gigantes. Decidí construir el que ella —y miles como ella— necesitaba.”
        </div>
        <div className="manifesto-body reveal" data-delay="1">
          <p>Cuando me puse a buscar un sistema de bodega para una PyME en Chile, me encontré con dos realidades. La primera: los WMS de verdad —los que usan Walmart, DHL, las cadenas de retail grandes— son <strong style={{color: 'var(--primary)'}}>carísimos</strong>, requieren implementación de meses y necesitan equipos de TI dedicados.</p>
          <p>La segunda: los "módulos de inventario" que vienen dentro de ERPs como Defontana o Bsale son baratos pero <strong style={{color: 'var(--primary)'}}>no fueron pensados para la bodega</strong>. Están diseñados para que el contador cuadre el balance, no para que el operador encuentre el producto.</p>
          <p>Entre los dos no había nada para la PyME chilena promedio. Así que me senté a construirlo. Elyce hace una sola cosa y la hace bien: <strong style={{color: 'var(--primary)'}}>gestionar tu bodega</strong>. Sin módulo contable. Sin POS. Sin facturación. Sin features que nunca vas a usar.</p>

          <div className="manifesto-sign">
            <div className="sign-mark">M</div>
            <div>
              <div style={{fontSize: 14, color: 'var(--ink)', fontWeight: 500}}>Matías Martínez · creador de Elyce</div>
              <div style={{fontSize: 12, color: 'var(--muted)', fontFamily: 'var(--mono)', marginTop: 2}}>Concepción, Chile · 2025 — presente</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

window.Manifesto = Manifesto;


// --- BUNDLED FROM components\preview.jsx ---
// Mock of the WMS dashboard — desktop + phone scanner
const Preview = () => (
  <section className="section" id="producto">
    <div className="container">
      <div className="section-header reveal">
        <div className="eyebrow">— 02 / El producto</div>
        <h2 className="h-section">Lo que vas a ver cuando <em className="serif-italic" style={{color: 'var(--primary)'}}>abras Elyce</em> por primera vez.</h2>
      </div>

      <div className="preview-wrap reveal">
        <div className="preview-frame">
          <div className="preview-chrome">
            <span className="chrome-dot"></span>
            <span className="chrome-dot"></span>
            <span className="chrome-dot"></span>
            <span className="chrome-url">app.elyce.io  ·  Bodega Central — Concepción</span>
          </div>

          <div className="preview-screen">
            {/* Sidebar */}
            <aside className="app-side">
              <div className="app-side-brand">
                <div className="app-side-brand-mark">E</div>
                <span className="app-side-brand-name">Elyce</span>
              </div>
              <div className="app-side-label">Operación</div>
              <div className="app-side-item active"><Icon name="dashboard" size={15}/> Dashboard</div>
              <div className="app-side-item"><Icon name="map" size={15}/> Mapa 2D</div>
              <div className="app-side-item"><Icon name="scan" size={15}/> Escanear</div>
              <div className="app-side-item"><Icon name="box" size={15}/> Productos</div>
              <div className="app-side-item"><Icon name="truck" size={15}/> Pedidos</div>
              <div className="app-side-divider"></div>
              <div className="app-side-label">Análisis</div>
              <div className="app-side-item"><Icon name="chart" size={15}/> Kardex</div>
              <div className="app-side-item"><Icon name="clock" size={15}/> Conteo cíclico</div>
              <div className="app-side-item"><Icon name="users" size={15}/> Equipo</div>
            </aside>

            {/* Main */}
            <main className="app-main">
              <div className="app-main-top">
                <div>
                  <div className="app-main-title">Buenos días, Matías</div>
                  <div className="app-main-sub">MAR 22 MAY · BODEGA CENTRAL · 4 OPERADORES ACTIVOS</div>
                </div>
                <div style={{display: 'flex', gap: 8, alignItems: 'center', fontSize: 12, color: 'var(--muted)', fontFamily: 'var(--mono)'}}>
                  <span style={{width: 7, height: 7, borderRadius: '50%', background: 'var(--accent)'}}></span>
                  EN LÍNEA
                </div>
              </div>

              <div className="app-stats-row">
                <div className="app-stat">
                  <div className="app-stat-label">SKUs activos</div>
                  <div className="app-stat-value">1.284</div>
                  <div className="app-stat-delta">+ 18 esta semana</div>
                </div>
                <div className="app-stat">
                  <div className="app-stat-label">Pedidos hoy</div>
                  <div className="app-stat-value">42</div>
                  <div className="app-stat-delta">+ 12% vs. ayer</div>
                </div>
                <div className="app-stat">
                  <div className="app-stat-label">Stock crítico</div>
                  <div className="app-stat-value" style={{color: '#c97373'}}>7</div>
                  <div className="app-stat-delta down">requiere atención</div>
                </div>
              </div>

              <div className="app-map">
                <div className="app-map-head">
                  <div className="app-map-title">Bodega Central — Vista 2D</div>
                  <div style={{fontSize: 10, color: 'var(--muted)', fontFamily: 'var(--mono)'}}>5 PASILLOS · 40 UBIC.</div>
                </div>
                <div className="app-map-grid">
                  {/* Row 1 */}
                  <div className="cell full"></div><div className="cell full"></div><div className="cell"></div><div className="cell aisle"></div><div className="cell full"></div><div className="cell warn"></div><div className="cell full"></div><div className="cell"></div>
                  {/* Row 2 */}
                  <div className="cell full"></div><div className="cell"></div><div className="cell full"></div><div className="cell aisle"></div><div className="cell full"></div><div className="cell full"></div><div className="cell empty"></div><div className="cell full"></div>
                  {/* Row 3 */}
                  <div className="cell aisle"></div><div className="cell aisle"></div><div className="cell aisle"></div><div className="cell aisle"></div><div className="cell aisle"></div><div className="cell aisle"></div><div className="cell aisle"></div><div className="cell aisle"></div>
                  {/* Row 4 */}
                  <div className="cell full"></div><div className="cell warn"></div><div className="cell"></div><div className="cell aisle"></div><div className="cell empty"></div><div className="cell full"></div><div className="cell full"></div><div className="cell"></div>
                  {/* Row 5 */}
                  <div className="cell"></div><div className="cell full"></div><div className="cell full"></div><div className="cell aisle"></div><div className="cell full"></div><div className="cell full"></div><div className="cell warn"></div><div className="cell full"></div>
                </div>
                <div style={{display: 'flex', gap: 14, fontSize: 10, fontFamily: 'var(--mono)', color: 'var(--muted)', marginTop: 4}}>
                  <span><span style={{display: 'inline-block', width: 8, height: 8, borderRadius: 2, background: 'var(--accent)', marginRight: 5, verticalAlign: 'middle'}}></span>OCUPADO</span>
                  <span><span style={{display: 'inline-block', width: 8, height: 8, borderRadius: 2, background: '#f4d35e', marginRight: 5, verticalAlign: 'middle'}}></span>BAJO</span>
                  <span><span style={{display: 'inline-block', width: 8, height: 8, borderRadius: 2, background: 'var(--surface)', marginRight: 5, verticalAlign: 'middle'}}></span>PARCIAL</span>
                  <span><span style={{display: 'inline-block', width: 8, height: 8, borderRadius: 2, background: 'var(--bg)', border: '1px dashed var(--rule)', marginRight: 5, verticalAlign: 'middle'}}></span>VACÍO</span>
                </div>
              </div>
            </main>

            {/* Right rail — activity */}
            <aside className="app-rail">
              <div className="app-rail-title">Actividad en vivo</div>
              <div className="activity-row">
                <span className="activity-dot in"></span>
                <div style={{flex: 1}}>
                  <div className="activity-text">Recepción · 24 cajas de <strong>Aceite Maravilla 1L</strong></div>
                  <div className="activity-time">HACE 2 MIN · CAROLINA P.</div>
                </div>
              </div>
              <div className="activity-row">
                <span className="activity-dot"></span>
                <div style={{flex: 1}}>
                  <div className="activity-text">Picking pedido #2841 · 6 ítems · A-04</div>
                  <div className="activity-time">HACE 6 MIN · JAVIER S.</div>
                </div>
              </div>
              <div className="activity-row">
                <span className="activity-dot warn"></span>
                <div style={{flex: 1}}>
                  <div className="activity-text">Stock bajo · <strong>Detergente Líquido 3L</strong> · 4 uds.</div>
                  <div className="activity-time">HACE 11 MIN · ALERTA AUTOM.</div>
                </div>
              </div>
              <div className="activity-row">
                <span className="activity-dot"></span>
                <div style={{flex: 1}}>
                  <div className="activity-text">Reubicación · 12 uds. de B-12 a A-07</div>
                  <div className="activity-time">HACE 18 MIN · MATÍAS M.</div>
                </div>
              </div>
              <div className="activity-row">
                <span className="activity-dot in"></span>
                <div style={{flex: 1}}>
                  <div className="activity-text">Conteo cíclico finalizado · zona A · ±0,3%</div>
                  <div className="activity-time">HOY 09:14 · EQUIPO</div>
                </div>
              </div>
            </aside>
          </div>
        </div>

        {/* Floating mobile scanner */}
        <div className="preview-mobile">
          <div className="preview-mobile-screen">
            <div className="mobile-cam-view">
              <div className="mobile-reticle"><span></span></div>
              <div className="mobile-scanline"></div>
              <div className="mobile-tag">
                <span>SKU LEÍDO</span>
                <strong>7804-122-019</strong>
              </div>
            </div>
            <div className="mobile-status">
              <span style={{display: 'flex', alignItems: 'center', gap: 6, color: 'var(--ink-soft)'}}>
                <span className="mobile-status-dot"></span>
                A-04 · estante 3
              </span>
              <span style={{fontFamily: 'var(--mono)', color: 'var(--muted)', fontSize: 10}}>+ INGRESAR</span>
            </div>
          </div>
        </div>
      </div>

      <p className="body-text reveal" style={{marginTop: 80, fontSize: 14, textAlign: 'center', color: 'var(--muted)', fontFamily: 'var(--mono)', letterSpacing: '0.08em'}}>
        ↑ INTERFAZ DE TRABAJO · NO ES UN MOCKUP PROMOCIONAL · SUJETA A CAMBIOS DURANTE BETA
      </p>
    </div>
  </section>
);

window.Preview = Preview;


// --- BUNDLED FROM components\features.jsx ---
const FEATURES = [
  {
    n: '01', title: 'Escaneo con la cámara del celular', status: 'Listo',
    desc: 'Sin pistola lectora cara. Usas el celular para ingresar, mover, contar o retirar stock. El QR responde en milisegundos y se queda en la cola si no hay internet.'
  },
  {
    n: '02', title: 'Mapa 2D interactivo de tu bodega', status: 'Listo',
    desc: 'Dibuja tu bodega como es realmente —pasillos, estantes, ubicaciones— y mueve productos arrastrando. Ver dónde está cada SKU pasa de tomar minutos a tomar un golpe de vista.'
  },
  {
    n: '03', title: 'Modo offline real (no es marketing)', status: 'Listo',
    desc: 'Las bodegas tienen señal mala. Elyce opera 100% sin conexión: cada acción se encola y sincroniza automáticamente al volver a estar online. Sin pérdida de datos, sin duplicados.'
  },
  {
    n: '04', title: 'Conteo cíclico guiado', status: 'Listo',
    desc: 'Programa auditorías por zona, por familia o por rotación. La app guía al operador, calcula diferencias y propone ajustes que apruebas con un toque.'
  },
  {
    n: '05', title: 'Kardex en tiempo real', status: 'Listo',
    desc: 'Cada movimiento queda registrado con su responsable, ubicación y momento exacto. Auditas los últimos 30 días desde el celular o exportas a Excel para tu contador.'
  },
  {
    n: '06', title: 'Multiplataforma · misma cuenta', status: 'Listo',
    desc: 'Android, iOS, Windows, macOS y Web. Cada operador usa lo que tiene a mano y todos ven el mismo inventario actualizado en tiempo real.'
  },
  {
    n: '07', title: 'Alertas de stock bajo + sugerencia de reposición', status: 'En curso',
    desc: 'Defines un mínimo por SKU y Elyce te avisa antes de la rotura. Próximamente: sugerencia automática de pedido al proveedor en base a rotación.'
  },
  {
    n: '08', title: 'Picking por lotes (batch) y FEFO', status: 'En curso',
    desc: 'Agrupa múltiples pedidos en una sola ruta de picking. La app prioriza ubicaciones con lote más antiguo o próximo a vencer cuando aplica.'
  },
  {
    n: '09', title: 'Integración Mercado Libre + Jumpseller', status: 'Planeado',
    desc: 'Sincronización bidireccional de stock y pedidos con tus canales de venta. Sin actualizar planillas manualmente, nunca más.'
  },
  {
    n: '10', title: 'Guía de Despacho Electrónica SII', status: 'Planeado',
    desc: 'Emisión directa de DTE para traslados de mercancía. Sin tener que pasar por un ERP externo o salir a buscar el portal del SII.'
  },
];

const Features = () => (
  <section className="section section-paper" id="capacidades">
    <div className="container">
      <div className="section-header reveal">
        <div className="eyebrow">— 03 / Capacidades</div>
        <h2 className="h-section">Diez funciones — <em className="serif-italic" style={{color: 'var(--primary)'}}>cero relleno</em>.</h2>
      </div>

      <p className="lede reveal" data-delay="1" style={{marginBottom: 60}}>
        Cada item está marcado con su estado real de desarrollo. Sin promesas de marketing: lo que está listo está listo, lo que está en curso lo verás en las próximas semanas.
      </p>

      <div className="feature-list">
        {FEATURES.map((f, i) => (
          <div className="feature-row reveal" key={f.n} data-delay={Math.min(i % 4, 3)}>
            <div className="feature-num">— {f.n}</div>
            <h3 className="feature-title">{f.title}</h3>
            <p className="feature-desc">{f.desc}</p>
            <span className={`feature-status ${f.status === 'En curso' ? 'coming' : ''} ${f.status === 'Planeado' ? 'planned' : ''}`}>
              {f.status === 'Listo' && '● '}
              {f.status === 'En curso' && '◐ '}
              {f.status === 'Planeado' && '○ '}
              {f.status}
            </span>
          </div>
        ))}
      </div>
    </div>
  </section>
);

window.Features = Features;


// --- BUNDLED FROM components\roadmap.jsx ---
const ROADMAP = [
  {
    q: 'Q3 2026', stage: 'En construcción',
    progress: '6 de 8',
    items: [
      { s: 'done', t: 'Escaneo QR con cámara' },
      { s: 'done', t: 'Mapa 2D + drag & drop' },
      { s: 'done', t: 'Modo offline + cola sync' },
      { s: 'done', t: 'Conteo cíclico guiado' },
      { s: 'done', t: 'Kardex tiempo real' },
      { s: 'done', t: 'Apps móvil + escritorio' },
      { s: 'doing', t: 'Reportes exportables a Excel' },
      { s: 'doing', t: 'Multi-bodega real' },
    ]
  },
  {
    q: 'Q4 2026', stage: 'Cierre de core',
    progress: '0 de 6',
    items: [
      { s: 'todo', t: 'Alertas push de stock bajo' },
      { s: 'todo', t: 'Batch picking · agrupar pedidos' },
      { s: 'todo', t: 'Enforcement FIFO / FEFO en picking' },
      { s: 'todo', t: 'Dashboard operacional con KPIs' },
      { s: 'todo', t: 'Permisos por rol granular' },
      { s: 'todo', t: 'Onboarding primeros 5 clientes prueba' },
    ]
  },
  {
    q: 'Q1 2027', stage: 'Beta abierta',
    progress: '0 de 6',
    items: [
      { s: 'todo', t: 'Apertura de cupos fundadores' },
      { s: 'todo', t: 'Maestro de proveedores + OC' },
      { s: 'todo', t: 'Recepción contra orden de compra' },
      { s: 'todo', t: 'Integración Chilexpress + Starken' },
      { s: 'todo', t: 'Estación de packing scan-to-pack' },
      { s: 'todo', t: 'Variantes de producto (talla/color)' },
    ]
  },
  {
    q: 'Q3 2027', stage: 'Lanzamiento público',
    progress: '0 de 5',
    items: [
      { s: 'todo', t: 'Sincronización Mercado Libre' },
      { s: 'todo', t: 'Sincronización Jumpseller + WooCommerce' },
      { s: 'todo', t: 'DTE SII Chile (guía de despacho)' },
      { s: 'todo', t: 'API REST pública + webhooks' },
      { s: 'todo', t: 'Activación de planes de pago' },
    ]
  },
];

const Roadmap = () => (
  <section className="section section-dark" id="roadmap">
    <div className="container">
      <div className="section-header reveal">
        <div className="eyebrow">— 04 / Roadmap público</div>
        <h2 className="h-section" style={{color: 'var(--paper)'}}>
          Lo que estamos construyendo, <em className="serif-italic" style={{color: 'var(--accent)'}}>a la vista de todos</em>.
        </h2>
      </div>

      <p className="lede reveal" data-delay="1" style={{color: 'rgba(255,255,255,0.72)', marginBottom: 60, maxWidth: '60ch'}}>
        Sin promesas vagas. Cada trimestre tiene un alcance concreto y una fecha. Si algo se mueve, lo vas a saber antes que nadie.
      </p>

      <div className="roadmap-grid reveal">
        {ROADMAP.map((col) => (
          <div className="roadmap-col" key={col.q}>
            <div className="roadmap-q">{col.q}</div>
            <div className="roadmap-stage">{col.stage}</div>
            <div className="roadmap-items">
              {col.items.map((it, i) => (
                <div className={`roadmap-item ${it.s === 'done' ? 'done' : ''} ${it.s === 'doing' ? 'doing' : ''}`} key={i}>
                  <span className="roadmap-item-mark"></span>
                  <span>{it.t}</span>
                </div>
              ))}
            </div>
            <div className="roadmap-progress">
              <span>PROGRESO</span>
              <span>{col.progress}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

window.Roadmap = Roadmap;


// --- BUNDLED FROM components\pricing.jsx ---
const TIERS = [
  {
    name: 'Esencial', desc: 'Para bodegas chicas que recién están dejando el Excel.',
    listPrice: '1,5', founderPrice: '1,2', unit: 'UF / mes',
    cta: 'Reservar mi cupo',
    features: [
      'Hasta 500 SKUs y 2 operadores',
      'Escaneo QR con cámara móvil',
      'Mapa 2D · 1 bodega',
      'Kardex 30 días',
      'Modo offline completo',
      'Exportación a Excel',
      'Soporte por email',
    ],
    meta: 'Precio fundador congelado por 12 meses.',
  },
  {
    name: 'Operación', desc: 'El plan donde vive la mayoría de PyMEs después de los primeros 6 meses.',
    listPrice: '3', founderPrice: '2,4', unit: 'UF / mes',
    cta: 'Reservar cupo fundador',
    features: [
      'Hasta 5.000 SKUs y 10 operadores',
      'Conteo cíclico guiado',
      'Batch picking + FEFO',
      'Alertas de stock bajo',
      'Múltiples bodegas (hasta 3)',
      'Reportes operacionales + KPIs',
      'Integración Chilexpress + Starken',
      'Soporte prioritario',
    ],
    meta: 'Precio fundador congelado por 24 meses.',
    featured: true,
  },
  {
    name: 'Distribuidor', desc: 'Para distribuidoras, operadores logísticos y mini-3PL.',
    listPrice: '6', founderPrice: '4,8', unit: 'UF / mes',
    cta: 'Reservar mi cupo',
    features: [
      'SKUs y operadores ilimitados',
      'Multi-empresa (varios RUT)',
      'API REST + Webhooks',
      'Integración Mercado Libre + Jumpseller',
      'DTE SII Chile (guía de despacho)',
      'Variantes de producto',
      'Soporte 24/7 con SLA escrito',
      'Onboarding asistido',
    ],
    meta: 'Precio fundador congelado por 24 meses.',
  },
];

const Pricing = () => (
  <section className="section section-paper" id="cupos">
    <div className="container">
      <div className="section-header reveal">
        <div className="eyebrow">— 05 / Reservar cupo</div>
        <h2 className="h-section">Precios <em className="serif-italic" style={{color: 'var(--primary)'}}>fundadores</em>, antes del lanzamiento público.</h2>
      </div>

      <p className="lede reveal" data-delay="1" style={{marginBottom: 50}}>
        Los primeros 50 clientes nos ayudan a moldear el producto. A cambio, reciben un <strong style={{color: 'var(--primary)'}}>20% de descuento permanente</strong> sobre el precio de lista, congelado por hasta 24 meses. Cuando Elyce salga al mercado abierto, los valores suben — los tuyos no.
      </p>

      <div className="pricing-frame reveal">
        {TIERS.map((t) => (
          <div className={`tier ${t.featured ? 'featured' : ''}`} key={t.name}>
            {t.featured && <div className="tier-badge">Más reservado</div>}
            <div className="tier-name">{t.name}</div>
            <div className="tier-desc">{t.desc}</div>

            <div className="tier-price">
              {t.founderPrice}
              <small>{t.unit}</small>
            </div>
            <div className="tier-price-strike">
              <s>{t.listPrice} UF</s>  ·  precio de lista  ·  <strong style={{color: t.featured ? 'var(--accent)' : 'var(--primary)', fontFamily: 'var(--sans)', fontWeight: 500}}>− 20%</strong>
            </div>

            <ul className="tier-features">
              {t.features.map((f) => (
                <li className="tier-feature" key={f}>
                  <span className="check">+</span>
                  <span>{f}</span>
                </li>
              ))}
            </ul>

            <a href="#waitlist" className="tier-cta">
              {t.cta}
              <span>→</span>
            </a>
            <div className="tier-meta">{t.meta}</div>
          </div>
        ))}
      </div>

      <p className="body-text reveal" style={{marginTop: 28, fontSize: 13, textAlign: 'center', color: 'var(--muted)', fontFamily: 'var(--mono)', letterSpacing: '0.04em'}}>
        VALORES EN UF — UNIDAD DE FOMENTO. DURANTE TODA LA BETA EL USO ES GRATUITO. EL COBRO COMIENZA AL LANZAMIENTO PÚBLICO.
      </p>
    </div>
  </section>
);

window.Pricing = Pricing;


// --- BUNDLED FROM components\waitlist.jsx ---
const SUPABASE_URL = "https://nkkexeijkqcjkfvizdzm.supabase.co";
const SUPABASE_ANON = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im5ra2V4ZWlqa3Fjamtmdml6ZHptIiwicm9sZSI6ImFub24iLCJpYXQiOjE3Nzk0ODkzNTYsImV4cCI6MjA5NTA2NTM1Nn0.lHb-HKzuqL_qmbeih_XN6ljL4zJIOq4q0De1HLmKLwU";

const Waitlist = () => {
  const [form, setForm] = React.useState({ name: '', email: '', company: '', size: '', role: '' });
  const [done, setDone] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [reserved, setReserved] = React.useState(null); // null = cargando
  const total = 50;
  const available = reserved === null ? '—' : total - reserved;

  // Carga el conteo real desde Supabase al montar el componente (con RPC seguro y fallback)
  React.useEffect(function() {
    fetch(SUPABASE_URL + "/rest/v1/rpc/get_waitlist_count", {
      method: "POST",
      headers: {
        "apikey": SUPABASE_ANON,
        "Authorization": "Bearer " + SUPABASE_ANON,
        "Content-Type": "application/json"
      }
    })
    .then(function(res) {
      if (res.ok) {
        return res.json().then(function(count) {
          var c = parseInt(count, 10);
          setReserved(isNaN(c) ? 0 : c);
        });
      } else {
        throw new Error("RPC not available");
      }
    })
    .catch(function() {
      // Fallback al método anterior en caso de que no hayan creado la función RPC todavía
      fetch(SUPABASE_URL + "/rest/v1/waitlist?select=id", {
        headers: {
          "apikey": SUPABASE_ANON,
          "Authorization": "Bearer " + SUPABASE_ANON,
          "Prefer": "count=exact",
          "Range": "0-0"
        }
      })
      .then(function(res) {
        var range = res.headers.get("Content-Range");
        if (range) {
          var total = parseInt(range.split("/")[1], 10);
          setReserved(isNaN(total) ? 0 : total);
        } else {
          setReserved(0);
        }
      })
      .catch(function() {
        setReserved(0);
      });
    });
  }, []);

  const submit = function(e) {
    e.preventDefault();
    if (!form.email || !form.name) return;
    setLoading(true);

    fetch(SUPABASE_URL + "/rest/v1/waitlist", {
      method: "POST",
      headers: {
        "apikey": SUPABASE_ANON,
        "Authorization": "Bearer " + SUPABASE_ANON,
        "Content-Type": "application/json",
        "Prefer": "return=minimal"
      },
      body: JSON.stringify({
        name: form.name,
        email: form.email,
        company: form.company || null,
        size: form.size || null,
        role: form.role || null
      })
    })
    .then(function(res) {
      setLoading(false);
      if (res.status === 201 || res.ok) {
        setDone(true);
        setReserved(function(r) { return (r || 0) + 1; });
      } else {
        res.json().then(function(err) {
          console.error("Supabase error:", err);
          alert("Error al registrarte: " + (err.message || "Intenta de nuevo."));
        }).catch(function() {
          alert("Error al registrarte. Intenta de nuevo.");
        });
      }
    })
    .catch(function(err) {
      setLoading(false);
      console.error("Fetch error:", err);
      alert("Error de conexión. Intenta de nuevo.");
    });
  };

  return (
    <section className="section" id="waitlist">
      <div className="container">
        <div className="waitlist reveal">
          <div>
            <div className="eyebrow eyebrow-strong" style={{color: 'var(--accent)'}}>— 06 / Lista de espera</div>
            <h2 className="h-section" style={{marginTop: 18}}>
              Únete <em className="serif-italic" style={{color: 'var(--accent)'}}>antes</em> de que abran los precios públicos.
            </h2>
            <p className="waitlist-text">
              Déjanos tu correo y te contactaremos cuando se habilite tu cupo. Sin spam, sin boletines, sin "promociones especiales". Solo el aviso de que ya puedes entrar — y nada más.
            </p>

            <div style={{marginTop: 32, display: 'flex', gap: 32, fontFamily: 'var(--mono)', fontSize: 12, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.06em', flexWrap: 'wrap'}}>
              <div>
                <div style={{fontFamily: 'var(--display)', fontSize: 32, color: 'var(--paper)', marginBottom: 4}}>{total}</div>
                <div>CUPOS FUNDADORES</div>
              </div>
              <div>
                <div style={{fontFamily: 'var(--display)', fontSize: 32, color: 'var(--accent)', marginBottom: 4}}>{available}</div>
                <div>DISPONIBLES</div>
              </div>
              <div>
                <div style={{fontFamily: 'var(--display)', fontSize: 32, color: 'var(--paper)', marginBottom: 4}}>{reserved === null ? '—' : reserved}</div>
                <div>RESERVADOS</div>
              </div>
            </div>
          </div>

          <form className="waitlist-form" onSubmit={submit}>
            {!done ? (
              <>
                <div className="field">
                  <label>Nombre</label>
                  <input value={form.name} onChange={e => setForm({...form, name: e.target.value})} placeholder="Nombre completo" required />
                </div>
                <div className="field">
                  <label>Email de contacto</label>
                  <input type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})} placeholder="tu@empresa.com" required />
                </div>
                <div className="field">
                  <label>Empresa</label>
                  <input value={form.company} onChange={e => setForm({...form, company: e.target.value})} placeholder="Razón social o marca" />
                </div>
                <div className="form-row">
                  <div className="field">
                    <label>Tamaño bodega</label>
                    <select value={form.size} onChange={e => setForm({...form, size: e.target.value})}>
                      <option value="">Elige una opción</option>
                      <option>Hasta 100 SKUs</option>
                      <option>100 – 500 SKUs</option>
                      <option>500 – 2.000 SKUs</option>
                      <option>Más de 2.000 SKUs</option>
                    </select>
                  </div>
                  <div className="field">
                    <label>Tu rol</label>
                    <select value={form.role} onChange={e => setForm({...form, role: e.target.value})}>
                      <option value="">Elige una opción</option>
                      <option>Dueño / fundador</option>
                      <option>Operaciones / bodega</option>
                      <option>Tecnología / sistemas</option>
                      <option>Otro</option>
                    </select>
                  </div>
                </div>

                <button type="submit" className="submit-btn" disabled={loading}>
                  {loading ? "Enviando..." : "Reservar mi cupo"}
                  {!loading && <span>→</span>}
                </button>
                <div className="form-foot">
                  Al sumarte aceptas recibir actualizaciones del producto.<br/>
                  Puedes cancelar cuando quieras. Tus datos no se comparten con terceros.
                </div>
              </>
            ) : (
              <div className="success-state">
                <div className="check-big">✓</div>
                <h3>Estás en la lista.</h3>
                <p>
                  Te escribiremos a <strong style={{color: 'var(--accent)'}}>{form.email}</strong> cuando se habilite tu cupo.<br/>
                  Quedan <strong style={{color: 'var(--accent)'}}>{total - (reserved || 0)}</strong> cupos fundadores.
                </p>
                <button type="button" className="submit-btn" style={{marginTop: 28, background: 'transparent', border: '1px solid var(--accent)', color: 'var(--accent)'}} onClick={() => { setDone(false); setForm({name:'', email:'', company:'', size:'', role:''}); }}>
                  Registrar a alguien más
                </button>
              </div>
            )}
          </form>
        </div>
      </div>
    </section>
  );
};

window.Waitlist = Waitlist;


// --- BUNDLED FROM components\faq.jsx ---
const QUESTIONS = [
  {
    q: '¿Cuándo sale Elyce al público?',
    a: 'La beta abierta sale a inicios de 2027 y el lanzamiento público está programado para Q3 2027. Hasta entonces estamos en construcción activa con primeros clientes prueba. Los que reserven cupo ahora entran antes y pagan menos.'
  },
  {
    q: '¿Tengo que pagar algo durante la beta?',
    a: 'No. Durante toda la beta el uso es 100% gratuito, incluyendo soporte directo conmigo (Matías). El cobro empieza recién cuando lanzamos públicamente, y respetamos el precio fundador que reservaste por hasta 24 meses.'
  },
  {
    q: '¿Qué pasa si me anoto y no me llaman?',
    a: 'Te llamamos sí o sí. La lista de espera es por orden de llegada, y vamos abriendo cupos en grupos chicos (entre 5 y 10 por mes) para poder darle atención real a cada cliente. Si pasaron más de 6 semanas sin noticias, escríbeme directamente a elycewms@gmail.com.'
  },
  {
    q: '¿Elyce reemplaza a Bsale o Defontana?',
    a: 'No. Elyce no es un ERP. No hace facturación, no hace contabilidad, no hace POS. Solo gestiona tu bodega. Si ya tienes Bsale o Defontana para tus ventas y contabilidad, Elyce se integra con ellos (en el roadmap Q3 2027). Si no tienes nada, puedes usar Elyce solo para la bodega y planillas para el resto.'
  },
  {
    q: '¿Necesito hardware especial?',
    a: 'No. Si tienes un teléfono celular y/o computadora, ya estás listo. La gracia de Elyce es justamente que la cámara del celular reemplaza a la pistola lectora cara. Si después quieres sumar lectores Bluetooth dedicados, también funciona — pero no es necesario.'
  },
  {
    q: '¿Funciona si tengo varias bodegas?',
    a: 'Sí. Multi-bodega real está en el plan Operación (hasta 3) y Distribuidor (sin límite). Cada bodega tiene su propio mapa 2D, su propio kardex y permisos independientes.'
  },
  {
    q: '¿En qué país está Elyce?',
    a: 'Operación principal en Concepción, Chile. Foco total en PyMEs chilenas — DTE SII, Chilexpress, Starken, Mercado Libre Chile. Más adelante podríamos abrir a otros países de LATAM, pero por ahora estamos concentrados en hacer Elyce excelente para Chile.'
  },
  {
    q: '¿Quién está detrás de Elyce?',
    a: 'Elyce es un proyecto independiente creado por Matías Martínez desde 2025. No es un startup con inversionistas, lo cual significa que las decisiones de producto se toman pensando en clientes que pagan, no en la próxima ronda. Si quieres conocer al equipo, escribe a elycewms@gmail.com.'
  },
];

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq">
      <div className="container-tight">
        <div className="section-header reveal" style={{gridTemplateColumns: '1fr', marginBottom: 60}}>
          <div className="eyebrow">— 07 / Dudas frecuentes</div>
          <h2 className="h-section" style={{marginTop: 18}}>Lo que <em className="serif-italic" style={{color: 'var(--primary)'}}>nos preguntan</em> antes de sumarse.</h2>
        </div>

        <div className="faq-list reveal">
          {QUESTIONS.map((item, i) => (
            <div className={`faq-item ${open === i ? 'open' : ''}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span>{item.q}</span>
                <span className="faq-icon">+</span>
              </button>
              <div className="faq-a">
                <p className="faq-a-text">{item.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.FAQ = FAQ;


// --- BUNDLED FROM components\footer.jsx ---
const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer-top">
        <div>
          <div className="footer-brand-mark">Elyce</div>
          <div className="footer-brand-sub">Warehouse Management</div>
          <p className="footer-blurb">
            Software de gestión de bodegas para PyMEs que no necesitan un ERP. Construido por un operador, para operadores.
          </p>
        </div>

        <div className="footer-col">
          <div className="footer-col-title">Producto</div>
          <ul>
            <li><a href="#producto">Vista general</a></li>
            <li><a href="#capacidades">Capacidades</a></li>
            <li><a href="#roadmap">Roadmap público</a></li>
            <li><a href="#cupos">Precios</a></li>
          </ul>
        </div>

        <div className="footer-col">
          <div className="footer-col-title">Compañía</div>
          <ul>
            <li><a href="#manifiesto">Manifiesto</a></li>
            <li><a href="#faq">Preguntas frecuentes</a></li>
            <li><a href="mailto:elycewms@gmail.com">Contacto</a></li>
          </ul>
        </div>

        <div className="footer-col">
          <div className="footer-col-title">Contacto</div>
          <ul>
            <li><a href="mailto:elycewms@gmail.com">elycewms@gmail.com</a></li>
            <li><a href="#waitlist">Lista de espera</a></li>
            <li style={{color: 'rgba(255,255,255,0.5)'}}>Concepción, Chile</li>
          </ul>
        </div>
      </div>

      <div className="footer-bottom">
        <span>© 2026 Elyce · Concepción, Chile</span>
        <span>Construido en Flutter + Supabase · v0.4 en desarrollo</span>
      </div>
    </div>
  </footer>
);

window.Footer = Footer;


// --- BUNDLED FROM components\app.jsx ---
const App = () => {
  React.useEffect(() => {
    // IntersectionObserver-based reveal on scroll
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <BetaBar />
      <Header />
      <main>
        <Hero />
        <Manifesto />
        <Preview />
        <Features />
        <Roadmap />
        <Pricing />
        <Waitlist />
        <FAQ />
      </main>
      <Footer />
    </>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);