// Tablero público — dogfooding estructural: el dashboard de Fuse en la web,
// la demo de 8 minutos, y la tabla de lenguaje (prohibido / obligatorio).
function BoardCell({ stat, lang }) {
  const [ref, val] = useCountUp(stat.value, { duration: 1500 });

  // "2:41" style display for seconds-based stats.
  let shown;
  if (stat.display) {
    const m = Math.floor(val / 60), s = Math.round(val % 60);
    shown = `${m}:${String(s).padStart(2, '0')}`;
  } else {
    shown = `${Math.round(val)}${stat.suffix}`;
  }
  const isGreen = stat.suffix === '%' || stat.display;

  return (
    <div className="board-cell" ref={ref}>
      <span className="bc-val">{isGreen ? <span className="green">{shown}</span> : shown}</span>
      <span className="bc-label">{stat.label}</span>
      <span className="bc-detail">↳ {stat.detail}</span>
    </div>
  );
}

function Tablero() {
  const [lang] = useLang();
  const C = window.FUSE_CONTENT.tablero;
  const [pre, emph, post] = C.h2[lang];
  const [bad, good] = C.lang_cols[lang];

  return (
    <section id="tablero" className="section dark" data-screen-label="tablero">
      <div className="container">
        <header className="reveal" style={{ marginBottom: 'clamp(36px, 5vw, 56px)' }}>
          <div className="kicker" style={{ color: 'var(--rust)', opacity: 1 }}>{C.kicker[lang]}</div>
          <h2 className="h-section" style={{ marginTop: 14, color: 'var(--paper)', maxWidth: '20ch' }}>
            {pre} <em style={{ color: 'var(--rust)' }}>{emph}</em>{post}
          </h2>
          <p style={{ marginTop: 18, fontSize: 15.5, lineHeight: 1.65, color: 'rgba(246,241,231,0.72)', maxWidth: '64ch' }}>
            {C.body[lang]}
          </p>
        </header>

        <div className="board reveal" data-delay="1">
          <div className="board-head">
            <span className="bh-live">{C.board_label[lang]}</span>
            <span>{C.board_status[lang]}</span>
          </div>
          <div className="board-grid">
            {C.stats[lang].map((s, i) => <BoardCell key={i} stat={s} lang={lang} />)}
          </div>
        </div>

        <div className="demo-card reveal" data-delay="2">
          <div>
            <div className="kicker" style={{ color: 'var(--rust)', opacity: 1, marginBottom: 14 }}>{C.demo_kicker[lang]}</div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(1.5rem, 2.8vw, 2.2rem)', letterSpacing: '-0.015em', color: 'var(--paper)', margin: '0 0 14px' }}>
              {C.demo_title[lang]}
            </h3>
            <p style={{ fontSize: 14.5, lineHeight: 1.65, color: 'rgba(246,241,231,0.72)', margin: '0 0 24px' }}>
              {C.demo_body[lang]}
            </p>
            <a href="#cta" className="btn btn-on-dark">{C.demo_cta[lang]} <span style={{ fontFamily: 'var(--font-display)' }}>→</span></a>
          </div>
          <a href="#cta" className="demo-play" aria-label={C.demo_cta[lang]} style={{ textDecoration: 'none' }}>
            <span className="dp-btn" aria-hidden>▶</span>
            <span className="dp-time">08:00 · ES/EN</span>
          </a>
        </div>

        <div className="reveal" data-delay="2" style={{ marginTop: 56 }}>
          <span className="kicker" style={{ color: 'var(--paper)', opacity: 0.55 }}>§ {C.lang_label[lang]}</span>
          <div className="lang-table">
            <table>
              <thead>
                <tr>
                  <th className="bad">✗ {bad}</th>
                  <th className="good">✓ {good}</th>
                </tr>
              </thead>
              <tbody>
                {C.lang_rows[lang].map(([b, g], i) => (
                  <tr key={i}>
                    <td className="bad">{b}</td>
                    <td className="good">{g}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Tablero = Tablero;