// Stylised mocks of the actual app windows. They're not real screenshots —
// they're React-recreated representations sized to fit landing layouts and
// tinted with the riso palette. Numbers and copy match what the app
// actually shows so the landing doesn't promise features the app doesn't
// have. Anything that looks like a screen here exists in the codebase
// at src/components.

const T = {
  bg: '#FAF6EC',
  bgSoft: '#F4EEE0',
  surface: '#FFFFFA',
  surfaceAlt: '#FBF6E8',
  ink: '#1F2150',
  inkSoft: '#6B6E92',
  accent: '#E8675F',     // coral
  accent2: '#3D4A99',    // indigo
  warn: '#D89A4E',
  good: '#4ade80',
  serif: '"Fraunces", "Recoleta", serif',
  sans: '"Space Grotesk", "Inter", sans-serif',
  mono: '"JetBrains Mono", monospace',
};

// ── window chrome with traffic lights ───────────────────────────────────
function TrafficLights() {
  const dot = (bg) => (
    <div style={{ width: 11, height: 11, borderRadius: '50%', background: bg, border: '0.5px solid rgba(0,0,0,.18)' }} />
  );
  return (
    <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
      {dot('#FF6058')}{dot('#FFBE2E')}{dot('#28C840')}
    </div>
  );
}

function Window({ title, width, height, pad = 18, children, showTraffic = true, glow = false, style = {} }) {
  return (
    <div style={{
      width, height, background: T.surface,
      color: T.ink,
      borderRadius: 10,
      border: `1.5px solid ${T.ink}`,
      boxShadow: glow
        ? `0 0 0 1px ${T.accent}40, 0 14px 36px ${T.ink}26`
        : `0 1px 0 ${T.ink}1A, 2px 2px 0 ${T.ink}, 0 14px 36px ${T.ink}1A`,
      overflow: 'hidden',
      position: 'relative',
      fontFamily: T.sans,
      display: 'flex', flexDirection: 'column',
      ...style,
    }}>
      {showTraffic && (
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '12px 14px 8px',
          flexShrink: 0,
          borderBottom: `1px solid ${T.ink}10`,
          background: T.surfaceAlt,
        }}>
          <TrafficLights />
          <div style={{
            flex: 1, textAlign: 'center', fontFamily: T.serif,
            fontSize: 12, fontWeight: 600, letterSpacing: 0.2,
            color: T.ink, opacity: 0.78,
            transform: 'translateX(-22px)',
          }}>{title}</div>
        </div>
      )}
      <div style={{ flex: 1, padding: pad, position: 'relative', minHeight: 0, overflow: 'hidden' }}>
        {children}
      </div>
    </div>
  );
}

function SButton({ primary, children, style = {} }) {
  return (
    <button style={{
      appearance: 'none', cursor: 'pointer',
      background: primary ? T.accent : T.surface,
      color: primary ? T.surface : T.ink,
      border: `1.5px solid ${T.ink}`,
      boxShadow: primary ? `3px 3px 0 ${T.ink}` : `2px 2px 0 ${T.ink}`,
      padding: '8px 16px',
      borderRadius: 0,
      fontFamily: T.sans,
      fontSize: 12, fontWeight: 600,
      letterSpacing: 0.2,
      ...style,
    }}>{children}</button>
  );
}

// ── Camera tile with real getUserMedia + skeleton overlay ───────────────
// Mirrors what CameraView renders in src/components/Camera/CameraView.tsx.
// Falls back to a stylised mock silhouette if the browser denies the
// permission or the iframe has no video access.
function useLocalCamera() {
  const videoRef = React.useRef(null);
  const [state, setState] = React.useState('idle'); // idle | live | denied | unsupported
  const startedRef = React.useRef(false);
  const start = React.useCallback(async () => {
    if (startedRef.current) return;
    startedRef.current = true;
    if (!navigator.mediaDevices?.getUserMedia) { setState('unsupported'); return; }
    try {
      const stream = await navigator.mediaDevices.getUserMedia({
        video: { width: { ideal: 640 }, height: { ideal: 480 }, facingMode: 'user' },
        audio: false,
      });
      const v = videoRef.current;
      if (v) {
        v.srcObject = stream;
        await v.play().catch(() => {});
        const verify = () => {
          if (v.videoWidth > 0 && v.videoHeight > 0) {
            setState('live');
          } else {
            stream.getTracks().forEach((t) => t.stop());
            v.srcObject = null;
            setState('denied');
          }
        };
        if (v.videoWidth > 0) verify();
        else {
          v.addEventListener('loadedmetadata', verify, { once: true });
          setTimeout(verify, 1500);
        }
      }
    } catch (e) {
      setState('denied');
    }
  }, []);
  React.useEffect(() => () => {
    const v = videoRef.current;
    if (v && v.srcObject) {
      v.srcObject.getTracks().forEach((t) => t.stop());
      v.srcObject = null;
    }
  }, []);
  return { videoRef, state, start };
}

