// Variant A — Faithful Refined (true to source image)
// DATA119-style: dark header, red/green/cyan accents, 3-tab switcher, PTT hold

const PHONE_W = 390;
const PHONE_H = 844;

function TeamPin({ t, lang, dark = true, animate = false, tick = 0 }) {
  // animate: small random drift using tick
  const drift = animate ? {
    x: Math.sin((tick / 600) + t.id.length) * 1.2,
    y: Math.cos((tick / 700) + t.id.length * 2) * 1.2,
  } : { x: 0, y: 0 };
  const label = lang === 'en' ? t.labelEn : t.label;
  const isDrone = t.kind === 'drone';
  const isCmd = t.kind === 'cmd';
  return (
    <div style={{
      position: 'absolute',
      left: `calc(${t.x + drift.x}% - 14px)`,
      top: `calc(${t.y + drift.y}% - 14px)`,
      transition: 'left 600ms linear, top 600ms linear',
    }}>
      <div style={{
        width: 28, height: 28, borderRadius: 999,
        background: t.color,
        border: `2px solid ${dark ? '#0D1116' : '#fff'}`,
        boxShadow: `0 0 0 2px ${t.color}44, 0 2px 6px rgba(0,0,0,0.5)`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 11,
        color: isCmd ? '#0D1116' : '#fff',
      }}>
        {isDrone ? '◈' : isCmd ? '★' : label.replace(/[^0-9]/g, '') || '•'}
      </div>
      <div style={{
        position: 'absolute', top: 30, left: '50%', transform: 'translateX(-50%)',
        background: dark ? 'rgba(13,17,22,0.85)' : 'rgba(255,255,255,0.92)',
        color: dark ? '#E6ECF2' : '#0D1116',
        fontFamily: 'Inter, sans-serif', fontSize: 9, fontWeight: 600,
        padding: '2px 5px', borderRadius: 2, whiteSpace: 'nowrap',
        border: dark ? '1px solid #222A33' : '1px solid #D7DCE2',
      }}>
        {label}
      </div>
    </div>
  );
}

