// HERO — i18n

const Hero = () => {
  const { t } = window.useT();
  const h = t.hero;
  return (
    <section style={{ position: 'relative', padding: '64px 0 48px', overflow: 'hidden' }} data-screen-label="01 Hero">
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 56 }}>
          <Tag>{h.edition}</Tag>
          <span className="mono" style={{ opacity: 0.6 }}>{h.issue}</span>
          <Tag dot={false}>{h.audience}</Tag>
        </div>

        <div className="grid-12" style={{ alignItems: 'start' }}>
          <div style={{ gridColumn: '1 / 3' }}>
            <p className="mono" style={{ marginBottom: 8, opacity: 0.6 }}>{h.thesisLabel}</p>
            <p className="serif" style={{ fontSize: 17, fontStyle: 'italic', lineHeight: 1.4 }}>{h.thesis}</p>
          </div>

          <div style={{ gridColumn: '3 / 11' }}>
            <h1 className="serif" style={{
              fontSize: 'clamp(64px, 9.5vw, 168px)',
              lineHeight: 0.86, fontWeight: 300,
              letterSpacing: '-0.04em', marginBottom: 0,
            }}>
              {h.h1a}
              <br />
              <span style={{ fontStyle: 'italic', fontWeight: 400 }} className="serif-wonk">{h.h1b}</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 18, verticalAlign: 'middle', marginLeft: 18 }}>
                <span style={{ width: 'clamp(80px, 9vw, 140px)', height: 'clamp(80px, 9vw, 140px)', display: 'inline-block' }}>
                  <span className="blob" style={{ display: 'block', width: '100%', height: '100%' }} />
                </span>
              </span>
              <br />
              {h.h1c}
            </h1>
          </div>

          <div style={{ gridColumn: '11 / 13', textAlign: 'right' }}>
            <p className="mono" style={{ opacity: 0.6, marginBottom: 6 }}>{h.verifLabel}</p>
            <p className="serif" style={{ fontSize: 56, fontStyle: 'italic', lineHeight: 0.9 }}>2027</p>
            <p className="mono" style={{ opacity: 0.6, marginTop: 6 }}>{h.verifReady}</p>
          </div>
        </div>

        <div className="grid-12" style={{ marginTop: 80, alignItems: 'start' }}>
          <div style={{ gridColumn: '1 / 7' }}>
            <p style={{ fontSize: 22, lineHeight: 1.4, maxWidth: 560, fontWeight: 400 }}>
              {h.lede}
              <span className="serif" style={{ fontStyle: 'italic' }}>{h.ledeMid}</span>
              {h.ledeEnd}
            </p>

            <div style={{ display: 'flex', gap: 14, marginTop: 36, flexWrap: 'wrap' }}>
              <button className="btn btn-accent">
                <span style={{ width: 8, height: 8, borderRadius: 999, background: 'var(--paper)' }} />
                {h.ctaDemo}<Arrow />
              </button>
              <button className="btn">{h.ctaDiag}<Arrow /></button>
            </div>

            <div style={{ display: 'flex', gap: 24, marginTop: 32, flexWrap: 'wrap' }} className="mono">
              {h.bullets.map((b, i) => <span key={i}>{b}</span>)}
            </div>
          </div>

          <div style={{ gridColumn: '8 / 13' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <div className="doc" style={{ gridColumn: '1 / 3' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
                  <span className="mono">{h.invoice}</span>
                  <span className="mono" style={{ color: 'var(--accent)' }}>{h.classified}</span>
                </div>
                <div style={{ fontFamily: 'Fraunces, serif', fontSize: 28, lineHeight: 1, marginBottom: 12 }}>{h.vendor}</div>
                <div className="row"><span>{h.base}</span><span>1.840,00 €</span></div>
                <div className="row"><span>{h.iva}</span><span>386,40 €</span></div>
                <div className="row"><span>{h.account}</span><span>{h.accountVal}</span></div>
                <div className="row"><span>{h.source}</span><span>{h.sourceVal}</span></div>
                <div className="row"><span>{h.entry}</span><span style={{ color: 'var(--accent)' }}>{h.entryVal}</span></div>
              </div>

              <div style={{ background: 'var(--ink)', color: 'var(--paper)', borderRadius: 14, padding: 18, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                <span className="mono" style={{ opacity: 0.5 }}>{h.hoursLabel}</span>
                <div className="serif" style={{ fontSize: 64, fontStyle: 'italic', lineHeight: 0.9, color: 'var(--accent-2)' }}>37,5</div>
                <span className="mono" style={{ opacity: 0.5 }}>{h.teamLabel}</span>
              </div>

              <div style={{ background: 'var(--paper-2)', borderRadius: 14, padding: 18, border: '1px solid var(--rule)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                <span className="mono">{h.setupLabel}</span>
                <div className="serif" style={{ fontSize: 56, fontStyle: 'italic', lineHeight: 0.9 }}>0€</div>
                <span className="mono" style={{ opacity: 0.6 }}>{h.kitLabel}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Hero });