/* global React */
const { useState: useStateM, useEffect: useEffectM, useRef: useRefM } = React;

/* shared mobile-mode hook for mockups (stripped composition at <=767px) */
function useMobileMock() {
  const [m, setM] = useStateM(() =>
    typeof window !== 'undefined' && window.matchMedia
      ? window.matchMedia('(max-width: 767px)').matches : false);
  useEffectM(() => {
    if (!window.matchMedia) return;
    const mq = window.matchMedia('(max-width: 767px)');
    const on = () => setM(mq.matches);
    mq.addEventListener ? mq.addEventListener('change', on) : mq.addListener(on);
    return () => { mq.removeEventListener ? mq.removeEventListener('change', on) : mq.removeListener(on); };
  }, []);
  return m;
}

/* ============================================================
   MockFrame — minimal shared shell. Each mock owns its inner UI
   ============================================================ */
function MockFrame({ children, title, subtitle, accent, width = 640, height = 400 }) {
  return (
    <div className="glass mock-frame mock-card" style={{
      width,
      height,
      borderRadius: 18,
      overflow: 'hidden',
      flexShrink: 0,
      position: 'relative',
      display: 'flex',
      flexDirection: 'column',
    }}>
      <div style={{
        position: 'absolute', top: 14, left: 16, right: 16, zIndex: 10,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{
            width: 6, height: 6, borderRadius: 1,
            background: accent || 'var(--accent-ice)', opacity: 0.55,
          }} />
          <span style={{
            fontFamily: 'var(--font-mono)', fontSize: 11,
            textTransform: 'uppercase', letterSpacing: '0.1em',
            color: 'var(--text-secondary)',
          }}>{title}</span>
        </div>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 10,
          color: 'var(--text-tertiary)',
        }}>{subtitle}</span>
      </div>
      <div style={{ position: 'absolute', inset: 0, paddingTop: 40 }}>
        {children}
      </div>
    </div>
  );
}

/* helper styles */
const mono = { fontFamily: 'var(--font-mono)' };
const tiny = { ...mono, fontSize: 9, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--text-tertiary)' };
const label10 = { ...mono, fontSize: 10, color: 'var(--text-secondary)' };

/* ============================================================
   MockKYC — Multi-tab compliance dossier
   Tabs: IDENTITY · LIVENESS · SANCTIONS · INCOME · ADDRESS · DECISION
   ============================================================ */
function MockKYC() {
  const mobile = useMobileMock();
  const allTabs = ['IDENTITY', 'LIVENESS', 'SANCTIONS', 'INCOME', 'ADDRESS', 'DECISION'];
  const tabs = mobile ? ['IDENTITY', 'SANCTIONS', 'DECISION'] : allTabs;
  const defaultTab = mobile ? 1 : 2;
  const [tab, setTab] = useStateM(defaultTab);
  return (
    <MockFrame title="MÜŞTƏRİ · DOSSIER" subtitle="ASN-9214738 · v3.4">
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        {/* Subject header */}
        <div style={{ padding: '8px 14px 10px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid var(--border-glass)' }}>
          <div style={{
            width: 32, height: 40, borderRadius: 3,
            background: 'linear-gradient(135deg, rgba(168,197,232,0.22), rgba(168,197,232,0.06))',
            border: '1px solid rgba(168,197,232,0.3)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 7, fontFamily: 'var(--font-mono)', color: 'var(--accent-ice)',
          }}>P&lt;AZE</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, color: 'var(--text-primary)', fontWeight: 500 }}>ƏLİYEV, RAUF E.</div>
            <div style={tiny}>ASAN ID · AAA1234567 · DOB 14.03.1991 · NAT AZE</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ ...mono, fontSize: 9, color: 'var(--text-tertiary)' }}>RISK BAND</div>
            <div className="serif" style={{ fontSize: 18, color: 'var(--accent-ice-bright)', lineHeight: 1 }}>0.12 ±0.04</div>
          </div>
        </div>
        {/* Tabs */}
        <div style={{ display: 'flex', padding: '0 14px', gap: 14, fontSize: 9, ...mono, letterSpacing: '0.1em', color: 'var(--text-tertiary)', borderBottom: '1px solid var(--border-glass)' }}>
          {tabs.map((t, i) => (
            <button key={t} onClick={() => setTab(i)} style={{
              padding: '8px 0',
              color: i === tab ? 'var(--accent-ice)' : 'var(--text-tertiary)',
              borderBottom: i === tab ? '1px solid var(--accent-ice)' : '1px solid transparent',
              background: 'none', cursor: 'pointer',
            }}>{t}</button>
          ))}
        </div>
        {/* Active tab body — Sanctions */}
        <div style={{ flex: 1, padding: '12px 14px', display: 'flex', flexDirection: 'column', gap: 6, overflow: 'hidden' }}>
          <div style={{ ...tiny, marginBottom: 2 }}>SCREENED AGAINST 4 LISTS · 247 MS</div>
          {[
            ['OFAC SDN', 'US Treasury', 'CLEAR', '0 hits'],
            ['EU Consolidated', 'EU Council', 'CLEAR', '0 hits'],
            ['UN Security Council', 'UN', 'CLEAR', '0 hits'],
            ['AZ MFA Watchlist', 'Domestic', 'REVIEW', '1 fuzzy'],
          ].map(([list, src, status, detail]) => {
            const c = status === 'CLEAR' ? '#A8E8C5' : status === 'REVIEW' ? '#E8D4A8' : '#E8A8B5';
            return (
              <div key={list} style={{
                display: 'grid',
                gridTemplateColumns: mobile ? '1fr 60px 60px' : '1.2fr 1fr 70px 70px',
                alignItems: 'center', gap: 10,
                padding: '6px 8px', borderRadius: 4,
                background: 'rgba(168,197,232,0.04)',
                border: '1px solid var(--border-glass)',
                fontSize: 10,
              }}>
                <span style={{ color: 'var(--text-primary)' }}>{list}</span>
                {!mobile && <span style={{ ...mono, color: 'var(--text-tertiary)', fontSize: 9 }}>{src}</span>}
                <span style={{ ...mono, color: c, fontSize: 9, letterSpacing: '0.1em' }}>{status}</span>
                <span style={{ ...mono, color: 'var(--text-secondary)', fontSize: 9, textAlign: 'right' }}>{detail}</span>
              </div>
            );
          })}
          {/* PEP row */}
          <div style={{
            marginTop: 'auto',
            padding: '8px 10px', borderRadius: 4,
            border: '1px solid rgba(232,212,168,0.25)',
            background: 'rgba(232,212,168,0.06)',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            fontSize: 10,
          }}>
            <span style={{ color: 'var(--text-secondary)' }}>PEP screening</span>
            <span style={{ ...mono, fontSize: 9, color: '#E8D4A8' }}>TIER 3 · DOMESTIC · ROUTE TO L2</span>
          </div>
        </div>
      </div>
    </MockFrame>
  );
}

