/* STATUS: DRAFT hero — one continuous film, scrubbed by scroll.

   Supersedes the per-clip hero (hero-scroll-world.jsx) for the header. That engine
   loaded a separate <video> per section; this one scrubs a SINGLE film and gives each
   segment a time range inside it.

   Film: public/scroll/hero-film.mp4 — a copy of
   media-work/landing/lanef/CAIN-HERO-FILM-web-cut3.mp4 (1280x720, 24fps, 321.38s).
   Copied, never symlinked: CLAUDE.md requires runtime hero media to live inside the
   product tree.

   CUT 2 removed 20.125 -> 44.208 of the old 356.50s film (24.083s). Over that span the
   baked robot sank to a speck far below the camera and then snapped back to camera
   height at the 44.208 scene cut — the drop-and-rise that made the flight read as
   awkward. 20.125 was already a cut, so the join was cut-to-cut, big robot both sides.

   CUT 3 removes 20.125 -> 31.167 of the 332.42s cut-2 film (11.042s): all of the
   open-descent-main_c03 shot, the only one where the robot faces the camera (canon
   break). Both edges were existing scene cuts (frames 483..747 dropped, frame-exact),
   rear-view robot on both sides of the join. Every t0/t1 below shifted down by 11.04.

   STOP TIMECODES ARE MEASURED, NOT GUESSED. Each was the measured stop in the 356.50s
   film minus 24.083 (cut 2) minus 11.042 (cut 3), re-verified frame-for-frame against
   the cut-2 film at sage and tech:
     sage   56.30 -> 64.33    ezra  117.63 -> 122.66
     baker 146.80 -> 151.83   tech  318.38 -> 321.38 (film ends; landing is cut ~2s short)

   Copy is carried over verbatim from hero-scroll-world.jsx, which is the approved
   wording. Only the media bindings changed. */

const F = 'public/scroll/';

/* Scroll budget is per segment in viewport-heights, and deliberately NOT proportional
   to duration. Baker->Tech is 166.55s of a 356.50s film; a linear scroll->time map
   would spend half the page on one leg. Landings get wide budgets so the copy can be
   read; connectors get compressed. */
const FW_CONFIG = {
  film: F + 'hero-film.mp4',
  poster: F + 'hero-film-poster.jpg',
  hint: 'scroll to fly the Hill',

  // Both are VP9 with alpha (alpha_mode=1), so they composite straight onto the film.
  mascot: {
    wave: F + 'mascot-anim-wave.webm',      // 320x444, 1.54s, loops on frame 0
    takeoff: F + 'mascot-takeoff.webm',     // 560x820, 3.38s, one shot on first scroll
    flyMs: 850,
  },

  segments: [
    {
      id: 'hill', label: 'the Hill',
      t0: 0, t1: 56.30, w: 2.6, linger: 0,
      copy: {
        // `num` is gone from every segment: the counter was replaced by the section name
        // riding the active route bar on the right rail (film-world-skin.css).
        eyebrow: 'Cornell AI Network',
        title: 'The Heartbeat of the Cornell AI Community',
        body: 'Join fellow AI professionals, enthusiasts for events, networking and growth opportunities.',
      },
    },
    {
      id: 'sage', label: 'Sage',
      t0: 56.30, t1: 64.33, w: 2.8, linger: 0.85,
      copy: {
        eyebrow: 'What we do',
        title: 'Introducing the “Bridging the AI Gap” Program',
        body: "Connecting AI native students with work experience in the Cornell AI community. If you're a student and you want to get real-life experience submit an application below.",
        // The three "Collaborations / diverse communities / Initiatives" proof lines and the
        // newsletter button belonged to the old What-we-do copy. They contradict a headline
        // about the student program, and at this headline length the block ran off-screen.
        cta: { primary: { label: 'Submit an application', href: '#' } },
      },
    },
    { id: 'c-sage-ezra', t0: 64.33, t1: 117.63, w: 2.2, linger: 0 },
    {
      id: 'ezra', label: 'Ezra',
      t0: 117.63, t1: 122.66, w: 2.8, linger: 0.85,
      copy: {
        // Aimed at labs, education departments, and professors — the student pitch
        // lives on the sage stop and the bridge pages.
        eyebrow: 'Introducing — a Cornell AI Network program',
        title: 'Bridging the AI gap',
        body: 'Need a hand keeping up with all the AI stuff? Learn more about our “Bridging the AI Gap” program below.',
        cta: { primary: { label: 'Click here', href: '#bridge' } },
      },
    },
    { id: 'c-ezra-baker', t0: 122.66, t1: 146.80, w: 1.8, linger: 0 },
    {
      id: 'baker', label: 'Baker',
      t0: 146.80, t1: 151.83, w: 2.8, linger: 0.85,
      copy: {
        eyebrow: "But that's not all",
        title: 'Introductions that actually matter',
        body: "CAIN connects Cornell's AI community through events, introductions, and knowledge worth your time.",
      },
    },
    // 166.55s — the longest leg by far, held to 3.4vh on purpose.
    { id: 'c-baker-tech', t0: 151.83, t1: 318.38, w: 3.4, linger: 0 },
    {
      id: 'tech', label: 'Cornell Tech',
      t0: 318.38, t1: 321.38, w: 3.0, linger: 0.85,
      copy: {
        eyebrow: 'From the Hill to the city',
        title: 'Come for the AI, stay for the network.',
        body: 'The professional community where Cornell alumni and students connect around AI — to learn, build, hire, invest, and grow.',
        cta: { primary:   { label: 'info@cornellainetwork.com', href: 'mailto:info@cornellainetwork.com' },
               secondary: { label: 'LinkedIn', href: 'https://www.linkedin.com/company/cornellainetwork' } },
      },
    },
  ],
};

function HeroFilm() {
  const ref = React.useRef(null);

  React.useEffect(() => {
    const host = ref.current;
    if (!host || typeof window.mountFilmScrollWorld !== 'function') return;

    // cain-site scrolls an inner 100vh div, not the window.
    let scroller = null;
    for (let n = host.parentElement; n; n = n.parentElement) {
      if (getComputedStyle(n).overflowY === 'auto') { scroller = n; break; }
    }

    host.__fwScroller = scroller;
    window.mountFilmScrollWorld(host, Object.assign({ scroller }, FW_CONFIG));

    // Engine CTAs are plain <a>; site routing is React state. '#bridge' anchors
    // route through the app instead of appending a dead hash.
    const onClick = (e) => {
      const a = e.target.closest('a[href="#bridge"]');
      if (a && typeof window.CAIN_navigate === 'function') {
        e.preventDefault();
        window.CAIN_navigate('bridge');
      }
    };
    host.addEventListener('click', onClick);

    const io = new IntersectionObserver(
      ([e]) => host.classList.toggle('is-offscreen', !e.isIntersecting),
      { root: scroller || null }
    );
    io.observe(host);
    return () => { io.disconnect(); host.removeEventListener('click', onClick); };
  }, []);

  return <div ref={ref} />;
}

window.CAIN_HeroFilm = HeroFilm;