/* sections-top.jsx — Nav, Hero, Credentials */

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="container nav-inner">
        <a className="brand" href="#top">
          <img src="assets/logo.png" alt="CEO Fluente" />
          <span className="brand-name">CEO <em>Fluente</em></span>
        </a>
        <a className="btn btn-primary btn-sm" href={CTA_URL} target="_blank" rel="noopener">
          <span className="nav-cta-text">Agendar diagnóstico</span>
          <Icon name="arrow" />
        </a>
      </div>
    </nav>
  );
}

function Hero() {
  return (
    <header className="hero container" id="top">
      <div className="hero-grid">
        <div className="reveal in">
          <div className="hero-pill">
            <span className="dot"></span>
            Inglês executivo <b>1:1</b>
            <span className="tag">Cambridge · UCL</span>
          </div>
          <h1>
            Do travado em reunião<br />
            ao <span className="u">palco global.<br />Em 6 meses.</span>
          </h1>
          <p className="hero-lead">
            Preparação 1:1 para diretores e C-level. Em meio ano, você conduz reuniões
            com a matriz, apresenta para o board e negocia internacional — sem decorar
            frase, sem evitar a call.
          </p>
          <div className="hero-cta">
            <a className="btn btn-primary btn-lg" href={CTA_URL} target="_blank" rel="noopener">
              Agendar meu diagnóstico <Icon name="arrow" />
            </a>
            <a className="btn btn-ghost btn-lg" href="#metodo">Ver o método</a>
          </div>
          <p className="hero-microproof">
            <Icon name="check" /> 500+ executivos preparados
            <span className="sep"></span>
            <Icon name="check" /> Bruno · CPO da Equifax · palco global em Atlanta em 12 meses
          </p>
          <p className="hero-fineprint">
            Diagnóstico Executivo · <b>gratuito</b> · 30 minutos <span className="sep"></span> resposta em até 2h
            <span className="sep"></span> <b>3 vagas por semana</b>
          </p>
          <div className="hero-stats">
            <div className="stat">
              <div className="n">500<span className="plus">+</span></div>
              <div className="l">executivos preparados</div>
            </div>
            <div className="stat">
              <div className="n">6<span style={{ fontSize: "0.6em", color: "var(--muted)" }}>meses</span></div>
              <div className="l">até apresentar em inglês</div>
            </div>
            <div className="stat">
              <div className="n">1:1<span className="plus"></span></div>
              <div className="l">100% online, agenda flexível</div>
            </div>
          </div>
        </div>

        <div className="hero-portrait reveal in">
          <div className="frame">
            <img src="assets/ryan.jpg" alt="Ryan — instrutor CEO Fluente" />
          </div>
          <div className="badge"><span className="dot"></span> Ryan · seu instrutor</div>
          <div className="chip">
            <div className="big">500+</div>
            <div className="txt">executivos preparados para operar em inglês</div>
          </div>
        </div>
      </div>
    </header>
  );
}

function Credentials() {
  const companies = ["equifax", "honda", "yamaha", "byd", "samsung", "lg", "motorola"];
  const track = [...companies, ...companies];
  return (
    <section className="creds">
      <div className="container-wide">
        <div className="creds-row creds-row--marquee">
          <span className="creds-label">Profissionais<br />que já preparei</span>
          <div className="logo-marquee" aria-label="Empresas dos profissionais já preparados">
            <div className="logo-marquee__track">
              {track.map((c, i) => (
                <div className="logo-marquee__item" key={c + "-" + i} aria-hidden={i >= companies.length}>
                  <img src={"assets/logos/" + c + ".png"} alt={i < companies.length ? c : ""} />
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Credentials });