/* ============================================================
   MockClaims — Kanban triage board with claim cards
   ============================================================ */
function MockClaims() {
  const mobile = useMobileMock();
  const cols = [
    { name: 'FAST-TRACK', count: 23, accent: '#A8E8C5', cards: [
      { id: 'CLM-0481', name: 'Bağırov A.', icd: 'I21.4', age: '2h', risk: 8 },
      { id: 'CLM-0480', name: 'Hüseynli S.', icd: 'O80', age: '4h', risk: 4 },
      { id: 'CLM-0478', name: 'Quliyev R.', icd: 'K35.8', age: '6h', risk: 12 },
    ] },
    { name: 'STANDARD', count: 18, accent: 'var(--accent-ice)', cards: [
      { id: 'CLM-0479', name: 'Məmmədova L.', icd: 'M16.1', age: '1d', risk: 22 },
      { id: 'CLM-0476', name: 'Aslanov F.', icd: 'J18.9', age: '1d', risk: 18 },
      { id: 'CLM-0475', name: 'Babayeva N.', icd: 'E11.9', age: '2d', risk: 28 },
    ] },
    { name: 'INVESTIGATE', count: 6, accent: '#E8A8B5', cards: [
      { id: 'CLM-0477', name: 'Ələkbərov F.', icd: 'I64', age: '3d', risk: 78 },
      { id: 'CLM-0473', name: 'Rzayev T.', icd: 'C50.9', age: '5d', risk: 92 },
    ] },
  ];
  return (
    <MockFrame title="SIĞORTA · TRIAGE BOARD" subtitle="POL-2026Q2 · 47 active">
      <div style={{
        height: '100%',
        padding: '8px 12px',
        display: mobile ? 'flex' : 'grid',
        gridTemplateColumns: mobile ? undefined : '1fr 1fr 1fr',
        gap: mobile ? 0 : 8,
        overflowX: mobile ? 'auto' : 'visible',
        scrollSnapType: mobile ? 'x mandatory' : undefined,
        WebkitOverflowScrolling: mobile ? 'touch' : undefined,
      }}>
        {cols.map(col => (
          <div key={col.name} style={{
            display: 'flex', flexDirection: 'column', gap: 6,
            minHeight: 0,
            ...(mobile ? { flex: '0 0 calc(100% - 16px)', scrollSnapAlign: 'center', paddingRight: 8 } : {}),
          }}>
            <div style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              padding: '4px 0 6px', borderBottom: `1px solid ${col.accent}`,
            }}>
              <span style={{ ...mono, fontSize: 9, letterSpacing: '0.12em', color: col.accent }}>{col.name}</span>
              <span style={{ ...mono, fontSize: 10, color: 'var(--text-tertiary)' }}>{col.count}</span>
            </div>
            {col.cards.map(card => (
              <div key={card.id} style={{
                padding: '7px 9px', borderRadius: 4,
                background: 'rgba(168,197,232,0.04)',
                border: '1px solid var(--border-glass)',
                fontSize: 10,
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                  <span style={{ ...mono, fontSize: 9, color: 'var(--text-tertiary)' }}>{card.id}</span>
                  <span style={{ ...mono, fontSize: 9, color: 'var(--text-tertiary)' }}>{card.age}</span>
                </div>
                <div style={{ color: 'var(--text-primary)', marginBottom: 3 }}>{card.name}</div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span style={{ ...mono, fontSize: 9, color: col.accent }}>{card.icd}</span>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                    <div style={{ width: 36, height: 3, borderRadius: 2, background: 'rgba(168,197,232,0.15)', position: 'relative', overflow: 'hidden' }}>
                      <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: `${card.risk}%`, background: card.accent }} />
                    </div>
                    <span style={{ ...mono, fontSize: 8, color: 'var(--text-tertiary)' }}>{card.risk}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        ))}
      </div>
    </MockFrame>
  );
}

/* ============================================================
   MockNeft — Split-pane: query history + document preview + caspian map
   ============================================================ */
function MockNeft() {
  const mobile = useMobileMock();
  const queries = [
    { q: 'wells in Bakı-Şamaxı block, H₂S > 200ppm', t: '14:22', n: 14, active: true },
    { q: 'Caspian-26 production decline 2003–2008', t: '14:18', n: 47 },
    { q: 'Şah Dəniz GR logs gas saturation', t: '14:11', n: 23 },
    { q: 'workover schedule ACG cluster Q3', t: '13:54', n: 8 },
  ];
  return (
    <MockFrame title="NEFT-AI · QUERY" subtitle="40yr corpus · 218k docs">
      <div style={{
        height: '100%',
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '180px 1fr',
        gap: 0,
      }}>
        {/* Query history — desktop only */}
        {!mobile && <div style={{ borderRight: '1px solid var(--border-glass)', padding: '8px 10px', display: 'flex', flexDirection: 'column', gap: 4, overflow: 'hidden' }}>
          <div style={{ ...tiny, marginBottom: 4 }}>RECENT</div>
          {queries.map((q, i) => (
            <div key={i} style={{
              padding: '6px 7px', borderRadius: 3,
              background: q.active ? 'rgba(168,197,232,0.1)' : 'transparent',
              border: q.active ? '1px solid rgba(168,197,232,0.3)' : '1px solid transparent',
              fontSize: 9, lineHeight: 1.4,
              color: q.active ? 'var(--text-primary)' : 'var(--text-secondary)',
            }}>
              <div style={{ marginBottom: 2 }}>{q.q}</div>
              <div style={{ display: 'flex', justifyContent: 'space-between', ...mono, fontSize: 8, color: 'var(--text-tertiary)' }}>
                <span>{q.t}</span><span>{q.n} hits</span>
              </div>
            </div>
          ))}
        </div>}
        {/* Right side */}
        <div style={{ display: 'grid', gridTemplateRows: mobile ? '1fr 36px' : '1fr 90px', minHeight: 0 }}>
          {/* Document preview with citation */}
          <div style={{ padding: '8px 12px', borderBottom: '1px solid var(--border-glass)', overflow: 'hidden' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
              <span style={{ ...mono, fontSize: 9, color: 'var(--accent-ice)' }}>seismic-204.pdf · p.18 · 1987</span>
              <span style={{ ...mono, fontSize: 9, color: 'var(--text-tertiary)' }}>cite [1/14]</span>
            </div>
            <div style={{
              padding: 10, borderRadius: 4,
              background: 'rgba(8,12,20,0.6)',
              border: '1px solid var(--border-glass)',
              fontSize: 9, lineHeight: 1.55, color: 'var(--text-secondary)',
            }}>
              <span>Well <em style={{ color: 'var(--text-primary)' }}>BS-204</em> intersects the Productive Series at -2,847m. Gas chromatography from cores 14–18 shows </span>
              <mark style={{ background: 'rgba(168,197,232,0.18)', color: 'var(--accent-ice-bright)', padding: '1px 3px', borderRadius: 2 }}>H₂S concentration of 247ppm</mark>
              <span>, exceeding the 200ppm operational threshold for personnel rotation. Adjacent wells BS-117 (312ppm), BS-091 (208ppm), BS-330 (289ppm) confirm the trend.</span>
            </div>
            <div style={{ marginTop: 6, ...mono, fontSize: 9, color: 'var(--text-tertiary)' }}>
              + 13 more citations across 1989–2018 surveys
            </div>
          </div>
          {/* Mini Caspian map with well markers — collapsed to chip on mobile */}
          {mobile ? (
            <div style={{
              padding: '8px 12px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              borderTop: '1px solid var(--border-glass)',
            }}>
              <span style={{ ...mono, fontSize: 9, color: 'var(--text-tertiary)', letterSpacing: '0.12em' }}>BAKI–ŞAMAXI · 4 wells</span>
              <span style={{ ...mono, fontSize: 9, color: '#E8A8B5' }}>↑ 312 · 289 · 247ppm</span>
            </div>
          ) : (
            <div style={{ padding: '6px 12px', position: 'relative' }}>
              <svg viewBox="0 0 300 80" style={{ width: '100%', height: '100%' }}>
                <path d="M30,50 C60,20 100,15 150,30 C200,45 250,40 280,55 L280,75 L30,75 Z" fill="rgba(168,197,232,0.05)" stroke="rgba(168,197,232,0.2)" strokeWidth="0.5" />
                {[[60, 45, 247], [85, 40, 312], [110, 38, 208], [140, 32, 289]].map(([x, y, ppm], i) => (
                  <g key={i}>
                    <circle cx={x} cy={y} r={ppm > 250 ? 4 : 3} fill={ppm > 250 ? '#E8A8B5' : '#E8D4A8'} stroke="rgba(0,0,0,0.4)" strokeWidth="0.5" />
                    <text x={x + 6} y={y + 2} style={{ fontFamily: 'var(--font-mono)', fontSize: 6, fill: 'var(--text-secondary)' }}>BS-{[204,117,91,330][i]}</text>
                  </g>
                ))}
                <text x="155" y="68" style={{ fontFamily: 'var(--font-mono)', fontSize: 6, fill: 'var(--text-tertiary)', letterSpacing: '0.1em' }}>BAKI–ŞAMAXI BLOCK · 40.42°N 49.86°E</text>
              </svg>
            </div>
          )}
        </div>
      </div>
    </MockFrame>
  );
}

/* ============================================================
   MockEnerji — Multi-panel: 72h forecast + weather + fuel mix + solar
   ============================================================ */
function MockEnerji() {
  const mobile = useMobileMock();
  const fc = Array.from({ length: 24 }, (_, i) => 1400 + 600 * Math.sin(i * 0.3) + 100 * Math.cos(i * 0.7));
  const ac = fc.map((v, i) => v + (i < 8 ? Math.sin(i) * 30 : 0));
  const path = (data) => data.map((v, i) => `${i === 0 ? 'M' : 'L'} ${i * (480 / 23)},${100 - ((v - 800) / 20)}`).join(' ');
  return (
    <MockFrame title="ENERJI · GRID FORECAST" subtitle="72h horizon · 4.2% MAPE">
      <div style={{ height: '100%', display: 'grid', gridTemplateRows: mobile ? '1fr' : '1fr auto', padding: '6px 12px 12px' }}>
        {/* Main forecast chart */}
        <div style={{ position: 'relative', minHeight: 0 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
            <span style={{ ...tiny }}>HOURLY LOAD · MW</span>
            <div style={{ display: 'flex', gap: 14, ...mono, fontSize: 9 }}>
              <span style={{ color: 'var(--accent-ice-bright)' }}>━ predicted</span>
              <span style={{ color: '#E8D4A8' }}>┄ actual</span>
              <span style={{ color: 'var(--text-tertiary)' }}>err 4.2% ↓</span>
            </div>
          </div>
          <svg viewBox="0 0 480 110" style={{ width: '100%', height: 130 }} preserveAspectRatio="none">
            <defs>
              <linearGradient id="fcGrad" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor="rgba(168,197,232,0.25)" />
                <stop offset="100%" stopColor="rgba(168,197,232,0)" />
              </linearGradient>
            </defs>
            {[20, 50, 80].map(y => <line key={y} x1="0" x2="480" y1={y} y2={y} stroke="rgba(168,197,232,0.08)" strokeWidth="0.5" />)}
            <path d={path(fc) + ' L 480,110 L 0,110 Z'} fill="url(#fcGrad)" />
            <path d={path(fc)} stroke="var(--accent-ice-bright)" strokeWidth="1.2" fill="none" />
            <path d={path(ac)} stroke="#E8D4A8" strokeWidth="1" fill="none" strokeDasharray="2,2" />
            {/* uncertainty band */}
            <path d={fc.map((v, i) => `${i === 0 ? 'M' : 'L'} ${i * (480 / 23)},${100 - ((v - 800) / 20) - 4}`).join(' ') + ' ' + fc.slice().reverse().map((v, i) => `L ${(23 - i) * (480 / 23)},${100 - ((v - 800) / 20) + 4}`).join(' ')} fill="rgba(168,197,232,0.07)" />
          </svg>
          <div style={{ display: 'flex', justifyContent: 'space-between', ...mono, fontSize: 8, color: 'var(--text-tertiary)' }}>
            <span>NOW</span><span>+24H</span><span>+48H</span><span>+72H</span>
          </div>
        </div>
        {/* Bottom: fuel mix donut + solar tile — desktop only */}
        {!mobile && <div style={{ display: 'grid', gridTemplateColumns: '120px 1fr 130px', gap: 10, marginTop: 8, paddingTop: 8, borderTop: '1px solid var(--border-glass)' }}>
          {/* Fuel mix donut */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <svg viewBox="0 0 60 60" style={{ width: 50, height: 50 }}>
              <circle cx="30" cy="30" r="22" fill="none" stroke="rgba(168,197,232,0.1)" strokeWidth="8" />
              {/* Gas 62% */}
              <circle cx="30" cy="30" r="22" fill="none" stroke="var(--accent-ice)" strokeWidth="8" strokeDasharray={`${62 * 1.38} ${100 * 1.38}`} strokeDashoffset="0" transform="rotate(-90 30 30)" />
              {/* Hydro 22% */}
              <circle cx="30" cy="30" r="22" fill="none" stroke="#A8E8C5" strokeWidth="8" strokeDasharray={`${22 * 1.38} ${100 * 1.38}`} strokeDashoffset={-62 * 1.38} transform="rotate(-90 30 30)" />
              {/* Solar 9% */}
              <circle cx="30" cy="30" r="22" fill="none" stroke="#E8D4A8" strokeWidth="8" strokeDasharray={`${9 * 1.38} ${100 * 1.38}`} strokeDashoffset={-(62 + 22) * 1.38} transform="rotate(-90 30 30)" />
              {/* Wind 4% / Import 3% */}
              <circle cx="30" cy="30" r="22" fill="none" stroke="rgba(232,168,181,0.6)" strokeWidth="8" strokeDasharray={`${7 * 1.38} ${100 * 1.38}`} strokeDashoffset={-(62 + 22 + 9) * 1.38} transform="rotate(-90 30 30)" />
            </svg>
            <div style={{ ...mono, fontSize: 8, color: 'var(--text-tertiary)', lineHeight: 1.7 }}>
              <div><span style={{ color: 'var(--accent-ice)' }}>━</span> Gas 62%</div>
              <div><span style={{ color: '#A8E8C5' }}>━</span> Hydro 22%</div>
              <div><span style={{ color: '#E8D4A8' }}>━</span> Solar 9%</div>
              <div><span style={{ color: 'rgba(232,168,181,0.6)' }}>━</span> Wind+Imp 7%</div>
            </div>
          </div>
          {/* Weather strip */}
          <div>
            <div style={tiny}>WEATHER · 72H</div>
            <div style={{ display: 'flex', gap: 4, marginTop: 6 }}>
              {[18, 21, 23, 22, 19, 17, 15].map((t, i) => (
                <div key={i} style={{ flex: 1, padding: '4px 0', textAlign: 'center', background: 'rgba(168,197,232,0.05)', border: '1px solid var(--border-glass)', borderRadius: 3 }}>
                  <div style={{ ...mono, fontSize: 8, color: 'var(--accent-ice)' }}>{t}°C</div>
                  <div style={{ ...mono, fontSize: 7, color: 'var(--text-tertiary)', marginTop: 2 }}>{['☼','☼','☁','☁','☂','☂','☁'][i]}</div>
                </div>
              ))}
            </div>
          </div>
          {/* Solar from satellite */}
          <div style={{
            padding: '6px 8px', borderRadius: 4,
            border: '1px solid var(--border-glass)',
            background: 'rgba(232,212,168,0.04)',
          }}>
            <div style={{ ...tiny }}>SAT · SOLAR FARM</div>
            <div className="serif" style={{ fontSize: 18, color: '#E8D4A8', lineHeight: 1, marginTop: 4 }}>147 MW</div>
            <div style={{ ...mono, fontSize: 8, color: 'var(--text-tertiary)', marginTop: 2 }}>Pirallahı · ↑ 12% vs. forecast</div>
          </div>
        </div>}
      </div>
    </MockFrame>
  );
}

/* ============================================================
   MockFintex — Single forensic transaction detail view
   ============================================================ */
function MockFintex() {
  const mobile = useMobileMock();
  const allReasons = [
    { code: 'VEL_24H_3X', label: '24h velocity 3.1× baseline', weight: 38 },
    { code: 'GEO_ANOMALY', label: 'IP country ≠ card country', weight: 26 },
    { code: 'MCC_NEW', label: 'New merchant category (5967)', weight: 14 },
    { code: 'AMT_OUTLIER', label: '92nd percentile amount', weight: 12 },
    { code: 'TIME_OUTLIER', label: '03:42 local · off-pattern', weight: 7 },
    { code: 'DEVICE_NEW', label: 'New device fingerprint', weight: 3 },
  ];
  const reasons = mobile ? allReasons.slice(0, 3) : allReasons;
  return (
    <MockFrame title="FINTEX · DECISION" subtitle="TX-7782344 · 31ms" accent="#E8A8B5">
      <div style={{ height: '100%', padding: '8px 14px 12px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        {/* Header row */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 10, alignItems: 'center', paddingBottom: 8, borderBottom: '1px solid var(--border-glass)' }}>
          <div>
            <div style={{ ...mono, fontSize: 9, color: 'var(--text-tertiary)', letterSpacing: '0.1em' }}>$2,400 · MCC 5967 · UNKNOWN MERCHANT · CN</div>
            <div className="serif" style={{ fontSize: 22, lineHeight: 1.05, color: 'var(--text-primary)', marginTop: 2 }}>BLOCK · velocity + geo</div>
          </div>
          <div style={{
            padding: '4px 10px', borderRadius: 3,
            background: 'rgba(232,168,181,0.12)', border: '1px solid rgba(232,168,181,0.4)',
            ...mono, fontSize: 10, color: '#E8A8B5', letterSpacing: '0.08em',
          }}>conf 94%</div>
        </div>
        {/* Reason codes bar chart */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 4, minHeight: 0 }}>
          <div style={{ ...tiny, marginBottom: 2 }}>REASON WEIGHTS · SHAP</div>
          {reasons.map(r => (
            <div key={r.code} style={{ display: 'grid', gridTemplateColumns: '110px 1fr 32px', gap: 8, alignItems: 'center', fontSize: 10 }}>
              <span style={{ ...mono, fontSize: 9, color: 'var(--text-secondary)' }}>{r.code}</span>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <div style={{ flex: '0 0 auto', width: `${r.weight * 1.6}%`, height: 8, background: '#E8A8B5', opacity: 0.7, borderRadius: 1 }} />
                <span style={{ ...mono, fontSize: 9, color: 'var(--text-tertiary)' }}>{r.label}</span>
              </div>
              <span style={{ ...mono, fontSize: 9, color: 'var(--text-secondary)', textAlign: 'right' }}>+{r.weight}</span>
            </div>
          ))}
        </div>
        {/* Audit trail */}
        <div style={{ paddingTop: 6, borderTop: '1px solid var(--border-glass)' }}>
          <div style={{ ...tiny, marginBottom: 4 }}>AUDIT TRAIL</div>
          <div style={{ display: 'flex', gap: 12, ...mono, fontSize: 8, color: 'var(--text-tertiary)' }}>
            <span>03:42:11.041 ingest</span>
            <span>·041 enrich</span>
            <span>·068 graph</span>
            <span>·072 <span style={{ color: '#E8A8B5' }}>decision</span></span>
          </div>
        </div>
      </div>
    </MockFrame>
  );
}

/* ============================================================
   MockVizual — Pipeline inspection frame + inspector report card
   ============================================================ */
function MockVizual() {
  const mobile = useMobileMock();
  return (
    <MockFrame title="VIZUAL · INSPECTION" subtitle="cam-04 · 30fps · ONNX edge">
      <div style={{
        height: '100%',
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '1fr 200px',
        gridTemplateRows: mobile ? '1fr 64px' : 'auto',
        gap: 0,
      }}>
        {/* Left: video frame with bounding boxes */}
        <div style={{ position: 'relative', borderRight: '1px solid var(--border-glass)', background: 'linear-gradient(180deg, #0a0e16, #060810)' }}>
          {/* synthetic pipe shape */}
          <svg viewBox="0 0 400 360" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
            {/* pipe walls */}
            <ellipse cx="200" cy="180" rx="180" ry="120" fill="none" stroke="rgba(168,197,232,0.18)" strokeWidth="1.2" />
            <ellipse cx="200" cy="180" rx="120" ry="80" fill="none" stroke="rgba(168,197,232,0.12)" strokeWidth="1" />
            <ellipse cx="200" cy="180" rx="60" ry="40" fill="none" stroke="rgba(168,197,232,0.08)" strokeWidth="0.8" />
            {/* texture lines */}
            {[40, 90, 140, 230, 280, 330].map((x, i) => (
              <line key={i} x1={x} y1="60" x2={x} y2="300" stroke="rgba(168,197,232,0.04)" strokeWidth="0.5" />
            ))}
            {/* defect: crack */}
            <g>
              <rect x="80" y="100" width="68" height="44" fill="none" stroke="#E8A8B5" strokeWidth="1.5" />
              <text x="80" y="96" style={{ fontFamily: 'var(--font-mono)', fontSize: 9, fill: '#E8A8B5' }}>CRACK · L1 · 0.94</text>
              <path d="M88,120 q12,-8 24,4 q10,10 28,-2" stroke="#E8A8B5" strokeWidth="0.8" fill="none" />
            </g>
            {/* defect: corrosion */}
            <g>
              <rect x="220" y="180" width="80" height="56" fill="none" stroke="#E8D4A8" strokeWidth="1.5" />
              <text x="220" y="176" style={{ fontFamily: 'var(--font-mono)', fontSize: 9, fill: '#E8D4A8' }}>CORROSION · L2 · 0.78</text>
              {[230, 250, 268, 280].map((x, i) => (
                <circle key={i} cx={x} cy={200 + (i % 2) * 12} r={2 + (i % 2)} fill="rgba(232,212,168,0.45)" />
              ))}
            </g>
            {/* OK weld */}
            <rect x="170" y="60" width="40" height="22" fill="none" stroke="rgba(168,232,197,0.6)" strokeWidth="1" strokeDasharray="3,2" />
            <text x="170" y="56" style={{ fontFamily: 'var(--font-mono)', fontSize: 8, fill: '#A8E8C5' }}>WELD ✓</text>
          </svg>
          {/* timestamp + recording */}
          <div style={{ position: 'absolute', bottom: 8, left: 10, ...mono, fontSize: 9, color: 'var(--text-secondary)' }}>
            REC · 00:14:22 · GPS 40.34°N 49.81°E
          </div>
          <div style={{ position: 'absolute', bottom: 8, right: 10, ...mono, fontSize: 9, color: 'var(--text-tertiary)' }}>
            SECT BS-PIPE-217 · KP 14.3
          </div>
        </div>
        {/* Right: inspector report card — collapsed on mobile */}
        {mobile ? (
          <div style={{
            padding: '8px 12px',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            borderTop: '1px solid var(--border-glass)',
            fontSize: 10,
          }}>
            <div style={{ display: 'flex', gap: 10 }}>
              <span style={{ ...mono, fontSize: 9, color: '#E8A8B5' }}>L1 Crack</span>
              <span style={{ ...mono, fontSize: 9, color: '#E8D4A8' }}>L2 Corrosion</span>
            </div>
            <span style={{ ...mono, fontSize: 8, color: 'var(--text-tertiary)', letterSpacing: '0.1em' }}>EDGE · ONNX · AIR-GAPPED</span>
          </div>
        ) : (
          <div style={{ padding: '8px 12px', display: 'flex', flexDirection: 'column', gap: 6, fontSize: 10 }}>
            <div style={{ ...tiny }}>INSPECTOR REPORT</div>
            <div style={{ ...mono, fontSize: 9, color: 'var(--text-tertiary)' }}>RPT-2026-04-022</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 4, marginTop: 4 }}>
              {[
                { sev: 'L1', color: '#E8A8B5', txt: 'Crack · 92×34mm · ø 14"' },
                { sev: 'L2', color: '#E8D4A8', txt: 'Corrosion · 280×140mm' },
                { sev: 'OK', color: '#A8E8C5', txt: 'Weld 217-A · cleared' },
              ].map((d, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 6px', background: 'rgba(168,197,232,0.04)', border: '1px solid var(--border-glass)', borderRadius: 3 }}>
                  <span style={{ ...mono, fontSize: 8, color: d.color, width: 22 }}>{d.sev}</span>
                  <span style={{ fontSize: 9, color: 'var(--text-secondary)' }}>{d.txt}</span>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 'auto', paddingTop: 8, borderTop: '1px solid var(--border-glass)', ...mono, fontSize: 8, color: 'var(--text-tertiary)', lineHeight: 1.6 }}>
              <div>EDGE · ONNX · YOLOv8s</div>
              <div>AIR-GAPPED · NO TELEMETRY</div>
              <div>SIGNED 2026-04-30 14:22</div>
            </div>
          </div>
        )}
      </div>
    </MockFrame>
  );
}

/* ============================================================
   MockStudio (repurposed) — Evaluation harness UI
   ============================================================ */
function MockStudio() {
  const mobile = useMobileMock();
  const allCats = [
    { name: 'AZ documents', n: 240, pass: 232, regr: 0 },
    { name: 'Russian medical', n: 80, pass: 76, regr: 1 },
    { name: 'OFAC fuzzy', n: 60, pass: 58, regr: 0 },
    { name: 'Edge: torn pages', n: 60, pass: 47, regr: 4 },
    { name: 'Liveness · low light', n: 40, pass: 36, regr: 2 },
  ];
  const cats = mobile ? allCats.slice(0, 3) : allCats;
  const total = cats.reduce((s, c) => s + c.n, 0);
  const pass = cats.reduce((s, c) => s + c.pass, 0);
  const passPct = ((pass / total) * 100).toFixed(1);
  return (
    <MockFrame title="EVAL HARNESS" subtitle="müştəri.eval · v3.4 vs v3.3">
      <div style={{ height: '100%', padding: '8px 14px 12px', display: 'grid', gridTemplateRows: 'auto 1fr auto', gap: 10 }}>
        {/* Header band */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
          {[
            ['TEST SET', 'kyc_az_v3'],
            ['SAMPLES', `n=${total}`],
            ['PASS RATE', `${passPct}%`],
          ].map(([k, v]) => (
            <div key={k}>
              <div style={tiny}>{k}</div>
              <div className="serif" style={{ fontSize: 22, color: 'var(--text-primary)', lineHeight: 1, marginTop: 4 }}>{v}</div>
            </div>
          ))}
        </div>
        {/* Categories */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minHeight: 0 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 60px 1fr 60px', gap: 8, ...tiny, paddingBottom: 4, borderBottom: '1px solid var(--border-glass)' }}>
            <span>CATEGORY</span><span>n</span><span>PASS</span><span>REGR</span>
          </div>
          {cats.map(c => {
            const pct = (c.pass / c.n) * 100;
            const ok = c.regr === 0 && pct >= 90;
            return (
              <div key={c.name} style={{ display: 'grid', gridTemplateColumns: '1.4fr 60px 1fr 60px', gap: 8, alignItems: 'center', padding: '5px 0', fontSize: 10, borderBottom: '1px dashed var(--border-glass)' }}>
                <span style={{ color: 'var(--text-secondary)' }}>{c.name}</span>
                <span style={{ ...mono, fontSize: 9, color: 'var(--text-tertiary)' }}>{c.n}</span>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <div style={{ flex: 1, height: 4, borderRadius: 2, background: 'rgba(168,197,232,0.12)', overflow: 'hidden' }}>
                    <div style={{ height: '100%', width: `${pct}%`, background: ok ? '#A8E8C5' : pct >= 75 ? '#E8D4A8' : '#E8A8B5' }} />
                  </div>
                  <span style={{ ...mono, fontSize: 9, color: 'var(--text-secondary)', minWidth: 32 }}>{pct.toFixed(1)}%</span>
                </div>
                <span style={{ ...mono, fontSize: 9, color: c.regr ? '#E8A8B5' : 'var(--text-tertiary)', textAlign: 'right' }}>{c.regr ? `+${c.regr}` : '0'}</span>
              </div>
            );
          })}
        </div>
        {/* Decision footer */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr auto', gap: 10, alignItems: 'center',
          padding: '6px 10px', borderRadius: 4,
          background: 'rgba(168,232,197,0.06)', border: '1px solid rgba(168,232,197,0.25)',
        }}>
          <div style={{ fontSize: 10, color: 'var(--text-secondary)' }}>
            <span style={{ color: '#A8E8C5', ...mono, fontSize: 10, letterSpacing: '0.1em' }}>SHIP </span>
            <span>· 7 regressions in edge bucket. Owner notified: nigar@codage.az</span>
          </div>
          <span style={{ ...mono, fontSize: 9, color: 'var(--text-tertiary)' }}>2026-04-30 11:14</span>
        </div>
      </div>
    </MockFrame>
  );
}

/* ============================================================
   MockTwin (repurposed) — HSE incident extraction from drilling report
   ============================================================ */
function MockTwin() {
  const mobile = useMobileMock();
  return (
    <MockFrame title="HSE EXTRACTION" subtitle="DDR-2026-04-22 · auto-parsed" accent="#E8D4A8">
      <div style={{
        height: '100%',
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '180px 1fr',
        gap: 0,
      }}>
        {/* Source PDF preview — desktop only */}
        {!mobile && <div style={{ borderRight: '1px solid var(--border-glass)', padding: '8px 10px', display: 'flex', flexDirection: 'column', gap: 4 }}>
          <div style={tiny}>SOURCE</div>
          <div style={{ ...mono, fontSize: 9, color: 'var(--accent-ice)', marginBottom: 4 }}>DDR-220422.pdf · p.4</div>
          <div style={{
            flex: 1, padding: 8, borderRadius: 3,
            background: 'rgba(8,12,20,0.6)',
            border: '1px solid var(--border-glass)',
            fontSize: 8, lineHeight: 1.55, color: 'var(--text-tertiary)',
            overflow: 'hidden',
          }}>
            <div style={{ fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 4 }}>Section 7 — HSE</div>
            <p style={{ marginBottom: 6 }}>0742 hrs: pressure spike on the manifold to 4,820 psi during BOP test, crew evacuated to muster point B. <mark style={{ background: 'rgba(232,212,168,0.18)', color: '#E8D4A8', padding: '0 2px' }}>No injuries.</mark> System stabilised at 0748 after closing kill line.</p>
            <p>Investigation: faulty pressure transducer on choke manifold (P/N 4218-A). Replaced 0820. Daily ops resumed 0915. Rig: <em style={{ color: 'var(--text-secondary)' }}>Heydər Əliyev</em> · Sector Şah Dəniz Bravo.</p>
          </div>
        </div>}
        {/* Extracted form */}
        <div style={{ padding: '8px 14px', display: 'flex', flexDirection: 'column', gap: 6 }}>
          <div style={tiny}>EXTRACTED FIELDS</div>
          {[
            ['CATEGORY', 'Pressure containment'],
            ['SEVERITY', 'L2 · Near-miss'],
            ['INJURIES', 'None'],
            ['DURATION', '6 min'],
            ['EQUIPMENT', 'Choke manifold · P/N 4218-A'],
            ['LOCATION', 'Şah Dəniz Bravo · 39.92°N 50.65°E'],
            ['REGULATORY', 'SOCAR HSE-04 · MFA notify req.'],
          ].map(([k, v]) => (
            <div key={k} style={{ display: 'grid', gridTemplateColumns: '92px 1fr', gap: 8, padding: '4px 0', borderBottom: '1px solid var(--border-glass)', fontSize: 10 }}>
              <span style={{ ...mono, fontSize: 8, color: 'var(--text-tertiary)', letterSpacing: '0.1em' }}>{k}</span>
              <span style={{ color: 'var(--text-primary)' }}>{v}</span>
            </div>
          ))}
          {/* Action items — desktop only; mobile shows compact severity strip */}
          {mobile ? (
            <div style={{ marginTop: 'auto', padding: '6px 8px', borderRadius: 3, background: 'rgba(232,212,168,0.06)', border: '1px solid rgba(232,212,168,0.25)', display: 'flex', justifyContent: 'space-between' }}>
              <span style={{ ...mono, fontSize: 9, color: '#E8D4A8', letterSpacing: '0.1em' }}>L2 · NEAR-MISS</span>
              <span style={{ ...mono, fontSize: 9, color: 'var(--text-tertiary)' }}>MFA NOTIFY · 24h</span>
            </div>
          ) : (
            <div style={{ marginTop: 'auto', padding: '6px 8px', borderRadius: 3, background: 'rgba(232,212,168,0.06)', border: '1px solid rgba(232,212,168,0.25)' }}>
              <div style={{ ...tiny, color: '#E8D4A8', marginBottom: 4 }}>ACTION ITEMS · 2</div>
              <div style={{ fontSize: 9, color: 'var(--text-secondary)', lineHeight: 1.5 }}>
                <div>1. File MFA notification within 24h (auto-drafted)</div>
                <div>2. Replace transducers across fleet · est. 18 units</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </MockFrame>
  );
}

Object.assign(window, { MockKYC, MockClaims, MockNeft, MockEnerji, MockFintex, MockVizual, MockStudio, MockTwin });