// Scene 3: Phone walk-around — OK / Watch It / Fix It Now (16-30s)

const CHECKLIST_ITEMS = [
  { name: 'Springs',       desc: 'Oiled, no rust, no sagging.',               status: 'watch', section: 'DOOR INTERIOR' },
  { name: 'Drums',         desc: 'No wear or cracking in cable grooves.',     status: 'ok',    section: 'DOOR INTERIOR' },
  { name: 'Cables',        desc: 'Not bent or frayed.',                        status: 'ok',    section: 'DOOR INTERIOR' },
  { name: 'Rollers',       desc: 'Rotate freely, no cracking.',                status: 'ok',    section: 'DOOR INTERIOR' },
  { name: 'Hinges',        desc: 'No cracks, bends, or black dust.',           status: 'ok',    section: 'DOOR INTERIOR' },
  { name: 'Bottom Seal',   desc: 'Not cracked, ripped, or split.',             status: 'fix',   section: 'DOOR INTERIOR' },
  { name: 'Photo Eyes',    desc: 'Clean, aligned, lights bright.',             status: 'ok',    section: 'ELECTRONICS' },
];

const STATUS_COLORS = {
  ok:    { bg: 'oklch(0.93 0.05 150)', fg: 'oklch(0.38 0.09 150)', ring: 'oklch(0.65 0.11 150)', label: 'OK' },
  watch: { bg: 'oklch(0.95 0.08 85)',  fg: 'oklch(0.42 0.12 65)',  ring: 'oklch(0.72 0.14 80)',  label: 'Watch It' },
  fix:   { bg: 'oklch(0.92 0.08 30)',  fg: 'oklch(0.42 0.17 30)',  ring: 'oklch(0.60 0.18 30)',  label: 'Fix It Now' },
};

function Scene3_Phone({ start = 16, end = 30 }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        // Entry + exit
        const entry = Easing.easeOutCubic(clamp(localTime / 0.7, 0, 1));
        const exit = clamp((duration - localTime) / 0.5, 0, 1);

        // Step timing — each item gets ~1.6s, tap happens at 0.9s into each
        const stepDur = 1.55;
        const stepStart = 1.2;

        // Figure out current "active" item
        const elapsed = localTime - stepStart;
        const activeIndex = clamp(Math.floor(elapsed / stepDur), 0, CHECKLIST_ITEMS.length - 1);
        const localStep = elapsed - activeIndex * stepDur;

        // Progress bar: count of items that have been tapped
        const completedCount = elapsed < 0 ? 0 :
          Math.min(CHECKLIST_ITEMS.length, Math.floor(elapsed / stepDur) + (localStep > 0.95 ? 1 : 0));

        return (
          <div style={{
            position: 'absolute', inset: 0,
            background: 'oklch(0.94 0.02 70)',
            opacity: exit,
          }}>
            {/* Left side: copy */}
            <div style={{
              position: 'absolute', left: 100, top: 200,
              maxWidth: 640,
              opacity: entry,
              transform: `translateX(${(1 - entry) * -20}px)`,
            }}>
              <div style={{
                fontFamily: "'Work Sans', system-ui, sans-serif",
                fontSize: 18, fontWeight: 600,
                color: 'oklch(0.48 0.16 35)',
                letterSpacing: '0.20em',
                textTransform: 'uppercase',
                marginBottom: 14,
              }}>
                Step 02 · Walk it through
              </div>
              <div style={{
                fontFamily: "'Fraunces', serif",
                fontSize: 72, fontWeight: 500,
                color: 'oklch(0.22 0.03 50)',
                lineHeight: 1.0,
                letterSpacing: '-0.02em',
                marginBottom: 36,
              }}>
                Three taps<br/>per item.
              </div>

              {/* Status legend */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 28 }}>
                {['ok', 'watch', 'fix'].map(k => (
                  <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                    <div style={{
                      width: 18, height: 18, borderRadius: 9,
                      background: STATUS_COLORS[k].ring,
                    }}/>
                    <div style={{
                      fontFamily: "'Work Sans', sans-serif",
                      fontSize: 22, fontWeight: 500,
                      color: 'oklch(0.30 0.02 50)',
                    }}>
                      {STATUS_COLORS[k].label}
                    </div>
                  </div>
                ))}
              </div>

              {/* GDS wordmark — fills empty lower area */}
              <div style={{
                marginTop: 80,
                display: 'flex', alignItems: 'center', gap: 16,
                opacity: entry * 0.9,
              }}>
                <img src="assets/gds-icon.png" alt=""
                  style={{ width: 64, height: 64, objectFit: 'contain' }}/>
                <div style={{
                  fontFamily: "'Work Sans', sans-serif",
                  fontSize: 26, fontWeight: 500,
                  color: 'oklch(0.30 0.02 50)',
                  letterSpacing: '0.01em',
                  lineHeight: 1.1,
                }}>
                  Garage Door<br/>
                  <span style={{ color: 'oklch(0.52 0.12 230)', fontWeight: 600 }}>Science</span>
                </div>
              </div>
            </div>

            {/* Phone frame - right side */}
            <PhoneFrame x={1180} y={80} entry={entry}>
              <PhoneScreen
                activeIndex={activeIndex}
                localStep={localStep}
                completedCount={completedCount}
              />
            </PhoneFrame>
          </div>
        );
      }}
    </Sprite>
  );
}

