// 06b — Sellos DOP / IGP: explicación visual de las dos figuras europeas de calidad
function CDOSeals() {
  const [, t] = window.useLang();
  const s = (t.doSeals) || {
    kicker: "Figuras europeas de calidad",
    title: "DOP e IGP — dos sellos, un compromiso",
    lede: "Castilla-La Mancha cuenta con 41 figuras de calidad diferenciada: 32 Denominaciones de Origen Protegidas y 9 Indicaciones Geográficas Protegidas. Son los sellos europeos que acreditan que un alimento procede de un territorio concreto y se elabora con un saber hacer reconocido.",
    dop: {
      tag: "DOP",
      name: "Denominación de Origen Protegida",
      points: [
        "Toda la producción, transformación y elaboración se realizan en la zona geográfica delimitada.",
        "Las características del producto se deben esencialmente al medio: suelo, clima y oficio local.",
        "Vínculo más estricto con el territorio que la IGP.",
      ],
    },
    igp: {
      tag: "IGP",
      name: "Indicación Geográfica Protegida",
      points: [
        "Al menos una de las fases — producción, transformación o elaboración — ocurre en la zona delimitada.",
        "Una cualidad determinada, reputación u otra característica se atribuye al origen geográfico.",
        "Vínculo más flexible con el territorio que la DOP.",
      ],
    },
    counts: [
      { n: "32", l: "DOP en Castilla-La Mancha" },
      { n: "9",  l: "IGP en Castilla-La Mancha" },
      { n: "41", l: "Figuras de calidad diferenciada" },
    ],
    caption: "Sellos oficiales de la Unión Europea — DOP (rojo) e IGP (azul/amarillo).",
  };

  return (
    <section className="cgclm-doseals">
      <style>{`
        .cgclm-doseals {
          padding: 96px 40px 40px;
          background: var(--c-cream);
          color: var(--c-ink);
        }
        .cgclm-doseals .ds-wrap {
          max-width: var(--container);
          margin: 0 auto;
          display: grid;
          grid-template-columns: 1.05fr 1fr;
          gap: 64px;
          align-items: center;
        }
        .cgclm-doseals .ds-kicker {
          font-family: var(--font-impact);
          font-size: 12px;
          letter-spacing: 0.22em;
          color: var(--c-green-deep);
          text-transform: uppercase;
        }
        .cgclm-doseals .ds-title {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: clamp(34px, 4.6vw, 60px);
          line-height: 1.0;
          letter-spacing: -0.025em;
          margin: 14px 0 20px;
          color: var(--c-ink);
          text-wrap: balance;
        }
        .cgclm-doseals .ds-title em {
          font-family: var(--font-script);
          font-style: normal;
          font-weight: 400;
          color: var(--c-red);
          margin-right: 0.08em;
        }
        .cgclm-doseals .ds-lede {
          font: 400 17px/1.6 var(--font-body);
          color: var(--c-ink-soft);
          max-width: 56ch;
          text-wrap: pretty;
          margin: 0 0 28px;
        }

        .cgclm-doseals .ds-counts {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 14px;
          margin-top: 28px;
          border-top: 1px solid var(--c-line);
          padding-top: 22px;
        }
        .cgclm-doseals .ds-count {
          display: flex; flex-direction: column; gap: 4px;
        }
        .cgclm-doseals .ds-count b {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: 44px;
          line-height: 1;
          letter-spacing: -0.02em;
          color: var(--c-ink);
        }
        .cgclm-doseals .ds-count span {
          font: 500 12px var(--font-body);
          color: var(--c-ink-soft);
          letter-spacing: 0.02em;
        }

        .cgclm-doseals .ds-figure {
          background: white;
          border-radius: 22px;
          border: 1px solid var(--c-line);
          padding: 28px;
          box-shadow: 0 30px 50px -32px rgba(31,33,24,0.22);
        }
        [data-theme="dark"] .cgclm-doseals .ds-figure {
          background: var(--c-cream-deep);
        }
        .cgclm-doseals .ds-figure img {
          width: 100%;
          height: auto;
          display: block;
          border-radius: 12px;
        }
        .cgclm-doseals .ds-caption {
          font: 500 12px monospace;
          color: var(--c-ink-soft);
          letter-spacing: 0.04em;
          margin-top: 14px;
          text-align: center;
        }

        .cgclm-doseals .ds-defs {
          max-width: var(--container);
          margin: 56px auto 0;
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 18px;
        }
        .cgclm-doseals .ds-def {
          background: var(--c-cream-deep);
          border-radius: 18px;
          padding: 28px 28px 26px;
          border: 1px solid var(--c-line);
          position: relative;
        }
        .cgclm-doseals .ds-def[data-kind="dop"] {
          border-top: 4px solid var(--c-red);
        }
        .cgclm-doseals .ds-def[data-kind="igp"] {
          border-top: 4px solid #2A6FDB;
        }
        .cgclm-doseals .ds-def-tag {
          font-family: var(--font-impact);
          font-size: 11px;
          letter-spacing: 0.18em;
          color: white;
          padding: 4px 10px;
          border-radius: 4px;
          display: inline-block;
        }
        .cgclm-doseals .ds-def[data-kind="dop"] .ds-def-tag { background: var(--c-red); }
        .cgclm-doseals .ds-def[data-kind="igp"] .ds-def-tag { background: #2A6FDB; }
        .cgclm-doseals .ds-def-name {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: 26px;
          line-height: 1.1;
          letter-spacing: -0.01em;
          margin: 12px 0 14px;
        }
        .cgclm-doseals .ds-def ul {
          list-style: none;
          margin: 0; padding: 0;
          display: flex; flex-direction: column; gap: 10px;
        }
        .cgclm-doseals .ds-def li {
          font: 400 15px/1.55 var(--font-body);
          color: var(--c-ink);
          padding-left: 20px;
          position: relative;
        }
        .cgclm-doseals .ds-def li::before {
          content: "";
          position: absolute;
          left: 0; top: 9px;
          width: 8px; height: 8px;
          border-radius: 50%;
        }
        .cgclm-doseals .ds-def[data-kind="dop"] li::before { background: var(--c-red); }
        .cgclm-doseals .ds-def[data-kind="igp"] li::before { background: #2A6FDB; }

        @media (max-width: 1000px) {
          .cgclm-doseals .ds-wrap { grid-template-columns: 1fr; gap: 32px; }
          .cgclm-doseals .ds-defs { grid-template-columns: 1fr; }
        }
        @media (max-width: 640px) {
          .cgclm-doseals { padding: 64px 22px 32px; }
          .cgclm-doseals .ds-counts { grid-template-columns: repeat(3, 1fr); gap: 8px; }
          .cgclm-doseals .ds-count b { font-size: 32px; }
        }
      `}</style>

      <div className="ds-wrap">
        <div>
          <div className="ds-kicker">— {s.kicker} —</div>
          <h2 className="ds-title"><em>Dos sellos,</em>un compromiso con el origen</h2>
          <p className="ds-lede">{s.lede}</p>
          <div className="ds-counts">
            {s.counts.map((c, i) => (
              <div className="ds-count" key={i}>
                <b>{c.n}</b>
                <span>{c.l}</span>
              </div>
            ))}
          </div>
        </div>
        <figure className="ds-figure">
          <img src="assets/dop-igp-seals.webp" alt="Sellos oficiales DOP e IGP de la Unión Europea" loading="lazy" />
          <figcaption className="ds-caption">[ {s.caption} ]</figcaption>
        </figure>
      </div>

      <div className="ds-defs">
        <div className="ds-def" data-kind="dop">
          <span className="ds-def-tag">{s.dop.tag}</span>
          <h3 className="ds-def-name">{s.dop.name}</h3>
          <ul>
            {s.dop.points.map((p, i) => <li key={i}>{p}</li>)}
          </ul>
        </div>
        <div className="ds-def" data-kind="igp">
          <span className="ds-def-tag">{s.igp.tag}</span>
          <h3 className="ds-def-name">{s.igp.name}</h3>
          <ul>
            {s.igp.points.map((p, i) => <li key={i}>{p}</li>)}
          </ul>
        </div>
      </div>
    </section>
  );
}

window.CDOSeals = CDOSeals;