// scene-maps.jsx — Phase 4 · Process Maps (swim lanes)
// 0–4   pipeline pulse (active=3) → ghost FFD chip (callback)
// 4–10  Three lanes draw on (Broker / System / CIO) with state boxes appearing left→right
// 10–14 Connectors draw between states, "happy path" highlighted
// 14–17 Mini eval callback (compressed: ✓)
// 17–22 ✓ MAPS locked

function SceneMaps() {
  return (
    <Timeline duration={26800} sceneId="maps" label="Phase 4 — Process Maps">
      <CaptionScene>
        <div className="scene-bg scene-cream-bg" />

        <PhaseIntroCard
          from={0}
          num="04"
          name="Process Maps"
          who="😍 Human + 🤖 Claude"
          tone="cream"
          summary="Map every state, every transition, every actor. Three lanes. One happy path."
        />

        <TimeShift offset={4800}>
          <MapsPipelinePulse />
          <MapsCallback />
          <MapsSwimlanes />
          <MapsMiniEval />
          <MapsFinal />

          <SceneCaption text="Now: how does the app actually flow?" from={2400} typeDur={1300} hold={1400} />
          <SceneCaption text="Three lanes. Broker, System, CIO." from={5800} typeDur={1300} hold={1500} />
          <SceneCaption text="Every state. Every transition." from={9600} typeDur={1300} hold={1500} />
          <SceneCaption text="Same Evaluation Loop. Lock it." from={14400} typeDur={1300} hold={1400} />
        </TimeShift>
      </CaptionScene>
    </Timeline>
  );
}

function MapsPipelinePulse() {
  const t = useT();
  if (t > 4000) return null;
  const op = t < 600 ? t / 600 : (t > 3400 ? 1 - (t - 3400) / 600 : 1);
  return (
    <div style={{ position: 'absolute', top: 36, left: 0, right: 0, opacity: op, zIndex: 5 }}>
      <PipelineBar active={3} />
    </div>
  );
}

function MapsCallback() {
  const t = useT();
  if (t < 1400 || t > 17500) return null;
  const op = t < 1900 ? (t - 1400) / 500 : (t > 17000 ? 1 - (t - 17000) / 500 : 1);
  return (
    <div style={{
      position: 'absolute', top: 130, left: 96,
      display: 'flex', gap: 12,
      opacity: op,
      zIndex: 4,
    }}>
      {['CHARTER ✓', 'BRD ✓', 'FFD ✓'].map((label, i) => (
        <div key={i} style={{
          padding: '8px 14px',
          background: 'rgba(46,125,50,0.06)',
          border: '1px solid var(--success-green)',
          borderRadius: 4,
          fontFamily: 'var(--font-mono)', fontSize: 14,
          color: 'var(--success-green)', letterSpacing: '0.08em',
          fontWeight: 700,
        }}>{label}</div>
      ))}
    </div>
  );
}