function PoseOverlay({ posture = 1 }) {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    let raf;
    const loop = (ts) => { setTick(ts / 1000); raf = requestAnimationFrame(loop); };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);
  const wobble = Math.sin(tick * 0.8) * 0.6;
  const slump = 1 - posture;
  const cx = 50 + wobble;
  const headY = 24 + slump * 4;
  const shL = { x: cx - 18 + slump * 2, y: 42 + slump * 3 };
  const shR = { x: cx + 18 - slump * 2, y: 42 + slump * 3 };
  const hip = { x: cx + slump * 4, y: 70 };
  const color = posture > 0.8 ? T.good : (posture > 0.7 ? T.warn : T.accent);
  return (
    <svg viewBox="0 0 100 80" preserveAspectRatio="none"
         style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' }}>
      <path d={`M ${cx} ${headY + 6} Q ${(cx + hip.x)/2 + slump*4} ${(headY + hip.y)/2} ${hip.x} ${hip.y}`}
            fill="none" stroke={color} strokeWidth="0.8" strokeLinecap="round" opacity="0.95" />
      <line x1={shL.x} y1={shL.y} x2={shR.x} y2={shR.y}
            stroke={color} strokeWidth="0.7" strokeLinecap="round" opacity="0.9" />
      {[{x: cx, y: headY}, shL, shR, hip].map((p, i) => (
        <circle key={i} cx={p.x} cy={p.y} r="1.6" fill={T.surface} stroke={color} strokeWidth="0.6" />
      ))}
    </svg>
  );
}

function CameraSilhouette() {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    let raf;
    const loop = (ts) => { setTick(ts / 1000); raf = requestAnimationFrame(loop); };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);
  const sway = Math.sin(tick * 0.6) * 1.2;
  return (
    <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(180deg, ${T.surfaceAlt}, ${T.bgSoft})`, overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse 90% 60% at 50% 30%, ${T.accent}18, transparent 60%),
                     radial-gradient(ellipse 70% 50% at 30% 80%, ${T.accent2}18, transparent 70%)` }} />
      <svg viewBox="0 0 100 80" preserveAspectRatio="xMidYMax meet" width="100%" height="100%" style={{ position: 'absolute', inset: 0 }}>
        <defs>
          <linearGradient id="sil" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor={T.ink} stopOpacity="0.55" />
            <stop offset="1" stopColor={T.ink} stopOpacity="0.25" />
          </linearGradient>
        </defs>
        <g transform={`translate(${sway} 0)`}>
          <ellipse cx="50" cy="32" rx="9" ry="10" fill="url(#sil)" />
          <path d="M 28 80 Q 30 60 38 52 Q 44 48 50 48 Q 56 48 62 52 Q 70 60 72 80 Z" fill="url(#sil)" />
          <rect x="46" y="40" width="8" height="9" rx="2" fill="url(#sil)" />
        </g>
      </svg>
    </div>
  );
}

