// Scene components for the Long Journey Residency video.
// Each scene is wrapped in a <Sprite> with its own [start, end] range.
// They share the sky backdrop underneath; each contributes foreground.

const ACCENT = '#2a1f1a';        // warm deep brown (matches villa body)
const INK    = '#1a1222';        // near-black with a purple tilt
const PAPER  = '#f6ead9';        // warm cream (matches clouds)
const PLUM   = '#7d6399';        // sheep midtone
const GILT   = '#c9a35a';        // gold for accent/edge brand

// Utility: typeset serif-italic header, matches the poster's "Long Journey" style
const SERIF_ITALIC = "'EB Garamond', 'Cormorant Garamond', Georgia, serif";
const SERIF        = "'EB Garamond', 'Cormorant Garamond', Georgia, serif";
const SANS         = "'Inter Tight', 'Inter', system-ui, sans-serif";
const MONO         = "'JetBrains Mono', ui-monospace, SFMono-Regular, monospace";

// ─── Scene 1: Opening question ───────────────────────────────────────────
// 0 → 4s. Empty sky. A question fades in softly, then out.
function SceneOpening({ start, end }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        const opacity = interpolate(
          [0, 0.8, duration - 1.0, duration],
          [0, 1, 1, 0],
          Easing.easeOutCubic
        )(localTime);
        const ty = interpolate(
          [0, 0.8, duration],
          [20, 0, -10],
          Easing.easeOutCubic
        )(localTime);

        return (
          <div style={{
            position: 'absolute', inset: 0,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            opacity,
            transform: `translateY(${ty}px)`,
          }}>
            <div style={{
              fontFamily: SERIF_ITALIC,
              fontStyle: 'italic',
              fontSize: 92,
              lineHeight: 1.08,
              color: INK,
              textAlign: 'center',
              maxWidth: 1400,
              letterSpacing: '-0.01em',
              textShadow: '0 2px 30px rgba(255,255,255,0.4)',
            }}>
              What if your wildest idea<br/>
              <span style={{ color: ACCENT }}>already has a home?</span>
            </div>
          </div>
        );
      }}
    </Sprite>
  );
}

