/* global React */
const { useState, useEffect, useRef } = React;

// =========================================================
// Top Nav
// =========================================================
function Nav({ onBook }) {
  return (
    <nav className="nav">
      <div className="nav__inner">
        <a className="nav__brand" href="#top">
          <span className="dot"></span>
          Jay Bansal
        </a>
        <div className="nav__links">
          <a href="#story">Story</a>
          <a href="#wins">Wins</a>
          <a href="#programs">Programs</a>
          <a href="#proof">Proof</a>
        </div>
        <button className="btn btn--primary" onClick={onBook}>
          Book a call
          <ArrowGlyph />
        </button>
      </div>
    </nav>);

}

function ArrowGlyph() {
  return (
    <svg className="arrow" viewBox="0 0 16 16" fill="none">
      <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

// =========================================================
// Sticky bottom CTA — appears after scrolling past hero
// =========================================================
function StickyCTA({ onBook }) {
  const [on, setOn] = useState(false);
  useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      const h = window.innerHeight;
      // appear after hero + first proof section, hide near footer
      const doc = document.documentElement.scrollHeight;
      setOn(y > h * 0.9 && y < doc - h * 1.4);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className={"sticky-cta" + (on ? " is-on" : "")}>
      <div className="sticky-cta__avatar">
        <img src="assets/jay-avatar.jpg" alt="Jay" style={{ margin: "-2px 0px 0px 2px" }} />
      </div>
      <div className="sticky-cta__copy">
        <strong>Talk to Jay directly</strong>
        <span>30-min discovery · no pitch</span>
      </div>
      <button className="btn btn--primary" onClick={onBook}>
        Book a call <ArrowGlyph />
      </button>
    </div>);

}

// =========================================================
// Reveal-on-scroll wrapper
// =========================================================
function Reveal({ children, as = "div", delay = 0, ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setTimeout(() => el.classList.add("is-in"), delay);
          io.disconnect();
        }
      },
      { threshold: 0.15 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  const Tag = as;
  return (
    <Tag ref={ref} className={"reveal " + (rest.className || "")} {...rest}>
      {children}
    </Tag>);

}

Object.assign(window, { Nav, StickyCTA, Reveal, ArrowGlyph });