// Enterprise deep-dive page

function EntHero() {
  return (
    <section className="theme-ent" style={{ paddingTop: 80, paddingBottom: 72, borderTop: 'none', position: 'relative', overflow: 'hidden' }}>
      <EntMotionBg />
      <div className="container" style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <div className="eyebrow"><span className="dot" />ENTERPRISE · SELF-HOSTED · COMPLIANCE-GRADE</div>
            <h1 style={{ marginTop: 22, marginBottom: 18 }}>
              Compliance-grade AI provenance, inside your VPC.
            </h1>
            <p className="lead" style={{ marginBottom: 28 }}>
              Self-hosted Docker or Kubernetes. Neo4j lineage across repos and deploys. SSO, advanced RBAC, SOC2/HIPAA/ISO27001 alignment. Your code and prompts never leave your network.
            </p>
            <div className="row" style={{ gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn-lg" style={{ background: 'var(--ent)', color: '#0B1020', fontWeight: 600 }}>Book enterprise demo →</button>
              <button className="btn btn-lg btn-ghost">Download security brief (PDF)</button>
            </div>
          </div>
          <EnterpriseVisual />
        </div>
      </div>
    </section>
  );
}


function EntFeatures() {
  const f = [
    ['🏢', 'Self-hosted deployment', 'Docker Compose, Kubernetes Helm chart, or bare VM. On-prem or cloud VPC.'],
    ['🌐', 'Data residency', 'Your data is wherever your infra is. EU, US, APAC — or an air-gapped datacenter.'],
    ['🔗', 'Neo4j lineage graphs', 'Trace every prompt → insertion → PR → deploy. Cross-repo, cross-team, cross-year.'],
    ['🔐', 'SSO / SAML / OIDC', 'Okta, Azure AD, Google Workspace, Ping, one-click. SCIM auto-provisioning.'],
    ['📊', 'Advanced RBAC', 'Custom roles, repo-scoped permissions, team hierarchies, just-in-time access.'],
    ['🛡️', 'Compliance reporting', 'SOC2 Type II, HIPAA-ready, ISO27001 aligned. Pre-built audit packages.'],
    ['🔒', 'Encryption', 'AES-256 at rest, TLS 1.3 in transit, KMS integration (AWS, Azure, Vault).'],
    ['🔔', 'Custom alerts', 'Fire on any pattern. Route to Slack, PagerDuty, email, webhook.'],
    ['📦', 'Deep integrations', 'Jira, GitHub, GitLab, Jenkins, ServiceNow, custom webhooks.'],
    ['📈', 'Executive analytics', 'Board-ready dashboards. AI adoption, risk trajectory, compliance posture.'],
    ['⏰', '24/7 support', 'Named SRE, dedicated Slack channel, 99.9% uptime SLA.'],
    ['💾', 'Disaster recovery', 'Automated backups, cross-region replication, documented runbooks.'],
  ];
  return (
    <section className="theme-ent">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 40 }}>
          <div className="eyebrow"><span className="dot" />ENTERPRISE CAPABILITIES</div>
          <h2 style={{ marginTop: 18 }}>Twelve things your CISO will actually read.</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(163,113,247,0.14)', color: 'var(--ent)',
                border: '1px solid rgba(163,113,247,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 EntTimeline() {
  const weeks = [
    ['Week 1', 'Discovery', 'Security review, infra questionnaire, threat model walkthrough, custom policy definition.'],
    ['Week 2', 'Infrastructure', 'Deploy via Helm or Docker Compose. Provision Postgres + Neo4j + KMS. Connect your LLM proxy.'],
    ['Week 3', 'Auth & RBAC', 'Wire up SSO (Okta / Azure AD / Ping). Configure custom roles, SCIM, MFA enforcement.'],
    ['Week 4', 'Rollout', 'Pilot with 10 engineers, expand to 100+, train admins, hand off monitoring runbooks.'],
  ];
  return (
    <section className="theme-ent">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 40 }}>
          <div className="eyebrow"><span className="dot" />IMPLEMENTATION</div>
          <h2 style={{ marginTop: 18 }}>Four weeks to production. With a named SRE.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 12, position: 'relative' }}>
          {weeks.map((w, i) => (
            <div key={w[0]} className="card" style={{ padding: 24, position: 'relative' }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--ent)', letterSpacing: '0.06em' }}>{w[0].toUpperCase()}</div>
              <h3 style={{ marginTop: 10, marginBottom: 8, fontSize: 18 }}>{w[1]}</h3>
              <p style={{ fontSize: 13 }}>{w[2]}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function EntCompliance() {
  const badges = [
    ['SOC2', 'Type II aligned', 'Security, availability, confidentiality controls implemented and evidenced.'],
    ['HIPAA', 'Ready architecture', 'BAA available. PHI handling, audit logging, encryption at rest & transit.'],
    ['ISO27001', 'Control alignment', 'Annex A controls mapped. ISMS-ready. Risk register templates included.'],
    ['GDPR', 'By design', 'Data residency, right to erasure, DPA available, sub-processor registry.'],
  ];
  return (
    <section className="theme-ent">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 40 }}>
          <div className="eyebrow"><span className="dot" />COMPLIANCE</div>
          <h2 style={{ marginTop: 18 }}>Built for the audits you can't fail.</h2>
        </div>
        <div className="grid grid-4">
          {badges.map(b => (
            <div key={b[0]} className="card" style={{ padding: 24 }}>
              <div style={{
                display: 'inline-block', padding: '6px 12px', borderRadius: 6,
                background: 'rgba(163,113,247,0.14)', color: 'var(--ent)',
                fontFamily: 'var(--mono)', fontSize: 14, fontWeight: 600,
                border: '1px solid rgba(163,113,247,0.35)',
              }}>{b[0]}</div>
              <h4 style={{ marginTop: 14, marginBottom: 6, fontSize: 15 }}>{b[1]}</h4>
              <p style={{ fontSize: 13 }}>{b[2]}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function EntContact() {
  return (
    <section className="theme-ent" style={{ paddingBottom: 120 }}>
      <div className="container">
        <div className="card" style={{
          padding: '56px 48px',
          background: 'radial-gradient(circle at 80% 20%, rgba(163,113,247,0.16), transparent 50%), var(--bg-2)',
          border: '1px solid color-mix(in oklab, var(--ent) 30%, var(--border))',
        }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 48, alignItems: 'center' }}>
            <div>
              <div className="eyebrow"><span className="dot" />TALK TO US</div>
              <h2 style={{ marginTop: 16, marginBottom: 14 }}>Let's scope your deployment.</h2>
              <p className="lead" style={{ marginBottom: 24 }}>
                A 30-minute call with an engineer, not a BDR. We'll walk through your architecture, compliance needs, and timeline, then follow up with a concrete proposal.
              </p>
              <div className="row" style={{ gap: 12, flexWrap: 'wrap' }}>
                <button className="btn btn-lg" style={{ background: 'var(--ent)', color: '#0B1020', fontWeight: 600 }}>Book demo →</button>
                <button className="btn btn-lg btn-ghost">Security brief (PDF)</button>
              </div>
            </div>
            <div className="card" style={{ background: 'var(--bg-1)', padding: 24 }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--text-dim)', letterSpacing: '0.06em', marginBottom: 14 }}>TYPICAL ENTERPRISE PROFILE</div>
              {[
                ['Team size', '100–5,000 engineers'],
                ['Industries', 'Finance, healthcare, defense, gov'],
                ['Deployment', 'K8s in AWS / Azure / GCP / on-prem'],
                ['Pricing', '$5k–50k+ / month, annual'],
                ['Implementation', '2–4 weeks with named SRE'],
                ['Support', '24/7 on-call, 99.9% SLA'],
              ].map(([k, v]) => (
                <div key={k} style={{ display: 'grid', gridTemplateColumns: '130px 1fr', padding: '8px 0', borderTop: '1px solid var(--border-muted)', fontSize: 13 }}>
                  <span style={{ color: 'var(--text-muted)' }}>{k}</span>
                  <span>{v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { EntHero, EntFeatures, EntTimeline, EntCompliance, EntContact });