OiMy.
For families who already
have enough to worry about.

// OiMy Explainer — Remotion composition
// Handles: phone overlays, caption reveals, logo close
// npm create video@latest && npm i @remotion/player

import { AbsoluteFill, Sequence, Video, Img, useCurrentFrame, interpolate, spring, useVideoConfig, Audio } from 'remotion';
import { CSSProperties } from 'react';

// ── Brand tokens ────────────────────────────────────────
const BRAND = {
  amber:   '#C8722A',
  amberLt: '#E8A86A',
  sage:    '#5D8A5E',
  cream:   '#FDF9F4',
  ink:     '#2A2018',
  inkMid:  '#5C4E3A',
};

// ── Utility: spring-eased opacity ───────────────────────
function useFadeIn(startFrame: number, duration = 18) {
  const frame = useCurrentFrame();
  return interpolate(frame, [startFrame, startFrame + duration], [0, 1], {
    extrapolateLeft:  'clamp',
    extrapolateRight: 'clamp',
  });
}

// ── OiMy message bubble ─────────────────────────────────
function MessageBubble({
  text, from, startFrame, width = 300,
}: {
  text: string; from: 'oimy' | 'user';
  startFrame: number; width?: number;
}) {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const opacity = useFadeIn(startFrame);
  const translateY = interpolate(
    frame, [startFrame, startFrame + 20], [14, 0],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );

  const isOiMy = from === 'oimy';
  const style: CSSProperties = {
    background:   isOiMy ? 'rgba(253,249,244,0.96)' : 'rgba(200,114,42,0.85)',
    color:        isOiMy ? BRAND.ink : '#fff',
    borderRadius: isOiMy ? '18px 18px 18px 4px' : '18px 18px 4px 18px',
    padding:      '14px 18px',
    maxWidth:     width,
    fontFamily:   'Lora, Georgia, serif',
    fontSize:     14,
    lineHeight:   1.6,
    boxShadow:    '0 4px 24px rgba(0,0,0,0.18)',
    alignSelf:    isOiMy ? 'flex-start' : 'flex-end',
    opacity,
    transform:    `translateY(${translateY}px)`,
  };

  return (
    <div style={style}>
      {isOiMy && (
        <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em',
          textTransform: 'uppercase', color: BRAND.amber, marginBottom: 5 }}>
          OiMy
        </div>
      )}
      {text}
    </div>
  );
}

// ── Phone frame overlay ─────────────────────────────────
function PhoneOverlay({ startFrame, children }: { startFrame: number; children: React.ReactNode }) {
  const frame = useCurrentFrame();
  const opacity = useFadeIn(startFrame, 12);
  const scale = interpolate(
    frame, [startFrame, startFrame + 14], [0.95, 1],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );

  return (
    <div style={{
      position:     'absolute',
      bottom:       '12%',
      right:        '8%',
      width:        280,
      background:   'rgba(26,18,8,0.92)',
      borderRadius: 24,
      padding:      '20px 16px',
      border:       '1px solid rgba(200,114,42,0.3)',
      boxShadow:    '0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05)',
      display:      'flex',
      flexDirection:'column',
      gap:          10,
      transform:    `scale(${scale}) rotate(-2deg)`,
      opacity,
      backdropFilter: 'blur(8px)',
    }}>
      {/* Status bar */}
      <div style={{ display: 'flex', justifyContent: 'space-between',
        fontSize: 11, color: 'rgba(253,245,236,0.4)', marginBottom: 4 }}>
        <span>9:23</span><span>●●●●●</span>
      </div>
      {children}
    </div>
  );
}

// ── Handwritten caption ─────────────────────────────────
// Uses SVG stroke-dashoffset trick for ink-draw effect
function HandwrittenCaption({ text, startFrame }: { text: string; startFrame: number }) {
  const frame = useCurrentFrame();
  const opacity = useFadeIn(startFrame, 24);
  const clipProgress = interpolate(
    frame, [startFrame, startFrame + 36], [0, 100],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );

  return (
    <div style={{
      position:   'absolute',
      bottom:     '8%',
      left:       '7%',
      fontFamily: 'Caveat, cursive',
      fontSize:   34,
      color:      '#FDF5EC',
      textShadow: '0 2px 24px rgba(0,0,0,0.75)',
      opacity,
      // Clip reveal left-to-right for ink draw feel
      clipPath:   `inset(0 ${100 - clipProgress}% 0 0)`,
      letterSpacing: '0.02em',
    }}>
      {text}
    </div>
  );
}

