const Header = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={`ms-header ${scrolled ? "is-scrolled" : ""}`}>
      <div className="ms-container ms-header__inner">
        <a href="#top" className="ms-header__logo">
          <Monogram variant="white" size={36} />
        </a>
        <nav className="ms-header__nav">
          <a href="#pilares">A jornada</a>
          <a href="#larissa">Larissa</a>
          <a href="#aplicacao">Aplicação</a>
        </nav>
        <a href="/candidatura" className="ms-header__cta">
          Quero me candidatar <span>→</span>
        </a>
      </div>
    </header>
  );
};

const Hero = () => (
  <section id="top" data-screen-label="01 Hero" className="ms-hero">
    <div className="ms-hero__inner ms-container">
      <div className="ms-hero__copy">
        <div className="ms-hero__badge reveal reveal-d1">
          <span className="ms-dot ms-dot--gold-pulse" />
          <span>Mentoria seletiva · Turma de Junho · 12 vagas</span>
        </div>
        <div className="reveal reveal-d2"><Eyebrow>MS Journey · Edição Junho 2026</Eyebrow></div>
        <h1 className="ms-hero__h1 reveal reveal-d3">
          Para a <strong>empresária</strong> que quer <strong>construir</strong> um <span className="ms-hero__script">negócio forte <strong>de verdade</strong>.</span>
        </h1>
        <p className="ms-hero__sub reveal reveal-d4">
          Uma jornada de 3 meses para mulheres que sabem que podem alcançar um próximo nível — mas ainda não construíram a base certa para isso.
        </p>
        <div className="ms-hero__actions reveal reveal-d5">
          <a href="/candidatura" className="ms-btn ms-btn--cream">
            <span>Quero me candidatar à seleção</span><span className="ms-btn__arr">→</span>
          </a>
          <span className="ms-hero__scarcity">
            <span className="ms-dot" /> Apenas <strong>12 vagas</strong>
          </span>
        </div>
      </div>
      <div className="ms-hero__photo" style={{ position: "relative", overflow: "visible" }}>
        <img src="../../assets/photos/larissa-burgundy-gold-choker.jpeg" alt="Larissa Otolini" style={{ position: "relative", zIndex: 1 }} />
        <span
          className="ms-hero__signature"
          style={{
            position: "static",
            display: "block",
            marginTop: "16px",
            fontSize: "clamp(40px, 5vw, 64px)",
            textAlign: "center",
            lineHeight: 1,
            transform: "none",
            top: "auto",
            left: "auto",
            right: "auto",
            bottom: "auto"
          }}
        >journey</span>
      </div>
    </div>
    <div className="ms-hero__chrome">
      <span>MS Journey</span>
      <span>Jornada Mulher de Sucesso</span>
      <span>Larissa Otolini</span>
    </div>
  </section>
);

Object.assign(window, { Header, Hero });