// Ejemplo ilustrativo: una factura que se concilia contra su orden de compra
const HERO_LINES = [
  { n: 'Aceite de oliva salón', u: 'lt', ped: 36, lleg: 18, oc: 9850, fac: 9850 },
  { n: 'Linguini', u: 'kg', ped: 10, lleg: 10, oc: 6050, fac: 6050 },
  { n: 'Salsa de soja', u: 'lt', ped: 6, lleg: 6, oc: 9148, fac: 9148 },
  { n: 'Queso parmesano', u: 'kg', ped: 3, lleg: 3, oc: 18900, fac: 25515 },
  { n: 'Arroz carnaroli', u: 'kg', ped: 5, lleg: 5, oc: 7400, fac: 7400 },
];
const lineDiff = l => (l.ped - l.lleg) * l.fac + l.lleg * (l.fac - l.oc);

const HERO_INDEX = [
  ['Órdenes de compra', 'gasto comprometido bajo control'],
  ['Proveedores', 'cambios y diferencias detectados'],
  ['Precios', 'con historial y alertas'],
  ['Food Cost', 'evolución diaria y mensual'],
];

const HeroV2 = () => {
  const [step, setStep] = React.useState(-1);
  const [ref, seen] = useInView(0.35);
  const n = HERO_LINES.length;
  const running = step >= 0 && step < n;
  const done = step >= n;

  React.useEffect(() => {
    if (!running) return;
    const id = setTimeout(() => setStep(s => s + 1), 620);
    return () => clearTimeout(id);
  }, [step, running]);

  React.useEffect(() => {
    if (!seen) return;
    const id = setTimeout(() => setStep(s => (s < 0 ? 0 : s)), 900);
    return () => clearTimeout(id);
  }, [seen]);

  return (
    <section style={{ padding: '76px 0 120px', overflow: 'hidden' }}>
      <div className="container">
        <div className="hero-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.02fr)', gap: 64, alignItems: 'center' }}>
          <div>
            <div className="kicker" style={{ marginBottom: 30 }}><span>Software de costos y compras para gastronomía</span></div>
            <h1 className="display" style={{ fontSize: 'clamp(50px, 6.8vw, 102px)', lineHeight: .97, margin: '0 0 34px', letterSpacing: '-.025em' }}>
              ¿Cuánto te cobraron <HandUnderline><em>de más</em></HandUnderline> este mes?
            </h1>
            <p className="body-lg" style={{ maxWidth: 540, margin: '0 0 24px' }}>
              La mayoría de los restaurantes paga las facturas sin compararlas con lo que pidió. {BRAND.name} controla cada factura
              contra la orden de compra y te avisa cuando un precio, una cantidad o un envase no coincide — antes de pagar.
            </p>
            <p style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 27, lineHeight: 1.2, color: 'var(--primary)', margin: '0 0 42px', maxWidth: 520 }}>
              Dejás de descubrir aumentos y pasás a autorizarlos.
            </p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginBottom: 60 }}>
              <a href="#diagnostico" className="btn btn-primary btn-lg">Quiero mi diagnóstico gratis<Icon.Arrow size={16}/></a>
              <a href="#sistema" className="btn btn-ghost btn-lg">Ver el sistema en acción</a>
            </div>
            <div className="hero-index" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0,1fr))', columnGap: 32, borderTop: '1.5px solid var(--ink)' }}>
              {HERO_INDEX.map(([a, b], i) => (
                <div key={a} style={{ padding: '16px 0 15px', borderBottom: '1px solid var(--line-strong)' }}>
                  <div style={{ display: 'flex', gap: 10, alignItems: 'baseline' }}>
                    <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--accent)' }}>0{i + 1}</span>
                    <span style={{ fontFamily: 'var(--serif)', fontSize: 21, lineHeight: 1.15 }}>{a}</span>
                  </div>
                  <div style={{ fontSize: 13.5, color: 'var(--ink-muted)', marginTop: 3, paddingLeft: 27 }}>{b}</div>
                </div>
              ))}
            </div>
          </div>

          <div ref={ref}>
            <ScaleToFit design={580}>
              <HeroComposition step={step} done={done} running={running} onRun={() => setStep(0)}/>
            </ScaleToFit>
          </div>
        </div>
      </div>
      <style>{`@media (max-width:1040px){.hero-grid{grid-template-columns:1fr!important;gap:56px!important}}@media (max-width:480px){.hero-index{grid-template-columns:1fr!important}}`}</style>
    </section>
  );
};

