// Resultados · Quién está detrás · Precios · Letra chica
// Testimonio real: completar textual. Si queda en null, el bloque no se publica.
const TESTIMONIO_TERO = null; // { quote: '...', name: '...', role: '... · Tero Restó' }

const ResultsV2 = ({ dev }) => {
  const t = TESTIMONIO_TERO;
  const rest = [['386', 'órdenes de compra'], ['21', 'proveedores con histórico de precios'], ['63', 'platos costeados'], ['21,1%', 'food cost promedio de carta']];
  return (
    <section id="resultados" style={{ background: 'var(--kraft-soft)', borderTop: '1.5px solid var(--ink)', borderBottom: '1.5px solid var(--ink)' }}>
      <div className="container">
        <SectionHead eyebrow="Resultados" title={<>Caso Tero Restó — <em>números reales.</em></>}/>
        <div className="res-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,5fr) minmax(0,7fr)', gap: 80, alignItems: 'end' }}>
          <div>
            <div className="display" style={{ fontSize: 'clamp(130px, 18vw, 250px)', lineHeight: .8, color: 'var(--accent)', letterSpacing: '-.04em' }}>468</div>
            <div className="display" style={{ fontSize: 30, marginTop: 22, maxWidth: 360, lineHeight: 1.12 }}>facturas conciliadas contra orden</div>
          </div>
          <div style={{ borderTop: '1.5px solid var(--ink)' }}>
            {rest.map(([n, l]) => <Leader key={l} label={l} value={n}/>)}
          </div>
        </div>
        <p className="small" style={{ marginTop: 30, fontSize: 13 }}>Números a agosto 2026. <Confirmar>actualizar al día antes de publicar</Confirmar></p>

        {(t || dev) && (
          <figure style={{ margin: '56px 0 0', paddingLeft: 32, borderLeft: '3px solid var(--accent)', maxWidth: 860 }}>
            <blockquote className="display" style={{ margin: '0 0 16px', fontSize: 34, lineHeight: 1.2 }}>
              {t ? <>“{t.quote}”</> : <Confirmar>2 líneas textuales del dueño o chef de Tero</Confirmar>}
            </blockquote>
            <figcaption style={{ fontSize: 14, color: 'var(--ink-muted)' }}>
              {t ? `${t.name} · ${t.role}` : 'Visible solo en desarrollo: sin testimonio real, no se publica.'}
            </figcaption>
          </figure>
        )}
      </div>
      <style>{`@media (max-width:920px){.res-grid{grid-template-columns:1fr!important;gap:40px!important}}`}</style>
    </section>
  );
};

