// Scene 4: Phone→laptop transition, scored report + pro match (30-42s)

function Scene4_Report({ start = 30, end = 42 }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        const entry = clamp(localTime / 0.7, 0, 1);
        const exit = clamp((duration - localTime) / 0.6, 0, 1);

        // Laptop slides up
        const laptopY = (1 - Easing.easeOutCubic(entry)) * 80;

        // Report content fades in around 0.9s
        const reportT = clamp((localTime - 0.8) / 0.8, 0, 1);

        // Score count-up to 78
        const scoreT = clamp((localTime - 1.6) / 1.6, 0, 1);
        const score = Math.round(Easing.easeOutCubic(scoreT) * 78);

        // Pro-match card slides in at 5s
        const proT = clamp((localTime - 5.2) / 0.8, 0, 1);

        return (
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(180deg, oklch(0.93 0.02 70) 0%, oklch(0.88 0.03 65) 100%)',
            opacity: exit * entry,
          }}>
            {/* Heading */}
            <div style={{
              position: 'absolute',
              left: 80, top: 80,
              opacity: entry,
              transform: `translateY(${(1 - entry) * 20}px)`,
            }}>
              <div style={{
                fontFamily: "'Work Sans', sans-serif",
                fontSize: 18, fontWeight: 600,
                color: 'oklch(0.48 0.16 35)',
                letterSpacing: '0.20em',
                textTransform: 'uppercase',
                marginBottom: 14,
              }}>
                Step 03 · Get your report
              </div>
              <div style={{
                fontFamily: "'Fraunces', serif",
                fontSize: 64, fontWeight: 500,
                color: 'oklch(0.22 0.03 50)',
                lineHeight: 1.0,
                letterSpacing: '-0.02em',
                maxWidth: 620,
              }}>
                Scored.<br/>
                Actionable.<br/>
                <em style={{ fontStyle: 'italic', color: 'oklch(0.48 0.16 35)' }}>Pro‑matched.</em>
              </div>
            </div>

            {/* Laptop */}
            <LaptopFrame x={820} y={180 + laptopY} width={1040} height={660}>
              <ReportContent reportT={reportT} score={score} proT={proT} />
            </LaptopFrame>
          </div>
        );
      }}
    </Sprite>
  );
}

function LaptopFrame({ x, y, width, height, children }) {
  return (
    <div style={{ position: 'absolute', left: x, top: y, width, height }}>
      {/* Screen */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'oklch(0.12 0.01 50)',
        borderRadius: '14px 14px 4px 4px',
        padding: 16,
        boxShadow: '0 30px 80px rgba(0,0,0,0.25)',
      }}>
        <div style={{
          position: 'absolute', inset: 16,
          background: 'oklch(0.98 0.01 70)',
          borderRadius: 4,
          overflow: 'hidden',
        }}>
          {children}
        </div>
      </div>
      {/* Base */}
      <div style={{
        position: 'absolute',
        left: -30, right: -30,
        bottom: -14, height: 14,
        background: 'linear-gradient(180deg, oklch(0.18 0.01 50) 0%, oklch(0.14 0.01 50) 100%)',
        borderRadius: '0 0 10px 10px',
      }}/>
      <div style={{
        position: 'absolute',
        left: '50%', transform: 'translateX(-50%)',
        bottom: -4, width: 100, height: 4,
        background: 'oklch(0.10 0.01 50)',
        borderRadius: '0 0 8px 8px',
      }}/>
    </div>
  );
}

