// 04 — Líneas de actuación
function CLines() {
  const [, t] = window.useLang();
  const colors = ['var(--c-green)', 'var(--c-red)', 'var(--c-saffron)'];
  return (
    <section className="cgclm-lines">
      <style>{`
        .cgclm-lines {
          padding: 80px 40px;
          background: var(--c-cream-deep);
        }
        .cgclm-lines .cl-head {
          display: flex; align-items: end; justify-content: space-between;
          gap: 24px; margin-bottom: 48px; flex-wrap: wrap;
        }
        .cgclm-lines .cl-kicker {
          font: 500 11px var(--font-body);
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--c-green-deep);
        }
        .cgclm-lines .cl-title {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: clamp(28px, 3.4vw, 42px);
          line-height: 1.05;
          letter-spacing: -0.02em;
          margin: 8px 0 0;
          color: var(--c-ink);
          max-width: 18ch;
          text-wrap: balance;
        }
        .cgclm-lines .cl-cards {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 18px;
        }
        .cgclm-lines .cl-card {
          background: var(--c-cream);
          border-radius: 18px;
          padding: 30px 28px 28px;
          position: relative;
          overflow: hidden;
          transition: transform .35s cubic-bezier(.6,.2,.2,1), box-shadow .35s;
          border: 1px solid var(--c-line);
          display: flex; flex-direction: column;
          min-height: 320px;
        }
        .cgclm-lines .cl-card:hover {
          transform: translateY(-4px);
          box-shadow: 0 24px 40px -20px rgba(31,33,24,0.18);
        }
        .cgclm-lines .cl-card .cl-num {
          font-family: var(--font-impact);
          font-size: 10px;
          letter-spacing: 0.18em;
          color: var(--c-ink-soft);
          margin-bottom: 24px;
        }
        .cgclm-lines .cl-card .cl-dot {
          position: absolute;
          top: 28px; right: 28px;
          width: 12px; height: 12px;
          border-radius: 50%;
        }
        .cgclm-lines .cl-card .cl-name {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: 32px;
          line-height: 1;
          letter-spacing: -0.02em;
          margin: 0 0 18px;
          color: var(--c-ink);
        }
        .cgclm-lines .cl-card .cl-desc {
          font: 400 15px/1.6 var(--font-body);
          color: var(--c-ink-soft);
          flex: 1;
          text-wrap: pretty;
        }
        .cgclm-lines .cl-card .cl-link {
          margin-top: 24px;
          font: 600 13px var(--font-body);
          letter-spacing: 0.02em;
          color: var(--c-ink);
          text-decoration: none;
          display: inline-flex; align-items: center; gap: 6px;
          align-self: flex-start;
          padding-bottom: 4px;
          border-bottom: 1px solid var(--c-ink);
          transition: gap .25s, color .25s;
        }
        .cgclm-lines .cl-card:hover .cl-link {
          gap: 12px;
          color: var(--c-red);
          border-color: var(--c-red);
        }
        @media (max-width: 880px) {
          .cgclm-lines { padding: 56px 22px; }
          .cgclm-lines .cl-cards { grid-template-columns: 1fr; }
        }
      `}</style>

      <div className="cl-head">
        <div>
          <div className="cl-kicker">{t.lines.kicker}</div>
          <h2 className="cl-title">{t.lines.title}</h2>
        </div>
      </div>

      <div className="cl-cards">
        {t.lines.items.map((it, i) => (
          <article key={i} className="cl-card">
            <div className="cl-dot" style={{ background: colors[i] }}></div>
            <div className="cl-num">— {it.tag}</div>
            <h3 className="cl-name">{it.name}</h3>
            <p className="cl-desc">{it.desc}</p>
            <a href="#" className="cl-link">{it.link} <Arrow size={14} /></a>
          </article>
        ))}
      </div>
    </section>
  );
}

window.CLines = CLines;