const AboutV2 = () => (
  <section id="por-que-existe" style={{ background: 'var(--primary)', color: '#F6F1E7' }}>
    <div className="container">
      <div className="about-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,4fr) minmax(0,7fr)', gap: 88, alignItems: 'start' }}>
        <div style={{ borderTop: '1px solid rgba(246,241,231,.35)', paddingTop: 28 }}>
          <div className="display" style={{ fontSize: 'clamp(140px, 17vw, 240px)', lineHeight: .8, color: 'var(--accent-soft)', letterSpacing: '-.04em' }}>6+</div>
          <div style={{ fontSize: 19, marginTop: 22, color: '#F6F1E7' }}>restaurantes abiertos</div>
          <div style={{ fontSize: 15, marginTop: 6, color: 'rgba(246,241,231,.7)', maxWidth: 300 }}>Distintos formatos, distintas etapas y muchos años de experiencia operando gastronomía.</div>
        </div>
        <div>
          <div className="kicker" style={{ color: 'var(--accent-soft)' }}><span>Por qué existe</span></div>
          <h2 className="display" style={{ fontSize: 'clamp(40px, 5.2vw, 76px)', margin: '20px 0 28px' }}>
            No lo hizo una empresa de software. <em style={{ color: 'var(--accent-soft)' }}>Lo hizo alguien que conoce el problema desde adentro.</em>
          </h2>
          <p className="body-lg" style={{ color: 'rgba(246,241,231,.85)', margin: '0 0 20px', maxWidth: 640 }}>
            Abrí y gestioné más de seis restaurantes. Cada uno dejó experiencia, aprendizajes y, sobre todo, una conclusión muy clara:
            en gastronomía no alcanza con vender bien. Hay que saber exactamente qué se compra, cuánto cuesta y dónde se está yendo la plata.
          </p>
          <p className="body-lg" style={{ color: 'rgba(246,241,231,.85)', margin: '0 0 20px', maxWidth: 640 }}>
            Con el tiempo entendí que muchas de esas pérdidas no aparecen de golpe. Se acumulan de a poco: una compra cara, una diferencia de precio,
            una factura que nadie controla, un proveedor que aumenta, una receta que dejó de ser rentable.
          </p>
          <p className="body-lg" style={{ color: '#F6F1E7', margin: '0 0 20px', maxWidth: 640 }}>
            <strong>{BRAND.name} nació para hacer visible todo eso a tiempo.</strong>
          </p>
          <p className="body-lg" style={{ color: 'rgba(246,241,231,.85)', margin: '0 0 36px', maxWidth: 640 }}>
            Es el sistema que me hubiera gustado tener desde el primer restaurante. Hoy se usa en la operación real de Tero Restó, en Benavídez,
            controlando compras, facturas, proveedores y recetas con información real de todos los días.
          </p>
          <p className="display" style={{ fontSize: 'clamp(24px, 2.4vw, 32px)', lineHeight: 1.25, margin: '0 0 36px', maxWidth: 600, paddingLeft: 22, borderLeft: '2px solid var(--accent-soft)' }}>
            <em style={{ color: '#F6F1E7' }}>La experiencia no viene solamente de lo que salió bien. También viene de haber aprendido qué controlar antes de que sea tarde.</em>
          </p>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 18, flexWrap: 'wrap' }}>
            <span className="hand" style={{ fontSize: 46, lineHeight: 1, color: '#F6F1E7' }}>Francisco Pidal</span>
            <span style={{ fontSize: 14, color: 'rgba(246,241,231,.7)', paddingBottom: 6 }}>
              Fundador · {BRAND.name}, gastronómico desde hace años
            </span>
          </div>
        </div>
      </div>
      <div className="gajo-def" style={{ display: 'grid', gridTemplateColumns: 'auto minmax(0,1fr) minmax(0,1.3fr)', gap: 40, alignItems: 'center', marginTop: 96, paddingTop: 40, borderTop: '1px solid rgba(246,241,231,.25)' }}>
        <Icon.Logo size={88}/>
        <div>
          <div className="kicker" style={{ color: 'var(--accent-soft)', marginBottom: 12 }}><span>Por qué Gajo</span></div>
          <div className="display" style={{ fontSize: 'clamp(40px, 4.6vw, 64px)', lineHeight: 1 }}>ga·jo</div>
          <div style={{ fontSize: 15, color: 'rgba(246,241,231,.7)', marginTop: 8 }}><em>sustantivo.</em> Cada una de las partes en que se divide una fruta.</div>
        </div>
        <p className="body-lg" style={{ margin: 0, color: 'rgba(246,241,231,.88)', maxWidth: 560 }}>
          Un plato también se divide en partes: cada insumo se lleva su porción del precio. Saber cuánto se lleva cada una es lo que uno busca,
          y es lo que {BRAND.name} te muestra.
        </p>
      </div>
    </div>
    <style>{`@media (max-width:920px){.about-grid{grid-template-columns:1fr!important;gap:56px!important}.gajo-def{grid-template-columns:auto minmax(0,1fr)!important;gap:24px 28px!important}.gajo-def p{grid-column:1/-1}}`}</style>
  </section>
);

const PLANES_V2 = [
  { id: 'esencial', name: 'Esencial', impl: 'USD 350', mes: 'USD 89', para: 'Restó chico, una cocina, hasta 60 platos',
    incluye: ['Insumos', 'Recetas', 'Elaboraciones', 'Carta costeada', 'Alertas de precio'], noIncluye: ['Órdenes de compra', 'Facturas', 'Inventario'], cta: 'Empezar' },
  { id: 'profesional', name: 'Profesional', impl: 'USD 600', mes: 'USD 149', featured: true, para: 'Circuito completo de compras',
    incluye: ['Todo Esencial', 'Órdenes de compra', 'Conciliación factura-orden', 'Inventario', 'Consumo diario', '6 usuarios'], cta: 'Quiero el Profesional' },
  { id: 'grupo', name: 'Grupo', impl: 'desde USD 3.500', mes: 'USD 250', para: 'Multi-local y desarrollos a medida',
    incluye: ['Todo Profesional', 'Varios locales', 'Integración con sistema de ventas'], cta: 'Hablemos' },
];

