// Survival — main page sections
// Hero, Logline, Historical Context, Expedition, Team, Production, Opportunity, Footer

// Render a title with the second 'n' italicized if it exists in the word.
// Falls back to plain text when the title doesn't contain the letter.
function RenderTitle({ title }) {
  if (!title) return null;
  const lower = title.toLowerCase();
  const firstN = lower.indexOf('n');
  const secondN = firstN >= 0 ? lower.indexOf('n', firstN + 1) : -1;
  if (secondN < 0) {
    return React.createElement(React.Fragment, null, title);
  }
  return React.createElement(
    React.Fragment, null,
    title.slice(0, secondN),
    React.createElement('span', { style: { fontStyle: 'italic', fontWeight: 300 } }, title[secondN]),
    title.slice(secondN + 1)
  );
}

// -- Hero --
function Hero({ heroVariant, t }) {
  const titleStyle = {
    fontFamily: 'var(--display)',
    fontWeight: 300,
    fontSize: 'clamp(80px, 14vw, 220px)',
    lineHeight: 0.88,
    letterSpacing: '-0.025em',
    color: 'var(--paper)',
    textWrap: 'balance',
  };

  if (heroVariant === 'split') {
    return (
      <section style={{ minHeight: '100vh', position: 'relative', paddingTop: 120 }}>
        <Container>
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: 60,
            alignItems: 'end',
            minHeight: 'calc(100vh - 120px)',
            paddingBottom: 80,
          }}>
            <div>
              <div className="label hero-label" style={{ marginBottom: 40 }}>
                {`— A Documentary Film / ${t.filmYear}`}
              </div>
              <h1 className="hero-title" style={{
                ...titleStyle,
                fontSize: 'clamp(72px, 9vw, 148px)',
              }}>
                <RenderTitle title={t.filmTitle} />
              </h1>
              <p className="hero-sub" style={{
                marginTop: 40,
                fontFamily: 'var(--display)',
                fontStyle: 'italic',
                fontWeight: 300,
                fontSize: 'clamp(22px, 2vw, 30px)',
                lineHeight: 1.3,
                color: 'var(--paper)',
                maxWidth: '24ch',
                opacity: 0.88,
              }}>
                {t.heroSplitSub}
              </p>
            </div>
            <Still
              aspect="4 / 5"
              caption="01 . TRAINING, MAINE"
              credit="CALEB GINGRAS"
              src="images/musher-dog.jpg"
              position="50% 40%"
              style={{ animation: 'heroStill 2000ms cubic-bezier(.2,.7,.2,1) both' }}
            />
          </div>
        </Container>
        <HeroMeta t={t} />
      </section>
    );
  }

  // Full-bleed hero (default)
  return (
    <section style={{
      minHeight: '100vh',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0, zIndex: 0,
      }}>
        <Still
          aspect="auto"
          src="images/aurora-cabin.jpg"
          alt="Aurora borealis over a cabin on the trail, team resting"
          position="50% 55%"
          style={{ width: '100%', height: '100%', position: 'absolute', inset: 0 }}
        />
        <div style={{
          position: 'absolute', inset: 0, zIndex: 2,
          background: 'linear-gradient(180deg, rgba(11,15,20,0.55) 0%, rgba(11,15,20,0.25) 35%, rgba(11,15,20,0.88) 100%)',
        }} />
      </div>

      <Container style={{ position: 'relative', zIndex: 2, paddingTop: 140 }}>
        <div style={{
          display: 'grid',
          gap: 24,
          minHeight: 'calc(100vh - 140px)',
          paddingBottom: 80,
          alignContent: 'space-between',
        }}>
          <div className="label hero-label">
            {t.heroKicker}
          </div>

          <div>
            <h1 className="hero-title" style={titleStyle}>
              <RenderTitle title={t.filmTitle} />
            </h1>
            <div className="hero-sub" style={{
              marginTop: 40,
              display: 'grid',
              gridTemplateColumns: 'auto 1fr',
              gap: 40,
              alignItems: 'baseline',
              maxWidth: 900,
            }}>
              <div className="label" style={{ whiteSpace: 'nowrap' }}>
                —
              </div>
              <p style={{
                fontFamily: 'var(--display)',
                fontStyle: 'italic',
                fontWeight: 300,
                fontSize: 'clamp(22px, 2.2vw, 32px)',
                lineHeight: 1.3,
                color: 'var(--paper)',
                textWrap: 'pretty',
              }}>
                {t.heroTagline}
              </p>
            </div>
          </div>

          <HeroMeta t={t} />
        </div>
      </Container>
    </section>
  );
}