function PhoneFrame({ x, y, entry, children }) {
  const phoneW = 440;
  const phoneH = 900;
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      width: phoneW, height: phoneH,
      transform: `translateY(${(1 - entry) * 30}px) scale(${0.96 + entry * 0.04})`,
      opacity: entry,
    }}>
      {/* Phone outer */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'oklch(0.18 0.01 50)',
        borderRadius: 56,
        padding: 14,
        boxShadow: '0 40px 80px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.1)',
      }}>
        {/* Screen */}
        <div style={{
          position: 'absolute', inset: 14,
          background: 'oklch(0.97 0.01 70)',
          borderRadius: 44,
          overflow: 'hidden',
        }}>
          {children}
          {/* Notch */}
          <div style={{
            position: 'absolute', top: 14,
            left: '50%', transform: 'translateX(-50%)',
            width: 110, height: 30,
            background: 'oklch(0.18 0.01 50)',
            borderRadius: 16,
          }}/>
        </div>
      </div>
    </div>
  );
}

function PhoneScreen({ activeIndex, localStep, completedCount }) {
  const currentItem = CHECKLIST_ITEMS[activeIndex];
  const status = STATUS_COLORS[currentItem.status];

  // Tap happens at localStep ~ 0.85, button highlights from 0.75-1.1
  const tapPhase = localStep;
  const btnHighlight = clamp((tapPhase - 0.75) / 0.15, 0, 1) * (1 - clamp((tapPhase - 1.0) / 0.3, 0, 1));

  // Cursor position: moves toward the right button based on status
  const btnIndex = { ok: 0, watch: 1, fix: 2 }[currentItem.status];
  const cursorT = clamp(tapPhase / 0.8, 0, 1);
  const cursorEased = Easing.easeInOutCubic(cursorT);
  const cursorTargetX = 60 + btnIndex * 110;
  const cursorX = 220 - (220 - cursorTargetX) * cursorEased;
  const cursorY = 540 + (1 - cursorEased) * -30;

  // After tap, status badge appears on the item
  const badgeAppear = clamp((tapPhase - 0.95) / 0.3, 0, 1);

  // Progress
  const progressPct = (completedCount / CHECKLIST_ITEMS.length) * 100;

  return (
    <>
      {/* Status bar area — empty padding */}
      <div style={{ height: 70 }}/>

      {/* Header */}
      <div style={{
        padding: '12px 24px 16px',
        borderBottom: '1px solid oklch(0.90 0.01 70)',
      }}>
        <div style={{
          fontFamily: "'Work Sans', sans-serif",
          fontSize: 12, fontWeight: 600,
          color: 'oklch(0.48 0.16 35)',
          letterSpacing: '0.18em',
          textTransform: 'uppercase',
          marginBottom: 6,
        }}>
          Inspection · Tool
        </div>
        <div style={{
          fontFamily: "'Fraunces', serif",
          fontSize: 26, fontWeight: 500,
          color: 'oklch(0.22 0.03 50)',
          lineHeight: 1.1,
          marginBottom: 14,
        }}>
          24‑point walk‑around
        </div>

        {/* Progress */}
        <div style={{
          display: 'flex', justifyContent: 'space-between',
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 11, color: 'oklch(0.45 0.02 50)',
          marginBottom: 6,
        }}>
          <span>PROGRESS</span>
          <span style={{ fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' }}>{completedCount} / 24</span>
        </div>
        <div style={{
          height: 6, background: 'oklch(0.92 0.01 70)',
          borderRadius: 3, overflow: 'hidden',
        }}>
          <div style={{
            height: '100%',
            width: `${progressPct}%`,
            background: 'oklch(0.58 0.17 35)',
            transition: 'none',
          }}/>
        </div>
      </div>

      {/* Section label */}
      <div style={{
        padding: '14px 24px 6px',
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 10, fontWeight: 600,
        color: 'oklch(0.45 0.02 50)',
        letterSpacing: '0.14em',
      }}>
        {currentItem.section}
      </div>

      {/* Active item card */}
      <div style={{
        margin: '0 20px',
        padding: '20px 20px 16px',
        background: 'oklch(0.99 0.005 70)',
        border: '1.5px solid oklch(0.22 0.02 50)',
        borderRadius: 18,
        boxShadow: '0 4px 14px rgba(0,0,0,0.04)',
      }}>
        <div style={{
          fontFamily: "'Fraunces', serif",
          fontSize: 28, fontWeight: 500,
          color: 'oklch(0.22 0.03 50)',
          letterSpacing: '-0.01em',
          marginBottom: 6,
        }}>
          {currentItem.name}
        </div>
        <div style={{
          fontFamily: "'Work Sans', sans-serif",
          fontSize: 15,
          color: 'oklch(0.40 0.02 50)',
          lineHeight: 1.4,
          marginBottom: 22,
        }}>
          {currentItem.desc}
        </div>

        {/* 3 buttons */}
        <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
          {[
            { key: 'ok',    label: 'OK' },
            { key: 'watch', label: 'Watch It' },
            { key: 'fix',   label: 'Fix It Now' },
          ].map((b, i) => {
            const isTarget = b.key === currentItem.status;
            const highlight = isTarget ? btnHighlight : 0;
            const pressed = isTarget && tapPhase > 0.85 && tapPhase < 1.05;
            return (
              <div key={b.key} style={{
                flex: 1,
                padding: '11px 0',
                textAlign: 'center',
                background: highlight > 0
                  ? STATUS_COLORS[b.key].bg
                  : 'oklch(0.96 0.01 70)',
                border: `1.5px solid ${highlight > 0 ? STATUS_COLORS[b.key].ring : 'oklch(0.88 0.01 70)'}`,
                borderRadius: 10,
                fontFamily: "'Work Sans', sans-serif",
                fontSize: 13, fontWeight: 600,
                color: highlight > 0 ? STATUS_COLORS[b.key].fg : 'oklch(0.42 0.02 50)',
                transform: pressed ? 'scale(0.95)' : 'scale(1)',
              }}>
                {b.label}
              </div>
            );
          })}
        </div>

        {/* Ref photos line */}
        <div style={{
          fontFamily: "'Work Sans', sans-serif",
          fontSize: 11,
          color: 'oklch(0.50 0.02 50)',
        }}>
          📷 4 reference photos · Add a note
        </div>
      </div>

      {/* Previously reviewed items list (checked-off) */}
      <div style={{ padding: '18px 24px 0', display: 'flex', flexDirection: 'column', gap: 8 }}>
        {CHECKLIST_ITEMS.slice(0, Math.max(0, activeIndex)).reverse().slice(0, 3).map((item, i) => {
          const s = STATUS_COLORS[item.status];
          // Only show if they appeared - use fade-in from opacity
          return (
            <div key={item.name + i} style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              padding: '10px 14px',
              background: 'oklch(0.98 0.005 70)',
              borderRadius: 10,
              opacity: 0.7 - i * 0.2,
            }}>
              <div style={{
                fontFamily: "'Work Sans', sans-serif",
                fontSize: 14, fontWeight: 500,
                color: 'oklch(0.30 0.02 50)',
              }}>
                {item.name}
              </div>
              <div style={{
                fontFamily: "'Work Sans', sans-serif",
                fontSize: 10, fontWeight: 700,
                letterSpacing: '0.10em',
                padding: '4px 8px',
                borderRadius: 4,
                background: s.bg,
                color: s.fg,
                textTransform: 'uppercase',
              }}>
                {s.label}
              </div>
            </div>
          );
        })}
      </div>

      {/* Cursor */}
      <div style={{
        position: 'absolute',
        left: cursorX, top: cursorY,
        pointerEvents: 'none',
      }}>
        <svg width="28" height="32" viewBox="0 0 28 32">
          <path d="M2 2 L2 24 L8 19 L12 28 L16 26 L12 17 L20 17 Z"
            fill="oklch(0.22 0.03 50)"
            stroke="oklch(0.98 0.01 80)"
            strokeWidth="1.5"
            strokeLinejoin="round"/>
        </svg>
        {/* Tap ring */}
        {tapPhase > 0.82 && tapPhase < 1.1 && (
          <div style={{
            position: 'absolute',
            left: -18, top: -10,
            width: 50, height: 50,
            borderRadius: '50%',
            border: '2px solid oklch(0.22 0.03 50)',
            opacity: 1 - clamp((tapPhase - 0.82) / 0.25, 0, 1),
            transform: `scale(${0.4 + clamp((tapPhase - 0.82) / 0.25, 0, 1) * 1.2})`,
          }}/>
        )}
      </div>
    </>
  );
}

window.Scene3_Phone = Scene3_Phone;