import { Callout } from "../components/Callout";
import { Link } from "react-router-dom";

export function WhatIsVeylantPage() {
  return (
    <div>
      <h1 id="what-is-veylant">What is Veylant IA?</h1>
      <p>
        <strong>Veylant IA</strong> is a B2B SaaS platform that acts as an intelligent proxy and
        gateway for enterprise AI consumption. It sits between your organization's applications and
        LLM providers (OpenAI, Anthropic, Azure, Mistral, Ollama), enforcing governance policies on
        every request.
      </p>

      <Callout type="info" title="OpenAI-compatible API">
        Veylant IA implements the OpenAI API format — specifically{" "}
        <code>/v1/chat/completions</code>. Your existing OpenAI SDK clients work without
        modification; just change the base URL.
      </Callout>

      <h2 id="core-value-proposition">Core Value Proposition</h2>
      <p>Four problems Veylant IA solves for enterprise IT and compliance teams:</p>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 my-4">
        {[
          {
            title: "Shadow AI Prevention",
            desc: "Every AI call flows through the proxy — no direct provider access possible. Full audit trail of who sent what to which model.",
          },
          {
            title: "PII Anonymization",
            desc: "3-layer detection (regex + spaCy NER + LLM validation) anonymizes sensitive data before it leaves your perimeter. <50ms latency.",
          },
          {
            title: "GDPR & EU AI Act Compliance",
            desc: "Built-in Article 30 processing registry, AI Act risk classification, DPIA templates, and subject access/erasure rights.",
          },
          {
            title: "Cost Control",
            desc: "Per-tenant and per-user token budgets, circuit breakers per provider, cost breakdown by department and model.",
          },
        ].map((card) => (
          <div key={card.title} className="rounded-lg border bg-card p-4">
            <h3 className="font-semibold text-sm mb-1">{card.title}</h3>
            <p className="text-sm text-muted-foreground leading-relaxed">{card.desc}</p>
          </div>
        ))}
      </div>

      <h2 id="architecture">Architecture Overview</h2>
      <p>
        Veylant IA is a <strong>modular monolith</strong> (not microservices) with two distinct
        runtimes:
      </p>

      <div className="my-4 rounded-lg border bg-zinc-950 text-zinc-100 p-4 font-mono text-xs leading-relaxed overflow-x-auto">
        <pre>{`API Gateway (Traefik / Nginx)
        │
        ▼
Go Proxy [cmd/proxy] — :8090
  ├── Auth middleware     (OIDC/Keycloak JWT validation)
  ├── Rate limiter        (token-bucket, per-tenant + per-user)
  ├── PII gRPC client     → PII Service :50051
  ├── Routing engine      (PostgreSQL JSONB rules, in-memory cache)
  ├── Provider adapters   (OpenAI / Anthropic / Azure / Mistral / Ollama)
  ├── Audit logger        → ClickHouse (async batch)
  └── Admin REST API      (/v1/admin/*)
        │ gRPC <2ms
        ▼
PII Detection Service [FastAPI + grpc.aio] — :8091 / :50051
  ├── Layer 1: Regex      (IBAN, email, phone, SSN, credit cards)
  ├── Layer 2: Presidio + spaCy NER (names, addresses, orgs)
  └── Layer 3: LLM validation (ambiguous cases)
        │
        ▼
LLM Provider (OpenAI / Anthropic / Azure / Mistral / Ollama)

Data Layer:
  PostgreSQL 16   — config, users, policies, registry (RLS multi-tenancy)
  ClickHouse      — append-only audit logs and analytics
  Redis 7         — sessions, rate limiting, PII pseudonymization mappings
  Keycloak        — IAM, SSO, SAML 2.0 / OIDC federation`}</pre>
      </div>

      <h2 id="key-components">Key Components</h2>

      <h3 id="go-proxy">Go Proxy</h3>
      <p>
        The core of Veylant IA. Written in Go 1.24, it handles all incoming AI requests, applies
        governance policies, and routes them to the appropriate LLM provider. It exposes:
      </p>
      <ul>
        <li>
          <code>/v1/chat/completions</code> — OpenAI-compatible inference endpoint
        </li>
        <li>
          <code>/v1/pii/analyze</code> — on-demand PII detection
        </li>
        <li>
          <code>/v1/admin/*</code> — governance API (policies, users, audit logs, compliance)
        </li>
        <li>
          <code>/healthz</code>, <code>/docs</code>, <code>/playground</code>
        </li>
      </ul>

      <h3 id="pii-service">PII Detection Service</h3>
      <p>
        A Python FastAPI + gRPC service running 3 detection layers in under 50ms. Anonymizes or
        pseudonymizes PII in prompts before they reach the upstream LLM. Pseudonymized mappings are
        stored in Redis (AES-256-GCM encrypted, TTL-based).
      </p>

      <h3 id="routing-engine">Routing Engine</h3>
      <p>
        Rules stored in PostgreSQL (JSONB conditions), cached in memory. Routes requests to
        providers based on user role, department, model requested, sensitivity score, token
        estimate, and more. First-match wins; lower priority number = evaluated first.
      </p>

      <h2 id="supported-providers">Supported LLM Providers</h2>
      <div className="overflow-x-auto my-4">
        <table className="w-full text-sm border rounded-lg overflow-hidden">
          <thead>
            <tr className="bg-muted/50 border-b">
              <th className="text-left px-4 py-2.5 font-semibold">Provider</th>
              <th className="text-left px-4 py-2.5 font-semibold">Models</th>
              <th className="text-left px-4 py-2.5 font-semibold">Streaming</th>
              <th className="text-left px-4 py-2.5 font-semibold">Status</th>
            </tr>
          </thead>
          <tbody>
            {[
              { provider: "OpenAI", models: "gpt-4o, gpt-4-turbo, gpt-3.5-turbo", stream: "Yes", status: "GA" },
              { provider: "Anthropic", models: "claude-3-5-sonnet, claude-3-opus", stream: "Yes", status: "GA" },
              { provider: "Azure OpenAI", models: "GPT-4 deployments", stream: "Yes", status: "GA" },
              { provider: "Mistral AI", models: "mistral-large, mistral-medium", stream: "Yes", status: "GA" },
              { provider: "Ollama", models: "llama3, mistral, codellama, ...", stream: "Yes", status: "GA" },
            ].map((row) => (
              <tr key={row.provider} className="border-b last:border-0">
                <td className="px-4 py-2.5 font-medium">{row.provider}</td>
                <td className="px-4 py-2.5 text-muted-foreground font-mono text-xs">{row.models}</td>
                <td className="px-4 py-2.5 text-green-600 dark:text-green-400">{row.stream}</td>
                <td className="px-4 py-2.5">
                  <span className="text-xs bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-300 px-2 py-0.5 rounded font-medium">
                    {row.status}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <h2 id="next-steps">Next Steps</h2>
      <ul>
        <li>
          <Link to="/docs/getting-started/quick-start">Quick Start</Link> — run the full stack in 5
          minutes
        </li>
        <li>
          <Link to="/docs/getting-started/concepts">Key Concepts</Link> — learn the core
          abstractions
        </li>
        <li>
          <Link to="/docs/api/chat-completions">API Reference</Link> — integrate your first
          application
        </li>
      </ul>
    </div>
  );
}
