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>
        </>
    );
}