// Drover-Go · style sketches v2 — "feels like real software" set.
// Each artboard explores a DIFFERENT software UI paradigm + element vocabulary,
// not just a different palette. 480×640 fixed Win11 window unless noted.

const W = 480;
const H = 640;

const Win = ({ children, bg = '#fff', radius = 8, ring = 'rgba(0,0,0,.18)' }) => (
  <div style={{
    width: W, height: H, background: bg, borderRadius: radius,
    boxShadow: `0 0 0 1px ${ring}, 0 24px 60px rgba(0,0,0,.18)`,
    overflow: 'hidden', position: 'relative', display: 'flex', flexDirection: 'column'
  }}>{children}</div>
);

const Mark = ({ size = 14, color = '#0c8c7a' }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
    <circle cx="8" cy="8" r="6.5" stroke={color} strokeWidth="1.5"/>
    <path d="M5.5 5.5 8.5 8 5.5 10.5" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    <path d="M9 5.5 12 8 9 10.5" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" opacity=".5"/>
  </svg>
);

const TitleButtons = ({ color = '#666' }) => (
  <div style={{ marginLeft: 'auto', display: 'flex', gap: 4, color }}>
    <span style={{ width: 22, height: 22, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>⚙</span>
    <span style={{ width: 22, height: 22, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>—</span>
    <span style={{ width: 22, height: 22, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>×</span>
  </div>
);

// ═════════════════════════════════════════════════════════════════════════
// 1 · Fluent / Win11 native — the safe baseline
// ═════════════════════════════════════════════════════════════════════════
const SketchFluent = () => {
  const f = "'Segoe UI Variable','Segoe UI',system-ui,sans-serif";
  return (
    <Win bg="#f3f3f3" radius={10}>
      <div style={{ height: 36, display: 'flex', alignItems: 'center', padding: '0 14px', fontFamily: f, fontSize: 12.5, color: '#1a1a1a' }}>
        <Mark color="#0067c0" />
        <span style={{ marginLeft: 10, fontWeight: 600 }}>Drover-Go</span>
        <span style={{ marginLeft: 8, color: '#888', fontSize: 11 }}>0.4.2</span>
        <TitleButtons />
      </div>
      <div style={{ padding: 14, fontFamily: f, fontSize: 13.5, flex: 1, display: 'flex', flexDirection: 'column', gap: 10, overflow: 'hidden' }}>
        <div style={{ background: '#fff', borderRadius: 8, padding: 12, boxShadow: '0 0 0 1px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.04)' }}>
          <div style={{ fontSize: 12, fontWeight: 600, color: '#444', marginBottom: 10 }}>SOCKS5 Proxy</div>
          <div style={{ display: 'flex', gap: 8 }}>
            <FluentField flex={1} label="Host" value="95.165.72.59" />
            <FluentField width={88} label="Port" value="12334" />
          </div>
          <label style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 10, fontSize: 12.5 }}>
            <span style={{ width: 16, height: 16, borderRadius: 4, border: '1px solid #ccc', background: '#fff' }} />
            <span style={{ color: '#888' }}>Authentication</span>
          </label>
          <button style={{ marginTop: 12, width: '100%', height: 34, background: '#0067c0', color: '#fff', border: 'none', borderRadius: 4, fontFamily: f, fontWeight: 600, fontSize: 13, boxShadow: '0 1px 0 rgba(0,0,0,.1) inset, 0 1px 2px rgba(0,103,192,.3)' }}>Check connection</button>
        </div>
        <div style={{ background: '#fff', borderRadius: 8, padding: 12, boxShadow: '0 0 0 1px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.04)', flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
          <div style={{ fontSize: 12, fontWeight: 600, color: '#444', marginBottom: 10 }}>Status</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#0067c0', fontSize: 12.5, marginBottom: 8 }}>
            <span style={{ width: 14, height: 14, borderRadius: '50%', border: '2px solid #0067c0', borderRightColor: 'transparent', animation: 'spin 1s linear infinite' }} />
            Running diagnostics…
          </div>
          {[
            ['✓', 'TCP reachability', '12 ms', '#107c10'],
            ['✓', 'SOCKS5 greeting', 'ok', '#107c10'],
            ['◐', 'TCP CONNECT to Discord', '…', '#0067c0'],
            ['·', 'UDP ASSOCIATE', '', '#bbb'],
            ['·', 'UDP round-trip via STUN', '', '#bbb'],
            ['·', 'Discord API reachable', '', '#bbb'],
          ].map(([ic, name, val, c], i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', padding: '4px 0', fontSize: 12.5 }}>
              <span style={{ width: 18, color: c, fontWeight: 600 }}>{ic}</span>
              <span style={{ flex: 1 }}>{name}</span>
              <span style={{ color: '#888', fontFamily: "'Cascadia Mono', monospace", fontSize: 11.5 }}>{val}</span>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button style={{ flex: 1, height: 36, background: '#0067c0', color: '#fff', border: 'none', borderRadius: 4, fontWeight: 600, opacity: 0.4 }}>Start proxying</button>
          <button style={{ flex: 1, height: 36, background: '#fff', border: '1px solid #ddd', borderRadius: 4, color: '#aaa' }}>Stop</button>
        </div>
      </div>
      <style>{`@keyframes spin{to{transform:rotate(360deg)}}`}</style>
    </Win>
  );
};
const FluentField = ({ label, value, flex, width }) => (
  <label style={{ flex, width, display: 'block' }}>
    <div style={{ fontSize: 11, color: '#888', marginBottom: 3 }}>{label}</div>
    <div style={{ height: 30, background: '#fafafa', borderRadius: 4, padding: '0 10px', display: 'flex', alignItems: 'center', fontSize: 13, color: '#1a1a1a', borderBottom: '1.5px solid #888', boxShadow: '0 0 0 1px rgba(0,0,0,.06)' }}>{value}</div>
  </label>
);

// ═════════════════════════════════════════════════════════════════════════
// 2 · Sidebar nav (VS Code / Postman / Tower) — left rail with sections
// ═════════════════════════════════════════════════════════════════════════
const SketchSidebar = () => {
  const f = "'Inter', system-ui, sans-serif";
  const m = "'JetBrains Mono', monospace";
  return (
    <Win bg="#1e1f22" radius={8} ring="rgba(255,255,255,.06)">
      <div style={{ height: 30, display: 'flex', alignItems: 'center', padding: '0 12px', borderBottom: '1px solid #2a2c30', fontFamily: f, fontSize: 12, color: '#cbd1d9' }}>
        <Mark color="#4f8eff" />
        <span style={{ marginLeft: 8, fontWeight: 500 }}>Drover-Go</span>
        <span style={{ marginLeft: 8, color: '#666' }}>—  proxy: 95.165.72.59:12334</span>
        <TitleButtons color="#888" />
      </div>
      <div style={{ flex: 1, display: 'flex', minHeight: 0 }}>
        {/* sidebar */}
        <div style={{ width: 56, background: '#191a1d', borderRight: '1px solid #2a2c30', display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '8px 0', gap: 4, fontFamily: f }}>
          {[['◉', 'Proxy', true], ['◇', 'Diagnose'], ['≋', 'Traffic'], ['≣', 'Logs'], ['⚙', 'Settings']].map(([ic, l, on], i) => (
            <div key={i} style={{ width: 40, height: 40, borderRadius: 6, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', color: on ? '#fff' : '#888', background: on ? '#2c3140' : 'transparent', borderLeft: on ? '2px solid #4f8eff' : '2px solid transparent', position: 'relative', fontSize: 14 }}>
              <span>{ic}</span>
              <span style={{ fontSize: 8, marginTop: 1 }}>{l}</span>
            </div>
          ))}
        </div>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, fontFamily: f, fontSize: 13, color: '#cbd1d9' }}>
          {/* breadcrumb / tabs */}
          <div style={{ height: 30, display: 'flex', alignItems: 'flex-end', padding: '0 0 0 0', borderBottom: '1px solid #2a2c30', background: '#191a1d' }}>
            <div style={{ padding: '6px 12px', background: '#1e1f22', borderRight: '1px solid #2a2c30', borderTop: '2px solid #4f8eff', fontSize: 11.5, color: '#fff' }}>● Proxy</div>
            <div style={{ padding: '6px 12px', borderRight: '1px solid #2a2c30', fontSize: 11.5, color: '#888' }}>diagnostic.run</div>
          </div>
          <div style={{ flex: 1, padding: 14, display: 'flex', flexDirection: 'column', gap: 12, overflow: 'hidden' }}>
            <div>
              <div style={{ fontSize: 10.5, letterSpacing: '.1em', color: '#888', textTransform: 'uppercase', marginBottom: 8 }}>Endpoint</div>
              <div style={{ display: 'flex', gap: 6, alignItems: 'stretch' }}>
                <div style={{ background: '#2c3140', border: '1px solid #3a4050', borderRight: 'none', padding: '0 10px', fontFamily: m, fontSize: 11, color: '#4f8eff', display: 'flex', alignItems: 'center', borderRadius: '4px 0 0 4px' }}>SOCKS5</div>
                <div style={{ flex: 1, background: '#15171b', border: '1px solid #3a4050', padding: '0 10px', display: 'flex', alignItems: 'center', fontFamily: m, fontSize: 12, color: '#fff' }}>95.165.72.59</div>
                <div style={{ width: 70, background: '#15171b', border: '1px solid #3a4050', borderLeft: 'none', padding: '0 10px', display: 'flex', alignItems: 'center', fontFamily: m, fontSize: 12, color: '#fff', borderRadius: '0 4px 4px 0' }}>:12334</div>
                <button style={{ padding: '0 16px', background: '#4f8eff', color: '#fff', border: 'none', borderRadius: 4, fontWeight: 600, fontSize: 12.5 }}>Run ▸</button>
              </div>
            </div>
            <div style={{ flex: 1, minHeight: 0 }}>
              <div style={{ fontSize: 10.5, letterSpacing: '.1em', color: '#888', textTransform: 'uppercase', marginBottom: 8 }}>Diagnostic results</div>
              <div style={{ background: '#15171b', border: '1px solid #2a2c30', borderRadius: 5, fontFamily: m, fontSize: 11.5 }}>
                {[
                  ['✓', 'tcp_reachability', '12 ms', '#21d07a'],
                  ['✓', 'socks5_greeting', 'ok', '#21d07a'],
                  ['✓', 'socks5_authentication', 'ok', '#21d07a'],
                  ['✓', 'tcp_connect_discord', '38 ms', '#21d07a'],
                  ['✗', 'udp_associate', 'EPERM: blocked', '#ff5e5e'],
                  ['—', 'udp_stun_rtt', 'skipped', '#666'],
                  ['—', 'discord_api', 'skipped', '#666'],
                ].map(([ic, n, v, c], i) => (
                  <div key={i} style={{ display: 'flex', padding: '5px 10px', borderBottom: i < 6 ? '1px solid #1f2126' : 'none' }}>
                    <span style={{ width: 16, color: c }}>{ic}</span>
                    <span style={{ flex: 1, color: c === '#666' ? '#666' : '#cbd1d9' }}>{n}</span>
                    <span style={{ color: c }}>{v}</span>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 10, padding: 8, background: '#3a1f1f', border: '1px solid #6e2a2a', borderRadius: 5, fontSize: 11.5, color: '#ff9e9e' }}>
                ⚠ 1 of 7 checks failed. UDP voice/screenshare won't work.
              </div>
            </div>
          </div>
          {/* status bar */}
          <div style={{ height: 22, display: 'flex', alignItems: 'center', padding: '0 10px', background: '#15171b', borderTop: '1px solid #2a2c30', fontFamily: m, fontSize: 10.5, color: '#888' }}>
            <span style={{ color: '#ff9e9e' }}>● 6/7</span>
            <span style={{ marginLeft: 12 }}>idle</span>
            <span style={{ marginLeft: 'auto' }}>UTF-8 · LF · drover.toml</span>
          </div>
        </div>
      </div>
    </Win>
  );
};

// ═════════════════════════════════════════════════════════════════════════
// 3 · Step wizard / Tab progression — DigiCert / Tunnelblick connect-flow
// ═════════════════════════════════════════════════════════════════════════
const SketchWizard = () => {
  const f = "'Inter', system-ui, sans-serif";
  return (
    <Win bg="#fafafa" radius={8} ring="rgba(0,0,0,.12)">
      <div style={{ height: 32, display: 'flex', alignItems: 'center', padding: '0 12px', borderBottom: '1px solid #ececec', fontFamily: f, fontSize: 12, color: '#1a1a1a' }}>
        <Mark color="#1e6fd9" />
        <span style={{ marginLeft: 8, fontWeight: 600 }}>Drover-Go · Setup</span>
        <TitleButtons />
      </div>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', fontFamily: f, color: '#1a1a1a' }}>
        {/* stepper */}
        <div style={{ display: 'flex', padding: '14px 18px', gap: 0, alignItems: 'center', borderBottom: '1px solid #ececec', background: '#fff' }}>
          {[['1', 'Configure', true], ['2', 'Verify', true], ['3', 'Connect', false]].map(([n, l, done], i) => (
            <React.Fragment key={i}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 22, height: 22, borderRadius: '50%', background: i === 1 ? '#1e6fd9' : (done ? '#1e6fd9' : '#ddd'), color: '#fff', fontSize: 11, fontWeight: 600, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  {done && i !== 1 ? '✓' : n}
                </span>
                <span style={{ fontSize: 12, fontWeight: i === 1 ? 600 : 400, color: i === 1 ? '#1a1a1a' : '#888' }}>{l}</span>
              </div>
              {i < 2 && <div style={{ flex: 1, height: 1, background: i === 0 ? '#1e6fd9' : '#ddd', margin: '0 10px' }} />}
            </React.Fragment>
          ))}
        </div>
        <div style={{ flex: 1, padding: '20px 22px', display: 'flex', flexDirection: 'column', gap: 14, overflow: 'hidden' }}>
          <div>
            <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600 }}>Verifying your proxy</h2>
            <div style={{ fontSize: 12.5, color: '#666', marginTop: 4 }}>We're running 7 checks against <span style={{ fontFamily: "'JetBrains Mono',monospace", color: '#1a1a1a' }}>95.165.72.59:12334</span> to make sure Discord will work end-to-end.</div>
          </div>
          {/* progress + ring */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, padding: 14, background: '#fff', border: '1px solid #ececec', borderRadius: 8 }}>
            <svg width="64" height="64" viewBox="0 0 64 64">
              <circle cx="32" cy="32" r="26" fill="none" stroke="#eee" strokeWidth="6" />
              <circle cx="32" cy="32" r="26" fill="none" stroke="#1e6fd9" strokeWidth="6" strokeLinecap="round" strokeDasharray="163.4" strokeDashoffset="70" transform="rotate(-90 32 32)" />
              <text x="32" y="36" textAnchor="middle" fontSize="14" fontWeight="600" fill="#1a1a1a">4/7</text>
            </svg>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 600, fontSize: 13.5 }}>Testing UDP relay…</div>
              <div style={{ fontSize: 12, color: '#666', marginTop: 2 }}>This usually takes 5–15 seconds.</div>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4, fontSize: 12.5 }}>
            {[
              ['✓', 'TCP reachability', '12 ms', '#21a655'],
              ['✓', 'SOCKS5 greeting', 'ok', '#21a655'],
              ['✓', 'SOCKS5 authentication', 'ok', '#21a655'],
              ['✓', 'TCP CONNECT to Discord', '38 ms', '#21a655'],
              ['◐', 'UDP ASSOCIATE', 'running…', '#1e6fd9'],
              ['·', 'UDP round-trip via STUN', '', '#bbb'],
              ['·', 'Discord API reachable', '', '#bbb'],
            ].map(([ic, n, v, c], i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', padding: '5px 10px', background: i === 4 ? '#eef4fc' : 'transparent', borderRadius: 4 }}>
                <span style={{ width: 18, color: c, fontWeight: 600 }}>{ic}</span>
                <span style={{ flex: 1, color: c === '#bbb' ? '#999' : '#1a1a1a' }}>{n}</span>
                <span style={{ color: c, fontFamily: "'JetBrains Mono',monospace", fontSize: 11.5 }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
        <div style={{ height: 50, display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 8, padding: '0 18px', borderTop: '1px solid #ececec', background: '#fff' }}>
          <button style={{ height: 30, padding: '0 14px', background: '#fff', border: '1px solid #ddd', borderRadius: 4, fontSize: 12.5 }}>Back</button>
          <button style={{ height: 30, padding: '0 14px', background: '#1e6fd9', color: '#fff', border: 'none', borderRadius: 4, fontSize: 12.5, fontWeight: 600, opacity: 0.5 }}>Continue →</button>
        </div>
      </div>
    </Win>
  );
};

// ═════════════════════════════════════════════════════════════════════════
// 4 · Network monitor — gauges, sparklines, multi-pane (Wireshark / Activity)
// ═════════════════════════════════════════════════════════════════════════
const SketchMonitor = () => {
  const f = "'Inter', system-ui, sans-serif";
  const m = "'JetBrains Mono', monospace";
  return (
    <Win bg="#fcfcfc" radius={6} ring="rgba(0,0,0,.12)">
      <div style={{ height: 30, display: 'flex', alignItems: 'center', padding: '0 12px', borderBottom: '1px solid #e6e6e6', fontFamily: f, fontSize: 12, background: '#f5f5f5' }}>
        <Mark color="#0c8c7a" />
        <span style={{ marginLeft: 8, fontWeight: 600 }}>Drover-Go</span>
        <span style={{ marginLeft: 8, fontFamily: m, fontSize: 10, color: '#21a655' }}>● ACTIVE 4m 12s</span>
        <TitleButtons />
      </div>
      <div style={{ flex: 1, padding: 12, display: 'flex', flexDirection: 'column', gap: 10, fontFamily: f, fontSize: 12, color: '#222', overflow: 'hidden' }}>
        {/* compact endpoint */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 10px', background: '#fff', border: '1px solid #e6e6e6', borderRadius: 5 }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#21a655' }} />
          <span style={{ fontFamily: m, fontSize: 11.5 }}>95.165.72.59:12334</span>
          <span style={{ marginLeft: 'auto', color: '#888', fontSize: 11 }}>SOCKS5 · auth</span>
          <button style={{ background: 'transparent', border: '1px solid #ddd', borderRadius: 4, padding: '2px 8px', fontSize: 11 }}>Edit</button>
        </div>
        {/* meters */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 8 }}>
          <Gauge label="Upload" v="142" unit="KB/s" pct={28} c="#0c8c7a" />
          <Gauge label="Download" v="2.8" unit="MB/s" pct={84} c="#1e6fd9" />
        </div>
        {/* sparkline panel */}
        <div style={{ background: '#fff', border: '1px solid #e6e6e6', borderRadius: 5, padding: 10 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', marginBottom: 6 }}>
            <span style={{ fontSize: 10.5, letterSpacing: '.06em', color: '#888', textTransform: 'uppercase' }}>Throughput · last 60s</span>
            <span style={{ marginLeft: 'auto', fontFamily: m, fontSize: 11, color: '#222' }}>peak 3.4 MB/s</span>
          </div>
          <svg width="100%" height="60" viewBox="0 0 400 60" preserveAspectRatio="none">
            <path d="M0 50 L20 45 L40 30 L60 35 L80 18 L100 25 L120 12 L140 22 L160 8 L180 18 L200 28 L220 15 L240 30 L260 20 L280 38 L300 25 L320 32 L340 18 L360 24 L380 14 L400 20 L400 60 L0 60Z" fill="#1e6fd9" opacity=".15" />
            <path d="M0 50 L20 45 L40 30 L60 35 L80 18 L100 25 L120 12 L140 22 L160 8 L180 18 L200 28 L220 15 L240 30 L260 20 L280 38 L300 25 L320 32 L340 18 L360 24 L380 14 L400 20" fill="none" stroke="#1e6fd9" strokeWidth="1.5" />
          </svg>
        </div>
        {/* connections table */}
        <div style={{ flex: 1, background: '#fff', border: '1px solid #e6e6e6', borderRadius: 5, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'flex', padding: '6px 10px', background: '#f5f5f5', borderBottom: '1px solid #e6e6e6', fontSize: 10.5, color: '#888', letterSpacing: '.06em', textTransform: 'uppercase' }}>
            <span style={{ width: 50 }}>Proto</span>
            <span style={{ flex: 1 }}>Endpoint</span>
            <span style={{ width: 80, textAlign: 'right' }}>Up</span>
            <span style={{ width: 80, textAlign: 'right' }}>Down</span>
          </div>
          {[
            ['UDP', 'voice-eu-rtc-1.discord', '142 KB/s', '2.4 MB/s', '#1e6fd9'],
            ['TCP', 'gateway.discord:443', '8 KB/s', '12 KB/s', '#0c8c7a'],
            ['TCP', 'cdn.discordapp:443', '0', '380 KB/s', '#0c8c7a'],
            ['TCP', 'media.discordapp:443', '0', '8 KB/s', '#0c8c7a'],
          ].map((r, i) => (
            <div key={i} style={{ display: 'flex', padding: '5px 10px', fontFamily: m, fontSize: 11, borderBottom: i < 3 ? '1px solid #f0f0f0' : 'none' }}>
              <span style={{ width: 50, color: r[4], fontWeight: 600 }}>{r[0]}</span>
              <span style={{ flex: 1 }}>{r[1]}</span>
              <span style={{ width: 80, textAlign: 'right', color: '#666' }}>{r[2]}</span>
              <span style={{ width: 80, textAlign: 'right', color: '#666' }}>{r[3]}</span>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button style={{ flex: 1, height: 32, background: '#21a655', color: '#fff', border: 'none', borderRadius: 4, fontWeight: 600, fontSize: 12.5 }}>● Active · 4m 12s</button>
          <button style={{ flex: 1, height: 32, background: '#fff', border: '1px solid #ddd', borderRadius: 4, fontSize: 12.5 }}>Stop</button>
        </div>
      </div>
    </Win>
  );
};
const Gauge = ({ label, v, unit, pct, c }) => (
  <div style={{ background: '#fff', border: '1px solid #e6e6e6', borderRadius: 5, padding: 10 }}>
    <div style={{ display: 'flex', alignItems: 'baseline' }}>
      <span style={{ fontSize: 10.5, letterSpacing: '.06em', color: '#888', textTransform: 'uppercase' }}>{label}</span>
    </div>
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 4 }}>
      <span style={{ fontSize: 22, fontWeight: 600, fontFamily: "'JetBrains Mono',monospace" }}>{v}</span>
      <span style={{ fontSize: 11, color: '#888' }}>{unit}</span>
    </div>
    <div style={{ height: 4, background: '#f0f0f0', borderRadius: 2, marginTop: 6, overflow: 'hidden' }}>
      <div style={{ width: pct + '%', height: '100%', background: c }} />
    </div>
  </div>
);

// ═════════════════════════════════════════════════════════════════════════
// 5 · Inspector / Properties — devtools-style key:value list
// ═════════════════════════════════════════════════════════════════════════
const SketchInspector = () => {
  const f = "'Inter', system-ui, sans-serif";
  const m = "'JetBrains Mono', monospace";
  return (
    <Win bg="#fff" radius={6} ring="rgba(0,0,0,.12)">
      <div style={{ height: 28, display: 'flex', alignItems: 'center', padding: '0 12px', borderBottom: '1px solid #ececec', fontFamily: f, fontSize: 11.5 }}>
        <Mark color="#1a1a1a" size={12} />
        <span style={{ marginLeft: 8, fontWeight: 600 }}>Drover-Go</span>
        <span style={{ marginLeft: 8, color: '#888', fontSize: 10.5 }}>0.4.2</span>
        <TitleButtons />
      </div>
      {/* tabs */}
      <div style={{ height: 28, display: 'flex', borderBottom: '1px solid #ececec', fontFamily: f, fontSize: 11.5, background: '#fafafa' }}>
        {['Inspector', 'Network', 'Console', 'Settings'].map((t, i) => (
          <div key={t} style={{ padding: '0 14px', display: 'flex', alignItems: 'center', borderBottom: i === 0 ? '2px solid #1a1a1a' : '2px solid transparent', color: i === 0 ? '#1a1a1a' : '#888', fontWeight: i === 0 ? 600 : 400 }}>{t}</div>
        ))}
      </div>
      <div style={{ flex: 1, fontFamily: m, fontSize: 11.5, color: '#1a1a1a', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
        <Group title="proxy" expanded>
          <KV k="protocol" v="SOCKS5" t="enum" />
          <KV k="host" v={<input style={{ all: 'unset', width: '100%', fontFamily: m, fontSize: 11.5, color: '#1a1a1a' }} defaultValue="95.165.72.59" />} editable />
          <KV k="port" v="12334" t="int" editable />
          <KV k="auth.enabled" v="true" t="bool" />
          <KV k="auth.user" v="alice" t="str" editable />
          <KV k="auth.pass" v="••••••••" t="str" editable />
        </Group>
        <Group title="diagnostic.last_run" expanded>
          <KV k="started_at" v="14:32:01" t="time" />
          <KV k="duration" v="3.2 s" t="dur" />
          <KV k="passed" v="7" t="int" color="#21a655" />
          <KV k="failed" v="0" t="int" />
          <KV k="checks[0].name" v="tcp_reachability" />
          <KV k="checks[0].rtt" v="12 ms" />
          <KV k="checks[1].name" v="socks5_greeting" />
          <KV k="checks[2].name" v="socks5_authentication" />
        </Group>
        <Group title="state" expanded>
          <KV k="status" v="ready" t="enum" color="#21a655" />
          <KV k="active" v="false" t="bool" />
        </Group>
      </div>
      <div style={{ height: 32, display: 'flex', gap: 6, padding: '0 8px', alignItems: 'center', borderTop: '1px solid #ececec', background: '#fafafa' }}>
        <button style={{ height: 22, padding: '0 10px', background: '#fff', border: '1px solid #ccc', borderRadius: 3, fontFamily: f, fontSize: 11 }}>Run diagnostic</button>
        <button style={{ height: 22, padding: '0 10px', background: '#1a1a1a', color: '#fff', border: 'none', borderRadius: 3, fontFamily: f, fontSize: 11, fontWeight: 600 }}>▸ Start proxying</button>
        <span style={{ marginLeft: 'auto', fontFamily: m, fontSize: 10.5, color: '#888' }}>14 props · saved</span>
      </div>
    </Win>
  );
};
const Group = ({ title, expanded, children }) => (
  <div>
    <div style={{ padding: '4px 10px', background: '#f0f0f0', fontSize: 10.5, fontWeight: 600, color: '#444', display: 'flex', alignItems: 'center' }}>
      <span style={{ marginRight: 4, fontSize: 9 }}>{expanded ? '▼' : '▶'}</span>{title}
    </div>
    <div>{children}</div>
  </div>
);
const KV = ({ k, v, t, color, editable }) => (
  <div style={{ display: 'flex', padding: '3px 10px', borderBottom: '1px solid #f5f5f5', alignItems: 'center', fontSize: 11 }}>
    <span style={{ width: 150, color: '#888' }}>{k}</span>
    <span style={{ flex: 1, color: color || '#1a1a1a', background: editable ? '#f9f9f9' : 'transparent', borderRadius: 2, padding: '1px 4px' }}>{v}</span>
    {t && <span style={{ marginLeft: 8, fontSize: 9.5, color: '#bbb', textTransform: 'uppercase' }}>{t}</span>}
  </div>
);

// ═════════════════════════════════════════════════════════════════════════
// 6 · Command palette + form — Raycast / Linear / cmd+k feel
// ═════════════════════════════════════════════════════════════════════════
const SketchPalette = () => {
  const f = "'Inter', system-ui, sans-serif";
  const m = "'JetBrains Mono', monospace";
  return (
    <Win bg="#0f1015" radius={14} ring="rgba(255,255,255,.08)">
      <div style={{ height: 32, display: 'flex', alignItems: 'center', padding: '0 14px', fontFamily: f, fontSize: 12, color: '#cbd1d9' }}>
        <Mark color="#a5b4ff" />
        <span style={{ marginLeft: 8, fontWeight: 500 }}>Drover-Go</span>
        <TitleButtons color="#666" />
      </div>
      <div style={{ flex: 1, padding: 14, fontFamily: f, color: '#e8e8ea', display: 'flex', flexDirection: 'column', gap: 12, overflow: 'hidden' }}>
        {/* command bar */}
        <div style={{ background: '#15171c', border: '1px solid #2a2d36', borderRadius: 9, padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 10, boxShadow: '0 0 0 3px rgba(165,180,255,.08)' }}>
          <span style={{ color: '#a5b4ff', fontSize: 14 }}>⌘</span>
          <input style={{ all: 'unset', flex: 1, fontFamily: f, fontSize: 13.5, color: '#fff' }} placeholder="Search commands…" defaultValue="check con" />
          <span style={{ fontFamily: m, fontSize: 10, color: '#666', padding: '2px 6px', background: '#1a1c22', border: '1px solid #2a2d36', borderRadius: 4 }}>esc</span>
        </div>
        {/* suggestion */}
        <div style={{ background: '#15171c', borderRadius: 9, padding: 6 }}>
          <div style={{ padding: '8px 10px', borderRadius: 6, background: '#23264a', display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ width: 22, height: 22, borderRadius: 5, background: '#a5b4ff', color: '#0f1015', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 12 }}>▸</span>
            <span style={{ flex: 1, fontSize: 13 }}>Check connection</span>
            <span style={{ fontFamily: m, fontSize: 10.5, color: '#a5b4ff' }}>↵</span>
          </div>
          <div style={{ padding: '8px 10px', display: 'flex', alignItems: 'center', gap: 10, color: '#888' }}>
            <span style={{ width: 22, height: 22, borderRadius: 5, background: '#1a1c22', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 12 }}>●</span>
            <span style={{ flex: 1, fontSize: 13 }}>Start proxying</span>
            <span style={{ fontFamily: m, fontSize: 10.5 }}>⇧↵</span>
          </div>
        </div>
        {/* Form below — proxy quick-edit */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 10, minHeight: 0 }}>
          <div style={{ fontSize: 10.5, letterSpacing: '.1em', color: '#666', textTransform: 'uppercase' }}>Proxy</div>
          <div style={{ display: 'flex', gap: 8 }}>
            <PalField flex={1} label="Host" value="95.165.72.59" />
            <PalField width={86} label="Port" value="12334" />
          </div>
          <div style={{ fontSize: 10.5, letterSpacing: '.1em', color: '#666', textTransform: 'uppercase', marginTop: 4 }}>Last run · 7/7 passed</div>
          {[
            ['tcp_reachability', '12 ms'],
            ['socks5_greeting', 'ok'],
            ['udp_associate', 'relay 1.2.3.4'],
            ['udp_stun_rtt', '24 ms'],
            ['discord_api', '200'],
          ].map(([n, v], i) => (
            <div key={i} style={{ display: 'flex', padding: '4px 10px', fontFamily: m, fontSize: 11.5, background: '#15171c', borderRadius: 5 }}>
              <span style={{ color: '#21d07a', marginRight: 8 }}>✓</span>
              <span style={{ flex: 1, color: '#cbd1d9' }}>{n}</span>
              <span style={{ color: '#888' }}>{v}</span>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 0', fontFamily: m, fontSize: 10.5, color: '#666' }}>
          <span><kbd style={{ background: '#1a1c22', border: '1px solid #2a2d36', padding: '1px 5px', borderRadius: 3, color: '#cbd1d9' }}>↵</kbd> run</span>
          <span><kbd style={{ background: '#1a1c22', border: '1px solid #2a2d36', padding: '1px 5px', borderRadius: 3, color: '#cbd1d9' }}>⇧↵</kbd> start</span>
          <span style={{ marginLeft: 'auto' }}>idle · ready</span>
        </div>
      </div>
    </Win>
  );
};
const PalField = ({ label, value, flex, width }) => (
  <label style={{ flex, width }}>
    <div style={{ fontSize: 10.5, color: '#888', marginBottom: 4 }}>{label}</div>
    <div style={{ height: 32, background: '#15171c', border: '1px solid #2a2d36', borderRadius: 7, padding: '0 10px', display: 'flex', alignItems: 'center', fontSize: 13, color: '#fff', fontFamily: "'JetBrains Mono',monospace" }}>{value}</div>
  </label>
);

// ═════════════════════════════════════════════════════════════════════════
// 7 · Big toggle / Hero — TunnelBear / NordVPN big-button connect
// ═════════════════════════════════════════════════════════════════════════
const SketchHero = () => {
  const f = "'Inter', system-ui, sans-serif";
  const m = "'JetBrains Mono', monospace";
  return (
    <Win bg="#0e1426" radius={14} ring="rgba(255,255,255,.06)">
      <div style={{ height: 36, display: 'flex', alignItems: 'center', padding: '0 14px', fontFamily: f, fontSize: 12.5, color: '#cbd1d9' }}>
        <Mark color="#5dd4b3" />
        <span style={{ marginLeft: 10, fontWeight: 600 }}>Drover-Go</span>
        <span style={{ marginLeft: 'auto', fontSize: 11, color: '#5dd4b3' }}>● connected</span>
        <TitleButtons color="#666" />
      </div>
      <div style={{ flex: 1, padding: '20px 18px', fontFamily: f, color: '#fff', display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'center', overflow: 'hidden' }}>
        {/* Big circular button */}
        <div style={{ width: 180, height: 180, borderRadius: '50%', background: 'radial-gradient(circle at 35% 30%, #5dd4b3 0%, #2da085 60%, #1a6e5b 100%)', boxShadow: '0 0 60px rgba(93,212,179,.4), 0 0 0 6px rgba(93,212,179,.1), 0 0 0 12px rgba(93,212,179,.05)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', position: 'relative', marginTop: 12 }}>
          <div style={{ position: 'absolute', inset: -20, borderRadius: '50%', border: '1px solid rgba(93,212,179,.2)', animation: 'pulse 2s infinite' }} />
          <span style={{ fontSize: 36 }}>⏻</span>
          <span style={{ fontSize: 11, letterSpacing: '.2em', marginTop: 4, opacity: .9 }}>ACTIVE</span>
        </div>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: 22, fontWeight: 600 }}>Discord is protected</div>
          <div style={{ fontSize: 12.5, color: '#7a8499', marginTop: 4, fontFamily: m }}>via 95.165.72.59 · 4m 12s</div>
        </div>
        {/* Stats row */}
        <div style={{ display: 'flex', gap: 0, width: '100%', background: '#15192a', borderRadius: 10, padding: 12, justifyContent: 'space-around' }}>
          {[
            ['↑', '142', 'KB/s'],
            ['↓', '2.8', 'MB/s'],
            ['◇', '14', 'tcp'],
            ['◈', '3', 'udp'],
          ].map(([k, v, u], i) => (
            <div key={i} style={{ textAlign: 'center' }}>
              <div style={{ fontSize: 11, color: '#5dd4b3' }}>{k}</div>
              <div style={{ fontSize: 18, fontWeight: 600, fontFamily: m, marginTop: 2 }}>{v}</div>
              <div style={{ fontSize: 9.5, color: '#7a8499', letterSpacing: '.06em', textTransform: 'uppercase' }}>{u}</div>
            </div>
          ))}
        </div>
        <button style={{ width: '100%', height: 38, background: 'transparent', color: '#cbd1d9', border: '1px solid #2a3042', borderRadius: 9, fontWeight: 500, fontSize: 13 }}>Disconnect</button>
        <div style={{ width: '100%', fontSize: 11, color: '#5a6178', display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ fontSize: 10 }}>▸</span><span>Logs (3 new)</span>
        </div>
      </div>
      <style>{`@keyframes pulse{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.08);opacity:0}}`}</style>
    </Win>
  );
};

// ═════════════════════════════════════════════════════════════════════════
// 8 · Toolbar + ribbon — old-school Office / Audacity feel
// ═════════════════════════════════════════════════════════════════════════
const SketchToolbar = () => {
  const f = "'Segoe UI', system-ui, sans-serif";
  const m = "'Consolas', 'JetBrains Mono', monospace";
  return (
    <Win bg="#ebebeb" radius={4} ring="rgba(0,0,0,.18)">
      <div style={{ height: 26, display: 'flex', alignItems: 'center', padding: '0 8px', background: 'linear-gradient(180deg,#f5f5f5,#dcdcdc)', borderBottom: '1px solid #b8b8b8', fontFamily: f, fontSize: 11 }}>
        <Mark color="#1a1a1a" size={12} />
        <span style={{ marginLeft: 6, fontWeight: 600 }}>Drover-Go</span>
        <span style={{ marginLeft: 8, color: '#666' }}>— [Connected]</span>
        <TitleButtons />
      </div>
      {/* menu bar */}
      <div style={{ height: 22, display: 'flex', padding: '0 6px', background: '#ebebeb', borderBottom: '1px solid #c8c8c8', fontFamily: f, fontSize: 11, alignItems: 'center', gap: 2 }}>
        {['File', 'Edit', 'Run', 'View', 'Tools', 'Help'].map(m => (
          <span key={m} style={{ padding: '2px 8px', borderRadius: 2 }}>{m}</span>
        ))}
      </div>
      {/* ribbon */}
      <div style={{ display: 'flex', padding: '6px 8px', background: 'linear-gradient(180deg,#f5f5f5,#e8e8e8)', borderBottom: '1px solid #c8c8c8', gap: 4 }}>
        <Tool icon="▶" label="Run" primary />
        <Tool icon="●" label="Start" />
        <Tool icon="■" label="Stop" disabled />
        <div style={{ width: 1, background: '#c8c8c8', margin: '4px 6px' }} />
        <Tool icon="⚙" label="Config" />
        <Tool icon="⎘" label="Copy" />
        <div style={{ width: 1, background: '#c8c8c8', margin: '4px 6px' }} />
        <Tool icon="≣" label="Logs" />
      </div>
      <div style={{ flex: 1, padding: 10, display: 'flex', flexDirection: 'column', gap: 8, fontFamily: f, fontSize: 11.5, color: '#1a1a1a', overflow: 'hidden' }}>
        <Fieldset label="SOCKS5 Proxy">
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <span style={{ width: 40 }}>Host:</span>
            <div style={{ flex: 1, height: 22, background: '#fff', border: '1px solid #888', boxShadow: '1px 1px 0 #ccc inset', padding: '0 6px', display: 'flex', alignItems: 'center', fontFamily: m, fontSize: 11.5 }}>95.165.72.59</div>
            <span>Port:</span>
            <div style={{ width: 70, height: 22, background: '#fff', border: '1px solid #888', boxShadow: '1px 1px 0 #ccc inset', padding: '0 6px', display: 'flex', alignItems: 'center', fontFamily: m, fontSize: 11.5 }}>12334</div>
          </div>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginTop: 6 }}>
            <span style={{ width: 14, height: 14, border: '1px solid #888', background: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 10 }}>✓</span>
            <span>Authentication</span>
            <span style={{ marginLeft: 12 }}>User:</span>
            <div style={{ flex: 1, height: 22, background: '#fff', border: '1px solid #888', boxShadow: '1px 1px 0 #ccc inset', padding: '0 6px', display: 'flex', alignItems: 'center' }}>alice</div>
          </div>
        </Fieldset>
        <Fieldset label="Diagnostics" flex>
          <div style={{ background: '#fff', border: '1px solid #888', boxShadow: '1px 1px 0 #ccc inset', flex: 1, fontFamily: m, fontSize: 11, overflow: 'auto' }}>
            {[
              ['✓', 'TCP reachability', 'PASS · 12 ms'],
              ['✓', 'SOCKS5 greeting', 'PASS · ok'],
              ['✓', 'SOCKS5 authentication', 'PASS · ok'],
              ['✓', 'TCP CONNECT to Discord', 'PASS · 38 ms'],
              ['✓', 'UDP ASSOCIATE', 'PASS · relay 1.2.3.4'],
              ['✓', 'UDP round-trip via STUN', 'PASS · 24 ms'],
              ['✓', 'Discord API reachable', 'PASS · 200'],
            ].map((r, i) => (
              <div key={i} style={{ display: 'flex', padding: '3px 8px', borderBottom: i < 6 ? '1px dotted #ddd' : 'none' }}>
                <span style={{ width: 14, color: '#107c10' }}>{r[0]}</span>
                <span style={{ flex: 1 }}>{r[1]}</span>
                <span style={{ color: '#666' }}>{r[2]}</span>
              </div>
            ))}
          </div>
        </Fieldset>
      </div>
      {/* status bar */}
      <div style={{ height: 22, display: 'flex', padding: '0 8px', background: '#dcdcdc', borderTop: '1px solid #b8b8b8', alignItems: 'center', fontSize: 10.5, fontFamily: f, gap: 12 }}>
        <span>Ready</span>
        <span>● 7/7</span>
        <span>↑ 142 KB/s   ↓ 2.8 MB/s</span>
        <span style={{ marginLeft: 'auto', fontFamily: m }}>uptime 4m 12s</span>
      </div>
    </Win>
  );
};
const Tool = ({ icon, label, primary, disabled }) => (
  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '2px 8px', borderRadius: 2, background: primary ? 'linear-gradient(180deg,#fff,#e0e0e0)' : 'transparent', border: primary ? '1px solid #888' : '1px solid transparent', minWidth: 44, opacity: disabled ? 0.4 : 1 }}>
    <span style={{ fontSize: 16, color: primary ? '#107c10' : '#1a1a1a' }}>{icon}</span>
    <span style={{ fontSize: 10, marginTop: 1 }}>{label}</span>
  </div>
);
const Fieldset = ({ label, children, flex }) => (
  <div style={{ border: '1px solid #b8b8b8', borderRadius: 2, padding: '10px 8px 8px', position: 'relative', background: '#f5f5f5', flex: flex ? 1 : undefined, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
    <span style={{ position: 'absolute', top: -8, left: 8, background: '#ebebeb', padding: '0 4px', fontSize: 10.5, fontWeight: 600 }}>{label}</span>
    {children}
  </div>
);

// ═════════════════════════════════════════════════════════════════════════
// 9 · Modern dev tool — Studio (Linear-ish, restrained dark)
// ═════════════════════════════════════════════════════════════════════════
const SketchStudio = () => {
  const f = "'Inter', sans-serif";
  return (
    <Win bg="#0e0f12" radius={12} ring="rgba(255,255,255,.08)">
      <div style={{ height: 36, display: 'flex', alignItems: 'center', padding: '0 14px', fontFamily: f, fontSize: 12.5, color: '#e8e8ea' }}>
        <Mark color="#7c8aff" />
        <span style={{ marginLeft: 10, fontWeight: 600 }}>Drover-Go</span>
        <span style={{ marginLeft: 8, color: '#5a5d6a', fontSize: 11 }}>0.4.2</span>
        <TitleButtons color="#777a86" />
      </div>
      <div style={{ padding: 14, fontFamily: f, color: '#e8e8ea', flex: 1, display: 'flex', flexDirection: 'column', gap: 12, overflow: 'hidden' }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.04em', color: '#a1a3ad', marginBottom: 8, textTransform: 'uppercase' }}>SOCKS5 Proxy</div>
          <div style={{ display: 'flex', gap: 8 }}>
            <StField flex={1} label="Host" value="95.165.72.59" />
            <StField width={86} label="Port" value="12334" />
          </div>
          <label style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 10, fontSize: 12.5, color: '#a1a3ad' }}>
            <span style={{ width: 14, height: 14, borderRadius: 4, background: '#7c8aff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 10 }}>✓</span>
            Authentication
          </label>
          <button style={{ marginTop: 12, width: '100%', height: 34, background: '#7c8aff', color: '#0a0a0c', border: 'none', borderRadius: 7, fontWeight: 600, fontSize: 13 }}>Check connection</button>
        </div>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.04em', color: '#a1a3ad', marginBottom: 8, display: 'flex', textTransform: 'uppercase' }}>
            Status <span style={{ marginLeft: 'auto', fontSize: 11, color: '#21d07a', fontWeight: 500, textTransform: 'none' }}>● All systems</span>
          </div>
          <div style={{ background: '#15171c', border: '1px solid #1f2228', borderRadius: 9, padding: 4, flex: 1 }}>
            {[
              ['TCP reachability', '12 ms'],
              ['SOCKS5 greeting', 'ok'],
              ['SOCKS5 authentication', 'ok'],
              ['TCP CONNECT to Discord', '38 ms'],
              ['UDP ASSOCIATE', 'relay 1.2.3.4'],
              ['UDP round-trip via STUN', '24 ms'],
              ['Discord API reachable', '200'],
            ].map(([n, v], i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', padding: '6px 8px', borderRadius: 6, fontSize: 12.5 }}>
                <span style={{ width: 14, height: 14, borderRadius: '50%', background: '#21d07a22', border: '1px solid #21d07a', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#21d07a', fontSize: 9, marginRight: 10 }}>✓</span>
                <span style={{ flex: 1 }}>{n}</span>
                <span style={{ color: '#777a86', fontFamily: "'Geist Mono',monospace", fontSize: 11.5 }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button style={{ flex: 1, height: 36, background: '#7c8aff', color: '#0a0a0c', border: 'none', borderRadius: 7, fontWeight: 600 }}>Start proxying</button>
          <button style={{ flex: 1, height: 36, background: '#1a1c22', color: '#e8e8ea', border: '1px solid #2a2d36', borderRadius: 7 }}>Stop</button>
        </div>
      </div>
    </Win>
  );
};
const StField = ({ label, value, flex, width }) => (
  <label style={{ flex, width }}>
    <div style={{ fontSize: 11, color: '#777a86', marginBottom: 4 }}>{label}</div>
    <div style={{ height: 32, background: '#15171c', border: '1px solid #1f2228', borderRadius: 7, padding: '0 10px', display: 'flex', alignItems: 'center', fontSize: 13 }}>{value}</div>
  </label>
);

// ═════════════════════════════════════════════════════════════════════════
// 10 · Pipeline / DAG — visualize the test chain as a flow
// ═════════════════════════════════════════════════════════════════════════
const SketchPipeline = () => {
  const f = "'Inter', system-ui, sans-serif";
  const m = "'JetBrains Mono', monospace";
  const Node = ({ x, y, label, status, sub }) => {
    const c = status === 'pass' ? '#21a655' : status === 'fail' ? '#e85a4f' : status === 'run' ? '#1e6fd9' : '#aaa';
    const bg = status === 'pass' ? '#e8f7ee' : status === 'fail' ? '#fdebe9' : status === 'run' ? '#eaf1fb' : '#f4f4f4';
    return (
      <g transform={`translate(${x},${y})`}>
        <rect width="120" height="40" rx="6" fill={bg} stroke={c} strokeWidth="1.5" />
        <circle cx="14" cy="20" r="5" fill={c} />
        <text x="26" y="17" fontSize="11" fontWeight="600" fill="#1a1a1a" fontFamily={f}>{label}</text>
        <text x="26" y="30" fontSize="9.5" fill="#666" fontFamily={m}>{sub}</text>
      </g>
    );
  };
  const Arrow = ({ from, to, dashed }) => (
    <line x1={from[0]} y1={from[1]} x2={to[0]} y2={to[1]} stroke="#bbb" strokeWidth="1.5" strokeDasharray={dashed ? '3 3' : ''} markerEnd="url(#ar)" />
  );
  return (
    <Win bg="#fafafa" radius={6}>
      <div style={{ height: 30, display: 'flex', alignItems: 'center', padding: '0 12px', borderBottom: '1px solid #ececec', fontFamily: f, fontSize: 12 }}>
        <Mark color="#1a1a1a" size={12} />
        <span style={{ marginLeft: 8, fontWeight: 600 }}>Drover-Go</span>
        <span style={{ marginLeft: 8, color: '#888', fontSize: 11 }}>· pipeline view</span>
        <TitleButtons />
      </div>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        {/* compact endpoint */}
        <div style={{ padding: 10, display: 'flex', gap: 6, alignItems: 'center', borderBottom: '1px solid #ececec', background: '#fff' }}>
          <span style={{ fontSize: 11, color: '#888', fontFamily: m }}>SOCKS5</span>
          <input style={{ flex: 1, height: 26, padding: '0 8px', border: '1px solid #d0d0d0', borderRadius: 4, fontFamily: m, fontSize: 11.5 }} defaultValue="95.165.72.59" />
          <input style={{ width: 70, height: 26, padding: '0 8px', border: '1px solid #d0d0d0', borderRadius: 4, fontFamily: m, fontSize: 11.5 }} defaultValue="12334" />
          <button style={{ height: 26, padding: '0 12px', background: '#1e6fd9', color: '#fff', border: 'none', borderRadius: 4, fontWeight: 600, fontSize: 11.5 }}>Run ▸</button>
        </div>
        {/* DAG */}
        <div style={{ flex: 1, padding: 12, background: 'radial-gradient(circle at 1px 1px, #ddd 1px, transparent 0) 0 0/16px 16px', overflow: 'auto' }}>
          <svg width="456" height="380" viewBox="0 0 456 380">
            <defs>
              <marker id="ar" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#bbb"/></marker>
            </defs>
            <Node x={20} y={20} label="TCP reach" sub="12 ms" status="pass" />
            <Arrow from={[140, 40]} to={[160, 40]} />
            <Node x={160} y={20} label="SOCKS5 greet" sub="ok" status="pass" />
            <Arrow from={[280, 40]} to={[300, 40]} />
            <Node x={300} y={20} label="SOCKS5 auth" sub="ok" status="pass" />
            <Arrow from={[360, 60]} to={[360, 90]} />
            <Node x={300} y={90} label="CONNECT discord" sub="38 ms" status="pass" />
            <Arrow from={[300, 110]} to={[180, 160]} />
            <Arrow from={[300, 110]} to={[180, 220]} />
            <Node x={60} y={140} label="UDP ASSOCIATE" sub="running…" status="run" />
            <Arrow from={[180, 160]} to={[60, 240]} dashed />
            <Node x={60} y={220} label="UDP STUN RTT" sub="pending" status="pending" />
            <Node x={60} y={300} label="Discord API" sub="pending" status="pending" />
            <Arrow from={[180, 240]} to={[60, 320]} dashed />
          </svg>
        </div>
        <div style={{ padding: 10, borderTop: '1px solid #ececec', background: '#fff', display: 'flex', gap: 6, alignItems: 'center' }}>
          <span style={{ fontSize: 11, color: '#1e6fd9', fontFamily: m }}>● 4/7 running</span>
          <span style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
            <button style={{ height: 28, padding: '0 14px', background: '#fff', border: '1px solid #ddd', borderRadius: 4, fontSize: 12 }}>Cancel</button>
            <button style={{ height: 28, padding: '0 14px', background: '#1e6fd9', color: '#fff', border: 'none', borderRadius: 4, fontSize: 12, fontWeight: 600, opacity: 0.5 }}>Start proxying</button>
          </span>
        </div>
      </div>
    </Win>
  );
};

// ═════════════════════════════════════════════════════════════════════════
// 11 · Bauhaus — geometric blocks, primary colors, asymmetric grid
// ═════════════════════════════════════════════════════════════════════════
const SketchBauhaus = () => {
  const f = "'Space Grotesk', sans-serif";
  return (
    <Win bg="#f4ede0" radius={0} ring="#000">
      <div style={{ height: 32, display: 'flex', alignItems: 'center', padding: '0 12px', borderBottom: '3px solid #000', fontFamily: f, fontSize: 13, fontWeight: 700 }}>
        <span style={{ width: 14, height: 14, borderRadius: '50%', background: '#e63946' }} />
        <span style={{ width: 14, height: 14, background: '#1d3557', marginLeft: 6 }} />
        <span style={{ width: 0, height: 0, borderLeft: '7px solid transparent', borderRight: '7px solid transparent', borderBottom: '14px solid #f1c40f', marginLeft: 6 }} />
        <span style={{ marginLeft: 12 }}>DROVER-GO</span>
        <span style={{ marginLeft: 'auto', fontWeight: 400, fontSize: 11 }}>v0.4.2 · ⚙ · — · ×</span>
      </div>
      <div style={{ flex: 1, padding: 12, fontFamily: f, color: '#000', display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: 'auto 1fr auto', gap: 8 }}>
        <div style={{ gridColumn: '1 / -1', background: '#1d3557', color: '#fff', padding: 14, border: '3px solid #000' }}>
          <div style={{ fontSize: 10, letterSpacing: '.15em', opacity: .7 }}>FORM 01</div>
          <div style={{ fontSize: 18, fontWeight: 700, marginTop: 2 }}>SOCKS5 PROXY</div>
          <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
            <BaField flex={1} label="HOST" value="95.165.72.59" dark />
            <BaField width={84} label="PORT" value="12334" dark />
          </div>
        </div>
        <button style={{ background: '#e63946', color: '#fff', border: '3px solid #000', padding: '10px', fontFamily: f, fontSize: 13, fontWeight: 700, letterSpacing: '.06em' }}>CHECK →</button>
        <button style={{ background: '#f1c40f', color: '#000', border: '3px solid #000', padding: '10px', fontFamily: f, fontSize: 13, fontWeight: 700, letterSpacing: '.06em' }}>● START</button>
        <div style={{ gridColumn: '1 / -1', border: '3px solid #000', background: '#fff', padding: 14, minHeight: 0, overflow: 'hidden' }}>
          <div style={{ fontSize: 10, letterSpacing: '.15em', opacity: .6 }}>STATUS · 7/7</div>
          <div style={{ fontSize: 16, fontWeight: 700, marginBottom: 10 }}>ALL CHECKS PASSED</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4px 14px' }}>
            {[
              ['TCP reach', '12ms'],
              ['SOCKS5 greet', 'ok'],
              ['SOCKS5 auth', 'ok'],
              ['CONNECT', '38ms'],
              ['UDP assoc', 'ok'],
              ['UDP STUN', '24ms'],
              ['API', '200'],
            ].map(([n, v], i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', fontSize: 12, borderBottom: '1px solid #000' }}>
                <span style={{ width: 8, height: 8, background: '#e63946', marginRight: 8 }} />
                <span style={{ flex: 1 }}>{n}</span>
                <span style={{ fontWeight: 700 }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Win>
  );
};
const BaField = ({ label, value, flex, width, dark }) => (
  <label style={{ flex, width }}>
    <div style={{ fontSize: 9.5, marginBottom: 3, opacity: .7, letterSpacing: '.1em' }}>{label}</div>
    <div style={{ height: 30, background: dark ? '#fff' : '#000', color: dark ? '#000' : '#fff', border: '2px solid #000', padding: '0 8px', display: 'flex', alignItems: 'center', fontSize: 13, fontWeight: 600 }}>{value}</div>
  </label>
);

// ═════════════════════════════════════════════════════════════════════════
// 12 · Brutalist — hard borders, mono, acid lime
// ═════════════════════════════════════════════════════════════════════════
const SketchBrutalist = () => {
  const m = "'Geist Mono', 'JetBrains Mono', monospace";
  return (
    <Win bg="#f3f1e8" radius={0} ring="#000">
      <div style={{ height: 38, display: 'flex', alignItems: 'center', padding: '0 12px', borderBottom: '2px solid #000', fontFamily: m, fontSize: 12, color: '#000', background: '#e8e4d2' }}>
        <span style={{ fontWeight: 700 }}>▶ DROVER-GO</span>
        <span style={{ marginLeft: 8, fontSize: 10 }}>v0.4.2</span>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 6, fontSize: 14, fontWeight: 700 }}>
          <span>[⚙]</span><span>[—]</span><span>[X]</span>
        </div>
      </div>
      <div style={{ padding: 14, fontFamily: m, fontSize: 12, color: '#000', flex: 1, display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div style={{ border: '2px solid #000', background: '#fff', padding: 10 }}>
          <div style={{ fontSize: 11, fontWeight: 700, marginBottom: 8 }}>// SOCKS5 PROXY</div>
          <div style={{ display: 'flex', gap: 6 }}>
            <BrField flex={1} label="HOST" value="95.165.72.59" />
            <BrField width={92} label="PORT" value="12334" />
          </div>
          <div style={{ marginTop: 10, fontSize: 12 }}>[X] AUTHENTICATION</div>
          <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
            <BrField flex={1} label="LOGIN" value="alice" />
            <BrField flex={1} label="PASSWORD" value="********" />
          </div>
          <button style={{ marginTop: 12, width: '100%', height: 36, background: '#c5f74d', border: '2px solid #000', boxShadow: '4px 4px 0 #000', fontFamily: m, fontWeight: 700, fontSize: 13, cursor: 'pointer' }}>► CHECK CONNECTION</button>
        </div>
        <div style={{ border: '2px solid #000', background: '#fff', padding: 10, flex: 1 }}>
          <div style={{ fontSize: 11, fontWeight: 700, marginBottom: 8 }}>// STATUS · 7/7 OK</div>
          {[
            ['[OK]', 'TCP_REACHABILITY', '12ms'],
            ['[OK]', 'SOCKS5_GREETING', 'ok'],
            ['[OK]', 'SOCKS5_AUTH', 'ok'],
            ['[OK]', 'CONNECT_DISCORD', '38ms'],
            ['[OK]', 'UDP_ASSOCIATE', 'relay 1.2.3.4'],
            ['[OK]', 'UDP_STUN_RTT', '24ms'],
            ['[OK]', 'DISCORD_API', '200'],
          ].map(([s, n, v], i) => (
            <div key={i} style={{ display: 'flex', padding: '3px 0', borderBottom: i < 6 ? '1px dashed #999' : 'none' }}>
              <span style={{ width: 38, fontWeight: 700 }}>{s}</span>
              <span style={{ flex: 1 }}>{n}</span>
              <span>{v}</span>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          <button style={{ flex: 1, height: 38, background: '#c5f74d', border: '2px solid #000', boxShadow: '4px 4px 0 #000', fontFamily: m, fontWeight: 700 }}>► START</button>
          <button style={{ flex: 1, height: 38, background: '#fff', border: '2px solid #000', boxShadow: '4px 4px 0 #000', fontFamily: m, fontWeight: 700 }}>■ STOP</button>
        </div>
      </div>
    </Win>
  );
};
const BrField = ({ label, value, flex, width }) => (
  <label style={{ flex, width }}>
    <div style={{ fontSize: 9.5, marginBottom: 3 }}>{label}</div>
    <div style={{ height: 30, border: '2px solid #000', padding: '0 8px', display: 'flex', alignItems: 'center', fontSize: 12.5, background: '#fff' }}>{value}</div>
  </label>
);

// ═════════════════════════════════════════════════════════════════════════
// SketchesApp
// ═════════════════════════════════════════════════════════════════════════

const SKETCHES = [
  { id: 'fluent', label: '01 · Fluent / Win11 native', el: <SketchFluent /> },
  { id: 'sidebar', label: '02 · IDE sidebar (VS Code-ish)', el: <SketchSidebar /> },
  { id: 'wizard', label: '03 · Wizard / stepper', el: <SketchWizard /> },
  { id: 'monitor', label: '04 · Network monitor (gauges)', el: <SketchMonitor /> },
  { id: 'inspector', label: '05 · Inspector / properties', el: <SketchInspector /> },
  { id: 'palette', label: '06 · Command palette (cmd+k)', el: <SketchPalette /> },
  { id: 'hero', label: '07 · Big toggle (VPN-style)', el: <SketchHero /> },
  { id: 'toolbar', label: '08 · Toolbar / ribbon (classic)', el: <SketchToolbar /> },
  { id: 'studio', label: '09 · Studio (Linear-ish)', el: <SketchStudio /> },
  { id: 'pipeline', label: '10 · Pipeline / DAG view', el: <SketchPipeline /> },
  { id: 'bauhaus', label: '11 · Bauhaus blocks', el: <SketchBauhaus /> },
  { id: 'brutalist', label: '12 · Brutalist (mono+lime)', el: <SketchBrutalist /> },
];

const SketchesApp = () => (
  <DesignCanvas>
    <DCSection id="about" title="Drover-Go" subtitle="12 directions — every one looks/works like real software, not a marketing site. Different UI paradigms (sidebar, wizard, palette, ribbon, DAG, gauges…), not just different palettes.">
      <div data-dc-static style={{ width: 720, padding: '20px 24px', background: '#fff', borderRadius: 10, boxShadow: '0 0 0 1px rgba(0,0,0,.06)', fontSize: 13, lineHeight: 1.55, color: '#3a3530' }}>
        <div style={{ fontWeight: 600, marginBottom: 8, fontSize: 14 }}>What changed</div>
        <p style={{ margin: '0 0 8px' }}>Removed the "marketing" stylings (ticket, synthwave, soft pastel, editorial serif). Replaced with software-native paradigms — each card explores a <em>different way to organize the same UI</em>, not just a different paint job:</p>
        <ul style={{ margin: '0 0 8px', paddingLeft: 18 }}>
          <li><b>Layout patterns:</b> sidebar IDE · wizard/stepper · pipeline/DAG · ribbon · palette+form · big-toggle hero</li>
          <li><b>Element vocab:</b> gauges + sparklines · key/value inspector · fieldsets · tabs+breadcrumbs · status bar · toolbar buttons</li>
          <li><b>Aesthetic:</b> Fluent (Win11) · classic Office · Linear/Studio · brutalist · Bauhaus blocks</li>
        </ul>
        <p style={{ margin: 0, color: '#7a7065' }}>Tell me which paradigm/aesthetic combo to take forward.</p>
      </div>
    </DCSection>
    <DCSection id="sketches" title="12 directions" subtitle="Drag to reorder. Click any artboard's expand icon to focus.">
      {SKETCHES.map(s => (
        <DCArtboard key={s.id} id={s.id} label={s.label} width={W} height={H}>
          {s.el}
        </DCArtboard>
      ))}
    </DCSection>
  </DesignCanvas>
);

// Expose individual sketches so other files (e.g. shortlist) can render them.
Object.assign(window, {
  SketchFluent, SketchSidebar, SketchWizard, SketchMonitor,
  SketchInspector, SketchPalette, SketchHero, SketchToolbar,
  SketchStudio, SketchPipeline, SketchBauhaus, SketchBrutalist,
});
