// Telepov mobile screens — shared primitives + 13 screens
// Colors pulled from design-system.html (logo-driven navy + lens blue)

const TP = {
  bg: '#05080F',
  bg1: '#0A0F1C',
  bg2: '#10172A',
  bg3: '#1A2340',
  stroke: '#1E2A47',
  stroke2: '#2B3A5E',
  ink: '#E6ECF5',
  inkDim: '#94A3BE',
  inkLow: '#5B6A88',
  brand: '#3B7BE8',
  brand2: '#5FA0FF',
  brandDeep: '#1E3A7B',
  brandInk: '#061122',
  accent: '#00C2FF',
  danger: '#FF4D6D',
  amber: '#FFC24B',
  violet: '#9B7BFF',
  mint: '#2BD9A2',
  font: "'Geist', -apple-system, system-ui, sans-serif",
  mono: "'Geist Mono', ui-monospace, monospace",
};

// ─── Atoms ─────────────────────────────────────────────────────
function Chip({ children, active, color, style = {} }) {
  const c = color || TP.brand2;
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '6px 11px', borderRadius: 99, fontSize: 11,
      fontWeight: 500, letterSpacing: -0.1,
      color: active ? c : TP.inkDim,
      background: active ? `${c}24` : 'rgba(255,255,255,0.03)',
      border: `1px solid ${active ? c + '66' : TP.stroke2}`,
      whiteSpace: 'nowrap',
      ...style,
    }}>{children}</div>
  );
}

function Pin({ size = 48, count, glyph = '', color = TP.brand, pulse, offline, rotate = -45 }) {
  return (
    <div style={{ position: 'relative', width: size, height: size }}>
      {pulse && (
        <div style={{
          position: 'absolute', inset: -10, borderRadius: '50%',
          background: `radial-gradient(circle, ${color}40, transparent 70%)`,
        }} />
      )}
      <div style={{
        width: size, height: size,
        borderRadius: '50% 50% 50% 8px',
        transform: `rotate(${rotate}deg)`,
        background: offline
          ? 'linear-gradient(135deg,#2B3A5E,#18233D)'
          : `linear-gradient(135deg, ${color}, ${TP.brand2})`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: offline
          ? '0 4px 10px rgba(0,0,0,0.4)'
          : `0 6px 18px ${color}66, inset 0 0 0 2px rgba(0,0,0,0.2)`,
      }}>
        <span style={{
          transform: `rotate(${-rotate}deg)`,
          color: '#fff', fontWeight: 700,
          fontSize: count ? size * 0.3 : size * 0.4,
          fontFamily: TP.mono,
        }}>{count || glyph}</span>
      </div>
    </div>
  );
}

function Ava({ initials, size = 36, color = TP.brand, live, style = {} }) {
  return (
    <div style={{
      position: 'relative', width: size, height: size, borderRadius: '50%',
      background: `linear-gradient(135deg, ${color}, ${TP.brand2})`,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      color: '#fff', fontWeight: 700, fontSize: size * 0.36,
      flexShrink: 0, ...style,
    }}>
      {initials}
      {live && (
        <div style={{
          position: 'absolute', bottom: -2, right: -2,
          background: TP.danger, color: '#fff', fontSize: 8,
          padding: '2px 4px', borderRadius: 4, fontWeight: 700,
          fontFamily: TP.mono, letterSpacing: 0.5,
          border: `2px solid ${TP.bg}`,
        }}>LIVE</div>
      )}
    </div>
  );
}

// ─── Google-Maps-style LIGHT map ──────────────────────────────
// Cream land, blue water, green parks, white roads with grey casings,
// yellow motorways, POI pins, neighborhood labels. Single source of
// truth — used everywhere DarkMap() is called (keeps the old name so
// we don't touch callsites).
function DarkMap({ variant = 'A' }) {
  // Deterministic pseudo-random for stable building positions
  const rng = (seed) => { let s = seed; return () => { s = (s*9301+49297) % 233280; return s/233280; }; };
  const r = rng(42);
  const buildings = Array.from({length: 180}).map(() => ({
    x: r()*402, y: r()*874, w: 4 + r()*14, h: 4 + r()*14, op: 0.25 + r()*0.5,
  }));
  const labels = [
    { x: 100, y: 210, t: 'BEYOĞLU', s: 9 },
    { x: 250, y: 150, t: 'ŞİŞLİ', s: 9 },
    { x: 70,  y: 400, t: 'EMİNÖNÜ', s: 9 },
    { x: 330, y: 320, t: 'ÜSKÜDAR', s: 9 },
    { x: 170, y: 570, t: 'KADIKÖY', s: 9 },
    { x: 300, y: 500, t: 'MODA', s: 8 },
    { x: 200, y: 430, t: 'Marmara Sea', s: 9, water: true, italic: true },
    { x: 358, y: 770, t: 'Bosphorus', s: 9, water: true, italic: true },
  ];
  // Google Maps palette
  const LAND = '#F5F1E8';
  const LAND2 = '#EDE6D4';
  const WATER = '#AADAFF';
  const WATER2 = '#9BD0F5';
  const PARK = '#C8E6A0';
  const PARK_DARK = '#B5D78C';
  const BLDG = '#E5DFCD';
  const ROAD_CASE = '#D4CDB8';
  const ROAD = '#FFFFFF';
  const ROAD_SEC = '#FAF4E2';
  const MOTOR = '#FFD066';
  const MOTOR_CASE = '#E8A93D';
  const LABEL = '#5A5A5A';
  const LABEL_WATER = '#4A7FAB';
  const LABEL_STREET = '#8A8068';

  return (
    <svg viewBox="0 0 402 874" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"
         style={{ position: 'absolute', inset: 0, display: 'block', background: LAND }}>
      {/* land base */}
      <rect width="402" height="874" fill={LAND}/>

      {/* ── WATER (Marmara south + Bosphorus east) ─────────── */}
      <path d="M-20 470 Q40 460 100 475 Q160 492 220 500 Q260 506 260 540 L260 900 L-20 900 Z" fill={WATER}/>
      <path d="M260 0 Q268 80 278 180 Q292 260 306 340 Q322 420 334 500 Q350 580 362 660 Q372 740 378 820 L420 830 L420 0 Z" fill={WATER}/>
      <path d="M260 540 Q300 548 340 556 Q376 564 402 572 L402 900 L260 900 Z" fill={WATER}/>
      {/* water highlight */}
      <path d="M-20 475 Q60 468 140 482 Q200 492 260 500" fill="none" stroke={WATER2} strokeWidth="1" opacity="0.6"/>
      <path d="M268 100 Q282 220 300 340 Q318 440 332 540" fill="none" stroke={WATER2} strokeWidth="1" opacity="0.6"/>

      {/* ── PARKS ───────────────────────────────────────── */}
      <g fill={PARK}>
        <path d="M338 56 Q382 42 398 82 Q402 140 360 170 Q320 176 318 130 Z"/>
        <path d="M48 300 Q92 290 112 332 Q106 362 58 370 Q28 356 48 300 Z"/>
        <path d="M208 80 Q242 72 262 102 Q254 134 216 134 Z"/>
        <path d="M150 380 Q180 372 196 398 Q186 420 154 418 Z"/>
      </g>
      <g fill={PARK_DARK} opacity="0.55">
        <circle cx="360" cy="100" r="3"/><circle cx="350" cy="130" r="2.5"/><circle cx="378" cy="125" r="3"/>
        <circle cx="70" cy="322" r="3"/><circle cx="88" cy="340" r="2.5"/><circle cx="60" cy="352" r="2.5"/>
      </g>

      {/* ── BUILDINGS (faint footprints on land) ──────── */}
      <g fill={BLDG}>
        {buildings.map((b, i) => {
          const inWater =
            (b.x < 260 && b.y > 472) ||
            (b.x > 260 && b.y > 540) ||
            (b.x > 268 && b.y < 470);
          if (inWater) return null;
          return <rect key={i} x={b.x} y={b.y} width={b.w} height={b.h} rx="0.5"/>;
        })}
      </g>

      {/* ── ROADS ─────────────────────────────────────── */}
      {/* residential — thin white with subtle casing */}
      <g stroke={ROAD_CASE} strokeWidth="1.6" fill="none" strokeLinecap="round">
        <path d="M0 140 H258"/><path d="M0 170 H250"/><path d="M0 200 H258"/>
        <path d="M0 240 H252"/><path d="M0 270 H258"/><path d="M0 300 H248"/>
        <path d="M0 340 H256"/><path d="M0 370 H252"/><path d="M0 410 H256"/>
        <path d="M280 60 H402"/><path d="M280 90 H402"/><path d="M280 130 H402"/>
        <path d="M280 170 H402"/><path d="M280 210 H402"/><path d="M280 250 H402"/>
        <path d="M280 580 H402"/><path d="M280 620 H402"/><path d="M280 660 H402"/>
        <path d="M30 0 V460"/><path d="M70 0 V460"/><path d="M110 0 V460"/>
        <path d="M150 0 V460"/><path d="M190 0 V460"/><path d="M230 0 V460"/>
        <path d="M290 0 V340"/><path d="M320 0 V340"/><path d="M360 0 V340"/>
        <path d="M290 560 V874"/><path d="M320 560 V874"/><path d="M360 560 V874"/>
      </g>
      <g stroke={ROAD} strokeWidth="1" fill="none" strokeLinecap="round">
        <path d="M0 140 H258"/><path d="M0 170 H250"/><path d="M0 200 H258"/>
        <path d="M0 240 H252"/><path d="M0 270 H258"/><path d="M0 300 H248"/>
        <path d="M0 340 H256"/><path d="M0 370 H252"/><path d="M0 410 H256"/>
        <path d="M280 60 H402"/><path d="M280 90 H402"/><path d="M280 130 H402"/>
        <path d="M280 170 H402"/><path d="M280 210 H402"/><path d="M280 250 H402"/>
        <path d="M280 580 H402"/><path d="M280 620 H402"/><path d="M280 660 H402"/>
        <path d="M30 0 V460"/><path d="M70 0 V460"/><path d="M110 0 V460"/>
        <path d="M150 0 V460"/><path d="M190 0 V460"/><path d="M230 0 V460"/>
        <path d="M290 0 V340"/><path d="M320 0 V340"/><path d="M360 0 V340"/>
        <path d="M290 560 V874"/><path d="M320 560 V874"/><path d="M360 560 V874"/>
      </g>

      {/* secondary */}
      <g stroke={ROAD_CASE} strokeWidth="3" fill="none" strokeLinecap="round">
        <path d="M0 220 Q80 218 140 230 Q200 242 258 236"/>
        <path d="M0 380 Q80 388 150 384 Q210 380 256 394"/>
        <path d="M90 0 Q92 120 100 240 Q110 360 120 460"/>
        <path d="M210 0 Q212 100 222 220 Q228 340 240 460"/>
        <path d="M280 120 Q320 118 360 130 Q400 140 402 150"/>
        <path d="M280 300 Q340 320 380 340 Q402 350 402 360"/>
        <path d="M300 560 Q310 680 330 800 Q340 860 350 874"/>
      </g>
      <g stroke={ROAD_SEC} strokeWidth="2.2" fill="none" strokeLinecap="round">
        <path d="M0 220 Q80 218 140 230 Q200 242 258 236"/>
        <path d="M0 380 Q80 388 150 384 Q210 380 256 394"/>
        <path d="M90 0 Q92 120 100 240 Q110 360 120 460"/>
        <path d="M210 0 Q212 100 222 220 Q228 340 240 460"/>
        <path d="M280 120 Q320 118 360 130 Q400 140 402 150"/>
        <path d="M280 300 Q340 320 380 340 Q402 350 402 360"/>
        <path d="M300 560 Q310 680 330 800 Q340 860 350 874"/>
      </g>

      {/* primary — white with darker casing */}
      <g stroke={ROAD_CASE} strokeWidth="5" fill="none" strokeLinecap="round">
        <path d="M0 110 Q100 100 170 120 Q220 140 258 132"/>
        <path d="M50 0 Q60 100 74 200 Q90 310 110 420 Q130 460 160 460"/>
        <path d="M170 0 Q172 80 180 180 Q188 300 200 420"/>
        <path d="M280 80 Q330 70 380 90 Q402 100 402 110"/>
        <path d="M340 560 Q360 680 380 800 Q390 860 402 874"/>
      </g>
      <g stroke={ROAD} strokeWidth="3.4" fill="none" strokeLinecap="round">
        <path d="M0 110 Q100 100 170 120 Q220 140 258 132"/>
        <path d="M50 0 Q60 100 74 200 Q90 310 110 420 Q130 460 160 460"/>
        <path d="M170 0 Q172 80 180 180 Q188 300 200 420"/>
        <path d="M280 80 Q330 70 380 90 Q402 100 402 110"/>
        <path d="M340 560 Q360 680 380 800 Q390 860 402 874"/>
      </g>

      {/* motorway — yellow with orange casing */}
      <g stroke={MOTOR_CASE} strokeWidth="7" fill="none" strokeLinecap="round">
        <path d="M-10 260 Q80 250 160 265 Q230 280 258 278"/>
        <path d="M280 180 Q340 200 380 220 Q402 230 402 240"/>
      </g>
      <g stroke={MOTOR} strokeWidth="4.6" fill="none" strokeLinecap="round">
        <path d="M-10 260 Q80 250 160 265 Q230 280 258 278"/>
        <path d="M280 180 Q340 200 380 220 Q402 230 402 240"/>
      </g>

      {/* bridge across Bosphorus */}
      <g stroke={ROAD_CASE} strokeWidth="4" fill="none" strokeLinecap="round">
        <path d="M240 290 Q270 286 300 292"/>
      </g>
      <g stroke={ROAD} strokeWidth="2.4" fill="none" strokeLinecap="round">
        <path d="M240 290 Q270 286 300 292"/>
      </g>

      {/* rail */}
      <g stroke="#9A9A9A" strokeWidth="0.9" fill="none" strokeDasharray="3 2" opacity="0.7">
        <path d="M0 330 Q80 332 150 328 Q210 324 258 330"/>
      </g>

      {/* ferry */}
      <g stroke={LABEL_WATER} strokeWidth="0.8" fill="none" strokeDasharray="1 4" opacity="0.6">
        <path d="M150 500 Q200 540 260 560"/>
        <path d="M240 520 Q300 560 340 620"/>
      </g>

      {/* POI dots */}
      <g>
        {[
          { x: 176, y: 260, c: '#2E7D32' },
          { x: 298, y: 140, c: '#1565C0' },
          { x: 80, y: 362, c: '#D84315' },
          { x: 220, y: 192, c: '#6A1B9A' },
        ].map((p, i) => (
          <g key={i}>
            <circle cx={p.x} cy={p.y} r="3" fill={p.c}/>
            <circle cx={p.x} cy={p.y} r="1.2" fill="#fff"/>
          </g>
        ))}
      </g>

      {/* ── LABELS ─────────────────────────────────── */}
      <g fontFamily="Geist, system-ui" fontWeight="600">
        {labels.map((l, i) => (
          <g key={i}>
            <text x={l.x} y={l.y} fontSize={l.s + 1}
                  fill="#fff" stroke="#fff" strokeWidth="2"
                  textAnchor="middle" opacity="0.9">{l.t}</text>
            <text x={l.x} y={l.y} fontSize={l.s + 1}
                  fill={l.water ? LABEL_WATER : LABEL}
                  fontStyle={l.italic ? 'italic' : 'normal'}
                  textAnchor="middle">{l.t}</text>
          </g>
        ))}
      </g>
      {/* street names */}
      <g fontFamily="Geist, system-ui" fontSize="6.5" fill={LABEL_STREET}>
        <text x="130" y="107" transform="rotate(-4 130 107)">İstiklal Cd.</text>
        <text x="160" y="227" transform="rotate(2 160 227)">Tarlabaşı Blv.</text>
        <text x="350" y="225">Barbaros Blv.</text>
        <text x="100" y="263" transform="rotate(-3 100 263)">TEM Otoyolu</text>
      </g>

      {/* heatmap overlay (variant B only) */}
      {variant === 'B' && (
        <g style={{ mixBlendMode: 'multiply' }}>
          <circle cx="120" cy="200" r="70" fill="#FF6B6B" opacity="0.35"/>
          <circle cx="120" cy="200" r="38" fill="#FF4D6D" opacity="0.5"/>
          <circle cx="200" cy="260" r="55" fill="#FFA94D" opacity="0.35"/>
          <circle cx="300" cy="160" r="50" fill="#FFD43B" opacity="0.4"/>
          <circle cx="340" cy="620" r="60" fill="#FF6B6B" opacity="0.3"/>
          <circle cx="200" cy="660" r="45" fill="#FFA94D" opacity="0.35"/>
        </g>
      )}
    </svg>
  );
}

