/* FORUM website — Parallax architectural hero.
   A Roman-forum colonnade receding in depth: layered columns parallax on
   scroll + pointer (the Stepout reference, rebuilt in the brand). Pure
   geometry — no generated imagery. Exports window.ForumHero. */

function makeColumns(count) {
  return Array.from({ length: count });
}

function ColonnadeLayer({ depth, count, height, color, opacity, blur, bottom, parallax }) {
  // depth 0 = farthest, larger = nearer
  const cols = makeColumns(count);
  return (
    <div
      className="fh-layer"
      data-speed={parallax}
      style={{
        position: 'absolute',
        left: '-6%',
        right: '-6%',
        bottom,
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'flex-end',
        filter: blur ? `blur(${blur}px)` : 'none',
        opacity,
        pointerEvents: 'none',
        willChange: 'transform',
      }}
    >
      {cols.map((_, i) => (
        <div
          key={i}
          style={{
            width: `calc(${100 / count}% - 18px)`,
            height,
            background: `linear-gradient(90deg, ${color.dark} 0%, ${color.light} 28%, ${color.light} 60%, ${color.dark} 100%)`,
            borderTopLeftRadius: 6,
            borderTopRightRadius: 6,
            boxShadow: `inset 0 0 0 1px ${color.edge}`,
            position: 'relative',
          }}
        >
          {/* capital */}
          <div style={{
            position: 'absolute', top: -10, left: -6, right: -6, height: 12,
            background: color.light, borderRadius: 3, boxShadow: `inset 0 0 0 1px ${color.edge}`,
          }} />
        </div>
      ))}
    </div>
  );
}