function ReportContent({ reportT, score, proT }) {
  return (
    <>
      {/* Browser chrome */}
      <div style={{
        height: 34,
        background: 'oklch(0.94 0.01 70)',
        borderBottom: '1px solid oklch(0.88 0.01 70)',
        display: 'flex', alignItems: 'center', padding: '0 14px', gap: 8,
      }}>
        <div style={{ width: 10, height: 10, borderRadius: 5, background: 'oklch(0.72 0.12 30)' }}/>
        <div style={{ width: 10, height: 10, borderRadius: 5, background: 'oklch(0.82 0.13 85)' }}/>
        <div style={{ width: 10, height: 10, borderRadius: 5, background: 'oklch(0.72 0.12 150)' }}/>
        <div style={{
          marginLeft: 16,
          height: 20, flex: 1,
          background: 'oklch(0.98 0.005 70)',
          borderRadius: 4,
          display: 'flex', alignItems: 'center', gap: 6,
          padding: '0 10px',
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 10,
          color: 'oklch(0.48 0.02 50)',
        }}>
          <img src="assets/gds-icon.png" alt=""
            style={{ width: 12, height: 12, objectFit: 'contain' }}/>
          garagedoorscience.com · Your inspection report
        </div>
      </div>

      {/* Email body */}
      <div style={{ padding: '30px 50px', opacity: reportT }}>
        <div style={{
          fontFamily: "'Work Sans', sans-serif",
          fontSize: 12, fontWeight: 600,
          color: 'oklch(0.48 0.16 35)',
          letterSpacing: '0.18em',
          textTransform: 'uppercase',
          marginBottom: 12,
        }}>
          Your Inspection · Oak Street Garage
        </div>
        <div style={{
          fontFamily: "'Fraunces', serif",
          fontSize: 34, fontWeight: 500,
          color: 'oklch(0.22 0.03 50)',
          lineHeight: 1.1, marginBottom: 24,
        }}>
          Nice work — your door scored:
        </div>

        {/* Big score */}
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 28 }}>
          <div style={{
            fontFamily: "'Fraunces', serif",
            fontSize: 150, fontWeight: 500,
            color: 'oklch(0.48 0.16 85)',
            lineHeight: 0.9,
            fontVariantNumeric: 'tabular-nums',
            letterSpacing: '-0.04em',
          }}>
            {score}
          </div>
          <div style={{
            fontFamily: "'Fraunces', serif",
            fontSize: 48, fontWeight: 400,
            color: 'oklch(0.48 0.02 50)',
          }}>
            / 100
          </div>
          <div style={{
            marginLeft: 14,
            padding: '8px 14px',
            background: 'oklch(0.93 0.08 85)',
            color: 'oklch(0.40 0.14 65)',
            fontFamily: "'Work Sans', sans-serif",
            fontSize: 13, fontWeight: 700,
            letterSpacing: '0.14em',
            borderRadius: 4,
            textTransform: 'uppercase',
          }}>
            Needs Attention
          </div>
        </div>

        {/* Breakdown */}
        <div style={{ display: 'flex', gap: 16, marginBottom: 28 }}>
          {[
            { label: 'OK',        count: 21, color: 'oklch(0.65 0.11 150)' },
            { label: 'Watch It',  count: 2,  color: 'oklch(0.72 0.14 80)' },
            { label: 'Fix Now',   count: 1,  color: 'oklch(0.60 0.18 30)' },
          ].map(r => (
            <div key={r.label} style={{
              flex: 1, padding: 16,
              background: 'oklch(0.97 0.01 70)',
              borderRadius: 8,
              borderLeft: `4px solid ${r.color}`,
            }}>
              <div style={{
                fontFamily: "'Fraunces', serif",
                fontSize: 38, fontWeight: 500,
                color: 'oklch(0.22 0.03 50)',
                lineHeight: 1,
                fontVariantNumeric: 'tabular-nums',
              }}>
                {r.count}
              </div>
              <div style={{
                fontFamily: "'Work Sans', sans-serif",
                fontSize: 12, fontWeight: 600,
                color: 'oklch(0.45 0.02 50)',
                letterSpacing: '0.12em',
                textTransform: 'uppercase',
                marginTop: 4,
              }}>
                {r.label}
              </div>
            </div>
          ))}
        </div>

        {/* Pro match card */}
        <div style={{
          padding: 20,
          background: 'oklch(0.22 0.03 50)',
          color: 'oklch(0.98 0.01 80)',
          borderRadius: 10,
          display: 'flex', alignItems: 'center', gap: 18,
          opacity: proT,
          transform: `translateY(${(1 - proT) * 20}px)`,
        }}>
          <div style={{
            width: 64, height: 64,
            borderRadius: 32,
            background: 'oklch(0.98 0.01 80)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            flexShrink: 0,
            overflow: 'hidden',
          }}>
            <img src="assets/aplus-logo.webp" alt="A+ Garage Doors"
              style={{ width: '100%', height: '100%', objectFit: 'contain' }}/>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{
              fontFamily: "'Work Sans', sans-serif",
              fontSize: 11, fontWeight: 600,
              color: 'oklch(0.70 0.10 80)',
              letterSpacing: '0.18em',
              textTransform: 'uppercase',
              marginBottom: 4,
            }}>
              Pro nearby · 2.3 miles
            </div>
            <div style={{
              fontFamily: "'Fraunces', serif",
              fontSize: 22, fontWeight: 500,
            }}>
              A+ Garage Doors
            </div>
            <div style={{
              fontFamily: "'Work Sans', sans-serif",
              fontSize: 13,
              color: 'oklch(0.75 0.02 80)',
              marginTop: 2,
            }}>
              ★★★★★ 4.9 · 312 reviews · Can come Thursday
            </div>
          </div>
          <div style={{
            padding: '12px 20px',
            background: 'oklch(0.58 0.17 35)',
            color: 'oklch(0.98 0.01 80)',
            borderRadius: 6,
            fontFamily: "'Work Sans', sans-serif",
            fontSize: 14, fontWeight: 600,
          }}>
            Book →
          </div>
        </div>
      </div>
    </>
  );
}

window.Scene4_Report = Scene4_Report;