// Team deep-dive page

function TeamHero() {
  return (
    <section className="theme-team" style={{ paddingTop: 80, paddingBottom: 72, borderTop: 'none', position: 'relative', overflow: 'hidden' }}>
      <TeamMotionBg />
      <div className="container" style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 56, alignItems: 'center' }}>
          <div>
            <div className="eyebrow"><span className="dot" />TEAM MODE · FROM $99/MO · 14-DAY TRIAL</div>
            <h1 style={{ marginTop: 22, marginBottom: 18 }}>
              One dashboard for every AI insertion, across every engineer.
            </h1>
            <p className="lead" style={{ marginBottom: 28 }}>
              Replace five disconnected AI tools with one unified signal. Real-time metrics, risk heatmaps, Slack alerts, and a REST API your CI/CD already understands.
            </p>
            <div className="row" style={{ gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn-lg" style={{ background: 'var(--team)', color: '#0B1020', fontWeight: 600 }}>Start 14-day trial →</button>
              <button className="btn btn-lg btn-ghost">Book a dashboard tour</button>
            </div>
            <div style={{ marginTop: 24, fontSize: 13, color: 'var(--text-muted)' }}>
              No credit card · Invite teammates by email · Cancel anytime
            </div>
          </div>
          <TeamVisual />
        </div>
      </div>
    </section>
  );
}


function TeamFeatures() {
  const f = [
    ['👥', 'Multi-user workspace', 'Unlimited team members. SSO-ready (Google, GitHub). Per-repo visibility controls.'],
    ['📊', 'Real-time dashboard', 'Metrics update every 5 minutes. Filter by team, repo, agent, time range.'],
    ['🔔', 'Slack + email alerts', 'Configurable thresholds. Route per-channel. Quiet-hours-aware.'],
    ['🔐', 'Role-based access', 'Admin, contributor, viewer. Scope by repo or team. Full audit trail.'],
    ['📈', 'Advanced risk scoring', 'Configurable rule packs. Compliance scorecards. Custom regex.'],
    ['🔗', 'REST API', 'Ingest into your SIEM, gate PRs in CI/CD, pull into your own BI tool.'],
    ['📋', 'Audit logs', '30-day retention. Who viewed what, when, from where. Exportable.'],
    ['📅', 'Monthly reports', 'PDF summary: insertions, risk breakdown, agent mix, incident list.'],
  ];
  return (
    <section className="theme-team">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 40 }}>
          <div className="eyebrow"><span className="dot" />CAPABILITIES</div>
          <h2 style={{ marginTop: 18 }}>Eight things your security lead will thank you for.</h2>
        </div>
        <div className="grid grid-4">
          {f.map(x => (
            <div key={x[1]} className="card">
              <div style={{
                width: 32, height: 32, borderRadius: 8,
                background: 'rgba(63,185,80,0.14)', color: 'var(--team)',
                border: '1px solid rgba(63,185,80,0.35)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 14, fontSize: 14,
              }}>{x[0]}</div>
              <h4 style={{ fontSize: 15, marginBottom: 6 }}>{x[1]}</h4>
              <p style={{ fontSize: 13, lineHeight: 1.5 }}>{x[2]}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TeamSetup() {
  const steps = [
    ['01', 'Admin signs up', 'Email + workspace name. 30 seconds. No credit card for the 14-day trial.'],
    ['02', 'Invite engineers', 'Paste emails, send. Each gets a one-click install link for the extension.'],
    ['03', 'Configure rules', 'Pick a starter rule pack (OWASP, SOC2, custom). Tune thresholds in the UI.'],
    ['04', 'Wire up alerts', 'Connect Slack workspace in one OAuth click. Pick channels. Set quiet hours.'],
    ['05', 'Go live', 'Dashboard starts populating in minutes. Your first monthly report arrives in 30 days.'],
  ];
  return (
    <section className="theme-team">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 40 }}>
          <div className="eyebrow"><span className="dot" />ROLLOUT</div>
          <h2 style={{ marginTop: 18 }}>Fifteen minutes, five steps, zero drama.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
          {steps.map((s, i) => (
            <div key={s[0]} className="card" style={{ padding: 20, position: 'relative' }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--team)', letterSpacing: '0.05em' }}>STEP {s[0]}</div>
              <h4 style={{ fontSize: 15, marginTop: 10, marginBottom: 6 }}>{s[1]}</h4>
              <p style={{ fontSize: 13, lineHeight: 1.5 }}>{s[2]}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TeamPricingTiers() {
  const tiers = [
    { n: 'Starter', p: '$99', users: 'up to 10 engineers', features: ['Unlimited insertions', 'Managed cloud', 'Basic alerts', '30-day audit logs'] },
    { n: 'Growth', p: '$199', users: 'up to 50 engineers', features: ['Everything in Starter', 'Advanced risk scoring', 'SIEM export', 'Custom rule packs'], popular: true },
    { n: 'Scale', p: '$299', users: 'unlimited', features: ['Everything in Growth', 'Priority email support', 'Monthly exec reports', 'Quarterly review'] },
  ];
  return (
    <section className="theme-team">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 40 }}>
          <div className="eyebrow"><span className="dot" />TEAM PRICING</div>
          <h2 style={{ marginTop: 18 }}>Three tiers. Pick once, switch anytime.</h2>
        </div>
        <div className="grid grid-3">
          {tiers.map(t => (
            <div key={t.n} className="card" style={{
              padding: 28,
              borderColor: t.popular ? 'color-mix(in oklab, var(--team) 45%, var(--border))' : 'var(--border-muted)',
              background: t.popular ? 'linear-gradient(180deg, color-mix(in oklab, var(--team) 10%, var(--bg-2)) 0%, var(--bg-2) 70%)' : 'var(--bg-2)',
              position: 'relative',
            }}>
              {t.popular && (
                <div style={{
                  position: 'absolute', top: -11, left: 24, padding: '3px 10px',
                  background: 'var(--team)', color: 'var(--bg)', fontSize: 11,
                  fontFamily: 'var(--mono)', fontWeight: 600, borderRadius: 4,
                  letterSpacing: '0.05em',
                }}>POPULAR</div>
              )}
              <div className="mono" style={{ fontSize: 11, color: 'var(--team)', letterSpacing: '0.06em' }}>● {t.n.toUpperCase()}</div>
              <div style={{ marginTop: 16, display: 'flex', alignItems: 'baseline', gap: 6 }}>
                <div style={{ fontSize: 40, fontWeight: 600, letterSpacing: '-0.03em' }}>{t.p}</div>
                <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>/month</div>
              </div>
              <div style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 4 }}>{t.users}</div>
              <ul style={{ listStyle: 'none', padding: 0, marginTop: 20, borderTop: '1px solid var(--border-muted)', paddingTop: 16 }}>
                {t.features.map(f => (
                  <li key={f} style={{ display: 'flex', gap: 10, padding: '5px 0', fontSize: 13, color: 'var(--text-muted)' }}>
                    <span style={{ color: 'var(--team)' }}>●</span> <span>{f}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="mono dim" style={{ textAlign: 'center', marginTop: 24, fontSize: 12 }}>
          Annual billing saves 20% · All prices in USD · VAT where applicable
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { TeamHero, TeamFeatures, TeamSetup, TeamPricingTiers });