// ─── Scene 2: Island rises + brand lockup ────────────────────────────────
// 4 → 10s. Island floats up from below, settles, title fades in.
function SceneIsland({ start, end }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        // Island: rises from y=1400 to y=580, with slight overshoot
        const islandY = interpolate(
          [0, 2.2, duration - 0.6, duration],
          [1400, 560, 560, 540],
          [Easing.easeOutCubic, Easing.linear, Easing.easeInCubic]
        )(localTime);
        const islandScale = interpolate(
          [0, 2.2],
          [0.92, 1.0],
          Easing.easeOutCubic
        )(localTime);

        // Title fades in after island settles
        const titleOpacity = interpolate(
          [2.2, 3.0, duration - 0.6, duration],
          [0, 1, 1, 0],
          Easing.easeOutCubic
        )(localTime);
        const titleY = interpolate(
          [2.2, 3.0],
          [14, 0],
          Easing.easeOutCubic
        )(localTime);

        // Shadow below island (soft)
        const shadowOpacity = interpolate(
          [0, 2.2],
          [0, 0.35],
          Easing.easeOutCubic
        )(localTime);

        return (
          <>
            {/* Soft drop-shadow plate */}
            <div style={{
              position: 'absolute',
              left: 960, top: islandY + 180,
              transform: 'translate(-50%, -50%)',
              width: 700, height: 50,
              background: 'radial-gradient(ellipse, rgba(60,40,80,0.5) 0%, transparent 70%)',
              opacity: shadowOpacity,
              filter: 'blur(20px)',
            }}/>

            <FloatingIsland x={960} y={islandY} scale={islandScale}/>

            {/* Sheep on/near island */}
            {localTime > 1.8 && (
              <>
                <Sheep x={960} y={islandY - 80} size={0.9} facing={-1} bobPhase={0}/>
                <Sheep x={1060} y={islandY - 60} size={0.8} facing={1} bobPhase={1.5} tone="#c4b0dd"/>
                <Sheep x={840} y={islandY - 60} size={0.85} facing={-1} bobPhase={3} tone="#a58dc4"/>
              </>
            )}

            {/* Floating sheep in foreground like the poster — larger, bottom-right */}
            {localTime > 2.6 && (
              <div style={{
                position: 'absolute',
                left: 1380, top: 880,
                opacity: interpolate([2.6, 3.6], [0, 1], Easing.easeOutCubic)(localTime),
                transform: `translateY(${interpolate([2.6, 3.6], [40, 0], Easing.easeOutCubic)(localTime)}px)`,
              }}>
                <Sheep x={0} y={0} size={2.2} facing={-1} bobPhase={0.5}/>
              </div>
            )}

            {/* Title lockup — left side, sized to fit */}
            <div style={{
              position: 'absolute',
              left: 120, top: 380,
              opacity: titleOpacity,
              transform: `translateY(${titleY}px)`,
              width: 720,
            }}>
              <div style={{
                fontFamily: SANS,
                fontSize: 15,
                fontWeight: 600,
                letterSpacing: '0.32em',
                textTransform: 'uppercase',
                color: ACCENT,
                marginBottom: 20,
              }}>
                Announcing &nbsp;·&nbsp; Edge Esmeralda 2026
              </div>
              <div style={{
                fontFamily: SERIF_ITALIC,
                fontStyle: 'italic',
                fontSize: 108,
                lineHeight: 0.98,
                color: INK,
                letterSpacing: '-0.015em',
              }}>
                Long Journey<br/>
                <span style={{ fontStyle: 'normal', fontWeight: 500 }}>Residency</span>
              </div>
              <div style={{
                fontFamily: SANS, fontSize: 20, fontWeight: 500,
                color: ACCENT, marginTop: 28, lineHeight: 1.4,
                fontStyle: 'italic',
              }}>
                A month-long launchpad for founders<br/>building the magically weird.
              </div>
            </div>
          </>
        );
      }}
    </Sprite>
  );
}

// ─── Scene 3: Field tags floating through clouds ─────────────────────────
// 10 → 15.5s. Positioning: "the magically weird." Tag cards drift in.
function SceneMagicallyWeird({ start, end }) {
  const tags = [
    { text: 'brain–computer interfaces', x: 140, y: 220, delay: 0.3 },
    { text: 'synthetic biology',        x: 1430, y: 180, delay: 0.7 },
    { text: 'causal world models',      x: 110, y: 820, delay: 1.1 },
    { text: 'autonomous systems',       x: 1380, y: 780, delay: 1.5 },
    { text: 'the absurd · the unconventional', x: 640, y: 920, delay: 1.9 },
  ];

  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        // Headline
        const headOpacity = interpolate(
          [0, 0.6, duration - 0.6, duration],
          [0, 1, 1, 0]
        )(localTime);
        const headY = interpolate([0, 0.6], [20, 0], Easing.easeOutCubic)(localTime);

        return (
          <>
            {/* Central headline */}
            <div style={{
              position: 'absolute',
              left: '50%', top: '42%',
              transform: `translate(-50%, -50%) translateY(${headY}px)`,
              opacity: headOpacity,
              textAlign: 'center',
              width: 1200,
            }}>
              <div style={{
                fontFamily: SANS, fontSize: 18, fontWeight: 600,
                letterSpacing: '0.3em', textTransform: 'uppercase',
                color: ACCENT, marginBottom: 24,
              }}>
                for founders chasing
              </div>
              <div style={{
                fontFamily: SERIF_ITALIC, fontStyle: 'italic',
                fontSize: 108, lineHeight: 1.0, color: INK,
                letterSpacing: '-0.01em',
              }}>
                the magically weird,<br/>
                <span style={{ color: ACCENT }}>before it becomes consensus.</span>
              </div>
            </div>

            {/* Floating tag cards */}
            {tags.map((tag, i) => {
              const tLocal = localTime - tag.delay;
              if (tLocal < 0) return null;
              const opacity = interpolate(
                [0, 0.5, duration - tag.delay - 0.6, duration - tag.delay],
                [0, 1, 1, 0]
              )(tLocal);
              const ty = interpolate([0, 0.7], [18, 0], Easing.easeOutCubic)(tLocal);
              const drift = Math.sin(tLocal * 0.7 + i) * 4;

              return (
                <div key={i} style={{
                  position: 'absolute',
                  left: tag.x, top: tag.y + drift,
                  opacity,
                  transform: `translateY(${ty}px)`,
                  fontFamily: MONO,
                  fontSize: 16,
                  color: INK,
                  background: 'rgba(255,250,240,0.88)',
                  border: '1px solid rgba(60,40,30,0.22)',
                  padding: '10px 18px',
                  borderRadius: 2,
                  backdropFilter: 'blur(8px)',
                  boxShadow: '0 8px 30px rgba(60,40,30,0.12)',
                  letterSpacing: '0.02em',
                }}>
                  <span style={{ color: ACCENT, marginRight: 8 }}>◇</span>
                  {tag.text}
                </div>
              );
            })}
          </>
        );
      }}
    </Sprite>
  );
}

