// ROI + Casos + CTA + Footer — i18n

const ROI = () => {
  const { t, lang } = window.useT();
  const r = t.roi;
  const [tecnicos, setTecnicos] = React.useState(3);
  const [horas, setHoras] = React.useState(15);
  const [coste, setCoste] = React.useState(35);

  const semanas = 46;
  const perdidas = tecnicos * horas * coste * semanas;
  const inversion = 7000;
  const ahorro = perdidas - inversion;
  const payback = inversion / (perdidas / 12);
  const fmt = (n) => n.toLocaleString(lang === 'en' ? 'en-US' : 'es-ES', { maximumFractionDigits: 0 });

  return (
    <section id="roi" data-screen-label="06 ROI" style={{ padding: '120px 0 80px' }}>
      <div className="container">
        <SectionHead num={r.head} title={r.title} kicker={r.kicker} />

        <div className="grid-12" style={{ alignItems: 'stretch' }}>
          <div style={{ gridColumn: '1 / 7', border: '1px solid var(--ink)', borderRadius: 24, padding: '40px 36px' }}>
            <h3 className="serif" style={{ fontSize: 40, fontStyle: 'italic', fontWeight: 400, marginBottom: 28, lineHeight: 1 }}>{r.title2}</h3>

            {[
            { label: r.q1, value: tecnicos, set: setTecnicos, min: 1, max: 30, step: 1, suffix: '' },
            { label: r.q2, value: horas, set: setHoras, min: 2, max: 40, step: 1, suffix: 'h' },
            { label: r.q3, value: coste, set: setCoste, min: 15, max: 80, step: 1, suffix: '€' }].
            map((f, i) =>
            <div key={i} style={{ marginBottom: 28 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
                  <span className="mono" style={{ opacity: 0.7 }}>{f.label}</span>
                  <span className="serif" style={{ fontSize: 36, fontStyle: 'italic', lineHeight: 1, color: 'var(--accent)' }}>{f.value}{f.suffix}</span>
                </div>
                <input type="range" min={f.min} max={f.max} step={f.step} value={f.value} onChange={(e) => f.set(+e.target.value)} />
                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6 }} className="mono">
                  <span style={{ opacity: 0.5 }}>{f.min}{f.suffix}</span>
                  <span style={{ opacity: 0.5 }}>{f.max}{f.suffix}</span>
                </div>
              </div>
            )}
          </div>

          <div style={{ gridColumn: '7 / 13', background: 'var(--ink)', color: 'var(--paper)', borderRadius: 24, padding: '40px 36px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', top: -120, right: -120, width: 360, height: 360, opacity: 0.5 }}>
              <div className="blob" style={{ width: '100%', height: '100%' }} />
            </div>

            <div style={{ position: 'relative' }}>
              <span className="mono" style={{ opacity: 0.5 }}>{r.result}</span>
              <p className="serif" style={{ fontStyle: 'italic', fontSize: 28, fontWeight: 300, marginTop: 12, maxWidth: 380 }}>{r.lede}</p>
            </div>

            <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginTop: 32 }}>
              <div>
                <span className="mono" style={{ opacity: 0.5 }}>{r.lose}</span>
                <div className="serif" style={{ fontSize: 64, fontStyle: 'italic', lineHeight: 0.9, color: 'var(--accent-2)', marginTop: 4 }}>€{fmt(perdidas)}</div>
              </div>
              <div>
                <span className="mono" style={{ opacity: 0.5 }}>{r.invest}</span>
                <div className="serif" style={{ fontSize: 36, fontStyle: 'italic', lineHeight: 0.9, marginTop: 4 }}>~€{fmt(inversion)}</div>
              </div>
              <div>
                <span className="mono" style={{ opacity: 0.5 }}>{r.save}</span>
                <div className="serif" style={{ fontSize: 56, fontStyle: 'italic', lineHeight: 0.9, color: 'var(--accent)', marginTop: 4 }}>€{fmt(ahorro)}</div>
              </div>
              <div>
                <span className="mono" style={{ opacity: 0.5 }}>{r.payback}</span>
                <div className="serif" style={{ fontSize: 36, fontStyle: 'italic', lineHeight: 0.9, marginTop: 4 }}>{payback.toFixed(1)} {r.months}</div>
              </div>
            </div>

            <button className="btn btn-accent" style={{ marginTop: 32, alignSelf: 'flex-start' }}>{r.cta}<Arrow /></button>
          </div>
        </div>
      </div>
    </section>);

};

