// scene-hero.jsx — sticky nav + hero with parallax zoom-out

const NAV_LINKS = [
  { href: "#work",    label: "work" },
  { href: "#about",   label: "about" },
  { href: "#skills",  label: "skills" },
  { href: "#contact", label: "contact" },
];

function Nav({ theme, onToggleTheme, active }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const linksRef = useRef(null);
  const [underline, setUnderline] = useState({ left: 0, width: 0, opacity: 0 });

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Animated underline tracks active link
  useLayoutEffect(() => {
    const root = linksRef.current; if (!root) return;
    const idx = NAV_LINKS.findIndex(l => l.href === `#${active}`);
    if (idx < 0) { setUnderline(u => ({ ...u, opacity: 0 })); return; }
    const a = root.querySelectorAll("a")[idx];
    if (!a) return;
    const r = a.getBoundingClientRect();
    const rr = root.getBoundingClientRect();
    setUnderline({ left: r.left - rr.left + 14, width: r.width - 28, opacity: 1 });
  }, [active]);

  return (
    <>
      <nav className={`nav ${scrolled ? "scrolled" : ""}`} aria-label="Primary">
        <div className="nav-inner">
          <a href="#top" className="logo" aria-label="Home">
            Yash<span className="dot">.</span><span style={{ color: "var(--text-secondary)", fontWeight: 500 }}>somani</span>
          </a>
          <div ref={linksRef} className="nav-links desktop">
            {NAV_LINKS.map((l) => (
              <a key={l.href} href={l.href}
                 className={active === l.href.slice(1) ? "active" : ""}>
                {l.label}
              </a>
            ))}
            <span className="nav-underline" style={{
              left: underline.left, width: underline.width, opacity: underline.opacity,
            }}/>
          </div>
          <div className="nav-right">
            <button className="icon-btn" onClick={onToggleTheme} aria-label="Toggle theme">
              <span className="ico-stack">
                <span className="sun"><ISun size={16}/></span>
                <span className="moon"><IMoon size={16}/></span>
              </span>
            </button>
            <a href="#" download className="btn btn-primary btn-sm btn-pill" style={{ height: 38 }}>
              <IDownload size={14}/> Resume
            </a>
            <button className="icon-btn menu-btn" onClick={() => setMenuOpen(true)} aria-label="Open menu">
              <IMenu size={18}/>
            </button>
          </div>
        </div>
      </nav>
      <div className={`mobile-overlay ${menuOpen ? "open" : ""}`} role="dialog" aria-hidden={!menuOpen}>
        <button className="icon-btn" style={{ position: "absolute", top: 18, right: 22 }}
                onClick={() => setMenuOpen(false)} aria-label="Close menu">
          <IX size={18}/>
        </button>
        {NAV_LINKS.map((l) => (
          <a key={l.href} href={l.href} onClick={() => setMenuOpen(false)}>{l.label}</a>
        ))}
      </div>
    </>
  );
}

function Hero() {
  const [ref, p] = useElementProgress();
  const blobScale = lerp(1.12, 0.94, clamp(p / 0.6));
  const blobY     = lerp(-30, 80, p);
  const blob2Y    = lerp(40, -120, p);
  // Exit window: 0.42 → 0.78. Scale 1 → 1.35, opacity 1 → 0.
  const exit = clamp((p - 0.42) / 0.36);
  const heroScale   = lerp(1, 1.35, exit);
  const heroOpacity = lerp(1, 0, exit);
  const heroY       = lerp(0, -20, exit);

  return (
    <section id="top" className="hero scene" ref={ref}>
      <div className="hero-blob"
           style={{ transform: `translate3d(0, ${blobY.toFixed(1)}px, 0) scale(${blobScale.toFixed(3)})` }}/>
      <div className="hero-blob-2"
           style={{ transform: `translate3d(0, ${blob2Y.toFixed(1)}px, 0)` }}/>

      <div className="wrap">
        <div className="hero-inner" style={{
          transform: `translate3d(0, ${heroY.toFixed(1)}px, 0) scale(${heroScale.toFixed(3)})`,
          opacity: heroOpacity,
          transformOrigin: "center 45%",
        }}>
          <Reveal variant="up" delay={0}>
            <span className="eyebrow">Available for work · 2026</span>
          </Reveal>
          <Reveal variant="up" delay={150}>
            <h1 className="display" style={{ marginTop: 24 }}>
              I turn data into decisions.
              <span className="accent-line">Clear. Fast. Honest.</span>
            </h1>
          </Reveal>
          <Reveal variant="up" delay={300}>
            <p className="hero-sub">
              Data &amp; business analyst working in SQL, Python, and Power BI —
              building ETL pipelines, KPI dashboards, and the kind of insights
              that actually change what a team does next.
            </p>
          </Reveal>
          <Reveal variant="up" delay={450}>
            <div className="hero-cta">
              <a href="#work" className="btn btn-primary">
                View my work <IArrowRight size={15}/>
              </a>
              <a href="#contact" className="btn btn-ghost">
                Let's talk
              </a>
            </div>
          </Reveal>

          <div className="hero-stats">
            <Float amplitude={6} duration={3.4} delay={0}>
              <Reveal variant="zoom" delay={650} className="stat-card">
                <div className="num">50k+</div>
                <span className="lbl">Customer records analyzed</span>
              </Reveal>
            </Float>
            <Float amplitude={6} duration={3.0} delay={1.0}>
              <Reveal variant="zoom" delay={780} className="stat-card">
                <div className="num">+15%</div>
                <span className="lbl">Campaign targeting lift</span>
              </Reveal>
            </Float>
            <Float amplitude={6} duration={3.6} delay={2.0}>
              <Reveal variant="zoom" delay={910} className="stat-card">
                <div className="num">3</div>
                <span className="lbl">IEEE / conference papers</span>
              </Reveal>
            </Float>
          </div>
        </div>
      </div>

      <div className="scroll-cue" style={{ opacity: clamp(1 - p * 4) }}>
        <span>scroll</span>
        <span className="arrow"/>
      </div>
    </section>
  );
}

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