function MapsSwimlanes() {
  const t = useT();
  if (t < 3500 || t > 17500) return null;
  const op = t < 4000 ? (t - 3500) / 500 : (t > 17000 ? 1 - (t - 17000) / 500 : 1);

  const W = 1640;
  const H = 600;
  const laneH = H / 3;
  const colW = W / 5;
  const lanes = ['BROKER', 'SYSTEM', 'CIO'];
  const states = [
    { lane: 0, label: 'DRAFT',             from: 5400 },
    { lane: 1, label: 'QVP_IN_PROGRESS',   from: 6400 },
    { lane: 1, label: 'QVP_PASSED',        from: 7400 },
    { lane: 2, label: 'CIO_REVIEW',        from: 8400 },
    { lane: 1, label: 'TAP_TERMS_SENT',    from: 9400 },
  ];

  return (
    <div style={{
      position: 'absolute',
      top: 240, left: '50%', transform: 'translateX(-50%)',
      width: W, height: H,
      opacity: op,
    }}>
      {/* notebook frame */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'var(--cream-paper)',
        border: '1px solid var(--cream-rule)',
        borderRadius: 8,
        padding: 56,
        boxShadow: '0 24px 60px -28px rgba(80,60,30,0.25)',
      }}>
        <div style={{
          position: 'absolute', top: -14, left: 32,
          fontFamily: 'var(--font-mono)', fontSize: 14,
          background: 'var(--cream-paper)', padding: '4px 10px',
          color: 'var(--ink-faint)',
          letterSpacing: '0.18em', textTransform: 'uppercase',
        }}>Process Maps · Deal Intake → Terms</div>

        <div style={{ position: 'relative', width: W - 112, height: H - 112 }}>
          {/* lane separators draw on */}
          <svg width={W - 112} height={H - 112} style={{ position: 'absolute', inset: 0 }}>
            {lanes.map((_, i) => (
              <DrawPath
                key={i}
                d={`M 0 ${(i + 1) * (laneH - 30)} L ${W - 112} ${(i + 1) * (laneH - 30)}`}
                from={4200 + i * 400} duration={700}
                stroke="var(--cream-rule)" strokeWidth="1"
              />
            ))}

            {/* connectors */}
            {states.slice(0, -1).map((s, i) => {
              const next = states[i + 1];
              const lH = laneH - 30;
              const x1 = i * colW + colW * 0.7;
              const y1 = s.lane * lH + lH / 2;
              const x2 = (i + 1) * colW + colW * 0.3;
              const y2 = next.lane * lH + lH / 2;
              return (
                <DrawPath
                  key={i}
                  d={`M ${x1} ${y1} C ${x1 + 60} ${y1}, ${x2 - 60} ${y2}, ${x2} ${y2}`}
                  from={s.from + 500} duration={400}
                  stroke="var(--ink-faint)" strokeWidth="2"
                />
              );
            })}

            {/* happy path overlay (orange) */}
            <Show from={11500} fadeIn={400}>
              <g>
                {states.slice(0, -1).map((s, i) => {
                  const next = states[i + 1];
                  const lH = laneH - 30;
                  const x1 = i * colW + colW * 0.7;
                  const y1 = s.lane * lH + lH / 2;
                  const x2 = (i + 1) * colW + colW * 0.3;
                  const y2 = next.lane * lH + lH / 2;
                  return (
                    <DrawPath
                      key={i}
                      d={`M ${x1} ${y1} C ${x1 + 60} ${y1}, ${x2 - 60} ${y2}, ${x2} ${y2}`}
                      from={11500 + i * 250} duration={500}
                      stroke="var(--orange)" strokeWidth="4"
                    />
                  );
                })}
              </g>
            </Show>
          </svg>

          {/* lane labels */}
          {lanes.map((l, i) => {
            const lH = laneH - 30;
            const lop = Math.min(1, Math.max(0, (t - (4400 + i * 300)) / 400));
            return (
              <div key={l} style={{
                position: 'absolute', left: -44, top: i * lH + lH / 2 - 18,
                fontFamily: 'var(--font-mono)',
                textTransform: 'uppercase', letterSpacing: '0.14em',
                fontSize: 16, color: 'var(--ink-faint)',
                background: 'var(--cream-paper)',
                padding: '6px 12px',
                border: '1px solid var(--cream-rule)',
                borderRadius: 4,
                opacity: lop,
              }}>{l}</div>
            );
          })}

          {/* state boxes */}
          {states.map((s, i) => {
            if (t < s.from) return null;
            const sop = Math.min(1, (t - s.from) / 350);
            const sty = (1 - sop) * 12;
            const lH = laneH - 30;
            return (
              <div key={i} style={{
                position: 'absolute',
                left: i * colW + 30,
                top: s.lane * lH + lH / 2 - 32,
                width: colW - 60, height: 64,
                background: 'var(--orange)',
                color: '#FFF8EE',
                fontFamily: 'var(--font-mono)',
                fontSize: 17, fontWeight: 700,
                letterSpacing: '0.06em',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                borderRadius: 4,
                boxShadow: '0 4px 14px rgba(184,92,56,0.32)',
                opacity: sop,
                transform: `translateY(${sty}px)`,
              }}>{s.label}</div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function MapsMiniEval() {
  const t = useT();
  if (t < 13000 || t > 17500) return null;
  const op = t < 13500 ? (t - 13000) / 500 : (t > 17000 ? 1 - (t - 17000) / 500 : 1);
  return (
    <div style={{
      position: 'absolute', top: 130, right: 96,
      display: 'flex', gap: 16, alignItems: 'center',
      opacity: op,
      zIndex: 4,
    }}>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 13,
        color: 'var(--ink-faint)', letterSpacing: '0.18em',
        textTransform: 'uppercase',
      }}>Evaluation Loop</div>
      {[
        { from: 13400, label: 'MAPS v1.0' },
        { from: 13900, label: '↻' },
        { from: 14400, label: '✓' },
      ].map((c, i) => {
        if (t < c.from) return null;
        const cop = Math.min(1, (t - c.from) / 250);
        return (
          <div key={i} style={{
            padding: '6px 12px',
            border: `1px solid ${c.label === '✓' ? 'var(--success-green)' : 'var(--orange)'}`,
            color: c.label === '✓' ? 'var(--success-green)' : 'var(--orange)',
            fontFamily: 'var(--font-mono)', fontSize: 14, fontWeight: 700,
            borderRadius: 3,
            opacity: cop,
          }}>{c.label}</div>
        );
      })}
    </div>
  );
}

function MapsFinal() {
  const t = useT();
  if (t < 17800) return null;
  const op = Math.min(1, (t - 17800) / 600);
  const ty = (1 - op) * 24;
  return (
    <div style={{
      position: 'absolute', left: 0, right: 0, top: 380,
      textAlign: 'center',
      opacity: op, transform: `translateY(${ty}px)`,
    }}>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 24,
        color: 'var(--ink-faint)', letterSpacing: '0.22em',
        textTransform: 'uppercase',
      }}>Phase 4 · locked</div>
      <div style={{
        fontFamily: 'var(--font-serif)',
        fontSize: 200, fontWeight: 700,
        color: 'var(--success-green)', lineHeight: 1,
        margin: '24px 0 16px',
      }}>✓ MAPS</div>
      <div style={{
        fontFamily: 'var(--font-serif)', fontStyle: 'italic',
        fontSize: 32, color: 'var(--ink-soft)',
      }}>Every state. Every transition.</div>
    </div>
  );
}

window.SceneMaps = SceneMaps;