// Tarjeta de una unidad (A o B). Muestra bloques explícitamente etiquetados:
// - CONFIRMADO (azul sobrio)
// - PENDIENTE DE CONFIRMACIÓN (ámbar)
const UnitCard = ({ t, unitId, title, shortLabel, copy, confirmed, pending, refCaption }) => (
  <article className="unit-card" id={`unit-${unitId}`}>
    <header className="unit-head">
      <div className="unit-tag">
        <span className="unit-badge-letter">{unitId.toUpperCase()}</span>
      </div>
      <div className="unit-head-text">
        <h3>{title}</h3>
        {shortLabel ? <div className="unit-short">{shortLabel}</div> : null}
      </div>
    </header>

    <p className="unit-copy">{copy}</p>

    <div className="unit-blocks">
      <div className="unit-block block-confirmed">
        <div className="block-label label-confirmed">
          <i data-lucide="check-circle-2"></i>
          <span>{t.label_confirmed.toUpperCase()}</span>
        </div>
        <ul className="kv-list">
          {confirmed.map((row) => (
            <li key={row.k}>
              <span className="k">{row.k}</span>
              <span className="v">{row.v}</span>
            </li>
          ))}
        </ul>
      </div>

      <div className="unit-block block-pending">
        <div className="block-label label-pending">
          <i data-lucide="alert-triangle"></i>
          <span>{t.label_pending.toUpperCase()}</span>
        </div>
        <ul className="pending-list">
          {pending.map((row) => (
            <li key={row}>{row}</li>
          ))}
        </ul>
      </div>
    </div>
  </article>
);

const UnitsSection = ({ t }) => (
  <section id="units" className="section">
    <div className="container">
      <div className="section-head">
        <div className="eyebrow">{t.units_eyebrow}</div>
        <h2>{t.units_title}</h2>
        <p className="section-lede">{t.units_lede}</p>
      </div>

      <div className="units-grid">
        <UnitCard
          t={t}
          unitId="a"
          title={t.unit_a_title}
          shortLabel={t.unit_a_short}
          copy={t.unit_a_copy}
          confirmed={t.unit_a_confirmed}
          pending={t.unit_a_pending}
        />
        <UnitCard
          t={t}
          unitId="b"
          title={t.unit_b_title}
          shortLabel={t.unit_b_short}
          copy={t.unit_b_copy}
          confirmed={t.unit_b_confirmed}
          pending={t.unit_b_pending}
        />
      </div>
    </div>
  </section>
);

window.UnitsSection = UnitsSection;