// 08 — Grid de noticias con filtros y buscador
function CNews() {
  const [, t] = window.useLang();
  const [filter, setFilter] = React.useState(0);
  const [q, setQ] = React.useState('');
  const [open, setOpen] = React.useState(null);

  React.useEffect(() => {
    if (open == null) return;
    const onKey = (e) => { if (e.key === 'Escape') setOpen(null); };
    document.body.style.overflow = 'hidden';
    window.addEventListener('keydown', onKey);
    return () => { document.body.style.overflow = ''; window.removeEventListener('keydown', onKey); };
  }, [open]);

  const filterKeys = ['all', 'jornadas', 'investigacion', 'divulgacion', 'convocatorias'];
  const items = t.news.items;
  const filtered = items.filter(it => {
    const matchesFilter = filter === 0 || it.k === filterKeys[filter];
    const matchesQ = !q || (it.t + ' ' + it.place).toLowerCase().includes(q.toLowerCase());
    return matchesFilter && matchesQ;
  });

  const colorFor = (k) => ({
    jornadas: 'var(--c-green-deep)',
    investigacion: 'var(--c-aubergine)',
    divulgacion: 'var(--c-saffron)',
    convocatorias: 'var(--c-red)',
  }[k] || 'var(--c-ink)');

  return (
    <section className="cgclm-news">
      <style>{`
        .cgclm-news { padding: 80px 40px; background: var(--c-cream); }
        .cgclm-news .cn-head {
          display: flex; align-items: end; justify-content: space-between;
          flex-wrap: wrap; gap: 24px; margin-bottom: 32px;
        }
        .cgclm-news .cn-kicker {
          font: 500 11px var(--font-body);
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--c-green-deep);
        }
        .cgclm-news .cn-title {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: clamp(28px, 3.4vw, 42px);
          letter-spacing: -0.02em;
          margin: 8px 0 0;
        }
        .cgclm-news .cn-search {
          display: flex; align-items: center; gap: 8px;
          padding: 10px 16px;
          background: var(--c-cream-deep);
          border-radius: 999px;
          color: var(--c-ink-soft);
          min-width: 240px;
        }
        .cgclm-news .cn-search input {
          background: none; border: none; outline: none;
          color: var(--c-ink); font: 400 14px var(--font-body);
          flex: 1; min-width: 0;
        }
        .cgclm-news .cn-filters {
          display: flex; gap: 8px; flex-wrap: wrap;
          margin-bottom: 24px;
          border-bottom: 1px solid var(--c-line);
          padding-bottom: 16px;
        }
        .cgclm-news .cn-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-news .cn-filter:hover {
          color: var(--c-ink);
          border-color: var(--c-ink);
        }
        .cgclm-news .cn-filter[data-active="true"] {
          background: var(--c-ink); color: var(--c-cream); border-color: var(--c-ink);
        }
        .cgclm-news .cn-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 18px;
        }
        .cgclm-news .cn-card {
          background: var(--c-cream-deep);
          border-radius: 14px;
          display: flex; flex-direction: column;
          min-height: 320px;
          transition: transform .3s cubic-bezier(.6,.2,.2,1), box-shadow .3s;
          position: relative;
          overflow: hidden;
          text-align: left;
          border: none;
          cursor: pointer;
          color: inherit;
          font: inherit;
        }
        .cgclm-news .cn-card:hover {
          transform: translateY(-4px);
          box-shadow: 0 14px 40px -18px rgba(0,0,0,.25);
        }
        .cgclm-news .cn-img {
          width: 100%; aspect-ratio: 4/3;
          background: var(--c-line) center/cover no-repeat;
          position: relative;
        }
        .cgclm-news .cn-img .cn-cat {
          position: absolute; top: 14px; left: 14px; margin: 0;
        }
        .cgclm-news .cn-body {
          padding: 20px 22px 22px;
          display: flex; flex-direction: column; flex: 1;
        }
        .cgclm-news .cn-cat {
          display: inline-block;
          font: 600 10px var(--font-body);
          letter-spacing: 0.16em;
          text-transform: uppercase;
          padding: 4px 10px;
          border-radius: 999px;
          color: white;
          margin-bottom: 16px;
          align-self: flex-start;
        }
        .cgclm-news .cn-cat-title {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: 18px;
          line-height: 1.3;
          letter-spacing: -0.01em;
          margin: 0 0 12px;
          flex: 1;
          text-wrap: pretty;
          color: var(--c-ink);
        }
        .cgclm-news .cn-meta {
          display: flex; justify-content: space-between;
          align-items: end; gap: 12px;
          margin-top: auto;
          padding-top: 16px;
          border-top: 1px solid var(--c-line);
          font: 500 12px var(--font-body);
          color: var(--c-ink-soft);
        }
        .cgclm-news .cn-meta .cn-arrow {
          display: inline-flex; transition: transform .3s;
          color: var(--c-red);
        }
        .cgclm-news .cn-card:hover .cn-arrow { transform: translate(4px, -4px); }

        /* Modal article */
        .cgclm-news .cn-modal {
          position: fixed; inset: 0; z-index: 1000;
          background: rgba(20,22,16,0.78);
          backdrop-filter: blur(6px);
          display: flex; align-items: center; justify-content: center;
          padding: 32px;
          animation: cnFade .25s ease;
        }
        @keyframes cnFade { from { opacity: 0 } to { opacity: 1 } }
        .cgclm-news .cn-modal-card {
          background: var(--c-cream);
          color: var(--c-ink);
          width: min(900px, 100%);
          max-height: 90vh;
          overflow: auto;
          border-radius: 18px;
          position: relative;
          animation: cnRise .35s cubic-bezier(.2,.7,.2,1);
        }
        @keyframes cnRise { from { transform: translateY(24px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
        .cgclm-news .cn-modal-img {
          width: 100%; aspect-ratio: 16/10;
          background: var(--c-line) center/cover no-repeat;
        }
        .cgclm-news .cn-modal-body { padding: 32px 40px 36px; }
        .cgclm-news .cn-modal-cat {
          display: inline-block;
          font: 600 10px var(--font-body);
          letter-spacing: 0.16em;
          text-transform: uppercase;
          padding: 5px 12px;
          border-radius: 999px;
          color: white;
          margin-bottom: 14px;
        }
        .cgclm-news .cn-modal-title {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: clamp(22px, 2.6vw, 32px);
          line-height: 1.2;
          letter-spacing: -0.02em;
          margin: 0 0 12px;
          text-wrap: pretty;
        }
        .cgclm-news .cn-modal-meta {
          font: 500 12px var(--font-body);
          color: var(--c-ink-soft);
          margin-bottom: 22px;
          padding-bottom: 18px;
          border-bottom: 1px solid var(--c-line);
          letter-spacing: 0.04em;
          text-transform: uppercase;
        }
        .cgclm-news .cn-modal-text p {
          font: 400 16px/1.7 var(--font-body);
          color: var(--c-ink);
          margin: 0 0 14px;
          text-wrap: pretty;
        }
        .cgclm-news .cn-close {
          position: absolute; top: 16px; right: 16px;
          width: 40px; height: 40px;
          border-radius: 50%;
          background: rgba(20,22,16,.65);
          color: var(--c-cream);
          border: none;
          font: 600 20px/1 var(--font-body);
          cursor: pointer;
          display: grid; place-items: center;
          transition: background .2s;
        }
        .cgclm-news .cn-close:hover { background: var(--c-red); }
        @media (max-width: 720px) {
          .cgclm-news .cn-modal { padding: 0; }
          .cgclm-news .cn-modal-card { border-radius: 0; max-height: 100vh; height: 100vh; }
          .cgclm-news .cn-modal-body { padding: 24px 22px 32px; }
        }
        .cgclm-news .cn-empty {
          padding: 56px;
          text-align: center;
          font: italic 400 16px var(--font-body);
          color: var(--c-ink-soft);
          background: var(--c-cream-deep);
          border-radius: 14px;
        }
        @media (max-width: 880px) {
          .cgclm-news { padding: 56px 22px; }
          .cgclm-news .cn-grid { grid-template-columns: 1fr; }
        }
      `}</style>

      <div className="cn-head">
        <div>
          <div className="cn-kicker">{t.news.kicker}</div>
          <h2 className="cn-title">{t.news.title}</h2>
        </div>
        <div className="cn-search">
          <Search size={14} />
          <input
            type="text"
            placeholder={t.news.search}
            value={q}
            onChange={(e) => setQ(e.target.value)}
          />
        </div>
      </div>

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

      {filtered.length === 0 ? (
        <div className="cn-empty">{t.news.empty}</div>
      ) : (
        <div className="cn-grid">
          {filtered.map((it, i) => (
            <button key={i} type="button" className="cn-card" onClick={() => setOpen(it)}>
              {it.img ? (
                <div className="cn-img" style={{ backgroundImage: `url(${it.img})` }}>
                  <span className="cn-cat" style={{ background: colorFor(it.k) }}>{it.c}</span>
                </div>
              ) : null}
              <div className="cn-body">
                {!it.img && <span className="cn-cat" style={{ background: colorFor(it.k) }}>{it.c}</span>}
                <h3 className="cn-cat-title">{it.t}</h3>
                <div className="cn-meta">
                  <div>
                    <div>{it.d}</div>
                    <div style={{ marginTop: 2, fontSize: 11 }}>{it.place}</div>
                  </div>
                  <span className="cn-arrow"><ArrowDiag size={16} /></span>
                </div>
              </div>
            </button>
          ))}
        </div>
      )}

      {open && (
        <div className="cn-modal" onClick={() => setOpen(null)} role="dialog" aria-modal="true">
          <div className="cn-modal-card" onClick={(e) => e.stopPropagation()}>
            <button className="cn-close" onClick={() => setOpen(null)} aria-label="Cerrar">×</button>
            {open.img && <div className="cn-modal-img" style={{ backgroundImage: `url(${open.img})` }} />}
            <div className="cn-modal-body">
              <span className="cn-modal-cat" style={{ background: colorFor(open.k) }}>{open.c}</span>
              <h3 className="cn-modal-title">{open.t}</h3>
              <div className="cn-modal-meta">{open.d} · {open.place}</div>
              <div className="cn-modal-text">
                {(open.body || '').split('\n\n').map((p, i) => (
                  <p key={i}>{p}</p>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}
    </section>
  );
}

window.CNews = CNews;