const SpecTable = ({ t }) => (
  <section id="compare" className="section section-tinted">
    <div className="container">
      <div className="section-head">
        <div className="eyebrow">{t.table_eyebrow}</div>
        <h2>{t.table_title}</h2>
        <p className="section-lede">{t.table_lede}</p>
      </div>

      {/* Tabla en desktop */}
      <div className="table-wrap desktop-only">
        <table className="spec-table" aria-label={t.table_title}>
          <thead>
            <tr>
              {t.table_headers.map((h) => <th key={h}>{h}</th>)}
            </tr>
          </thead>
          <tbody>
            {t.table_rows.map((row, i) => (
              <tr key={i}>
                <td><strong>{row[0]}</strong></td>
                <td className={row[1] === t.v_pending ? 'is-pending' : 'is-value'}>{row[1]}</td>
                <td className={row[2] === t.v_pending ? 'is-pending' : 'is-value'}>{row[2]}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Cards apiladas en móvil */}
      <div className="table-mobile mobile-only">
        {['a', 'b'].map((u, uIdx) => (
          <div key={u} className="mobile-unit">
            <div className="mobile-unit-head">
              <span className="unit-badge-letter">{u.toUpperCase()}</span>
              <div className="mobile-unit-head-text">
                <strong>{t.table_headers[uIdx + 1]}</strong>
                <div className="mobile-unit-sub">{u === 'a' ? t.unit_a_short : t.unit_b_short}</div>
              </div>
            </div>
            <dl>
              {t.table_rows.map((row, i) => (
                <div key={i} className="mobile-row">
                  <dt>{row[0]}</dt>
                  <dd className={row[uIdx + 1] === t.v_pending ? 'is-pending' : 'is-value'}>{row[uIdx + 1]}</dd>
                </div>
              ))}
            </dl>
          </div>
        ))}
      </div>

      <p className="table-note">
        <i data-lucide="alert-triangle"></i>
        <span>{t.table_note}</span>
      </p>
    </div>
  </section>
);

window.SpecTable = SpecTable;