// El valor en números — las tres métricas que compra el dueño,
// y la garantía operativa como banda editorial con marquee.
function Valor() {
  const [lang] = useLang();
  const C = window.FUSE_CONTENT.valor;
  const [pre, emph, post] = C.h2[lang];
  const marqueeItems = C.marquee[lang];

  return (
    <section id="valor" className="section divider-top" style={{ background: 'var(--paper-2)' }} data-screen-label="valor">
      <div className="container">
        <header className="reveal" style={{ marginBottom: 'clamp(36px, 5vw, 56px)' }}>
          <div className="kicker kicker-accent">{C.kicker[lang]}</div>
          <h2 className="h-section" style={{ marginTop: 14, maxWidth: '22ch' }}>
            {pre} <span className="mk-emph">{emph}</span>{post}
          </h2>
        </header>

        <div className="val-grid">
          {C.metrics[lang].map((m, i) => (
            <article key={m.title} className="val-card reveal" data-delay={i + 1}>
              <div>
                <div className="vc-big">{m.big}</div>
                <div className="vc-unit">{m.unit}</div>
              </div>
              <h3>{m.title}</h3>
              <p>{m.body}</p>
            </article>
          ))}
        </div>

        <div id="garantia" className="garantia-band reveal" data-delay="2">
          <div className="garantia-marquee" aria-hidden>
            <div className="marquee">
              {[0, 1].map(half => (
                <span key={half} className="gm-item">
                  {marqueeItems.map((it, i) => (
                    <React.Fragment key={i}>
                      <span>{it}</span>
                      <span style={{ opacity: 0.4 }}>·</span>
                    </React.Fragment>
                  ))}
                </span>
              ))}
            </div>
          </div>
          <div className="garantia-inner">
            <div className="g-kicker">{C.garantia_kicker[lang]}</div>
            <p className="g-intro">{C.garantia_lead[lang]}</p>
            <blockquote className="g-quote">«{C.garantia[lang]}»</blockquote>
            <div className="g-clause">
              <p><b>{lang === 'es' ? 'La cláusula.' : 'The clause.'}</b> {C.garantia_clause[lang]}</p>
              <p><b>{lang === 'es' ? 'Sin letra chica.' : 'No fine print.'}</b> {C.garantia_foot[lang]}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Valor = Valor;