/* hero.jsx — 3 hero variants + slim brand header */

function useParallax(strength = 1) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (matchMedia("(prefers-reduced-motion:reduce)").matches) return;
    let raf;
    const onMove = (e) => {
      const x = (e.clientX / window.innerWidth - .5) * 2;
      const y = (e.clientY / window.innerHeight - .5) * 2;
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        el.style.setProperty("--px", x * 12 * strength + "px");
        el.style.setProperty("--py", y * 12 * strength + "px");
      });
    };
    window.addEventListener("mousemove", onMove);
    return () => {window.removeEventListener("mousemove", onMove);cancelAnimationFrame(raf);};
  }, [strength]);
  return ref;
}

function BrandHeader({ onCTA }) {
  const [solid, setSolid] = useState(false);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => {setSolid(window.scrollY > 40);if (window.scrollY > 80) setOpen(false);};
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => {document.body.style.overflow = "";};
  }, [open]);

  const close = () => setOpen(false);
  const goTo = (id) => {close();setTimeout(() => document.getElementById(id)?.scrollIntoView({ behavior: "smooth" }), 60);};

  return (
    <>
      <header style={{
        position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
        transition: "background .4s, border-color .4s, backdrop-filter .4s",
        background: solid || open ? "rgba(7,5,7,.94)" : "transparent",
        backdropFilter: solid || open ? "blur(14px) saturate(140%)" : "none",
        WebkitBackdropFilter: solid || open ? "blur(14px) saturate(140%)" : "none",
        borderBottom: "1px solid " + (solid || open ? "var(--border-dark)" : "transparent")
      }}>
        <div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 68 }}>
          <a href="#top" onClick={close} style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <img src="assets/stg-icon.png" alt="STG Consult" style={{ height: 34, width: "auto" }} />
            <img src="assets/stg-wordmark.png" alt="STG Consult" style={{ height: 24, width: "auto", objectFit: "contain" }} className="hide-sm" />
          </a>
          <button className="btn btn-primary hide-sm" onClick={onCTA} style={{ padding: ".7em 1.3em", fontSize: ".95rem" }}>
            Falar com a STG
          </button>
          {/* Hamburger — mobile only */}
          <button className="show-sm hbg" onClick={() => setOpen((o) => !o)} aria-label={open ? "Fechar menu" : "Abrir menu"} aria-expanded={open}>
            <span className={"hbg__icon" + (open ? " hbg--open" : "")}></span>
          </button>
        </div>
      </header>

      {/* Mobile nav overlay */}
      <div className={"mnav" + (open ? " mnav--open" : "")} aria-hidden={!open} onClick={close}>
        <nav className="mnav__inner" onClick={(e) => e.stopPropagation()}>
          <a className="mnav__link" href="#experiencia" onClick={() => goTo("experiencia")}>Experiência</a>
          <a className="mnav__link" href="#processo" onClick={() => goTo("processo")}>Como funciona</a>
          <a className="mnav__link" href="#faq" onClick={() => goTo("faq")}>Dúvidas</a>
          <a className="mnav__link" href="#contato" onClick={() => goTo("contato")}>Contato</a>
          <button className="btn btn-primary" onClick={() => {close();onCTA();}} style={{ width: "100%", marginTop: 8, padding: "1.1em" }}>
            Falar com a STG <ArrowIcon />
          </button>
        </nav>
      </div>

      <style>{`
        .hide-sm{} .show-sm{display:none}
        @media(max-width:640px){
          .hide-sm{display:none!important}
          .show-sm{display:flex!important}
        }
        /* Hamburger */
        .hbg{background:none;border:none;padding:8px;width:40px;height:40px;align-items:center;justify-content:center;position:relative;cursor:pointer}
        .hbg__icon,.hbg__icon::before,.hbg__icon::after{display:block;width:22px;height:2px;background:var(--text-dark);border-radius:2px;transition:transform .3s,opacity .2s,top .25s}
        .hbg__icon{position:relative}
        .hbg__icon::before,.hbg__icon::after{content:"";position:absolute;left:0}
        .hbg__icon::before{top:-7px}
        .hbg__icon::after{top:7px}
        .hbg__icon.hbg--open{background:transparent}
        .hbg__icon.hbg--open::before{top:0;transform:rotate(45deg)}
        .hbg__icon.hbg--open::after{top:0;transform:rotate(-45deg)}
        /* Mobile nav */
        .mnav{position:fixed;inset:0;top:68px;z-index:49;pointer-events:none;visibility:hidden;transition:visibility 0s .32s}
        .mnav--open{pointer-events:all;visibility:visible;transition:visibility 0s}
        .mnav::before{content:"";position:absolute;inset:0;background:rgba(7,5,7,.5);opacity:0;transition:opacity .32s}
        .mnav--open::before{opacity:1}
        .mnav__inner{position:absolute;top:0;left:0;right:0;background:#0e0a12;border-bottom:1px solid var(--border-dark);padding:20px 20px 28px;display:flex;flex-direction:column;gap:0;transform:translateY(-100%);transition:transform .32s cubic-bezier(.16,.84,.44,1)}
        .mnav--open .mnav__inner{transform:translateY(0)}
        .mnav__link{display:block;padding:15px 4px;font-family:"Rubik",sans-serif;font-weight:500;font-size:1.1rem;color:var(--text-dark);border-bottom:1px solid var(--border-dark);transition:color .2s}
        .mnav__link:last-of-type{border-bottom:none;margin-bottom:20px}
        .mnav__link:hover{color:var(--purple-300)}
      `}</style>
    </>);

}

