// scene-act1.jsx — Act I: cold open → hook → pipeline reveal
// Total ~17s. Beats:
//   0.0–3.0   "charter → code" types in left-aligned, arrow draws orange
//   3.0–5.0   title settles, subtitle ghosts in
//   5.0–7.0   wipe to hook scene; horizontal rule draws across
//   7.0–10.0  six dots appear left→right with gentle pulse
//   10.0–12.0 hook caption types: "easier than you think"
//   12.0–15.0 dots get labels (Charter / BRD / FFD / …) typing in below
//   15.0–17.0 caption: "Six steps. Three loops. One working app."

function SceneAct1() {
  return (
    <Timeline duration={18000} sceneId="act1" label="Act I — The Map">
      <CaptionScene>
        <div className="scene-bg scene-cream-bg" />
        <div style={{ position: 'absolute', inset: 0 }}>
          <Act1Cold />
          <Act1Hook />
          <Act1Pipeline />
        </div>

        <SceneCaption text="Building apps. Websites. Products. With Claude." from={5500} typeDur={1400} hold={2400} />
        <SceneCaption text="Easier than you think — if you follow a process." from={9700} typeDur={1500} hold={2200} />
        <SceneCaption text="Six steps. Three loops. One working app." from={14800} typeDur={1500} hold={1700} />
      </CaptionScene>
    </Timeline>
  );
}

// ── 0–5s — Cold open title
function Act1Cold() {
  const t = useT();
  // Fade out the cold open after 5s
  const visible = t < 5400;
  if (!visible) return null;
  const opacity = t < 5000 ? 1 : 1 - (t - 5000) / 400;
  const ty = t < 5000 ? 0 : -(t - 5000) / 6;

  return (
    <div style={{
      position: 'absolute', inset: 0,
      opacity,
      transform: `translateY(${ty}px)`,
    }}>
      {/* preface line */}
      <FadeIn from={400} duration={500}>
        <div style={{
          position: 'absolute', left: 204, top: 380,
          fontFamily: 'var(--font-mono)', fontSize: 26,
          color: 'var(--ink-faint)',
          letterSpacing: '0.16em', textTransform: 'uppercase',
        }}>
          ~ a method for building software with claude
        </div>
      </FadeIn>

      {/* the big title — split type so the arrow can draw orange */}
      <div style={{
        position: 'absolute', left: 200, top: 440,
        fontFamily: 'var(--font-mono)', fontSize: 188,
        fontWeight: 700, color: 'var(--ink)', letterSpacing: '-0.01em',
        lineHeight: 1, display: 'flex', alignItems: 'center',
      }}>
        <Typewriter text="charter" from={200} duration={900} caret={false} />
        <span style={{
          margin: '0 36px',
          color: 'var(--orange-hot)',
          opacity: t > 1100 ? Math.min(1, (t - 1100) / 400) : 0,
          display: 'inline-block',
          transform: 'translateY(-6px)',
        }}>
          {/* arrow is a drawing path */}
          <svg width="120" height="60" style={{ overflow: 'visible' }}>
            <DrawPath
              d="M 8 30 L 100 30"
              from={1200} duration={500}
              stroke="var(--orange-hot)" strokeWidth="10"
            />
            <DrawPath
              d="M 75 8 L 110 30 L 75 52"
              from={1500} duration={350}
              stroke="var(--orange-hot)" strokeWidth="10" fill="none"
            />
          </svg>
        </span>
        <span style={{ opacity: t > 1900 ? 1 : 0 }}>
          <Typewriter text="code" from={1900} duration={700} caret blinkAfter />
        </span>
      </div>
    </div>
  );
}

// ── 5–11s — Hook: rule + 6 dots ─────────────────────────
function Act1Hook() {
  const t = useT();
  if (t < 5300 || t > 18000) return null;

  return (
    <div style={{ position: 'absolute', inset: 0 }}>
      {/* horizontal rule that draws across */}
      <svg width="1920" height="1080" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
        <DrawPath
          d="M 240 540 L 1680 540"
          from={5500} duration={1200}
          stroke="var(--ink-faint)" strokeWidth="2"
        />
      </svg>

      {/* six dots staggered along the rule */}
      {[0,1,2,3,4,5].map((i) => {
        const x = 360 + i * 240;
        const appear = 7000 + i * 200;
        const visible = t > appear;
        const into = Math.max(0, t - appear);
        // pulse: at appear+0..400 it scales up, then settles
        const p = Math.min(1, into / 400);
        const eased = 1 - Math.pow(1 - p, 2);
        const scale = 0.4 + 0.6 * eased;
        const glow = Math.max(0, Math.min(1, into / 600)) * (1 - Math.min(1, Math.max(0, into - 400) / 800));
        if (!visible) return null;
        return (
          <div key={i} style={{
            position: 'absolute',
            left: x - 22, top: 540 - 22,
            width: 44, height: 44,
            borderRadius: '50%',
            background: 'var(--orange-hot)',
            transform: `scale(${scale})`,
            boxShadow: `0 0 ${24 * glow}px rgba(212,107,62,${0.6 * glow})`,
            transition: 'none',
          }} />
        );
      })}

      {/* phase labels appear after caption #1 fades */}
      {[
        { n: '①', label: 'Charter' },
        { n: '②', label: 'BRD' },
        { n: '③', label: 'FFD' },
        { n: '④', label: 'Process Maps' },
        { n: '⑤', label: 'Code' },
        { n: '⑥', label: 'UAT' },
      ].map((p, i) => {
        const x = 360 + i * 240;
        const appear = 13400 + i * 80;
        if (t < appear) return null;
        return (
          <div key={i} style={{
            position: 'absolute',
            left: x - 130, top: 600,
            width: 260, textAlign: 'center',
            fontFamily: 'var(--font-mono)',
            color: 'var(--ink)',
          }}>
            <div style={{ fontSize: 36, color: 'var(--orange)', marginBottom: 10, fontWeight: 700 }}>{p.n}</div>
            <div style={{ fontSize: 30, letterSpacing: '0.04em', fontWeight: 700 }}>
              <Typewriter text={p.label} from={appear} duration={350} caret={false} />
            </div>
          </div>
        );
      })}

      {/* Evaluation Loop arcs above phases 2, 3, 4 */}
      {[1, 2, 3].map((phaseIdx) => {
        const x = 360 + phaseIdx * 240;
        const appear = 15400 + (phaseIdx - 1) * 200;
        if (t < appear) return null;
        const op = Math.min(1, (t - appear) / 500);
        return (
          <div key={`arc-${phaseIdx}`} style={{
            position: 'absolute',
            left: x - 60, top: 440,
            width: 120, opacity: op,
            pointerEvents: 'none',
          }}>
            <svg width="120" height="60" style={{ display: 'block' }}>
              <DrawPath
                d="M 12 50 Q 60 0, 108 50"
                from={appear} duration={500}
                stroke="var(--orange)" strokeWidth="2" fill="none"
              />
              <polygon points="108,50 100,42 112,40" fill="var(--orange)" opacity={op} />
            </svg>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 13,
              color: 'var(--orange)', letterSpacing: '0.12em',
              textAlign: 'center', textTransform: 'uppercase',
              marginTop: -2, fontWeight: 700,
            }}>↻ Eval Loop</div>
          </div>
        );
      })}
    </div>
  );
}

// Stub to keep file structure consistent
function Act1Pipeline() { return null; }

window.SceneAct1 = SceneAct1;