// 07 — Denominaciones de Origen (sustituye al componente Día Mundial)
function CDO() {
  const [, t] = window.useLang();
  const [cat, setCat] = React.useState(0);
  const [active, setActive] = React.useState(null);

  const cats = t.do.categories;
  const items = t.do.items;
  const filtered = cat === 0 ? items : items.filter(it => it.cat === cats[cat]);

  return (
    <section className="cgclm-do">
      <style>{`
        .cgclm-do { padding: 80px 40px; background: var(--c-cream-deep); }
        .cgclm-do .cdo-head {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 56px;
          margin-bottom: 40px;
          align-items: end;
        }
        .cgclm-do .cdo-kicker {
          font-family: var(--font-impact);
          font-size: 12px;
          letter-spacing: 0.22em;
          color: var(--c-green-deep);
          text-transform: uppercase;
        }
        .cgclm-do .cdo-title {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: clamp(36px, 5.4vw, 72px);
          line-height: 0.98;
          letter-spacing: -0.025em;
          margin: 16px 0 0;
          color: var(--c-ink);
          text-wrap: balance;
        }
        .cgclm-do .cdo-title em {
          font-family: var(--font-script);
          font-style: normal;
          color: var(--c-red);
          font-weight: 400;
          margin-right: 0.1em;
        }
        .cgclm-do .cdo-lede {
          font: 400 16px/1.65 var(--font-body);
          color: var(--c-ink-soft);
          max-width: 52ch;
          text-wrap: pretty;
        }

        .cgclm-do .cdo-filters {
          display: flex; gap: 6px; flex-wrap: wrap;
          margin-bottom: 20px;
        }
        .cgclm-do .cdo-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-do .cdo-filter:hover { color: var(--c-ink); border-color: var(--c-ink); }
        .cgclm-do .cdo-filter[data-active="true"] {
          background: var(--c-ink); color: var(--c-cream); border-color: var(--c-ink);
        }

        .cgclm-do .cdo-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 16px;
        }
        .cgclm-do .cdo-card {
          background: var(--c-cream);
          border-radius: 18px;
          overflow: hidden;
          cursor: pointer;
          transition: transform .3s cubic-bezier(.6,.2,.2,1), box-shadow .3s;
          display: flex; flex-direction: column;
          border: 1px solid var(--c-line);
          text-decoration: none;
          color: inherit;
        }
        .cgclm-do .cdo-card:hover {
          transform: translateY(-4px);
          box-shadow: 0 24px 40px -20px rgba(31,33,24,0.18);
        }
        .cgclm-do .cdo-photo {
          width: 100%;
          aspect-ratio: 16/10;
          background:
            repeating-linear-gradient(135deg, rgba(0,0,0,0.06) 0 6px, transparent 6px 12px),
            var(--card-color);
          background-size: cover;
          background-position: center;
          position: relative;
          display: flex; align-items: end; padding: 14px;
          color: rgba(255,255,255,0.85);
        }
        .cgclm-do .cdo-photo[data-has-image="true"] {
          background:
            linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.45) 100%),
            var(--photo-image) center/cover no-repeat;
        }
        .cgclm-do .cdo-photo[data-has-image="true"] .cdo-photo-tag { color: rgba(255,255,255,0.95); }
        .cgclm-do .cdo-photo[data-light="true"] { color: rgba(31,33,24,0.65); }
        .cgclm-do .cdo-photo-tag {
          font: 500 10px monospace;
          letter-spacing: 0.04em;
        }
        .cgclm-do .cdo-seal {
          position: absolute; top: 14px; right: 14px;
          font-family: var(--font-impact);
          font-size: 10px;
          letter-spacing: 0.16em;
          padding: 6px 10px;
          background: rgba(0,0,0,0.65);
          color: white;
          border-radius: 4px;
        }
        .cgclm-do .cdo-photo[data-light="true"] .cdo-seal {
          background: rgba(31,33,24,0.85);
        }
        .cgclm-do .cdo-body { padding: 22px; }
        .cgclm-do .cdo-name {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: 22px;
          line-height: 1.15;
          letter-spacing: -0.01em;
          margin: 0 0 6px;
          text-wrap: balance;
        }
        .cgclm-do .cdo-meta {
          font: 500 12px var(--font-body);
          color: var(--c-ink-soft);
          letter-spacing: 0.02em;
          margin-bottom: 12px;
          display: flex; gap: 12px; flex-wrap: wrap;
          align-items: center;
        }
        .cgclm-do .cdo-meta b { color: var(--c-ink); font-weight: 600; }
        .cgclm-do .cdo-meta .cdo-dot { width: 4px; height: 4px; background: var(--c-line); border-radius: 50%; }
        .cgclm-do .cdo-note {
          font: 400 14px/1.55 var(--font-body);
          color: var(--c-ink);
          text-wrap: pretty;
          margin: 0;
        }
        .cgclm-do .cdo-foot {
          padding: 14px 22px;
          border-top: 1px solid var(--c-line);
          display: flex; justify-content: space-between; align-items: center;
          font: 600 12px var(--font-body);
          color: var(--c-ink-soft);
          letter-spacing: 0.02em;
        }
        .cgclm-do .cdo-foot strong {
          color: var(--c-red);
          font-weight: 600;
        }

        @media (max-width: 1000px) {
          .cgclm-do .cdo-head { grid-template-columns: 1fr; gap: 24px; }
          .cgclm-do .cdo-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 640px) {
          .cgclm-do { padding: 56px 22px; }
          .cgclm-do .cdo-grid { grid-template-columns: 1fr; }
        }
      `}</style>

      <div className="cdo-head">
        <div>
          <div className="cdo-kicker">— {t.do.kicker} —</div>
          <h2 className="cdo-title"><em>El sello</em>que protege un territorio</h2>
        </div>
        <p className="cdo-lede">{t.do.lede}</p>
      </div>

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

      <div className="cdo-grid">
        {filtered.map((it, i) => {
          const isLight = ['var(--c-cream-deep)', 'var(--c-saffron)'].includes(it.color);
          const Tag = it.url ? 'a' : 'article';
          const tagProps = it.url
            ? { href: it.url, target: '_blank', rel: 'noreferrer noopener' }
            : {};
          return (
            <Tag key={i} className="cdo-card" {...tagProps} onClick={() => setActive(active === i ? null : i)}>
              <div
                className="cdo-photo"
                data-light={isLight}
                data-has-image={Boolean(it.image)}
                style={it.image
                  ? { '--photo-image': `url(${it.image})` }
                  : { '--card-color': it.color }}
              >
                <span className="cdo-photo-tag">[ {it.name.toLowerCase()} ]</span>
                <span className="cdo-seal">{it.type}</span>
              </div>
              <div className="cdo-body">
                <h3 className="cdo-name">{it.name}</h3>
                <div className="cdo-meta">
                  <span><b>{it.cat}</b></span>
                  <span className="cdo-dot"></span>
                  <span>{it.region}</span>
                </div>
                <p className="cdo-note">{it.note}</p>
              </div>
              <div className="cdo-foot">
                <span>Reg. <strong>{it.since}</strong></span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--c-ink)' }}>
                  {it.url ? 'Web oficial' : t.do.readMore} <Arrow size={12} />
                </span>
              </div>
            </Tag>
          );
        })}
      </div>
    </section>
  );
}

window.CDO = CDO;