const HEADLINE =
<>Desenvolvimento de<br /><span className="accent" style={{ color: "rgb(255,255,255)" }}>E‑Commerce sob medida</span></>;const SUB = <>Criamos, migramos e estruturamos operações de E‑Commerce<br />com foco em performance e escala</>;

function HeroBadges() {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginTop: 30 }}>
      {["+20 anos de experiência", "+200 projetos", "Migração sem downtime"].map((t, i) =>
      <Reveal key={t} delay={400 + i * 90} style={{
        fontFamily: "JetBrains Mono,monospace", fontSize: ".72rem", letterSpacing: ".08em",
        color: "var(--text-dark-dim)", border: "1px solid var(--border-dark)", borderRadius: 99,
        padding: "8px 14px", background: "rgba(255,252,252,.03)"
      }}>{t}</Reveal>
      )}
    </div>);

}

/* ----- Variant: Cinematic (centered) ----- */
function HeroCinematic({ onCTA }) {
  const pref = useParallax(1);
  return (
    <div ref={pref} style={{ flex: "1 0 auto", minHeight: "calc(100svh - 200px)", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", padding: "clamp(16px,2.5vh,32px) 0", position: "relative" }}>
      <div className="glow" style={{ width: 720, height: 720, background: "var(--purple-glow)", top: "-6%", left: "50%", transform: "translateX(calc(-50% + var(--px,0px)))", opacity: .42 }} />
      <div className="glow" style={{ width: 420, height: 420, background: "rgba(50,34,50,.9)", bottom: "0%", left: "20%", opacity: .7, filter: "blur(110px)" }} />
      <div className="container" style={{ position: "relative", maxWidth: 1000 }}>
        <Reveal as="div" style={{ marginBottom: 40, display: "flex", justifyContent: "center" }}>
          <img src="assets/stg-logo-light.png" alt="STG Consult" style={{ height: "clamp(76px,8.2vw,104px)", width: "auto" }} />
        </Reveal>
        <Reveal as="h1" className="display" delay={80} style={{ fontSize: "clamp(2.32rem,5.3vw,61px)", fontWeight: 800, letterSpacing: "-1.8px", lineHeight: 1.05 }}>{HEADLINE}</Reveal>
        <Reveal as="p" className="lead text-dim" delay={180} style={{ margin: "14px auto 0", maxWidth: 660 }}>{SUB}</Reveal>
        <Reveal delay={280} style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap", marginTop: 22 }}>
          <CTA onClick={onCTA} small>Receber orçamento</CTA>
          <button className="btn btn-secondary" onClick={() => document.getElementById("processo")?.scrollIntoView()} style={{ fontSize: ".94rem", padding: ".82em 1.45em", borderRadius: 13, whiteSpace: "nowrap" }}>Ver como funciona</button>
        </Reveal>
      </div>
    </div>);

}

/* ----- Variant: Split (asymmetric) ----- */
function HeroSplit({ onCTA }) {
  const pref = useParallax(1.2);
  return (
    <div ref={pref} style={{ minHeight: "min(720px,76svh)", display: "flex", alignItems: "flex-start", padding: "clamp(32px,4.5vh,56px) 0 36px", position: "relative" }}>
      <div className="glow" style={{ width: 640, height: 640, background: "var(--purple-glow)", top: "8%", right: "-10%", transform: "translate(var(--px,0px),var(--py,0px))", opacity: .4 }} />
      <div className="glow" style={{ width: 460, height: 460, background: "rgba(50,34,50,1)", bottom: "-10%", left: "-8%", opacity: .8, filter: "blur(120px)" }} />
      <div className="container" style={{ position: "relative" }}>
        <div className="hero-split-grid" style={{ display: "grid", gridTemplateColumns: "1.05fr .95fr", gap: 56, alignItems: "center" }}>
          <div>
            <Reveal as="div" style={{ marginBottom: 26, display: "flex" }}>
              <img src="assets/stg-wordmark.png" alt="STG Consult" style={{ height: 38, width: "auto" }} />
            </Reveal>
            <Reveal as="h1" className="display" delay={80} style={{ fontSize: "clamp(2.25rem,7vw,50px)", fontWeight: 800, letterSpacing: "-1.6px", lineHeight: 0.98 }}>{HEADLINE}</Reveal>
            <Reveal as="p" className="lead text-dim" delay={180} style={{ marginTop: 24, maxWidth: 520 }}>{SUB}</Reveal>
            <Reveal delay={280} style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 36 }}>
              <CTA onClick={onCTA} small />
              <button className="btn btn-secondary" onClick={() => document.getElementById("processo")?.scrollIntoView()} style={{ fontSize: ".94rem", padding: ".82em 1.45em", borderRadius: 13, whiteSpace: "nowrap" }}>Ver como funciona</button>
            </Reveal>
            <HeroBadges />
          </div>
          <Reveal delay={300} className="hero-split-art" style={{ position: "relative", transform: "translate(var(--px,0px),var(--py,0px))", transition: "transform .25s ease-out" }}>
            <BrowserMockup />
            <div style={{ position: "absolute", left: -34, bottom: -54, width: "62%" }}><DashboardMockup /></div>
            <div style={{ position: "absolute", right: -26, top: -34 }} className="hide-sm"><PhoneMockup /></div>
          </Reveal>
        </div>
      </div>
      <style>{`
        @media(max-width:900px){
          .hero-split-grid{grid-template-columns:1fr!important;gap:64px!important}
          .hero-split-art{margin-top:20px}
        }
      `}</style>
    </div>);

}

