// scenes.jsx — title, 7 step scenes, 3-quality-check outro, and the App/Stage.
// Loaded as text/babel after ee-kit.jsx and ee-visuals.jsx.

const SCENES = {
  title:   [0, 6],
  s1:      [6, 14.5],
  s2:      [14.5, 23],
  s3:      [23, 32],
  s4:      [32, 41],
  s5:      [41, 50],
  s6:      [50, 58.5],
  s7:      [58.5, 67],
  outro:   [67, 84],
};
const CHROME_FROM = 6, CHROME_TO = 67;

// Wraps a scene's content with a soft in/out fade.
function SceneBody({ children }) {
  const { t, sceneOpacity } = useScene();
  return <div style={{ position: 'absolute', inset: 0, opacity: sceneOpacity }}>{children(t)}</div>;
}

// ── Title (dark) ────────────────────────────────────────────────────────────
function TitleScene() {
  const { t, sceneOpacity } = useScene(0.6, 0.6);
  const a = (s) => appear(t, s, 0.7, 18);
  return (
    <div style={{ position: 'absolute', inset: 0, background: EE.teal, opacity: sceneOpacity, overflow: 'hidden' }}>
      {/* faint mint arc accent */}
      <div style={{ position: 'absolute', right: -160, top: -160, width: 560, height: 560, borderRadius: '50%',
        border: `1px solid rgba(101,236,172,0.18)` }} />
      <div style={{ position: 'absolute', right: -60, bottom: -220, width: 640, height: 640, borderRadius: '50%',
        border: `1px solid rgba(101,236,172,0.12)` }} />
      <div style={{ position: 'absolute', left: 120, top: 150, ...a(0.1) }}>
        <img src="assets/logo-on-dark.png" alt="Expansive EDGE" style={{ height: 58, objectFit: 'contain' }} />
      </div>
      <div style={{ position: 'absolute', left: 120, top: 392 }}>
        <div style={{ ...a(0.35), display: 'flex', alignItems: 'center', gap: 14, marginBottom: 26 }}>
          <span style={{ width: 34, height: 3, background: EE.mint, borderRadius: 2 }} />
          <span style={{ fontFamily: EE.body, fontWeight: 600, fontSize: 19, letterSpacing: '0.12em', color: EE.mint }}>FIELD GUIDE · SUMMIT EXTERIORS</span>
        </div>
        <h1 style={{ ...a(0.5), margin: 0, fontFamily: EE.display, fontWeight: 700, fontSize: 116, lineHeight: 0.98, letterSpacing: '-0.03em', color: '#fff' }}>
          Re-Roof Day 1
        </h1>
        <p style={{ ...a(0.68), margin: '24px 0 0', fontFamily: EE.body, fontWeight: 400, fontSize: 34, color: 'rgba(255,255,255,0.82)' }}>
          Site setup and tear-off prep
        </p>
        <div style={{ ...a(0.92), marginTop: 44, display: 'inline-flex', alignItems: 'center', gap: 12,
          background: 'rgba(101,236,172,0.12)', border: '1px solid rgba(101,236,172,0.35)', borderRadius: 999, padding: '14px 24px' }}>
          <Icon name="clock" size={22} color={EE.mint} stroke={2.2} />
          <span style={{ fontFamily: EE.body, fontWeight: 600, fontSize: 21, color: '#fff' }}>Goal: tear-off ready by 8:30 AM</span>
        </div>
      </div>
    </div>
  );
}

// ── Scene 1: Confirm the scope ──────────────────────────────────────────────
function DocCard({ t }) {
  const items = ['Tear-off to deck', 'Synthetic underlay', 'Architectural shingle', 'Ridge vent and flashing'];
  return (
    <div style={{ position: 'absolute', left: 44, top: 74, width: 372, height: 422, background: EE.surface,
      borderRadius: 18, border: `1px solid ${EE.border}`, boxShadow: '0 8px 20px rgba(4,69,76,0.08)', padding: 26 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
        <IconChip name="clipboard" size={48} icon={24} radius={14} />
        <div>
          <div style={{ fontFamily: EE.display, fontWeight: 700, fontSize: 21, color: EE.teal }}>Signed quote</div>
          <div style={{ fontFamily: EE.body, fontWeight: 500, fontSize: 14, color: EE.muted }}>Scope, approved</div>
        </div>
      </div>
      <div style={{ height: 1, background: EE.border, margin: '16px 0 14px' }} />
      {items.map((it, i) => {
        const p = ramp(t, 0.9 + i * 0.45, 0.4, Easing.easeOutBack);
        return (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '11px 0' }}>
            <div style={{ width: 26, height: 26, borderRadius: 999, flexShrink: 0,
              background: p > 0.1 ? EE.mint : EE.teal05, display: 'flex', alignItems: 'center', justifyContent: 'center',
              transform: `scale(${0.7 + 0.3 * p})` }}>
              <div style={{ opacity: p }}><Icon name="check" size={16} color={EE.teal} stroke={3} /></div>
            </div>
            <span style={{ fontFamily: EE.body, fontWeight: 500, fontSize: 17, color: EE.ink, whiteSpace: 'nowrap' }}>{it}</span>
          </div>
        );
      })}
    </div>
  );
}

