// Hero — Full-image carousel (3 banners)
const HERO_SLIDES = [
  {
    id: 's1',
    eyebrow: 'Matrículas 2026 abertas',
    title: ['Formamos quem', 'pensa por si.'],
    accent: 1,
    body: 'Há 48 anos cultivando estudantes que questionam, criam e transformam — da Educação Infantil ao pré-vestibular.',
    bg: 'linear-gradient(120deg, #0B71A1 0%, #00276D 100%)',
    deco: 'cyan',
    chip: 'colégio · desde 1978',
  },
  {
    id: 's2',
    eyebrow: 'Educação Infantil',
    title: ['Aprender brincando,', 'descobrir o mundo.'],
    accent: 0,
    body: 'Um espaço pensado para que cada criança desenvolva autonomia, criatividade e o prazer genuíno de descobrir.',
    bg: 'linear-gradient(135deg, #f59e3c 0%, #b8540d 100%)',
    deco: 'warm',
    chip: 'do berçário aos 5 anos',
  },
  {
    id: 's3',
    eyebrow: 'Ensino Médio · Pré-Vestibular',
    title: ['92% aprovados em', 'universidades públicas.'],
    accent: 1,
    body: 'Itinerários formativos, aprofundamento por áreas e a preparação técnica que os melhores vestibulares exigem.',
    bg: 'linear-gradient(135deg, #00276D 0%, #001540 100%)',
    deco: 'cyan',
    chip: 'turma 2025',
  },
];

const Hero = () => {
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const total = HERO_SLIDES.length;

  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setIdx((i) => (i + 1) % total), 6500);
    return () => clearInterval(t);
  }, [paused, total]);

  return (
    <section id="top" className="hero"
             onMouseEnter={() => setPaused(true)}
             onMouseLeave={() => setPaused(false)}>
      <div className="hero-stack">
        {HERO_SLIDES.map((s, i) => (
          <div key={s.id}
               className={"hero-slide " + (i === idx ? 'active' : i === (idx - 1 + total) % total ? 'prev' : '')}
               style={{ background: s.bg }}>
            <div className="hero-slide-img ph">
              <span>foto full-bleed · {s.chip}</span>
            </div>
            <div className="hero-slide-overlay" />
            <div className={"hero-slide-deco hero-slide-deco-" + s.deco} />

            <div className="container hero-slide-inner">
              <div className="hero-chip">
                <span className="hero-chip-dot" />
                {s.chip}
              </div>
              <div className="hero-eyebrow">{s.eyebrow}</div>
              <h1>
                {s.title.map((line, li) => (
                  <span key={li} className={li === s.accent ? 'hero-h1-accent' : ''}>
                    {line}
                    {li < s.title.length - 1 && <br/>}
                  </span>
                ))}
              </h1>
              <p>{s.body}</p>
              <div className="hero-ctas">
                <a href="#matricula" className="btn btn-cyan">Matricule-se em 2026</a>
                <a href="#matricula" className="btn btn-ghost">Pré-inscrição 2027</a>
              </div>
            </div>
          </div>
        ))}
      </div>

      <div className="hero-controls container">
        <button className="hero-nav" onClick={() => setIdx((i) => (i - 1 + total) % total)} aria-label="anterior">
          <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 6l-6 6 6 6"/></svg>
        </button>
        <div className="hero-progress">
          {HERO_SLIDES.map((s, i) => (
            <button key={s.id}
                    onClick={() => setIdx(i)}
                    className={"hero-prog " + (i === idx ? 'active' : '')}
                    aria-label={`slide ${i + 1}`}>
              <span className="hero-prog-bar">
                <span className="hero-prog-fill" />
              </span>
              <span className="hero-prog-num">0{i + 1}</span>
            </button>
          ))}
        </div>
        <button className="hero-nav" onClick={() => setIdx((i) => (i + 1) % total)} aria-label="próximo">
          <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 6l6 6-6 6"/></svg>
        </button>
      </div>
    </section>
  );
};

window.Hero = Hero;