// ── Logo close sequence ─────────────────────────────────
function LogoClose() {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const logoOpacity = interpolate(frame, [12, 30], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
  const logoScale = spring({ fps, frame, from: 0.96, to: 1.0, delay: 12, durationInFrames: 24 });
  const taglineOpacity = interpolate(frame, [36, 54], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
  const taglineClip = interpolate(frame, [36, 72], [0, 100], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
  const badgesOpacity = interpolate(frame, [72, 90], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
  const badgesY = interpolate(frame, [72, 90], [12, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });

  // Breathing scale (heartbeat feel)
  const breathe = 1 + 0.008 * Math.sin((frame / fps) * 2 * Math.PI * 0.4);

  return (
    <AbsoluteFill style={{ background: '#1A1208', display: 'flex',
      flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 24 }}>

      {/* OiMy wordmark */}
      <div style={{
        fontFamily:    'Lora, Georgia, serif',
        fontSize:      64,
        fontWeight:    500,
        color:         BRAND.cream,
        letterSpacing: '-0.02em',
        opacity:       logoOpacity,
        transform:     `scale(${logoScale * breathe})`,
      }}>
        OiMy
      </div>

      {/* Tagline — ink draw reveal */}
      <div style={{
        fontFamily:    'Caveat, cursive',
        fontSize:      24,
        color:         BRAND.amberLt,
        opacity:       taglineOpacity,
        clipPath:      `inset(0 ${100 - taglineClip}% 0 0)`,
        letterSpacing: '0.02em',
        maxWidth:      520,
        textAlign:     'center',
        lineHeight:    1.4,
      }}>
        For families who already have enough to worry about.
      </div>

      {/* Platform badges */}
      <div style={{
        display:    'flex', gap: 20, opacity: badgesOpacity,
        transform:  `translateY(${badgesY}px)`, marginTop: 16,
      }}>
        {['Telegram', 'WhatsApp', 'iOS'].map(p => (
          <div key={p} style={{
            padding:      '8px 20px',
            border:       '1px solid rgba(253,249,244,0.2)',
            borderRadius: 100,
            color:        'rgba(253,249,244,0.6)',
            fontSize:     13,
            fontFamily:   'Inter, sans-serif',
            fontWeight:   500,
          }}>{p}</div>
        ))}
      </div>

    </AbsoluteFill>
  );
}

// ── Amber glow pulse (OiMy "alive" indicator) ───────────
function AmberPulse({ startFrame }: { startFrame: number }) {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const progress = Math.max(0, frame - startFrame);
  const scale = 1 + 0.3 * Math.sin((progress / fps) * 2 * Math.PI * 1.2);
  const opacity = interpolate(progress, [0, 8, 16], [0, 0.4, 0],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });

  return (
    <div style={{
      position:     'absolute',
      right:        '9%',
      bottom:       '13%',
      width:        300,
      height:       200,
      borderRadius: 50,
      background:   BRAND.amber,
      filter:       'blur(60px)',
      opacity,
      transform:    `scale(${scale})`,
      pointerEvents:'none',
    }} />
  );
}

// ── Root composition ────────────────────────────────────
export function OiMyExplainer() {
  const { fps } = useVideoConfig();
  const f = (sec: number) => Math.round(sec * fps); // seconds → frames at 30fps

  return (
    <AbsoluteFill style={{ background: '#1A1208' }}>

      {/* ── Scene 1: Alarm (0:00–0:04) */}
      <Sequence from={f(0)} durationInFrames={f(4)}>
        <Video src="./footage/shot-01-alarm.mp4" />
      </Sequence>

      {/* ── Scene 2: Kitchen chaos (0:04–0:14) */}
      <Sequence from={f(4)} durationInFrames={f(10)}>
        <Video src="./footage/shot-02-kitchen.mp4" />
      </Sequence>

      {/* ── Scene 3: OiMy first message (0:14–0:22) */}
      <Sequence from={f(14)} durationInFrames={f(8)}>
        <Video src="./footage/shot-03-maya-phone.mp4" />
        <AmberPulse startFrame={0} />
        <PhoneOverlay startFrame={6}>
          <MessageBubble
            from="oimy"
            text="School pickup at 2:30 today. Want me to remind you at 2:10? 🌿"
            startFrame={8}
          />
        </PhoneOverlay>
      </Sequence>

      {/* ── Scene 4: Dad at work (0:22–0:34) */}
      <Sequence from={f(22)} durationInFrames={f(12)}>
        <Video src="./footage/shot-04-dad-office.mp4" />
        <PhoneOverlay startFrame={4}>
          <MessageBubble from="user" text="Did Dad take his pills today?" startFrame={6} />
          <MessageBubble
            from="oimy"
            text="Yes ✓ — marked at 9:15am. He also asked me to tell you: "I'm feeling good today.""
            startFrame={18}
          />
        </PhoneOverlay>
      </Sequence>

      {/* ── Scene 5: The meltdown (0:34–0:46) */}
      <Sequence from={f(34)} durationInFrames={f(12)}>
        <Video src="./footage/shot-05-meltdown.mp4" />
        <PhoneOverlay startFrame={4}>
          <MessageBubble from="user" text="she won't stop crying and I don't know what to do" startFrame={6} width={240} />
          <MessageBubble
            from="oimy"
            text="That sounds really exhausting. You're doing great, even when it doesn't feel like it. Is this a hunger cry, or overtired? — Last Tuesday she calmed down with music. Want me to start it?"
            startFrame={22}
          />
        </PhoneOverlay>
      </Sequence>

      {/* ── Scene 6: Evening dinner (0:46–0:58) */}
      <Sequence from={f(46)} durationInFrames={f(12)}>
        <Video src="./footage/shot-06-dinner.mp4" />
        <HandwrittenCaption text="Dinner happened." startFrame={f(10) - f(46)} />
      </Sequence>

      {/* ── Scene 7: Night / couch (0:58–1:06) */}
      <Sequence from={f(58)} durationInFrames={f(8)}>
        <Video src="./footage/shot-07-night.mp4" />
        <PhoneOverlay startFrame={4}>
          <MessageBubble
            from="oimy"
            text="Tomorrow: Aanya's school project is due. Dentist at 9. I'll remind you in the morning. Rest up. 🌙"
            startFrame={6}
          />
        </PhoneOverlay>
      </Sequence>

      {/* ── Scene 8: Logo close (1:06–1:15) */}
      <Sequence from={f(66)} durationInFrames={f(9)}>
        <LogoClose />
      </Sequence>

      {/* ── Audio: voiceover */}
      <Audio src="./audio/voiceover.mp3" />
      <Audio src="./audio/score.mp3" volume={0.55} />

    </AbsoluteFill>
  );
}

// ── Register composition in Root.tsx ────────────────────
// <Composition
//   id="OiMyExplainer"
//   component={OiMyExplainer}
//   durationInFrames={75 * 30}  // 75 seconds at 30fps
//   fps={30}
//   width={1080}   // 9:16 primary
//   height={1920}
// />