// ─── Scene 4: The numbers ────────────────────────────────────────────────
// 15.5 → 22s. Stats arrive one by one, stacked.
function SceneNumbers({ start, end }) {
  const stats = [
    { big: '13', label: 'founders · fully sponsored',              delay: 0.0 },
    { big: '1',  label: 'month inside Edge Esmeralda',             delay: 0.8 },
    { big: '500+', label: 'builders, researchers & creators',      delay: 1.6 },
    { big: '≈½',  label: 'of year-one cohort raised follow-ons',   delay: 2.4 },
  ];

  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        // Section label
        const labelOpacity = interpolate(
          [0, 0.5, duration - 0.5, duration], [0, 1, 1, 0]
        )(localTime);

        return (
          <>
            <div style={{
              position: 'absolute',
              left: '50%', top: 110,
              transform: 'translateX(-50%)',
              opacity: labelOpacity,
              fontFamily: SANS, fontSize: 16, fontWeight: 600,
              letterSpacing: '0.3em', textTransform: 'uppercase',
              color: ACCENT,
            }}>
              What it is
            </div>

            {/* 2x2 grid of stats */}
            <div style={{
              position: 'absolute',
              left: '50%', top: '54%',
              transform: 'translate(-50%, -50%)',
              display: 'grid',
              gridTemplateColumns: 'repeat(4, 1fr)',
              gap: 0,
              width: 1640,
            }}>
              {stats.map((s, i) => {
                const tLocal = localTime - s.delay;
                if (tLocal < 0) return <div key={i}/>;
                const op = interpolate(
                  [0, 0.45, duration - s.delay - 0.5, duration - s.delay],
                  [0, 1, 1, 0]
                )(tLocal);
                const ty = interpolate([0, 0.5], [20, 0], Easing.easeOutCubic)(tLocal);

                return (
                  <div key={i} style={{
                    opacity: op,
                    transform: `translateY(${ty}px)`,
                    padding: '0 20px',
                    borderLeft: i === 0 ? 'none' : '1px solid rgba(60,40,30,0.25)',
                    textAlign: 'left',
                  }}>
                    <div style={{
                      fontFamily: SERIF_ITALIC,
                      fontStyle: 'italic',
                      fontSize: 170,
                      lineHeight: 0.9,
                      color: INK,
                      letterSpacing: '-0.03em',
                      marginBottom: 20,
                    }}>
                      {s.big}
                    </div>
                    <div style={{
                      fontFamily: SANS,
                      fontSize: 20,
                      lineHeight: 1.3,
                      color: ACCENT,
                      fontWeight: 500,
                      maxWidth: 320,
                    }}>
                      {s.label}
                    </div>
                  </div>
                );
              })}
            </div>
          </>
        );
      }}
    </Sprite>
  );
}