function FireMarker({ pulse = true }) {
  return (
    <div style={{
      position: 'absolute', left: `calc(${FIRE_MARKER.x}% - 18px)`, top: `calc(${FIRE_MARKER.y}% - 18px)`,
      width: 36, height: 36, display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      {pulse && (
        <span style={{
          position: 'absolute', inset: 0, borderRadius: 999,
          border: '2px solid #FF6B2C', animation: 'pulseRing 1.8s ease-out infinite',
        }} />
      )}
      <div style={{
        width: 24, height: 24, borderRadius: 6,
        background: '#FF3B2F',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: '#fff', fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 13,
        boxShadow: '0 0 12px rgba(255,107,44,0.75), 0 2px 4px rgba(0,0,0,0.5)',
        border: '2px solid #0D1116',
      }}>
        🔥
      </div>
    </div>
  );
}

// App header (DATA119 style)
function AppHeader({ lang, time, accent = '#22D3EE' }) {
  const s = STRINGS[lang];
  return (
    <div style={{
      background: '#0D1116',
      padding: '10px 16px 12px',
      borderBottom: '1px solid #1A2028',
      color: '#E6ECF2', fontFamily: 'Inter, sans-serif',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div>
          <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: 1.2, color: '#8A95A5', textTransform: 'uppercase' }}>
            {s.appTitle}
          </div>
          <div style={{ fontSize: 18, fontWeight: 800, letterSpacing: 0.5, marginTop: 1, color: accent, fontFamily: 'JetBrains Mono, monospace' }}>
            {s.appId}
          </div>
        </div>
        <div style={{ textAlign: 'right', fontFamily: 'JetBrains Mono, monospace' }}>
          <div style={{ fontSize: 10, color: '#8A95A5' }}>{fmtDateTime(time, lang)}</div>
          <div style={{ marginTop: 2, fontSize: 9, color: '#FFC64D', display: 'flex', gap: 6, justifyContent: 'flex-end', alignItems: 'center' }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: '#FFC64D', animation: 'pulseDot 1.4s infinite' }} />
            <span>{lang === 'ja' ? '事案発生中' : 'INCIDENT ACTIVE'}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// Tab bar (MAP / 映像 / チャット)
function TabBar({ active, onChange, lang, accent = '#22D3EE' }) {
  const s = STRINGS[lang];
  const tabs = [
    { id: 'map', label: s.map },
    { id: 'video', label: s.video },
    { id: 'chat', label: s.chat },
  ];
  return (
    <div style={{
      display: 'flex', background: '#0D1116', padding: '0 12px 10px',
      gap: 6, borderBottom: '1px solid #1A2028',
    }}>
      {tabs.map(t => {
        const isActive = active === t.id;
        return (
          <button
            key={t.id}
            onClick={() => onChange(t.id)}
            style={{
              flex: 1, padding: '9px 0', border: 'none', cursor: 'pointer',
              background: isActive ? accent : 'transparent',
              color: isActive ? '#0D1116' : '#8A95A5',
              fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 700,
              letterSpacing: 0.5,
              borderRadius: 2,
              border: isActive ? 'none' : '1px solid #222A33',
              transition: 'all 120ms',
            }}
          >
            {t.label}
          </button>
        );
      })}
    </div>
  );
}

// Incident overlay card (shown in video view)
function IncidentOverlay({ lang, elapsed }) {
  const s = STRINGS[lang];
  return (
    <div style={{
      position: 'absolute', right: 8, top: 8,
      background: 'rgba(13,17,22,0.88)', backdropFilter: 'blur(6px)',
      border: '1px solid #222A33', borderRadius: 3, padding: '8px 10px',
      color: '#E6ECF2', fontFamily: 'Inter, sans-serif',
      minWidth: 128,
    }}>
      <div style={{ fontSize: 9, color: '#8A95A5', letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: 4 }}>
        {s.incidentSummary}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: '2px 8px', fontSize: 10 }}>
        <span style={{ color: '#8A95A5' }}>{lang === 'ja' ? '種別' : 'Type'}</span>
        <span style={{ color: '#FF6B2C', fontWeight: 700 }}>{s.incidentType}</span>
        <span style={{ color: '#8A95A5' }}>{lang === 'ja' ? '場所' : 'Loc'}</span>
        <span style={{ color: '#E6ECF2', fontWeight: 600 }}>{s.address}</span>
        <span style={{ color: '#8A95A5' }}>{s.dispatched}</span>
        <span style={{ color: '#E6ECF2', fontWeight: 600 }}>{s.units}</span>
        <span style={{ color: '#8A95A5' }}>{s.elapsed}</span>
        <span style={{ color: '#22D3EE', fontFamily: 'JetBrains Mono, monospace', fontWeight: 700 }}>{fmtElapsed(elapsed)}</span>
      </div>
    </div>
  );
}

// Action buttons row: SOS / PTT / CAMERA
function ActionRow({ lang, pttHold, onPttDown, onPttUp, onSos, onCamera, holding, holdSec, waveSamples, cameraActive, accent = '#22D3EE' }) {
  const s = STRINGS[lang];
  return (
    <div style={{
      background: '#0D1116', padding: '10px 14px 18px',
      borderTop: '1px solid #1A2028',
      display: 'grid', gridTemplateColumns: '88px 1fr 88px', gap: 10, alignItems: 'center',
    }}>
      {/* SOS */}
      <button
        onClick={onSos}
        style={{
          height: 88, borderRadius: 999, border: 'none', cursor: 'pointer',
          background: 'radial-gradient(circle at 30% 25%, #FF6A5F 0%, #E6352A 60%, #B51B13 100%)',
          color: '#fff', fontFamily: 'Inter, sans-serif', fontWeight: 900,
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
          boxShadow: 'inset 0 2px 0 rgba(255,255,255,0.18), 0 4px 12px rgba(255,59,47,0.45), 0 0 0 3px rgba(255,59,47,0.15)',
        }}
      >
        <IconSOS size={22} />
        <span style={{ fontSize: 16, letterSpacing: 1, marginTop: 2 }}>SOS</span>
        <span style={{ fontSize: 8, fontWeight: 600, opacity: 0.85, letterSpacing: 0.4 }}>{lang === 'ja' ? '緊急SOS' : 'EMERGENCY'}</span>
      </button>

      {/* PTT */}
      <button
        onMouseDown={onPttDown}
        onMouseUp={onPttUp}
        onMouseLeave={onPttUp}
        onTouchStart={(e) => { e.preventDefault(); onPttDown(); }}
        onTouchEnd={(e) => { e.preventDefault(); onPttUp(); }}
        style={{
          height: 88, borderRadius: 999, border: 'none', cursor: 'pointer',
          background: holding
            ? 'radial-gradient(circle at 30% 25%, #6FE5A0 0%, #1FB86A 55%, #0E7A44 100%)'
            : 'radial-gradient(circle at 30% 25%, #57CF85 0%, #1F9E5A 60%, #0D6B3C 100%)',
          color: '#fff', fontFamily: 'Inter, sans-serif', fontWeight: 900,
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
          boxShadow: holding
            ? 'inset 0 2px 0 rgba(255,255,255,0.25), 0 0 0 6px rgba(52,211,153,0.25), 0 6px 18px rgba(34,197,94,0.5)'
            : 'inset 0 2px 0 rgba(255,255,255,0.18), 0 4px 12px rgba(34,197,94,0.4)',
          transition: 'box-shadow 160ms, background 160ms',
          userSelect: 'none', touchAction: 'none',
        }}
      >
        {holding ? (
          <>
            <div style={{ width: 54, height: 24 }}>
              <Waveform samples={waveSamples} color="#E6FFF2" height={24} bars={16} />
            </div>
            <span style={{ fontSize: 10, marginTop: 2, fontFamily: 'JetBrains Mono, monospace', fontWeight: 700, color: '#E6FFF2' }}>
              {fmtElapsed(Math.floor(holdSec))}
            </span>
          </>
        ) : (
          <>
            <IconMic size={26} />
            <span style={{ fontSize: 16, letterSpacing: 1, marginTop: 2 }}>PTT</span>
            <span style={{ fontSize: 8, fontWeight: 600, opacity: 0.85, letterSpacing: 0.4 }}>
              {lang === 'ja' ? '発話 [長押し]' : 'HOLD TO TALK'}
            </span>
          </>
        )}
      </button>

      {/* CAMERA */}
      <button
        onClick={onCamera}
        style={{
          height: 88, borderRadius: 999, border: 'none', cursor: 'pointer',
          background: cameraActive
            ? 'radial-gradient(circle at 30% 25%, #6FD8FF 0%, #0EA5E9 60%, #086F9E 100%)'
            : 'radial-gradient(circle at 30% 25%, #3D4552 0%, #242B35 60%, #151A22 100%)',
          color: '#fff', fontFamily: 'Inter, sans-serif', fontWeight: 900,
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
          boxShadow: cameraActive
            ? 'inset 0 2px 0 rgba(255,255,255,0.25), 0 4px 12px rgba(14,165,233,0.45)'
            : 'inset 0 2px 0 rgba(255,255,255,0.08), 0 4px 10px rgba(0,0,0,0.5)',
          border: '1px solid #2A3240',
        }}
      >
        <IconCam size={22} />
        <span style={{ fontSize: 11, letterSpacing: 0.4, marginTop: 3, fontWeight: 800 }}>
          {lang === 'ja' ? 'カメラ起動' : 'CAMERA'}
        </span>
        <span style={{ fontSize: 8, fontWeight: 600, opacity: 0.8, letterSpacing: 0.4 }}>
          {lang === 'ja' ? '映像配信' : 'STREAM'}
        </span>
      </button>
    </div>
  );
}

// -------- Screens --------
function MapScreen({ lang, dark, animate }) {
  const s = STRINGS[lang];
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    if (!animate) return;
    let id;
    const loop = () => { setTick(t => t + 16); id = requestAnimationFrame(loop); };
    id = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(id);
  }, [animate]);
  return (
    <div style={{ position: 'relative', flex: 1, overflow: 'hidden', background: '#0D1116' }}>
      <MockMap dark={dark} />
      {/* scale / legend */}
      <div style={{
        position: 'absolute', left: 8, top: 8,
        background: 'rgba(13,17,22,0.8)', border: '1px solid #222A33',
        borderRadius: 2, padding: '4px 7px', color: '#8A95A5',
        fontFamily: 'JetBrains Mono, monospace', fontSize: 9, letterSpacing: 0.4,
      }}>
        {lang === 'ja' ? '縮尺 1:2000' : 'SCALE 1:2000'}
      </div>
      <div style={{
        position: 'absolute', right: 8, top: 8,
        background: 'rgba(13,17,22,0.8)', border: '1px solid #222A33',
        borderRadius: 2, padding: '4px 7px', color: '#22D3EE',
        fontFamily: 'JetBrains Mono, monospace', fontSize: 9, fontWeight: 700,
      }}>
        N ↑
      </div>
      <FireMarker />
      {TEAMS.map(t => <TeamPin key={t.id} t={t} lang={lang} dark={dark} animate={animate} tick={tick} />)}
      {/* zoom controls */}
      <div style={{
        position: 'absolute', right: 8, bottom: 12, display: 'flex', flexDirection: 'column', gap: 4,
      }}>
        {['+', '−'].map(sym => (
          <button key={sym} style={{
            width: 32, height: 32, borderRadius: 2, border: '1px solid #222A33',
            background: 'rgba(13,17,22,0.88)', color: '#E6ECF2',
            fontSize: 16, fontWeight: 700, cursor: 'pointer',
          }}>{sym}</button>
        ))}
      </div>
    </div>
  );
}

