/* Features grid + Dashboard demo */
const featStyles = {
  grid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(12, 1fr)',
    gap: 16,
  },
  card: {
    background: 'var(--paper)',
    border: '1px solid var(--line)',
    borderRadius: 'var(--radius-lg)',
    padding: 28,
    display: 'flex', flexDirection: 'column',
    minHeight: 280,
    position: 'relative',
    overflow: 'hidden',
  },
  cardTitle: {
    fontFamily: 'var(--font-display)',
    fontSize: 26,
    lineHeight: 1.05,
    letterSpacing: '-0.02em',
    margin: '0 0 8px',
  },
  cardBody: {
    color: 'var(--ink-3)',
    fontSize: 14,
    margin: 0,
    lineHeight: 1.5,
  },
  cardEyebrow: {
    fontFamily: 'var(--font-mono)',
    fontSize: 10,
    letterSpacing: '0.14em',
    color: 'var(--ink-4)',
    marginBottom: 24,
  },
};

function Features() {
  return (
    <section id="features">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot" />04 — Capabilities</span>
          <h2>Built for teams who'd rather <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>ship</em> than babysit&nbsp;tests.</h2>
          <p>Every feature is designed to remove a meeting, an on-call page, or a Jira ticket from your week.</p>
        </div>

        <div style={featStyles.grid}>
          {/* Big feature 1 */}
          <div style={{ ...featStyles.card, gridColumn: 'span 7', minHeight: 360 }}>
            <div style={featStyles.cardEyebrow}>FEAT 01 · TEST GENERATION</div>
            <h3 style={featStyles.cardTitle}>Tests that read like specs, not selectors.</h3>
            <p style={featStyles.cardBody}>The agent watches real user sessions, identifies critical paths, and writes tests in plain TypeScript that your team will actually maintain.</p>
            <div style={{ flex: 1, marginTop: 24, position: 'relative' }}>
              <FeatTestGen />
            </div>
          </div>

          {/* Feature 2 */}
          <div style={{ ...featStyles.card, gridColumn: 'span 5', minHeight: 360, background: 'var(--ink)', color: '#F2EFE5', borderColor: 'var(--ink)' }}>
            <div style={{ ...featStyles.cardEyebrow, color: 'rgba(242,239,229,0.5)' }}>FEAT 02 · SELF-HEALING</div>
            <h3 style={{ ...featStyles.cardTitle, color: '#F2EFE5' }}>When the UI changes, the test changes with it.</h3>
            <p style={{ ...featStyles.cardBody, color: 'rgba(242,239,229,0.6)' }}>Selectors break, copy gets reworded, layouts shift. The agent diffs intent against implementation and patches the test — not a flake reported on Monday.</p>
            <div style={{ flex: 1, marginTop: 24 }}>
              <FeatHealing />
            </div>
          </div>

          {/* Feature 3 */}
          <div style={{ ...featStyles.card, gridColumn: 'span 4' }}>
            <div style={featStyles.cardEyebrow}>FEAT 03 · FLAKE TRIAGE</div>
            <h3 style={featStyles.cardTitle}>No more "rerun and pray".</h3>
            <p style={featStyles.cardBody}>Flaky tests get root-caused — race condition, timing, or env — and either fixed or quarantined automatically.</p>
            <div style={{ marginTop: 'auto', paddingTop: 20 }}>
              <FlakeChips />
            </div>
          </div>

          {/* Feature 4 */}
          <div style={{ ...featStyles.card, gridColumn: 'span 4' }}>
            <div style={featStyles.cardEyebrow}>FEAT 04 · VISUAL DIFFS</div>
            <h3 style={featStyles.cardTitle}>Pixel regressions caught in PR.</h3>
            <p style={featStyles.cardBody}>The agent compares every commit against your design system. Off-spec spacing, color drift, or accidental overflow? Flagged before merge.</p>
            <div style={{ marginTop: 'auto', paddingTop: 20 }}>
              <DiffStrip />
            </div>
          </div>

          {/* Feature 5 */}
          <div style={{ ...featStyles.card, gridColumn: 'span 4', background: 'var(--accent-tint)', borderColor: 'var(--accent-soft)' }}>
            <div style={featStyles.cardEyebrow}>FEAT 05 · DEDICATED QA LEAD</div>
            <h3 style={featStyles.cardTitle}>A Silicon Valley QA pioneer in your Slack.</h3>
            <p style={featStyles.cardBody}>Every account gets a named QA lead — 10+ years shipping at FAANG-tier companies. They own your release readiness, review every agent finding, and meet your team weekly.</p>
            <div style={{ marginTop: 'auto', paddingTop: 20 }}>
              <QALeadCard />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FeatTestGen() {
  return (
    <div style={{
      background: 'var(--bg)',
      border: '1px solid var(--line)',
      borderRadius: 8,
      padding: 16,
      fontFamily: 'var(--font-mono)',
      fontSize: 11,
      lineHeight: 1.7,
      color: 'var(--ink-2)',
      height: '100%',
      overflow: 'hidden',
    }}>
      <div style={{ color: 'var(--ink-4)' }}>// observed: user adds 2 items, applies code "WELCOME10", checks out</div>
      <div style={{ marginTop: 6 }}>
        <span style={{ color: 'var(--accent)' }}>describe</span>(<span style={{ color: 'var(--warn)' }}>'cart with promo code'</span>, () =&gt; {'{'}
      </div>
      <div style={{ paddingLeft: 14 }}>
        <span style={{ color: 'var(--accent)' }}>it</span>(<span style={{ color: 'var(--warn)' }}>'applies WELCOME10 discount'</span>, <span style={{ color: 'var(--ink-3)' }}>async</span> () =&gt; {'{'}
      </div>
      <div style={{ paddingLeft: 28 }}><span style={{ color: 'var(--ink-3)' }}>const</span> cart = <span style={{ color: 'var(--ink-3)' }}>await</span> seedCart([sku.A, sku.B])</div>
      <div style={{ paddingLeft: 28 }}><span style={{ color: 'var(--ink-3)' }}>await</span> cart.applyCode(<span style={{ color: 'var(--warn)' }}>'WELCOME10'</span>)</div>
      <div style={{ paddingLeft: 28 }}>expect(cart.discount).toBe(<span style={{ color: 'var(--ink-3)' }}>10</span>)</div>
      <div style={{ paddingLeft: 28 }}>expect(cart.total).toBe(<span style={{ color: 'var(--ink-3)' }}>89.10</span>)</div>
      <div style={{ paddingLeft: 14 }}>{'}'})</div>
      <div>{'}'})</div>
    </div>
  );
}

function FeatHealing() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontFamily: 'var(--font-mono)', fontSize: 11 }}>
      <div style={{ padding: 12, border: '1px solid rgba(232,123,123,0.3)', borderRadius: 6, background: 'rgba(232,123,123,0.06)' }}>
        <div style={{ color: '#E07B7B', fontSize: 9, letterSpacing: '0.1em', marginBottom: 6 }}>BEFORE · BROKEN</div>
        <div style={{ color: 'rgba(242,239,229,0.85)' }}>page.click(<span style={{ color: '#E8A33D' }}>'.btn-primary--large'</span>)</div>
      </div>
      <div style={{ textAlign: 'center', color: 'rgba(242,239,229,0.4)' }}>↓ agent.heal()</div>
      <div style={{ padding: 12, border: '1px solid rgba(232,154,139,0.3)', borderRadius: 6, background: 'rgba(232,154,139,0.06)' }}>
        <div style={{ color: '#E89A8B', fontSize: 9, letterSpacing: '0.1em', marginBottom: 6 }}>AFTER · HEALED</div>
        <div style={{ color: 'rgba(242,239,229,0.85)' }}>page.click(<span style={{ color: '#E8A33D' }}>{`{ role: 'button', name: /pay/ }`}</span>)</div>
      </div>
    </div>
  );
}

