function TeamSection({ t }) {
  const team = [
    {
      name: 'Jonathan Nathaniel Hayes',
      role: 'Expedition Lead . On-Camera Subject',
      portrait: 'images/portrait-jonathan.png',
      bio: 'US Marine. Explorer. High-school teacher. Longtime keeper of Seppala Siberian Sleddogs and the living link between Leonhard Seppala\'s lineage and the next hundred years.',
    },
    {
      name: 'Caleb Gingras',
      role: 'Director . Cinematographer',
      portrait: 'images/portrait-caleb.jpg',
      bio: 'Principal filmmaker on the trail. Carried the camera for 750 miles at temperatures reaching −60°F. Every frame in the film was shot by him, alongside the team he traveled with.',
    },
    {
      name: 'Jamie Nichols',
      role: 'Expedition Team . Snowmachiner',
      portrait: 'images/portrait-jamie.jpg',
      bio: 'Snowmachiner. Mechanic. A quiet essential presence across every mile of the route — the team\'s first line of support for logistics, safety, and everything the trail could throw at them.',
    },
    {
      name: 'Jeff Kelly',
      role: 'Expedition Team . Snowmachiner',
      portrait: null,
      bio: 'Snowmachiner. Trailbreaker. Veteran of cold-weather expedition work; responsible for scouting the route ahead and keeping the team moving through the most demanding sections of the trail.',
    },
  ];

  return (
    <section id="team" style={{ padding: '160px 0', background: 'var(--ink-2)' }}>
      <Container>
        <SectionHeader
          number="03"
          label="The Team"
          kicker={t.teamKicker}
          title={t.teamHeading}
        />

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(2, 1fr)',
          gap: 60,
        }}>
          {team.map((p, i) => (
            <Reveal key={p.name} delay={i * 80}>
              <div style={{
                display: 'grid',
                gridTemplateColumns: '180px 1fr',
                gap: 28,
              }}>
                <Still aspect="4 / 5"
                  src={p.portrait || undefined}
                  caption={`0${i + 3} . ${p.name.split(' ')[0].toUpperCase()}`}
                  position="50% 20%"
                />
                <div>
                  <div className="label" style={{ color: 'var(--ember)', marginBottom: 10 }}>
                    {p.role}
                  </div>
                  <h3 style={{
                    fontFamily: 'var(--display)',
                    fontWeight: 400,
                    fontSize: 28,
                    lineHeight: 1.15,
                    marginBottom: 14,
                    letterSpacing: '-0.005em',
                  }}>{p.name}</h3>
                  <p style={{ fontSize: 14, lineHeight: 1.7, color: 'var(--mute)' }}>
                    {p.bio}
                  </p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>

        {/* The dogs */}
        <div style={{ marginTop: 100, paddingTop: 60, borderTop: '1px solid var(--rule)' }}>
          <Reveal>
            <div style={{
              display: 'grid',
              gridTemplateColumns: '1.2fr 1fr',
              gap: 60,
              alignItems: 'center',
            }}>
              <Still aspect="3 / 2" src="images/musher-dog.jpg" position="50% 40%"
                caption="07 . LEAD DOG . LINEAGE" credit="SEPPALA SIBERIAN" />
              <div>
                <div className="label" style={{ color: 'var(--ember)', marginBottom: 14 }}>
                  — A note on the dogs
                </div>
                <h3 style={{
                  fontFamily: 'var(--display)',
                  fontWeight: 400,
                  fontSize: 40,
                  lineHeight: 1.1,
                  letterSpacing: '-0.01em',
                  marginBottom: 20,
                }}>
                  {t.dogsHeading}
                </h3>
                <div style={{ fontSize: 15, lineHeight: 1.75, color: 'var(--mute)' }}>
                  <p style={{ marginBottom: 16 }}>
                    Every dog in Jonathan Hayes's team is a registered Seppala Siberian Sleddog —
                    a direct, documented descendant of Leonhard Seppala's original 1925 line.
                    Fewer than 100 remain worldwide. They are a breed shaped entirely by this
                    landscape, this cold, this kind of work.
                  </p>
                  <p style={{ marginBottom: 16 }}>
                    A century ago, machines could not make this run. They froze. They broke.
                    They stopped. The dogs did not. That is not sentiment — it is the historical
                    record. The film holds that fact without editorializing.
                  </p>
                  <p>
                    Their participation in this expedition is not recreation. It is continuity —
                    a living thread between 1925 and now, still running the same ice.
                  </p>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </Container>
    </section>
  );
}

// -- Production status --
function ProductionSection({ t }) {
  const milestones = [
    { phase: 'Development',         status: 'done',    date: '2023 - 2024', note: 'Research, subject access, route planning, village coordination' },
    { phase: 'Production / Trail',  status: 'done',    date: 'Jan - Feb 2025', note: '750 miles filmed in-camera on the original route' },
    { phase: 'Assembly',            status: 'done',    date: 'Spring 2025', note: 'First cut completed. 110 hours -> 94 min rough' },
    { phase: 'Post-production',     status: 'current', date: 'Now',         note: 'Color, sound design, score, final edit — funding underway' },
    { phase: 'Festival premiere',   status: 'future',  date: 'Q1 2027',     note: 'Target: Sundance / True/False' },
    { phase: 'Distribution',        status: 'future',  date: '2027',        note: 'Theatrical + streaming window' },
  ];

  return (
    <section id="production" style={{ padding: '160px 0' }}>
      <Container>
        <SectionHeader
          number="04"
          label="Production"
          kicker={t.productionKicker}
          title={t.productionHeading}
        />

        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 80,
        }}>
          <Reveal>
            <p style={{
              fontFamily: 'var(--display)',
              fontStyle: 'italic',
              fontWeight: 300,
              fontSize: 24,
              lineHeight: 1.5,
              color: 'var(--paper)',
            }}>
              Principal photography is complete. The 750 miles have been captured — in camera,
              on the trail, in temperatures no remount could ever recreate.
            </p>
            <p style={{ marginTop: 24, fontSize: 15, lineHeight: 1.75, color: 'var(--mute)' }}>
              What the film needs now is finishing: color, sound design, an original score,
              archival licensing from the 1925 run, and a final edit. A producing partner
              with taste and reach, to bring the film to its audience.
            </p>
          </Reveal>

          <Reveal delay={150}>
            <div style={{ display: 'grid', gap: 0 }}>
              {milestones.map((m, i) => (
                <div key={m.phase} style={{
                  display: 'grid',
                  gridTemplateColumns: '16px 1fr auto',
                  gap: 20,
                  padding: '18px 0',
                  borderBottom: i === milestones.length - 1 ? 'none' : '1px solid var(--rule)',
                  alignItems: 'baseline',
                }}>
                  <div style={{
                    width: 8, height: 8, marginTop: 8,
                    background: m.status === 'done' ? 'var(--ember)'
                              : m.status === 'current' ? 'var(--paper)'
                              : 'transparent',
                    border: m.status === 'future' ? '1px solid var(--mute)' : 'none',
                    borderRadius: m.status === 'current' ? '50%' : 0,
                  }} />
                  <div>
                    <div style={{
                      fontFamily: 'var(--display)',
                      fontSize: 22,
                      fontWeight: 400,
                      color: m.status === 'future' ? 'var(--mute)' : 'var(--paper)',
                      marginBottom: 4,
                    }}>{m.phase}</div>
                    <div style={{ fontSize: 13, color: 'var(--mute)', lineHeight: 1.5 }}>
                      {m.note}
                    </div>
                  </div>
                  <div className="label" style={{ whiteSpace: 'nowrap' }}>{m.date}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </Container>
    </section>
  );
}

// -- Opportunity / CTA --
function OpportunitySection({ onInquire, t }) {
  return (
    <section id="opportunity" style={{ padding: '180px 0', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, zIndex: 0 }}>
        <Still aspect="auto" src="images/aurora-cabin.jpg" position="50% 30%"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} />
        <div style={{
          position: 'absolute', inset: 0, zIndex: 2,
          background: 'linear-gradient(180deg, var(--ink) 0%, rgba(11,15,20,0.92) 40%, var(--ink) 100%)',
        }} />
      </div>

      <Container style={{ position: 'relative', zIndex: 2 }}>
        <SectionHeader
          number="05"
          label="Opportunity"
          kicker={t.opportunityKicker}
          title={t.opportunityHeading}
        />

        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 80,
          alignItems: 'start',
          marginBottom: 100,
        }}>
          <Reveal>
            <p style={{
              fontFamily: 'var(--display)',
              fontSize: 22,
              lineHeight: 1.55,
              fontWeight: 300,
              color: 'var(--paper)',
              marginBottom: 28,
            }}>
              <em>Survival</em> is seeking executive producers, finishing-fund partners, and
              a distribution team to carry the film from rough cut to premiere.
            </p>
            <p style={{ fontSize: 15, lineHeight: 1.75, color: 'var(--mute)' }}>
              We are open to equity, grant partnership, co-production, and acquisition
              conversations. Footage, rough cut access, deck, and budget available under NDA.
            </p>
          </Reveal>

          <Reveal delay={150}>
            <div style={{ display: 'grid', gap: 0 }}>
              {[
                ['Finishing fund', 'Color, sound, score, archival licensing, legal'],
                ['Executive producer slot', 'Creative + financial partnership through delivery'],
                ['Distribution', 'Festival strategy, sales rep, theatrical + streaming windows'],
                ['Impact partners', 'Indigenous community partnerships, sled-dog preservation, rural Alaska schools'],
              ].map(([k, v]) => (
                <div key={k} style={{
                  padding: '22px 0',
                  borderBottom: '1px solid var(--rule)',
                  borderTop: k === 'Finishing fund' ? '1px solid var(--rule)' : 'none',
                }}>
                  <div style={{
                    fontFamily: 'var(--display)',
                    fontSize: 22,
                    fontWeight: 400,
                    marginBottom: 6,
                    color: 'var(--paper)',
                  }}>{k}</div>
                  <div style={{ fontSize: 14, color: 'var(--mute)', lineHeight: 1.55 }}>{v}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>

        {/* Large CTA */}
        <Reveal>
          <div style={{
            textAlign: 'center',
            padding: '80px 40px',
            border: '1px solid var(--rule)',
            background: 'rgba(244,239,230,0.02)',
          }}>
            <div className="label" style={{ color: 'var(--ember)', marginBottom: 24 }}>
              — Request access
            </div>
            <h3 style={{
              fontFamily: 'var(--display)',
              fontWeight: 300,
              fontStyle: 'italic',
              fontSize: 'clamp(38px, 5vw, 68px)',
              lineHeight: 1.08,
              letterSpacing: '-0.015em',
              marginBottom: 32,
              maxWidth: '16ch',
              margin: '0 auto 32px',
            }}>
              {t.ctaHeading}
            </h3>
            <button
              onClick={onInquire}
              style={{
                appearance: 'none', border: 'none',
                background: 'var(--ember)', color: 'var(--ink)',
                fontFamily: 'var(--mono)', fontSize: 12,
                letterSpacing: '0.22em', textTransform: 'uppercase',
                fontWeight: 600,
                padding: '20px 36px',
                cursor: 'pointer',
                transition: 'transform 200ms, background 200ms',
              }}
              onMouseEnter={e => {
                e.currentTarget.style.background = 'var(--paper)';
              }}
              onMouseLeave={e => {
                e.currentTarget.style.background = 'var(--ember)';
              }}
            >
              {t.ctaButton}
            </button>
            <div style={{ marginTop: 32, fontSize: 13, color: 'var(--mute)' }}>
              Or write directly:
              {' '}<a href={`mailto:${t.contactEmail}`} style={{ color: 'var(--paper)', borderBottom: '1px solid var(--rule)', paddingBottom: 2 }}>{t.contactEmail}</a>
            </div>
          </div>
        </Reveal>
      </Container>
    </section>
  );
}

// -- Footer --
function Footer({ t }) {
  return (
    <footer style={{ padding: '80px 0 40px', borderTop: '1px solid var(--rule)' }}>
      <Container>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr 1fr 1fr',
          gap: 40,
          marginBottom: 60,
        }}>
          <div>
            <Wordmark />
            <p style={{ marginTop: 20, fontSize: 13, color: 'var(--mute)', lineHeight: 1.7, maxWidth: '26ch' }}>
              A documentary film retracing the 1925 Serum Run, one hundred years later.
            </p>
          </div>
          <FooterCol title="Film" items={['Synopsis', 'Director\'s statement', 'Sizzle reel', 'Press stills']} />
          <FooterCol title="For investors" items={['Request the deck', 'Budget summary', 'Distribution plan', 'NDA']} />
          <FooterCol title="Contact" items={[t.contactEmail, 'Nome, Alaska . ' + t.filmYear, 'Press inquiries', 'General inquiries']} />
        </div>

        <div style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'baseline',
          paddingTop: 28,
          borderTop: '1px solid var(--rule)',
          fontFamily: 'var(--mono)',
          fontSize: 10,
          letterSpacing: '0.14em',
          textTransform: 'uppercase',
          color: 'var(--mute)',
        }}>
          <div>\u00A9 {t.filmYear} {t.filmTitle} Film LLC . All rights reserved</div>
          <div>Nenana -> Nome . 750 miles . 1925 / 2025</div>
        </div>
      </Container>
    </footer>
  );
}

function FooterCol({ title, items }) {
  return (
    <div>
      <div className="label" style={{ marginBottom: 18 }}>{title}</div>
      <div style={{ display: 'grid', gap: 10 }}>
        {items.map(i => (
          <a key={i} href="#" style={{ fontSize: 13, color: 'var(--paper)', opacity: 0.85 }}>
            {i}
          </a>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, {
  TeamSection, ProductionSection, OpportunitySection, Footer, FooterCol,
});