function HeroMeta({ t }) {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: 'repeat(4, 1fr)',
      gap: 0,
      borderTop: '1px solid var(--rule)',
      paddingTop: 28,
      marginTop: 40,
    }}>
      {[
        ['Length', t.filmRuntime],
        ['Stage', t.filmStage],
        ['Territory filmed', t.filmTerritory],
        ['Original route', t.filmRoute],
      ].map(([k, v]) => (
        <div key={k}>
          <div className="label" style={{ marginBottom: 8 }}>{k}</div>
          <div style={{ fontFamily: 'var(--display)', fontSize: 22, fontWeight: 400 }}>{v}</div>
        </div>
      ))}
    </div>
  );
}

// -- Marquee bar --
function Marquee({ itemsText }) {
  const parts = (itemsText || '').split('|').map(s => s.trim()).filter(Boolean);
  const items = [];
  parts.forEach(p => { items.push(p); items.push('.'); });
  return (
    <div style={{
      borderTop: '1px solid var(--rule)',
      borderBottom: '1px solid var(--rule)',
      padding: '18px 0',
      overflow: 'hidden',
      whiteSpace: 'nowrap',
      marginTop: -1,
    }}>
      <style>{`
        @keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
      `}</style>
      <div style={{
        display: 'inline-flex',
        gap: 32,
        animation: 'marquee 60s linear infinite',
        fontFamily: 'var(--mono)',
        fontSize: 12,
        letterSpacing: '0.24em',
        color: 'var(--mute)',
      }}>
        {[...items, ...items, ...items, ...items].map((it, i) => (
          <span key={i} style={{ color: it === '.' ? 'var(--ember)' : undefined }}>{it}</span>
        ))}
      </div>
    </div>
  );
}

