// Screens B: Outreach, Sync, Storage, Log, Systems, Settings

const { useState: uS3, useEffect: uE3, useMemo: uM3 } = React;

// ===== Outreach screen =====
function OutreachScreen() {
  const o = window.VELUNA_DATA.outreach;
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 14 }}>
      {[
        { label: 'Sequenzen aktiv', v: 8,  color: '#22D3EE', sub: '+2 diese Woche' },
        { label: 'Gesendet (24h)',  v: 311, color: '#60A5FA', sub: 'Open: 64%' },
        { label: 'Antworten',       v: 87, color: '#A78BFA', sub: 'Reply: 28%' },
        { label: 'Meetings',        v: 42, color: '#F472B6', sub: 'Booked: 14%' },
        { label: 'Won',             v: 19, color: '#10B981', sub: 'CR: 6.1%' },
        { label: 'Bounce-Rate',     v: '2.1%', color: '#F59E0B', sub: 'Schwelle: 5%' }
      ].map(s => (
        <div key={s.label} className="card" style={{ gridColumn: 'span 2' }}>
          <div style={{ fontSize: 11, color: 'var(--text-3)' }}>{s.label}</div>
          <div className="num" style={{ fontSize: 22, fontWeight: 600, color: s.color, marginTop: 4 }}>{s.v}</div>
          <div style={{ fontSize: 10.5, color: 'var(--text-4)', marginTop: 2 }}>{s.sub}</div>
        </div>
      ))}

      <div className="card" style={{ gridColumn: 'span 7' }}>
        <div className="card-header"><div className="card-title">Conversion-Funnel</div><span className="pill pill-info">Letzte 30 Tage</span></div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 8 }}>
          {o.funnel.map(f => <window.FunnelRow key={f.label} {...f} />)}
        </div>
        <div style={{ marginTop: 18, padding: 14, background: 'var(--bg-3)', borderRadius: 10, border: '1px solid var(--border-1)' }}>
          <div style={{ fontSize: 11, color: 'var(--text-4)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 10 }}>Trend (30 Tage)</div>
          <BigSparkline />
        </div>
      </div>

      <div className="card" style={{ gridColumn: 'span 5' }}>
        <div className="card-header"><div className="card-title">Aktive Sequenzen</div><button className="btn btn-primary"><window.Icons.plus size={12} /> Neue Sequenz</button></div>
        {[
          { name: 'Cold A — DACH SaaS',     status: 'active', sent: 142, reply: 31, ctr: 22 },
          { name: 'Cold B — Manufacturing', status: 'active', sent: 98,  reply: 18, ctr: 18 },
          { name: 'Re-engagement Q2',       status: 'paused', sent: 52,  reply: 12, ctr: 23 },
          { name: 'Event Follow-up',        status: 'active', sent: 19,  reply: 9,  ctr: 47 }
        ].map(s => (
          <div key={s.name} style={{ padding: 12, background: 'var(--bg-2)', border: '1px solid var(--border-1)', borderRadius: 10, marginBottom: 8 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
              <span style={{ fontSize: 12.5, fontWeight: 500, color: 'var(--text-1)' }}>{s.name}</span>
              <span className={`pill ${s.status === 'active' ? 'pill-success' : 'pill-warning'}`}><span className="pill-dot pulse" />{s.status === 'active' ? 'Aktiv' : 'Pausiert'}</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, fontSize: 11 }}>
              <Metric label="Gesendet" v={s.sent} c="#22D3EE" />
              <Metric label="Antworten" v={s.reply} c="#A78BFA" />
              <Metric label="Reply-Rate" v={`${s.ctr}%`} c="#10B981" />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function Metric({ label, v, c }) {
  return (
    <div>
      <div style={{ color: 'var(--text-4)', fontSize: 10 }}>{label}</div>
      <div className="num" style={{ color: c, fontWeight: 600, fontSize: 14 }}>{v}</div>
    </div>
  );
}

function BigSparkline() {
  const data = [12,18,22,16,24,28,32,38,42,36,44,48,52,58,54,62,68,64,72,78,84,80,88,92];
  const w = 600, h = 90;
  const min = Math.min(...data), max = Math.max(...data);
  const range = max - min || 1;
  const stepX = w / (data.length - 1);
  const points = data.map((v, i) => [i * stepX, h - ((v - min) / range) * (h - 8) - 4]);
  const path = points.map((p, i) => i === 0 ? `M${p[0]},${p[1]}` : `L${p[0]},${p[1]}`).join(' ');
  return (
    <svg width="100%" height={h} viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
      <defs>
        <linearGradient id="bsg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#22D3EE" stopOpacity="0.4"/>
          <stop offset="100%" stopColor="#22D3EE" stopOpacity="0"/>
        </linearGradient>
      </defs>
      <path d={`${path} L${w},${h} L0,${h} Z`} fill="url(#bsg)" />
      <path d={path} fill="none" stroke="#22D3EE" strokeWidth="2" />
      {points.map((p, i) => i % 4 === 0 && <circle key={i} cx={p[0]} cy={p[1]} r="2.5" fill="#22D3EE" />)}
    </svg>
  );
}

// ===== Sync screen =====
function SyncScreen() {
  const s = window.VELUNA_DATA.syncStatus;
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 14 }}>
      <div className="card" style={{ gridColumn: 'span 4' }}>
        <div className="card-header"><div className="card-title">Sync-Übersicht</div></div>
        <div style={{ display: 'flex', justifyContent: 'center', padding: 12 }}>
          <window.RingChart value={s.success} total={s.total} size={170} thickness={14} color="var(--success)">
            <div className="num" style={{ fontSize: 36, fontWeight: 600 }}>{s.successPct}%</div>
            <div style={{ fontSize: 11, color: 'var(--text-3)' }}>Erfolgsquote</div>
          </window.RingChart>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 12 }}>
          <div style={{ padding: 12, background: 'var(--success-soft)', borderRadius: 10, border: '1px solid rgba(16,185,129,0.2)' }}>
            <div className="num" style={{ fontSize: 22, color: 'var(--success)', fontWeight: 600 }}>{s.success}</div>
            <div style={{ fontSize: 11, color: 'var(--text-3)' }}>Erfolgreich</div>
          </div>
          <div style={{ padding: 12, background: 'var(--danger-soft)', borderRadius: 10, border: '1px solid rgba(244,63,94,0.2)' }}>
            <div className="num" style={{ fontSize: 22, color: 'var(--danger)', fontWeight: 600 }}>{s.failed}</div>
            <div style={{ fontSize: 11, color: 'var(--text-3)' }}>Fehler</div>
          </div>
        </div>
      </div>
      <div className="card" style={{ gridColumn: 'span 4' }}>
        <div className="card-header"><div className="card-title">Fehlergründe</div></div>
        {s.reasons.map(r => (
          <div key={r.label} style={{ marginBottom: 10 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11.5, marginBottom: 4 }}>
              <span style={{ color: 'var(--text-2)' }}>{r.label}</span>
              <span className="num" style={{ color: 'var(--text-1)' }}>{r.count} ({r.pct}%)</span>
            </div>
            <div style={{ height: 6, background: 'var(--bg-3)', borderRadius: 3 }}>
              <div style={{ width: `${r.pct}%`, height: '100%', background: 'var(--danger)', borderRadius: 3 }} />
            </div>
          </div>
        ))}
      </div>
      <div className="card" style={{ gridColumn: 'span 4' }}>
        <div className="card-header"><div className="card-title">Integrationen</div></div>
        {[
          { name: 'Corteza CRM', status: 'connected', last: '10:24', records: 438 },
          { name: 'listmonk',    status: 'warning',   last: '10:21', records: 311 },
          { name: 'Apollo.io',   status: 'connected', last: '10:18', records: 247 },
          { name: 'LinkedIn',    status: 'connected', last: '10:15', records: 412 },
          { name: 'Slack',       status: 'connected', last: '10:00', records: 87 }
        ].map(i => (
          <div key={i.name} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderBottom: '1px solid var(--border-1)' }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: i.status === 'connected' ? 'var(--success)' : 'var(--warning)' }} />
            <span style={{ flex: 1, fontSize: 12.5, color: 'var(--text-1)' }}>{i.name}</span>
            <span className="num" style={{ fontSize: 11, color: 'var(--text-3)' }}>{i.records}</span>
            <span className="mono" style={{ fontSize: 10.5, color: 'var(--text-4)', minWidth: 40, textAlign: 'right' }}>{i.last}</span>
          </div>
        ))}
      </div>

      <div className="card" style={{ gridColumn: 'span 12' }}>
        <div className="card-header"><div className="card-title">Sync-Verlauf (letzte 50 Events)</div></div>
        <table className="tbl">
          <thead>
            <tr><th>Zeit</th><th>Lead</th><th>Ziel</th><th>Aktion</th><th>Status</th><th>Dauer</th><th>Details</th></tr>
          </thead>
          <tbody>
            {Array.from({ length: 14 }).map((_, i) => {
              const lead = window.VELUNA_DATA.allLeads[i];
              const ok = i % 7 !== 5;
              return (
                <tr key={i}>
                  <td className="mono" style={{ fontSize: 11 }}>10:{String(24-i).padStart(2,'0')}:{String((i*7)%60).padStart(2,'0')}</td>
                  <td><span style={{ color: 'var(--text-1)' }}>{lead.company}</span></td>
                  <td>Corteza CRM</td>
                  <td>{['create','update','enrich','sync'][i%4]}</td>
                  <td>{ok ? <span className="pill pill-success"><span className="pill-dot" />OK</span> : <span className="pill pill-danger"><span className="pill-dot" />Fehler</span>}</td>
                  <td className="mono" style={{ color: 'var(--text-3)' }}>{(0.2 + (i%7)*0.3).toFixed(1)}s</td>
                  <td style={{ fontSize: 11, color: 'var(--text-3)' }}>{ok ? '—' : ['Timeout','nicht freigegeben','fehlende Konfig.','Duplikat'][i%4]}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ===== Storage screen =====
function StorageScreen() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 14 }}>
      {[
        { name: 'Postgres', used: 12.4, total: 50, color: '#34D399', tables: 24 },
        { name: 'Redis',    used: 0.8, total: 4,  color: '#F472B6', tables: 8 },
        { name: 'S3 / Files', used: 184, total: 500, color: '#A78BFA', tables: 0 },
        { name: 'Backups',  used: 96, total: 200, color: '#22D3EE', tables: 0 }
      ].map(s => (
        <div key={s.name} className="card" style={{ gridColumn: 'span 3' }}>
          <div style={{ fontSize: 11, color: 'var(--text-3)' }}>{s.name}</div>
          <div className="num" style={{ fontSize: 22, fontWeight: 600, color: 'var(--text-1)', marginTop: 4 }}>
            {s.used} <span style={{ color: 'var(--text-4)', fontSize: 13 }}>/ {s.total} GB</span>
          </div>
          <div style={{ marginTop: 10, height: 6, background: 'var(--bg-3)', borderRadius: 3 }}>
            <div style={{ width: `${(s.used/s.total)*100}%`, height: '100%', background: s.color, borderRadius: 3 }} />
          </div>
          <div style={{ fontSize: 10.5, color: 'var(--text-4)', marginTop: 6 }}>{((s.used/s.total)*100).toFixed(1)}% belegt {s.tables ? `· ${s.tables} Tabellen` : ''}</div>
        </div>
      ))}

      <div className="card" style={{ gridColumn: 'span 8' }}>
        <div className="card-header"><div className="card-title">Tabellen (Postgres)</div></div>
        <table className="tbl">
          <thead><tr><th>Tabelle</th><th>Zeilen</th><th>Größe</th><th>Index</th><th>Letztes Update</th></tr></thead>
          <tbody>
            {[
              { t: 'leads', r: 2451, s: '4.8 MB', idx: '1.2 MB', u: '10:24' },
              { t: 'audits', r: 2118, s: '12.4 MB', idx: '2.1 MB', u: '10:24' },
              { t: 'scores', r: 1782, s: '0.9 MB', idx: '0.3 MB', u: '10:23' },
              { t: 'outreach_events', r: 8421, s: '6.2 MB', idx: '1.8 MB', u: '10:22' },
              { t: 'sync_log', r: 18402, s: '14.1 MB', idx: '3.4 MB', u: '10:24' },
              { t: 'companies', r: 2451, s: '2.1 MB', idx: '0.6 MB', u: '10:18' },
              { t: 'contacts', r: 4892, s: '3.8 MB', idx: '1.1 MB', u: '10:21' }
            ].map(r => (
              <tr key={r.t}>
                <td><span className="mono" style={{ color: 'var(--text-1)' }}>{r.t}</span></td>
                <td className="num">{r.r.toLocaleString('de-DE')}</td>
                <td className="num">{r.s}</td>
                <td className="num" style={{ color: 'var(--text-3)' }}>{r.idx}</td>
                <td className="mono" style={{ fontSize: 11, color: 'var(--text-3)' }}>{r.u}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div className="card" style={{ gridColumn: 'span 4' }}>
        <div className="card-header"><div className="card-title">Backups</div><span className="pill pill-success"><span className="pill-dot pulse" />Auto</span></div>
        {[
          { d: 'Heute, 03:00', s: 'Vollständig', size: '184 MB' },
          { d: 'Gestern, 03:00', s: 'Vollständig', size: '182 MB' },
          { d: 'Vor 2 Tagen', s: 'Vollständig', size: '180 MB' },
          { d: 'Vor 3 Tagen', s: 'Vollständig', size: '179 MB' },
          { d: 'Vor 7 Tagen', s: 'Wöchentlich', size: '178 MB' }
        ].map((b, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 0', borderBottom: '1px solid var(--border-1)' }}>
            <window.Icons.database size={14} color="var(--accent)" />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12, color: 'var(--text-1)' }}>{b.d}</div>
              <div style={{ fontSize: 10.5, color: 'var(--text-4)' }}>{b.s}</div>
            </div>
            <span className="num" style={{ fontSize: 11, color: 'var(--text-3)' }}>{b.size}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ===== Activity log screen =====
function LogScreen() {
  const all = [...window.VELUNA_DATA.liveActivities, ...window.VELUNA_DATA.liveActivities, ...window.VELUNA_DATA.liveActivities];
  const colorMap = { info: 'var(--accent)', success: 'var(--success)', warning: 'var(--warning)', danger: 'var(--danger)', violet: 'var(--violet)' };
  return (
    <div className="card" style={{ height: '100%', overflowY: 'auto' }}>
      <div className="card-header"><div className="card-title">Aktivitätsprotokoll</div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn"><window.Icons.filter size={12} /> Filter</button>
          <button className="btn"><window.Icons.download size={12} /> Export CSV</button>
        </div>
      </div>
      <div>
        {all.map((a, i) => {
          const Icon = window.Icons[a.icon] || window.Icons.dot;
          const color = colorMap[a.type];
          return (
            <div key={i} style={{ display: 'flex', gap: 12, padding: '10px 4px', borderBottom: '1px solid var(--border-1)' }}>
              <span className="mono" style={{ fontSize: 11, color: 'var(--text-4)', minWidth: 64 }}>{a.time}</span>
              <div style={{ width: 26, height: 26, borderRadius: 8, background: `${color}1f`, color, border: `1px solid ${color}33`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon size={12} />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12.5, color: 'var(--text-1)' }}>{a.title} <span style={{ color: 'var(--text-3)' }}>· {a.detail}</span></div>
                <div style={{ fontSize: 11, color: 'var(--text-4)', marginTop: 2 }}>{a.src}</div>
              </div>
              <button className="btn-ghost btn" style={{ padding: 4 }}><window.Icons.more size={12} /></button>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ===== Systems screen =====
function SystemsScreen() {
  const sys = window.VELUNA_DATA.systems;
  const auto = window.VELUNA_DATA.automations;
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 14 }}>
      <div className="card" style={{ gridColumn: 'span 12' }}>
        <div className="card-header"><div className="card-title">Verbundene Systeme</div></div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
          {sys.map(s => {
            const Icon = window.Icons[s.icon] || window.Icons.db;
            const cls = s.status === 'healthy' ? 'pill-success' : s.status === 'warning' ? 'pill-warning' : 'pill-danger';
            const lbl = s.status === 'healthy' ? 'Healthy' : s.status === 'warning' ? 'Wartet' : 'Fehler';
            return (
              <div key={s.name} style={{ padding: 14, background: 'var(--bg-3)', border: '1px solid var(--border-1)', borderRadius: 12 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{ width: 36, height: 36, borderRadius: 10, background: `${s.color}1f`, color: s.color, display: 'flex', alignItems: 'center', justifyContent: 'center', border: `1px solid ${s.color}44` }}>
                    <Icon size={17} />
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-1)' }}>{s.name}</div>
                    <div style={{ fontSize: 10.5, color: 'var(--text-3)' }}>{s.detail}</div>
                  </div>
                  <span className={`pill ${cls}`} style={{ fontSize: 10 }}><span className="pill-dot pulse" />{lbl}</span>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div className="card" style={{ gridColumn: 'span 12' }}>
        <div className="card-header"><div className="card-title">Automationen ({auto.length} aktiv)</div>
          <button className="btn btn-primary"><window.Icons.plus size={12} /> Neue Automation</button>
        </div>
        <table className="tbl">
          <thead><tr><th>Name</th><th>Runs (24h)</th><th>Erfolg</th><th>Ø Dauer</th><th>Letzter Run</th><th>Status</th></tr></thead>
          <tbody>
            {auto.map(a => (
              <tr key={a.name}>
                <td><span style={{ color: 'var(--text-1)' }}>{a.name}</span></td>
                <td className="num">{a.runs.toLocaleString('de-DE')}</td>
                <td>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <div style={{ width: 60, height: 5, background: 'var(--bg-3)', borderRadius: 3 }}>
                      <div style={{ width: `${a.success}%`, height: '100%', background: a.success >= 95 ? 'var(--success)' : 'var(--warning)', borderRadius: 3 }} />
                    </div>
                    <span className="num" style={{ fontSize: 11, color: a.success >= 95 ? 'var(--success)' : 'var(--warning)' }}>{a.success}%</span>
                  </div>
                </td>
                <td className="mono" style={{ color: 'var(--text-3)' }}>{a.avg}</td>
                <td className="mono" style={{ color: 'var(--text-3)', fontSize: 11 }}>{a.lastRun}</td>
                <td>{a.status === 'active'
                  ? <span className="pill pill-success"><span className="pill-dot pulse" />Aktiv</span>
                  : <span className="pill pill-warning"><span className="pill-dot pulse" />Warnung</span>}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ===== Settings screen =====
function SettingsScreen() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 14 }}>
      <div className="card" style={{ gridColumn: 'span 4' }}>
        <div className="card-header"><div className="card-title">Workspace</div></div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <Field label="Name"   value="Veluna Growth Stack" />
          <Field label="Domain" value="veluna.growth" />
          <Field label="Locale" value="de-DE" />
          <Field label="Zeitzone" value="Europe/Berlin" />
        </div>
      </div>
      <div className="card" style={{ gridColumn: 'span 4' }}>
        <div className="card-header"><div className="card-title">Lead-Scoring</div></div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <SliderField label="Mindest-Score für Approval" value={70} />
          <SliderField label="Score-Gewicht: Firmographic" value={35} />
          <SliderField label="Score-Gewicht: Tech-Stack"  value={25} />
          <SliderField label="Score-Gewicht: Engagement"  value={40} />
        </div>
      </div>
      <div className="card" style={{ gridColumn: 'span 4' }}>
        <div className="card-header"><div className="card-title">Benachrichtigungen</div></div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[
            { l: 'E-Mail bei kritischen Fehlern', v: true },
            { l: 'Slack: tägliches Digest',       v: true },
            { l: 'Slack: Hot Leads (Score > 85)', v: true },
            { l: 'SMS bei System-Ausfall',        v: false },
            { l: 'Wochenreport per E-Mail',       v: true }
          ].map(t => (
            <div key={t.l} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 0', borderBottom: '1px solid var(--border-1)' }}>
              <span style={{ fontSize: 12.5, color: 'var(--text-2)' }}>{t.l}</span>
              <Toggle on={t.v} />
            </div>
          ))}
        </div>
      </div>
      <div className="card" style={{ gridColumn: 'span 12' }}>
        <div className="card-header"><div className="card-title">API & Webhooks</div><button className="btn">Schlüssel rotieren</button></div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <Field label="Public API Key" value="vlna_pk_live_8f3a2c1b9d4e7f6a" mono />
          <Field label="Webhook URL"    value="https://hooks.veluna.growth/v1/leads" mono />
        </div>
      </div>
    </div>
  );
}

function Field({ label, value, mono }) {
  return (
    <div>
      <div style={{ fontSize: 10.5, color: 'var(--text-4)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4 }}>{label}</div>
      <div style={{ padding: '8px 10px', background: 'var(--bg-2)', border: '1px solid var(--border-1)', borderRadius: 8, fontSize: 12.5, color: 'var(--text-1)', fontFamily: mono ? 'var(--font-mono)' : 'var(--font-ui)' }}>{value}</div>
    </div>
  );
}

function SliderField({ label, value }) {
  const [v, setV] = uS3(value);
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11.5, marginBottom: 6 }}>
        <span style={{ color: 'var(--text-3)' }}>{label}</span>
        <span className="num" style={{ color: 'var(--accent)', fontWeight: 600 }}>{v}</span>
      </div>
      <input type="range" min="0" max="100" value={v} onChange={(e) => setV(+e.target.value)} style={{ width: '100%', accentColor: 'var(--accent)' }} />
    </div>
  );
}

function Toggle({ on: initial }) {
  const [on, setOn] = uS3(initial);
  return (
    <button onClick={() => setOn(o => !o)} style={{
      width: 36, height: 20, borderRadius: 10, background: on ? 'var(--accent)' : 'var(--bg-3)',
      border: 'none', position: 'relative', cursor: 'pointer', transition: 'background 0.2s'
    }}>
      <span style={{
        position: 'absolute', top: 2, left: on ? 18 : 2,
        width: 16, height: 16, borderRadius: '50%', background: 'white',
        transition: 'left 0.2s'
      }} />
    </button>
  );
}

window.OutreachScreen = OutreachScreen;
window.SyncScreen = SyncScreen;
window.StorageScreen = StorageScreen;
window.LogScreen = LogScreen;
window.SystemsScreen = SystemsScreen;
window.SettingsScreen = SettingsScreen;