/* global React */

// ============================================================================
//  Volograms landing — shared UI primitives
// ============================================================================

function ArrowRight({ className = "arrow" }) {
  return (
    <svg className={className} viewBox="0 0 20 20" fill="none" aria-hidden="true">
      <path d="M3 10h13M11 5l5 5-5 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function Btn({ variant = "primary", children, href, onClick, withArrow, size }) {
  const cls = `btn btn--${variant}${size ? ` btn--${size}` : ""}`;
  const inner = (
    <>
      {children}
      {withArrow && <ArrowRight/>}
    </>
  );
  if (href) return <a className={cls} href={href} onClick={onClick}>{inner}</a>;
  return <button className={cls} onClick={onClick} type="button">{inner}</button>;
}

// ---------------------------------------------------------------------------
//  Header / nav
// ---------------------------------------------------------------------------
function VolHeader() {
  const [hidden, setHidden] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    let last = 0;
    const onScroll = () => {
      const y = window.scrollY;
      setHidden(y > last && y > 240);
      setScrolled(y > 40);
      last = y;
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={`nav ${hidden ? "is-hidden" : ""} ${scrolled ? "is-scrolled" : ""}`}>
      <div className="page nav__inner">
        <a className="nav__logo" href="#top" aria-label="Volograms">
          <img src="assets/logo-with-name-white.png" alt="Volograms"/>
        </a>
        <nav className="nav__links">
          <a href="#studio">Studio</a>
          <a href="#creator">Creator</a>
          <a href="#technology">Technology</a>
          <a href="#showcase">Showcase</a>
          <a href="#company">Company</a>
        </nav>
        <div className="nav__cta">
          <Btn variant="ghost" size="sm" href="#creator">Try Creator</Btn>
          <Btn variant="primary" size="sm" href="#contact" withArrow>Talk to us</Btn>
        </div>
      </div>
    </header>
  );
}

// ---------------------------------------------------------------------------
//  Reveal on scroll
// ---------------------------------------------------------------------------
function Reveal({ children, delay = 0, as: As = "div", className = "", ...rest }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          setTimeout(() => el.classList.add("is-in"), delay);
          obs.unobserve(el);
        }
      });
    }, { threshold: 0.15 });
    obs.observe(el);
    return () => obs.disconnect();
  }, [delay]);
  return (
    <As ref={ref} className={`reveal ${className}`} {...rest}>
      {children}
    </As>
  );
}

Object.assign(window, { Btn, ArrowRight, VolHeader, Reveal });