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.hostxtra.co.uk/install | bash -s -- --server-id=<b>$ID</b> --token=<b>$TOKEN</b>
                    {"\n\n"}
                    <i># Windows</i>
                    {"\n"}
                    <b>irm</b> https://vantage.hostxtra.co.uk/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>
        </>
    );
}