// -- Vision / Theme pullquote panel --
function VisionSection() {
  const themes = [
    {
      kicker: 'Respect',
      body: "For the original mushers. For the dogs who carried life across a frozen world. For the enduring bond between people, animals, and land that shaped Alaska's identity.",
    },
    {
      kicker: 'Contrast',
      body: "Man and machine. Tradition and innovation. Nature's fury and nature's peace. A century ago, as today \u2014 where machines faltered, the dogs endured.",
    },
    {
      kicker: 'Partnership',
      body: 'A profound connection between humans, animals, and land — one we are beginning to overlook. The film is an invitation to feel it again before it disappears entirely.',
    },
  ];
  return (
    <section style={{ padding: '120px 0', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
      <Container>
        <Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
            {themes.map((th, i) => (
              <div key={th.kicker} style={{ padding: '0 48px', borderLeft: i === 0 ? 'none' : '1px solid var(--rule)' }}>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--ember)', marginBottom: 20 }}>{`— ${th.kicker}`}</div>
                <p style={{ fontFamily: 'var(--display)', fontWeight: 300, fontStyle: 'italic', fontSize: 22, lineHeight: 1.5, color: 'var(--paper)', textWrap: 'pretty' }}>{th.body}</p>
              </div>
            ))}
          </div>
        </Reveal>
        <Reveal>
          <div style={{
            marginTop: 80, position: 'relative', overflow: 'hidden',
            minHeight: 420, display: 'flex', alignItems: 'flex-end',
          }}>
            <img src="images/ice-crossing.jpg" alt="Caleb Gingras on the Norton Bay sea ice"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', zIndex: 0 }} />
            <div style={{ position: 'absolute', inset: 0, zIndex: 1,
              background: 'linear-gradient(90deg, rgba(11,15,20,0.08) 0%, rgba(11,15,20,0.5) 40%, rgba(11,15,20,0.94) 100%)' }} />
            <div style={{ position: 'absolute', inset: 0, zIndex: 1,
              background: 'linear-gradient(180deg, rgba(11,15,20,0) 50%, rgba(11,15,20,0.45) 100%)' }} />
            <div style={{ position: 'relative', zIndex: 2, width: '100%',
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60,
              padding: '80px 60px', alignItems: 'end' }}>
              <div>
                <div className="label" style={{ color: 'rgba(244,239,230,0.55)' }}>
                  Caleb Gingras<br />Norton Bay Sea Ice . January 2025
                </div>
              </div>
              <div>
                <div style={{ width: 32, height: 1, background: 'var(--ember)', marginBottom: 28 }} />
                <blockquote style={{
                  fontFamily: 'var(--display)', fontWeight: 300, fontStyle: 'italic',
                  fontSize: 'clamp(24px, 2.8vw, 40px)', lineHeight: 1.25,
                  letterSpacing: '-0.01em', color: 'var(--paper)',
                  margin: '0 0 32px', textWrap: 'pretty',
                }}>
                  "Let the audience feel the life and rhythm of a musher. The blizzards. The exhaustion. The breath. The silence. The awe."
                </blockquote>
                <div>
                  <div style={{ fontFamily: 'var(--display)', fontSize: 19, fontWeight: 400, marginBottom: 4 }}>Caleb Gingras</div>
                  <div className="label" style={{ color: 'var(--ember)' }}>Director . Survival</div>
                </div>
              </div>
            </div>
          </div>
        </Reveal>
      </Container>
    </section>
  );
}

// -- Trailer --
function TrailerSection({ t }) {
  const [playing, setPlaying] = React.useState(false);
  const videoId = t.trailerYouTubeId || 'YcdO5fczcHU';
  const thumb = `https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg`;

  return (
    <section id="trailer" style={{ padding: '140px 0 160px', background: 'var(--ink)' }}>
      <Container>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr auto 1fr',
          gap: 40,
          alignItems: 'baseline',
          marginBottom: 48,
        }}>
          <div className="label">— Trailer / Teaser</div>
          <div style={{
            fontFamily: 'var(--display)',
            fontStyle: 'italic',
            fontSize: 'clamp(20px, 1.8vw, 28px)',
            fontWeight: 300,
            color: 'var(--paper)',
            textAlign: 'center',
            maxWidth: '34ch',
          }}>
            {t.trailerTagline}
          </div>
          <div className="label" style={{ textAlign: 'right' }}>{t.filmYear} . {t.trailerRuntime}</div>
        </div>

        <Reveal>
          <div style={{
            position: 'relative',
            aspectRatio: '16 / 9',
            background: 'var(--ink-2)',
            border: '1px solid var(--rule)',
            overflow: 'hidden',
            boxShadow: '0 40px 120px rgba(0,0,0,0.5)',
          }}>
            {!playing ? (
              <button
                onClick={() => setPlaying(true)}
                aria-label="Play trailer"
                style={{
                  position: 'absolute', inset: 0,
                  appearance: 'none', border: 'none', padding: 0,
                  background: `url(${thumb}) center/cover no-repeat, var(--ink-2)`,
                  cursor: 'pointer',
                  color: 'var(--paper)',
                }}>
                <div style={{
                  position: 'absolute', inset: 0,
                  background: 'linear-gradient(180deg, rgba(11,15,20,0.15) 0%, rgba(11,15,20,0.55) 100%)',
                }} />
                <div style={{
                  position: 'absolute',
                  top: '50%', left: '50%',
                  transform: 'translate(-50%, -50%)',
                  display: 'flex',
                  flexDirection: 'column',
                  alignItems: 'center',
                  gap: 20,
                  zIndex: 2,
                }}>
                  <div style={{
                    width: 88, height: 88,
                    border: '1.5px solid var(--paper)',
                    borderRadius: '50%',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    background: 'rgba(11,15,20,0.35)',
                    backdropFilter: 'blur(4px)',
                    WebkitBackdropFilter: 'blur(4px)',
                    transition: 'background 300ms, border-color 300ms, transform 300ms',
                  }}
                  className="play-btn">
                    <svg width="22" height="26" viewBox="0 0 22 26" fill="none" aria-hidden>
                      <path d="M1 1 L21 13 L1 25 Z" fill="var(--paper)" />
                    </svg>
                  </div>
                  <div style={{
                    fontFamily: 'var(--mono)',
                    fontSize: 11,
                    letterSpacing: '0.24em',
                    textTransform: 'uppercase',
                    color: 'var(--paper)',
                  }}>Play trailer</div>
                </div>
                <div style={{
                  position: 'absolute',
                  bottom: 20, left: 24, right: 24,
                  display: 'flex', justifyContent: 'space-between',
                  fontFamily: 'var(--mono)', fontSize: 10,
                  letterSpacing: '0.18em', textTransform: 'uppercase',
                  color: 'rgba(244,239,230,0.75)', zIndex: 2,
                }}>
                  <span>SURVIVAL . OFFICIAL TRAILER</span>
                  <span>HD . 16:9</span>
                </div>
              </button>
            ) : (
              <iframe
                src={`https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&rel=0&modestbranding=1&playsinline=1`}
                title="Survival — Official Trailer"
                frameBorder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowFullScreen
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 'none' }}
              />
            )}
          </div>
        </Reveal>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 40,
          marginTop: 40,
          paddingTop: 28,
          borderTop: '1px solid var(--rule)',
        }}>
          {[
            ['Directed by', 'Caleb Gingras'],
            ['Shot on', 'Sony . arctic rigs'],
            ['Runtime', t.trailerRuntime],
            ['Premiere', 'Q1 2027 (target)'],
          ].map(([k, v]) => (
            <div key={k}>
              <div className="label" style={{ marginBottom: 8 }}>{k}</div>
              <div style={{ fontFamily: 'var(--display)', fontSize: 19, fontWeight: 400 }}>{v}</div>
            </div>
          ))}
        </div>

        <style>{`
          .play-btn:hover { background: var(--ember) !important; border-color: var(--ember) !important; transform: scale(1.04); }
          .play-btn:hover svg path { fill: var(--ink); }
        `}</style>
      </Container>
    </section>
  );
}