function Scene1() {
  return (
    <Sprite start={SCENES.s1[0]} end={SCENES.s1[1]}>
      <SceneBody>{(t) => (<>
        <VisualStage t={t}>
          <DocCard t={t} />
          {/* walkthrough vignette */}
          <div style={{ position: 'absolute', right: 0, top: 0, width: 400, height: 570 }}>
            <svg viewBox="0 0 400 570" width="400" height="570" style={{ position: 'absolute', inset: 0 }}
              fill="none" stroke={EE.teal} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              {/* small house */}
              <g opacity={ramp(t, 1.4, 0.6)}>
                <rect x="150" y="120" width="150" height="104" rx="4" fill={EE.surface} />
                <path d="M138 120l87-56 87 56" fill={EE.surface} />
                <rect x="206" y="176" width="38" height="48" rx="3" />
              </g>
              {/* dashed walk path */}
              <path d="M80 470q110 30 140 -140" stroke={EE.mint} strokeWidth="3" strokeDasharray="3 9"
                {...draw(360, ramp(t, 2.0, 1.0))} />
            </svg>
            <Figure x={48} y={328} scale={0.6} opacity={ramp(t, 1.6, 0.5)} />
            <Figure x={118} y={338} scale={0.56} mint opacity={ramp(t, 1.9, 0.5)} />
            <div style={{ position: 'absolute', left: 50, top: 510, opacity: ramp(t, 2.3, 0.5),
              fontFamily: EE.body, fontWeight: 700, fontSize: 14, letterSpacing: '0.1em', color: EE.teal }}>WALK THE PROPERTY</div>
          </div>
        </VisualStage>
        <Caption t={t} step="STEPS 1 & 2" title="Confirm the scope"
          sub="Match the signed quote with the foreman, then walk the property with the homeowner. Note access, pets, and fragile items." />
      </>)}</SceneBody>
    </Sprite>
  );
}

// ── Scene 2: Photograph everything ──────────────────────────────────────────
function Scene2() {
  return (
    <Sprite start={SCENES.s2[0]} end={SCENES.s2[1]}>
      <SceneBody>{(t) => (<>
        <VisualStage t={t}><HouseElevation t={t} /></VisualStage>
        <Caption t={t} step="STEP 3" title="Photograph everything first"
          sub="Capture all four elevations and the driveway before any work starts. Photos protect the crew and the homeowner." />
      </>)}</SceneBody>
    </Sprite>
  );
}

// ── Scene 3: Park and protect ───────────────────────────────────────────────
function Scene3() {
  return (
    <Sprite start={SCENES.s3[0]} end={SCENES.s3[1]}>
      <SceneBody>{(t) => (<>
        <VisualStage t={t}>
          <SitePlan t={t} show={{ trailer: ramp(t, 0.8, 0.7), mat: ramp(t, 1.7, 0.7), tarp: ramp(t, 2.7, 0.9) }} />
        </VisualStage>
        <Caption t={t} step="STEPS 4 & 5" title="Park and protect"
          sub="Set the trailer and bin to the site map, protect the driveway, and tarp the landscaping, AC units, and walkways." />
      </>)}</SceneBody>
    </Sprite>
  );
}

// ── Scene 4: Tie off every worker ───────────────────────────────────────────
function Scene4() {
  return (
    <Sprite start={SCENES.s4[0]} end={SCENES.s4[1]}>
      <SceneBody>{(t) => (<>
        <VisualStage t={t}><RoofSection t={t} /></VisualStage>
        <Caption t={t} step="STEP 6" title="Tie off every worker"
          sub="Verify fall protection. Anchors set, harness on every worker. No one goes on the roof until it checks out." />
      </>)}</SceneBody>
    </Sprite>
  );
}

