// 09 — CTA / banner de jornadas
function CCta() {
  const [, t] = window.useLang();
  return (
    <section className="cgclm-cta">
      <style>{`
        .cgclm-cta {
          padding: 80px 40px;
          background: var(--c-cream);
        }
        .cgclm-cta .cc-card {
          background: var(--c-green-dark);
          color: var(--c-cream);
          border-radius: 22px;
          padding: 56px 48px;
          position: relative;
          overflow: hidden;
          display: grid;
          grid-template-columns: 1.3fr 1fr;
          gap: 40px;
          align-items: end;
        }
        .cgclm-cta .cc-card::before {
          content: "";
          position: absolute;
          top: -80px; right: -80px;
          width: 320px; height: 320px;
          border-radius: 50%;
          background: var(--c-saffron);
          opacity: 0.85;
          z-index: 0;
        }
        .cgclm-cta .cc-card::after {
          content: "";
          position: absolute;
          top: -40px; right: 60px;
          width: 200px; height: 200px;
          border-radius: 50%;
          background: var(--c-red);
          opacity: 0.9;
          z-index: 0;
          mix-blend-mode: multiply;
        }
        .cgclm-cta .cc-content { position: relative; z-index: 2; }
        .cgclm-cta .cc-kicker {
          display: inline-block;
          font: 500 11px var(--font-body);
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--c-saffron);
          padding: 6px 14px;
          border: 1px solid var(--c-saffron);
          border-radius: 999px;
          margin-bottom: 24px;
        }
        .cgclm-cta .cc-title {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: clamp(36px, 5vw, 64px);
          line-height: 1;
          letter-spacing: -0.025em;
          margin: 0 0 16px;
          text-wrap: balance;
        }
        .cgclm-cta .cc-sub {
          font: 400 17px/1.55 var(--font-body);
          color: rgba(242,239,228,0.85);
          max-width: 44ch;
          margin: 0 0 28px;
          text-wrap: pretty;
        }
        .cgclm-cta .cc-btns { display: flex; gap: 12px; flex-wrap: wrap; }
        .cgclm-cta .cc-btn {
          font: 600 14px var(--font-body);
          padding: 14px 22px;
          border-radius: 999px;
          text-decoration: none;
          display: inline-flex; align-items: center; gap: 8px;
          transition: all .25s;
        }
        .cgclm-cta .cc-btn-primary {
          background: var(--c-cream);
          color: var(--c-green-dark);
        }
        .cgclm-cta .cc-btn-primary:hover {
          transform: translate(2px, -2px);
          box-shadow: -6px 6px 0 var(--c-saffron);
        }
        .cgclm-cta .cc-btn-ghost {
          color: var(--c-cream);
          border: 1px solid rgba(242,239,228,0.4);
        }
        .cgclm-cta .cc-btn-ghost:hover {
          background: var(--c-cream); color: var(--c-green-dark);
          border-color: var(--c-cream);
        }
        .cgclm-cta .cc-side {
          position: relative; z-index: 2;
          display: flex; flex-direction: column; gap: 12px;
          align-items: end;
          text-align: right;
        }
        .cgclm-cta .cc-where {
          font-family: var(--font-display);
          font-style: italic;
          font-size: 22px;
          color: var(--c-cream);
          letter-spacing: -0.005em;
          max-width: 16ch;
        }
        .cgclm-cta .cc-rule {
          width: 56px; height: 1px;
          background: var(--c-saffron);
          margin: 8px 0 4px;
        }
        @media (max-width: 880px) {
          .cgclm-cta { padding: 56px 22px; }
          .cgclm-cta .cc-card {
            grid-template-columns: 1fr;
            padding: 40px 28px;
          }
          .cgclm-cta .cc-side { align-items: start; text-align: left; }
        }
      `}</style>

      <div className="cc-card">
        <div className="cc-content">
          <span className="cc-kicker">{t.cta.kicker}</span>
          <h2 className="cc-title">{t.cta.title}</h2>
          <p className="cc-sub">{t.cta.sub}</p>
          <div className="cc-btns">
            <a href="#" className="cc-btn cc-btn-primary">{t.cta.cta1} <Arrow size={14} /></a>
            <a href="#" className="cc-btn cc-btn-ghost">{t.cta.cta2}</a>
          </div>
        </div>
        <div className="cc-side">
          <div style={{ fontFamily: 'var(--font-impact)', fontSize: 11, letterSpacing: '0.18em', color: 'var(--c-saffron)' }}>WHERE</div>
          <div className="cc-where">{t.cta.where}</div>
          <div className="cc-rule"></div>
        </div>
      </div>
    </section>
  );
}

window.CCta = CCta;