function FlakeChips() {
  const items = [
    { name: 'login.spec.ts', count: 12, cause: 'race', color: 'var(--warn)' },
    { name: 'cart.spec.ts', count: 4, cause: 'timing', color: 'var(--warn)' },
    { name: 'search.spec.ts', count: 1, cause: 'env', color: 'var(--ink-3)' },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      {items.map(it => (
        <div key={it.name} style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          padding: '8px 10px',
          background: 'var(--bg)',
          border: '1px solid var(--line)',
          borderRadius: 6,
          fontFamily: 'var(--font-mono)',
          fontSize: 11,
        }}>
          <span style={{ color: 'var(--ink-2)' }}>{it.name}</span>
          <span style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <span style={{ color: it.color, fontSize: 9, letterSpacing: '0.1em' }}>{it.cause.toUpperCase()}</span>
            <span style={{ color: 'var(--ink-3)' }}>×{it.count}</span>
          </span>
        </div>
      ))}
    </div>
  );
}

function DiffStrip() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
      <div style={{ aspectRatio: '4 / 3', background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 6, padding: 10, position: 'relative' }}>
        <div style={{ width: '70%', height: 8, background: 'var(--ink-2)', borderRadius: 2, marginBottom: 8 }} />
        <div style={{ width: '50%', height: 6, background: 'var(--line-2)', borderRadius: 2, marginBottom: 12 }} />
        <div style={{ width: 60, height: 24, background: 'var(--ink)', borderRadius: 4 }} />
        <div style={{ position: 'absolute', top: 6, right: 6, fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--ink-3)', letterSpacing: '0.08em' }}>BASELINE</div>
      </div>
      <div style={{ aspectRatio: '4 / 3', background: 'var(--bg)', border: '1px solid var(--warn)', borderRadius: 6, padding: 10, position: 'relative' }}>
        <div style={{ width: '70%', height: 8, background: 'var(--ink-2)', borderRadius: 2, marginBottom: 8 }} />
        <div style={{ width: '50%', height: 6, background: 'var(--line-2)', borderRadius: 2, marginBottom: 18 }} />
        <div style={{ width: 60, height: 24, background: 'var(--warn)', borderRadius: 4, outline: '2px dashed var(--warn)', outlineOffset: 2 }} />
        <div style={{ position: 'absolute', top: 6, right: 6, fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--warn)', letterSpacing: '0.08em' }}>+8px Δ</div>
      </div>
    </div>
  );
}

