// El problema · Casos reales · Implementación
const ProblemV2 = () => {
  const [ref, seen] = useInView(0.4);
  const cifras = [
    ['≤30%', 'es el objetivo de incidencia que se fija casi cualquier cocina. Pocos saben si lo están cumpliendo esta semana.'],
    ['13', 'insumos con suba mayor a 7%, detectados en un mes en Tero Restó.'],
    ['1 mes', 'tarde llega el número cuando el cierre lo arma el contador. La decisión ya la tomaste.'],
  ];
  return (
    <section id="problema" style={{ borderTop: '1.5px solid var(--ink)' }}>
      <div className="container">
        <SectionHead eyebrow="El problema" title={<>La ficha técnica que armaste en marzo <em>ya es mentira.</em></>}/>
        <div className="prob-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,7fr) minmax(0,4fr)', gap: 80, alignItems: 'start' }}>
          <div>
            <p className="dropcap" style={{ fontSize: 22, lineHeight: 1.55, color: 'var(--ink)', margin: '0 0 56px', textWrap: 'pretty' }}>
              Manejar una cocina en Argentina es costear contra un blanco móvil. El plato no cambió, la receta no cambió,
              el proveedor es el mismo — pero la incidencia se movió cuatro puntos y nadie lo vio.
            </p>
            <figure ref={ref} style={{ margin: 0, paddingTop: 30, borderTop: '1.5px solid var(--ink)' }}>
              <figcaption className="eyebrow" style={{ marginBottom: 28 }}>Teórica contra real · ejemplo ilustrativo</figcaption>
              <div className="tr-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
                <div>
                  <div style={{ fontSize: 15, color: 'var(--ink-soft)', marginBottom: 6 }}>Tus fichas dicen</div>
                  <div className="display" style={{ fontSize: 'clamp(64px, 8vw, 118px)', color: 'var(--ink-muted)', position: 'relative', display: 'inline-block', lineHeight: 1 }}>
                    33,1%<HandStrike show={seen}/>
                  </div>
                </div>
                <div>
                  <div style={{ fontSize: 15, color: 'var(--ink-soft)', marginBottom: 6 }}>La cocina cierra en</div>
                  <div className="display" style={{ fontSize: 'clamp(64px, 8vw, 118px)', color: 'var(--accent)', position: 'relative', display: 'inline-block', lineHeight: 1 }}>
                    25,1%<HandCircle show={seen} color="var(--olive)" pad={16} width={2}/>
                  </div>
                </div>
              </div>
              <p className="body" style={{ marginTop: 30, maxWidth: 560, fontSize: 17 }}>
                Sin medir las dos, no sabés si te sobra margen o si te estás comiendo el stock.
              </p>
            </figure>
          </div>
          <aside>
            <div className="eyebrow" style={{ paddingBottom: 12, borderBottom: '1.5px solid var(--ink)' }}>En cifras</div>
            {cifras.map(([num, t]) => (
              <div key={num} style={{ padding: '28px 0', borderBottom: '1px solid var(--line-strong)' }}>
                <div className="display" style={{ fontSize: 64, lineHeight: 1, color: 'var(--primary)' }}>{num}</div>
                <p className="body" style={{ margin: '12px 0 0', fontSize: 15.5 }}>{t}</p>
              </div>
            ))}
          </aside>
        </div>
      </div>
      <style>{`@media (max-width:920px){.prob-grid{grid-template-columns:1fr!important;gap:56px!important}}@media (max-width:540px){.tr-grid{grid-template-columns:1fr!important}}`}</style>
    </section>
  );
};

const CASOS_V2 = [
  { t: 'Error de tipeo del proveedor', d: 'El proveedor tipeó mal un precio en la factura. Antes la cargaba la cajera tal cual venía y se pagaba. Como la orden de compra ya tenía el precio acordado, la diferencia saltó sola al conciliar.', r: 'Corregido antes de pagar.' },
  { t: 'Aumento del 35% sin aviso', d: 'Mismo producto, mismo envase, 35% más caro que lo acordado. Se reclamó, el proveedor no respondió, se devolvió la mercadería y se compró a otro a mejor precio.', r: 'Desde entonces ese proveedor confirma precios antes de facturar.' },
  { t: 'El envase que escondía un aumento', d: 'El fabricante pasó de mandar el producto por kilo a mandar 4 paquetes de 250 g. El bulto parecía razonable. El sistema normaliza todo a precio por kilo: era un 25% más caro.', r: 'Se devolvió y volvieron al formato anterior.' },
];