/* ----- Variant: Depth (layered cluster) ----- */
function HeroDepth({ onCTA }) {
  const pref = useParallax(1);
  return (
    <div ref={pref} style={{ minHeight: "min(680px,72svh)", display: "flex", flexDirection: "column", justifyContent: "flex-start", padding: "clamp(32px,4.5vh,56px) 0 36px", position: "relative", overflow: "hidden" }}>
      <div className="glow" style={{ width: 900, height: 900, background: "var(--purple-glow)", top: "-30%", left: "50%", transform: "translate(calc(-50% + var(--px,0px)),var(--py,0px))", opacity: .34 }} />
      <div style={{ position: "absolute", inset: 0, backgroundImage: "radial-gradient(circle at 50% 0%,rgba(170,0,238,.10),transparent 55%)" }} />
      <div className="container" style={{ position: "relative", textAlign: "center" }}>
        <Reveal as="div" style={{ marginBottom: 30, display: "flex", justifyContent: "center" }}>
          <img src="assets/stg-logo-light.png" alt="STG Consult" style={{ height: "clamp(74px,8vw,96px)", width: "auto" }} />
        </Reveal>
        <Reveal as="h1" className="display" delay={80} style={{ fontSize: "clamp(2.7rem,7vw,5rem)", maxWidth: 1000, margin: "0 auto" }}>{HEADLINE}</Reveal>
        <Reveal as="p" className="lead text-dim" delay={160} style={{ margin: "26px auto 0", maxWidth: 600 }}>{SUB}</Reveal>
        <Reveal delay={260} style={{ marginTop: 36 }}><CTA onClick={onCTA} small /></Reveal>
      </div>
      <Reveal delay={420} className="container" style={{ position: "relative", marginTop: 44 }}>
        <div className="hero-depth-cluster" style={{ display: "flex", alignItems: "flex-end", justifyContent: "center", gap: 28, transform: "translate(var(--px,0px),var(--py,0px))", transition: "transform .25s ease-out" }}>
          <div style={{ width: 300, transform: "translateY(28px) rotate(-2deg)" }} className="hide-md"><DashboardMockup /></div>
          <div style={{ width: 520, flex: "0 0 auto", maxWidth: "92vw" }}><BrowserMockup /></div>
          <div style={{ transform: "translateY(10px) rotate(2deg)" }} className="hide-md"><PhoneMockup /></div>
        </div>
        <style>{`@media(max-width:900px){.hide-md{display:none!important}}`}</style>
      </Reveal>
    </div>);

}

function Hero({ variant = "split", onCTA }) {
  const map = { cinematic: HeroCinematic, split: HeroSplit, depth: HeroDepth };
  const C = map[variant] || HeroSplit;
  return <section id="top" className="sec-dark" style={{ background: "transparent", position: "relative", flex: "1 0 auto", display: "flex", flexDirection: "column" }}>
    <div className="aurora-wrap"><div className="aurora"></div></div>
    <C onCTA={onCTA} />
  </section>;
}

Object.assign(window, { Hero, BrandHeader, useParallax });