const HeroComposition = ({ step, done, running, onRun }) => {
  const total = HERO_LINES.reduce((s, l) => s + l.ped * l.fac, 0);
  const diff = HERO_LINES.reduce((s, l) => s + lineDiff(l), 0);
  const cols = 'minmax(0,1fr) 62px 80px 20px';

  return (
    <div style={{ position: 'relative', width: 580, height: 670 }}>
      {/* Orden de compra (atrás) */}
      <div style={{
        position: 'absolute', left: 0, top: 6, width: 300, transform: 'rotate(-5deg)', zIndex: 1,
        background: 'var(--kraft)', padding: '22px 22px 24px', boxShadow: '4px 8px 20px rgba(60,40,20,.15)',
      }}>
        <div className="eyebrow" style={{ color: 'var(--ink-soft)' }}>Orden de compra</div>
        <div style={{ fontFamily: 'var(--serif)', fontSize: 24, lineHeight: 1.1, margin: '4px 0 2px' }}>OC A01-0448</div>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 10.5, color: 'var(--ink-soft)', marginBottom: 14 }}>Delico · 13/08/2026</div>
        {HERO_LINES.map(l => (
          <div key={l.n} style={{ display: 'flex', justifyContent: 'space-between', gap: 8, padding: '5px 0', borderTop: '1px dashed rgba(28,25,23,.2)', fontSize: 12 }}>
            <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{l.ped} {l.u} · {l.n}</span>
            <span style={{ fontFamily: 'var(--mono)', flexShrink: 0 }}>{ars(l.oc)}</span>
          </div>
        ))}
        <Stamp color="var(--olive)" rotate={-3} size={.85} style={{ marginTop: 16 }}>Precio acordado</Stamp>
      </div>

      {/* Factura (adelante) */}
      <div style={{ position: 'absolute', right: 0, top: 92, width: 402, transform: 'rotate(1.6deg)', zIndex: 2, filter: 'drop-shadow(5px 10px 16px rgba(60,40,20,.17))' }}>
        <span className="tape" style={{ left: 154, transform: 'rotate(-3deg)' }}/>
        <Receipt pad="28px 26px 40px">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10 }}>
            <div>
              <div className="eyebrow" style={{ color: 'var(--ink-soft)' }}>Factura A</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 25, lineHeight: 1.1, margin: '3px 0 2px' }}>0006-00055412</div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 10.5, color: 'var(--ink-muted)' }}>Delico · 15/08/2026</div>
            </div>
            <span style={{ fontFamily: 'var(--mono)', fontSize: 9.5, color: 'var(--ink-muted)', border: '1px solid var(--line-strong)', padding: '2px 6px', borderRadius: 2 }}>EJEMPLO</span>
          </div>

          <div style={{ borderTop: '1.5px dashed var(--line-strong)', margin: '16px 0 6px' }}/>
          <div style={{ display: 'grid', gridTemplateColumns: cols, gap: 8, padding: '4px 0', fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '.1em', color: 'var(--ink-muted)' }}>
            <span>INSUMO</span><span style={{ textAlign: 'right' }}>CANT.</span><span style={{ textAlign: 'right' }}>P. UNIT.</span><span/>
          </div>

          {HERO_LINES.map((l, i) => {
            const checked = done || i < step;
            const current = running && i === step;
            const qtyBad = l.lleg < l.ped, priceBad = l.fac !== l.oc, bad = qtyBad || priceBad;
            return (
              <div key={l.n} style={{
                display: 'grid', gridTemplateColumns: cols, gap: 8, alignItems: 'center', padding: '9px 6px', margin: '0 -6px',
                background: current ? 'var(--accent-tint)' : 'transparent', transition: 'background 300ms ease',
                borderTop: '1px solid var(--line)',
              }}>
                <span style={{ fontSize: 13.5 }}>{l.n}</span>
                <span style={{ fontFamily: 'var(--mono)', fontSize: 12.5, textAlign: 'right' }}>
                  <span style={{ position: 'relative', display: 'inline-block' }}>{l.ped} {l.u}<HandCircle show={checked && qtyBad} pad={6}/></span>
                </span>
                <span style={{ fontFamily: 'var(--mono)', fontSize: 12.5, textAlign: 'right' }}>
                  <span style={{ position: 'relative', display: 'inline-block' }}>{ars(l.fac)}<HandCircle show={checked && priceBad} pad={6}/></span>
                </span>
                <span style={{ display: 'inline-flex', justifyContent: 'center' }}>
                  {checked
                    ? (bad ? <span style={{ color: 'var(--bad)', display: 'inline-flex' }}><Icon.X size={14}/></span>
                           : <span style={{ color: 'var(--olive)', display: 'inline-flex' }}><Icon.Check size={15}/></span>)
                    : <span style={{ color: 'var(--line-strong)', fontFamily: 'var(--mono)' }}>·</span>}
                </span>
                {checked && bad && (
                  <span className="hand" style={{ gridColumn: '1 / -1', textAlign: 'right', fontSize: 19, color: 'var(--bad)', lineHeight: 1, marginTop: 4, animation: 'fadeInUp 300ms ease both' }}>
                    {qtyBad ? `llegaron ${l.lleg} ${l.u}, facturaron ${l.ped}` : `+${Math.round((l.fac / l.oc - 1) * 100)}% contra la orden`}
                  </span>
                )}
              </div>
            );
          })}

          <div style={{ borderTop: '1.5px dashed var(--line-strong)', margin: '6px 0 0', paddingTop: 12, display: 'flex', justifyContent: 'space-between', fontSize: 13.5 }}>
            <span style={{ color: 'var(--ink-soft)' }}>Total facturado</span>
            <span style={{ fontFamily: 'var(--mono)', fontWeight: 600 }}>{ars(total)}</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13.5, marginTop: 6, color: 'var(--bad)', opacity: done ? 1 : 0, transition: 'opacity 300ms ease' }}>
            <span>Cobrado de más</span>
            <span style={{ fontFamily: 'var(--mono)', fontWeight: 600 }}>{ars(diff)}</span>
          </div>

          <button onClick={onRun} disabled={running} className="btn btn-ghost" style={{ marginTop: 18, fontSize: 13, padding: '9px 14px' }}>
            {done ? 'Volver a conciliar' : running ? 'Conciliando contra la orden…' : 'Conciliar contra la orden'}
          </button>
        </Receipt>
      </div>

      {done && (
        <div style={{ position: 'absolute', left: 14, bottom: 118, zIndex: 3, animation: 'stampIn 420ms cubic-bezier(.2,1.3,.4,1) both' }}>
          <Stamp color="var(--bad)" rotate={-11} size={1.2}>
            <span>Diferencia</span>
            <span style={{ fontSize: '1.55em', letterSpacing: '.02em' }}>{ars(diff)}</span>
          </Stamp>
        </div>
      )}
      {done && (
        <div className="hand" style={{
          position: 'absolute', left: 0, bottom: -6, zIndex: 3, width: 162, padding: '14px 16px',
          background: '#F1E3A4', transform: 'rotate(-2.5deg)', boxShadow: '2px 6px 14px rgba(60,40,20,.18)',
          fontSize: 21, lineHeight: 1.12, color: 'var(--ink)', animation: 'fadeInUp 420ms 260ms ease both',
        }}>Reclamar antes de pagar →</div>
      )}
    </div>
  );
};

window.HeroV2 = HeroV2;