const CaseCard = ({ c, i, visual, big, alt, style }) => (
  <article className={'lift' + (alt ? ' alt' : '')} style={{
    background: 'var(--paper)', border: '1.5px solid var(--ink)', padding: big ? 40 : 30,
    display: 'flex', flexDirection: 'column', gap: 18, ...style,
  }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12 }}>
      <span className="eyebrow" style={{ color: 'var(--accent)' }}>Caso 0{i + 1}</span>
      <span className="eyebrow">Tero Restó</span>
    </div>
    {visual}
    <h3 className="display" style={{ fontSize: big ? 44 : 32, margin: 0 }}>{c.t}</h3>
    <p className="body" style={{ margin: 0, fontSize: big ? 17 : 15.5 }}>{c.d}</p>
    <div style={{ marginTop: 'auto', paddingTop: 16, borderTop: '1px dashed var(--line-strong)', display: 'flex', gap: 10, alignItems: 'flex-start' }}>
      <span style={{ color: 'var(--olive)', marginTop: 3, flexShrink: 0, display: 'inline-flex' }}><Icon.Check size={16}/></span>
      <span style={{ fontSize: 15, color: 'var(--ink)', fontWeight: 600 }}>
        <span style={{ fontWeight: 400, color: 'var(--ink-muted)' }}>Resultado: </span>{c.r}
      </span>
    </div>
  </article>
);

const TypoVisual = () => (
  <div style={{ background: 'var(--bg-soft)', border: '1px solid var(--line-strong)', padding: '26px 24px', position: 'relative', margin: '6px 0' }}>
    <div className="cv-flow" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0,1fr))', gap: 10, alignItems: 'start' }}>
      {[['Factura', 'cargada'], ['Orden', 'precio acordado'], ['Conciliación', 'precio distinto'], ['Pago', 'corregido antes']].map(([a, b], k) => (
        <div key={a} style={{ position: 'relative' }}>
          <div style={{
            width: 34, height: 34, borderRadius: '50%', marginBottom: 10, display: 'flex', alignItems: 'center', justifyContent: 'center',
            border: '1.5px solid ' + (k === 2 ? 'var(--bad)' : 'var(--ink)'), color: k === 2 ? 'var(--bad)' : 'var(--ink)',
            background: k === 3 ? 'var(--olive)' : 'transparent', borderColor: k === 3 ? 'var(--olive)' : undefined,
          }}>
            {k === 2 ? <Icon.X size={15}/> : k === 3 ? <span style={{ color: '#fff', display: 'inline-flex' }}><Icon.Check size={15}/></span> : <span style={{ fontFamily: 'var(--mono)', fontSize: 12 }}>{k + 1}</span>}
          </div>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 19, lineHeight: 1.1 }}>{a}</div>
          <div style={{ fontSize: 12.5, color: k === 2 ? 'var(--bad)' : 'var(--ink-muted)', marginTop: 2 }}>{b}</div>
        </div>
      ))}
    </div>
    <div style={{ position: 'absolute', right: 18, top: -18 }}>
      <Stamp color="var(--olive)" rotate={7} size={.9}>Corregido</Stamp>
    </div>
  </div>
);

const BigPct = () => (
  <div style={{ padding: '4px 0' }}>
    <div className="display" style={{ fontSize: 96, lineHeight: .9, color: 'var(--accent)' }}>
      <HandUnderline color="var(--bad)">+35%</HandUnderline>
    </div>
    <div className="hand" style={{ fontSize: 21, color: 'var(--ink-soft)', marginTop: 14 }}>mismo producto, mismo envase</div>
  </div>
);

