/* ─────────────────────────────────────────────────────────────────────────
   MENÚ FACTORY — Pricing & Features
   Dark cinematic aesthetic — matches landing.jsx (copper on near-black).
   Free tier vs. Premium "RESTOS Full Potential" — conversion funnel.
   Exports window.MFPricingPage. Props: { onStart, onSignIn, onBack }
   ───────────────────────────────────────────────────────────────────────── */

const { useState: usePricingState, useEffect: usePricingEffect } = React;

/* Palette + type — mirror landing.jsx exactly (kept local to avoid global
   redeclaration collisions with landing's own C/SF/UI in the shared scope). */
const PC = {
  bg: '#080604', bg2: '#0c0905',
  copper: '#C4813A', copperL: '#E8A855',
  text: '#F5F0E8', muted: 'rgba(245,240,232,0.52)',
  dim: 'rgba(245,240,232,0.24)', faint: 'rgba(245,240,232,0.08)',
  green: '#6DB86D',
};
const PSF = '"Fraunces","Georgia",serif';
const PUI = '"Inter Tight",system-ui,-apple-system,sans-serif';

/* MXN currency formatting — never raw integers for money. */
const pmx = n => Number(n).toLocaleString('es-MX', { minimumFractionDigits: 0, maximumFractionDigits: 0 });

