// Extracurriculares — 3 temas (Esporte / Cultura / Inovação) with tabs
const Extracurriculares = () => {
  const data = window.ABACO.extracurriculares;
  const themes = ['esporte', 'cultura', 'inovacao'];
  const [active, setActive] = React.useState('esporte');
  const cur = data[active];

  return (
    <section id="extras" className="extras">
      <div className="container">
        <div className="section-head extras-head">
          <div>
            <div className="eyebrow">Extracurriculares</div>
            <h2>Esporte, cultura<br/>e inovação para<br/>cada talento.</h2>
            <p>Mais de 40 atividades extracurriculares — distribuídas em três grandes eixos — para que cada estudante encontre o que faz seus olhos brilharem.</p>
          </div>

          <div className="extras-tabs">
            {themes.map((t) => (
              <button key={t}
                      onClick={() => setActive(t)}
                      className={"extras-tab extras-tab-" + t + (active === t ? ' active' : '')}>
                <span className="extras-tab-icon">
                  {t === 'esporte' && (
                    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2">
                      <circle cx="12" cy="12" r="9"/>
                      <path d="M3 12h18M12 3v18M5 7c4 3 10 3 14 0M5 17c4-3 10-3 14 0"/>
                    </svg>
                  )}
                  {t === 'cultura' && (
                    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2">
                      <path d="M9 18V5l12-2v13"/>
                      <circle cx="6" cy="18" r="3"/>
                      <circle cx="18" cy="16" r="3"/>
                    </svg>
                  )}
                  {t === 'inovacao' && (
                    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2">
                      <path d="M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12c1 1 1.5 2 1.5 3v1h5v-1c0-1 .5-2 1.5-3A7 7 0 0 0 12 2z"/>
                    </svg>
                  )}
                </span>
                <span className="extras-tab-label">{data[t].label}</span>
              </button>
            ))}
          </div>
        </div>

        <div className={"extras-panel extras-panel-" + active}>
          <div className="extras-photos">
            {cur.photos.map((c, i) => (
              <div key={i} className={"extras-photo extras-photo-" + i} style={{background: `linear-gradient(135deg, ${c}, ${c}cc)`}}>
                <span>foto {i + 1}</span>
              </div>
            ))}
          </div>
          <div className="extras-info">
            <h3>{cur.label} no Ábaco</h3>
            <p>{cur.blurb}</p>
            <div className="extras-tags">
              {cur.tags.map((t) => <span key={t} className="extras-tag">{t}</span>)}
            </div>
            <a href="#" className="btn btn-outline">Ver todas as modalidades →</a>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Extracurriculares = Extracurriculares;