function VideoScreen({ lang, elapsed }) {
  return (
    <div style={{ position: 'relative', flex: 1, background: '#060809', overflow: 'hidden' }}>
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%', padding: 0 }}>
        <div style={{ flex: 1, position: 'relative', borderBottom: '2px solid #0D1116' }}>
          <VideoPlaceholder label={STRINGS[lang].squadCam(2)} sub="" tone={0.1} />
          <IncidentOverlay lang={lang} elapsed={elapsed} />
        </div>
        <div style={{ flex: 1, position: 'relative' }}>
          <VideoPlaceholder label={STRINGS[lang].droneCam} tone={0.3} />
        </div>
      </div>
    </div>
  );
}

function ChatScreen({ lang }) {
  const s = STRINGS[lang];
  const [messages, setMessages] = React.useState(s.chatMessages);
  React.useEffect(() => { setMessages(s.chatMessages); }, [lang]);

  // periodically add a new message
  React.useEffect(() => {
    const newMsg = lang === 'ja'
      ? [
          { from: '第1小隊', text: '北側階段、煙多し。進入可能。' },
          { from: '指揮隊', text: '了解。換気開始を依頼。' },
          { from: '第2小隊', text: '要救助者1名確認。搬送準備。' },
        ]
      : [
          { from: 'Squad 1', text: 'North stairwell heavy smoke. Entry ok.' },
          { from: 'Command', text: 'Copy. Begin ventilation.' },
          { from: 'Squad 2', text: '1 victim located. Prep transport.' },
        ];
    let idx = 0;
    const id = setInterval(() => {
      if (idx >= newMsg.length) return;
      const d = new Date();
      const t = `${pad(d.getHours())}:${pad(d.getMinutes())}`;
      setMessages(prev => [...prev, { t, ...newMsg[idx] }]);
      idx++;
    }, 6000);
    return () => clearInterval(id);
  }, [lang]);

  return (
    <div style={{
      flex: 1, background: '#0D1116', padding: '12px 14px', overflowY: 'auto',
      display: 'flex', flexDirection: 'column', gap: 10,
      fontFamily: 'Inter, sans-serif',
    }}>
      {messages.map((m, i) => (
        <div key={i}>
          <div style={{ fontSize: 10, color: '#8A95A5', marginBottom: 3, fontFamily: 'JetBrains Mono, monospace' }}>
            [{m.t}] {m.from}
          </div>
          <div style={{
            background: m.from === (lang === 'ja' ? '指揮隊' : 'Command') ? '#1E2A3A' : '#171E27',
            color: '#E6ECF2',
            border: '1px solid #222A33',
            padding: '8px 10px', borderRadius: 3, fontSize: 12, lineHeight: 1.5, whiteSpace: 'pre-line',
          }}>
            {m.text}
          </div>
        </div>
      ))}
      <div style={{ height: 2 }} />
    </div>
  );
}

