// phone.jsx — cinematic phone mockup for the Scam Protect story.
// One <Phone> frame + screen states driven by `t` (seconds within the call scene).
// Relies on T, Shield, Check, WarnTri, Dot (theme.jsx).

function PhoneFrame({ children, glow = 'none', tilt = 0, lift = 0 }) {
  const W = 384, H = 812;
  return (
    <div style={{
      width: W, height: H, position: 'relative',
      transform: `rotateX(6deg) rotateZ(${tilt}deg) translateY(${lift}px)`,
      transformStyle: 'preserve-3d',
    }}>
      {/* device body */}
      <div style={{
        position: 'absolute', inset: 0, borderRadius: 56,
        background: 'linear-gradient(150deg, #2B2620, #16130F)',
        padding: 13,
        boxShadow: `0 60px 120px -30px rgba(0,0,0,0.75), 0 12px 40px -10px rgba(0,0,0,0.6)${glow !== 'none' ? `, 0 0 0 2px ${glow}, 0 0 70px ${glow}88` : ''}`,
      }}>
        {/* screen */}
        <div style={{ position: 'absolute', inset: 13, borderRadius: 44, overflow: 'hidden', background: '#000' }}>
          {children}
          {/* dynamic island */}
          <div style={{ position: 'absolute', top: 14, left: '50%', transform: 'translateX(-50%)', width: 112, height: 33, borderRadius: 20, background: '#000', zIndex: 30 }} />
        </div>
      </div>
    </div>
  );
}

function StatusBar({ dark = false }) {
  const c = dark ? '#fff' : T.ink;
  return (
    <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 56, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 30px', zIndex: 25, paddingTop: 6 }}>
      <span style={{ fontFamily: T.display, fontWeight: 700, fontSize: 16, color: c }}>9:47</span>
      <div style={{ display: 'flex', gap: 7, alignItems: 'center' }}>
        {[3, 5, 7, 9].map((h, i) => <span key={i} style={{ width: 4, height: h + 2, borderRadius: 1, background: c, opacity: 0.9 }} />)}
        <span style={{ width: 22, height: 12, borderRadius: 3, border: `1.5px solid ${c}`, opacity: 0.9, marginLeft: 3, position: 'relative' }}>
          <span style={{ position: 'absolute', inset: 1.5, width: '70%', background: c, borderRadius: 1 }} />
        </span>
      </div>
    </div>
  );
}

