// 10 — Índice Inteligente Gastronómico
function CIndice() {
  const [, t] = window.useLang();
  return (
    <section className="cgclm-indice">
      <style>{`
        .cgclm-indice { padding: 80px 40px; background: var(--c-ink); color: var(--c-cream); }
        .cgclm-indice .ci-head {
          display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
          margin-bottom: 40px; align-items: end;
        }
        .cgclm-indice .ci-kicker {
          font-family: var(--font-impact);
          font-size: 11px; letter-spacing: 0.22em;
          color: var(--c-saffron); text-transform: uppercase;
        }
        .cgclm-indice .ci-title {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: clamp(32px, 4.4vw, 56px);
          line-height: 1.0;
          letter-spacing: -0.02em;
          margin: 14px 0 0; color: var(--c-cream);
          text-wrap: balance;
        }
        .cgclm-indice .ci-lede {
          font: 400 16px/1.65 var(--font-body);
          color: rgba(242,239,228,0.75);
          max-width: 50ch;
          text-wrap: pretty;
        }
        .cgclm-indice .ci-board {
          display: grid;
          grid-template-columns: 320px 1fr;
          gap: 32px;
          background: rgba(242,239,228,0.04);
          border: 1px solid rgba(242,239,228,0.12);
          border-radius: 22px;
          padding: 32px;
          align-items: stretch;
        }
        .cgclm-indice .ci-score {
          display: flex; flex-direction: column; justify-content: space-between;
          padding: 24px;
          background: var(--c-aubergine);
          border-radius: 16px;
          position: relative; overflow: hidden;
        }
        .cgclm-indice .ci-score::after {
          content: ""; position: absolute; bottom: -60px; right: -60px;
          width: 200px; height: 200px;
          background: var(--c-saffron); opacity: 0.4;
          border-radius: 50%; filter: blur(2px);
        }
        .cgclm-indice .ci-score-label {
          font-family: var(--font-impact);
          font-size: 10px; letter-spacing: 0.2em;
          color: var(--c-saffron); text-transform: uppercase;
          z-index: 1;
        }
        .cgclm-indice .ci-score-n {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: 152px;
          line-height: 0.85;
          letter-spacing: -0.04em;
          color: var(--c-cream);
          margin: 12px 0;
          z-index: 1;
        }
        .cgclm-indice .ci-score-n sup {
          font-size: 22px; vertical-align: top;
          color: var(--c-saffron);
          margin-left: 6px;
        }
        .cgclm-indice .ci-score-delta {
          font: 600 13px var(--font-body);
          color: var(--c-saffron);
          z-index: 1;
        }
        .cgclm-indice .ci-metrics {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 12px;
        }
        .cgclm-indice .ci-metric {
          background: rgba(242,239,228,0.06);
          padding: 18px; border-radius: 12px;
          display: flex; flex-direction: column; gap: 8px;
          transition: background .25s;
        }
        .cgclm-indice .ci-metric:hover { background: rgba(242,239,228,0.1); }
        .cgclm-indice .ci-metric-k {
          font: 600 11px var(--font-body);
          letter-spacing: 0.12em; text-transform: uppercase;
          color: rgba(242,239,228,0.7);
        }
        .cgclm-indice .ci-metric-v {
          font-family: var(--font-display);
          font-weight: 600; font-size: 32px;
          color: var(--c-cream); letter-spacing: -0.02em;
        }
        .cgclm-indice .ci-metric-bar {
          width: 100%; height: 4px;
          background: rgba(242,239,228,0.1);
          border-radius: 2px;
          overflow: hidden;
        }
        .cgclm-indice .ci-metric-bar > div {
          height: 100%; background: var(--c-saffron);
          border-radius: 2px;
          animation: ci-grow 1.4s cubic-bezier(.6,.2,.2,1) both;
        }
        @keyframes ci-grow { from { width: 0; } }
        .cgclm-indice .ci-metric-foot {
          display: flex; justify-content: space-between;
          font: 500 11px var(--font-body);
          color: rgba(242,239,228,0.6);
        }
        .cgclm-indice .ci-metric-foot b { color: var(--c-saffron); font-weight: 600; }
        .cgclm-indice .ci-cta-row {
          margin-top: 28px;
          display: flex; justify-content: center;
        }
        .cgclm-indice .ci-cta {
          font: 600 14px var(--font-body);
          padding: 14px 22px;
          background: var(--c-cream); color: var(--c-ink);
          border-radius: 999px;
          text-decoration: none;
          display: inline-flex; align-items: center; gap: 8px;
          transition: all .25s;
        }
        .cgclm-indice .ci-cta:hover {
          transform: translate(2px, -2px);
          box-shadow: -6px 6px 0 var(--c-saffron);
        }
        @media (max-width: 1000px) {
          .cgclm-indice .ci-head { grid-template-columns: 1fr; gap: 24px; }
          .cgclm-indice .ci-board { grid-template-columns: 1fr; }
          .cgclm-indice .ci-metrics { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 600px) {
          .cgclm-indice { padding: 56px 22px; }
          .cgclm-indice .ci-metrics { grid-template-columns: 1fr; }
        }
      `}</style>

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

      <div className="ci-board">
        <div className="ci-score">
          <div className="ci-score-label">{t.indice.scoreLabel}</div>
          <div className="ci-score-n">{t.indice.score}<sup>/100</sup></div>
          <div className="ci-score-delta">▲ {t.indice.delta}</div>
        </div>
        <div className="ci-metrics">
          {t.indice.metrics.map((m, i) => (
            <div key={i} className="ci-metric">
              <div className="ci-metric-k">{m.k}</div>
              <div className="ci-metric-v">{m.v}</div>
              <div className="ci-metric-bar"><div style={{ width: m.v + '%' }}></div></div>
              <div className="ci-metric-foot">
                <span>{m.note}</span>
                <b>{m.d}</b>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="ci-cta-row">
        <a href="#" className="ci-cta">{t.indice.cta} <Arrow size={14} /></a>
      </div>
    </section>
  );
}
window.CIndice = CIndice;