// -- Expedition slideshow --
function ExpeditionSlideshow() {
  const slides = [
    { src: 'images/aerial-ice.jpg',       caption: '01 . NORTON BAY . SEA ICE . AERIAL',       credit: 'GINGRAS 2025' },
    { src: 'images/yukon-river.jpg',      caption: '02 . YUKON RIVER . AERIAL',               credit: 'GINGRAS 2025' },
    { src: 'images/aerial-interior.jpg',  caption: '03 . ALASKA INTERIOR . AERIAL',            credit: 'GINGRAS 2025' },
    { src: 'images/aurora-dogs-camp.jpg', caption: '04 . AURORA BOREALIS . REST CAMP',         credit: 'GINGRAS 2025' },
    { src: 'images/team-sunset.jpg',      caption: '05 . THE TEAM . LOW ARCTIC SUN',           credit: 'GINGRAS 2025' },
    { src: 'images/ice-crossing.jpg',     caption: '06 . NORTON BAY . SEA ICE',                credit: 'GINGRAS 2025' },
    { src: 'images/dog-snow.jpg',         caption: '07 . SEPPALA SIBERIAN . ON THE TRAIL',     credit: 'GINGRAS 2025' },
    { src: 'images/child-dog.jpg',        caption: '08 . VILLAGE . THE NEXT GENERATION',       credit: 'GINGRAS 2025' },
    { src: 'images/elder.jpg',            caption: '09 . VILLAGE ELDER . RELAY ROUTE',         credit: 'GINGRAS 2025' },
    { src: 'images/school-visit.jpg',     caption: '10 . JONATHAN HAYES . VILLAGE SCHOOL',     credit: 'GINGRAS 2025' },
    { src: 'images/village-arrival.jpg',  caption: '11 . VILLAGE ARRIVAL . RELAY ROUTE',       credit: 'GINGRAS 2025' },
    { src: 'images/girl-dog.jpg',         caption: '12 . VILLAGE . THE NEXT GENERATION',       credit: 'GINGRAS 2025' },
  ];

  const [current, setCurrent] = React.useState(0);
  const [prev, setPrev] = React.useState(null);
  const [dir, setDir] = React.useState(1); // 1 = forward, -1 = back
  const timerRef = React.useRef(null);

  const goTo = React.useCallback((idx, direction) => {
    setPrev(current);
    setDir(direction);
    setCurrent(idx);
  }, [current]);

  const next = React.useCallback(() => {
    goTo((current + 1) % slides.length, 1);
  }, [current, goTo, slides.length]);

  const back = React.useCallback(() => {
    goTo((current - 1 + slides.length) % slides.length, -1);
  }, [current, goTo, slides.length]);

  // Auto-advance every 5s
  React.useEffect(() => {
    timerRef.current = setInterval(next, 5000);
    return () => clearInterval(timerRef.current);
  }, [next]);

  const reset = () => {
    clearInterval(timerRef.current);
    timerRef.current = setInterval(next, 5000);
  };

  return (
    <div style={{ position: 'relative', aspectRatio: '21 / 9', overflow: 'hidden', background: 'var(--ink-2)' }}>
      <style>{`
        @keyframes slideInRight  { from { transform: translateX(6%);  opacity: 0 } to { transform: none; opacity: 1 } }
        @keyframes slideInLeft   { from { transform: translateX(-6%); opacity: 0 } to { transform: none; opacity: 1 } }
        .slide-in-right { animation: slideInRight 700ms cubic-bezier(.2,.7,.2,1) both; }
        .slide-in-left  { animation: slideInLeft  700ms cubic-bezier(.2,.7,.2,1) both; }
      `}</style>

      {/* Slides */}
      {slides.map((s, i) => (
        <div key={i} style={{
          position: 'absolute', inset: 0,
          opacity: i === current ? 1 : 0,
          transition: 'opacity 600ms ease',
          pointerEvents: i === current ? 'auto' : 'none',
        }}>
          {s.src ? (
            <img src={s.src} alt={s.caption} loading="lazy"
              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          ) : (
            <div style={{
              width: '100%', height: '100%',
              background: 'var(--ink-2)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--mono)', fontSize: 12,
              letterSpacing: '0.18em', textTransform: 'uppercase',
              color: 'var(--mute)',
            }}>
              {s.caption}
            </div>
          )}
          {/* Gradient for caption legibility */}
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(180deg, rgba(11,15,20,0) 50%, rgba(11,15,20,0.7) 100%)',
            pointerEvents: 'none',
          }} />
        </div>
      ))}

      {/* Caption */}
      <div style={{
        position: 'absolute', bottom: 16, left: 20, right: 20,
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em',
        textTransform: 'uppercase', color: 'rgba(244,239,230,0.72)',
        zIndex: 4, pointerEvents: 'none',
      }}>
        <span>{slides[current].caption}</span>
        <span style={{ color: 'var(--mute)' }}>{slides[current].credit}</span>
      </div>

      {/* Prev / Next */}
      {[['\u2190', back, 'left'], ['->', next, 'right']].map(([label, fn, side]) => (
        <button key={side} onClick={() => { fn(); reset(); }}
          style={{
            position: 'absolute', top: '50%', [side]: 20,
            transform: 'translateY(-50%)',
            appearance: 'none', border: '1px solid rgba(244,239,230,0.3)',
            background: 'rgba(11,15,20,0.45)',
            backdropFilter: 'blur(8px)',
            color: 'var(--paper)', fontFamily: 'var(--mono)',
            fontSize: 16, width: 44, height: 44,
            cursor: 'pointer', zIndex: 4,
            transition: 'background 200ms, border-color 200ms',
          }}
          onMouseEnter={e => { e.currentTarget.style.background = 'var(--ember)'; e.currentTarget.style.borderColor = 'var(--ember)'; e.currentTarget.style.color = 'var(--ink)'; }}
          onMouseLeave={e => { e.currentTarget.style.background = 'rgba(11,15,20,0.45)'; e.currentTarget.style.borderColor = 'rgba(244,239,230,0.3)'; e.currentTarget.style.color = 'var(--paper)'; }}
        >{label}</button>
      ))}

      {/* Dot indicators */}
      <div style={{
        position: 'absolute', bottom: 44, left: '50%',
        transform: 'translateX(-50%)',
        display: 'flex', gap: 8, zIndex: 4,
      }}>
        {slides.map((_, i) => (
          <button key={i} onClick={() => { goTo(i, i > current ? 1 : -1); reset(); }}
            style={{
              appearance: 'none', border: 'none', padding: 0,
              width: i === current ? 20 : 6, height: 6,
              background: i === current ? 'var(--ember)' : 'rgba(244,239,230,0.35)',
              cursor: 'pointer', transition: 'width 300ms, background 300ms',
            }}
          />
        ))}
      </div>
    </div>
  );
}
function FilmSection({ t }) {
  return (
    <section id="film" style={{ padding: '160px 0' }}>
      <Container>
        <SectionHeader
          number="01"
          label="The Film"
          kicker={t.filmKicker}
          title={t.filmHeading}
        />

        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 80,
          alignItems: 'start',
        }}>
          <Reveal>
            <div style={{ fontFamily: 'var(--display)', fontSize: 22, lineHeight: 1.5, fontWeight: 300, color: 'var(--paper)' }}>
              <p style={{ marginBottom: 24 }}>
                In January of 1925, a diphtheria outbreak was killing children in Nome, Alaska.
                The port was frozen. The planes couldn't fly. The only road in or out was
                buried under the blizzard of the century.
              </p>
              <p style={{ marginBottom: 24 }}>
                Twenty mushers and 150 dogs relayed antitoxin nearly 750 miles through
                the arctic interior — by the only means that could survive it: <em>dog team</em>.
              </p>
              <p>
                No team did more than the Siberian dogs of Norwegian immigrant{' '}
                <span className="ember">Leonhard Seppala</span>. With his famed leader,{' '}
                <span className="ember">Togo</span>, Seppala ran 261 miles and crossed
                the treacherous Norton Bay sea ice — twice — in wind that split skin.
                The serum arrived. The children lived.
              </p>
            </div>
          </Reveal>

          <Reveal delay={150}>
            <div style={{ fontSize: 15, lineHeight: 1.75, color: 'var(--mute)' }}>
              <p style={{ marginBottom: 20 }}>
                January 2025 marked one hundred years since that run. To commemorate it,
                US Marine, explorer, and high&#8209;school teacher{' '}
                <span style={{ color: 'var(--paper)' }}>Jonathan Nathaniel Hayes</span> led
                a dogsled expedition retracing the full 750&#8209;mile route — during the
                darkest and coldest weeks of the year.
              </p>
              <p style={{ marginBottom: 20 }}>
                His team ran exclusively{' '}
                <span style={{ color: 'var(--paper)' }}>Seppala Siberian Sleddogs</span> —
                registered descendants of Leonhard Seppala's original line, fewer than 100
                remaining worldwide. Along the way, they stopped at the original relay
                villages, met the families who carry the memory, and sat with elders
                who still know the names of the dogs.
              </p>
              <p style={{ marginBottom: 20 }}>
                The film moves through three geographic pillars — the{' '}
                <span style={{ color: 'var(--paper)' }}>Tanana River</span>,
                the <span style={{ color: 'var(--paper)' }}>Yukon</span>, and
                the <span style={{ color: 'var(--paper)' }}>Coast</span> — each
                holding two to four scenes, each scene earning its place.
              </p>
              <p>
                Filmmaker <span style={{ color: 'var(--paper)' }}>Caleb Gingras</span> shot
                every frame from inside the expedition. No second unit. No reconstruction.
                What you see is what happened.
              </p>
            </div>
          </Reveal>
        </div>

        <div style={{ marginTop: 120 }}>
          <Reveal>
            <ExpeditionSlideshow />
          </Reveal>
        </div>
      </Container>
    </section>
  );
}

