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

const HollowTriangle = ({ className }) => (
  <svg className={className} viewBox="0 0 22 18" fill="none"
       stroke="currentColor" strokeWidth="2.2" strokeLinejoin="round" aria-hidden="true">
    <polygon points="11,2 20,16 2,16" />
  </svg>
);

function Hero({ onBook }) {
  const triRef  = useRef(null);
  const heroRef = useRef(null);

  useEffect(() => {
    let ticking = false;
    const update = () => {
      const tri = triRef.current, hero = heroRef.current;
      if (!tri || !hero) { ticking = false; return; }
      const h = hero.offsetHeight || window.innerHeight;
      const p = Math.min(Math.max(window.scrollY / h, 0), 1);
      tri.style.setProperty('--rn-tri-rot', (p * 180) + 'deg');
      ticking = false;
    };
    const onScroll = () => {
      if (!ticking) { window.requestAnimationFrame(update); ticking = true; }
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    update();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section className="rn-hero" id="top" ref={heroRef}>
      <div className="rn-hero__halftone" aria-hidden="true" />
      <div className="rn-hero__halftone--wash" aria-hidden="true" />
      <div className="rn-hero__grain" aria-hidden="true" />

      <div className="rn-hero__inner">
        <div className="rn-hero__lockup" aria-label="Rogue North">
          <img className="rn-hero__lockup-mark" src="assets/logo-transparent.png" alt="" />
          <span className="rn-hero__lockup-word">rogue&nbsp;north</span>
        </div>

        <div className="rn-hero__content">
          <div className="rn-hero__eyebrow">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <polygon points="12,4 21,20 3,20" />
            </svg>
            <span>Media · Creative · Data</span>
          </div>

          <h1 className="rn-hero__h1">
            think different,<br />
            go n
            <span ref={triRef} className="rn-glyph-tri" aria-label="o">
              <HollowTriangle />
            </span>
            rth.
          </h1>

          <p className="rn-hero__sub">
            Strategy, media, and creative built to scale brands intentionally across categories, not within one.
          </p>

          <div className="rn-hero__ctas">
            <button className="rn-btn rn-btn--primary" onClick={onBook}>
              Book a Call <span className="rn-btn__arrow">→</span>
            </button>
          </div>
        </div>
      </div>

      <LogoMarquee />

      <div className="rn-hero__cred">
        <span>Long Beach, CA</span>
        <span className="rn-hero__cred-dot" />
        <span>est. 2024</span>
        <span className="rn-hero__cred-dot" />
        <span>booking Q3</span>
      </div>

      <a className="rn-hero__scroll" href="#work">
        <span>scroll</span>
        <span className="rn-hero__scroll-line" />
      </a>
    </section>
  );
}
window.Hero = Hero;