// sections-top.jsx — Header + Hero (3 variants)
const { useState: useStateT, useEffect: useEffectT } = React;

function Header({ heroVariant }) {
  const [scrolled, setScrolled] = useStateT(false);
  // header sits over a dark hero only in variant A
  const over = heroVariant === "fullbleed";
  useEffectT(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const cls = `header ${scrolled ? "scrolled" : over ? "over" : ""}`;
  return (
    <header className={cls}>
      <div className="container header-inner">
        <a className="logo" href="#top" aria-label="Butter Cream Doces">
          <img src="public/logo.png" alt="Butter Cream Doces" className="logo-img" />
        </a>
        <nav className="nav">
          <a href="#portfolio">Portfólio</a>
          <a href="#processo">Processo</a>
          <a href="#depoimentos">Depoimentos</a>
          <a href="#faq">Dúvidas</a>
        </nav>
        <div className="header-cta">
          <WaButton msg="Olá Butter Cream! Quero solicitar um orçamento.">Orçamento</WaButton>
          <button className="menu-btn btn-ghost btn" style={{ padding: 12, borderRadius: 12 }} aria-label="Menu">
            <Icon.menu />
          </button>
        </div>
      </div>
    </header>
  );
}

const HERO_STATS = [
  { n: "+850", l: "Eventos adoçados" },
  { n: "5,0★", l: "Avaliação das clientes" },
];

function HeroCopy({ light }) {
  return (
    <div className="hero-copy">
      <p className="eyebrow reveal" style={light ? { color: "var(--gold)" } : null}>Confeitaria artesanal · Goiânia</p>
      <h1 className="display reveal d1">A arte de transformar<br />momentos em <em style={{ fontStyle: "italic", color: light ? "var(--gold)" : "var(--brown)" }}>memórias doces</em>.</h1>
      <p className="lead reveal d2">Bolos e doces feitos à mão, sob encomenda, para casamentos, festas e celebrações que merecem ser inesquecíveis.</p>
      <div className="hero-actions reveal d3">
        <WaButton msg="Olá Butter Cream! Quero solicitar um orçamento para meu evento." size="btn-lg">Solicitar orçamento</WaButton>
        <a className={`btn btn-lg ${light ? "btn-ghost-light" : "btn-ghost"}`} href="#portfolio">Ver portfólio</a>
      </div>
      <div className="hero-meta reveal d4">
        {HERO_STATS.map((s) => (
          <div className="stat" key={s.l}><div className="n" style={light ? { color: "#fff" } : null}>{s.n}</div><div className="l">{s.l}</div></div>
        ))}
      </div>
    </div>
  );
}

function Hero({ variant }) {
  if (variant === "fullbleed") {
    return (
      <section className="hero hero-a" id="top">
        <div className="hero-media"><img src="public/banner1.png" alt="Butter Cream Doces" className="hero-img" loading="eager" fetchPriority="high" /></div>
        <div className="container"><HeroCopy light /></div>
        <div className="hero-scroll" style={{ color: "#fff" }}><span className="mouse" /><span>Role</span></div>
      </section>
    );
  }
  if (variant === "layered") {
    return (
      <section className="hero hero-c container" id="top">
        <div className="hero-grid">
          <HeroCopy />
          <div className="hero-stack reveal d2">
            <div className="ph-frame main" style={{ aspectRatio: "4/5" }}><img src="public/banner1.png" alt="Butter Cream Doces" className="hero-img" loading="eager" fetchPriority="high" /></div>
            <div className="ph-frame float" style={{ aspectRatio: "1/1" }}><Ph label="detalhe · doces finos" icon={false} /></div>
          </div>
        </div>
      </section>
    );
  }
  // split (default)
  return (
    <section className="hero hero-b container" id="top">
      <div className="hero-grid">
        <HeroCopy />
        <div className="hero-media reveal d2" style={{ aspectRatio: "4/5" }}><img src="public/banner1.png" alt="Butter Cream Doces" className="hero-img" loading="eager" fetchPriority="high" /></div>
      </div>
    </section>
  );
}

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