// Outro scenes appended after Step 7 in the full product video:
//   • SceneAdjust — substitute / WhatsApp dispatch (showcases the ongoing
//     value beyond the one-time generate).
//   • SceneEndCard — final CTA frame with site + price.
//
// Both reuse BRAND constants and helpers defined in animations.jsx.
// All times are scene-local (subtract `start` from useTime()).

const OUTRO_FRAME = { x: 192, y: 96, w: 1536, h: 820 };

// ── ADJUSTMENT SCENE ─────────────────────────────────────────────────────────
// Beats:
//   0.0 – 0.4   Fade in, page header "Adjustments" slides in
//   0.4 – 1.2   Absent-teacher pill + day pill animate in
//   1.2 – 3.0   Substitute suggestion card slides up, top candidate highlighted
//   3.0 – 4.5   WhatsApp button glows; phone mockup with pre-filled message
//                slides in from the right
//   4.5 – 5.5   Hold + fade out
function SceneAdjust({ start = 0 }) {
  const t = useTime();
  const lt = t - start;
  if (lt < -0.2 || lt > 5.7) return null;

  const sceneFade = interpolate([0, 0.3, 5.0, 5.5], [0, 1, 1, 0], Easing.easeOutCubic)(lt);
  const headerY = interpolate([0, 0.5], [16, 0], Easing.easeOutCubic)(lt);
  const headerOp = interpolate([0, 0.5], [0, 1], Easing.easeOutCubic)(lt);

  const pillOp = interpolate([0.4, 1.0], [0, 1], Easing.easeOutCubic)(lt);
  const pillY = interpolate([0.4, 1.0], [12, 0], Easing.easeOutCubic)(lt);

  const cardOp = interpolate([1.2, 1.8], [0, 1], Easing.easeOutCubic)(lt);
  const cardY = interpolate([1.2, 1.8], [24, 0], Easing.easeOutCubic)(lt);

  // Top candidate gets a subtle highlight ring that pulses once
  const ringStart = 2.0;
  const ringPulse = lt > ringStart && lt < ringStart + 0.6
    ? Math.sin((lt - ringStart) * Math.PI / 0.6)
    : 0;

  const waOp = interpolate([3.0, 3.5], [0, 1], Easing.easeOutCubic)(lt);
  const waGlow = lt > 3.5 && lt < 4.3
    ? Math.sin((lt - 3.5) * Math.PI / 0.8) * 0.7
    : 0;

  const phoneX = interpolate([3.2, 4.0], [80, 0], Easing.easeOutCubic)(lt);
  const phoneOp = interpolate([3.2, 4.0], [0, 1], Easing.easeOutCubic)(lt);

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: sceneFade }}>
      <AppFrame x={OUTRO_FRAME.x} y={OUTRO_FRAME.y} width={OUTRO_FRAME.w} height={OUTRO_FRAME.h}>
        <TopChrome/>
        <div style={{ padding: '40px 56px' }}>
          {/* Header */}
          <div style={{
            transform: `translateY(${headerY}px)`,
            opacity: headerOp,
          }}>
            <div style={{
              fontSize: 13, fontWeight: 700, letterSpacing: '0.16em',
              textTransform: 'uppercase', color: BRAND.inkSub,
            }}>
              Day-of
            </div>
            <div style={{
              fontSize: 40, fontWeight: 700, color: BRAND.ink,
              letterSpacing: '-0.02em', marginTop: 8,
            }}>
              When a teacher's out, fix it in seconds.
            </div>
            <div style={{
              fontSize: 16, color: BRAND.inkSoft, marginTop: 6, maxWidth: 720,
            }}>
              Find a substitute, notify them on WhatsApp — done.
            </div>
          </div>

          {/* Pill row: absent teacher + day */}
          <div style={{
            marginTop: 28,
            display: 'flex', gap: 12,
            opacity: pillOp,
            transform: `translateY(${pillY}px)`,
          }}>
            <Pill label="Absent" value="Anita (Science)" tone="danger"/>
            <Pill label="Date" value="Thu · 8 periods" tone="neutral"/>
          </div>

          {/* Substitute candidate card */}
          <div style={{
            marginTop: 24,
            background: '#fff',
            border: `1px solid ${BRAND.line}`,
            borderRadius: 16,
            padding: '20px 24px',
            opacity: cardOp,
            transform: `translateY(${cardY}px)`,
            boxShadow: '0 1px 0 rgba(0,0,0,0.02), 0 8px 24px -16px rgba(0,0,0,0.08)',
          }}>
            <div style={{
              fontSize: 12, fontWeight: 700, letterSpacing: '0.14em',
              textTransform: 'uppercase', color: BRAND.inkSub, marginBottom: 14,
            }}>
              Suggested substitutes — Period 3, Class 5-A
            </div>

            {/* Top candidate (highlighted) */}
            <CandidateRow
              name="Neelam"
              subjectMatch="Teaches Science · 12 free periods this week"
              score={94}
              highlighted
              ringIntensity={ringPulse}
              waGlow={waGlow}
              waOp={waOp}
            />
            <div style={{ height: 1, background: BRAND.line, margin: '14px 0' }}/>
            <CandidateRow
              name="Priya"
              subjectMatch="Coordinator · 8 free periods"
              score={78}
            />
            <div style={{ height: 1, background: BRAND.line, margin: '14px 0' }}/>
            <CandidateRow
              name="Arjun"
              subjectMatch="Social Studies · 6 free periods"
              score={61}
            />
          </div>
        </div>

        {/* Phone mockup with pre-filled WhatsApp message */}
        <div style={{
          position: 'absolute',
          right: 56,
          top: 200,
          width: 280,
          opacity: phoneOp,
          transform: `translateX(${phoneX}px)`,
        }}>
          <PhoneMock>
            <WhatsAppMessage/>
          </PhoneMock>
        </div>
      </AppFrame>
    </div>
  );
}