function BriefDoc() {
  return (
    <div style={{
      background: 'var(--paper)',
      border: '1px solid var(--accent-soft)',
      borderRadius: 6,
      padding: 14,
      fontFamily: 'var(--font-mono)',
      fontSize: 10,
      lineHeight: 1.65,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
        <span style={{ color: 'var(--accent)', letterSpacing: '0.1em' }}>INC-2026-0428</span>
        <span style={{ color: 'var(--ink-4)' }}>auto-drafted</span>
      </div>
      <div style={{ height: '0.9em', background: 'var(--ink-2)', width: '90%', marginBottom: 6, borderRadius: 1 }} />
      <div style={{ height: '0.6em', background: 'var(--line-2)', width: '100%', marginBottom: 4, borderRadius: 1 }} />
      <div style={{ height: '0.6em', background: 'var(--line-2)', width: '95%', marginBottom: 4, borderRadius: 1 }} />
      <div style={{ height: '0.6em', background: 'var(--line-2)', width: '70%', borderRadius: 1 }} />
    </div>
  );
}

function QALeadCard() {
  return (
    <div style={{
      background: 'var(--paper)',
      border: '1px solid var(--accent-soft)',
      borderRadius: 8,
      padding: 14,
      display: 'flex',
      gap: 12,
      alignItems: 'center',
    }}>
      <div style={{
        width: 44, height: 44, borderRadius: '50%',
        background: 'linear-gradient(135deg, var(--accent-3), var(--accent-2))',
        flexShrink: 0,
        boxShadow: '0 0 0 3px var(--accent-soft)',
      }} />
      <div style={{ minWidth: 0, flex: 1 }}>
        <div style={{ fontSize: 13, color: 'var(--ink)', fontWeight: 500 }}>Maya Reyes</div>
        <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.06em' }}>YOUR QA LEAD · EX-STRIPE, EX-AIRBNB</div>
        <div className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.1em', marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)', boxShadow: '0 0 8px var(--accent)' }} />
          ONLINE · SF · REPLIES &lt; 1H
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Features });