// -------- SOS modal --------
function SosModal({ lang, step, onCancel, onConfirm }) {
  const s = STRINGS[lang];
  if (step === 'idle') return null;
  return (
    <div style={{
      position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.75)',
      backdropFilter: 'blur(4px)', zIndex: 10,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 20, animation: 'fadeIn 160ms',
    }}>
      <div style={{
        width: '100%', background: '#1A1015', border: '1px solid #8A2520', borderRadius: 4,
        padding: 18, color: '#fff', fontFamily: 'Inter, sans-serif',
        boxShadow: '0 10px 40px rgba(0,0,0,0.6)',
      }}>
        {step === 'confirm' && (
          <>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 40, height: 40, borderRadius: 999, background: '#EF4444', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <IconSOS size={22} color="#fff" />
              </div>
              <div>
                <div style={{ fontSize: 11, color: '#FCA5A5', fontWeight: 700, letterSpacing: 0.6 }}>
                  {lang === 'ja' ? '緊急警報' : 'EMERGENCY ALERT'}
                </div>
                <div style={{ fontSize: 15, fontWeight: 800 }}>{s.sosConfirm}</div>
              </div>
            </div>
            <p style={{ fontSize: 11, color: '#E5B4B0', lineHeight: 1.5, margin: '12px 0 16px' }}>
              {lang === 'ja'
                ? '他隊および指揮隊に緊急事態を通知します。位置情報とカメラ映像が自動送信されます。'
                : 'Alerts all units and command. Your GPS and camera feed will be transmitted automatically.'}
            </p>
            <div style={{ display: 'flex', gap: 8 }}>
              <button onClick={onCancel} style={{
                flex: 1, height: 38, borderRadius: 2, border: '1px solid #3A2528', background: '#241518',
                color: '#E6ECF2', fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 13, cursor: 'pointer',
              }}>{s.cancel}</button>
              <button onClick={onConfirm} style={{
                flex: 1.3, height: 38, borderRadius: 2, border: 'none', background: '#EF4444',
                color: '#fff', fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 13, cursor: 'pointer',
                letterSpacing: 0.5,
              }}>{s.send}</button>
            </div>
          </>
        )}
        {step === 'sending' && (
          <div style={{ textAlign: 'center', padding: '10px 0' }}>
            <div style={{ width: 56, height: 56, margin: '0 auto 12px', borderRadius: 999, background: '#EF4444', display: 'flex', alignItems: 'center', justifyContent: 'center', animation: 'pulseRing2 1s ease-out infinite' }}>
              <IconSOS size={28} color="#fff" />
            </div>
            <div style={{ fontSize: 15, fontWeight: 800, color: '#fff' }}>{s.sosSent}</div>
            <div style={{ fontSize: 11, color: '#FCA5A5', marginTop: 6, fontFamily: 'JetBrains Mono, monospace' }}>
              TRANSMITTING… {new Date().toISOString().slice(11, 19)}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// -------- PhoneA root --------
function PhoneA({ lang = 'ja', theme = 'dark', animate = true, initialTab = 'map', width = PHONE_W, height = PHONE_H }) {
  const dark = theme === 'dark';
  const [tab, setTab] = React.useState(initialTab);
  const [elapsed, setElapsed] = React.useState(12 * 60 + 34);
  const [cameraActive, setCameraActive] = React.useState(false);
  const [sosStep, setSosStep] = React.useState('idle');
  const now = useClock();
  const { holding, holdSec, waveSamples, begin, end } = usePttHold(true);

  React.useEffect(() => {
    const id = setInterval(() => setElapsed(e => e + 1), 1000);
    return () => clearInterval(id);
  }, []);

  const handleSos = () => setSosStep('confirm');
  const sosConfirm = () => {
    setSosStep('sending');
    setTimeout(() => setSosStep('idle'), 2400);
  };
  const handleCamera = () => {
    setCameraActive(v => !v);
  };

  return (
    <div style={{
      width, height, background: '#000', position: 'relative',
      overflow: 'hidden', display: 'flex', flexDirection: 'column',
      fontFamily: 'Inter, sans-serif',
      borderRadius: 40,
      outline: '1px solid #1A1E24',
    }}>
      <StatusBar color="#E6ECF2" />
      <AppHeader lang={lang} time={now} accent="#22D3EE" />
      <TabBar active={tab} onChange={setTab} lang={lang} accent="#22D3EE" />
      {/* screen */}
      {tab === 'map' && <MapScreen lang={lang} dark={dark} animate={animate} />}
      {tab === 'video' && <VideoScreen lang={lang} elapsed={elapsed} />}
      {tab === 'chat' && <ChatScreen lang={lang} />}

      {/* Camera active banner */}
      {cameraActive && (
        <div style={{
          position: 'absolute', top: 120, left: 12, right: 12,
          background: 'rgba(14,165,233,0.95)', color: '#03192A',
          padding: '8px 12px', borderRadius: 3,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 12, zIndex: 5,
          boxShadow: '0 6px 16px rgba(14,165,233,0.35)',
        }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 8, height: 8, borderRadius: 999, background: '#EF4444', animation: 'pulseDot 1s infinite' }} />
            {STRINGS[lang].youAreLive}
          </span>
          <button onClick={handleCamera} style={{
            border: '1px solid #03192A44', background: 'rgba(255,255,255,0.25)', color: '#03192A',
            padding: '3px 8px', fontSize: 10, fontWeight: 800, borderRadius: 2, cursor: 'pointer',
          }}>{STRINGS[lang].stopStreaming}</button>
        </div>
      )}

      {/* PTT talking indicator (centered top when holding) */}
      {holding && (
        <div style={{
          position: 'absolute', top: 120, left: '50%', transform: 'translateX(-50%)',
          background: 'rgba(34,197,94,0.95)', color: '#042812',
          padding: '6px 14px', borderRadius: 999,
          fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 12, letterSpacing: 0.6,
          boxShadow: '0 0 0 4px rgba(34,197,94,0.25), 0 6px 18px rgba(34,197,94,0.45)',
          zIndex: 5, display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <span style={{ width: 8, height: 8, borderRadius: 999, background: '#EF4444', animation: 'pulseDot 0.8s infinite' }} />
          {STRINGS[lang].talking} · {fmtElapsed(Math.floor(holdSec))}
        </div>
      )}

      <ActionRow
        lang={lang}
        onPttDown={begin} onPttUp={end}
        onSos={handleSos}
        onCamera={handleCamera}
        holding={holding} holdSec={holdSec} waveSamples={waveSamples}
        cameraActive={cameraActive}
      />

      {/* home indicator */}
      <div style={{
        position: 'absolute', bottom: 6, left: '50%', transform: 'translateX(-50%)',
        width: 120, height: 4, background: '#3A424E', borderRadius: 999,
      }} />

      <SosModal lang={lang} step={sosStep} onCancel={() => setSosStep('idle')} onConfirm={sosConfirm} />
    </div>
  );
}

window.PhoneA = PhoneA;
window.PHONE_W = PHONE_W;
window.PHONE_H = PHONE_H;
