// 14 — Normativa gastronómica (marco regulatorio)
function CNormativa() {
  const [, t] = window.useLang();
  const [cat, setCat] = React.useState(0);
  const cats = t.normativa.categories;
  const items = t.normativa.items;
  const filtered = cat === 0 ? items : items.filter(it => it.cat === cats[cat]);

  return (
    <section className="cgclm-norm">
      <style>{`
        .cgclm-norm { padding: 80px 40px; background: var(--c-cream); }
        .cgclm-norm .cn-head {
          display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px;
          margin-bottom: 36px; align-items: end;
        }
        .cgclm-norm .cn-kicker {
          font-family: var(--font-impact);
          font-size: 11px; letter-spacing: 0.22em;
          color: var(--c-green-deep); text-transform: uppercase;
        }
        .cgclm-norm .cn-title {
          font-family: var(--font-display); font-weight: 600;
          font-size: clamp(32px, 4.4vw, 56px);
          line-height: 1.0; letter-spacing: -0.02em;
          margin: 14px 0 0; text-wrap: balance;
        }
        .cgclm-norm .cn-title em {
          font-family: var(--font-script); font-style: normal;
          color: var(--c-red); font-weight: 400; margin-right: 0.1em;
        }
        .cgclm-norm .cn-lede {
          font: 400 16px/1.65 var(--font-body);
          color: var(--c-ink-soft); max-width: 50ch; text-wrap: pretty;
        }
        .cgclm-norm .cn-filters {
          display: flex; gap: 6px; flex-wrap: wrap;
          margin-bottom: 22px; padding-bottom: 16px;
          border-bottom: 1px solid var(--c-line);
        }
        .cgclm-norm .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-norm .cn-filter:hover { color: var(--c-ink); border-color: var(--c-ink); }
        .cgclm-norm .cn-filter[data-active="true"] {
          background: var(--c-green-deep); color: white; border-color: var(--c-green-deep);
        }
        .cgclm-norm .cn-grid {
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
        }
        .cgclm-norm .cn-card {
          background: var(--c-cream-deep);
          border-radius: 16px; padding: 28px 24px;
          display: flex; flex-direction: column;
          position: relative; overflow: hidden;
          transition: all .3s cubic-bezier(.6,.2,.2,1);
          min-height: 280px;
          border: 1px solid transparent;
        }
        .cgclm-norm .cn-card:hover {
          transform: translateY(-3px);
          box-shadow: 0 24px 40px -20px rgba(31,33,24,0.18);
          border-color: var(--card-color);
        }
        .cgclm-norm .cn-card::before {
          content: ""; position: absolute; left: 0; top: 0;
          width: 4px; height: 100%; background: var(--card-color);
        }
        .cgclm-norm .cn-meta {
          display: flex; justify-content: space-between; align-items: baseline;
          margin-bottom: 14px;
          font-family: var(--font-impact);
          font-size: 10px; letter-spacing: 0.18em;
          color: var(--c-ink-soft); text-transform: uppercase;
        }
        .cgclm-norm .cn-year {
          color: var(--card-color);
          font-size: 11px;
        }
        .cgclm-norm .cn-cat-label {
          font: 600 10px var(--font-body);
          letter-spacing: 0.14em; text-transform: uppercase;
          color: var(--card-color);
          margin-bottom: 10px;
        }
        .cgclm-norm .cn-cardtitle {
          font-family: var(--font-display); font-weight: 600;
          font-size: 18px; line-height: 1.25;
          letter-spacing: -0.01em; margin: 0 0 10px;
          color: var(--c-ink); text-wrap: balance;
        }
        .cgclm-norm .cn-summary {
          font: 400 13px/1.55 var(--font-body);
          color: var(--c-ink-soft); flex: 1; text-wrap: pretty;
          margin: 0 0 14px;
        }
        .cgclm-norm .cn-tags {
          display: flex; flex-wrap: wrap; gap: 6px;
          margin-bottom: 14px;
        }
        .cgclm-norm .cn-tag {
          font: 500 10px var(--font-body);
          letter-spacing: 0.04em;
          padding: 3px 8px; border-radius: 4px;
          background: rgba(31,33,24,0.06);
          color: var(--c-ink);
        }
        .cgclm-norm .cn-foot {
          padding-top: 12px;
          border-top: 1px solid var(--c-line);
          display: flex; justify-content: space-between; align-items: center;
        }
        .cgclm-norm .cn-link {
          font: 600 12px var(--font-body);
          color: var(--card-color);
          text-decoration: none;
          display: inline-flex; align-items: center; gap: 6px;
        }
        .cgclm-norm .cn-link:hover { text-decoration: underline; }
        .cgclm-norm .cn-code {
          font-family: var(--font-impact);
          font-size: 9px; letter-spacing: 0.16em;
          color: var(--c-ink-soft);
        }
        @media (max-width: 1000px) {
          .cgclm-norm .cn-head { grid-template-columns: 1fr; gap: 22px; }
          .cgclm-norm .cn-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 640px) {
          .cgclm-norm { padding: 56px 22px; }
          .cgclm-norm .cn-grid { grid-template-columns: 1fr; }
        }
      `}</style>

      <div className="cn-head">
        <div>
          <div className="cn-kicker">— {t.normativa.kicker}</div>
          <h2 className="cn-title">{t.normativa.title}</h2>
        </div>
        <p className="cn-lede">{t.normativa.lede}</p>
      </div>

      <div className="cn-filters">
        {cats.map((c, i) => (
          <button key={i} className="cn-filter" data-active={i === cat} onClick={() => setCat(i)}>{c}</button>
        ))}
      </div>

      <div className="cn-grid">
        {filtered.map((it, i) => (
          <article key={i} className="cn-card" style={{ '--card-color': it.color }}>
            <div className="cn-meta">
              <span>{it.ambit}</span>
              <span className="cn-year">{it.year}</span>
            </div>
            <div className="cn-cat-label">— {it.cat}</div>
            <h3 className="cn-cardtitle">{it.title}</h3>
            <p className="cn-summary">{it.summary}</p>
            <div className="cn-tags">
              {it.tags.map((tg, j) => <span key={j} className="cn-tag">{tg}</span>)}
            </div>
            <div className="cn-foot">
              <span className="cn-code">{it.code}</span>
              <a href="#" className="cn-link">{t.normativa.external} <Arrow size={11} /></a>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}
window.CNormativa = CNormativa;