// ── Incoming call screen ─────────────────────────────────────────────────────
function CallScreen({ t }) {
  const ring = 1 + 0.04 * Math.sin(t * 7);
  const ans = clamp((t - 3.2) / 0.4, 0, 1); // answered state
  return (
    <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, #1B2A2F, #0E1719)' }}>
      <StatusBar dark />
      <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', paddingTop: 128 }}>
        <div style={{ fontFamily: T.display, fontSize: 17, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.02em' }}>
          {ans > 0.5 ? 'call in progress…' : 'incoming call'}
        </div>
        <div style={{ position: 'relative', marginTop: 30, marginBottom: 18 }}>
          <div style={{ position: 'absolute', inset: -14, borderRadius: '50%', border: '2px solid rgba(207,75,51,0.4)', transform: `scale(${ring})`, opacity: ans > 0.5 ? 0 : 1 }} />
          <div style={{ width: 116, height: 116, borderRadius: '50%', background: 'linear-gradient(150deg,#2E3B40,#1A2427)', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid rgba(255,255,255,0.08)' }}>
            <span style={{ fontFamily: T.display, fontWeight: 700, fontSize: 44, color: 'rgba(255,255,255,0.85)' }}>🏦</span>
          </div>
        </div>
        <div style={{ fontFamily: T.display, fontWeight: 800, fontSize: 26, color: '#fff', letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>YourBank Security</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginTop: 10, fontFamily: T.mono, fontSize: 13, color: 'rgba(255,255,255,0.5)', whiteSpace: 'nowrap' }}>
          <span style={{ width: 13, height: 13, borderRadius: 3, background: '#3B7DD8', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 9 }}>✓</span>
          Caller ID · Fraud Dept
        </div>

        {/* answer / decline */}
        <div style={{ position: 'absolute', bottom: 70, left: 0, right: 0, display: 'flex', justifyContent: 'center', gap: 80 }}>
          {[['#CF4B33', '✕', 'decline'], [T.safe, '✆', 'accept']].map(([c, g, l], i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, opacity: i === 1 ? 1 - ans : 1 }}>
              <div style={{ width: 70, height: 70, borderRadius: '50%', background: c, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 30, color: '#fff', transform: i === 1 ? `scale(${ring})` : 'none' }}>{g}</div>
              <span style={{ fontFamily: T.display, fontSize: 14, color: 'rgba(255,255,255,0.6)' }}>{l}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── Scam transcript + transfer request screen ────────────────────────────────
const SCRIPT = [
  { who: 'them', t: 'This is YourBank Fraud Prevention. We\u2019ve detected unauthorized charges on your account.' },
  { who: 'them', t: 'To secure your money, transfer your balance to the safe account we\u2019ve set up — right now.' },
  { who: 'them', t: 'Do not hang up. Confirm the transfer of $8,740 to complete verification.' },
];

function TransferScreen({ t }) {
  return (
    <div style={{ position: 'absolute', inset: 0, background: T.bg }}>
      <StatusBar />
      {/* call banner */}
      <div style={{ position: 'absolute', top: 56, left: 0, right: 0, height: 46, background: '#1B2A2F', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, zIndex: 20 }}>
        <Dot size={7} color={T.threat} glow />
        <span style={{ fontFamily: T.mono, fontSize: 13, color: 'rgba(255,255,255,0.85)' }}>YourBank Security · {String(Math.floor(2 + t)).padStart(2, '0')}:{String(Math.floor((t * 60) % 60)).padStart(2, '0')}</span>
      </div>

      <div style={{ position: 'absolute', top: 118, left: 0, right: 0, bottom: 0, padding: '16px 18px', display: 'flex', flexDirection: 'column', gap: 12, overflow: 'hidden' }}>
        {/* scam bubbles */}
        {SCRIPT.map((m, i) => {
          const p = Easing.easeOutCubic(clamp((t - (0.5 + i * 1.5)) / 0.5, 0, 1));
          return (
            <div key={i} style={{ alignSelf: 'flex-start', maxWidth: '88%', background: T.surface, border: `1px solid ${T.line}`, borderRadius: '4px 16px 16px 16px', padding: '12px 15px', opacity: p, transform: `translateY(${(1 - p) * 12}px)`, boxShadow: '0 4px 14px -8px rgba(40,34,26,0.3)' }}>
              <div style={{ fontFamily: T.display, fontSize: 15.5, color: T.ink, lineHeight: 1.4 }}>{m.t}</div>
            </div>
          );
        })}

        {/* transfer card slides up */}
        {(() => {
          const p = Easing.easeOutCubic(clamp((t - 5.0) / 0.6, 0, 1));
          if (p <= 0.01) return null;
          return (
            <div style={{ marginTop: 'auto', background: T.surface, borderRadius: 20, border: `1px solid ${T.line}`, padding: '20px 20px 22px', opacity: p, transform: `translateY(${(1 - p) * 30}px)`, boxShadow: '0 20px 50px -24px rgba(40,34,26,0.5)' }}>
              <div style={{ fontFamily: T.mono, fontSize: 11.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: T.muted, marginBottom: 14 }}>Confirm transfer</div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
                <span style={{ fontFamily: T.display, fontSize: 15, color: T.inkSoft }}>To</span>
                <span style={{ fontFamily: T.mono, fontSize: 14, color: T.ink }}>SAFE ACCT ••4471</span>
              </div>
              <div style={{ height: 1, background: T.lineSoft, margin: '6px 0 12px' }} />
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontFamily: T.display, fontSize: 15, color: T.inkSoft }}>Amount</span>
                <span style={{ fontFamily: T.display, fontWeight: 800, fontSize: 34, color: T.ink, letterSpacing: '-0.02em' }}>$8,740.00</span>
              </div>
              <ConfirmButton t={t} />
            </div>
          );
        })()}
      </div>
    </div>
  );
}

function ConfirmButton({ t }) {
  // pulse urgency; thumb approaches near the end (handled by caller overlay)
  const pulse = 1 + 0.025 * Math.sin(t * 5);
  return (
    <div style={{ marginTop: 18, height: 56, borderRadius: 14, background: T.threat, display: 'flex', alignItems: 'center', justifyContent: 'center', transform: `scale(${pulse})`, boxShadow: '0 10px 24px -10px rgba(207,75,51,0.7)' }}>
      <span style={{ fontFamily: T.display, fontWeight: 700, fontSize: 18, color: '#fff', letterSpacing: '0.01em' }}>Confirm transfer now</span>
    </div>
  );
}

// ── Scam Protect intercept overlay (on top of the phone screen) ──────────────
function InterceptOverlay({ t }) {
  // t = seconds since intercept began
  const sheet = Easing.easeOutCubic(clamp(t / 0.5, 0, 1));
  const dim = clamp(t / 0.35, 0, 1);
  const checkP = clamp((t - 0.6) / 0.5, 0, 1);
  const flash = t < 0.45 ? (1 - t / 0.45) : 0;
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 40 }}>
      <div style={{ position: 'absolute', inset: 0, background: `rgba(15,11,8,${0.55 * dim})` }} />
      {/* red alert flash */}
      <div style={{ position: 'absolute', inset: 0, background: T.threat, opacity: flash * 0.5 }} />
      {/* bottom sheet card */}
      <div style={{ position: 'absolute', left: 14, right: 14, bottom: 18, background: T.surface, borderRadius: 26, overflow: 'hidden', transform: `translateY(${(1 - sheet) * 120}%)`, boxShadow: '0 -10px 50px -10px rgba(0,0,0,0.5)' }}>
        <div style={{ height: 6, background: T.brand }} />
        <div style={{ padding: '24px 24px 28px', textAlign: 'center' }}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 16 }}>
            <Shield size={66} fill={T.brand}><Check size={34} color="#fff" weight={2.8} progress={checkP} /></Shield>
          </div>
          <div style={{ fontFamily: T.mono, fontSize: 12.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: T.brand, fontWeight: 600, marginBottom: 8 }}>Scam Protect</div>
          <div style={{ fontFamily: T.display, fontWeight: 800, fontSize: 27, color: T.ink, letterSpacing: '-0.02em', lineHeight: 1.12, marginBottom: 10 }}>Fraudulent transfer blocked</div>
          <div style={{ fontFamily: T.display, fontSize: 16, color: T.inkSoft, lineHeight: 1.45, marginBottom: 18 }}>
            This "bank" is a known scam number. We stopped the $8,740 transfer before it left your account.
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
            <div style={{ height: 52, borderRadius: 13, background: T.brand, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: T.display, fontWeight: 700, fontSize: 17, color: '#fff' }}>
              Keep my money safe
            </div>
            <div style={{ height: 48, borderRadius: 13, background: T.panel, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: T.display, fontWeight: 600, fontSize: 15, color: T.inkSoft }}>
              Report &amp; block caller
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Finger (realistic, approaches/presses the confirm button) ────────────────
function Thumb({ x, y, press = 0 }) {
  return (
    <div style={{ position: 'absolute', left: x, top: y, zIndex: 35, transform: `translate(-46%, -6%) rotate(${-21 + press * 2}deg) scale(${1 - press * 0.05})`, transformOrigin: 'top center', pointerEvents: 'none' }}>
      {/* contact shadow on the screen */}
      <div style={{ position: 'absolute', top: -14, left: '50%', width: 96, height: 34, transform: 'translateX(-50%)', background: `rgba(35,18,8,${0.16 + press * 0.26})`, filter: 'blur(11px)', borderRadius: '50%' }} />
      {/* finger body */}
      <div style={{
        position: 'relative', width: 118, height: 322,
        borderRadius: '60px 60px 50px 50px',
        background: 'linear-gradient(100deg, #B07C5B 0%, #D7A581 20%, #F1D2B6 47%, #E3B695 66%, #AC7757 100%)',
        boxShadow: 'inset 0 -34px 54px rgba(120,70,45,0.38), inset 0 16px 30px rgba(255,240,225,0.55), 0 20px 32px -14px rgba(0,0,0,0.45)',
        overflow: 'hidden',
      }}>
        {/* fingertip highlight */}
        <div style={{ position: 'absolute', top: 14, left: '50%', width: 78, height: 100, transform: 'translateX(-50%)', background: 'radial-gradient(closest-side, rgba(255,247,237,0.85), rgba(255,247,237,0))', borderRadius: '50%' }} />
        {/* fingernail */}
        <div style={{ position: 'absolute', top: 30, left: '50%', width: 60, height: 80, transform: 'translateX(-50%)', borderRadius: '48% 48% 46% 46%', background: 'linear-gradient(140deg, #F7E4D7 0%, #ECCBB7 60%, #DFB89F 100%)', boxShadow: 'inset 2px 3px 6px rgba(255,255,255,0.75), inset -2px -4px 7px rgba(150,100,75,0.4)' }}>
          <div style={{ position: 'absolute', top: 9, left: 11, width: 22, height: 36, borderRadius: '50%', background: 'linear-gradient(140deg, rgba(255,255,255,0.75), rgba(255,255,255,0))' }} />
          <div style={{ position: 'absolute', bottom: 7, left: '50%', width: 34, height: 14, transform: 'translateX(-50%)', borderRadius: '50%', background: 'rgba(255,251,246,0.55)' }} />
        </div>
        {/* knuckle creases */}
        <div style={{ position: 'absolute', bottom: 74, left: 16, right: 16, height: 11, borderRadius: '50%', background: 'rgba(120,75,50,0.16)' }} />
        <div style={{ position: 'absolute', bottom: 50, left: 20, right: 20, height: 9, borderRadius: '50%', background: 'rgba(120,75,50,0.12)' }} />
        {/* side shading for roundness */}
        <div style={{ position: 'absolute', inset: 0, borderRadius: '60px 60px 50px 50px', boxShadow: 'inset 20px 0 30px rgba(120,70,45,0.25), inset -20px 0 30px rgba(120,70,45,0.3)' }} />
      </div>
    </div>
  );
}

Object.assign(window, { PhoneFrame, StatusBar, CallScreen, TransferScreen, InterceptOverlay, Thumb });