// ── Scene 5: Stage in install sequence ──────────────────────────────────────
function Scene5() {
  return (
    <Sprite start={SCENES.s5[0]} end={SCENES.s5[1]}>
      <SceneBody>{(t) => (<>
        <VisualStage t={t}>
          <SitePlan t={t} show={{ trailer: 1, mat: 1, tarp: 1, lift: ramp(t, 0.6, 0.5),
            materials: ramp(t, 1.2, 0.8), dump: ramp(t, 2.4, 0.8) }} />
        </VisualStage>
        <Caption t={t} step="STEPS 7 & 9" title="Stage in install sequence"
          sub="Stack materials at the lift point in the order they go on, and position the dump trailer under the tear-off zone." />
      </>)}</SceneBody>
    </Sprite>
  );
}

// ── Scene 6: Brief the crew ─────────────────────────────────────────────────
function BriefChip({ t, at, name, label }) {
  const p = ramp(t, at, 0.5, Easing.easeOutBack);
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14, background: EE.surface, border: `1px solid ${EE.border}`,
      borderRadius: 14, padding: '14px 18px', boxShadow: '0 6px 16px rgba(4,69,76,0.06)',
      opacity: p, transform: `translateY(${(1 - p) * 12}px)` }}>
      <IconChip name={name} size={46} icon={23} radius={12} />
      <span style={{ fontFamily: EE.display, fontWeight: 600, fontSize: 20, color: EE.teal }}>{label}</span>
    </div>
  );
}
function Scene6() {
  return (
    <Sprite start={SCENES.s6[0]} end={SCENES.s6[1]}>
      <SceneBody>{(t) => (<>
        <VisualStage t={t}>
          {/* briefing chips 2x2 */}
          <div style={{ position: 'absolute', left: 44, top: 44, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, width: 744 }}>
            <BriefChip t={t} at={0.8} name="clipboard" label="Scope" />
            <BriefChip t={t} at={1.2} name="shield" label="Hazards" />
            <BriefChip t={t} at={1.6} name="layers" label="Sequence" />
            <BriefChip t={t} at={2.0} name="clock" label="Finish target" />
          </div>
          {/* crew huddle */}
          <div style={{ position: 'absolute', left: 0, bottom: 0, width: 832, height: 300 }}>
            <Figure x={150} y={120} scale={0.72} opacity={ramp(t, 0.3, 0.5)} />
            <Figure x={330} y={96} scale={0.78} mint opacity={ramp(t, 0.5, 0.5)} />
            <Figure x={510} y={120} scale={0.72} opacity={ramp(t, 0.7, 0.5)} />
            <Figure x={650} y={132} scale={0.66} opacity={ramp(t, 0.9, 0.5)} />
            <div style={{ position: 'absolute', left: 348, top: 86, opacity: ramp(t, 1.2, 0.5),
              fontFamily: EE.body, fontWeight: 700, fontSize: 12, letterSpacing: '0.1em', color: EE.teal,
              background: EE.mint, padding: '4px 10px', borderRadius: 999 }}>FOREMAN</div>
          </div>
        </VisualStage>
        <Caption t={t} step="STEP 8" title="Brief the crew"
          sub="Walk the team through scope, hazards, sequence, and the finish target before anyone starts." />
      </>)}</SceneBody>
    </Sprite>
  );
}

// ── Scene 7: Signal the office ──────────────────────────────────────────────
function Scene7() {
  return (
    <Sprite start={SCENES.s7[0]} end={SCENES.s7[1]}>
      <SceneBody>{(t) => (<>
        <VisualStage t={t}><Phone t={t} /></VisualStage>
        <Caption t={t} step="STEP 10" title="Signal the office"
          sub="Text the crew chat: “Site set, tear-off starting,” with two photos. Then tear-off begins." />
      </>)}</SceneBody>
    </Sprite>
  );
}