const PackVisual = () => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
    <div style={{ border: '1.5px solid var(--ink)', padding: '14px 18px', textAlign: 'center', background: 'var(--kraft-soft)' }}>
      <div className="display" style={{ fontSize: 34, lineHeight: 1 }}>1 kg</div>
      <div className="eyebrow" style={{ marginTop: 4 }}>antes</div>
    </div>
    <span className="display" style={{ fontSize: 34, color: 'var(--bad)' }}>≠</span>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 34px)', gap: 4 }}>
      {[0, 1, 2, 3].map(k => <div key={k} style={{ height: 30, border: '1.5px solid var(--ink)', background: 'var(--paper)', fontFamily: 'var(--mono)', fontSize: 9, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>250g</div>)}
    </div>
    <Stamp color="var(--bad)" rotate={-6} size={.85}>+25% por kilo</Stamp>
  </div>
);

const CasosV2 = () => (
  <section id="casos" style={{ background: 'var(--bg-soft)', borderTop: '1.5px solid var(--ink)', borderBottom: '1.5px solid var(--ink)' }}>
    <div className="container">
      <SectionHead eyebrow="Casos reales" title={<>Tres desvíos que <em>una planilla no ve.</em></>}
        blurb="Pasaron en Tero Restó, el restaurante donde nació este sistema. Le pasan a cualquier cocina."/>
      <div className="bento" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.3fr) minmax(0,1fr)', gap: 24 }}>
        <CaseCard big c={CASOS_V2[0]} i={0} visual={<TypoVisual/>} style={{ gridRow: 'span 2' }}/>
        <CaseCard c={CASOS_V2[1]} i={1} visual={<BigPct/>} alt/>
        <CaseCard c={CASOS_V2[2]} i={2} visual={<PackVisual/>}/>
      </div>
      <blockquote style={{ margin: '72px 0 0', display: 'grid', gridTemplateColumns: '120px minmax(0,1fr)', gap: 24, alignItems: 'start' }} className="clave">
        <span className="kicker" style={{ paddingTop: 16 }}><span>La clave</span></span>
        <p className="display" style={{ fontSize: 'clamp(30px, 3.6vw, 50px)', margin: 0, lineHeight: 1.12 }}>
          La orden de compra lleva el precio. <em>No pedís mercadería, pedís mercadería a ese precio.</em>
        </p>
      </blockquote>
    </div>
    <style>{`
      @media (max-width:960px){.bento{grid-template-columns:1fr!important}.bento>article{grid-row:auto!important}}
      @media (max-width:640px){.clave{grid-template-columns:1fr!important;gap:12px!important}.cv-flow{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:20px!important}}
    `}</style>
  </section>
);

const HowV2 = () => {
  const steps = [
    ['Semana 1', 'Insumos y proveedores', 'Cargamos tus insumos y proveedores desde tus facturas reales.'],
    ['Semana 2', 'Recetas y carta', 'Armamos recetas, elaboraciones y la carta costeada junto con tu cocinero.'],
    ['Semana 3', 'Compras e inventario', 'Ponemos en marcha el circuito de compras, el inventario y capacitamos al equipo.'],
  ];
  return (
    <section id="como-funciona">
      <div className="container">
        <SectionHead eyebrow="Implementación" title={<>Tres semanas. <em>La carga la hacemos nosotros.</em></>}/>
        <ol className="how-line" style={{ listStyle: 'none', margin: 0, padding: 0, display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0,1fr))', gap: 32, borderTop: '1.5px solid var(--ink)' }}>
          {steps.map(([w, t, d], i) => (
            <li key={w} className="how-step" style={{ position: 'relative', paddingTop: 34, marginTop: i * 28 }}>
              <span style={{ position: 'absolute', top: -8 - i * 28, left: 0, width: 15, height: 15, borderRadius: '50%', background: 'var(--accent)', border: '3px solid var(--bg)', boxShadow: '0 0 0 1.5px var(--ink)' }} className="how-dot"/>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 14 }}>
                <span className="display" style={{ fontSize: 56, color: 'var(--accent)', lineHeight: .9 }}>0{i + 1}</span>
                <span className="eyebrow">{w}</span>
              </div>
              <h3 className="display" style={{ fontSize: 30, margin: '0 0 10px' }}>{t}</h3>
              <p className="body" style={{ margin: 0 }}>{d}</p>
            </li>
          ))}
          <li className="how-step" style={{ position: 'relative', paddingTop: 34, marginTop: 84 }}>
            <span className="how-dot" style={{ position: 'absolute', top: -92, left: 0, width: 15, height: 15, borderRadius: '50%', background: 'var(--bg)', border: '1.5px dashed var(--ink)' }}/>
            <HandArrow color="var(--olive)" style={{ marginBottom: 6 }}/>
            <p className="hand" style={{ fontSize: 27, lineHeight: 1.2, color: 'var(--primary)', margin: 0 }}>
              Después: un mes con revisión semanal y soporte por WhatsApp.
            </p>
          </li>
        </ol>
      </div>
      <style>{`@media (max-width:920px){.how-line{grid-template-columns:1fr!important;border-top:none!important;border-left:1.5px solid var(--ink);gap:40px!important;padding-left:28px!important}.how-step{margin-top:0!important;padding-top:0!important}.how-dot{top:6px!important;left:-37px!important}}`}</style>
    </section>
  );
};

Object.assign(window, { ProblemV2, CasosV2, HowV2 });