function CameraTile({ posture = 0.85, autoStart = true, style = {}, children }) {
  const { videoRef, state, start } = useLocalCamera();
  React.useEffect(() => { if (autoStart) start(); }, [autoStart, start]);
  return (
    <div style={{
      position: 'relative', overflow: 'hidden',
      background: T.surfaceAlt,
      borderRadius: 6,
      border: `1px solid ${T.ink}1A`,
      ...style,
    }}>
      {state === 'live' ? (
        <video ref={videoRef} autoPlay muted playsInline
               style={{ width: '100%', height: '100%', objectFit: 'cover',
                        transform: 'scaleX(-1)', display: 'block' }} />
      ) : (
        <CameraSilhouette />
      )}
      <PoseOverlay posture={posture} />
      <div style={{
        position: 'absolute', top: 8, left: 8, display: 'flex', alignItems: 'center', gap: 6,
        padding: '3px 8px', background: T.surface + 'E8',
        border: `1px solid ${T.ink}25`, borderRadius: 999,
        fontSize: 10, color: T.ink, fontFamily: T.sans, fontWeight: 500,
        backdropFilter: 'blur(4px)',
      }}>
        <span style={{ width: 6, height: 6, borderRadius: '50%',
          background: state === 'live' ? '#34c759' : T.accent,
          boxShadow: state === 'live' ? '0 0 0 3px #34c75933' : 'none' }} />
        <span>{state === 'live' ? 'live · локально' : 'превью'}</span>
      </div>
      {state !== 'live' && state !== 'unsupported' && (
        <button onClick={start} style={{
          position: 'absolute', bottom: 8, left: '50%', transform: 'translateX(-50%)',
          appearance: 'none', border: `1px solid ${T.ink}30`, borderRadius: 999,
          padding: '4px 10px', fontSize: 10, fontFamily: T.sans, fontWeight: 500,
          background: T.surface + 'E0', color: T.ink, cursor: 'pointer',
        }}>включить камеру</button>
      )}
      {children}
    </div>
  );
}

