// 05 — Palabra Manchega: carrusel diccionario
function CPalabra() {
  const [, t] = window.useLang();
  const [idx, setIdx] = React.useState(0);
  const words = t.palabra.words;
  const n = words.length;
  const go = (d) => setIdx((idx + d + n) % n);

  React.useEffect(() => {
    const id = setInterval(() => setIdx(i => (i + 1) % n), 7000);
    return () => clearInterval(id);
  }, [n]);

  const w = words[idx];
  const imageMap = {
    "Zarajos": "assets/zarajos-2.jpg",
    "Migas ruleras": "assets/migas-ruleras-2.jpg",
    "Galianos": "assets/galianos.jpg",
  };
  const wImg = imageMap[w.w];

  return (
    <section className="cgclm-palabra">
      <style>{`
        .cgclm-palabra {
          padding: 80px 40px;
          background: var(--c-cream);
          position: relative;
        }
        .cgclm-palabra .cp-head {
          display: flex; justify-content: space-between; align-items: end;
          gap: 24px; margin-bottom: 36px; flex-wrap: wrap;
        }
        .cgclm-palabra .cp-kicker {
          font-family: var(--font-impact);
          font-size: 13px;
          letter-spacing: 0.22em;
          color: var(--c-green-deep);
          text-transform: uppercase;
        }
        .cgclm-palabra .cp-title {
          font-family: var(--font-display);
          font-style: italic;
          font-weight: 500;
          font-size: clamp(28px, 3.6vw, 44px);
          margin: 12px 0 8px;
          letter-spacing: -0.02em;
          color: var(--c-ink);
        }
        .cgclm-palabra .cp-lede {
          font: 400 15px var(--font-body);
          color: var(--c-ink-soft);
          max-width: 44ch;
        }
        .cgclm-palabra .cp-controls { display: flex; gap: 8px; align-self: center; }
        .cgclm-palabra .cp-btn {
          width: 44px; height: 44px;
          border-radius: 50%;
          border: 1px solid var(--c-ink);
          background: transparent;
          color: var(--c-ink);
          cursor: pointer;
          display: inline-flex; align-items: center; justify-content: center;
          transition: all .2s;
        }
        .cgclm-palabra .cp-btn:hover {
          background: var(--c-ink); color: var(--c-cream);
          transform: translateY(-2px);
        }
        .cgclm-palabra .cp-stage {
          display: grid;
          grid-template-columns: 1.4fr 1fr;
          gap: 56px;
          align-items: stretch;
          background: var(--c-cream-deep);
          border-radius: 22px;
          padding: 48px;
          position: relative;
          overflow: hidden;
          min-height: 420px;
        }
        .cgclm-palabra .cp-counter {
          font-family: var(--font-impact);
          font-size: 11px;
          letter-spacing: 0.18em;
          color: var(--c-ink-soft);
          margin-bottom: 12px;
        }
        .cgclm-palabra .cp-stage::before {
          content: "";
          position: absolute;
          top: 28px; left: 28px;
          width: 28px; height: 28px;
          border-left: 2px solid var(--c-green-deep);
          border-top: 2px solid var(--c-green-deep);
        }
        .cgclm-palabra .cp-stage::after {
          content: "";
          position: absolute;
          bottom: 28px; right: 28px;
          width: 28px; height: 28px;
          border-right: 2px solid var(--c-green-deep);
          border-bottom: 2px solid var(--c-green-deep);
        }
        .cgclm-palabra .cp-word {
          font-family: var(--font-script);
          font-weight: 400;
          font-size: clamp(64px, 9vw, 128px);
          line-height: 0.95;
          color: var(--c-red);
          margin: 0;
          letter-spacing: -0.01em;
          animation: cp-fade .5s ease;
        }
        @keyframes cp-fade {
          from { opacity: 0; transform: translateY(8px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        .cgclm-palabra .cp-cat {
          font: italic 400 15px var(--font-body);
          color: var(--c-ink-soft);
          margin: 6px 0 22px;
        }
        .cgclm-palabra .cp-def {
          font: 400 16px/1.65 var(--font-body);
          color: var(--c-ink);
          max-width: 56ch;
          text-wrap: pretty;
        }
        .cgclm-palabra .cp-tag {
          display: inline-block;
          margin-top: 24px;
          font: 600 11px var(--font-body);
          letter-spacing: 0.14em;
          text-transform: uppercase;
          padding: 6px 12px;
          border: 1px solid var(--c-green-deep);
          color: var(--c-green-deep);
          border-radius: 999px;
        }
        .cgclm-palabra .cp-photo {
          background-color: var(--c-aubergine);
          background-size: cover;
          background-position: center;
          border-radius: 12px;
          position: relative;
          overflow: hidden;
          color: var(--c-cream);
          display: flex; align-items: end; padding: 24px;
          font: 500 11px monospace;
          letter-spacing: 0.04em;
          transform: rotate(2deg);
          box-shadow: -10px 14px 40px -16px rgba(31,33,24,0.4);
          align-self: center;
          min-height: 280px;
        }
        .cgclm-palabra .cp-photo[data-has-image="true"]::before {
          content: "";
          position: absolute; inset: 0;
          background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.5) 100%);
        }
        .cgclm-palabra .cp-photo[data-has-image="true"] span { opacity: 0.95; position: relative; z-index: 2; }
        .cgclm-palabra .cp-photo[data-has-image="false"] {
          background-image:
            repeating-linear-gradient(45deg,
              rgba(91,42,74,0.18) 0 8px,
              transparent 8px 16px);
        }
        .cgclm-palabra .cp-photo span { opacity: 0.7; }
        .cgclm-palabra .cp-pagination {
          display: flex; gap: 6px; margin-top: 28px;
          justify-content: center; flex-wrap: wrap;
          max-width: 600px; margin-left: auto; margin-right: auto;
        }
        .cgclm-palabra .cp-dot {
          width: 30px; height: 3px;
          border-radius: 2px;
          background: var(--c-line);
          border: none; padding: 0;
          cursor: pointer; transition: background .25s;
        }
        .cgclm-palabra .cp-dot[data-active="true"] { background: var(--c-red); }
        @media (max-width: 880px) {
          .cgclm-palabra { padding: 56px 22px; }
          .cgclm-palabra .cp-stage { grid-template-columns: 1fr; padding: 32px 24px; gap: 24px; }
        }
      `}</style>

      <div className="cp-head">
        <div>
          <div className="cp-kicker">{t.palabra.kicker}</div>
          <h2 className="cp-title">{t.palabra.title}</h2>
          <p className="cp-lede">{t.palabra.lede}</p>
        </div>
        <div className="cp-controls">
          <button className="cp-btn" onClick={() => go(-1)} aria-label={t.palabra.prev}><ChevL /></button>
          <button className="cp-btn" onClick={() => go(1)} aria-label={t.palabra.next}><ChevR /></button>
        </div>
      </div>

      <div className="cp-stage" key={idx}>
        <div>
          <div className="cp-counter">{String(idx + 1).padStart(2, '0')} / {String(n).padStart(2, '0')}</div>
          <h3 className="cp-word">{w.w}</h3>
          <div className="cp-cat">{w.cat}</div>
          <p className="cp-def">{w.def}</p>
          <span className="cp-tag">{w.tag}</span>
        </div>
        <div
          className="cp-photo"
          data-has-image={Boolean(wImg)}
          style={wImg ? { backgroundImage: `url(${wImg})` } : null}
        >
          <span>[ photo · {w.w.toLowerCase()} ]</span>
        </div>
      </div>

      <div className="cp-pagination">
        {words.map((_, i) => (
          <button
            key={i}
            className="cp-dot"
            data-active={i === idx}
            onClick={() => setIdx(i)}
            aria-label={`Word ${i + 1}`}
          />
        ))}
      </div>
    </section>
  );
}

window.CPalabra = CPalabra;