/* Dashboard demo — scrollable product mock */
const dashStyles = {
  frame: {
    background: 'var(--paper)',
    border: '1px solid var(--line)',
    borderRadius: 'var(--radius-lg)',
    overflow: 'hidden',
    boxShadow: '0 1px 0 rgba(20,20,15,0.02), 0 40px 80px -40px rgba(20,20,15,0.2)',
  },
  chrome: {
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '14px 18px', background: 'var(--bg-2)',
    borderBottom: '1px solid var(--line)',
  },
  body: {
    display: 'grid',
    gridTemplateColumns: '220px 1fr',
    minHeight: 640,
  },
  side: {
    borderRight: '1px solid var(--line)',
    padding: 20,
    background: 'var(--bg)',
  },
  main: {
    padding: 28,
    overflow: 'hidden',
  },
};

function DashboardDemo() {
  return (
    <section id="demo" style={{ paddingTop: 96, paddingBottom: 96, background: 'var(--bg-2)' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot" />05 — Inside the product</span>
          <h2>The dashboard <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>your QA lead</em> wishes&nbsp;existed.</h2>
          <p>One pane for every test run, every health sweep, every regression. Filter by service, owner, or release. Designed for speed of triage.</p>
        </div>

        <div style={dashStyles.frame}>
          <div style={dashStyles.chrome}>
            <div style={{ display: 'flex', gap: 6 }}>
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#E5C2A0' }} />
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#D8D6C9' }} />
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#D8D6C9' }} />
            </div>
            <div className="mono" style={{
              padding: '4px 12px', background: 'var(--paper)', border: '1px solid var(--line)',
              borderRadius: 4, fontSize: 11, color: 'var(--ink-3)',
            }}>app.qafactory.ai / ramp · runs</div>
            <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>○ ○ ○</span>
          </div>

          <div style={dashStyles.body}>
            <DashSidebar />
            <DashMain />
          </div>
        </div>
      </div>
    </section>
  );
}

function DashSidebar() {
  const items = [
    { label: 'Overview', active: false },
    { label: 'Test runs', active: true, count: 1284 },
    { label: 'Health sweeps', active: false, count: 31 },
    { label: 'Findings', active: false, count: 12, badge: 'var(--warn)' },
    { label: 'Coverage', active: false },
    { label: 'Self-heal log', active: false },
    { label: 'Integrations', active: false },
    { label: 'Settings', active: false },
  ];
  return (
    <div style={dashStyles.side}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        padding: '8px 10px', background: 'var(--paper)', border: '1px solid var(--line)',
        borderRadius: 6, marginBottom: 20,
      }}>
        <div style={{ width: 22, height: 22, borderRadius: 4, background: 'var(--ink)', color: 'var(--bg)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600 }}>R</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 12, color: 'var(--ink)', fontWeight: 500 }}>Ramp</div>
          <div className="mono" style={{ fontSize: 10, color: 'var(--ink-4)' }}>main · production</div>
        </div>
        <span style={{ fontSize: 12, color: 'var(--ink-4)' }}>⌄</span>
      </div>

      <div className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', letterSpacing: '0.12em', padding: '0 10px', marginBottom: 6 }}>WORKSPACE</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
        {items.map(it => (
          <div key={it.label} style={{
            padding: '7px 10px',
            borderRadius: 5,
            background: it.active ? 'var(--ink)' : 'transparent',
            color: it.active ? 'var(--bg)' : 'var(--ink-2)',
            fontSize: 13,
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          }}>
            <span>{it.label}</span>
            {it.count != null && (
              <span className="mono" style={{
                fontSize: 10,
                color: it.badge ? it.badge : it.active ? 'rgba(247,246,241,0.5)' : 'var(--ink-4)',
              }}>{it.count}</span>
            )}
          </div>
        ))}
      </div>

      <div style={{ marginTop: 28, padding: 12, border: '1px solid var(--line)', borderRadius: 6, background: 'var(--paper)' }}>
        <div className="mono" style={{ fontSize: 9, color: 'var(--accent)', letterSpacing: '0.12em', marginBottom: 6 }}>● AGENT ONLINE</div>
        <div style={{ fontSize: 11, color: 'var(--ink-3)', lineHeight: 1.4 }}>Indexing 18 services. Next sweep in 23h 45m.</div>
      </div>
    </div>
  );
}

function DashMain() {
  return (
    <div style={dashStyles.main}>
      {/* page header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 24 }}>
        <div>
          <div className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', letterSpacing: '0.1em', marginBottom: 6 }}>RUNS · LAST 24H</div>
          <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 32, letterSpacing: '-0.02em', margin: 0 }}>1,284 runs<span style={{ color: 'var(--ink-4)' }}> · </span><span style={{ color: 'var(--accent)' }}>99.4% pass</span></h3>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <span style={{ padding: '6px 10px', background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 5, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-2)' }}>⌕ filter</span>
          <span style={{ padding: '6px 10px', background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 5, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-2)' }}>service: all ⌄</span>
          <span style={{ padding: '6px 10px', background: 'var(--ink)', color: 'var(--bg)', borderRadius: 5, fontFamily: 'var(--font-mono)', fontSize: 11 }}>+ new run</span>
        </div>
      </div>

      {/* metric row */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 20 }}>
        <Metric label="PASSING" value="1,276" delta="+24" tone="accent" />
        <Metric label="FAILING" value="6" delta="−3" tone="warn" />
        <Metric label="QUARANTINED" value="2" delta="0" tone="ink" />
        <Metric label="AVG DURATION" value="42s" delta="−8s" tone="accent" />
      </div>

      {/* big chart */}
      <div style={{
        border: '1px solid var(--line)', borderRadius: 8, padding: 18,
        background: 'var(--paper)', marginBottom: 20,
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 14 }}>
          <span className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', letterSpacing: '0.1em' }}>RUNS PER HOUR · 24h</span>
          <div style={{ display: 'flex', gap: 12, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-3)' }}>
            <span><span style={{ display: 'inline-block', width: 8, height: 8, background: 'var(--accent)', borderRadius: 1, marginRight: 4 }} />pass</span>
            <span><span style={{ display: 'inline-block', width: 8, height: 8, background: 'var(--warn)', borderRadius: 1, marginRight: 4 }} />fail</span>
          </div>
        </div>
        <BigChart />
      </div>

      {/* table */}
      <div style={{
        border: '1px solid var(--line)', borderRadius: 8, overflow: 'hidden',
        background: 'var(--paper)',
      }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '60px 1fr 100px 100px 110px 80px',
          padding: '10px 14px', background: 'var(--bg-2)', borderBottom: '1px solid var(--line)',
          fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-4)', letterSpacing: '0.1em',
        }}>
          <span>STATUS</span><span>TEST</span><span>SERVICE</span><span>OWNER</span><span>STARTED</span><span style={{ textAlign: 'right' }}>DURATION</span>
        </div>
        {[
          { s: 'pass', t: 'checkout · apply promo code', svc: 'checkout', o: 'maya.r', t2: '2m ago', d: '0.42s' },
          { s: 'pass', t: 'auth · sso login flow', svc: 'auth', o: 'agent', t2: '4m ago', d: '0.81s' },
          { s: 'heal', t: 'dashboard · widget reorder', svc: 'dashboard', o: 'agent', t2: '6m ago', d: '1.20s' },
          { s: 'fail', t: 'billing · pro plan upgrade', svc: 'billing', o: 'jordan.k', t2: '11m ago', d: '2.04s' },
          { s: 'pass', t: 'search · filter by status', svc: 'search', o: 'maya.r', t2: '14m ago', d: '0.36s' },
          { s: 'pass', t: 'webhooks · stripe receipt', svc: 'webhooks', o: 'agent', t2: '18m ago', d: '0.92s' },
        ].map((r, i) => <Row key={i} {...r} />)}
      </div>
    </div>
  );
}