const PricingV2 = () => (
  <section id="precios">
    <div className="container">
      <div className="menu-card" style={{
        maxWidth: 1180, margin: '0 auto', background: 'var(--paper)', border: '1.5px solid var(--ink)',
        outline: '1px solid var(--ink)', outlineOffset: -12, padding: '64px 56px 48px', boxShadow: '8px 8px 0 var(--ink)',
      }}>
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <div className="kicker" style={{ justifyContent: 'center' }}><span>Precios</span></div>
          <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 70px)', margin: '18px 0 8px' }}>Tres planes. <em>Sin rangos.</em></h2>
          <div className="hand" style={{ fontSize: 22, color: 'var(--ink-muted)' }}>valores en dólares, sin letra chica</div>
        </div>

        <div className="plan-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0,1fr))', borderTop: '1.5px solid var(--ink)', borderBottom: '1.5px solid var(--ink)' }}>
        {PLANES_V2.map((p, i) => (
          <article key={p.id} style={{ padding: '30px 28px 32px', borderLeft: i ? '1px solid var(--line-strong)' : 'none', background: p.featured ? 'var(--bg-soft)' : 'transparent', display: 'flex', flexDirection: 'column' }}>
            <div className="eyebrow" style={{ height: 18, color: 'var(--accent)' }}>{p.featured ? 'Más elegido' : ''}</div>
            <h3 className="display" style={{ fontSize: 40, margin: '6px 0 6px' }}>{p.name}</h3>
            <p style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 17.5, color: 'var(--ink-soft)', margin: 0, minHeight: 52 }}>{p.para}</p>
            <div style={{ borderTop: '1px solid var(--line)', marginTop: 18, paddingTop: 18 }}>
              <div className="display" style={{ fontSize: 'clamp(36px, 3.4vw, 46px)', color: p.featured ? 'var(--accent)' : 'var(--primary)', whiteSpace: 'nowrap' }}>{p.mes}</div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--ink-soft)', marginTop: 6 }}>por mes · implementación <strong style={{ color: 'var(--ink)', whiteSpace: 'nowrap' }}>{p.impl}</strong></div>
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: '22px 0 0', borderTop: '1px solid var(--line)', flex: 1 }}>
              {p.incluye.map(x => (
                <li key={x} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', padding: '9px 0', borderBottom: '1px dashed var(--line)', fontSize: 15 }}>
                  <span style={{ color: 'var(--primary)', marginTop: 3, flexShrink: 0 }}><Icon.Check size={14}/></span>{x}
                </li>
              ))}
              {(p.noIncluye || []).map(x => (
                <li key={x} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', padding: '9px 0', borderBottom: '1px dashed var(--line)', fontSize: 15, color: 'var(--ink-muted)' }}>
                  <span style={{ marginTop: 3, flexShrink: 0 }}><Icon.Minus size={14}/></span>{x}
                </li>
              ))}
            </ul>
            <a href="#diagnostico" className={'btn ' + (p.featured ? 'btn-primary' : 'btn-ghost')} style={{ marginTop: 26, justifyContent: 'center', whiteSpace: 'normal', textAlign: 'center' }}>{p.cta}<Icon.Arrow size={15}/></a>
          </article>
        ))}
        </div>
        <div style={{ paddingTop: 26, textAlign: 'center', fontSize: 14, color: 'var(--ink-muted)', lineHeight: 1.7 }}>
          Implementación: 50% al firmar, 50% contra entrega. Abono por adelantado.<br/>
          Facturación en pesos al tipo de cambio <Confirmar/>
        </div>
      </div>
    </div>
    <style>{`@media (max-width:1040px){.plan-grid{grid-template-columns:1fr!important}.plan-grid>article{border-left:none!important;border-top:1px solid var(--line-strong)}.plan-grid>article:first-child{border-top:none}.plan-grid p{min-height:0!important}}@media (max-width:700px){.menu-card{padding:48px 20px 36px!important;outline-offset:-8px!important;box-shadow:5px 5px 0 var(--ink)!important}.plan-grid>article{padding:26px 16px 28px!important}}`}</style>
  </section>
);

const LETRA_V2 = [
  ['Tus datos son tuyos.', 'Exportás todo a Excel cuando quieras, sin costo.'],
  ['Sin permanencia.', 'Te das de baja con 30 días de aviso. Sin penalidad ni renovación automática.'],
  ['Cero porcentaje.', 'No cobramos sobre tus ventas, compras ni resultados.'],
  ['Precio congelado 12 meses.', 'Cualquier ajuste, con 60 días de aviso.'],
  ['Garantía de 60 días.', 'Si no te sirve, te devolvemos la implementación.'],
  ['Confidencialidad.', 'Tus recetas y márgenes nunca se usan como ejemplo sin tu autorización por escrito.'],
];

const LetraV2 = () => (
  <section id="letra-chica" style={{ paddingTop: 40 }}>
    <div className="container">
      <SectionHead eyebrow="Condiciones" title={<>La letra chica, <em>en grande.</em></>}/>
      <ol className="letra-grid" style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0,1fr))', columnGap: 80, borderTop: '1.5px solid var(--ink)' }}>
        {LETRA_V2.map(([t, d], i) => (
          <li key={t} style={{ display: 'grid', gridTemplateColumns: '64px minmax(0,1fr)', gap: 12, padding: '34px 0', borderBottom: '1px solid var(--line-strong)' }}>
            <span className="display" style={{ fontSize: 46, lineHeight: .9, color: 'var(--accent)' }}>{i + 1}.</span>
            <div>
              <h3 className="display" style={{ fontSize: 30, margin: '0 0 8px' }}>{t}</h3>
              <p className="body" style={{ margin: 0, fontSize: 16.5 }}>{d}</p>
            </div>
          </li>
        ))}
      </ol>
    </div>
    <style>{`@media (max-width:820px){.letra-grid{grid-template-columns:1fr!important}}`}</style>
  </section>
);

Object.assign(window, { ResultsV2, AboutV2, PricingV2, LetraV2 });