// -- Historical context — 1925 / 2025 parallel --
function ParallelSection({ t }) {
  return (
    <section style={{ padding: '160px 0', background: 'var(--ink-2)' }}>
      <Container>
        <Reveal>
          <div className="label" style={{ marginBottom: 60, textAlign: 'center' }}>
            {t.parallelKicker}
          </div>
        </Reveal>

        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr auto 1fr',
          gap: 60,
          alignItems: 'start',
        }}>
          <Reveal>
            <div>
              <div style={{
                fontFamily: 'var(--display)',
                fontWeight: 300,
                fontStyle: 'italic',
                fontSize: 'clamp(64px, 8vw, 124px)',
                lineHeight: 1,
                letterSpacing: '-0.02em',
                color: 'var(--ember)',
                marginBottom: 32,
              }}>1925</div>
              <div style={{ display: 'grid', gap: 16, color: 'var(--paper)' }}>
                <Stat k="Cause" v="Diphtheria outbreak, Nome" />
                <Stat k="Mushers" v="20 men, 150 dogs" />
                <Stat k="Duration" v="127.5 hours" />
                <Stat k="Seppala's leg" v="261 miles . two sea-ice crossings" />
                <Stat k="Lead dog" v="Togo" />
                <Stat k="Outcome" v="Serum delivered. Outbreak contained." />
              </div>
            </div>
          </Reveal>

          <div className="rule-v" style={{ alignSelf: 'stretch', minHeight: 400 }} />

          <Reveal delay={150}>
            <div>
              <div style={{
                fontFamily: 'var(--display)',
                fontWeight: 300,
                fontStyle: 'italic',
                fontSize: 'clamp(64px, 8vw, 124px)',
                lineHeight: 1,
                letterSpacing: '-0.02em',
                color: 'var(--paper)',
                marginBottom: 32,
              }}>2025</div>
              <div style={{ display: 'grid', gap: 16, color: 'var(--paper)' }}>
                <Stat k="Purpose" v="Centennial commemoration" />
                <Stat k="Team" v="4 men, 1 dog team" />
                <Stat k="Dogs" v="Seppala Siberian Sleddogs, registered" />
                <Stat k="Route" v="Original 750 miles, in full" />
                <Stat k="Conditions" v="Darkest, coldest weeks — arctic interior" />
                <Stat k="Outcome" v="Arrived in Nome. A century closed." />
              </div>
            </div>
          </Reveal>
        </div>

        {/* Archival gallery */}
        <div style={{ marginTop: 100, paddingTop: 60, borderTop: '1px solid var(--rule)' }}>
          <Reveal>
            <div className="label" style={{ marginBottom: 40, textAlign: 'center', color: 'var(--ember)' }}>
              — Archival record . 1925
            </div>
          </Reveal>
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1.1fr 0.9fr 1fr 0.85fr',
            gap: 16,
            alignItems: 'start',
          }}>
            <Reveal delay={0}>
              <div>
                <div style={{ overflow: 'hidden', filter: 'sepia(0.3) contrast(1.05)', border: '1px solid var(--rule)' }}>
                  <img src="images/archival-newsclipping.png" alt="1925 newspaper clipping"
                    style={{ width: '100%', display: 'block', objectFit: 'cover' }} />
                </div>
                <div className="label" style={{ marginTop: 12, color: 'var(--mute)' }}>Anchorage Daily Times . Jan 28, 1925</div>
              </div>
            </Reveal>
            <Reveal delay={80}>
              <div>
                <div style={{ overflow: 'hidden', filter: 'sepia(0.15) contrast(1.08)', border: '1px solid var(--rule)' }}>
                  <img src="images/archival-seppala-team.jpg" alt="Leonhard Seppala with his dog team"
                    style={{ width: '100%', display: 'block', objectFit: 'cover', aspectRatio: '3 / 4' }} />
                </div>
                <div className="label" style={{ marginTop: 12, color: 'var(--mute)' }}>Leonhard Seppala . Nome . c. 1925</div>
              </div>
            </Reveal>
            <Reveal delay={160}>
              <div>
                <div style={{ overflow: 'hidden', filter: 'sepia(0.1) contrast(1.1)', border: '1px solid var(--rule)' }}>
                  <img src="images/archival-togo.jpg" alt="Togo, lead dog of the 1925 Serum Run"
                    style={{ width: '100%', display: 'block', objectFit: 'cover', aspectRatio: '2 / 1' }} />
                </div>
                <div className="label" style={{ marginTop: 12, color: 'var(--mute)' }}>Togo . Lead dog . Serum Run 1925</div>
              </div>
            </Reveal>
            <Reveal delay={240}>
              <div>
                <div style={{ overflow: 'hidden', filter: 'sepia(0.2) contrast(1.05)', border: '1px solid var(--rule)' }}>
                  <img src="images/archival-seppala-togo.jpg" alt="Leonhard Seppala holding Togo"
                    style={{ width: '100%', display: 'block', objectFit: 'cover', aspectRatio: '3 / 4' }} />
                </div>
                <div className="label" style={{ marginTop: 12, color: 'var(--mute)' }}>Seppala &amp; Togo . c. 1925</div>
              </div>
            </Reveal>
          </div>
        </div>

      </Container>
    </section>
  );
}

