// 02 — Hero atrevido tipo magazine
function CHero() {
  const [, t] = window.useLang();
  return (
    <section className="cgclm-hero">
      <style>{`
        .cgclm-hero {
          position: relative;
          padding: 64px 40px 80px;
          background: var(--c-cream);
          overflow: hidden;
          isolation: isolate;
        }
        .cgclm-hero::before {
          content: "";
          position: absolute; inset: 0;
          background-image:
            linear-gradient(var(--c-line) 1px, transparent 1px),
            linear-gradient(90deg, var(--c-line) 1px, transparent 1px);
          background-size: 80px 80px;
          opacity: .35;
          mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black, transparent);
          z-index: -1;
        }
        .cgclm-hero .ch-kicker {
          font: 500 11px var(--font-body);
          letter-spacing: 0.16em;
          text-transform: uppercase;
          color: var(--c-ink-soft);
          display: flex; align-items: center; gap: 10px;
          margin-bottom: 32px;
        }
        .cgclm-hero .ch-kicker::before {
          content: ""; width: 36px; height: 1px; background: var(--c-green);
        }
        .cgclm-hero .ch-title {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: clamp(48px, 9vw, 132px);
          line-height: 0.92;
          letter-spacing: -0.035em;
          margin: 0;
          color: var(--c-ink);
        }
        .cgclm-hero .ch-script {
          font-family: var(--font-script);
          font-weight: 400;
          color: var(--c-red);
          font-size: 1.18em;
          font-style: normal;
          display: inline-block;
          line-height: 0.9;
          margin: 0 0.05em;
          transform: translateY(0.06em);
        }
        .cgclm-hero .ch-row2 {
          display: flex; align-items: baseline; flex-wrap: wrap; gap: 18px;
          margin-top: 4px;
        }
        .cgclm-hero .ch-region {
          font-family: var(--font-display);
          font-style: italic;
          font-weight: 400;
          font-size: clamp(28px, 4.4vw, 60px);
          color: var(--c-ink);
          letter-spacing: -0.02em;
          line-height: 0.95;
        }
        .cgclm-hero .ch-spoon {
          flex: 0 0 auto;
          color: var(--c-green);
        }
        .cgclm-hero .ch-grid {
          display: grid;
          grid-template-columns: 1.4fr 1fr;
          gap: 56px;
          align-items: end;
          margin-top: 56px;
        }
        .cgclm-hero .ch-lede {
          font-family: var(--font-display);
          font-size: clamp(18px, 1.6vw, 22px);
          font-weight: 400;
          line-height: 1.45;
          color: var(--c-ink);
          max-width: 56ch;
          letter-spacing: -0.005em;
          text-wrap: pretty;
        }
        .cgclm-hero .ch-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
        .cgclm-hero .ch-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 cubic-bezier(.6,.2,.2,1);
        }
        .cgclm-hero .ch-btn-primary {
          background: var(--c-green); color: white;
          box-shadow: 0 0 0 0 var(--c-red);
        }
        .cgclm-hero .ch-btn-primary:hover {
          transform: translate(2px, -2px);
          box-shadow: -6px 6px 0 0 var(--c-red);
        }
        .cgclm-hero .ch-btn-ghost {
          background: transparent;
          color: var(--c-ink);
          border: 1px solid var(--c-ink);
        }
        .cgclm-hero .ch-btn-ghost:hover { background: var(--c-ink); color: var(--c-cream); }

        .cgclm-hero .ch-sidecard {
          background: var(--c-aubergine);
          color: var(--c-cream);
          border-radius: 18px;
          padding: 28px;
          position: relative;
          overflow: hidden;
        }
        .cgclm-hero .ch-sidecard::after {
          content: "";
          position: absolute; right: -40px; top: -40px;
          width: 160px; height: 160px;
          background: var(--c-saffron);
          border-radius: 50%;
          opacity: 0.5;
          filter: blur(2px);
        }
        .cgclm-hero .ch-sc-tag {
          font-family: var(--font-impact);
          font-size: 11px; letter-spacing: 0.16em;
          color: var(--c-saffron);
          text-transform: uppercase;
          margin-bottom: 18px;
        }
        .cgclm-hero .ch-sc-meta {
          font-family: var(--font-display);
          font-weight: 400;
          font-style: italic;
          font-size: 22px;
          line-height: 1.25;
          color: var(--c-cream);
          letter-spacing: -0.01em;
        }
        .cgclm-hero .ch-sc-foot {
          margin-top: 22px;
          padding-top: 18px;
          border-top: 1px solid rgba(242,239,228,0.2);
          font: 500 12px var(--font-body);
          color: rgba(242,239,228,0.75);
          letter-spacing: 0.04em;
        }
        .cgclm-hero .ch-marquee {
          margin-top: 48px;
          padding: 14px 0;
          border-top: 1px solid var(--c-line);
          border-bottom: 1px solid var(--c-line);
          overflow: hidden;
        }
        .cgclm-hero .ch-marquee-track {
          display: flex; gap: 48px;
          animation: ch-marquee 38s linear infinite;
          font-family: var(--font-display);
          font-style: italic;
          font-weight: 400;
          font-size: 18px;
          white-space: nowrap;
          color: var(--c-ink-soft);
        }
        .cgclm-hero .ch-marquee-track span::before {
          content: "✦";
          color: var(--c-red);
          margin-right: 48px;
          font-style: normal;
        }
        @keyframes ch-marquee {
          from { transform: translateX(0); }
          to   { transform: translateX(-50%); }
        }
        @media (max-width: 880px) {
          .cgclm-hero { padding: 40px 22px 56px; }
          .cgclm-hero .ch-grid { grid-template-columns: 1fr; gap: 32px; }
        }
      `}</style>

      <div className="ch-kicker">{t.hero.kicker}</div>

      <h1 className="ch-title">
        {t.hero.title1}<br />
        <span className="ch-script">{t.hero.script}</span>
      </h1>
      <div className="ch-row2">
        <div className="ch-region">{t.hero.title2}</div>
        <svg className="ch-spoon" width="64" height="20" viewBox="0 0 64 20" aria-hidden="true">
          <ellipse cx="9" cy="10" rx="9" ry="7.5" fill="currentColor" />
          <rect x="14" y="7.5" width="48" height="5" rx="2.5" fill="currentColor" />
        </svg>
      </div>

      <div className="ch-grid">
        <div>
          <p className="ch-lede">{t.hero.lede}</p>
          <div className="ch-ctas">
            <a href="#" className="ch-btn ch-btn-primary">{t.hero.cta1} <Arrow size={16} /></a>
            <a href="#" className="ch-btn ch-btn-ghost">{t.hero.cta2}</a>
          </div>
        </div>
        <aside className="ch-sidecard">
          <div className="ch-sc-tag">2026 · UCLM × JCCM</div>
          <div className="ch-sc-meta">"Avanzar en la formación y la investigación gastronómica, contribuyendo al desarrollo regional."</div>
          <div className="ch-sc-foot">{t.hero.meta2}</div>
        </aside>
      </div>

      <div className="ch-marquee">
        <div className="ch-marquee-track">
          <span>Azafrán de la Mancha</span>
          <span>Queso Manchego DOP</span>
          <span>Ajo Morado de Las Pedroñeras IGP</span>
          <span>Berenjena de Almagro IGP</span>
          <span>Mazapán de Toledo</span>
          <span>Vinos de la Mancha DOP</span>
          <span>Miel de la Alcarria DOP</span>
          {/* duplicate for seamless loop */}
          <span>Azafrán de la Mancha</span>
          <span>Queso Manchego DOP</span>
          <span>Ajo Morado de Las Pedroñeras IGP</span>
          <span>Berenjena de Almagro IGP</span>
          <span>Mazapán de Toledo</span>
          <span>Vinos de la Mancha DOP</span>
          <span>Miel de la Alcarria DOP</span>
        </div>
      </div>
    </section>
  );
}

window.CHero = CHero;