// ─── Scene 5: Date + location ────────────────────────────────────────────
// 22 → 26.5s. Big ticket with date + place, styled like the poster.
function SceneDates({ start, end }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        const cardOpacity = interpolate(
          [0, 0.6, duration - 0.5, duration], [0, 1, 1, 0]
        )(localTime);
        const cardY = interpolate([0, 0.6], [30, 0], Easing.easeOutCubic)(localTime);

        const underline = interpolate([0.6, 1.6], [0, 1], Easing.easeInOutCubic)(localTime);

        return (
          <div style={{
            position: 'absolute', inset: 0,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            opacity: cardOpacity,
            transform: `translateY(${cardY}px)`,
          }}>
            <div style={{ textAlign: 'center', maxWidth: 1400 }}>
              <div style={{
                fontFamily: MONO, fontSize: 16,
                letterSpacing: '0.32em', textTransform: 'uppercase',
                color: ACCENT, marginBottom: 36,
              }}>
                May 30 &nbsp;—&nbsp; June 27 &nbsp;·&nbsp; 2026
              </div>
              <div style={{
                fontFamily: SERIF_ITALIC, fontStyle: 'italic',
                fontSize: 170, lineHeight: 0.96, color: INK,
                letterSpacing: '-0.02em',
                marginBottom: 28,
                position: 'relative',
                display: 'inline-block',
              }}>
                Healdsburg,
                <br/>
                <span style={{ fontStyle: 'normal', fontWeight: 500 }}>California.</span>
                {/* animated underline */}
                <div style={{
                  position: 'absolute',
                  left: 0, bottom: -8,
                  height: 3,
                  width: `${underline * 100}%`,
                  background: ACCENT,
                  transformOrigin: 'left',
                }}/>
              </div>
              <div style={{
                fontFamily: SANS, fontSize: 24, fontWeight: 500,
                color: ACCENT, letterSpacing: '0.02em',
                marginTop: 20,
              }}>
                A month-long launchpad inside a popup village
                <br/>
                of <span style={{ fontStyle: 'italic', fontFamily: SERIF_ITALIC }}>500+</span> builders, researchers &amp; creators.
              </div>
            </div>
          </div>
        );
      }}
    </Sprite>
  );
}

// ─── Scene 6: CTA ────────────────────────────────────────────────────────
// 26.5 → 30s.
function SceneCTA({ start, end }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        const oOpacity = interpolate([0, 0.5, duration - 0.4, duration], [0, 1, 1, 0])(localTime);
        const shift   = interpolate([0, 0.6], [20, 0], Easing.easeOutCubic)(localTime);

        // Pulsing URL
        const pulse = 1 + Math.sin(localTime * 2.5) * 0.02;

        return (
          <div style={{
            position: 'absolute', inset: 0,
            display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center',
            opacity: oOpacity,
            transform: `translateY(${shift}px)`,
            gap: 100,
            padding: '80px 0',
          }}>
            <div style={{
              fontFamily: SANS, fontSize: 18, fontWeight: 600,
              letterSpacing: '0.32em', textTransform: 'uppercase',
              color: ACCENT,
            }}>
              Apply by March 31
            </div>
            <div style={{
              fontFamily: SERIF_ITALIC, fontStyle: 'italic',
              fontSize: 104, lineHeight: 1.05, color: INK,
              letterSpacing: '-0.015em', textAlign: 'center',
              maxWidth: 1600,
              paddingBottom: 24,
            }}>
              Bring the absurd.<br/>
              <span style={{ color: ACCENT, fontStyle: 'normal', fontWeight: 500 }}>We'll bring the believers.</span>
            </div>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 20,
              padding: '22px 48px',
              background: INK,
              color: PAPER,
              fontFamily: MONO, fontSize: 22,
              letterSpacing: '0.04em',
              transform: `scale(${pulse})`,
              boxShadow: '0 12px 40px rgba(30,20,30,0.35)',
              marginTop: 20,
            }}>
              <span style={{ color: GILT }}>→</span>
              edgecity.live
            </div>
          </div>
        );
      }}
    </Sprite>
  );
}

Object.assign(window, {
  SceneOpening, SceneIsland, SceneMagicallyWeird,
  SceneNumbers, SceneDates, SceneCTA,
  ACCENT, INK, PAPER, PLUM, GILT, SERIF, SERIF_ITALIC, SANS, MONO,
});