function Stat({ k, v }) {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: '130px 1fr',
      gap: 20,
      alignItems: 'baseline',
      paddingBottom: 12,
      borderBottom: '1px solid var(--rule)',
    }}>
      <div className="label">{k}</div>
      <div style={{ fontFamily: 'var(--display)', fontSize: 19, fontWeight: 400, lineHeight: 1.3 }}>{v}</div>
    </div>
  );
}

// -- Expedition route — map-like diagram --
function RouteSection({ t }) {
  const waypoints = [
    { mi: 0,   name: 'Nenana',      note: 'Origin . relay start' },
    { mi: 74,  name: 'Tolovana',    note: 'Handoff' },
    { mi: 150, name: 'Manley',      note: '' },
    { mi: 238, name: 'Ruby',        note: 'Yukon River' },
    { mi: 335, name: 'Kaltag',      note: 'Portage begins' },
    { mi: 420, name: 'Unalakleet',  note: 'Coast . school visit' },
    { mi: 512, name: 'Shaktoolik',  note: 'Sea ice — crossing I' },
    { mi: 578, name: 'Golovin',     note: 'Sea ice — crossing II' },
    { mi: 674, name: 'Solomon',     note: '' },
    { mi: 750, name: 'Nome',        note: 'Arrival' },
  ];

  return (
    <section style={{ padding: '160px 0' }}>
      <Container>
        <SectionHeader
          number="02"
          label="The Route"
          kicker={t.routeKicker}
          title={t.routeHeading}
        />

        <Reveal>
          <div style={{
            position: 'relative',
            padding: '80px 20px 40px',
            border: '1px solid var(--rule)',
            background: 'rgba(244,239,230,0.02)',
          }}>
            {/* Route line */}
            <svg viewBox="0 0 1000 160" preserveAspectRatio="none"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' }}>
              <path
                d="M 40 80 Q 180 40 300 90 T 560 70 Q 700 90 820 50 T 960 80"
                fill="none"
                stroke="var(--ember)"
                strokeWidth="1"
                strokeDasharray="3 4"
                opacity="0.8"
              />
            </svg>

            <div style={{
              position: 'relative',
              display: 'grid',
              gridTemplateColumns: `repeat(${waypoints.length}, 1fr)`,
              gap: 4,
              alignItems: 'end',
            }}>
              {waypoints.map((w, i) => (
                <div key={w.name} style={{ textAlign: 'center', position: 'relative' }}>
                  <div className="label" style={{ marginBottom: 8, fontSize: 9 }}>
                    MI {w.mi}
                  </div>
                  <div style={{
                    width: 8, height: 8,
                    background: i === 0 || i === waypoints.length - 1 ? 'var(--ember)' : 'var(--paper)',
                    margin: '0 auto 14px',
                    border: i === 0 || i === waypoints.length - 1 ? 'none' : '1px solid var(--paper)',
                    borderRadius: i === 0 || i === waypoints.length - 1 ? 0 : '50%',
                  }} />
                  <div style={{
                    fontFamily: 'var(--display)',
                    fontSize: 17,
                    fontWeight: 400,
                    marginBottom: 4,
                    color: 'var(--paper)',
                  }}>{w.name}</div>
                  <div style={{
                    fontFamily: 'var(--mono)',
                    fontSize: 9,
                    letterSpacing: '0.1em',
                    color: 'var(--mute)',
                    textTransform: 'uppercase',
                    minHeight: 24,
                  }}>{w.note}</div>
                </div>
              ))}
            </div>
          </div>
        </Reveal>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 40,
          marginTop: 60,
        }}>
          {[
            ['Temperatures encountered', '-60 degF'],
            ['Sea-ice crossings', 'Norton Bay, twice'],
            ['Villages engaged', '10 schools, 6 elders'],
          ].map(([k, v]) => (
            <Reveal key={k}>
              <div style={{ borderTop: '1px solid var(--rule)', paddingTop: 20 }}>
                <div className="label" style={{ marginBottom: 10 }}>{k}</div>
                <div style={{ fontFamily: 'var(--display)', fontSize: 32, fontWeight: 400 }}>{v}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
}

// -- Team --
Object.assign(window, {
  RenderTitle, Hero, HeroMeta, Marquee, VisionSection, TrailerSection,
  ExpeditionSlideshow, FilmSection, ParallelSection, Stat, RouteSection,
});