function ForumHero({ logoSrc, onPrimary, onSecondary }) {
  const stageRef = React.useRef(null);
  const pointer = React.useRef({ x: 0, y: 0 });
  const scroll = React.useRef(0);

  React.useEffect(() => {
    let raf = 0;
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    const apply = () => {
      const layers = stageRef.current ? stageRef.current.querySelectorAll('[data-speed]') : [];
      layers.forEach((el) => {
        const sp = parseFloat(el.getAttribute('data-speed'));
        const ty = reduce ? 0 : scroll.current * sp;
        const tx = reduce ? 0 : pointer.current.x * sp * 26;
        el.style.transform = `translate(${tx}px, ${ty}px)`;
      });
      raf = 0;
    };
    const queue = () => { if (!raf) raf = requestAnimationFrame(apply); };
    const onScroll = () => {
      const r = stageRef.current ? stageRef.current.getBoundingClientRect() : null;
      scroll.current = r ? Math.max(0, -r.top) : window.scrollY;
      queue();
    };
    const onMove = (e) => {
      const w = window.innerWidth, h = window.innerHeight;
      pointer.current = { x: (e.clientX / w - 0.5) * 2, y: (e.clientY / h - 0.5) * 2 };
      queue();
    };
    // initial
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('pointermove', onMove, { passive: true });
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('pointermove', onMove);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <section ref={stageRef} className="fh" style={{
      position: 'relative',
      minHeight: '92vh',
      overflow: 'hidden',
      background: '#081B43',
      isolation: 'isolate',
    }}>
      {/* Background video */}
      <video
        autoPlay muted loop playsInline
        aria-hidden="true"
        style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          objectFit: 'cover', zIndex: 0, pointerEvents: 'none',
        }}
      >
        <source src="media/Hero 4.mp4" type="video/mp4" />
      </video>
      {/* Brand-blue tint over the video */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none',
        background: 'linear-gradient(160deg, rgba(20,58,142,0.56) 0%, rgba(15,46,116,0.68) 44%, rgba(10,32,84,0.83) 78%, rgba(6,20,58,0.94) 100%)',
      }} />
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none', mixBlendMode: 'color',
        background: 'linear-gradient(180deg, #1E55C8 0%, #0E2A5E 100%)', opacity: 0.5,
      }} />
      {/* Shimmer accent video at the bottom — adds color, blended in, never covers content */}
      <video
        autoPlay muted loop playsInline
        aria-hidden="true"
        style={{
          position: 'absolute', left: 0, right: 0, bottom: 0, height: '46%', width: '100%',
          objectFit: 'cover', zIndex: 2, pointerEvents: 'none', mixBlendMode: 'screen', opacity: 0.6,
          WebkitMaskImage: 'linear-gradient(to top, transparent 0%, black 26%, black 74%, transparent 100%)',
          maskImage: 'linear-gradient(to top, transparent 0%, black 26%, black 74%, transparent 100%)',
        }}
      >
        <source src="media/Shimmer.mp4" type="video/mp4" />
      </video>
      {/* glow behind wordmark */}
      <div data-speed="0.04" style={{
        position: 'absolute', top: '14%', left: '50%', width: 720, height: 720,
        transform: 'translateX(-50%)',
        background: 'radial-gradient(circle, rgba(125,186,246,0.45) 0%, rgba(125,186,246,0) 62%)',
        pointerEvents: 'none', willChange: 'transform',
      }} />

      {/* faint structural grid lines */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'linear-gradient(rgba(196,223,251,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(196,223,251,0.06) 1px, transparent 1px)',
        backgroundSize: '88px 88px', maskImage: 'linear-gradient(to bottom, transparent, black 30%, black 70%, transparent)',
        pointerEvents: 'none',
      }} />

      {/* Colonnade — far to near */}
      {/* Colonnade columns removed — video carries the hero */}

      {/* plaza floor */}
      <div data-speed="-0.26" aria-hidden="true" style={{
        position: 'absolute', left: '-20%', right: '-20%', bottom: 0, height: '24vh',
        background: 'linear-gradient(to bottom, rgba(8,27,67,0) 0%, #06163C 55%, #050F2E 100%)',
        pointerEvents: 'none', willChange: 'transform',
      }} />

      {/* bottom fade into page */}
      <div aria-hidden="true" style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, height: '14vh',
        background: 'linear-gradient(to bottom, rgba(5,15,46,0) 0%, var(--forum-paper) 100%)',
      }} />

      {/* Foreground content */}
      <div className="fh-content" data-speed="0.05" style={{
        position: 'relative', zIndex: 5, maxWidth: 'var(--container-max)', margin: '0 auto',
        padding: '28vh 32px 0', textAlign: 'center', willChange: 'transform',
      }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 26,
          padding: '7px 16px', borderRadius: 'var(--radius-pill)',
          background: 'rgba(125,186,246,0.12)', border: '1px solid rgba(125,186,246,0.24)',
          backdropFilter: 'blur(6px)',
          fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 700,
          letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase', color: 'var(--forum-sky-100)',
        }}>
          Events&nbsp;·&nbsp;Advisory&nbsp;·&nbsp;Platform
        </div>

        <h1 style={{
          margin: '0 auto', maxWidth: 760,
          fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(28px, 4vw, 52px)',
          lineHeight: 1.08, letterSpacing: '-0.02em', color: 'var(--forum-white)',
        }}>
          All you need to grow your business, in one place.
          <span style={{ display: 'block', marginTop: 20, fontFamily: 'var(--font-slogan)', fontWeight: 500, letterSpacing: '-0.01em' }}>
            <span style={{ color: '#d3d5d6' }}>Connect. Scale. </span>
            <em style={{ fontStyle: 'italic', color: '#c79f4a' }}>Win.</em>
          </span>
        </h1>

        <p style={{
          margin: '20px auto 0', maxWidth: 560,
          fontFamily: 'var(--font-sans)', fontSize: 'var(--text-body-lg)', lineHeight: 1.6,
          color: 'var(--forum-sky-100)',
        }}>
          Known as the #1 name in GovCon events, Forum puts the right events, the
          advisors who help you scale, and the platform that brings vital company
          insights into focus, all in one ecosystem.</p>

        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 30, flexWrap: 'wrap' }}>
          <Button variant="primary" size="lg" onClick={onPrimary}>Work with us</Button>
          <Button variant="dark" size="lg" onClick={onSecondary}
            style={{ background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.28)' }}>
            See upcoming events
          </Button>
        </div>
      </div>
    </section>
  );
}

window.ForumHero = ForumHero;