// ── Main dashboard mock ─────────────────────────────────────────────────
// Mirrors src/components/Camera/CameraView.tsx (header + camera + score
// panel + history) condensed into a single window. Content matches what
// the actual app shows: live score, primary-issue label, history sparkline.
function RisoDashboard({ width = 580, height = 440, posture = 0.78 }) {
  const score = Math.round(posture * 100);
  const level = score >= 80 ? 'good' : score >= 70 ? 'warning' : score >= 60 ? 'alert' : 'critical';
  const levelLabel = { good: 'ровно', warning: 'дрейфуешь', alert: 'выпрямись', critical: 'сильно сутулишься' }[level];
  const accentColor = { good: T.good, warning: T.warn, alert: T.accent, critical: T.accent }[level];
  const barFill = Math.max(8, score);

  // 24-bar mini sparkline. Deterministic from posture so re-renders are stable.
  const spark = Array.from({ length: 24 }, (_, i) => {
    const noise = ((Math.sin(i * 1.7 + score * 0.04) + 1) / 2) * 18;
    return Math.max(8, Math.min(100, score - 9 + noise));
  });

  return (
    <Window title="spina" width={width} height={height} pad={0}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 220px', height: '100%' }}>
        <div style={{ padding: '24px 28px', display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 18 }}>
            <div>
              <div style={{ fontSize: 10, letterSpacing: 2.4, textTransform: 'uppercase', color: T.inkSoft }}>осанка · live</div>
              <div style={{ fontFamily: T.serif, fontSize: 64, lineHeight: 0.95, color: T.ink, letterSpacing: -2, fontWeight: 500 }}>
                {score}<span style={{ color: T.accent, fontStyle: 'italic' }}>.</span>
              </div>
              <div style={{ fontSize: 12, color: T.inkSoft, marginTop: 6, fontStyle: 'italic', fontFamily: T.serif }}>{levelLabel}</div>
            </div>
            <PebbleMascot posture={posture} size={64} mood={level === 'alert' || level === 'critical' ? 'alert' : undefined} />
          </div>

          <div>
            <div style={{ fontSize: 10, letterSpacing: 1.6, textTransform: 'uppercase', color: T.inkSoft, marginBottom: 8 }}>сегодня</div>
            <svg width="100%" height="50" viewBox="0 0 240 50" preserveAspectRatio="none">
              {spark.map((v, i) => (
                <rect key={i} x={i * 9.5 + 1} y={50 - (v / 100) * 50} width={7} height={(v / 100) * 50}
                      fill={v >= 80 ? T.good : v >= 70 ? T.warn : T.accent} opacity={0.85} rx={1.5} />
              ))}
            </svg>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4, fontSize: 9, color: T.inkSoft, letterSpacing: 1.2 }}>
              <span>9:00</span><span>13:00</span><span>17:00</span><span>сейчас</span>
            </div>
          </div>

          <div style={{ marginTop: 'auto', display: 'flex', gap: 16 }}>
            <Stat label="ровно" value="2ч 14м" />
            <Stat label="сутулости" value="9" />
            <Stat label="перерыв" value="через 22м" />
          </div>
        </div>

        <div style={{ background: T.surfaceAlt, padding: '24px 20px', display: 'flex', flexDirection: 'column', gap: 16, borderLeft: `1px solid ${T.ink}10` }}>
          <div>
            <div style={{ fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', color: T.inkSoft }}>вчера</div>
            <div style={{ fontFamily: T.serif, fontSize: 44, color: accentColor, lineHeight: 0.95, letterSpacing: -1.5 }}>
              82<span style={{ color: T.inkSoft, fontSize: 14, marginLeft: 4 }}>/100</span>
            </div>
            <div style={{ marginTop: 8, height: 5, background: T.ink + '12', borderRadius: 0 }}>
              <div style={{ width: `${barFill}%`, height: '100%', background: accentColor }} />
            </div>
          </div>
          <div>
            <div style={{ fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', color: T.inkSoft, marginBottom: 8 }}>неделя</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4 }}>
              {[78, 82, 71, 88, 80, 65, 84].map((v, i) => (
                <div key={i}>
                  <div style={{ height: 50, background: T.ink + '0E', position: 'relative', overflow: 'hidden' }}>
                    <div style={{ position: 'absolute', inset: 0, top: `${(1 - v / 100) * 100}%`,
                                  background: v >= 80 ? T.good : v >= 70 ? T.warn : T.accent }} />
                  </div>
                  <div style={{ fontSize: 9, color: T.inkSoft, marginTop: 4, textAlign: 'center' }}>{['пн','вт','ср','чт','пт','сб','вс'][i]}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ marginTop: 'auto', fontSize: 11, color: T.inkSoft, lineHeight: 1.5, fontStyle: 'italic', fontFamily: T.serif }}>
            серия — 5 дней
          </div>
        </div>
      </div>
    </Window>
  );
}

function Stat({ label, value }) {
  return (
    <div style={{ flex: 1 }}>
      <div style={{ fontSize: 9, letterSpacing: 1.6, textTransform: 'uppercase', color: T.inkSoft, marginBottom: 4 }}>{label}</div>
      <div style={{ fontFamily: T.serif, fontSize: 18, color: T.ink, letterSpacing: -0.3 }}>{value}</div>
    </div>
  );
}

// ── Calibration mock ─────────────────────────────────────────────────────
// Matches the actual flow in src/components/Calibration/CalibrationFlow.tsx:
// three explicit steps (good / bad / head turns), 5–6 second recording,
// user clicks "Записать" before each. NO breathing pacer — that was a
// design idea that never made it into the app.
function RisoCalibration({ width = 380, height = 460, step = 1, posture = 0.92 }) {
  const stepCopy = {
    1: { title: 'ровная осанка', body: 'сядь как хотел бы сидеть весь день. прямая спина, плечи расправлены.', sec: 5 },
    2: { title: 'привычная сутулость', body: 'покажи как обычно сутулишься к концу дня. голова вперёд, плечи округлены.', sec: 5 },
    3: { title: 'повороты головы', body: 'плавно поверни голову влево, потом вправо — как будто смотришь на второй монитор.', sec: 6 },
  }[step];
  return (
    <Window title="калибровка" width={width} height={height} pad={0}>
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        <div style={{ position: 'relative', flex: 1, minHeight: 0 }}>
          <CameraTile posture={posture} style={{ width: '100%', height: '100%', borderRadius: 0, border: 'none' }} />
        </div>
        <div style={{ background: T.surface, padding: '18px 22px', borderTop: `1px solid ${T.ink}10` }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 8 }}>
            <div style={{ fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', color: T.inkSoft }}>шаг {step} из 3</div>
            <div style={{ fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', color: T.accent }}>готов?</div>
          </div>
          <div style={{ fontFamily: T.serif, fontSize: 22, color: T.ink, lineHeight: 1.05, letterSpacing: -0.3, marginBottom: 6 }}>
            {stepCopy.title}<span style={{ color: T.accent, fontStyle: 'italic' }}>.</span>
          </div>
          <div style={{ fontSize: 12, color: T.inkSoft, lineHeight: 1.5, marginBottom: 14 }}>{stepCopy.body}</div>
          <div style={{ display: 'flex', gap: 4, marginBottom: 14 }}>
            {[1, 2, 3].map((i) => (
              <div key={i} style={{ flex: 1, height: 3, background: i <= step ? T.accent : T.ink + '18' }} />
            ))}
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <SButton style={{ flex: 1, height: 36 }}>отмена</SButton>
            <SButton primary style={{ flex: 1, height: 36 }}>записать ({stepCopy.sec}с)</SButton>
          </div>
        </div>
      </div>
    </Window>
  );
}

// ── Mirror window (popups when slouching) ───────────────────────────────
// Matches src/components/MirrorMode/MirrorWindow.tsx — 320×280 always-on-top
// window with a state badge, score badge, and live skeleton overlay.
function RisoMirror({ width = 280, height = 220, posture = 0.62 }) {
  const score = Math.round(posture * 100);
  const level = score >= 80 ? 'good' : score >= 70 ? 'warning' : score >= 60 ? 'alert' : 'critical';
  const levelLabel = { good: 'ровно', warning: 'дрейфуешь', alert: 'выпрямись', critical: 'сильно сутулишься' }[level];
  const levelColor = { good: T.good, warning: T.warn, alert: T.accent, critical: T.accent }[level];
  return (
    <Window title="" width={width} height={height} pad={0} showTraffic={false} glow>
      <div style={{ position: 'relative', height: '100%' }}>
        <CameraTile posture={posture} style={{ width: '100%', height: '100%', borderRadius: 0, border: 'none' }} />
        <div style={{ position: 'absolute', top: 8, left: 8, padding: '3px 10px',
                      background: T.surface, border: `1.5px solid ${T.ink}`, fontSize: 10, color: T.ink,
                      display: 'flex', alignItems: 'center', gap: 6, fontFamily: T.sans, fontWeight: 500 }}>
          <span style={{ width: 6, height: 6, background: levelColor }} />
          {levelLabel}
        </div>
        <div style={{ position: 'absolute', top: 8, right: 8, padding: '3px 10px',
                      background: T.surface, border: `1.5px solid ${T.ink}`,
                      boxShadow: `2px 2px 0 ${T.ink}`,
                      fontFamily: T.serif, fontSize: 18, color: levelColor, lineHeight: 1, letterSpacing: -0.5 }}>
          {score}<span style={{ color: T.inkSoft, fontSize: 12 }}>.</span>
        </div>
      </div>
    </Window>
  );
}

// ── HUD / live score badge ─────────────────────────────────────────────
function RisoHUD({ width = 240, height = 88, posture = 0.78 }) {
  return (
    <Window title="" width={width} height={height} pad={14} showTraffic={false}>
      <div style={{ display: 'grid', gridTemplateColumns: '44px 1fr auto', gap: 12, alignItems: 'center', height: '100%' }}>
        <PebbleMascot posture={posture} size={42} />
        <div>
          <div style={{ fontFamily: T.serif, fontSize: 26, color: T.ink, lineHeight: 1, letterSpacing: -0.5 }}>
            {Math.round(posture * 100)}<span style={{ color: T.accent, fontStyle: 'italic' }}>.</span>
          </div>
          <div style={{ marginTop: 6, height: 3, background: T.ink + '12', overflow: 'hidden' }}>
            <div style={{ height: '100%', width: `${posture * 100}%`,
                          background: posture >= 0.8 ? T.good : posture >= 0.7 ? T.warn : T.accent,
                          transition: 'width .4s' }} />
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 3 }}>
          <div style={{ fontSize: 9, color: T.inkSoft, letterSpacing: 1.4, textTransform: 'uppercase' }}>серия</div>
          <div style={{ fontFamily: T.serif, fontSize: 16, color: T.accent2, lineHeight: 1 }}>5</div>
        </div>
      </div>
    </Window>
  );
}

// ── Slouch banner ───────────────────────────────────────────────────────
// Reflects the actual FalsePositiveBanner: a single pill showing the
// current posture state with a "Это ошибка" / "Понятно" button pair.
function RisoAlert({ width = 320, height = 124 }) {
  return (
    <Window title="" width={width} height={height} pad={14} showTraffic={false} glow>
      <div style={{ display: 'grid', gridTemplateColumns: '48px 1fr', gap: 12, alignItems: 'center', height: '100%' }}>
        <PebbleMascot posture={0.25} size={44} mood="alert" />
        <div>
          <div style={{ fontFamily: T.serif, fontSize: 17, color: T.ink, lineHeight: 1.15, letterSpacing: -0.3 }}>
            плечи <em style={{ color: T.accent, fontStyle: 'italic' }}>уползают вверх</em>
          </div>
          <div style={{ fontSize: 11, color: T.inkSoft, marginTop: 4 }}>spina не алертит без причины — если ошиблась, скажи</div>
          <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
            <SButton style={{ padding: '4px 10px', fontSize: 11 }}>это ошибка</SButton>
            <SButton primary style={{ padding: '4px 10px', fontSize: 11 }}>понятно</SButton>
          </div>
        </div>
      </div>
    </Window>
  );
}

// ── Menubar strip (for the "установи" step) ─────────────────────────────
// Tiny stylised macOS menubar with the spina icon nestled between the
// usual system icons. Used by HowItWorks step 01 instead of a generic
// number card.
function RisoMenubar({ width = 320, height = 120 }) {
  return (
    <div style={{
      width, height, position: 'relative',
      background: `linear-gradient(180deg, ${T.bgSoft}, ${T.surfaceAlt})`,
      borderRadius: 10,
      border: `1px solid ${T.ink}14`,
      overflow: 'hidden',
      fontFamily: T.sans,
      display: 'flex', flexDirection: 'column',
    }}>
      {/* Faux menubar */}
      <div style={{
        height: 22, background: T.surface + 'E8',
        borderBottom: `1px solid ${T.ink}18`,
        display: 'flex', alignItems: 'center', justifyContent: 'flex-end',
        gap: 14, padding: '0 12px',
        fontSize: 10, color: T.ink, fontWeight: 500,
        backdropFilter: 'blur(6px)',
      }}>
        <span style={{ opacity: 0.55 }}>◐</span>
        <span style={{ opacity: 0.55 }}>⌬</span>
        {/* spina pebble icon — the real one */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 4, position: 'relative' }}>
          <PebbleMascot posture={0.95} size={16} animate={false} />
          {/* Status dot — green = ровно */}
          <span style={{
            position: 'absolute', top: -2, right: -3,
            width: 6, height: 6, borderRadius: '50%',
            background: T.good, border: `1px solid ${T.surface}`,
          }} />
        </div>
        <span style={{ opacity: 0.55 }}>⏏</span>
        <span style={{ opacity: 0.7, fontFamily: T.mono, fontSize: 9 }}>14:32</span>
      </div>
      {/* Faux desktop with subtle wallpaper hint */}
      <div style={{ flex: 1, position: 'relative',
        background: `radial-gradient(ellipse 60% 80% at 70% 110%, ${T.accent}10, transparent 60%),
                     radial-gradient(ellipse 50% 60% at 20% 100%, ${T.accent2}12, transparent 70%)` }}>
        {/* Tiny callout arrow pointing to the icon */}
        <svg width="100%" height="100%" viewBox="0 0 320 98" preserveAspectRatio="none"
             style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
          <path d="M 240 30 Q 250 50 245 70" fill="none"
                stroke={T.accent} strokeWidth="1.2" strokeDasharray="3 3" opacity="0.7" />
          <text x="200" y="80" fill={T.inkSoft} fontFamily={T.sans} fontSize="10" fontStyle="italic">живёт здесь</text>
        </svg>
      </div>
    </div>
  );
}

window.T = T;
window.Window = Window;
window.SButton = SButton;
window.RisoDashboard = RisoDashboard;
window.RisoCalibration = RisoCalibration;
window.RisoMirror = RisoMirror;
window.RisoHUD = RisoHUD;
window.RisoAlert = RisoAlert;
window.RisoMenubar = RisoMenubar;