// 10 — Footer institucional
function CFooter() {
  const [, t] = window.useLang();
  const cols = [
    { title: t.footer.col1, items: t.footer.col1Items },
    { title: t.footer.col2, items: t.footer.col2Items },
    { title: t.footer.col3, items: t.footer.col3Items },
    { title: t.footer.col4, items: t.footer.col4Items },
  ];
  return (
    <footer className="cgclm-footer">
      <style>{`
        .cgclm-footer {
          background: var(--c-ink);
          color: var(--c-cream);
          padding: 64px 40px 28px;
        }
        [data-theme="dark"] .cgclm-footer { background: #0E0F0A; }
        .cgclm-footer .cf-top {
          display: grid;
          grid-template-columns: 1.4fr 2.4fr;
          gap: 56px;
          padding-bottom: 48px;
          border-bottom: 1px solid rgba(242,239,228,0.15);
        }
        .cgclm-footer .cf-tag {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: 28px;
          line-height: 1.15;
          letter-spacing: -0.02em;
          margin: 18px 0 14px;
          color: var(--c-cream);
          max-width: 18ch;
          text-wrap: balance;
        }
        .cgclm-footer .cf-sub {
          font: 400 14px/1.6 var(--font-body);
          color: rgba(242,239,228,0.7);
          max-width: 44ch;
          text-wrap: pretty;
        }
        .cgclm-footer .cf-cols {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 24px;
        }
        .cgclm-footer .cf-col h4 {
          font-family: var(--font-impact);
          font-size: 11px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--c-saffron);
          margin: 0 0 14px;
        }
        .cgclm-footer .cf-col ul {
          list-style: none; margin: 0; padding: 0;
          display: flex; flex-direction: column; gap: 8px;
        }
        .cgclm-footer .cf-col a, .cgclm-footer .cf-col li {
          font: 400 14px var(--font-body);
          color: rgba(242,239,228,0.85);
          text-decoration: none;
          transition: color .2s;
        }
        .cgclm-footer .cf-col a:hover { color: var(--c-saffron); }

        .cgclm-footer .cf-institutional {
          margin-top: 36px;
          display: flex; justify-content: space-between;
          gap: 24px; flex-wrap: wrap;
          align-items: center;
        }
        .cgclm-footer .cf-logos { display: flex; gap: 18px; align-items: center; }
        .cgclm-footer .cf-logo-pill {
          padding: 12px 18px;
          border: 1px solid rgba(242,239,228,0.3);
          border-radius: 8px;
          font: 600 11px monospace;
          letter-spacing: 0.06em;
          color: rgba(242,239,228,0.85);
        }
        .cgclm-footer .cf-bottom {
          margin-top: 28px;
          padding-top: 24px;
          border-top: 1px solid rgba(242,239,228,0.12);
          display: flex; justify-content: space-between;
          gap: 18px; flex-wrap: wrap;
          font: 400 12px var(--font-body);
          color: rgba(242,239,228,0.55);
        }
        .cgclm-footer .cf-bottom-links { display: flex; gap: 18px; flex-wrap: wrap; }
        .cgclm-footer .cf-bottom-links a {
          color: rgba(242,239,228,0.55);
          text-decoration: none;
        }
        .cgclm-footer .cf-bottom-links a:hover { color: var(--c-saffron); }

        .cgclm-footer .cf-social { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
        .cgclm-footer .cf-social-btn {
          width: 36px; height: 36px;
          display: grid; place-items: center;
          border-radius: 50%;
          color: var(--c-cream);
          background: rgba(242,239,228,0.08);
          border: 1px solid rgba(242,239,228,0.18);
          transition: background .2s, color .2s, transform .2s;
        }
        .cgclm-footer .cf-social-btn:hover {
          background: var(--c-saffron);
          color: var(--c-ink);
          transform: translateY(-2px);
        }
        .cgclm-footer .cf-handle {
          font: 500 12px var(--font-body);
          color: rgba(242,239,228,0.55);
          margin-left: 4px;
        }

        .cgclm-footer .cf-credit {
          margin-top: 18px;
          padding-top: 18px;
          border-top: 1px solid rgba(242,239,228,0.08);
          text-align: center;
          font: 400 12px var(--font-body);
          color: rgba(242,239,228,0.5);
          letter-spacing: 0.02em;
        }
        .cgclm-footer .cf-credit a {
          color: var(--c-red);
          text-decoration: none;
          font-weight: 600;
        }
        .cgclm-footer .cf-credit a:hover { color: var(--c-saffron); }

        .cgclm-footer .cf-big {
          font-family: var(--font-impact);
          font-size: clamp(80px, 16vw, 220px);
          line-height: 0.9;
          letter-spacing: -0.03em;
          color: rgba(242,239,228,0.06);
          margin: 56px 0 -40px;
          text-transform: uppercase;
          pointer-events: none;
        }
        @media (max-width: 880px) {
          .cgclm-footer { padding: 48px 22px 24px; }
          .cgclm-footer .cf-top { grid-template-columns: 1fr; gap: 32px; }
          .cgclm-footer .cf-cols { grid-template-columns: repeat(2, 1fr); }
        }
      `}</style>

      <div className="cf-top">
        <div>
          <div style={{ filter: 'brightness(0) invert(1)' }}>
            <CGLogoLockup />
          </div>
          <div className="cf-tag">{t.footer.tag}</div>
          <p className="cf-sub">{t.footer.sub}</p>
        </div>
        <div className="cf-cols">
          {cols.map((c, i) => (
            <div key={i} className="cf-col">
              <h4>{c.title}</h4>
              <ul>
                {c.items.map((it, j) => (
                  <li key={j}><a href="#">{it}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>

      <div className="cf-institutional">
        <div className="cf-logos">
          <div className="cf-logo-pill">UCLM</div>
          <div className="cf-logo-pill">JCCM · CONSEJERÍA DE AGRICULTURA</div>
        </div>
        <div className="cf-social">
          <a className="cf-social-btn" href="https://www.facebook.com/catedragastronomiaUCLM" target="_blank" rel="noreferrer" aria-label="Facebook">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true"><path d="M13.5 21v-7.5h2.52l.38-2.93H13.5V8.7c0-.85.24-1.43 1.46-1.43h1.56V4.65a20.94 20.94 0 0 0-2.27-.12c-2.25 0-3.79 1.37-3.79 3.89v2.16H7.95v2.93h2.51V21h3.04Z"/></svg>
          </a>
          <a className="cf-social-btn" href="https://www.instagram.com/catedragastronomiauclm/" target="_blank" rel="noreferrer" aria-label="Instagram">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.4" cy="6.6" r="1" fill="currentColor" stroke="none"/></svg>
          </a>
          <a className="cf-social-btn" href="https://www.youtube.com/@catedragastronomiauclm" target="_blank" rel="noreferrer" aria-label="YouTube">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true"><path d="M21.6 7.2c-.2-.9-.9-1.6-1.8-1.8C18 5 12 5 12 5s-6 0-7.8.4c-.9.2-1.6.9-1.8 1.8C2 9 2 12 2 12s0 3 .4 4.8c.2.9.9 1.6 1.8 1.8C6 19 12 19 12 19s6 0 7.8-.4c.9-.2 1.6-.9 1.8-1.8.4-1.8.4-4.8.4-4.8s0-3-.4-4.8ZM10 15.5v-7l5.2 3.5-5.2 3.5Z"/></svg>
          </a>
          <span className="cf-handle">@catedragastronomiauclm</span>
        </div>
      </div>

      <div className="cf-big">CATEDRA · GASTRONOMIA</div>

      <div className="cf-bottom">
        <div>{t.footer.legal}</div>
        <div className="cf-bottom-links">
          {t.footer.links.map((l, i) => <a key={i} href="#">{l}</a>)}
        </div>
      </div>

      <div className="cf-credit">
        {t.footer.creditPre}
        <a href="https://cuarteroagurcia.com" target="_blank" rel="noreferrer">CuarteroAgurcia</a>
      </div>
    </footer>
  );
}

window.CFooter = CFooter;