// 08 — Catálogo de formación
function CFormacion() {
  const [, t] = window.useLang();
  const [filter, setFilter] = React.useState(0);
  const filterMap = ['all', 'Posgrado', 'Curso', 'Taller', 'Online'];
  const items = t.formacion.items;
  const filtered = filter === 0 ? items : items.filter(it =>
    it.level === filterMap[filter] || it.mode === filterMap[filter]
  );

  return (
    <section className="cgclm-form">
      <style>{`
        .cgclm-form { padding: 80px 40px; background: var(--c-cream); }
        .cgclm-form .cf-head {
          display: flex; align-items: end; justify-content: space-between;
          gap: 24px; margin-bottom: 32px; flex-wrap: wrap;
        }
        .cgclm-form .cf-kicker {
          font: 500 11px var(--font-body);
          letter-spacing: 0.18em; text-transform: uppercase;
          color: var(--c-green-deep);
        }
        .cgclm-form .cf-title {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: clamp(28px, 3.6vw, 44px);
          line-height: 1.05;
          letter-spacing: -0.02em;
          margin: 8px 0 12px;
          color: var(--c-ink);
        }
        .cgclm-form .cf-lede {
          font: 400 16px var(--font-body);
          color: var(--c-ink-soft);
          max-width: 56ch;
          text-wrap: pretty;
        }
        .cgclm-form .cf-filters {
          display: flex; gap: 6px; flex-wrap: wrap;
          margin-bottom: 22px;
          padding-bottom: 16px;
          border-bottom: 1px solid var(--c-line);
        }
        .cgclm-form .cf-filter {
          font: 500 13px var(--font-body);
          padding: 8px 16px;
          border-radius: 999px;
          background: transparent;
          color: var(--c-ink-soft);
          border: 1px solid var(--c-line);
          cursor: pointer;
          transition: all .2s;
        }
        .cgclm-form .cf-filter:hover { color: var(--c-ink); border-color: var(--c-ink); }
        .cgclm-form .cf-filter[data-active="true"] {
          background: var(--c-red); color: white; border-color: var(--c-red);
        }
        .cgclm-form .cf-list {
          display: grid; gap: 12px;
        }
        .cgclm-form .cf-row {
          display: grid;
          grid-template-columns: 80px 1.4fr 1fr 1fr 1fr auto;
          gap: 22px;
          padding: 22px 24px;
          background: var(--c-cream-deep);
          border-radius: 14px;
          align-items: center;
          transition: all .25s;
          border: 1px solid transparent;
        }
        .cgclm-form .cf-row:hover {
          background: var(--c-cream);
          border-color: var(--c-red);
          transform: translateX(4px);
        }
        .cgclm-form .cf-row[data-featured="true"] {
          background: var(--c-aubergine);
          color: var(--c-cream);
        }
        .cgclm-form .cf-row[data-featured="true"]:hover {
          background: var(--c-aubergine);
          border-color: var(--c-saffron);
        }
        .cgclm-form .cf-row[data-featured="true"] .cf-name { color: var(--c-cream); }
        .cgclm-form .cf-row[data-featured="true"] .cf-desc { color: rgba(242,239,228,0.75); }
        .cgclm-form .cf-row[data-featured="true"] .cf-k { color: var(--c-saffron); }
        .cgclm-form .cf-row[data-featured="true"] .cf-v { color: var(--c-cream); }
        .cgclm-form .cf-row[data-featured="true"] .cf-code { color: var(--c-saffron); border-color: var(--c-saffron); }
        .cgclm-form .cf-row[data-featured="true"] .cf-apply { background: var(--c-saffron); color: var(--c-aubergine); }

        .cgclm-form .cf-code {
          font-family: var(--font-impact);
          font-size: 11px;
          letter-spacing: 0.12em;
          padding: 6px 8px;
          border: 1px solid var(--c-ink-soft);
          color: var(--c-ink-soft);
          border-radius: 4px;
          text-align: center;
          align-self: start;
        }
        .cgclm-form .cf-name {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: 19px;
          line-height: 1.2;
          letter-spacing: -0.01em;
          margin: 0 0 6px;
          text-wrap: balance;
        }
        .cgclm-form .cf-tag-row {
          display: flex; gap: 8px; flex-wrap: wrap;
          font: 500 11px var(--font-body);
          letter-spacing: 0.04em;
          color: var(--c-ink-soft);
          margin-bottom: 6px;
        }
        .cgclm-form .cf-tag-row span {
          padding: 2px 8px;
          background: rgba(31,33,24,0.06);
          border-radius: 4px;
        }
        .cgclm-form .cf-row[data-featured="true"] .cf-tag-row span {
          background: rgba(242,239,228,0.12);
          color: rgba(242,239,228,0.85);
        }
        .cgclm-form .cf-desc {
          font: 400 13px/1.5 var(--font-body);
          color: var(--c-ink-soft);
          margin: 0;
          text-wrap: pretty;
        }
        .cgclm-form .cf-stat .cf-k {
          font: 600 10px var(--font-body);
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--c-ink-soft);
          margin-bottom: 4px;
        }
        .cgclm-form .cf-stat .cf-v {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: 18px;
          color: var(--c-ink);
          letter-spacing: -0.01em;
        }
        .cgclm-form .cf-apply {
          font: 600 13px var(--font-body);
          padding: 12px 18px;
          background: var(--c-red); color: white;
          border-radius: 999px;
          text-decoration: none;
          display: inline-flex; align-items: center; gap: 6px;
          transition: all .25s;
          white-space: nowrap;
        }
        .cgclm-form .cf-apply:hover {
          transform: translate(2px, -2px);
          box-shadow: -4px 4px 0 var(--c-ink);
        }
        @media (max-width: 1100px) {
          .cgclm-form .cf-row {
            grid-template-columns: 80px 1fr 1fr;
            gap: 18px;
          }
          .cgclm-form .cf-row > .cf-stat:nth-child(n+5) { grid-column: span 1; }
          .cgclm-form .cf-apply { grid-column: 1 / -1; justify-self: end; }
        }
        @media (max-width: 640px) {
          .cgclm-form { padding: 56px 22px; }
          .cgclm-form .cf-row { grid-template-columns: 1fr; }
        }
      `}</style>

      <div className="cf-head">
        <div>
          <div className="cf-kicker">{t.formacion.kicker}</div>
          <h2 className="cf-title">{t.formacion.title}</h2>
          <p className="cf-lede">{t.formacion.lede}</p>
        </div>
      </div>

      <div className="cf-filters">
        {t.formacion.filters.map((f, i) => (
          <button
            key={i}
            className="cf-filter"
            data-active={i === filter}
            onClick={() => setFilter(i)}
          >{f}</button>
        ))}
      </div>

      <div className="cf-list">
        {filtered.map((it, i) => (
          <article key={i} className="cf-row" data-featured={!!it.featured}>
            <div className="cf-code">{it.code}</div>
            <div>
              <h3 className="cf-name">{it.name}</h3>
              <div className="cf-tag-row">
                <span>{it.level}</span>
                <span>{it.mode}</span>
                <span>{it.start}</span>
              </div>
              <p className="cf-desc">{it.desc}</p>
            </div>
            <div className="cf-stat">
              <div className="cf-k">Duración</div>
              <div className="cf-v">{it.hours}</div>
            </div>
            <div className="cf-stat">
              <div className="cf-k">Plazas</div>
              <div className="cf-v">{it.places}</div>
            </div>
            <div className="cf-stat">
              <div className="cf-k">Precio</div>
              <div className="cf-v">{it.price}</div>
            </div>
            <a href="#" className="cf-apply">{t.formacion.apply} <Arrow size={12} /></a>
          </article>
        ))}
      </div>
    </section>
  );
}

window.CFormacion = CFormacion;