const CSS_PRICING = `
.pp{background:${PC.bg};color:${PC.text};font-family:${PUI};min-height:100vh;min-height:100dvh}
.pp *{box-sizing:border-box;margin:0;padding:0}
.pp button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.pp button:disabled{opacity:.45;cursor:not-allowed}

/* nav */
.pp-nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:18px 40px;background:rgba(8,6,4,.86);border-bottom:1px solid rgba(196,129,58,.1);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.pp-back{display:inline-flex;align-items:center;gap:10px;color:${PC.muted};font-family:${PUI};font-size:9px;letter-spacing:.22em;text-transform:uppercase;transition:color .26s;min-height:34px}
.pp-back:hover{color:${PC.text}}
.pp-nav-actions{display:flex;gap:12px;align-items:center}
.pp-nav-btn{font-family:${PUI};font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:${PC.copper};border:1px solid rgba(196,129,58,.4);padding:9px 18px;min-height:34px;background:transparent;transition:background .26s,border-color .26s,color .26s,transform .12s}
.pp-nav-btn:hover{background:rgba(196,129,58,.1);border-color:${PC.copper}}
.pp-nav-btn:active{transform:scale(.97)}
.pp-nav-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(196,129,58,.22)}
.pp-nav-btn.ghost{color:${PC.muted};border-color:rgba(245,240,232,.18)}
.pp-nav-btn.ghost:hover{color:${PC.text};border-color:rgba(245,240,232,.4);background:rgba(245,240,232,.04)}

/* caption label */
.pp-cap{font-family:${PUI};font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:${PC.copper};font-weight:600}

/* hero */
.pp-hero{text-align:center;padding:96px 40px 64px;position:relative}
.pp-hero h1{font-family:${PSF};font-weight:300;font-size:clamp(34px,6vw,60px);line-height:1.05;letter-spacing:-.01em;margin-top:18px}
.pp-hero h1 em{font-style:italic;color:${PC.copper}}
.pp-hero p{font-family:${PSF};font-size:clamp(15px,2.2vw,19px);color:${PC.muted};max-width:600px;margin:22px auto 0;line-height:1.6}

/* free banner */
.pp-freeband{display:inline-flex;align-items:center;gap:10px;margin:32px auto 0;padding:10px 20px;border:1px solid rgba(109,184,109,.32);border-radius:999px;background:rgba(109,184,109,.06)}
.pp-freeband span{font-family:${PUI};font-size:11px;letter-spacing:.04em;color:${PC.text}}

/* container */
.pp-wrap{max-width:1080px;margin:0 auto;padding:0 40px 40px}

/* billing toggle */
.pp-toggle{display:flex;justify-content:center;align-items:center;gap:18px;margin:56px 0 48px}
.pp-toggle-lbl{font-family:${PUI};font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:${PC.muted};transition:color .26s}
.pp-toggle-lbl.on{color:${PC.text}}
.pp-switch{width:52px;height:28px;border-radius:999px;background:rgba(245,240,232,.12);border:1px solid rgba(196,129,58,.3);position:relative;transition:background .3s;flex-shrink:0}
.pp-switch.yr{background:rgba(196,129,58,.3)}
.pp-switch-dot{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:${PC.copper};transition:left .3s cubic-bezier(.34,1.56,.64,1)}
.pp-switch.yr .pp-switch-dot{left:26px;background:${PC.copperL}}
.pp-save{font-family:${PUI};font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:${PC.green};border:1px solid rgba(109,184,109,.3);border-radius:999px;padding:3px 9px}

/* tiers */
.pp-tiers{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.pp-tier{border:1px solid rgba(196,129,58,.16);border-radius:4px;padding:36px 32px;background:rgba(14,10,6,.6);position:relative;transition:border-color .3s,transform .3s}
.pp-tier.pro{border-color:rgba(196,129,58,.5);background:linear-gradient(165deg,rgba(196,129,58,.07),rgba(14,10,6,.6) 55%)}
.pp-tier.pro::after{content:'';position:absolute;inset:-1px;border-radius:4px;box-shadow:0 0 60px rgba(196,129,58,.12) inset;pointer-events:none}
.pp-badge{position:absolute;top:-10px;right:24px;font-family:${PUI};font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:${PC.bg};background:${PC.copper};padding:5px 12px;border-radius:999px}
.pp-tier-name{font-family:${PSF};font-style:italic;font-size:24px;color:${PC.text}}
.pp-tier-tag{font-family:${PUI};font-size:12px;color:${PC.muted};margin-top:6px;line-height:1.5}
.pp-price{display:flex;align-items:baseline;gap:8px;margin:26px 0 4px}
.pp-price-fig{font-family:${PSF};font-style:italic;font-size:46px;color:${PC.copper};line-height:1;font-variant-numeric:tabular-nums}
.pp-price-per{font-family:${PUI};font-size:12px;color:${PC.muted}}
.pp-price-sub{font-family:${PUI};font-size:11px;letter-spacing:.04em;color:${PC.dim};min-height:16px}

/* tier CTA */
.pp-cta{width:100%;margin-top:24px;height:50px;display:inline-flex;align-items:center;justify-content:center;font-family:${PUI};font-size:10px;letter-spacing:.22em;text-transform:uppercase;transition:background .28s,border-color .28s,color .28s,box-shadow .28s,transform .12s;border:1px solid}
.pp-cta:active{transform:scale(.98)}
.pp-cta:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(196,129,58,.3)}
.pp-cta.primary{background:${PC.copper};color:${PC.bg};border-color:${PC.copper}}
.pp-cta.primary:hover{background:${PC.copperL};border-color:${PC.copperL}}
.pp-cta.ghost{background:transparent;color:${PC.text};border-color:rgba(245,240,232,.28)}
.pp-cta.ghost:hover{border-color:${PC.copper};color:${PC.copper}}
.pp-cta-note{font-family:${PUI};font-size:10px;color:${PC.dim};text-align:center;margin-top:10px}

/* features */
.pp-feats{margin-top:30px;border-top:1px solid rgba(196,129,58,.1);padding-top:24px}
.pp-fgroup{margin-bottom:22px}
.pp-fgroup:last-child{margin-bottom:0}
.pp-fgroup-t{font-family:${PUI};font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:${PC.copper};margin-bottom:12px}
.pp-feat{display:flex;align-items:flex-start;gap:10px;padding:6px 0;font-family:${PUI};font-size:13px;color:${PC.text};line-height:1.45}
.pp-feat .ic{flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.pp-feat.no{color:${PC.dim}}
.pp-feat.no .ic{color:rgba(245,240,232,.2)}
.pp-feat .ic svg{width:15px;height:15px}

/* audiences */
.pp-sec{margin-top:104px;padding-top:64px;border-top:1px solid rgba(196,129,58,.1)}
.pp-sec-h{text-align:center;margin-bottom:56px}
.pp-sec-h h2{font-family:${PSF};font-style:italic;font-weight:300;font-size:clamp(26px,4vw,40px);color:${PC.text};margin-top:14px}
.pp-sec-h p{font-family:${PUI};font-size:14px;color:${PC.muted};max-width:480px;margin:14px auto 0;line-height:1.6}
.pp-aud-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.pp-aud{border:1px solid rgba(196,129,58,.12);border-radius:4px;padding:32px 26px;background:rgba(14,10,6,.5);transition:border-color .3s,transform .2s}
.pp-aud:hover{border-color:rgba(196,129,58,.32);transform:translateY(-2px)}
.pp-aud-ic{font-size:30px;margin-bottom:16px;line-height:1}
.pp-aud h3{font-family:${PSF};font-style:italic;font-size:19px;color:${PC.copper};margin-bottom:10px}
.pp-aud p{font-family:${PUI};font-size:13px;color:${PC.muted};line-height:1.6}

/* faq */
.pp-faq{max-width:680px;margin:0 auto}
.pp-faq-item{border-bottom:1px solid rgba(196,129,58,.1)}
.pp-faq-q{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 4px;font-family:${PUI};font-size:15px;font-weight:500;color:${PC.text};transition:color .2s}
.pp-faq-q:hover{color:${PC.copper}}
.pp-faq-tog{flex-shrink:0;width:22px;height:22px;display:flex;align-items:center;justify-content:center;color:${PC.copper};font-size:18px;font-family:${PSF}}
.pp-faq-a{overflow:hidden;font-family:${PUI};font-size:13px;color:${PC.muted};line-height:1.7;padding:0 4px 20px;animation:pp-fade .3s ease both}
@keyframes pp-fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* final cta */
.pp-final{text-align:center;margin-top:104px;padding:72px 40px;border-top:1px solid rgba(196,129,58,.1);background:linear-gradient(180deg,transparent,rgba(196,129,58,.04))}
.pp-final h2{font-family:${PSF};font-style:italic;font-weight:300;font-size:clamp(28px,4.4vw,44px);color:${PC.text}}
.pp-final p{font-family:${PSF};font-size:15px;color:${PC.muted};max-width:520px;margin:18px auto 0;line-height:1.6}
.pp-final-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.pp-bigcta{height:54px;padding:0 34px;display:inline-flex;align-items:center;justify-content:center;font-family:${PUI};font-size:11px;letter-spacing:.22em;text-transform:uppercase;transition:background .28s,border-color .28s,color .28s,transform .12s;border:1px solid}
.pp-bigcta:active{transform:scale(.98)}
.pp-bigcta.primary{background:${PC.copper};color:${PC.bg};border-color:${PC.copper}}
.pp-bigcta.primary:hover{background:${PC.copperL};border-color:${PC.copperL}}
.pp-bigcta.ghost{background:transparent;color:${PC.text};border-color:rgba(245,240,232,.28)}
.pp-bigcta.ghost:hover{border-color:${PC.copper};color:${PC.copper}}

@media(max-width:767px){
  .pp-nav{padding:13px 18px}
  .pp-hero{padding:64px 22px 48px}
  .pp-wrap{padding:0 22px 32px}
  .pp-tiers{grid-template-columns:1fr;gap:20px}
  .pp-tier{padding:28px 22px}
  .pp-sec{margin-top:72px;padding-top:48px}
  .pp-final{margin-top:72px;padding:56px 22px}
  .pp-final-btns{flex-direction:column;align-items:stretch;max-width:320px;margin-left:auto;margin-right:auto}
}
`;