function Metric({ label, value, delta, tone }) {
  const dColor = delta.startsWith('−') || delta === '0'
    ? (tone === 'warn' ? 'var(--accent)' : 'var(--ink-3)')
    : (tone === 'warn' ? 'var(--warn)' : 'var(--accent)');
  return (
    <div style={{ padding: 14, background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 8 }}>
      <div className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', letterSpacing: '0.12em', marginBottom: 6 }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 28, letterSpacing: '-0.02em' }} className="tabular">{value}</span>
        <span className="mono tabular" style={{ fontSize: 11, color: dColor }}>{delta}</span>
      </div>
    </div>
  );
}

function BigChart() {
  const cols = 24;
  return (
    <div style={{ display: 'flex', gap: 4, height: 120, alignItems: 'flex-end' }}>
      {Array.from({ length: cols }).map((_, i) => {
        const total = 30 + Math.sin(i * 0.5) * 18 + Math.random() * 14;
        const fail = i === 11 ? 4 : i === 17 ? 2 : 0;
        const pass = total - fail;
        return (
          <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column-reverse', gap: 1 }}>
            <span style={{ height: `${(pass / 60) * 100}%`, background: 'var(--accent)', borderRadius: '2px 2px 0 0', opacity: 0.85 }} />
            {fail > 0 && <span style={{ height: `${(fail / 60) * 100}%`, background: 'var(--warn)' }} />}
          </div>
        );
      })}
    </div>
  );
}

function Row({ s, t, svc, o, t2, d }) {
  const dot = s === 'pass' ? 'var(--accent)' : s === 'fail' ? 'var(--danger)' : 'var(--warn)';
  const label = s === 'pass' ? 'PASS' : s === 'fail' ? 'FAIL' : 'HEAL';
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '60px 1fr 100px 100px 110px 80px',
      padding: '10px 14px', borderBottom: '1px solid var(--line)',
      alignItems: 'center', fontSize: 12,
    }}>
      <span style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em', color: dot }}>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: dot }} />{label}
      </span>
      <span style={{ color: 'var(--ink)' }}>{t}</span>
      <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>{svc}</span>
      <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>{o}</span>
      <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>{t2}</span>
      <span className="mono tabular" style={{ fontSize: 11, color: 'var(--ink-2)', textAlign: 'right' }}>{d}</span>
    </div>
  );
}

Object.assign(window, { DashboardDemo });