// 11 — Mapa interactivo de Castilla-La Mancha
function CMap() {
  const [, t] = window.useLang();
  const [active, setActive] = React.useState('toledo');
  const order = ['guadalajara', 'toledo', 'cuenca', 'ciudad_real', 'albacete'];
  const provinces = t.map.provinces;

  // Posiciones aproximadas de las 5 provincias (paths SVG simplificados pero reconocibles)
  const paths = {
    guadalajara: "M 380 60 L 520 50 L 580 100 L 600 180 L 540 220 L 480 200 L 420 160 L 380 140 Z",
    toledo:      "M 100 200 L 280 170 L 380 220 L 360 300 L 280 320 L 180 300 L 80 260 Z",
    cuenca:      "M 380 220 L 580 220 L 620 320 L 600 420 L 480 440 L 420 380 L 380 300 Z",
    ciudad_real: "M 80 320 L 280 320 L 380 360 L 380 460 L 280 500 L 140 480 L 60 400 Z",
    albacete:    "M 380 380 L 480 440 L 600 440 L 620 540 L 540 600 L 420 580 L 380 500 Z",
  };
  const colors = {
    guadalajara: 'var(--c-saffron)',
    toledo: 'var(--c-red)',
    cuenca: 'var(--c-aubergine)',
    ciudad_real: 'var(--c-terracotta)',
    albacete: 'var(--c-green-deep)',
  };
  const centers = {
    guadalajara: [490, 130], toledo: [220, 250], cuenca: [490, 320],
    ciudad_real: [220, 410], albacete: [490, 510],
  };

  const p = provinces[active];

  return (
    <section className="cgclm-map">
      <style>{`
        .cgclm-map { padding: 80px 40px; background: var(--c-cream); }
        .cgclm-map .cm-head {
          display: flex; align-items: end; justify-content: space-between;
          gap: 24px; margin-bottom: 36px; flex-wrap: wrap;
        }
        .cgclm-map .cm-kicker {
          font: 500 11px var(--font-body);
          letter-spacing: 0.18em; text-transform: uppercase;
          color: var(--c-green-deep);
        }
        .cgclm-map .cm-title {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: clamp(28px, 3.6vw, 48px);
          line-height: 1.05;
          letter-spacing: -0.02em;
          margin: 8px 0 0;
        }
        .cgclm-map .cm-lede {
          font: 400 15px var(--font-body);
          color: var(--c-ink-soft);
          max-width: 44ch; text-wrap: pretty;
        }
        .cgclm-map .cm-stage {
          display: grid;
          grid-template-columns: 1.3fr 1fr;
          gap: 32px;
          align-items: stretch;
        }
        .cgclm-map .cm-svg-wrap {
          background: var(--c-cream-deep);
          border-radius: 22px;
          padding: 24px;
          position: relative;
          overflow: hidden;
        }
        .cgclm-map svg.cm-svg { width: 100%; height: auto; display: block; }
        .cgclm-map .cm-prov {
          fill: rgba(31,33,24,0.08);
          stroke: var(--c-cream);
          stroke-width: 2;
          cursor: pointer;
          transition: fill .25s ease, transform .3s cubic-bezier(.6,.2,.2,1);
          transform-origin: center;
          transform-box: fill-box;
        }
        .cgclm-map .cm-prov:hover { fill: rgba(31,33,24,0.18); }
        .cgclm-map .cm-prov[data-active="true"] {
          fill: var(--prov-color);
          transform: scale(1.02);
          filter: drop-shadow(0 8px 16px rgba(31,33,24,0.18));
        }
        .cgclm-map .cm-label {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: 14px;
          letter-spacing: -0.01em;
          fill: var(--c-ink);
          text-anchor: middle;
          pointer-events: none;
          transition: fill .25s;
        }
        .cgclm-map .cm-label[data-active="true"] { fill: white; }
        .cgclm-map .cm-pin {
          fill: var(--c-cream);
          pointer-events: none;
          opacity: 0;
          transition: opacity .3s;
        }
        .cgclm-map .cm-pin[data-active="true"] { opacity: 1; }

        .cgclm-map .cm-side {
          background: var(--c-ink);
          color: var(--c-cream);
          border-radius: 22px;
          padding: 32px;
          display: flex; flex-direction: column;
          gap: 22px;
          position: relative;
          overflow: hidden;
        }
        .cgclm-map .cm-side::before {
          content: "";
          position: absolute; top: -60px; right: -60px;
          width: 220px; height: 220px;
          background: var(--prov-color);
          border-radius: 50%;
          opacity: 0.35;
        }
        .cgclm-map .cm-prov-name {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: clamp(36px, 4vw, 56px);
          line-height: 1; letter-spacing: -0.025em;
          margin: 0;
          z-index: 1;
        }
        .cgclm-map .cm-prov-name em {
          font-family: var(--font-script);
          font-style: normal;
          color: var(--c-saffron);
          font-weight: 400;
          font-size: 0.5em;
          display: block;
          margin-bottom: 4px;
        }
        .cgclm-map .cm-block { z-index: 1; }
        .cgclm-map .cm-block h4 {
          font-family: var(--font-impact);
          font-size: 10px;
          letter-spacing: 0.2em;
          color: var(--prov-color);
          text-transform: uppercase;
          margin: 0 0 10px;
        }
        .cgclm-map .cm-chips {
          display: flex; flex-wrap: wrap; gap: 6px;
        }
        .cgclm-map .cm-chip {
          font: 500 12px var(--font-body);
          padding: 6px 12px;
          background: rgba(242,239,228,0.1);
          border-radius: 999px;
          color: var(--c-cream);
        }
        .cgclm-map .cm-block p {
          margin: 0;
          font-family: var(--font-display);
          font-style: italic;
          font-size: 18px;
          color: var(--c-cream);
          line-height: 1.4;
        }
        .cgclm-map .cm-stat {
          margin-top: auto;
          padding-top: 20px;
          border-top: 1px solid rgba(242,239,228,0.15);
          font: 500 13px var(--font-body);
          color: rgba(242,239,228,0.8);
          z-index: 1;
        }
        @media (max-width: 1000px) {
          .cgclm-map .cm-stage { grid-template-columns: 1fr; }
        }
        @media (max-width: 600px) {
          .cgclm-map { padding: 56px 22px; }
        }
      `}</style>

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

      <div className="cm-stage">
        <div className="cm-svg-wrap">
          <svg className="cm-svg" viewBox="0 0 700 660" aria-label="Mapa de Castilla-La Mancha">
            {order.map(k => (
              <path
                key={k}
                d={paths[k]}
                className="cm-prov"
                data-active={active === k}
                style={{ '--prov-color': colors[k] }}
                onClick={() => setActive(k)}
              />
            ))}
            {order.map(k => (
              <text
                key={k + 'l'}
                x={centers[k][0]}
                y={centers[k][1]}
                className="cm-label"
                data-active={active === k}
              >{provinces[k].name.toUpperCase()}</text>
            ))}
            {order.map(k => (
              <circle
                key={k + 'p'}
                cx={centers[k][0]}
                cy={centers[k][1] + 20}
                r="4"
                className="cm-pin"
                data-active={active === k}
              />
            ))}
          </svg>
        </div>

        <aside className="cm-side" style={{ '--prov-color': colors[active] }}>
          <h3 className="cm-prov-name"><em>Provincia de</em>{p.name}</h3>

          <div className="cm-block">
            <h4>{t.map.legendDops}</h4>
            <div className="cm-chips">
              {p.dops.map((d, i) => <span key={i} className="cm-chip">{d}</span>)}
            </div>
          </div>

          <div className="cm-block">
            <h4>{t.map.legendDish}</h4>
            <p>{p.dish}</p>
          </div>

          <div className="cm-stat">
            <strong style={{ color: 'var(--c-saffron)' }}>● </strong>
            {p.stat}
          </div>
        </aside>
      </div>
    </section>
  );
}
window.CMap = CMap;