const Casos = () => {
  const { t } = window.useT();
  const c = t.casos;
  return (
    <section id="casos" data-screen-label="07 Casos" style={{ padding: '120px 0 80px', background: 'var(--paper-2)' }}>
      <div className="container">
        <SectionHead num={c.head} title={c.title} kicker={c.kicker} />

        <div className="grid-12">
          {c.list.map((it, i) =>
          <div key={i} style={{ gridColumn: 'span 6', padding: '40px 36px', border: '1px solid var(--ink)', borderRadius: 24, background: 'var(--paper)', position: 'relative' }}>
              <span className="serif" style={{ fontSize: 120, fontStyle: 'italic', lineHeight: 0.7, color: 'var(--accent)', display: 'block', marginBottom: -8 }}>"</span>
              <p className="serif" style={{ fontSize: 32, fontStyle: 'italic', fontWeight: 300, lineHeight: 1.15, letterSpacing: '-0.01em' }}>{it.q}</p>
              <div style={{ marginTop: 32, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', borderTop: '1px solid var(--rule)', paddingTop: 18 }}>
                <div>
                  <div style={{ fontWeight: 600 }}>{it.author}</div>
                  <div className="mono" style={{ opacity: 0.6, marginTop: 2 }}>{it.role}</div>
                </div>
                <span className="tag">{it.meta}</span>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

const CTA = () => {
  const { t } = window.useT();
  const c = t.cta;
  return (
    <section data-screen-label="08 CTA" style={{ padding: '160px 0 120px', position: 'relative', overflow: 'hidden' }}>
      <div className="container" style={{ position: 'relative' }}>
        <div style={{ position: 'absolute', right: -80, top: -40, width: 320, height: 320, opacity: 0.7, zIndex: 0 }}>
          <div className="blob" style={{ width: '100%', height: '100%' }} />
        </div>

        <div style={{ position: 'relative', zIndex: 1, maxWidth: 1100 }}>
          <span className="mono" style={{ opacity: 0.6 }}>{c.kicker}</span>
          <h2 className="serif" style={{ fontSize: 'clamp(72px, 12vw, 220px)', lineHeight: 0.84, fontWeight: 300, letterSpacing: '-0.04em', marginTop: 16 }}>
            {c.h2a}
            <br />
            <span className="serif-wonk" style={{ fontStyle: 'italic' }}>{c.h2b}</span>
            <br />
            {c.h2c}
          </h2>
        </div>

        <div className="grid-12" style={{ marginTop: 48, alignItems: 'end' }}>
          <div style={{ gridColumn: '1 / 7' }}>
            <p style={{ fontSize: 22, lineHeight: 1.4, maxWidth: 480 }}>{c.lede}</p>
          </div>
          <div style={{ gridColumn: '7 / 13', display: 'flex', gap: 14, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
            <button className="btn" style={{ fontSize: 16, padding: '20px 28px' }}>{c.demo}<Arrow /></button>
            <button className="btn btn-accent" style={{ fontSize: 16, padding: '20px 28px' }}>{c.book}<Arrow /></button>
          </div>
        </div>
      </div>
    </section>);

};

const Footer = () => {
  const { t } = window.useT();
  const f = t.footer;
  return (
    <footer data-screen-label="09 Footer" style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '80px 0 32px' }}>
      <div className="container">
        <div className="grid-12" style={{ alignItems: 'start' }}>
          <div style={{ gridColumn: '1 / 5' }}>
            <Logo />
            <p className="serif" style={{ fontStyle: 'italic', fontSize: 22, marginTop: 24, maxWidth: 320, lineHeight: 1.3 }}>{f.tag}</p>
          </div>

          {f.cols.map((col, i) =>
          <div key={i} style={{ gridColumn: 'span 2' }}>
              <span className="mono" style={{ opacity: 0.5 }}>{col.h}</span>
              <ul style={{ listStyle: 'none', marginTop: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {col.items.map((it) => <li key={it}><a href="#">{it}</a></li>)}
              </ul>
            </div>
          )}

          <div style={{ gridColumn: '11 / 13' }}>
            <span className="mono" style={{ opacity: 0.5 }}>{f.compliance}</span>
            <ul style={{ listStyle: 'none', marginTop: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
              <li className="tag" style={{ borderColor: 'rgba(241,236,228,0.2)' }}><span className="tag-dot" />Kit Digital</li>
              <li className="tag" style={{ borderColor: 'rgba(241,236,228,0.2)' }}><span className="tag-dot" />{t.lang === 'en' ? 'GDPR' : 'RGPD'}</li>
              <li className="tag" style={{ borderColor: 'rgba(241,236,228,0.2)' }}><span className="tag-dot" />EU-hosted</li>
            </ul>
          </div>
        </div>

        <div style={{ marginTop: 80, paddingTop: 24, borderTop: '1px solid rgba(241,236,228,0.15)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }} className="mono">
          <span style={{ opacity: 0.5 }}>{f.copy}</span>
          <span style={{ opacity: 0.5 }}>{f.cert}</span>
          <span style={{ opacity: 0.5 }}>{f.ver}</span>
        </div>

        <div style={{
          marginTop: 60, fontFamily: 'Fraunces, serif',
          fontStyle: 'italic',
          fontWeight: 300, lineHeight: 0.85, letterSpacing: '-0.05em',
          textAlign: 'center', opacity: 0.95, fontSize: "250px"
        }}>
          Orden Claro
        </div>
      </div>
    </footer>);

};

Object.assign(window, { ROI, Casos, CTA, Footer });