import Link from "next/link";
import { InstrumentPanel } from "@/components/InstrumentPanel";

export default function OverviewPage() {
  return (
    <>
      <div className="heroband">
        <section className="rail hero">
          <span className="tag">Self-hosted fleet control plane</span>
          <h1>Your servers, under one pane of glass you actually own.</h1>
          <p className="lede">
            Vantage holds SSH keys, runs scripts, watches services, stores secrets and opens consoles — across every
            machine you manage. One agent per server, outbound connections only, all state in your own database.
          </p>
          <div className="hero__acts">
            <Link className="btn btn--solid" href="/start">
              Create your organisation
            </Link>
            <Link className="btn btn--line" href="/platform">
              What it does
            </Link>
          </div>
          <p className="hero__foot">Free for 3 servers · Linux and Windows agents · Self-host the whole stack</p>
        </section>
      </div>

      <InstrumentPanel />

      <section className="rail band band--open">
        <span className="tag">The problem</span>
        <h2 style={{ fontSize: "var(--s-2)", marginTop: "0.7rem", maxWidth: "24ch" }}>
          Six tools, six sources of truth, one afternoon lost.
        </h2>
        <div className="split" style={{ marginTop: "2rem" }}>
          <p className="prose">
            Most small fleets end up with keys in a spreadsheet, scripts in someone&apos;s home directory, uptime checks
            in a separate service, secrets in a chat thread, and no record of who ran what. None of those systems know
            about each other, so every question — who can reach this box, what ran on it last, is it even up — gets
            answered by hand.
          </p>
          <div className="specs specs--flush">
            <div className="spec">
              <span className="spec__k">ONE AGENT</span>
              <div>
                <h3>Everything rides one connection</h3>
                <p>
                  Keys, steps, checks and inventory all travel over the same outbound link. Installing a second thing is
                  not the answer.
                </p>
              </div>
            </div>
            <div className="spec">
              <span className="spec__k">ONE RECORD</span>
              <div>
                <h3>Every change is an audit event</h3>
                <p>
                  Assignments, revocations, runs, console sessions and settings changes all land in the same log,
                  attributed to a person.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="rail band">
        <span className="tag">Capabilities</span>
        <h2 style={{ fontSize: "var(--s-2)", marginTop: "0.7rem", maxWidth: "22ch" }}>One control plane, six jobs.</h2>
        <div className="caps">
          <article className="cap">
            <span className="cap__k">Access</span>
            <h3>SSH keys</h3>
            <p>
              Assign public keys per server and revoke them softly. The agent diffs desired state against the file and
              rewrites <code>authorized_keys</code> atomically.
            </p>
            <ul>
              <li>fingerprint deduplication</li>
              <li>agent-side keypair generation</li>
              <li>revocation history preserved</li>
            </ul>
          </article>

          <article className="cap">
            <span className="cap__k">Execution</span>
            <h3>Workflows</h3>
            <p>
              A library of bash and PowerShell steps with declared inputs, outputs and secret references, composed into
              workflows that target a set of servers.
            </p>
            <ul>
              <li>live streamed step logs</li>
              <li>stop, continue or retry on failure</li>
              <li>values passed between steps</li>
            </ul>
          </article>

          <article className="cap">
            <span className="cap__k">Uptime</span>
            <h3>Monitors</h3>
            <p>
              HTTP, TCP, ICMP and TLS checks, run either from the control plane or from an agent inside the target
              network.
            </p>
            <ul>
              <li>incidents and uptime history</li>
              <li>certificate expiry warnings</li>
              <li>alerts to five channel types</li>
            </ul>
          </article>

          <article className="cap">
            <span className="cap__k">Secrets</span>
            <h3>Vault</h3>
            <p>
              Grouped key/value secrets encrypted with AES-256-GCM, injected into workflow steps at execution and never
              written to logs.
            </p>
            <ul>
              <li>read token for External Secrets Operator</li>
              <li>rotatable, hashed at rest</li>
              <li>reveal is an audited action</li>
            </ul>
          </article>

          <article className="cap">
            <span className="cap__k">Access</span>
            <h3>Browser console</h3>
            <p>
              Open an SSH, RDP or VNC session in the browser. SSH authenticates with a stored key, and every session is
              recorded in the audit log.
            </p>
            <ul>
              <li>one-time session tokens</li>
              <li>credentials consumed on connect</li>
              <li>no client software</li>
            </ul>
          </article>

          <article className="cap">
            <span className="cap__k">Health</span>
            <h3>Inventory and updates</h3>
            <p>
              CPU, memory, swap, disks and kernel reported continuously, alongside pending OS package updates you can
              apply from the interface.
            </p>
            <ul>
              <li>metrics every 30 seconds</li>
              <li>one-click package updates</li>
              <li>agents update themselves</li>
            </ul>
          </article>
        </div>
      </section>

      <section className="rail band">
        <span className="tag">Getting started</span>
        <h2 style={{ fontSize: "var(--s-2)", marginTop: "0.7rem", maxWidth: "20ch" }}>
          Four steps, and the first three take a minute.
        </h2>
        <div className="flow">
          <div className="flow__c">
            <span className="flow__n">FIRST</span>
            <h3>Create an organisation</h3>
            <p>You become the owner. Everything inside is invisible to every other organisation.</p>
          </div>
          <div className="flow__c">
            <span className="flow__n">THEN</span>
            <h3>Add a server</h3>
            <p>Copy the install one-liner. It expires in an hour and works exactly once.</p>
          </div>
          <div className="flow__c">
            <span className="flow__n">THEN</span>
            <h3>Assign a key</h3>
            <p>Paste a public key and tick the servers. It lands inside 30 seconds.</p>
          </div>
          <div className="flow__c">
            <span className="flow__n">AFTER</span>
            <h3>Build from there</h3>
            <p>Add checks, write a step, invite the team, connect your identity provider.</p>
          </div>
        </div>

        <pre className="code" style={{ marginTop: "1.6rem" }}>
          <i># Linux</i>
          {"\n"}
          <b>curl</b> -fsSL https://vantage.sh/install | bash -s -- --server-id=<b>$ID</b> --token=<b>$TOKEN</b>
          {"\n\n"}
          <i># Windows</i>
          {"\n"}
          <b>irm</b> https://vantage.sh/install.ps1 | <b>iex</b>
        </pre>
      </section>

      <section className="rail band band--flush">
        <div className="card card--cta">
          <div style={{ maxWidth: "48ch" }}>
            <h2 style={{ fontSize: "var(--s-1)" }}>Three servers, free, no card.</h2>
            <p style={{ color: "var(--ink-2)", marginTop: "0.4rem", fontSize: "0.94rem" }}>
              Create an organisation, install one agent, and watch a key land on a real box.
            </p>
          </div>
          <Link className="btn btn--solid" href="/start">
            Create organisation
          </Link>
        </div>
      </section>
    </>
  );
}