// ── Outro: three quality checks (dark) ──────────────────────────────────────
function OutroScene() {
  const { t, sceneOpacity } = useScene(0.6, 0.6);
  const checks = [
    'Photos on file before tear-off.',
    'Every worker tied off.',
    'Homeowner knows the day’s plan.',
  ];
  const a = (s) => appear(t, s, 0.7, 18);
  return (
    <div style={{ position: 'absolute', inset: 0, background: EE.teal, opacity: sceneOpacity, overflow: 'hidden' }}>
      <div style={{ position: 'absolute', left: -180, bottom: -200, width: 620, height: 620, borderRadius: '50%',
        border: '1px solid rgba(101,236,172,0.12)' }} />
      <div style={{ position: 'absolute', left: 120, top: 130, ...a(0.1), display: 'flex', alignItems: 'center', gap: 14 }}>
        <span style={{ width: 34, height: 3, background: EE.mint, borderRadius: 2 }} />
        <span style={{ fontFamily: EE.body, fontWeight: 600, fontSize: 19, letterSpacing: '0.12em', color: EE.mint }}>BEFORE TEAR-OFF · QUALITY CHECKS</span>
      </div>
      <h2 style={{ position: 'absolute', left: 120, top: 186, margin: 0, ...a(0.28),
        fontFamily: EE.display, fontWeight: 700, fontSize: 64, letterSpacing: '-0.025em', color: '#fff' }}>
        Three checks before you start
      </h2>
      <div style={{ position: 'absolute', left: 120, top: 330, display: 'flex', flexDirection: 'column', gap: 26, width: 1100 }}>
        {checks.map((c, i) => {
          const p = ramp(t, 0.9 + i * 0.9, 0.55, Easing.easeOutBack);
          return (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 26,
              opacity: clamp(p * 1.4, 0, 1), transform: `translateX(${(1 - p) * -24}px)` }}>
              <div style={{ width: 64, height: 64, borderRadius: 999, background: EE.mint, flexShrink: 0,
                display: 'flex', alignItems: 'center', justifyContent: 'center', transform: `scale(${0.6 + 0.4 * p})`,
                boxShadow: '0 12px 30px rgba(101,236,172,0.35)' }}>
                <Icon name="check" size={34} color={EE.teal} stroke={3} />
              </div>
              <span style={{ fontFamily: EE.display, fontWeight: 600, fontSize: 44, letterSpacing: '-0.02em', color: '#fff' }}>{c}</span>
            </div>
          );
        })}
      </div>
      {/* end lockup */}
      <div style={{ position: 'absolute', left: 120, bottom: 96, ...a(4.0), display: 'flex', alignItems: 'center', gap: 28 }}>
        <img src="assets/logo-on-dark.png" alt="Expansive EDGE" style={{ height: 46, objectFit: 'contain' }} />
        <div style={{ width: 1, height: 44, background: 'rgba(255,255,255,0.2)' }} />
        <span style={{ fontFamily: EE.body, fontWeight: 600, fontSize: 24, color: 'rgba(255,255,255,0.9)' }}>
          Site set. Tear-off starts at 8:30.
        </span>
      </div>
    </div>
  );
}

// ── Chrome + time-label layers ──────────────────────────────────────────────
function ChromeLayer() {
  const time = useTime();
  return <Chrome time={time} from={CHROME_FROM} to={CHROME_TO} />;
}
function TimeLabel() {
  const time = useTime();
  React.useEffect(() => {
    const el = document.getElementById('video-root');
    if (el) {
      const m = Math.floor(time / 60), s = Math.floor(time % 60);
      el.setAttribute('data-screen-label', `${m}:${String(s).padStart(2, '0')}`);
    }
  }, [Math.floor(time)]);
  return null;
}

// ── App ─────────────────────────────────────────────────────────────────────
function App() {
  return (
    <Stage width={1920} height={1080} duration={84} background={EE.surface} persistKey="reroof-day1-v1">
      <div id="video-root" data-screen-label="0:00" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }} />
      <TitleScene_Wrapped />
      <Scene1 /><Scene2 /><Scene3 /><Scene4 /><Scene5 /><Scene6 /><Scene7 />
      <OutroScene_Wrapped />
      <ChromeLayer />
      <TimeLabel />
      <AudioControl />
    </Stage>
  );
}
function TitleScene_Wrapped() {
  return <Sprite start={SCENES.title[0]} end={SCENES.title[1]}><TitleScene /></Sprite>;
}
function OutroScene_Wrapped() {
  return <Sprite start={SCENES.outro[0]} end={SCENES.outro[1]}><OutroScene /></Sprite>;
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);