// phone.jsx
// Android-style device. The capture button is the PHYSICAL key on the LEFT edge.
// Presentational: the scene drives buttonPress / flash / screenShrink.

const DEVICE = { screenW: 320, screenH: 690, bezel: 13 };
DEVICE.w = DEVICE.screenW + DEVICE.bezel * 2; // 346
DEVICE.h = DEVICE.screenH + DEVICE.bezel * 2; // 716

function Phone({ variant = 'travel', buttonPress = 0, flash = 0, screenShrink = 0, glow = 0 }) {
  const { screenW, screenH, bezel, w, h } = DEVICE;
  const shrink = 1 - screenShrink * 0.07;
  return (
    <div style={{ position: 'relative', width: w, height: h, filter: glow ? `drop-shadow(0 0 ${24 * glow}px rgba(0,122,255,${0.5 * glow}))` : 'none' }}>
      {/* volume rocker (left, upper) */}
      <div style={{ position: 'absolute', left: -2.5, top: h * 0.24, width: 3.5, height: 92, borderRadius: 3, background: 'linear-gradient(90deg,#0b0b0d,#26262b)' }} />
      {/* CAPTURE / power key (left, mid) — the one being pressed */}
      <div style={{
        position: 'absolute', left: -4 + buttonPress * 2.6, top: h * 0.44,
        width: 5, height: 76, borderRadius: 3,
        background: buttonPress > 0.4
          ? 'linear-gradient(90deg,#007aff,#4da3ff)'
          : 'linear-gradient(90deg,#0b0b0d,#34343a)',
        boxShadow: buttonPress > 0.4 ? `0 0 ${14 * buttonPress}px rgba(0,122,255,0.85)` : 'none',
      }} />
      {/* contact ripple at the key when pressed */}
      {buttonPress > 0.3 && (
        <div style={{ position: 'absolute', left: -3, top: h * 0.44 + 38, transform: 'translate(-50%,-50%)', width: 10 + buttonPress * 40, height: 10 + buttonPress * 40, borderRadius: '50%', border: '2px solid rgba(0,122,255,0.6)', opacity: (1 - buttonPress) * 0.9 + 0.1, pointerEvents: 'none' }} />
      )}
      {/* device body */}
      <div style={{
        position: 'absolute', inset: 0, borderRadius: 48,
        background: 'linear-gradient(150deg,#3a3a40,#161618 38%,#1d1d20)',
        padding: bezel,
        boxShadow: '0 2px 4px rgba(0,0,0,0.5), inset 0 0 0 1.5px rgba(255,255,255,0.06)',
      }}>
        {/* screen */}
        <div style={{ position: 'relative', width: screenW, height: screenH, borderRadius: 36, overflow: 'hidden', background: '#000' }}>
          <div style={{ width: '100%', height: '100%', transform: `scale(${shrink})`, transformOrigin: 'center', borderRadius: screenShrink > 0.02 ? 20 : 0, overflow: 'hidden', background: '#000' }}>
            <MockScreen variant={variant} />
          </div>
          {/* punch-hole camera */}
          <div style={{ position: 'absolute', top: 13, left: '50%', transform: 'translateX(-50%)', width: 9, height: 9, borderRadius: 5, background: '#000', boxShadow: 'inset 0 0 0 1.5px rgba(255,255,255,0.12)' }} />
          {/* shutter flash */}
          {flash > 0.001 && (
            <div style={{ position: 'absolute', inset: 0, background: '#fff', opacity: flash, pointerEvents: 'none' }} />
          )}
        </div>
      </div>
    </div>
  );
}

// A flat illustrated hand pressing the side key — index finger points right
// toward the phone's left edge. Positioned by the parent; `press` nudges it in.
function PressThumb({ press = 0 }) {
  const skin = '#f1c79c', line = '#d29b6c';
  return (
    <svg width="200" height="150" viewBox="0 0 200 150" fill="none" style={{ transform: `translateX(${press * 9}px)`, filter: 'drop-shadow(-6px 8px 12px rgba(0,0,0,0.38))', display: 'block' }}>
      {/* fist / palm */}
      <rect x="14" y="46" width="104" height="82" rx="26" fill={skin} stroke={line} strokeWidth="2" />
      {/* thumb */}
      <rect x="40" y="30" width="30" height="48" rx="15" fill={skin} stroke={line} strokeWidth="2" transform="rotate(-14 55 54)" />
      {/* curled-finger creases */}
      <path d="M40 70 h70 M40 90 h74 M40 110 h64" stroke={line} strokeWidth="1.4" opacity="0.45" />
      {/* index finger pointing right */}
      <rect x="100" y="60" width="86" height="30" rx="15" fill={skin} stroke={line} strokeWidth="2" />
      <path d="M120 66 q7 9 0 18" stroke={line} strokeWidth="1.4" fill="none" opacity="0.5" />
      {/* nail */}
      <ellipse cx="180" cy="75" rx="4.5" ry="9.5" fill="#fadcc2" />
    </svg>
  );
}

Object.assign(window, { Phone, PressThumb, DEVICE });