// ─── Map chrome (compass / scale / attribution) ──────────────
function MapChrome() {
  return (
    <>
      {/* compass */}
      <div style={{ position: 'absolute', top: 160, right: 16, width: 40, height: 40,
        borderRadius: 10, background: '#FFFFFF', boxShadow: '0 2px 6px rgba(0,0,0,0.18)',
        border: '1px solid rgba(0,0,0,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 5 }}>
        <svg width="22" height="22" viewBox="0 0 24 24">
          <polygon points="12,3 15,12 12,10 9,12" fill="#EA4335"/>
          <polygon points="12,21 9,12 12,14 15,12" fill="#5F6368"/>
        </svg>
      </div>
      {/* layers */}
      <div style={{ position: 'absolute', top: 210, right: 16, width: 40, height: 40,
        borderRadius: 10, background: '#FFFFFF', boxShadow: '0 2px 6px rgba(0,0,0,0.18)',
        border: '1px solid rgba(0,0,0,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 5, color: '#5F6368', fontSize: 16 }}>
        ◈
      </div>
      {/* locate me */}
      <div style={{ position: 'absolute', top: 260, right: 16, width: 40, height: 40,
        borderRadius: 10, background: '#FFFFFF', boxShadow: '0 2px 6px rgba(0,0,0,0.18)',
        border: '1px solid rgba(0,0,0,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 5 }}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1A73E8" strokeWidth="2">
          <circle cx="12" cy="12" r="3"/>
          <path d="M12 2v3M12 19v3M2 12h3M19 12h3"/>
        </svg>
      </div>
      {/* scale */}
      <div style={{ position: 'absolute', left: 16, bottom: 320, display: 'flex', flexDirection: 'column', gap: 3, zIndex: 5 }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 0 }}>
          <div style={{ width: 60, height: 3, background: '#202124', opacity: 0.85 }}/>
          <div style={{ width: 60, height: 3, background: '#fff', border: '1px solid #202124' }}/>
        </div>
        <div style={{ fontSize: 10, fontFamily: TP.mono, color: '#202124', letterSpacing: 0.5, fontWeight: 600, textShadow: '0 0 2px #fff, 0 0 2px #fff' }}>1 km</div>
      </div>
      {/* attribution */}
      <div style={{ position: 'absolute', right: 10, bottom: 322, fontSize: 9, fontFamily: TP.mono, color: '#3C4043', letterSpacing: 0.3, zIndex: 5, textShadow: '0 0 3px #fff, 0 0 2px #fff' }}>
        Map data ©Telepov
      </div>
    </>
  );
}

// ─── 01 Onboarding / Login ───────────────────────────────────
function OnboardingScreen() {
  return (
    <div style={{ height: '100%', background: TP.bg, position: 'relative', overflow: 'hidden', fontFamily: TP.font }}>
      <div style={{ position: 'absolute', inset: 0,
        background: 'radial-gradient(700px 400px at 50% 25%, rgba(59,123,232,0.25), transparent 60%), radial-gradient(500px 300px at 80% 80%, rgba(0,194,255,0.12), transparent 60%)' }}/>
      <div style={{ position: 'absolute', inset: 0,
        backgroundImage: 'linear-gradient(rgba(59,123,232,0.08) 1px,transparent 1px),linear-gradient(90deg,rgba(59,123,232,0.08) 1px,transparent 1px)',
        backgroundSize: '28px 28px',
        maskImage: 'radial-gradient(500px 300px at 50% 30%,#000,transparent 70%)' }}/>
      {/* Lens */}
      <div style={{ position: 'absolute', top: 130, left: '50%', transform: 'translateX(-50%)',
        width: 160, height: 160, borderRadius: '50% 50% 50% 14px',
        transform: 'translateX(-50%) rotate(-45deg)',
        background: 'linear-gradient(135deg,#061122,#0A1C3C)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 30px 60px rgba(59,123,232,0.5)' }}>
        <div style={{ transform: 'rotate(45deg)', width: 92, height: 92, borderRadius: '50%',
          background: `radial-gradient(circle at 35% 30%, #8AB8FF, ${TP.brand} 45%, ${TP.brandDeep})`,
          boxShadow: 'inset 0 0 0 5px #fff, inset 0 0 0 7px #061122', position: 'relative' }}>
          <div style={{ position: 'absolute', left: '56%', top: '32%', width: 18, height: 18, borderRadius: '50%', background: 'rgba(255,255,255,0.9)' }}/>
        </div>
      </div>
      <div style={{ position: 'absolute', top: 360, left: 24, right: 24, textAlign: 'center' }}>
        <div style={{ fontSize: 44, fontWeight: 600, color: TP.ink, letterSpacing: -1.2, lineHeight: 1.02 }}>
          Anywhere,<br/>through<br/>someone's eyes.
        </div>
        <div style={{ fontSize: 15, color: TP.inkDim, marginTop: 18, lineHeight: 1.5, padding: '0 12px' }}>
          Request a live POV from any streamer on the map. Pay by the minute, chat, even steer the camera.
        </div>
      </div>
      <div style={{ position: 'absolute', bottom: 48, left: 20, right: 20 }}>
        <button style={{ width: '100%', height: 56, borderRadius: 14, border: 0,
          background: TP.brand, color: '#fff', fontSize: 16, fontWeight: 600, letterSpacing: -0.2,
          boxShadow: `0 12px 28px ${TP.brand}66`, marginBottom: 10, fontFamily: TP.font }}>
          Continue
        </button>
        <div style={{ display: 'flex', gap: 10, marginBottom: 14 }}>
          <button style={{ flex: 1, height: 50, borderRadius: 14, background: 'rgba(255,255,255,0.06)',
            color: TP.ink, border: `1px solid ${TP.stroke2}`, fontSize: 14, fontWeight: 500, fontFamily: TP.font }}>
             Apple
          </button>
          <button style={{ flex: 1, height: 50, borderRadius: 14, background: 'rgba(255,255,255,0.06)',
            color: TP.ink, border: `1px solid ${TP.stroke2}`, fontSize: 14, fontWeight: 500, fontFamily: TP.font }}>
            G  Google
          </button>
        </div>
        <div style={{ textAlign: 'center', color: TP.inkLow, fontSize: 12, fontFamily: TP.mono, letterSpacing: 1.2 }}>
          EN · TR · AR · ES
        </div>
      </div>
    </div>
  );
}

// ─── 02 KYC Verification (Didit) — rich multi-step flow ──────
// Didit brand: mint-green accent (#00E6A8), wordmark pill, security badges.
// Renders all 5 key steps side-by-side as mini sub-screens in one artboard.

function DiditBadge({ size = 'sm' }) {
  const P = size === 'lg' ? { fs: 11, px: 12, dot: 7 } : { fs: 9, px: 9, dot: 6 };
  return (
    <div style={{ display:'inline-flex', alignItems:'center', gap:7, padding:`4px ${P.px}px`,
      borderRadius:99, border:`1px solid #00E6A855`, background:'rgba(0,230,168,0.06)' }}>
      <span style={{ width:P.dot, height:P.dot, borderRadius:'50%', background:'#00E6A8', boxShadow:'0 0 8px #00E6A8' }}/>
      <span style={{ fontSize:P.fs, fontFamily:TP.mono, color:TP.inkDim, letterSpacing:1.4 }}>
        POWERED BY <span style={{color:'#00E6A8', fontWeight:700, letterSpacing:1.6}}>DIDIT</span>
      </span>
    </div>
  );
}

function DiditProgress({ step }) {
  const labels = ['Start','Selfie','ID front','ID back','Review'];
  return (
    <div style={{ display:'flex', alignItems:'center', gap:6, padding:'0 20px' }}>
      {labels.map((l,i) => (
        <React.Fragment key={i}>
          <div style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:4 }}>
            <div style={{ width:'100%', height:3, borderRadius:2,
              background: i < step ? '#00E6A8' : i === step ? TP.brand : TP.stroke }}/>
            <div style={{ fontSize:8, fontFamily:TP.mono, letterSpacing:0.5,
              color: i <= step ? TP.inkDim : TP.inkLow }}>{l.toUpperCase()}</div>
          </div>
        </React.Fragment>
      ))}
    </div>
  );
}

// ─── 02a Intro ───────────────────────────────────────────────
function KYCScreen() {
  return (
    <div style={{ height: '100%', background: TP.bg, fontFamily: TP.font, color: TP.ink, overflow: 'hidden' }}>
      <div style={{ padding: '54px 20px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ color: TP.inkDim, fontSize: 14 }}>← Back</div>
        <DiditBadge/>
      </div>

      <div style={{ padding: '24px 20px 0' }}>
        <div style={{ fontSize: 11, fontFamily: TP.mono, color: TP.brand2, letterSpacing: 2, textTransform: 'uppercase' }}>Streamer onboarding</div>
        <div style={{ fontSize: 30, fontWeight: 600, letterSpacing: -0.8, marginTop: 10, lineHeight: 1.08 }}>
          Verify your<br/>identity with Didit
        </div>
        <div style={{ color: TP.inkDim, fontSize: 14, marginTop: 12, lineHeight: 1.5 }}>
          Required to go live and get paid. Takes about 30 seconds — your data is encrypted end-to-end and never shared.
        </div>
      </div>

      {/* Didit hero card */}
      <div style={{ margin: '22px 20px 0', padding: 18, borderRadius: 20,
        background: 'linear-gradient(135deg, rgba(0,230,168,0.10), rgba(59,123,232,0.06))',
        border: '1px solid #00E6A833', position: 'relative', overflow: 'hidden' }}>
        {/* chroma blob */}
        <div style={{ position:'absolute', right:-40, top:-40, width:160, height:160, borderRadius:'50%',
          background:'radial-gradient(circle, #00E6A844, transparent 70%)' }}/>
        <div style={{ display:'flex', alignItems:'center', gap:10 }}>
          <div style={{ width:40, height:40, borderRadius:12, background:'#00E6A8', color:'#001815',
            display:'flex', alignItems:'center', justifyContent:'center', fontSize:20, fontWeight:800, fontFamily:TP.mono }}>◈</div>
          <div>
            <div style={{ fontSize:16, fontWeight:600 }}>Didit Verification</div>
            <div style={{ fontSize:11, color:TP.inkDim, fontFamily:TP.mono, letterSpacing:0.6 }}>SOC 2 · GDPR · eIDAS</div>
          </div>
        </div>
        <div style={{ marginTop:14, display:'grid', gridTemplateColumns:'1fr 1fr', gap:10 }}>
          {[
            { k:'~30s', l:'Avg. time' },
            { k:'99.7%', l:'Accuracy' },
            { k:'E2EE', l:'Encrypted' },
            { k:'0 data', l:'Sold' },
          ].map((s,i)=>(
            <div key={i} style={{ padding:'8px 10px', borderRadius:10, background:'rgba(255,255,255,0.03)', border:`1px solid ${TP.stroke}` }}>
              <div style={{ fontSize:15, fontWeight:600, fontFamily:TP.mono, color:'#00E6A8' }}>{s.k}</div>
              <div style={{ fontSize:10, color:TP.inkLow, letterSpacing:0.4 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>

      {/* What you need */}
      <div style={{ margin:'18px 20px 0' }}>
        <div style={{ fontSize:10, fontFamily:TP.mono, color:TP.inkLow, letterSpacing:1.4, marginBottom:10 }}>YOU'LL NEED</div>
        {[
          { i:'◉', t:'A bright, quiet spot', s:'We run liveness checks — no glasses, no hat' },
          { i:'◧', t:'Government-issued ID', s:'Passport, ID card or driving license' },
          { i:'◔', t:'60 seconds', s:'Results usually arrive in under a minute' },
        ].map((r,i)=>(
          <div key={i} style={{ display:'flex', gap:12, alignItems:'center', padding:'10px 0', borderBottom:i<2?`1px dashed ${TP.stroke}`:0 }}>
            <div style={{ width:34, height:34, borderRadius:10, background:`${TP.brand}18`, color:TP.brand2,
              display:'flex', alignItems:'center', justifyContent:'center', fontSize:16 }}>{r.i}</div>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:13, fontWeight:500 }}>{r.t}</div>
              <div style={{ fontSize:11, color:TP.inkLow }}>{r.s}</div>
            </div>
          </div>
        ))}
      </div>

      {/* CTA */}
      <div style={{ position:'absolute', bottom:36, left:20, right:20 }}>
        <button style={{ width:'100%', height:52, borderRadius:14, border:0,
          background:'#00E6A8', color:'#001815', fontSize:14, fontWeight:700, fontFamily:TP.font,
          boxShadow:'0 12px 28px rgba(0,230,168,0.35)' }}>Start Didit verification →</button>
        <div style={{ textAlign:'center', marginTop:12, fontSize:10, color:TP.inkLow, fontFamily:TP.mono, letterSpacing:0.5 }}>
          By continuing you agree to Didit's Terms · Privacy
        </div>
      </div>
    </div>
  );
}

// ─── 02b Liveness / Selfie ───────────────────────────────────
function KYCLivenessScreen() {
  return (
    <div style={{ height: '100%', background: TP.bg, fontFamily: TP.font, color: TP.ink, overflow: 'hidden', position:'relative' }}>
      <div style={{ padding: '54px 20px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ color: TP.inkDim, fontSize: 14 }}>✕</div>
        <DiditBadge/>
      </div>
      <div style={{ padding:'16px 0 8px' }}><DiditProgress step={1}/></div>
      <div style={{ padding:'8px 20px 0' }}>
        <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: -0.5 }}>Align your face</div>
        <div style={{ fontSize: 13, color: TP.inkDim, marginTop: 4 }}>Look straight at the camera, then slowly turn left.</div>
      </div>

      {/* Camera frame */}
      <div style={{ margin:'18px 20px 0', height: 360, borderRadius: 180,
        background:'radial-gradient(circle at 50% 40%, #1A2F52, #05080F 80%)',
        border:`2px dashed ${TP.brand}88`, position:'relative', overflow:'hidden' }}>
        {/* face silhouette */}
        <svg width="100%" height="100%" viewBox="0 0 280 360">
          <ellipse cx="140" cy="155" rx="62" ry="78" fill="#16233F" opacity="0.9"/>
          <ellipse cx="120" cy="142" rx="4" ry="5" fill="#5FA0FF"/>
          <ellipse cx="160" cy="142" rx="4" ry="5" fill="#5FA0FF"/>
          <path d="M118 178 Q140 190 162 178" stroke="#5FA0FF" strokeWidth="2" fill="none" strokeLinecap="round"/>
          <path d="M78 250 Q140 280 202 250 L202 360 L78 360 Z" fill="#0F1A33"/>
        </svg>
        {/* scan line */}
        <div style={{ position:'absolute', left:20, right:20, top:'52%', height:2,
          background:`linear-gradient(90deg, transparent, ${TP.brand2}, transparent)`,
          boxShadow:`0 0 12px ${TP.brand2}` }}/>
        {/* corner marks */}
        {[[20,20,0],[20,20,1],[20,20,2],[20,20,3]].map((_,i)=>(
          <div key={i} style={{ position:'absolute',
            [['left','right','left','right'][i]]: 14,
            [['top','top','bottom','bottom'][i]]: 14,
            width:22, height:22,
            borderTop: i<2 ? `2px solid ${TP.brand2}` : 0,
            borderBottom: i>=2 ? `2px solid ${TP.brand2}` : 0,
            borderLeft: i%2===0 ? `2px solid ${TP.brand2}` : 0,
            borderRight: i%2===1 ? `2px solid ${TP.brand2}` : 0,
            borderTopLeftRadius: i===0?8:0, borderTopRightRadius: i===1?8:0,
            borderBottomLeftRadius: i===2?8:0, borderBottomRightRadius: i===3?8:0 }}/>
        ))}
      </div>

      {/* Action prompts */}
      <div style={{ margin:'18px 20px 0', display:'flex', gap:8, justifyContent:'center' }}>
        {[
          { i:'↺', l:'Turn left', done:true },
          { i:'◯', l:'Look up', active:true },
          { i:'↻', l:'Turn right' },
          { i:'☺', l:'Smile' },
        ].map((p,i)=>(
          <div key={i} style={{ flex:1, padding:'10px 4px', borderRadius:12, textAlign:'center',
            background: p.active ? `${TP.brand}22` : p.done ? 'rgba(0,230,168,0.08)' : 'rgba(255,255,255,0.03)',
            border: `1px solid ${p.active ? TP.brand : p.done ? '#00E6A866' : TP.stroke}` }}>
            <div style={{ fontSize:20, color: p.done ? '#00E6A8' : p.active ? TP.brand2 : TP.inkDim }}>{p.done?'✓':p.i}</div>
            <div style={{ fontSize:9, fontFamily:TP.mono, color:TP.inkDim, letterSpacing:0.5, marginTop:3 }}>{p.l.toUpperCase()}</div>
          </div>
        ))}
      </div>

      {/* Live status */}
      <div style={{ position:'absolute', bottom:36, left:20, right:20 }}>
        <div style={{ padding:'14px 16px', borderRadius:14, background:`${TP.brand}12`, border:`1px solid ${TP.brand}44`,
          display:'flex', alignItems:'center', gap:12 }}>
          <div style={{ position:'relative', width:28, height:28 }}>
            <div style={{ position:'absolute', inset:0, borderRadius:'50%', border:`2px solid ${TP.brand2}`, borderTopColor:'transparent' }}/>
          </div>
          <div style={{ flex:1 }}>
            <div style={{ fontSize:13, fontWeight:600 }}>Liveness check · 2/4 passed</div>
            <div style={{ fontSize:11, color:TP.inkDim, fontFamily:TP.mono }}>Didit analyzing facial geometry…</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── 02c ID Capture ──────────────────────────────────────────
function KYCIDScreen() {
  return (
    <div style={{ height: '100%', background: TP.bg, fontFamily: TP.font, color: TP.ink, overflow: 'hidden', position:'relative' }}>
      <div style={{ padding: '54px 20px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ color: TP.inkDim, fontSize: 14 }}>← Back</div>
        <DiditBadge/>
      </div>
      <div style={{ padding:'16px 0 8px' }}><DiditProgress step={3}/></div>
      <div style={{ padding:'8px 20px 0' }}>
        <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: -0.5 }}>Capture ID — back side</div>
        <div style={{ fontSize: 13, color: TP.inkDim, marginTop: 4 }}>Place the MRZ / barcode area inside the frame. Avoid glare.</div>
      </div>

      {/* Document type chips */}
      <div style={{ padding:'14px 20px 0', display:'flex', gap:6 }}>
        <Chip>Passport</Chip>
        <Chip active>ID card</Chip>
        <Chip>Driving lic.</Chip>
      </div>

      {/* ID capture preview */}
      <div style={{ margin: '14px 20px 0', borderRadius: 18, overflow: 'hidden',
        background: '#000', height: 220, position: 'relative',
        border: `1px solid ${TP.stroke2}` }}>
        <div style={{ position: 'absolute', inset: 0,
          background: 'radial-gradient(ellipse at 50% 40%, #1A2F52, #05080F 85%)' }}/>
        {/* ID card mockup */}
        <div style={{ position:'absolute', inset:'22px 18px 50px 18px', borderRadius:10,
          background:'linear-gradient(135deg, #D8DFEA, #9FAABE)', opacity:0.9,
          padding:12, overflow:'hidden' }}>
          <div style={{ fontSize:7, fontFamily:TP.mono, color:'#1A2340', letterSpacing:1, fontWeight:700 }}>REPUBLIC OF TÜRKİYE · IDENTITY CARD</div>
          <div style={{ display:'flex', gap:10, marginTop:10 }}>
            <div style={{ width:60, height:74, background:'#475573', borderRadius:4 }}/>
            <div style={{ flex:1, display:'flex', flexDirection:'column', gap:3 }}>
              {[60, 40, 50, 35].map((w,i)=>(
                <div key={i} style={{ height:4, width:`${w}%`, background:'#1A2340', opacity:0.7-i*0.1, borderRadius:2 }}/>
              ))}
            </div>
          </div>
          {/* MRZ zone */}
          <div style={{ position:'absolute', left:12, right:12, bottom:10, fontFamily:TP.mono, fontSize:7, color:'#1A2340', letterSpacing:1, lineHeight:1.3 }}>
            IDTUR12345678&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;<br/>
            9001014M2801017TUR&lt;&lt;&lt;&lt;&lt;&lt;&lt;8<br/>
            DEMIR&lt;&lt;AYLIN&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;
          </div>
        </div>
        {/* Focus frame */}
        <div style={{ position: 'absolute', inset: '14px 12px', border: `2px solid ${TP.brand2}`, borderRadius: 14, pointerEvents:'none' }}/>
        {/* MRZ highlight */}
        <div style={{ position:'absolute', left:22, right:22, bottom:50, height:28,
          border:`1.5px dashed #00E6A8`, borderRadius:4, background:'rgba(0,230,168,0.08)' }}>
          <div style={{ position:'absolute', top:-14, left:0, fontSize:8, fontFamily:TP.mono, color:'#00E6A8', letterSpacing:0.6 }}>MRZ DETECTED ✓</div>
        </div>
        <div style={{ position: 'absolute', bottom: 10, left: 16, right: 16,
          display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#00E6A8', boxShadow: '0 0 8px #00E6A8' }}/>
          <span style={{ fontSize: 10, fontFamily: TP.mono, color: TP.ink, letterSpacing: 1 }}>HOLD STILL · CAPTURING</span>
        </div>
      </div>

      {/* OCR preview */}
      <div style={{ margin:'14px 20px 0', padding:12, borderRadius:12, background:'rgba(255,255,255,0.02)', border:`1px solid ${TP.stroke}` }}>
        <div style={{ fontSize:9, fontFamily:TP.mono, color:'#00E6A8', letterSpacing:1.2, marginBottom:8 }}>EXTRACTED · DIDIT OCR</div>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, fontSize:11 }}>
          {[
            { k:'Name', v:'AYLIN DEMIR' },
            { k:'DOB', v:'1990-01-01' },
            { k:'Document', v:'IDTUR12345678' },
            { k:'Expires', v:'2028-01-01' },
          ].map((r,i)=>(
            <div key={i}>
              <div style={{ fontSize:8, color:TP.inkLow, fontFamily:TP.mono, letterSpacing:0.4 }}>{r.k.toUpperCase()}</div>
              <div style={{ fontFamily:TP.mono, color:TP.ink, marginTop:2 }}>{r.v}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Retake / continue */}
      <div style={{ position:'absolute', bottom:36, left:20, right:20, display:'flex', gap:10 }}>
        <button style={{ flex:1, height:50, borderRadius:14, background:'rgba(255,255,255,0.04)',
          border:`1px solid ${TP.stroke2}`, color:TP.ink, fontSize:14, fontWeight:500, fontFamily:TP.font }}>Retake</button>
        <button style={{ flex:2, height:50, borderRadius:14, border:0,
          background:'#00E6A8', color:'#001815', fontSize:14, fontWeight:700, fontFamily:TP.font }}>Use this photo →</button>
      </div>
    </div>
  );
}

// ─── 02d Processing ──────────────────────────────────────────
function KYCProcessingScreen() {
  const checks = [
    { t:'Face match vs ID photo', s:'Cosine score 0.94', done:true },
    { t:'Liveness confidence', s:'99.1% — passed', done:true },
    { t:'Document authenticity', s:'Security features verified', done:true },
    { t:'Sanctions & PEP screen', s:'Running across 250+ lists', active:true },
    { t:'Age verification', s:'Awaiting' },
  ];
  return (
    <div style={{ height:'100%', background:TP.bg, fontFamily:TP.font, color:TP.ink, overflow:'hidden', position:'relative' }}>
      <div style={{ padding:'54px 20px 0', display:'flex', justifyContent:'space-between' }}>
        <div/>
        <DiditBadge/>
      </div>
      <div style={{ padding:'16px 0 8px' }}><DiditProgress step={4}/></div>

      {/* Orbiting ring */}
      <div style={{ margin:'20px auto 0', width:200, height:200, position:'relative' }}>
        <div style={{ position:'absolute', inset:0, borderRadius:'50%',
          background:'radial-gradient(circle, rgba(0,230,168,0.18), transparent 60%)' }}/>
        <div style={{ position:'absolute', inset:20, borderRadius:'50%',
          border:`2px solid #00E6A844`, borderTopColor:'#00E6A8' }}/>
        <div style={{ position:'absolute', inset:40, borderRadius:'50%',
          border:`1.5px dashed ${TP.brand2}66`, borderRightColor:TP.brand2 }}/>
        <div style={{ position:'absolute', inset:60, borderRadius:'50%',
          background:'linear-gradient(135deg, #001815, #002B23)',
          display:'flex', alignItems:'center', justifyContent:'center' }}>
          <div style={{ fontSize:38, fontWeight:800, color:'#00E6A8', fontFamily:TP.mono }}>◈</div>
        </div>
      </div>

      <div style={{ textAlign:'center', padding:'18px 24px 0' }}>
        <div style={{ fontSize:22, fontWeight:600, letterSpacing:-0.4 }}>Didit is verifying you…</div>
        <div style={{ fontSize:13, color:TP.inkDim, marginTop:6 }}>Usually under 30 seconds. Don't close the app.</div>
      </div>

      {/* Check stream */}
      <div style={{ margin:'20px 20px 0' }}>
        {checks.map((c,i)=>(
          <div key={i} style={{ display:'flex', gap:12, alignItems:'center', padding:'10px 0', borderBottom:i<4?`1px dashed ${TP.stroke}`:0 }}>
            <div style={{ width:22, height:22, borderRadius:'50%', flexShrink:0,
              background: c.done ? '#00E6A8' : c.active ? `${TP.brand}44` : 'rgba(255,255,255,0.04)',
              border: c.active ? `2px solid ${TP.brand2}` : 0,
              color: c.done ? '#001815' : TP.inkLow,
              display:'flex', alignItems:'center', justifyContent:'center',
              fontSize:11, fontWeight:700, fontFamily:TP.mono }}>{c.done?'✓':c.active?'…':i+1}</div>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:13, color: c.done ? TP.inkDim : TP.ink, fontWeight: c.active?600:500 }}>{c.t}</div>
              <div style={{ fontSize:11, color: c.done ? '#00E6A8' : TP.inkLow, fontFamily:TP.mono, marginTop:1 }}>{c.s}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── 02e Success ─────────────────────────────────────────────
function KYCSuccessScreen() {
  return (
    <div style={{ height:'100%', background:TP.bg, fontFamily:TP.font, color:TP.ink, overflow:'hidden', position:'relative' }}>
      {/* Confetti / particles */}
      <svg style={{ position:'absolute', inset:0, opacity:0.7 }} width="100%" height="100%">
        {Array.from({length:30}).map((_,i)=>{
          const x = (i*137)%402, y = (i*53)%300 + 80;
          const c = ['#00E6A8', '#3B7BE8', '#FFC24B', '#9B7BFF'][i%4];
          return <circle key={i} cx={x} cy={y} r={1.5+(i%3)} fill={c} opacity={0.4+(i%5)*0.1}/>;
        })}
      </svg>

      <div style={{ padding:'54px 20px 0', display:'flex', justifyContent:'flex-end' }}>
        <DiditBadge/>
      </div>

      {/* Success circle */}
      <div style={{ margin:'40px auto 0', width:120, height:120, borderRadius:'50%',
        background:'linear-gradient(135deg, #00E6A8, #007A5A)',
        boxShadow:'0 20px 50px rgba(0,230,168,0.4), inset 0 0 0 4px rgba(255,255,255,0.1)',
        display:'flex', alignItems:'center', justifyContent:'center', position:'relative' }}>
        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#001815" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
          <path d="M5 12l5 5L20 7"/>
        </svg>
      </div>

      <div style={{ textAlign:'center', padding:'24px 24px 0' }}>
        <div style={{ fontSize:11, fontFamily:TP.mono, color:'#00E6A8', letterSpacing:2, textTransform:'uppercase' }}>Verified · 0:23</div>
        <div style={{ fontSize:28, fontWeight:600, letterSpacing:-0.6, marginTop:10 }}>You're all set, Aylin</div>
        <div style={{ fontSize:14, color:TP.inkDim, marginTop:8, padding:'0 12px' }}>
          Didit cleared your identity. You can now go live, accept requests, and withdraw earnings.
        </div>
      </div>

      {/* Trust chips */}
      <div style={{ display:'flex', justifyContent:'center', gap:6, flexWrap:'wrap', padding:'22px 20px 0' }}>
        {['Verified streamer','Ready to stream','Payouts enabled','ID on file'].map((t,i)=>(
          <div key={i} style={{ padding:'5px 10px', borderRadius:99,
            background:'rgba(0,230,168,0.1)', border:'1px solid #00E6A855',
            fontSize:11, color:'#00E6A8', fontWeight:500 }}>✓ {t}</div>
        ))}
      </div>

      {/* Reference */}
      <div style={{ margin:'24px 20px 0', padding:14, borderRadius:12, background:'rgba(255,255,255,0.02)', border:`1px solid ${TP.stroke}` }}>
        <div style={{ display:'flex', justifyContent:'space-between', fontSize:11 }}>
          <span style={{ color:TP.inkLow, fontFamily:TP.mono, letterSpacing:0.6 }}>DIDIT REFERENCE</span>
          <span style={{ color:TP.ink, fontFamily:TP.mono }}>DX-9F3-4A22-7BE1</span>
        </div>
        <div style={{ display:'flex', justifyContent:'space-between', fontSize:11, marginTop:6 }}>
          <span style={{ color:TP.inkLow, fontFamily:TP.mono, letterSpacing:0.6 }}>VERIFIED ON</span>
          <span style={{ color:TP.ink, fontFamily:TP.mono }}>2026-04-19 · 14:22 UTC</span>
        </div>
      </div>

      <div style={{ position:'absolute', bottom:36, left:20, right:20 }}>
        <button style={{ width:'100%', height:52, borderRadius:14, border:0,
          background:TP.brand, color:'#fff', fontSize:14, fontWeight:600,
          boxShadow:`0 12px 28px ${TP.brand}55`, fontFamily:TP.font }}>Continue to app →</button>
      </div>
    </div>
  );
}

// ─── 03 Map view — hero screen ───────────────────────────────
function MapScreen({ variant = 'A' }) {
  const pins = [
    { x: 180, y: 340, count: 47, pulse: true },
    { x: 80, y: 240, glyph: '♪', size: 42 },
    { x: 310, y: 220, glyph: '⚽', size: 42 },
    { x: 250, y: 430, glyph: '✺', size: 42, color: TP.violet },
    { x: 120, y: 480, glyph: '⌖', size: 42, color: TP.accent },
    { x: 340, y: 380, size: 34, offline: true },
    { x: 60, y: 390, size: 34, offline: true },
    { x: 200, y: 160, size: 38, glyph: '♪' },
  ];
  return (
    <div style={{ height: '100%', background: TP.bg, position: 'relative', overflow: 'hidden', fontFamily: TP.font }}>
      <DarkMap variant={variant}/>
      <MapChrome/>

      {/* Top overlay — search + credits */}
      <div style={{ position: 'absolute', top: 58, left: 16, right: 16, zIndex: 3, display: 'flex', gap: 10 }}>
        <div style={{ flex: 1, height: 44, borderRadius: 14,
          background: 'rgba(10,15,28,0.85)', backdropFilter: 'blur(12px)',
          border: `1px solid ${TP.stroke2}`, display: 'flex', alignItems: 'center', padding: '0 14px', gap: 10 }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={TP.inkDim} strokeWidth="2" strokeLinecap="round">
            <circle cx="11" cy="11" r="7"/><path d="M20 20l-4.3-4.3"/>
          </svg>
          <span style={{ color: TP.inkDim, fontSize: 14 }}>Istanbul, Beyoğlu</span>
        </div>
        <div style={{ height: 44, minWidth: 86, padding: '0 12px', borderRadius: 14,
          background: 'rgba(10,15,28,0.85)', backdropFilter: 'blur(12px)',
          border: `1px solid ${TP.amber}44`,
          display: 'flex', alignItems: 'center', gap: 6 }}>
          <div style={{ width: 8, height: 8, borderRadius: '50%', background: TP.amber }}/>
          <span style={{ color: TP.amber, fontSize: 13, fontWeight: 600, fontFamily: TP.mono }}>1,420</span>
        </div>
      </div>

      {/* Category chips */}
      <div style={{ position: 'absolute', top: 112, left: 0, right: 0, zIndex: 3, display: 'flex', gap: 6, padding: '0 16px', overflow: 'hidden' }}>
        <Chip active>● All · 203</Chip>
        <Chip>♪ Music</Chip>
        <Chip>⌖ Travel</Chip>
        <Chip>⚽ Sports</Chip>
        <Chip>✺ Night</Chip>
      </div>

      {/* Pins */}
      {pins.map((p, i) => (
        <div key={i} style={{ position: 'absolute', left: p.x, top: p.y, zIndex: 4 }}>
          <Pin {...p}/>
        </div>
      ))}

      {/* Active center pin w/ card */}
      {variant === 'A' && (
        <>
          <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-100%)', zIndex: 5 }}>
            <Pin size={58} count={12} pulse/>
          </div>
        </>
      )}

      {/* Bottom card */}
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 5,
        background: 'linear-gradient(180deg, rgba(10,15,28,0) 0%, rgba(5,8,15,0.95) 30%)',
        paddingTop: 30, paddingBottom: 0 }}>
        <div style={{ margin: '0 12px', padding: 14, background: 'rgba(16,23,42,0.95)',
          backdropFilter: 'blur(20px)', borderRadius: 20,
          border: `1px solid ${TP.stroke2}` }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
            <div style={{ fontSize: 12, fontFamily: TP.mono, color: TP.brand2, letterSpacing: 1.6, textTransform: 'uppercase' }}>
              {variant === 'A' ? '203 live · Istanbul' : 'Demand heatmap · 24h'}
            </div>
            <div style={{ fontSize: 11, color: TP.inkLow, fontFamily: TP.mono }}>{variant === 'A' ? 'LIST ▾' : 'HEAT ▾'}</div>
          </div>
          <div style={{ display: 'flex', gap: 10, overflow: 'hidden', marginTop: 10 }}>
            {[
              { n: 'Aylin', tag: 'Galata · music', rate: '8¢', c: TP.brand },
              { n: 'Mert', tag: 'Stadium · sports', rate: '12¢', c: TP.accent },
              { n: 'Elif', tag: 'Rooftop · night', rate: '10¢', c: TP.violet },
            ].map((s, i) => (
              <div key={i} style={{ minWidth: 200, padding: 12, borderRadius: 14,
                background: 'rgba(255,255,255,0.03)', border: `1px solid ${TP.stroke}` }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
                  <Ava initials={s.n[0]} color={s.c} live size={38}/>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 14, fontWeight: 600 }}>{s.n}</div>
                    <div style={{ fontSize: 11, color: TP.inkDim }}>{s.tag}</div>
                  </div>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span style={{ fontSize: 11, fontFamily: TP.mono, color: TP.brand2 }}>{s.rate}/min</span>
                  <button style={{ padding: '5px 11px', borderRadius: 8, border: 0,
                    background: TP.brand, color: '#fff', fontSize: 11, fontWeight: 600, fontFamily: TP.font }}>Join</button>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Tab bar */}
        <div style={{ display: 'flex', justifyContent: 'space-around', padding: '14px 12px 28px',
          borderTop: `1px solid ${TP.stroke}`, background: 'rgba(5,8,15,0.95)', marginTop: 12 }}>
          {[
            { g: 'map', l: 'Map', active: true },
            { g: 'bell', l: 'Alerts', badge: 3 },
            { g: 'cam', l: 'Go Live' },
            { g: 'user', l: 'Me' },
          ].map((t, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, position: 'relative' }}>
              <div style={{ width: 22, height: 22, borderRadius: 6,
                background: t.active ? TP.brand : 'rgba(255,255,255,0.08)' }}/>
              <div style={{ fontSize: 10, color: t.active ? TP.brand2 : TP.inkLow, letterSpacing: 0.5 }}>{t.l}</div>
              {t.badge && <div style={{ position: 'absolute', top: -2, right: -4, background: TP.danger, color: '#fff',
                fontSize: 9, fontWeight: 700, padding: '1px 5px', borderRadius: 99 }}>{t.badge}</div>}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── 04 Category filter ─────────────────────────────────────
function CategoryScreen() {
  const cats = [
    { n: 'Music', c: '#FF4D6D', live: 34, g: '♪' },
    { n: 'Travel', c: TP.accent, live: 61, g: '⌖' },
    { n: 'Sports', c: TP.mint, live: 22, g: '⚽' },
    { n: 'Night', c: TP.violet, live: 48, g: '✺' },
    { n: 'Food', c: TP.amber, live: 18, g: '◉' },
    { n: 'Nature', c: '#2BD9A2', live: 12, g: '✽' },
    { n: 'Events', c: TP.brand, live: 7, g: '◈' },
    { n: 'Just chat', c: '#8AB8FF', live: 43, g: '◌' },
  ];
  return (
    <div style={{ height: '100%', background: TP.bg, fontFamily: TP.font, color: TP.ink, overflow: 'hidden' }}>
      <div style={{ padding: '60px 20px 20px' }}>
        <div style={{ fontSize: 11, fontFamily: TP.mono, color: TP.brand2, letterSpacing: 2, textTransform: 'uppercase' }}>What to see</div>
        <div style={{ fontSize: 32, fontWeight: 600, letterSpacing: -0.8, marginTop: 8 }}>Pick a category</div>
        <div style={{ color: TP.inkDim, fontSize: 14, marginTop: 6 }}>245 streamers live worldwide · 203 near you</div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, padding: '0 16px' }}>
        {cats.map((c, i) => (
          <div key={i} style={{ aspectRatio: '1', borderRadius: 18, padding: 14,
            background: `linear-gradient(135deg, ${c.c}22, ${TP.bg2})`,
            border: `1px solid ${c.c}44`, position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', bottom: -20, right: -10, fontSize: 96, opacity: 0.15, color: c.c, fontWeight: 900 }}>
              {c.g}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <div style={{ width: 6, height: 6, borderRadius: '50%', background: TP.danger, boxShadow: `0 0 6px ${TP.danger}` }}/>
              <span style={{ fontSize: 10, fontFamily: TP.mono, color: TP.inkDim, letterSpacing: 1.2 }}>{c.live} LIVE</span>
            </div>
            <div style={{ position: 'absolute', bottom: 14, left: 14, fontSize: 22, fontWeight: 600, letterSpacing: -0.4 }}>{c.n}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── 05 Streamer profile (bottom sheet style fullscreen) ────
function StreamerProfileScreen() {
  return (
    <div style={{ height: '100%', background: TP.bg, fontFamily: TP.font, color: TP.ink, position: 'relative', overflow: 'hidden' }}>
      {/* Backing map faded */}
      <div style={{ position: 'absolute', inset: 0, opacity: 0.35 }}><DarkMap/></div>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg,rgba(5,8,15,0.3),rgba(5,8,15,0.95) 40%)' }}/>

      <div style={{ position: 'absolute', top: 54, left: 16, right: 16, zIndex: 3 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(10,15,28,0.8)',
            border: `1px solid ${TP.stroke2}`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: TP.ink }}>←</div>
          <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(10,15,28,0.8)',
            border: `1px solid ${TP.stroke2}`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: TP.ink }}>⋯</div>
        </div>
      </div>

      {/* Sheet */}
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, background: TP.bg1,
        borderTopLeftRadius: 28, borderTopRightRadius: 28, padding: 20,
        border: `1px solid ${TP.stroke2}`, borderBottom: 0, zIndex: 4 }}>
        <div style={{ width: 36, height: 4, background: TP.stroke2, borderRadius: 2, margin: '0 auto 18px' }}/>

        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ position: 'relative' }}>
            <Ava initials="AY" size={64} color={TP.brand} live/>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ fontSize: 20, fontWeight: 600 }}>Aylin Demir</div>
              <svg width="14" height="14" viewBox="0 0 24 24" fill={TP.brand}><path d="M12 1l2.5 6 6.5.5-5 4.5 1.5 6.5L12 16l-5.5 3.5L8 13 3 8.5 9.5 8z"/></svg>
            </div>
            <div style={{ fontSize: 13, color: TP.inkDim, marginTop: 2 }}>@aylin · Istanbul, TR</div>
            <div style={{ display: 'flex', gap: 12, marginTop: 8, fontSize: 11, color: TP.inkDim, fontFamily: TP.mono }}>
              <span>◆ 4.9</span><span>· 1.2K followers</span><span>· 284 sessions</span>
            </div>
          </div>
        </div>

        <div style={{ display: 'flex', gap: 6, marginTop: 14, flexWrap: 'wrap' }}>
          <Chip active>#music</Chip>
          <Chip>#sunset</Chip>
          <Chip>#istanbul</Chip>
          <Chip>#galata</Chip>
        </div>

        <div style={{ color: TP.inkDim, fontSize: 14, marginTop: 14, lineHeight: 1.5 }}>
          Live guitar sessions from rooftops across Istanbul. Happy to take requests and walk anywhere.
        </div>

        {/* Rate card */}
        <div style={{ marginTop: 18, padding: 14, borderRadius: 14,
          background: `linear-gradient(135deg, ${TP.brand}15, ${TP.accent}0A)`,
          border: `1px solid ${TP.brand}40` }}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <div>
              <div style={{ fontSize: 10, fontFamily: TP.mono, color: TP.inkDim, letterSpacing: 1.2 }}>RATE</div>
              <div style={{ fontSize: 22, fontWeight: 600, marginTop: 4 }}>8¢<span style={{ fontSize: 13, color: TP.inkDim, fontWeight: 400 }}> / min</span></div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontSize: 10, fontFamily: TP.mono, color: TP.inkDim, letterSpacing: 1.2 }}>JOYSTICK</div>
              <div style={{ fontSize: 15, fontWeight: 600, marginTop: 4, color: TP.violet }}>+ 50¢ / session</div>
            </div>
          </div>
        </div>

        <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
          <button style={{ flex: 1, height: 50, borderRadius: 14, background: 'rgba(255,255,255,0.05)',
            border: `1px solid ${TP.stroke2}`, color: TP.ink, fontSize: 14, fontWeight: 500, fontFamily: TP.font }}>+ Follow</button>
          <button style={{ flex: 2, height: 50, borderRadius: 14, border: 0,
            background: TP.brand, color: '#fff', fontSize: 14, fontWeight: 600,
            boxShadow: `0 10px 24px ${TP.brand}55`, fontFamily: TP.font }}>Request stream →</button>
        </div>
      </div>
    </div>
  );
}

// ─── 06 Live session (viewer) ───────────────────────────────
function LiveSessionScreen() {
  return (
    <div style={{ height: '100%', background: '#000', fontFamily: TP.font, color: TP.ink, position: 'relative', overflow: 'hidden' }}>
      {/* POV frame */}
      <div style={{ position: 'absolute', inset: 0,
        background: 'linear-gradient(160deg, #1A2740 0%, #061122 40%, #0A1E3A 80%, #020510 100%)' }}>
        {/* fake sunset horizon */}
        <div style={{ position: 'absolute', left: 0, right: 0, top: '45%', height: 2,
          background: 'linear-gradient(90deg, transparent, #FFB86B, transparent)', opacity: 0.7 }}/>
        <div style={{ position: 'absolute', left: 0, right: 0, top: '45%', height: 120,
          background: 'linear-gradient(180deg, rgba(255,184,107,0.25), transparent)' }}/>
        {/* buildings silhouette */}
        <svg viewBox="0 0 400 874" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
          <path d="M0 500 L40 440 L80 460 L120 400 L160 420 L200 380 L240 410 L280 360 L320 400 L360 370 L400 400 L400 874 L0 874 Z" fill="#020510"/>
          <g fill="#050A15" opacity="0.9">
            <rect x="30" y="460" width="12" height="60"/>
            <rect x="80" y="480" width="10" height="50"/>
            <rect x="150" y="440" width="14" height="80"/>
            <rect x="220" y="430" width="16" height="90"/>
            <rect x="290" y="420" width="14" height="100"/>
          </g>
          <g fill={TP.amber} opacity="0.6">
            <rect x="34" y="478" width="3" height="4"/>
            <rect x="39" y="482" width="3" height="4"/>
            <rect x="154" y="470" width="3" height="4"/>
            <rect x="225" y="460" width="3" height="4"/>
            <rect x="230" y="470" width="3" height="4"/>
            <rect x="295" y="450" width="3" height="4"/>
          </g>
        </svg>
      </div>

      {/* Top bar */}
      <div style={{ position: 'absolute', top: 54, left: 16, right: 16, display: 'flex', gap: 8, alignItems: 'center', zIndex: 3 }}>
        <div style={{ padding: '6px 10px', borderRadius: 99, background: 'rgba(5,8,15,0.7)', backdropFilter: 'blur(10px)',
          display: 'flex', alignItems: 'center', gap: 6, border: `1px solid ${TP.danger}66` }}>
          <div style={{ width: 6, height: 6, borderRadius: '50%', background: TP.danger, boxShadow: `0 0 6px ${TP.danger}` }}/>
          <span style={{ fontSize: 11, fontFamily: TP.mono, color: TP.ink, letterSpacing: 1 }}>LIVE · 01:24</span>
        </div>
        <div style={{ padding: '6px 10px', borderRadius: 99, background: 'rgba(5,8,15,0.7)', backdropFilter: 'blur(10px)',
          display: 'flex', alignItems: 'center', gap: 6, border: `1px solid ${TP.stroke2}` }}>
          <span style={{ fontSize: 11, fontFamily: TP.mono, color: TP.mint }}>◉ 1080p</span>
          <span style={{ fontSize: 11, fontFamily: TP.mono, color: TP.inkDim }}>· 4.2Mbps</span>
        </div>
        <div style={{ flex: 1 }}/>
        <div style={{ padding: '6px 10px', borderRadius: 99, background: 'rgba(5,8,15,0.7)', backdropFilter: 'blur(10px)',
          border: `1px solid ${TP.amber}44`, display: 'flex', alignItems: 'center', gap: 6 }}>
          <div style={{ width: 6, height: 6, borderRadius: '50%', background: TP.amber }}/>
          <span style={{ fontSize: 11, fontFamily: TP.mono, color: TP.amber, fontWeight: 600 }}>1,277 · −11¢</span>
        </div>
      </div>

      {/* ═══ LIVE CORNER (top-right) — streamer PiP card ═══ */}
      <div style={{ position: 'absolute', top: 104, right: 14, zIndex: 4, width: 168,
        borderRadius: 16, overflow: 'hidden',
        background: 'rgba(10,15,28,0.82)', backdropFilter: 'blur(14px)',
        border: `1px solid ${TP.stroke2}`, boxShadow: '0 12px 32px rgba(0,0,0,0.5)' }}>
        {/* Header: avatar + handle + signal */}
        <div style={{ padding: '10px 11px 8px', display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ position: 'relative' }}>
            <Ava initials="AY" size={32} color={TP.brand}/>
            <div style={{ position: 'absolute', bottom: -2, right: -2, width: 10, height: 10, borderRadius: '50%',
              background: TP.mint, border: `2px solid ${TP.bg1}`, boxShadow: `0 0 6px ${TP.mint}` }}/>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: TP.ink, display: 'flex', alignItems: 'center', gap: 4 }}>
              Aylin D. <span style={{ color: TP.brand2, fontSize: 10 }}>✓</span>
            </div>
            <div style={{ fontSize: 10, color: TP.inkDim, display: 'flex', alignItems: 'center', gap: 3 }}>
              <span style={{ color: TP.mint }}>●●●</span>
              <span style={{ color: TP.stroke2 }}>●</span>
              <span style={{ marginLeft: 2 }}>28ms</span>
            </div>
          </div>
        </div>
        {/* Stats grid */}
        <div style={{ padding: '0 11px 10px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
          <div style={{ padding: '6px 8px', borderRadius: 8, background: 'rgba(255,255,255,0.04)', border: `1px solid ${TP.stroke}` }}>
            <div style={{ fontSize: 8, fontFamily: TP.mono, color: TP.inkLow, letterSpacing: 0.8 }}>VIEWERS</div>
            <div style={{ fontSize: 13, fontFamily: TP.mono, color: TP.ink, fontWeight: 600, marginTop: 1 }}>342</div>
          </div>
          <div style={{ padding: '6px 8px', borderRadius: 8, background: 'rgba(255,255,255,0.04)', border: `1px solid ${TP.stroke}` }}>
            <div style={{ fontSize: 8, fontFamily: TP.mono, color: TP.inkLow, letterSpacing: 0.8 }}>TIPS</div>
            <div style={{ fontSize: 13, fontFamily: TP.mono, color: TP.amber, fontWeight: 600, marginTop: 1 }}>◆ 240</div>
          </div>
        </div>
        {/* Mini-map footer */}
        <div style={{ position: 'relative', height: 54, borderTop: `1px solid ${TP.stroke}`, overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, transform: 'scale(2.4) translate(-10%, -12%)', transformOrigin: 'center' }}>
            <DarkMap/>
          </div>
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 40%, rgba(10,15,28,0.7))' }}/>
          {/* live dot */}
          <div style={{ position: 'absolute', left: '50%', top: '48%', transform: 'translate(-50%,-50%)' }}>
            <div style={{ position: 'absolute', inset: -8, borderRadius: '50%', background: `${TP.danger}44`, animation: 'none' }}/>
            <div style={{ width: 10, height: 10, borderRadius: '50%', background: TP.danger,
              border: '2px solid #fff', boxShadow: `0 0 10px ${TP.danger}` }}/>
          </div>
          <div style={{ position: 'absolute', left: 8, bottom: 6, fontSize: 9, fontFamily: TP.mono,
            color: TP.ink, letterSpacing: 0.5, textShadow: '0 1px 2px rgba(0,0,0,0.8)' }}>
            GALATA · 41.0256°N
          </div>
        </div>
      </div>

      {/* Viewer strip (beneath live corner) */}
      <div style={{ position: 'absolute', top: 300, right: 14, zIndex: 3,
        padding: '6px 10px', borderRadius: 99,
        background: 'rgba(5,8,15,0.7)', backdropFilter: 'blur(10px)',
        border: `1px solid ${TP.stroke2}`, display: 'flex', alignItems: 'center', gap: 6 }}>
        <div style={{ display: 'flex' }}>
          {['M','S','J','+'].map((c, i) => (
            <div key={i} style={{ width: 18, height: 18, borderRadius: '50%',
              background: i===3 ? TP.bg2 : [TP.violet, TP.amber, TP.mint][i],
              border: `1.5px solid ${TP.bg1}`, marginLeft: i ? -6 : 0,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 9, fontWeight: 700, color: i===3 ? TP.inkDim : '#fff' }}>{c}</div>
          ))}
        </div>
        <span style={{ fontSize: 10, fontFamily: TP.mono, color: TP.inkDim, letterSpacing: 0.6 }}>+339 watching</span>
      </div>

      {/* Side toggle — joystick / chat */}
      <div style={{ position: 'absolute', right: 14, top: 352, display: 'flex', flexDirection: 'column', gap: 8, zIndex: 3 }}>
        {[
          { l: '⌘', c: TP.violet, on: true },
          { l: '◌', c: TP.brand, on: false },
          { l: '◑', c: TP.ink, on: false },
          { l: '⚑', c: TP.ink, on: false },
        ].map((t, i) => (
          <div key={i} style={{ width: 44, height: 44, borderRadius: 14,
            background: t.on ? `${t.c}30` : 'rgba(5,8,15,0.7)', backdropFilter: 'blur(10px)',
            border: `1px solid ${t.on ? t.c + '88' : TP.stroke2}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: t.on ? t.c : TP.inkDim, fontSize: 18 }}>{t.l}</div>
        ))}
      </div>

      {/* Chat overlay — richer column */}
      <div style={{ position: 'absolute', left: 14, bottom: 200, width: 244, display: 'flex', flexDirection: 'column', gap: 6, zIndex: 3 }}>
        <div style={{ fontSize: 9, fontFamily: TP.mono, color: TP.inkLow, letterSpacing: 1.4, paddingLeft: 10 }}>LIVE CHAT · 342</div>
        {[
          { n: 'mikael', m: 'pan left to the water 🌊', c: TP.violet, role: null },
          { n: 'sara', m: 'sent 10 credits', c: TP.amber, gift: true },
          { n: 'mod_j', m: 'keep it friendly y\'all', c: TP.brand, role: 'MOD' },
          { n: 'ahmet', m: 'istanbul at sunset is unreal', c: TP.mint, role: null },
          { n: 'lea', m: 'granted joystick · 30s', c: TP.violet, role: null, sys: true },
          { n: 'nora', m: 'can you turn right? 👀', c: '#FF8FB1', role: null },
        ].map((c, i) => c.sys ? (
          <div key={i} style={{ padding: '5px 10px', borderRadius: 8,
            background: `${TP.violet}18`, border: `1px dashed ${TP.violet}55`,
            fontSize: 10, fontFamily: TP.mono, color: TP.violet, letterSpacing: 0.8, alignSelf: 'flex-start' }}>
            ⌘ {c.m.toUpperCase()}
          </div>
        ) : (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px',
            borderRadius: 99,
            background: c.gift ? `${TP.amber}18` : 'rgba(5,8,15,0.68)',
            backdropFilter: 'blur(8px)',
            border: c.gift ? `1px solid ${TP.amber}55` : `1px solid rgba(255,255,255,0.04)`,
            alignSelf: 'flex-start', maxWidth: '100%' }}>
            <Ava initials={c.n[0].toUpperCase()} size={20} color={c.c}/>
            {c.role && (
              <span style={{ fontSize: 8, fontFamily: TP.mono, padding: '1px 4px', borderRadius: 3,
                background: `${TP.brand}33`, color: TP.brand2, fontWeight: 700, letterSpacing: 0.5 }}>{c.role}</span>
            )}
            <span style={{ fontSize: 11, color: TP.inkDim }}>{c.n}</span>
            <span style={{ fontSize: 12, color: c.gift ? TP.amber : TP.ink, fontWeight: c.gift ? 600 : 400 }}>
              {c.gift && '◆ '}{c.m}
            </span>
          </div>
        ))}
        {/* reaction stream */}
        <div style={{ display: 'flex', gap: 4, paddingLeft: 10, marginTop: 2 }}>
          {['♥','♥','✦','♥','◆','✦','♥'].map((e, i) => (
            <span key={i} style={{ fontSize: 11, color: [TP.danger, TP.danger, TP.amber, TP.danger, TP.amber, TP.amber, TP.danger][i], opacity: 0.6 + (i%3)*0.15 }}>{e}</span>
          ))}
          <span style={{ fontSize: 9, fontFamily: TP.mono, color: TP.inkLow, marginLeft: 4 }}>+47 reactions</span>
        </div>
      </div>

      {/* Bottom joystick */}
      <div style={{ position: 'absolute', bottom: 36, left: 0, right: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12, zIndex: 3 }}>
        <div style={{ padding: '5px 11px', borderRadius: 99, background: 'rgba(5,8,15,0.7)', border: `1px solid ${TP.violet}44` }}>
          <span style={{ fontSize: 10, fontFamily: TP.mono, color: TP.violet, letterSpacing: 1.4 }}>⌘ JOYSTICK · 00:27 LEFT</span>
        </div>
        <div style={{ position: 'relative', width: 140, height: 140, borderRadius: '50%',
          background: 'radial-gradient(circle at 50% 50%, rgba(155,123,255,0.18), transparent 70%)',
          border: `1px solid ${TP.violet}66`, backdropFilter: 'blur(8px)' }}>
          <div style={{ position: 'absolute', inset: 20, borderRadius: '50%', border: `1px dashed ${TP.violet}55` }}/>
          <div style={{ position: 'absolute', left: '50%', top: '40%', transform: 'translate(-50%,-50%)',
            width: 48, height: 48, borderRadius: '50%',
            background: `linear-gradient(135deg, ${TP.violet}, #C6B3FF)`,
            boxShadow: `0 10px 24px ${TP.violet}77` }}/>
        </div>
      </div>

      {/* End button */}
      <div style={{ position: 'absolute', bottom: 14, right: 14, zIndex: 3 }}>
        <div style={{ padding: '10px 14px', borderRadius: 99, background: 'rgba(255,77,109,0.15)',
          border: `1px solid ${TP.danger}66`, color: TP.danger, fontSize: 12, fontWeight: 600, fontFamily: TP.mono, letterSpacing: 1 }}>
          ■ END
        </div>
      </div>
    </div>
  );
}

// ─── 07 Request → Accept flow (split modal) ────────────────
function RequestAcceptScreen() {
  return (
    <div style={{ height: '100%', background: TP.bg, fontFamily: TP.font, color: TP.ink, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, opacity: 0.25 }}><DarkMap/></div>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg,rgba(5,8,15,0.6),rgba(5,8,15,0.95))' }}/>

      {/* Top status */}
      <div style={{ position: 'absolute', top: 60, left: 0, right: 0, textAlign: 'center' }}>
        <div style={{ fontSize: 11, fontFamily: TP.mono, color: TP.brand2, letterSpacing: 2, textTransform: 'uppercase' }}>
          Requesting stream · 00:08
        </div>
        <div style={{ fontSize: 24, fontWeight: 600, marginTop: 10, letterSpacing: -0.5 }}>
          Waiting for Aylin to accept…
        </div>
      </div>

      {/* Central pulse */}
      <div style={{ position: 'absolute', top: 220, left: '50%', transform: 'translateX(-50%)' }}>
        <div style={{ position: 'relative', width: 180, height: 180 }}>
          {[0,1,2].map(i => (
            <div key={i} style={{ position: 'absolute', inset: 0, borderRadius: '50%',
              border: `1.5px solid ${TP.brand}`, opacity: 0.5 - i*0.15,
              transform: `scale(${1 + i*0.15})` }}/>
          ))}
          <div style={{ position: 'absolute', inset: 30, borderRadius: '50%',
            background: `radial-gradient(circle at 35% 30%, #8AB8FF, ${TP.brand} 45%, ${TP.brandDeep})`,
            boxShadow: 'inset 0 0 0 4px #fff, inset 0 0 0 6px #061122',
            display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <span style={{ color: '#fff', fontSize: 36, fontWeight: 700 }}>AY</span>
          </div>
        </div>
      </div>

      {/* Details card */}
      <div style={{ position: 'absolute', left: 16, right: 16, bottom: 108,
        background: TP.bg1, borderRadius: 18, padding: 18,
        border: `1px solid ${TP.stroke2}` }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
          <span style={{ color: TP.inkDim }}>Starting credits</span>
          <span style={{ fontFamily: TP.mono, color: TP.amber, fontWeight: 600 }}>1,420</span>
        </div>
        <div style={{ height: 1, background: TP.stroke, margin: '12px 0' }}/>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
          <span style={{ color: TP.inkDim }}>Rate</span>
          <span style={{ fontFamily: TP.mono, color: TP.ink }}>8¢ / min · billed 30s</span>
        </div>
        <div style={{ height: 1, background: TP.stroke, margin: '12px 0' }}/>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
          <span style={{ color: TP.inkDim }}>Joystick add-on</span>
          <span style={{ fontFamily: TP.mono, color: TP.violet }}>+ 50¢</span>
        </div>
        <div style={{ height: 1, background: TP.stroke, margin: '12px 0' }}/>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
          <span style={{ color: TP.inkDim }}>Est. max duration</span>
          <span style={{ fontFamily: TP.mono, color: TP.ink }}>~177 min</span>
        </div>
      </div>

      <div style={{ position: 'absolute', bottom: 40, left: 16, right: 16 }}>
        <button style={{ width: '100%', height: 52, borderRadius: 14,
          background: 'transparent', border: `1px solid ${TP.danger}66`,
          color: TP.danger, fontSize: 14, fontWeight: 600, fontFamily: TP.font }}>Cancel request</button>
      </div>
    </div>
  );
}

// ─── 08 Credit top-up ───────────────────────────────────────
function CreditTopupScreen() {
  const packs = [
    { c: 500, usd: '$4.99' },
    { c: 1500, usd: '$12.99', save: '13%' },
    { c: 5000, usd: '$39.99', save: '20%', pop: true },
    { c: 12000, usd: '$89.99', save: '25%' },
  ];
  return (
    <div style={{ height: '100%', background: TP.bg, fontFamily: TP.font, color: TP.ink, overflow: 'hidden' }}>
      <div style={{ padding: '54px 20px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ color: TP.inkDim }}>← Close</div>
        <div style={{ fontSize: 11, color: TP.inkLow, fontFamily: TP.mono }}>APP STORE</div>
      </div>

      <div style={{ padding: '24px 20px 8px' }}>
        <div style={{ fontSize: 11, fontFamily: TP.mono, color: TP.amber, letterSpacing: 2, textTransform: 'uppercase' }}>Credits</div>
        <div style={{ fontSize: 32, fontWeight: 600, letterSpacing: -0.8, marginTop: 8 }}>Top up to keep watching</div>
        <div style={{ fontSize: 14, color: TP.inkDim, marginTop: 8 }}>Balance <span style={{ fontFamily: TP.mono, color: TP.amber, fontWeight: 600 }}>1,420</span> — enough for ~2h 57m at 8¢/min</div>
      </div>

      {/* Balance ring */}
      <div style={{ display: 'flex', justifyContent: 'center', margin: '18px 0' }}>
        <div style={{ position: 'relative', width: 180, height: 180 }}>
          <svg viewBox="0 0 100 100" width="180" height="180" style={{ transform: 'rotate(-90deg)' }}>
            <circle cx="50" cy="50" r="44" fill="none" stroke={TP.stroke2} strokeWidth="3"/>
            <circle cx="50" cy="50" r="44" fill="none" stroke={TP.amber} strokeWidth="3"
              strokeDasharray="276" strokeDashoffset="90" strokeLinecap="round"/>
          </svg>
          <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
            <div style={{ fontSize: 11, fontFamily: TP.mono, color: TP.inkLow, letterSpacing: 1.2 }}>BALANCE</div>
            <div style={{ fontSize: 32, fontWeight: 600, fontFamily: TP.mono, color: TP.amber, marginTop: 4 }}>1,420</div>
            <div style={{ fontSize: 11, color: TP.inkDim, marginTop: 4 }}>credits</div>
          </div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, padding: '0 16px' }}>
        {packs.map((p, i) => (
          <div key={i} style={{ padding: 14, borderRadius: 16, position: 'relative',
            background: p.pop ? `linear-gradient(135deg,${TP.brand}22,${TP.accent}11)` : 'rgba(255,255,255,0.03)',
            border: `1px solid ${p.pop ? TP.brand : TP.stroke2}`,
            boxShadow: p.pop ? `0 10px 24px ${TP.brand}33` : 'none' }}>
            {p.pop && (
              <div style={{ position: 'absolute', top: -9, right: 12,
                background: TP.brand, color: '#fff', fontSize: 9, padding: '3px 8px',
                borderRadius: 5, letterSpacing: 1, fontWeight: 700, fontFamily: TP.mono }}>BEST</div>
            )}
            <div style={{ fontSize: 10, fontFamily: TP.mono, color: TP.inkLow, letterSpacing: 1.2 }}>CREDITS</div>
            <div style={{ fontSize: 26, fontWeight: 700, fontFamily: TP.mono, color: TP.amber, marginTop: 6 }}>
              {p.c.toLocaleString()}
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, alignItems: 'baseline' }}>
              <span style={{ fontSize: 14, fontWeight: 600 }}>{p.usd}</span>
              {p.save && <span style={{ fontSize: 10, color: TP.mint, fontFamily: TP.mono }}>save {p.save}</span>}
            </div>
          </div>
        ))}
      </div>

      <div style={{ padding: '20px 16px 16px' }}>
        <button style={{ width: '100%', height: 54, borderRadius: 14, border: 0,
          background: TP.brand, color: '#fff', fontSize: 15, fontWeight: 600,
          boxShadow: `0 10px 26px ${TP.brand}55`, fontFamily: TP.font }}>
          Buy 5,000 credits — $39.99
        </button>
        <div style={{ fontSize: 11, color: TP.inkLow, textAlign: 'center', marginTop: 10, lineHeight: 1.5 }}>
          Credits are non-refundable. Charged via App Store.
        </div>
      </div>
    </div>
  );
}

// ─── 09 Streamer dashboard (Go Live) ────────────────────────
function StreamerDashScreen() {
  return (
    <div style={{ height: '100%', background: TP.bg, fontFamily: TP.font, color: TP.ink, overflow: 'hidden' }}>
      <div style={{ padding: '54px 20px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <Ava initials="AY" size={36} color={TP.brand}/>
          <div>
            <div style={{ fontSize: 11, color: TP.inkLow, fontFamily: TP.mono, letterSpacing: 1.2 }}>STREAMER</div>
            <div style={{ fontSize: 14, fontWeight: 600 }}>Aylin Demir</div>
          </div>
        </div>
        <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(255,255,255,0.04)', border: `1px solid ${TP.stroke2}`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: TP.inkDim }}>⋯</div>
      </div>

      <div style={{ padding: '20px 16px 0' }}>
        <div style={{ fontSize: 32, fontWeight: 600, letterSpacing: -0.8 }}>Ready when you are.</div>
      </div>

      {/* Go Live big card */}
      <div style={{ margin: '20px 16px', padding: 18, borderRadius: 20, position: 'relative', overflow: 'hidden',
        background: `linear-gradient(135deg, ${TP.brandDeep}, ${TP.brand})`,
        boxShadow: `0 20px 44px ${TP.brand}66` }}>
        <div style={{ position: 'absolute', right: -30, top: -30, width: 160, height: 160, borderRadius: '50%',
          background: `radial-gradient(circle, ${TP.accent}44, transparent 60%)` }}/>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', position: 'relative' }}>
          <div>
            <div style={{ fontSize: 11, fontFamily: TP.mono, color: 'rgba(255,255,255,0.7)', letterSpacing: 1.4 }}>STATUS</div>
            <div style={{ fontSize: 22, fontWeight: 600, marginTop: 4, color: '#fff' }}>Offline</div>
            <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', marginTop: 2 }}>Pin hidden from map</div>
          </div>
          <button style={{ width: 88, height: 88, borderRadius: '50%', border: 0, background: '#fff',
            color: TP.brand, fontSize: 12, fontWeight: 700, letterSpacing: 1.2, fontFamily: TP.mono,
            boxShadow: '0 14px 30px rgba(0,0,0,0.3)' }}>
            GO<br/>LIVE
          </button>
        </div>
        <div style={{ display: 'flex', gap: 6, marginTop: 16 }}>
          <Chip active style={{ background: 'rgba(255,255,255,0.2)', color: '#fff', borderColor: 'rgba(255,255,255,0.3)' }}>♪ Music</Chip>
          <Chip style={{ background: 'rgba(255,255,255,0.08)', color: 'rgba(255,255,255,0.8)', borderColor: 'rgba(255,255,255,0.15)' }}>+ Add tag</Chip>
        </div>
      </div>

      {/* Stats row */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8, padding: '0 16px' }}>
        {[
          { k: 'Today', v: '$18.40', c: TP.mint },
          { k: 'This week', v: '$142', c: TP.brand2 },
          { k: 'Followers', v: '1.2K', c: TP.accent },
        ].map((s, i) => (
          <div key={i} style={{ padding: 12, borderRadius: 14,
            background: 'rgba(255,255,255,0.03)', border: `1px solid ${TP.stroke}` }}>
            <div style={{ fontSize: 10, color: TP.inkLow, fontFamily: TP.mono, letterSpacing: 1.2 }}>{s.k.toUpperCase()}</div>
            <div style={{ fontSize: 18, fontWeight: 600, color: s.c, marginTop: 6, fontFamily: TP.mono }}>{s.v}</div>
          </div>
        ))}
      </div>

      {/* Setup checklist */}
      <div style={{ margin: '18px 16px', padding: 14, borderRadius: 14,
        background: 'rgba(255,255,255,0.02)', border: `1px solid ${TP.stroke}` }}>
        <div style={{ fontSize: 12, fontFamily: TP.mono, color: TP.inkLow, letterSpacing: 1.4, marginBottom: 10 }}>BEFORE YOU GO LIVE</div>
        {[
          { l: 'Camera access', ok: true },
          { l: 'Location access', ok: true },
          { l: 'Good signal (4G/5G)', ok: true },
          { l: 'Allow joystick (+$0.50/session)', ok: false },
        ].map((r, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 0', borderBottom: i<3 ? `1px dashed ${TP.stroke}` : 'none' }}>
            <span style={{ fontSize: 13, color: TP.ink }}>{r.l}</span>
            <div style={{ width: 34, height: 20, borderRadius: 99, background: r.ok ? TP.mint : 'rgba(255,255,255,0.08)', position: 'relative' }}>
              <div style={{ position: 'absolute', top: 2, left: r.ok ? 16 : 2, width: 16, height: 16, borderRadius: '50%', background: '#fff' }}/>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── 10 Earnings / Withdraw ─────────────────────────────────
function EarningsScreen() {
  return (
    <div style={{ height: '100%', background: TP.bg, fontFamily: TP.font, color: TP.ink, overflow: 'hidden' }}>
      <div style={{ padding: '54px 20px 0', display: 'flex', justifyContent: 'space-between' }}>
        <div style={{ color: TP.inkDim }}>← Back</div>
        <div style={{ fontSize: 11, color: TP.inkLow, fontFamily: TP.mono }}>STRIPE CONNECTED</div>
      </div>
      <div style={{ padding: '20px 20px 0' }}>
        <div style={{ fontSize: 11, fontFamily: TP.mono, color: TP.mint, letterSpacing: 2, textTransform: 'uppercase' }}>Earnings</div>
        <div style={{ fontSize: 16, color: TP.inkDim, marginTop: 10 }}>Available to withdraw</div>
        <div style={{ fontSize: 48, fontWeight: 600, letterSpacing: -1.5, color: TP.mint, fontFamily: TP.mono, marginTop: 4 }}>
          $284.50
        </div>
        <div style={{ display: 'flex', gap: 16, marginTop: 6, fontSize: 12, color: TP.inkDim }}>
          <span>Pending <span style={{ color: TP.amber, fontFamily: TP.mono }}>$47.20</span></span>
          <span>Locked 30d <span style={{ color: TP.inkDim, fontFamily: TP.mono }}>$112</span></span>
        </div>
      </div>

      {/* Chart */}
      <div style={{ margin: '20px 16px 0', height: 120, borderRadius: 14,
        background: 'rgba(255,255,255,0.02)', border: `1px solid ${TP.stroke}`, padding: 12, position: 'relative' }}>
        <div style={{ fontSize: 10, color: TP.inkLow, fontFamily: TP.mono, letterSpacing: 1.2, position: 'absolute', top: 10, left: 12 }}>LAST 14 DAYS</div>
        <svg viewBox="0 0 340 90" width="100%" height="90" style={{ marginTop: 14 }}>
          <defs>
            <linearGradient id="earng" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0" stopColor={TP.mint} stopOpacity="0.4"/>
              <stop offset="1" stopColor={TP.mint} stopOpacity="0"/>
            </linearGradient>
          </defs>
          <path d="M0 70 L26 60 L52 64 L78 40 L104 50 L130 34 L156 44 L182 22 L208 28 L234 12 L260 24 L286 18 L312 8 L340 16 L340 90 L0 90 Z" fill="url(#earng)"/>
          <path d="M0 70 L26 60 L52 64 L78 40 L104 50 L130 34 L156 44 L182 22 L208 28 L234 12 L260 24 L286 18 L312 8 L340 16" stroke={TP.mint} strokeWidth="1.5" fill="none"/>
        </svg>
      </div>

      {/* Breakdown */}
      <div style={{ margin: '16px 16px 0', padding: 14, borderRadius: 14,
        background: 'rgba(255,255,255,0.02)', border: `1px solid ${TP.stroke}` }}>
        <div style={{ fontSize: 11, fontFamily: TP.mono, color: TP.inkLow, letterSpacing: 1.2, marginBottom: 10 }}>COMMISSION SPLIT</div>
        <div style={{ display: 'flex', borderRadius: 99, overflow: 'hidden', height: 8, background: TP.bg2 }}>
          <div style={{ width: '30%', background: TP.inkLow }}/>
          <div style={{ width: '20%', background: TP.brand }}/>
          <div style={{ width: '50%', background: TP.mint }}/>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, fontSize: 11, fontFamily: TP.mono }}>
          <span style={{ color: TP.inkLow }}>■ App store 30%</span>
          <span style={{ color: TP.brand }}>■ Telepov 20%</span>
          <span style={{ color: TP.mint }}>■ You 50%</span>
        </div>
      </div>

      {/* Recent */}
      <div style={{ padding: '16px 20px 0' }}>
        <div style={{ fontSize: 11, fontFamily: TP.mono, color: TP.inkLow, letterSpacing: 1.4, marginBottom: 6 }}>RECENT SESSIONS</div>
        {[
          { l: 'Ali · 42 min · Galata', v: '+$2.80' },
          { l: 'sara · 18 min · joystick', v: '+$1.94' },
          { l: 'j.k · 3 min · preview', v: '+$0.18' },
        ].map((r, i) => (
          <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 0', borderBottom: `1px dashed ${TP.stroke}` }}>
            <span style={{ fontSize: 13 }}>{r.l}</span>
            <span style={{ fontSize: 13, color: TP.mint, fontFamily: TP.mono }}>{r.v}</span>
          </div>
        ))}
      </div>

      <div style={{ padding: '16px' }}>
        <button style={{ width: '100%', height: 52, borderRadius: 14, border: 0,
          background: TP.mint, color: TP.brandInk, fontSize: 15, fontWeight: 700, fontFamily: TP.font }}>
          Withdraw $284.50 → Stripe
        </button>
      </div>
    </div>
  );
}

// ─── 11 Follow & Notifications ──────────────────────────────
function NotificationsScreen() {
  const items = [
    { a: 'AY', n: 'Aylin', msg: 'is live in Galata · music', t: 'now', c: TP.brand, live: true, unread: true },
    { a: 'MK', n: 'Mert', msg: 'posted a preview clip', t: '8m', c: TP.accent, unread: true },
    { a: 'EL', n: 'Elif', msg: 'scheduled a stream — Fri 8pm', t: '2h', c: TP.violet },
    { a: 'T',  n: 'Telepov', msg: 'Your KYC was approved ✓', t: '1d', c: TP.mint, system: true },
    { a: 'JK', n: 'John K.', msg: 'started following you', t: '2d', c: TP.amber },
    { a: 'T',  n: 'Telepov', msg: '500 credit bonus for the weekend', t: '3d', c: TP.brand2, system: true },
  ];
  return (
    <div style={{ height: '100%', background: TP.bg, fontFamily: TP.font, color: TP.ink, overflow: 'hidden' }}>
      <div style={{ padding: '54px 20px 0', display: 'flex', justifyContent: 'space-between' }}>
        <div style={{ fontSize: 32, fontWeight: 600, letterSpacing: -0.8 }}>Alerts</div>
        <div style={{ color: TP.inkDim, fontSize: 13, alignSelf: 'flex-end' }}>Mark all read</div>
      </div>

      <div style={{ display: 'flex', gap: 6, padding: '16px 20px 4px' }}>
        <Chip active>All · 14</Chip>
        <Chip>Live</Chip>
        <Chip>Follows</Chip>
        <Chip>System</Chip>
      </div>

      <div style={{ padding: '0 8px' }}>
        {items.map((it, i) => (
          <div key={i} style={{ display: 'flex', gap: 12, padding: '14px 12px',
            borderRadius: 14,
            background: it.unread ? `${TP.brand}0D` : 'transparent', alignItems: 'flex-start' }}>
            <div style={{ position: 'relative' }}>
              <Ava initials={it.a} size={40} color={it.c} live={it.live}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14 }}>
                <span style={{ fontWeight: 600 }}>{it.n}</span>
                <span style={{ color: TP.inkDim }}> {it.msg}</span>
              </div>
              <div style={{ fontSize: 11, color: TP.inkLow, fontFamily: TP.mono, marginTop: 3, letterSpacing: 1 }}>{it.t.toUpperCase()}</div>
            </div>
            {it.live && <button style={{ padding: '6px 12px', borderRadius: 99, border: 0,
              background: TP.brand, color: '#fff', fontSize: 11, fontWeight: 600, fontFamily: TP.font }}>Join</button>}
            {it.unread && !it.live && <div style={{ width: 6, height: 6, borderRadius: '50%', background: TP.brand, marginTop: 8 }}/>}
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── 12 Profile / settings ──────────────────────────────────
function ProfileScreen() {
  return (
    <div style={{ height: '100%', background: TP.bg, fontFamily: TP.font, color: TP.ink, overflow: 'hidden' }}>
      <div style={{ padding: '54px 20px 0', display: 'flex', justifyContent: 'space-between' }}>
        <div style={{ color: TP.inkDim }}>← Close</div>
        <div style={{ color: TP.brand2, fontSize: 14, fontWeight: 500 }}>Edit</div>
      </div>

      <div style={{ padding: '24px 20px 0', display: 'flex', alignItems: 'center', gap: 16 }}>
        <Ava initials="JK" size={72} color={TP.brand}/>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 22, fontWeight: 600 }}>John Kaplan</div>
          <div style={{ fontSize: 13, color: TP.inkDim, marginTop: 2 }}>@jk · Viewer</div>
          <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
            <Chip active color={TP.amber}>◆ 1,420 credits</Chip>
            <Chip color={TP.mint}>✓ Verified</Chip>
          </div>
        </div>
      </div>

      <div style={{ padding: '24px 16px 0' }}>
        {[
          { h: 'Account', items: [
            { l: 'Become a streamer', v: 'Start KYC →', c: TP.brand2 },
            { l: 'Credits & billing', v: '1,420' },
            { l: 'Language', v: 'EN · TR' },
          ]},
          { h: 'Stream preferences', items: [
            { l: 'Default categories', v: 'Music · Travel' },
            { l: 'Notifications', v: 'On' },
            { l: 'Safe mode', v: 'Off', toggle: false },
          ]},
          { h: 'Support', items: [
            { l: 'Help center' },
            { l: 'Community guidelines' },
            { l: 'Sign out', c: TP.danger },
          ]},
        ].map((sec, i) => (
          <div key={i} style={{ marginBottom: 18 }}>
            <div style={{ fontSize: 11, fontFamily: TP.mono, color: TP.inkLow, letterSpacing: 1.6, textTransform: 'uppercase', marginBottom: 8, paddingLeft: 4 }}>
              {sec.h}
            </div>
            <div style={{ background: 'rgba(255,255,255,0.02)', borderRadius: 14, border: `1px solid ${TP.stroke}` }}>
              {sec.items.map((r, j) => (
                <div key={j} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  padding: '14px 14px', borderBottom: j < sec.items.length-1 ? `1px solid ${TP.stroke}` : 'none' }}>
                  <span style={{ fontSize: 14, color: r.c || TP.ink }}>{r.l}</span>
                  {r.v && <span style={{ fontSize: 13, color: r.c || TP.inkDim, fontFamily: /\d/.test(r.v) ? TP.mono : TP.font }}>{r.v}</span>}
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── 13 Search screen ──────────────────────────────────────
function SearchScreen() {
  const recents = ['Galata · music', 'Istanbul rooftops', 'Stadium sports', 'Kadıköy nightlife'];
  const trending = [
    { t: 'Beyoğlu sunset', n: '14 live' },
    { t: 'Bosphorus ferry', n: '6 live' },
    { t: 'Taksim Square', n: '22 live' },
    { t: 'Street food', n: '9 live' },
  ];
  const people = [
    { n: 'Aylin Demir', h: '@aylin · Galata', c: TP.brand, live: true },
    { n: 'Mert Kaya', h: '@mertk · Stadium', c: TP.accent, live: false },
    { n: 'Elif Öz', h: '@elifoz · Rooftops', c: TP.violet, live: true },
  ];
  return (
    <div style={{ height: '100%', background: TP.bg, color: TP.ink, fontFamily: TP.font, overflow: 'hidden' }}>
      <div style={{ padding: '60px 16px 0', display: 'flex', gap: 10 }}>
        <div style={{ color: TP.inkDim, fontSize: 14, alignSelf: 'center' }}>← </div>
        <div style={{ flex: 1, height: 44, borderRadius: 14, background: TP.bg2, border: `1px solid ${TP.brand}66`, padding: '0 14px', display: 'flex', alignItems: 'center', gap: 10 }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={TP.brand2} strokeWidth="2"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4.3-4.3"/></svg>
          <span style={{ color: TP.ink, fontSize: 14 }}>Galata</span>
          <span style={{ width: 1, height: 18, background: TP.brand2, marginLeft: 4 }}/>
        </div>
      </div>
      <div style={{ padding: '20px 20px 6px', fontSize: 11, fontFamily: TP.mono, color: TP.inkLow, letterSpacing: 1.6 }}>RECENT</div>
      <div style={{ padding: '0 16px', display: 'flex', flexWrap: 'wrap', gap: 6 }}>
        {recents.map((r, i) => (<Chip key={i}>⟲ {r}</Chip>))}
      </div>
      <div style={{ padding: '20px 20px 6px', fontSize: 11, fontFamily: TP.mono, color: TP.inkLow, letterSpacing: 1.6 }}>TRENDING NEAR YOU</div>
      <div style={{ padding: '0 16px' }}>
        {trending.map((t, i) => (
          <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 0', borderBottom: `1px dashed ${TP.stroke}` }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 28, height: 28, borderRadius: 8, background: `${TP.brand}22`, color: TP.brand2, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14 }}>↗</div>
              <span style={{ fontSize: 14 }}>{t.t}</span>
            </div>
            <span style={{ fontSize: 11, color: TP.inkDim, fontFamily: TP.mono }}>{t.n}</span>
          </div>
        ))}
      </div>
      <div style={{ padding: '16px 20px 6px', fontSize: 11, fontFamily: TP.mono, color: TP.inkLow, letterSpacing: 1.6 }}>PEOPLE</div>
      <div style={{ padding: '0 16px' }}>
        {people.map((p, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0' }}>
            <Ava initials={p.n[0]} color={p.c} live={p.live}/>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 600 }}>{p.n}</div>
              <div style={{ fontSize: 12, color: TP.inkDim }}>{p.h}</div>
            </div>
            <button style={{ padding: '6px 12px', borderRadius: 99, border: `1px solid ${TP.stroke2}`, background: 'transparent', color: TP.ink, fontSize: 12, fontFamily: TP.font }}>Follow</button>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── 14 Chat thread (with streamer) ───────────────────────
function ChatThreadScreen() {
  const msgs = [
    { me: false, t: 'hey, want me to walk towards the water?', ts: '8:42' },
    { me: true, t: 'yes please, and pan left when you get there', ts: '8:42' },
    { me: false, t: 'on it 👌', ts: '8:43' },
    { me: false, gift: true, t: 'Sent 50 credits ◆', ts: '8:44' },
    { me: true, t: 'this view is insane', ts: '8:46' },
    { me: false, t: 'glad you like it. joystick granted for 30s', ts: '8:47', system: true },
  ];
  return (
    <div style={{ height: '100%', background: TP.bg, color: TP.ink, fontFamily: TP.font, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '54px 16px 14px', display: 'flex', alignItems: 'center', gap: 12, borderBottom: `1px solid ${TP.stroke}` }}>
        <div style={{ color: TP.inkDim }}>← </div>
        <Ava initials="AY" size={36} color={TP.brand} live/>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 15, fontWeight: 600 }}>Aylin Demir</div>
          <div style={{ fontSize: 11, color: TP.mint }}>● live now · Galata</div>
        </div>
        <div style={{ width: 34, height: 34, borderRadius: 10, background: `${TP.brand}22`, color: TP.brand2, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14 }}>◐</div>
      </div>
      <div style={{ flex: 1, padding: '16px 12px', display: 'flex', flexDirection: 'column', gap: 8, overflow: 'hidden' }}>
        <div style={{ textAlign: 'center', fontSize: 10, fontFamily: TP.mono, color: TP.inkLow, letterSpacing: 1.4, margin: '4px 0' }}>— SESSION STARTED · 00:00 —</div>
        {msgs.map((m, i) => (
          m.system ? (
            <div key={i} style={{ textAlign: 'center', fontSize: 10, fontFamily: TP.mono, color: TP.violet, letterSpacing: 1.2 }}>⌘ {m.t.toUpperCase()}</div>
          ) : (
            <div key={i} style={{ display: 'flex', justifyContent: m.me ? 'flex-end' : 'flex-start' }}>
              <div style={{
                maxWidth: '75%', padding: '9px 13px',
                borderRadius: m.me ? '14px 14px 4px 14px' : '14px 14px 14px 4px',
                background: m.gift ? `${TP.amber}22` : m.me ? `${TP.brand}26` : TP.bg2,
                border: `1px solid ${m.gift ? TP.amber+'55' : m.me ? TP.brand+'55' : TP.stroke}`,
                color: m.gift ? TP.amber : m.me ? TP.brand2 : TP.ink,
                fontSize: 14, fontWeight: m.gift ? 600 : 400,
              }}>
                {m.t}
                <div style={{ fontSize: 9, fontFamily: TP.mono, color: TP.inkLow, marginTop: 4, textAlign: 'right' }}>{m.ts}</div>
              </div>
            </div>
          )
        ))}
      </div>
      <div style={{ padding: '10px 12px 24px', borderTop: `1px solid ${TP.stroke}`, display: 'flex', gap: 8, alignItems: 'center' }}>
        <div style={{ width: 36, height: 36, borderRadius: 10, background: TP.bg2, border: `1px solid ${TP.stroke2}`, color: TP.inkDim, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>◆</div>
        <div style={{ flex: 1, height: 40, borderRadius: 20, background: TP.bg2, border: `1px solid ${TP.stroke2}`, padding: '0 14px', display: 'flex', alignItems: 'center', color: TP.inkLow, fontSize: 13 }}>Message Aylin…</div>
        <div style={{ width: 36, height: 36, borderRadius: '50%', background: TP.brand, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>↑</div>
      </div>
    </div>
  );
}

// ─── 15 Session summary (after session ends) ──────────────
function SessionSummaryScreen() {
  return (
    <div style={{ height: '100%', background: TP.bg, color: TP.ink, fontFamily: TP.font, overflow: 'hidden' }}>
      <div style={{ padding: '54px 20px 0', display: 'flex', justifyContent: 'space-between' }}>
        <div style={{ color: TP.inkDim }}>✕ Close</div>
        <div style={{ fontSize: 11, fontFamily: TP.mono, color: TP.inkLow, letterSpacing: 1 }}>SESSION · #A3F-2046</div>
      </div>
      <div style={{ padding: '16px 20px 0' }}>
        <div style={{ fontSize: 11, fontFamily: TP.mono, color: TP.mint, letterSpacing: 2, textTransform: 'uppercase' }}>Session ended</div>
        <div style={{ fontSize: 30, fontWeight: 600, letterSpacing: -0.7, marginTop: 8 }}>01:24:12 with Aylin</div>
        <div style={{ fontSize: 14, color: TP.inkDim, marginTop: 6 }}>Galata, Istanbul · music · 8¢/min</div>
      </div>
      <div style={{ margin: '20px 16px 0', padding: 16, borderRadius: 16, background: 'rgba(255,255,255,0.02)', border: `1px solid ${TP.stroke}` }}>
        {[
          { l: 'Duration', v: '84:12' },
          { l: 'Base rate', v: '$6.72' },
          { l: 'Joystick add-on', v: '+$0.50', c: TP.violet },
          { l: 'Tip', v: '+$1.00', c: TP.amber },
          { l: 'Total', v: '$8.22', big: true },
        ].map((r, i) => (
          <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', borderBottom: i<4 ? `1px dashed ${TP.stroke}` : 0 }}>
            <span style={{ fontSize: r.big ? 14 : 13, color: r.big ? TP.ink : TP.inkDim, fontWeight: r.big ? 600 : 400 }}>{r.l}</span>
            <span style={{ fontSize: r.big ? 17 : 13, fontFamily: TP.mono, color: r.c || (r.big ? TP.amber : TP.ink), fontWeight: 600 }}>{r.v}</span>
          </div>
        ))}
      </div>
      <div style={{ margin: '20px 16px 0', padding: 16, borderRadius: 16, background: 'rgba(255,255,255,0.02)', border: `1px solid ${TP.stroke}`, textAlign: 'center' }}>
        <div style={{ fontSize: 11, fontFamily: TP.mono, color: TP.inkLow, letterSpacing: 1.4, marginBottom: 10 }}>RATE YOUR EXPERIENCE</div>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 10, marginBottom: 14 }}>
          {[1,2,3,4,5].map(i => (
            <div key={i} style={{ fontSize: 28, color: i <= 4 ? TP.amber : TP.stroke2 }}>★</div>
          ))}
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, justifyContent: 'center' }}>
          <Chip active>Great view</Chip>
          <Chip>Good chat</Chip>
          <Chip>Smooth stream</Chip>
          <Chip>Friendly</Chip>
        </div>
      </div>
      <div style={{ padding: 16, display: 'flex', gap: 10 }}>
        <button style={{ flex: 1, height: 50, borderRadius: 14, background: 'rgba(255,255,255,0.05)', border: `1px solid ${TP.stroke2}`, color: TP.ink, fontSize: 14, fontWeight: 500, fontFamily: TP.font }}>+ Follow</button>
        <button style={{ flex: 2, height: 50, borderRadius: 14, border: 0, background: TP.brand, color: '#fff', fontSize: 14, fontWeight: 600, boxShadow: `0 10px 24px ${TP.brand}55`, fontFamily: TP.font }}>Watch more →</button>
      </div>
    </div>
  );
}

// ─── 16 Wallet / transactions ─────────────────────────────
function WalletScreen() {
  const txns = [
    { t: 'Aylin · Galata', s: '84m · joystick', v: '-$8.22', c: TP.danger, d: 'Today 8:47' },
    { t: 'Top-up · App Store', s: '5,000 credits', v: '+$39.99', c: TP.mint, d: 'Today 8:40' },
    { t: 'Mert · Stadium', s: '22m', v: '-$2.64', c: TP.danger, d: 'Yesterday' },
    { t: 'Referral bonus', s: 'Invited Elif', v: '+$5.00', c: TP.mint, d: '2d ago' },
    { t: 'Elif · Rooftop', s: '12m', v: '-$1.20', c: TP.danger, d: '3d ago' },
  ];
  return (
    <div style={{ height: '100%', background: TP.bg, color: TP.ink, fontFamily: TP.font, overflow: 'hidden' }}>
      <div style={{ padding: '54px 20px 0', display: 'flex', justifyContent: 'space-between' }}>
        <div style={{ color: TP.inkDim }}>← Back</div>
        <div style={{ fontSize: 14, color: TP.brand2, fontWeight: 500 }}>Export</div>
      </div>
      <div style={{ padding: '18px 20px 0' }}>
        <div style={{ fontSize: 11, fontFamily: TP.mono, color: TP.amber, letterSpacing: 2, textTransform: 'uppercase' }}>Wallet</div>
        <div style={{ fontSize: 44, fontWeight: 600, letterSpacing: -1.2, color: TP.amber, fontFamily: TP.mono, marginTop: 6 }}>1,420<span style={{ fontSize: 16, color: TP.inkDim, fontFamily: TP.font, fontWeight: 400, marginLeft: 6 }}>credits</span></div>
        <div style={{ fontSize: 13, color: TP.inkDim, marginTop: 4 }}>≈ $11.36 · enough for ~2h 57m at 8¢/min</div>
      </div>
      <div style={{ padding: '14px 16px 0', display: 'flex', gap: 8 }}>
        <button style={{ flex: 1, height: 44, borderRadius: 12, border: 0, background: TP.brand, color: '#fff', fontSize: 13, fontWeight: 600, fontFamily: TP.font }}>+ Top up</button>
        <button style={{ flex: 1, height: 44, borderRadius: 12, background: 'rgba(255,255,255,0.05)', border: `1px solid ${TP.stroke2}`, color: TP.ink, fontSize: 13, fontFamily: TP.font }}>Send gift</button>
        <button style={{ height: 44, padding: '0 14px', borderRadius: 12, background: 'rgba(255,255,255,0.05)', border: `1px solid ${TP.stroke2}`, color: TP.ink, fontSize: 13, fontFamily: TP.font }}>⋯</button>
      </div>
      <div style={{ padding: '20px 20px 6px', fontSize: 11, fontFamily: TP.mono, color: TP.inkLow, letterSpacing: 1.6 }}>RECENT ACTIVITY</div>
      <div style={{ padding: '0 16px' }}>
        {txns.map((tx, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 0', borderBottom: `1px dashed ${TP.stroke}` }}>
            <div style={{ width: 36, height: 36, borderRadius: 10, background: `${tx.c}22`, color: tx.c, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 15, fontWeight: 700 }}>
              {tx.c === TP.mint ? '+' : '−'}
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 500 }}>{tx.t}</div>
              <div style={{ fontSize: 11, color: TP.inkLow, fontFamily: TP.mono, letterSpacing: 0.5 }}>{tx.s} · {tx.d}</div>
            </div>
            <div style={{ fontSize: 14, fontWeight: 600, fontFamily: TP.mono, color: tx.c }}>{tx.v}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── 17 Withdraw flow (streamer) ──────────────────────────
function WithdrawScreen() {
  return (
    <div style={{ height: '100%', background: TP.bg, color: TP.ink, fontFamily: TP.font, overflow: 'hidden' }}>
      <div style={{ padding: '54px 20px 0', display: 'flex', justifyContent: 'space-between' }}>
        <div style={{ color: TP.inkDim }}>← Back</div>
        <div style={{ fontSize: 11, color: TP.inkLow, fontFamily: TP.mono }}>STEP 2 / 3</div>
      </div>
      <div style={{ padding: '14px 20px 0' }}>
        <div style={{ fontSize: 11, fontFamily: TP.mono, color: TP.mint, letterSpacing: 2, textTransform: 'uppercase' }}>Withdraw</div>
        <div style={{ fontSize: 32, fontWeight: 600, letterSpacing: -0.8, marginTop: 8 }}>How much?</div>
        <div style={{ fontSize: 14, color: TP.inkDim, marginTop: 4 }}>Available <span style={{ color: TP.mint, fontFamily: TP.mono }}>$284.50</span></div>
      </div>
      <div style={{ margin: '24px 20px 0', textAlign: 'center' }}>
        <div style={{ fontSize: 64, fontWeight: 600, fontFamily: TP.mono, color: TP.mint, letterSpacing: -2 }}>
          $<span style={{ color: TP.ink }}>250</span>.00
        </div>
        <div style={{ fontSize: 11, color: TP.inkLow, fontFamily: TP.mono, letterSpacing: 1.2, marginTop: 4 }}>PAYOUT AMOUNT</div>
      </div>
      <div style={{ padding: '16px 16px 0', display: 'flex', gap: 6 }}>
        {['$50','$100','$250','All'].map((a, i) => (
          <button key={i} style={{ flex: 1, height: 38, borderRadius: 10, border: `1px solid ${a === '$250' ? TP.mint : TP.stroke2}`, background: a === '$250' ? `${TP.mint}22` : 'transparent', color: a === '$250' ? TP.mint : TP.ink, fontSize: 13, fontFamily: TP.mono }}>{a}</button>
        ))}
      </div>
      <div style={{ margin: '20px 16px 0', padding: 14, borderRadius: 14, background: 'rgba(255,255,255,0.02)', border: `1px solid ${TP.stroke}` }}>
        <div style={{ fontSize: 11, fontFamily: TP.mono, color: TP.inkLow, letterSpacing: 1.4, marginBottom: 10 }}>DESTINATION</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0' }}>
          <div style={{ width: 40, height: 28, borderRadius: 6, background: '#635BFF', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 700, color: '#fff', fontFamily: TP.mono }}>Stripe</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13 }}>Bank •••• 0412</div>
            <div style={{ fontSize: 11, color: TP.inkLow }}>İş Bankası · Turkey</div>
          </div>
          <div style={{ color: TP.brand2, fontSize: 13 }}>Change</div>
        </div>
      </div>
      <div style={{ margin: '14px 16px 0', padding: 14, borderRadius: 14, background: 'rgba(255,255,255,0.02)', border: `1px solid ${TP.stroke}` }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, padding: '4px 0' }}>
          <span style={{ color: TP.inkDim }}>Payout</span>
          <span style={{ fontFamily: TP.mono }}>$250.00</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, padding: '4px 0' }}>
          <span style={{ color: TP.inkDim }}>Fee (1.5%)</span>
          <span style={{ fontFamily: TP.mono, color: TP.danger }}>− $3.75</span>
        </div>
        <div style={{ height: 1, background: TP.stroke, margin: '8px 0' }}/>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14, fontWeight: 600, padding: '4px 0' }}>
          <span>Arrives by</span>
          <span style={{ fontFamily: TP.mono, color: TP.mint }}>Wed · $246.25</span>
        </div>
      </div>
      <div style={{ padding: 16 }}>
        <button style={{ width: '100%', height: 52, borderRadius: 14, border: 0, background: TP.mint, color: TP.brandInk, fontSize: 15, fontWeight: 700, fontFamily: TP.font }}>Confirm withdrawal →</button>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// EXTRA KYC SCREENS
// ═══════════════════════════════════════════════════════════════

// ─── KYC · Phone OTP ─────────────────────────────────────────
function KYCPhoneOTPScreen() {
  const digits = ['4','2','8','•','•','•'];
  const keys = [['1','2','3'],['4','5','6'],['7','8','9'],['','0','⌫']];
  return (
    <div style={{ height:'100%', background:TP.bg, fontFamily:TP.font, color:TP.ink, overflow:'hidden', display:'flex', flexDirection:'column' }}>
      <div style={{ padding:'16px 20px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
        <div style={{ color:TP.inkDim, fontSize:14 }}>← Back</div>
        <div style={{ fontSize:12, fontFamily:TP.mono, color:TP.inkLow, letterSpacing:1 }}>1 / 6</div>
      </div>
      <div style={{ padding:'12px 20px 0' }}>
        <div style={{ display:'inline-flex', alignItems:'center', gap:8, padding:'4px 10px', borderRadius:99, border:`1px solid ${TP.stroke2}`, background:'rgba(255,255,255,0.03)' }}>
          <span style={{ width:6, height:6, borderRadius:'50%', background:'#00E6A8', boxShadow:'0 0 6px #00E6A8' }}/>
          <span style={{ fontSize:10, fontFamily:TP.mono, color:TP.inkDim, letterSpacing:1.6 }}>POWERED BY <span style={{color:'#00E6A8', fontWeight:700}}>DIDIT</span></span>
        </div>
        <div style={{ fontSize:11, fontFamily:TP.mono, color:TP.brand2, letterSpacing:2, textTransform:'uppercase', marginTop:12 }}>Step 1 · Phone</div>
        <div style={{ fontSize:30, fontWeight:600, letterSpacing:-0.6, marginTop:10, lineHeight:1.1 }}>
          Enter the 6-digit<br/>code we sent
        </div>
        <div style={{ color:TP.inkDim, fontSize:14, marginTop:10, lineHeight:1.5 }}>
          Sent to <span style={{color:TP.ink, fontWeight:500}}>+90 •• ••• 47 82</span> · Change
        </div>
      </div>
      <div style={{ padding:'28px 20px 0', display:'flex', gap:8, justifyContent:'center' }}>
        {digits.map((d,i)=>(
          <div key={i} style={{
            width:44, height:54, borderRadius:12,
            background:'rgba(255,255,255,0.04)',
            border:`1px solid ${i<3 ? TP.brand : TP.stroke2}`,
            display:'flex', alignItems:'center', justifyContent:'center',
            fontSize:22, fontWeight:600, color: i<3 ? TP.ink : TP.inkLow,
            fontFamily:TP.mono,
            boxShadow: i===2 ? `0 0 0 3px ${TP.brand}22` : 'none',
          }}>{d==='•' ? '' : d}</div>
        ))}
      </div>
      <div style={{ textAlign:'center', marginTop:18, color:TP.inkDim, fontSize:13 }}>
        Resend code in <span style={{color:TP.brand2, fontFamily:TP.mono}}>00:24</span>
      </div>
      <div style={{ flex:1 }}/>
      {/* Numeric keypad */}
      <div style={{ padding:'0 20px 28px' }}>
        {keys.map((row,ri)=>(
          <div key={ri} style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8, marginBottom:8 }}>
            {row.map((k,ki)=>(
              <div key={ki} style={{
                height:50, borderRadius:12,
                background: k ? 'rgba(255,255,255,0.05)' : 'transparent',
                border: k ? `1px solid ${TP.stroke}` : 'none',
                display:'flex', alignItems:'center', justifyContent:'center',
                fontSize:20, fontWeight:500, color:TP.ink,
              }}>{k}</div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── KYC · Consent / data sharing ────────────────────────────
function KYCConsentScreen() {
  const items = [
    { t:'Identity verification', s:'We share your ID photo + selfie with Didit for KYC.', req:true, on:true },
    { t:'Age check (18+)', s:'Required to stream or spend credits.', req:true, on:true },
    { t:'Location (precise)', s:'Used for map pin when you stream. You can pause anytime.', req:false, on:true },
    { t:'Marketing emails', s:'Product updates and creator programs.', req:false, on:false },
  ];
  return (
    <div style={{ height:'100%', background:TP.bg, fontFamily:TP.font, color:TP.ink, overflow:'hidden', display:'flex', flexDirection:'column' }}>
      <div style={{ padding:'16px 20px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
        <div style={{ color:TP.inkDim, fontSize:14 }}>← Back</div>
        <div style={{ fontSize:12, fontFamily:TP.mono, color:TP.inkLow, letterSpacing:1 }}>2 / 6</div>
      </div>
      <div style={{ padding:'12px 20px 0' }}>
        <div style={{ fontSize:11, fontFamily:TP.mono, color:TP.brand2, letterSpacing:2, textTransform:'uppercase' }}>Consent</div>
        <div style={{ fontSize:30, fontWeight:600, letterSpacing:-0.6, marginTop:10, lineHeight:1.1 }}>
          How we use<br/>your data
        </div>
        <div style={{ color:TP.inkDim, fontSize:14, marginTop:10, lineHeight:1.5 }}>
          GDPR/KVKK compliant. You can withdraw consent anytime from Settings → Privacy.
        </div>
      </div>
      <div style={{ padding:'20px 20px 0', flex:1, overflow:'hidden' }}>
        {items.map((it,i)=>(
          <div key={i} style={{
            padding:'14px 14px', borderRadius:14,
            background:'rgba(255,255,255,0.03)',
            border:`1px solid ${TP.stroke}`,
            marginBottom:10, display:'flex', gap:12, alignItems:'flex-start',
          }}>
            <div style={{ flex:1 }}>
              <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                <div style={{ fontSize:14, fontWeight:600 }}>{it.t}</div>
                {it.req && <span style={{ fontSize:9, fontFamily:TP.mono, letterSpacing:1, padding:'2px 6px', borderRadius:4, background:`${TP.amber}22`, color:TP.amber }}>REQUIRED</span>}
              </div>
              <div style={{ fontSize:12, color:TP.inkDim, marginTop:4, lineHeight:1.4 }}>{it.s}</div>
            </div>
            <div style={{
              width:40, height:24, borderRadius:99, flexShrink:0,
              background: it.on ? TP.brand : 'rgba(255,255,255,0.08)',
              position:'relative',
              opacity: it.req ? 0.85 : 1,
            }}>
              <div style={{
                position:'absolute', top:2, left: it.on ? 18 : 2,
                width:20, height:20, borderRadius:'50%', background:'#fff',
                boxShadow:'0 2px 4px rgba(0,0,0,0.3)', transition:'all .2s',
              }}/>
            </div>
          </div>
        ))}
      </div>
      <div style={{ padding:'16px 20px 28px' }}>
        <div style={{ fontSize:11, color:TP.inkLow, marginBottom:10, lineHeight:1.5 }}>
          By continuing you accept the <span style={{color:TP.brand2}}>Terms</span> and <span style={{color:TP.brand2}}>Privacy Policy</span>.
        </div>
        <button style={{ width:'100%', height:52, borderRadius:14, border:0, background:TP.brand, color:'#fff', fontSize:15, fontWeight:700 }}>Agree & continue →</button>
      </div>
    </div>
  );
}

// ─── KYC · Proof of address ──────────────────────────────────
function KYCAddressScreen() {
  return (
    <div style={{ height:'100%', background:TP.bg, fontFamily:TP.font, color:TP.ink, overflow:'hidden', display:'flex', flexDirection:'column' }}>
      <div style={{ padding:'16px 20px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
        <div style={{ color:TP.inkDim, fontSize:14 }}>← Back</div>
        <div style={{ fontSize:12, fontFamily:TP.mono, color:TP.inkLow, letterSpacing:1 }}>5 / 6</div>
      </div>
      <div style={{ padding:'12px 20px 0' }}>
        <div style={{ fontSize:11, fontFamily:TP.mono, color:TP.brand2, letterSpacing:2, textTransform:'uppercase' }}>Streamer payouts</div>
        <div style={{ fontSize:30, fontWeight:600, letterSpacing:-0.6, marginTop:10, lineHeight:1.1 }}>
          Proof of<br/>address
        </div>
        <div style={{ color:TP.inkDim, fontSize:14, marginTop:10, lineHeight:1.5 }}>
          Required by our payment partner (Stripe) for payouts over $1,000/mo. Utility bill or bank statement from the last 3 months.
        </div>
      </div>
      <div style={{ padding:'20px 20px 0' }}>
        <input style={{
          width:'100%', height:48, borderRadius:12, border:`1px solid ${TP.stroke2}`,
          background:'rgba(255,255,255,0.04)', color:TP.ink, padding:'0 14px', fontSize:14,
          fontFamily:TP.font, marginBottom:10, boxSizing:'border-box',
        }} defaultValue="Kemeraltı Cad. 47/3" placeholder="Street"/>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10 }}>
          <input style={{
            height:48, borderRadius:12, border:`1px solid ${TP.stroke2}`,
            background:'rgba(255,255,255,0.04)', color:TP.ink, padding:'0 14px', fontSize:14,
            fontFamily:TP.font, boxSizing:'border-box',
          }} defaultValue="Istanbul" placeholder="City"/>
          <input style={{
            height:48, borderRadius:12, border:`1px solid ${TP.stroke2}`,
            background:'rgba(255,255,255,0.04)', color:TP.ink, padding:'0 14px', fontSize:14,
            fontFamily:TP.font, boxSizing:'border-box',
          }} defaultValue="34425" placeholder="Postal"/>
        </div>
        <div style={{
          height:48, borderRadius:12, border:`1px solid ${TP.stroke2}`,
          background:'rgba(255,255,255,0.04)', padding:'0 14px',
          display:'flex', alignItems:'center', justifyContent:'space-between',
          marginTop:10,
        }}>
          <span style={{ fontSize:14 }}>🇹🇷 Türkiye</span>
          <span style={{ color:TP.inkLow }}>▾</span>
        </div>
      </div>
      <div style={{ padding:'20px 20px 0' }}>
        <div style={{ fontSize:12, fontFamily:TP.mono, color:TP.inkDim, letterSpacing:1.4, marginBottom:10 }}>PROOF DOCUMENT</div>
        <div style={{
          border:`2px dashed ${TP.stroke2}`, borderRadius:14, padding:'26px 16px',
          textAlign:'center', background:'rgba(59,123,232,0.04)',
        }}>
          <div style={{ width:44, height:44, borderRadius:12, background:`${TP.brand}22`, margin:'0 auto 10px', display:'flex', alignItems:'center', justifyContent:'center' }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={TP.brand2} strokeWidth="2" strokeLinecap="round"><path d="M12 3v14m0 0l-5-5m5 5l5-5M5 21h14"/></svg>
          </div>
          <div style={{ fontSize:14, fontWeight:600, color:TP.ink }}>Upload document</div>
          <div style={{ fontSize:11, color:TP.inkLow, marginTop:4 }}>PDF, JPG, PNG · Max 10MB</div>
        </div>
        <div style={{
          marginTop:10, padding:'10px 12px', borderRadius:10,
          background:'rgba(255,255,255,0.03)', border:`1px solid ${TP.stroke}`,
          display:'flex', alignItems:'center', gap:10,
        }}>
          <div style={{ width:32, height:38, borderRadius:4, background:`${TP.mint}22`, display:'flex', alignItems:'center', justifyContent:'center' }}>
            <span style={{ fontSize:10, fontFamily:TP.mono, color:TP.mint, fontWeight:700 }}>PDF</span>
          </div>
          <div style={{ flex:1 }}>
            <div style={{ fontSize:13, fontWeight:500 }}>electric-bill-mar.pdf</div>
            <div style={{ fontSize:11, color:TP.inkLow }}>1.2 MB · Uploaded</div>
          </div>
          <span style={{ color:TP.mint, fontSize:16 }}>✓</span>
        </div>
      </div>
      <div style={{ flex:1 }}/>
      <div style={{ padding:'16px 20px 28px' }}>
        <button style={{ width:'100%', height:52, borderRadius:14, border:0, background:TP.brand, color:'#fff', fontSize:15, fontWeight:700 }}>Submit for review →</button>
      </div>
    </div>
  );
}

// ─── KYC · Rejected / retry ──────────────────────────────────
function KYCRejectedScreen() {
  const reasons = [
    { t:'ID back is blurry', s:'We couldn\'t read the MRZ code', severity:'high' },
    { t:'Selfie lighting too dark', s:'Face match score below 0.7', severity:'med' },
  ];
  return (
    <div style={{ height:'100%', background:TP.bg, fontFamily:TP.font, color:TP.ink, overflow:'hidden', display:'flex', flexDirection:'column' }}>
      <div style={{ padding:'16px 20px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
        <div style={{ color:TP.inkDim, fontSize:14 }}>Cancel</div>
        <div style={{ fontSize:12, fontFamily:TP.mono, color:TP.inkLow, letterSpacing:1 }}>Attempt 1 / 3</div>
      </div>
      <div style={{ padding:'28px 20px 0', textAlign:'center' }}>
        <div style={{
          width:88, height:88, borderRadius:'50%', margin:'0 auto',
          background:`radial-gradient(circle, ${TP.danger}33, ${TP.danger}11)`,
          border:`2px solid ${TP.danger}`,
          display:'flex', alignItems:'center', justifyContent:'center',
          position:'relative',
        }}>
          <div style={{ position:'absolute', inset:-8, borderRadius:'50%', border:`1px solid ${TP.danger}44` }}/>
          <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke={TP.danger} strokeWidth="2.5" strokeLinecap="round">
            <circle cx="12" cy="12" r="9"/><path d="M12 8v4m0 4h.01"/>
          </svg>
        </div>
        <div style={{ fontSize:26, fontWeight:600, letterSpacing:-0.4, marginTop:18 }}>Verification failed</div>
        <div style={{ color:TP.inkDim, fontSize:14, marginTop:8, lineHeight:1.5, padding:'0 10px' }}>
          Didit flagged 2 issues. Fix them and retry — you have 2 attempts left.
        </div>
      </div>
      <div style={{ padding:'24px 20px 0' }}>
        <div style={{ fontSize:12, fontFamily:TP.mono, color:TP.inkDim, letterSpacing:1.4, marginBottom:10 }}>WHAT WENT WRONG</div>
        {reasons.map((r,i)=>(
          <div key={i} style={{
            padding:'14px', borderRadius:12,
            background:'rgba(255,82,82,0.06)',
            border:`1px solid ${TP.danger}33`,
            marginBottom:10, display:'flex', gap:12, alignItems:'flex-start',
          }}>
            <div style={{
              width:28, height:28, borderRadius:8, flexShrink:0,
              background:`${TP.danger}22`, color:TP.danger,
              display:'flex', alignItems:'center', justifyContent:'center',
              fontSize:14, fontWeight:700,
            }}>!</div>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:14, fontWeight:600 }}>{r.t}</div>
              <div style={{ fontSize:12, color:TP.inkDim, marginTop:2 }}>{r.s}</div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ padding:'14px 20px 0' }}>
        <div style={{
          padding:'12px 14px', borderRadius:12,
          background:'rgba(59,123,232,0.07)', border:`1px solid ${TP.brand}33`,
          display:'flex', gap:10, alignItems:'flex-start',
        }}>
          <span style={{ color:TP.brand2, fontSize:14 }}>💡</span>
          <div style={{ fontSize:12, color:TP.inkDim, lineHeight:1.5 }}>
            <span style={{ color:TP.ink, fontWeight:600 }}>Tip: </span>
            Use natural daylight, place ID on a flat dark surface, hold phone steady.
          </div>
        </div>
      </div>
      <div style={{ flex:1 }}/>
      <div style={{ padding:'16px 20px 28px', display:'flex', gap:10 }}>
        <button style={{ flex:1, height:52, borderRadius:14, border:`1px solid ${TP.stroke2}`, background:'transparent', color:TP.ink, fontSize:14, fontWeight:500 }}>Contact support</button>
        <button style={{ flex:2, height:52, borderRadius:14, border:0, background:TP.brand, color:'#fff', fontSize:15, fontWeight:700 }}>Retry verification →</button>
      </div>
    </div>
  );
}

// ─── KYC · Status dashboard ──────────────────────────────────
function KYCStatusScreen() {
  const stages = [
    { t:'Phone verified', s:'+90 •• ••• 47 82', status:'done', icon:'📱' },
    { t:'Identity verified', s:'TR ID · expires 2032', status:'done', icon:'🪪' },
    { t:'Liveness check', s:'Face match 0.94', status:'done', icon:'👁' },
    { t:'Address verification', s:'Under review · ~24h', status:'pending', icon:'📍' },
    { t:'Tax information', s:'Required before first payout', status:'todo', icon:'📋' },
  ];
  return (
    <div style={{ height:'100%', background:TP.bg, fontFamily:TP.font, color:TP.ink, overflow:'hidden' }}>
      <div style={{ padding:'16px 20px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
        <div style={{ color:TP.inkDim, fontSize:14 }}>← Settings</div>
        <div style={{ color:TP.inkDim, fontSize:14 }}>⋯</div>
      </div>
      <div style={{ padding:'12px 20px 0' }}>
        <div style={{ fontSize:11, fontFamily:TP.mono, color:TP.brand2, letterSpacing:2, textTransform:'uppercase' }}>Account status</div>
        <div style={{ fontSize:30, fontWeight:600, letterSpacing:-0.6, marginTop:10, lineHeight:1.1 }}>
          Verification
        </div>
      </div>
      {/* Progress hero */}
      <div style={{ margin:'20px 20px 0', padding:'18px 18px', borderRadius:18,
        background:`linear-gradient(135deg, ${TP.brand}22, ${TP.mint}11)`,
        border:`1px solid ${TP.brand}44`,
      }}>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <div>
            <div style={{ fontSize:12, fontFamily:TP.mono, color:TP.inkDim, letterSpacing:1.4 }}>COMPLETION</div>
            <div style={{ fontSize:28, fontWeight:700, marginTop:4, fontFamily:TP.mono }}>
              60<span style={{ color:TP.inkDim, fontSize:18 }}>%</span>
            </div>
            <div style={{ fontSize:12, color:TP.inkDim, marginTop:4 }}>3 of 5 steps complete</div>
          </div>
          <div style={{ position:'relative', width:72, height:72 }}>
            <svg width="72" height="72" viewBox="0 0 72 72">
              <circle cx="36" cy="36" r="30" fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="6"/>
              <circle cx="36" cy="36" r="30" fill="none" stroke={TP.mint} strokeWidth="6"
                strokeDasharray={`${0.6*188.5} ${188.5}`} strokeLinecap="round"
                transform="rotate(-90 36 36)"/>
            </svg>
            <div style={{ position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center', fontSize:14, fontWeight:700, color:TP.mint }}>3/5</div>
          </div>
        </div>
        <div style={{
          marginTop:14, padding:'8px 12px', borderRadius:10,
          background:'rgba(255,193,7,0.1)', border:`1px solid ${TP.amber}44`,
          display:'flex', alignItems:'center', gap:8,
        }}>
          <span style={{ width:6, height:6, borderRadius:'50%', background:TP.amber }}/>
          <span style={{ fontSize:12, color:TP.amber, fontWeight:500 }}>Payouts paused until address is verified</span>
        </div>
      </div>
      <div style={{ padding:'20px 20px 0' }}>
        <div style={{ fontSize:12, fontFamily:TP.mono, color:TP.inkDim, letterSpacing:1.4, marginBottom:10 }}>CHECKLIST</div>
        {stages.map((s,i)=>{
          const color = s.status==='done'?TP.mint : s.status==='pending'?TP.amber : TP.inkLow;
          const label = s.status==='done'?'Verified' : s.status==='pending'?'Reviewing' : 'Not started';
          return (
            <div key={i} style={{
              padding:'14px', borderRadius:12, marginBottom:8,
              background:'rgba(255,255,255,0.03)', border:`1px solid ${TP.stroke}`,
              display:'flex', gap:12, alignItems:'center',
            }}>
              <div style={{
                width:36, height:36, borderRadius:10, flexShrink:0,
                background:`${color}22`, display:'flex', alignItems:'center', justifyContent:'center',
                fontSize:16,
              }}>{s.icon}</div>
              <div style={{ flex:1 }}>
                <div style={{ fontSize:14, fontWeight:600 }}>{s.t}</div>
                <div style={{ fontSize:11, color:TP.inkLow, marginTop:2 }}>{s.s}</div>
              </div>
              <div style={{ textAlign:'right' }}>
                <div style={{ fontSize:11, fontFamily:TP.mono, color, letterSpacing:1, fontWeight:600 }}>{label.toUpperCase()}</div>
                {s.status==='todo' && <div style={{ fontSize:11, color:TP.brand2, marginTop:2 }}>Start →</div>}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, {
  OnboardingScreen, KYCScreen, KYCLivenessScreen, KYCIDScreen, KYCProcessingScreen, KYCSuccessScreen,
  KYCPhoneOTPScreen, KYCConsentScreen, KYCAddressScreen, KYCRejectedScreen, KYCStatusScreen,
  MapScreen, CategoryScreen, StreamerProfileScreen,
  LiveSessionScreen, RequestAcceptScreen, CreditTopupScreen, StreamerDashScreen,
  EarningsScreen, NotificationsScreen, ProfileScreen, TP, DarkMap, MapChrome,
  SearchScreen, ChatThreadScreen, SessionSummaryScreen, WalletScreen, WithdrawScreen,
});