// ── END CARD ────────────────────────────────────────────────────────────────
// Beats:
//   0.0 – 0.5   Background washes from cream to deep teal
//   0.4 – 1.0   Wordmark drops in
//   0.9 – 1.5   Tagline fades in
//   1.4 – 2.0   CTA pill scales up + price line fades in
//   2.0 – 4.0   Hold
//   4.0 – 4.5   Subtle fade out
function SceneEndCard({ start = 0 }) {
  const t = useTime();
  const lt = t - start;
  if (lt < -0.2 || lt > 4.7) return null;

  const bgOp = interpolate([0, 0.5], [0, 1], Easing.easeOutCubic)(lt);
  const wordmarkOp = interpolate([0.4, 1.0], [0, 1], Easing.easeOutCubic)(lt);
  const wordmarkY = interpolate([0.4, 1.0], [16, 0], Easing.easeOutCubic)(lt);
  const taglineOp = interpolate([0.9, 1.5], [0, 1], Easing.easeOutCubic)(lt);
  const ctaScale = interpolate([1.4, 2.0], [0.85, 1], Easing.easeOutBack)(lt);
  const ctaOp = interpolate([1.4, 2.0], [0, 1], Easing.easeOutCubic)(lt);
  const sceneFadeOut = interpolate([4.0, 4.5], [1, 0], Easing.easeOutCubic)(lt);

  return (
    <div style={{
      position: 'absolute', inset: 0,
      opacity: sceneFadeOut,
      background: `linear-gradient(135deg, rgba(13,138,126,${bgOp * 0.96}) 0%, rgba(10,90,82,${bgOp * 0.98}) 100%)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexDirection: 'column',
      textAlign: 'center',
    }}>
      {/* Wordmark */}
      <div style={{
        opacity: wordmarkOp,
        transform: `translateY(${wordmarkY}px)`,
        fontSize: 96, fontWeight: 700, color: '#ffffff',
        letterSpacing: '-0.03em',
        fontFamily: BRAND.font,
      }}>
        Timetable Studio
      </div>

      {/* Tagline */}
      <div style={{
        opacity: taglineOp,
        fontSize: 28, color: 'rgba(255,255,255,0.85)',
        marginTop: 16, maxWidth: 900,
        fontWeight: 400, letterSpacing: '-0.01em',
      }}>
        School timetables, generated in seconds.
      </div>

      {/* CTA pill */}
      <div style={{
        opacity: ctaOp,
        transform: `scale(${ctaScale})`,
        marginTop: 48,
        background: '#ffffff',
        color: BRAND.green,
        padding: '20px 40px',
        borderRadius: 999,
        fontSize: 26, fontWeight: 700,
        letterSpacing: '-0.01em',
        boxShadow: '0 20px 40px -20px rgba(0,0,0,0.4)',
        display: 'inline-block',
      }}>
        timetablestudio.com
      </div>

      <div style={{
        opacity: ctaOp,
        marginTop: 28,
        fontSize: 18,
        color: 'rgba(255,255,255,0.75)',
        letterSpacing: '0.02em',
      }}>
        Free 14-day trial · plans from ₹1,999/year
      </div>
    </div>
  );
}

// ── Helpers used by SceneAdjust ─────────────────────────────────────────────

function Pill({ label, value, tone = 'neutral' }) {
  const colors = tone === 'danger'
    ? { bg: '#fdf0ef', fg: '#b53d2e', border: '#f3d6d2' }
    : { bg: '#f4f1ec', fg: BRAND.inkSoft, border: BRAND.line };
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 10,
      background: colors.bg,
      border: `1px solid ${colors.border}`,
      borderRadius: 999,
      padding: '8px 16px',
    }}>
      <span style={{
        fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
        textTransform: 'uppercase', color: colors.fg, opacity: 0.7,
      }}>
        {label}
      </span>
      <span style={{
        fontSize: 15, fontWeight: 600, color: colors.fg,
      }}>
        {value}
      </span>
    </div>
  );
}

function CandidateRow({ name, subjectMatch, score, highlighted, ringIntensity = 0, waGlow = 0, waOp = 1 }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 16,
      padding: highlighted ? '8px 12px' : '4px 0',
      background: highlighted ? `rgba(13,138,126,${0.04 + ringIntensity * 0.06})` : 'transparent',
      borderRadius: 12,
      border: highlighted ? `2px solid rgba(13,138,126,${0.35 + ringIntensity * 0.4})` : '2px solid transparent',
      transition: 'all 0.2s',
    }}>
      {/* Avatar */}
      <div style={{
        width: 40, height: 40, borderRadius: '50%',
        background: highlighted ? BRAND.green : BRAND.line,
        color: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontWeight: 700, fontSize: 16,
      }}>
        {name.charAt(0)}
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 17, fontWeight: 600, color: BRAND.ink }}>
          {name}
        </div>
        <div style={{ fontSize: 13, color: BRAND.inkSoft, marginTop: 2 }}>
          {subjectMatch}
        </div>
      </div>
      {/* Score chip */}
      <div style={{
        fontSize: 13, fontWeight: 700,
        padding: '6px 12px',
        borderRadius: 999,
        background: highlighted ? BRAND.greenSoft : '#f4f1ec',
        color: highlighted ? BRAND.green : BRAND.inkSoft,
        fontVariantNumeric: 'tabular-nums',
      }}>
        {score}% match
      </div>
      {/* WhatsApp button — only on highlighted row */}
      {highlighted && (
        <div style={{
          opacity: waOp,
          display: 'inline-flex', alignItems: 'center', gap: 8,
          background: '#25D366',
          color: '#fff',
          padding: '10px 18px',
          borderRadius: 999,
          fontSize: 14, fontWeight: 700,
          boxShadow: `0 0 0 ${waGlow * 8}px rgba(37,211,102,${waGlow * 0.3})`,
          transition: 'box-shadow 0.2s',
        }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
            <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.2-.2.3-.8.9-1 1.1-.2.2-.4.2-.7.1-.3-.1-1.2-.4-2.3-1.4-.8-.7-1.4-1.7-1.6-1.9-.2-.3 0-.5.1-.6.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5l-.7-1.7c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.4 0-.6.3-.2.2-.8.8-.8 1.9 0 1.1.8 2.2.9 2.4.1.2 1.6 2.4 3.9 3.4.6.2 1 .4 1.3.5.6.2 1.1.2 1.5.1.5-.1 1.4-.6 1.6-1.1.2-.5.2-1 .1-1.1 0-.1-.2-.1-.4-.2zM12.1 21.3c-1.7 0-3.3-.5-4.7-1.3l-3.4.9.9-3.3c-.9-1.5-1.4-3.2-1.4-4.9 0-4.8 3.9-8.7 8.7-8.7s8.7 3.9 8.7 8.7-3.9 8.6-8.8 8.6zm0-18.7C6.1 2.6 1.3 7.4 1.3 13.3c0 1.9.5 3.8 1.4 5.4L1 24l5.4-1.4c1.5.9 3.3 1.4 5.1 1.4 5.9 0 10.7-4.8 10.7-10.7s-4.2-10.7-10.1-10.7z"/>
          </svg>
          <span>Notify</span>
        </div>
      )}
    </div>
  );
}

function PhoneMock({ children }) {
  return (
    <div style={{
      background: '#000',
      borderRadius: 36,
      padding: 8,
      boxShadow: '0 30px 60px -20px rgba(0,0,0,0.3)',
    }}>
      <div style={{
        background: '#075e54',
        borderRadius: 30,
        overflow: 'hidden',
        height: 540,
        position: 'relative',
      }}>
        {/* Status bar */}
        <div style={{
          background: '#075e54',
          color: '#fff',
          padding: '14px 20px',
          fontSize: 12,
          fontWeight: 600,
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}>
          <span>9:41</span>
          <span style={{ fontSize: 14, fontWeight: 700 }}>WhatsApp</span>
          <span>📶</span>
        </div>
        {children}
      </div>
    </div>
  );
}

function WhatsAppMessage() {
  return (
    <div style={{
      background: '#ECE5DD',
      height: 'calc(100% - 44px)',
      padding: 16,
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'flex-end',
    }}>
      <div style={{
        background: '#DCF8C6',
        padding: '10px 14px',
        borderRadius: 10,
        fontSize: 13,
        color: '#262626',
        lineHeight: 1.5,
        maxWidth: '90%',
        alignSelf: 'flex-end',
        boxShadow: '0 1px 0.5px rgba(0,0,0,0.13)',
      }}>
        Hi Neelam, you're covering Period 3 for Class 5-A today (Science · Anita is out). Thanks! — Timetable Studio
        <div style={{ fontSize: 10, color: '#8a8a8a', textAlign: 'right', marginTop: 4 }}>
          9:42 AM ✓✓
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SceneAdjust, SceneEndCard });