/* check / dash glyphs — vector, consistent with landing's stroke icons */
function PPCheck() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12.5l4.2 4.2L19 6.5" />
    </svg>
  );
}
function PPDash() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round">
      <line x1="6" y1="12" x2="18" y2="12" />
    </svg>
  );
}

/* logo lockup — small replica matching landing's mark */
function PPLogo() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <svg width={24} height={24} viewBox="0 0 32 32" fill="none">
        <rect x="1" y="1" width="30" height="30" stroke={PC.copper} strokeWidth="1" />
        <text x="16" y="22" textAnchor="middle" fill={PC.copper} style={{ fontFamily: PSF, fontSize: 13 }}>MF</text>
      </svg>
      <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
        <span style={{ fontFamily: PUI, fontSize: 11, fontWeight: 600, letterSpacing: '.22em', textTransform: 'uppercase', color: PC.muted }}>Menú Factory</span>
        <span style={{ fontFamily: PUI, fontSize: 8, letterSpacing: '.1em', color: PC.dim, opacity: 0.55, marginTop: 3 }}>by sinapsys</span>
      </div>
    </div>
  );
}

function PricingPage({ onStart, onSignIn, onBack }) {
  const [yearly, setYearly] = usePricingState(false);
  const [openFaq, setOpenFaq] = usePricingState(0);

  usePricingEffect(() => {
    const style = document.createElement('style');
    style.textContent = CSS_PRICING;
    document.head.appendChild(style);
    window.scrollTo(0, 0);
    return () => { try { document.head.removeChild(style); } catch (e) {} };
  }, []);

  /* ── Plan data ─────────────────────────────────────────────── */
  const freeGroups = [
    { t: 'La experiencia', items: [
      { x: 'Menú digital con tu marca', in: true },
      { x: 'Escanean, piden en grupo, pagan dividido', in: true },
      { x: 'Sugerencias de IA para el comensal', in: true },
      { x: 'Sin instalar nada — solo escanear', in: true },
    ]},
    { t: 'Tu equipo', items: [
      { x: 'Consola del mesero (órdenes en vivo)', in: true },
      { x: 'Pantalla de cocina simple', in: true },
      { x: 'Cierre de mesas y cuentas', in: true },
      { x: 'Onboarding en menos de 10 minutos', in: true },
    ]},
    { t: 'Inteligencia', items: [
      { x: 'IA que anticipa lo que va a pedir', in: false },
      { x: 'Reportes de tendencias y rentabilidad', in: false },
      { x: 'KDS con tiempos de preparación', in: false },
      { x: 'Integraciones de delivery', in: false },
    ]},
  ];

  const proGroups = [
    { t: 'Todo lo gratis, y además', items: [
      { x: 'IA anticipa lo que el comensal va a querer', in: true },
      { x: 'Perfiles de preferencia por comensal', in: true },
      { x: 'Recomendaciones personalizadas en vivo', in: true },
    ]},
    { t: 'Inteligencia del negocio', items: [
      { x: 'Reportes de tendencias y KPIs', in: true },
      { x: 'Optimización de menú por rentabilidad', in: true },
      { x: 'Alertas de stock e ingredientes', in: true },
    ]},
    { t: 'Operaciones pro', items: [
      { x: 'KDS integrada con tiempos de prep', in: true },
      { x: 'Editor de menú avanzado y dinámico', in: true },
      { x: 'Integraciones: Glovo, Just Eat, Uber Eats', in: true },
    ]},
    { t: 'Acompañamiento', items: [
      { x: 'Soporte 24/7 por chat', in: true },
      { x: 'Onboarding personalizado', in: true },
      { x: 'Acceso anticipado a nuevas funciones', in: true },
    ]},
  ];

  const audiences = [
    { ic: '🧑‍🍽️', t: 'Para el comensal', d: 'Escanea, pide en grupo, paga dividido, recibe sugerencias de IA. Control total, sin app, sin esperar.' },
    { ic: '👨‍💼', t: 'Para el mesero', d: 'Deja de correr tomando órdenes — se convierte en director de la experiencia. Su consola le dice dónde importa estar.' },
    { ic: '🏠', t: 'Para el restaurante', d: 'Cada pedido y visita se convierte en inteligencia. La IA aprende preferencias y anticipa lo que el comensal va a querer.' },
    { ic: '⚙️', t: 'Operaciones', d: 'KDS integrada, editor de menú con marca propia, onboarding en menos de 10 minutos.' },
  ];

  const faqs = [
    { q: '¿De verdad es gratis?', a: 'Sí. Tu carta digital, los pedidos, la consola del mesero y el cierre de cuentas no cuestan nada — para siempre. Solo pagas cuando quieras dar el salto a Full Potential.' },
    { q: '¿Qué gano al pasar a Full Potential?', a: 'La inteligencia: la IA anticipa lo que tu comensal va a pedir, los reportes te dicen qué deja más margen, la KDS ordena tu cocina y conectas con delivery. Tu restaurante deja de adivinar.' },
    { q: '¿Hay límite de mesas o pedidos en el plan gratis?', a: 'No. Ambos planes soportan restaurantes de cualquier tamaño. El límite lo pones tú.' },
    { q: '¿Cómo subo mi carta actual?', a: 'Sube un PDF o una foto. Leemos cada plato, precio y descripción automáticamente en menos de 2 minutos. Tú solo revisas.' },
    { q: '¿Puedo cancelar cuando quiera?', a: 'En cualquier momento, sin penalización. Si bajas de Full Potential, tu carta y tus pedidos siguen funcionando gratis.' },
    { q: '¿Mis datos están seguros?', a: 'Sí. Alojados en infraestructura de Google con cifrado en tránsito y en reposo. Cumplimos con la normativa de protección de datos.' },
  ];

  const priceFig = yearly ? '290' : '29';
  const pricePer = yearly ? 'al año' : 'al mes';
  const priceSub = yearly ? 'Equivale a 24 / mes · ahorras 2 meses' : 'Cancela cuando quieras';

  return (
    <div className="pp">
      {/* Nav */}
      <nav className="pp-nav">
        <button className="pp-back" onClick={onBack} title="Volver">
          <span style={{ fontSize: 14 }}>←</span> Volver
        </button>
        <div className="pp-nav-actions">
          <button className="pp-nav-btn ghost" onClick={onSignIn}>Iniciar sesión</button>
          <button className="pp-nav-btn" onClick={onStart}>Solicitar acceso</button>
        </div>
      </nav>

      {/* Hero */}
      <header className="pp-hero">
        <div className="pp-cap">Precios · Menú Factory</div>
        <h1>Empieza <em>gratis</em>.<br />Crece cuando quieras.</h1>
        <p>
          Tu carta digital, los pedidos y la cuenta — sin costo, para siempre.
          Pagas solo cuando quieras desatar el <em style={{ fontStyle: 'italic', color: PC.copperL }}>potencial completo</em> de tu restaurante.
        </p>
        <div className="pp-freeband">
          <span style={{ position: 'relative', display: 'inline-flex', width: 7, height: 7 }}>
            <span style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: PC.green, animation: 'pp-fade 1.8s ease-in-out infinite' }} />
            <span style={{ position: 'relative', width: 7, height: 7, borderRadius: '50%', background: PC.green }} />
          </span>
          <span>0 de costo para arrancar · sin tarjeta de crédito</span>
        </div>
      </header>

      <div className="pp-wrap">
        {/* Billing toggle */}
        <div className="pp-toggle">
          <span className={`pp-toggle-lbl${!yearly ? ' on' : ''}`}>Mensual</span>
          <button className={`pp-switch${yearly ? ' yr' : ''}`} onClick={() => setYearly(y => !y)}
            title="Cambiar facturación" aria-label="Cambiar entre mensual y anual">
            <span className="pp-switch-dot" />
          </button>
          <span className={`pp-toggle-lbl${yearly ? ' on' : ''}`}>Anual</span>
          <span className="pp-save">2 meses gratis</span>
        </div>

        {/* Tiers */}
        <div className="pp-tiers">
          {/* Free */}
          <div className="pp-tier">
            <div className="pp-tier-name">Carta Viva</div>
            <div className="pp-tier-tag">Todo lo que necesitas para abrir tus mesas al mundo digital.</div>
            <div className="pp-price">
              <span className="pp-price-fig">Gratis</span>
            </div>
            <div className="pp-price-sub">Para siempre · sin tarjeta</div>
            <button className="pp-cta ghost" onClick={onStart}>Empezar ahora →</button>

            <div className="pp-feats">
              {freeGroups.map((g, i) => (
                <div key={i} className="pp-fgroup">
                  <div className="pp-fgroup-t">{g.t}</div>
                  {g.items.map((it, j) => (
                    <div key={j} className={`pp-feat${it.in ? '' : ' no'}`}>
                      <span className="ic">{it.in ? <PPCheck /> : <PPDash />}</span>
                      <span>{it.x}</span>
                    </div>
                  ))}
                </div>
              ))}
            </div>
          </div>

          {/* Premium */}
          <div className="pp-tier pro">
            <span className="pp-badge">Full Potential</span>
            <div className="pp-tier-name">RESTOS Full Potential</div>
            <div className="pp-tier-tag">La inteligencia que convierte cada visita en una decisión que deja margen.</div>
            <div className="pp-price">
              <span className="pp-price-fig">${priceFig}</span>
              <span className="pp-price-per">USD {pricePer}</span>
            </div>
            <div className="pp-price-sub">{priceSub}</div>
            <button className="pp-cta primary" onClick={onStart}>Desatar el potencial →</button>
            <div className="pp-cta-note">Primer mes gratis al venir del plan Carta Viva</div>

            <div className="pp-feats">
              {proGroups.map((g, i) => (
                <div key={i} className="pp-fgroup">
                  <div className="pp-fgroup-t">{g.t}</div>
                  {g.items.map((it, j) => (
                    <div key={j} className="pp-feat">
                      <span className="ic" style={{ color: PC.copper }}><PPCheck /></span>
                      <span>{it.x}</span>
                    </div>
                  ))}
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Audiences */}
        <section className="pp-sec">
          <div className="pp-sec-h">
            <div className="pp-cap" style={{ textAlign: 'center' }}>Una herramienta, cuatro mundos</div>
            <h2>Hecho para todos en la mesa</h2>
            <p>Cada rol de tu restaurante recibe exactamente lo que necesita para hacer su trabajo mejor.</p>
          </div>
          <div className="pp-aud-grid">
            {audiences.map((a, i) => (
              <div key={i} className="pp-aud">
                <div className="pp-aud-ic">{a.ic}</div>
                <h3>{a.t}</h3>
                <p>{a.d}</p>
              </div>
            ))}
          </div>
        </section>

        {/* FAQ */}
        <section className="pp-sec">
          <div className="pp-sec-h">
            <div className="pp-cap" style={{ textAlign: 'center' }}>Dudas honestas</div>
            <h2>Lo que todo dueño pregunta</h2>
          </div>
          <div className="pp-faq">
            {faqs.map((f, i) => (
              <div key={i} className="pp-faq-item">
                <button className="pp-faq-q" onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                  <span>{f.q}</span>
                  <span className="pp-faq-tog">{openFaq === i ? '–' : '+'}</span>
                </button>
                {openFaq === i && <div className="pp-faq-a">{f.a}</div>}
              </div>
            ))}
          </div>
        </section>
      </div>

      {/* Final CTA */}
      <section className="pp-final">
        <div className="pp-cap" style={{ textAlign: 'center' }}>Tu casa, lista en cinco minutos</div>
        <h2>El primer paso no cuesta nada</h2>
        <p>Abre tu carta digital hoy. Cuando tu restaurante esté listo para más, el potencial completo te está esperando.</p>
        <div className="pp-final-btns">
          <button className="pp-bigcta primary" onClick={onStart}>Empezar gratis →</button>
          <button className="pp-bigcta ghost" onClick={onSignIn}>Ya tengo cuenta</button>
        </div>
      </section>
    </div>
  );
}

window.MFPricingPage = PricingPage;