import type { Metadata } from "next";
import { TopologyDiagram } from "@/components/TopologyDiagram";

export const metadata: Metadata = {
    title: "Platform",
    description: "How Vantage fits together: the part you run, a small program on each server, and one connection between them that the server opens itself.",
};

export default function PlatformPage() {
    return (
        <>
            <section className="rail band band--open">
                <span className="tag">Platform</span>
                <h1 style={{ fontSize: "var(--s-3)", margin: "0.8rem 0 1rem", maxWidth: "19ch" }}>How the pieces fit together.</h1>
                <p className="lede">There are only three parts: Vantage itself, a small program on each of your servers, and one connection between them that your server opens.</p>

                <TopologyDiagram />

                <div className="split" style={{ marginTop: "3rem" }}>
                    <div>
                        <h2 style={{ fontSize: "var(--s-2)", maxWidth: "18ch" }}>Your servers call us, not the other way round.</h2>
                        <div className="prose" style={{ marginTop: "1rem" }}>
                            <p>
                                Each server reaches out to Vantage over an encrypted connection it opens itself. You don&apos;t open a port in your firewall, you don&apos;t need a fixed address, and a
                                machine sitting behind a home router works exactly like one in a data centre.
                            </p>
                            <p>
                                Once that connection is open it stays open, so anything you ask for from the browser run this script, open a session, install these updates happens straight away rather
                                than on a timer.
                            </p>
                        </div>
                    </div>

                    <div className="specs specs--flush">
                        <div className="spec">
                            <span className="spec__k">CHECKING</span>
                            <div>
                                <h3>Access, every 30 seconds</h3>
                                <p>The server asks who should be able to reach it. If nothing has changed, nothing is touched.</p>
                            </div>
                        </div>
                        <div className="spec">
                            <span className="spec__k">ASKING</span>
                            <div>
                                <h3>Anything you press</h3>
                                <p>Run a script, open a session, install updates, create a key. Sent down the connection as you ask for it.</p>
                            </div>
                        </div>
                        <div className="spec">
                            <span className="spec__k">REPORTING</span>
                            <div>
                                <h3>Health and uptime</h3>
                                <p>Load and free space every 30 seconds, full hardware details every 15 minutes, uptime checks as they finish.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section className="rail band">
                <span className="tag">Changing access</span>
                <h2 style={{ fontSize: "var(--s-2)", marginTop: "0.7rem", maxWidth: "24ch" }}>Careful about the file it owns.</h2>
                <div className="split" style={{ marginTop: "2rem" }}>
                    <p className="prose">
                        The only thing Vantage changes on your server is the list of keys allowed to log in. It compares that list against what you have set and leaves it alone when they already
                        match, so most of the time it writes nothing at all. When it does need to make a change, it prepares the new list first and swaps it in one go a server that loses power halfway
                        through keeps the list it already had, rather than ending up with half of one.
                    </p>
                    <div className="specs specs--flush">
                        <div className="spec">
                            <span className="spec__k">SCOPE</span>
                            <div>
                                <h3>One file, nothing else</h3>
                                <p>It doesn&apos;t manage your packages, your configuration or your users. Anything else that happens is a script you wrote and asked it to run.</p>
                            </div>
                        </div>
                        <div className="spec">
                            <span className="spec__k">REMOVING</span>
                            <div>
                                <h3>Taking access away</h3>
                                <p>Untick a server and the key is gone from it within 30 seconds. We keep the record that it was there, and who removed it.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section className="rail band">
                <span className="tag">People and access</span>
                <h2 style={{ fontSize: "var(--s-2)", marginTop: "0.7rem", maxWidth: "22ch" }}>Who can see what.</h2>
                <div className="caps">
                    <article className="cap">
                        <span className="cap__k">Separation</span>
                        <h3>Your account is its own world</h3>
                        <p>Servers, keys, scripts, checks and passwords all belong to one account. There is no shared view, and no setting that could accidentally expose one account to another.</p>
                    </article>
                    <article className="cap">
                        <span className="cap__k">Roles</span>
                        <h3>Owner, admin, member</h3>
                        <p>Members get on with the day-to-day work. Admins and owners are the ones who add and remove people and change how the account is set up.</p>
                    </article>
                    <article className="cap">
                        <span className="cap__k">Signing in</span>
                        <h3>Email, or your own login</h3>
                        <p>Email and password works out of the box. If your organisation already has a single sign-on provider, you can point Vantage at it instead.</p>
                    </article>
                    <article className="cap">
                        <span className="cap__k">Storage</span>
                        <h3>Encrypted, and yours</h3>
                        <p>Private keys, passwords and saved credentials are encrypted before they are stored. Host it yourself and the key that unlocks them is one only you have.</p>
                    </article>
                </div>
            </section>

            <section className="rail band">
                <span className="tag">What it deliberately doesn&apos;t do</span>
                <h2 style={{ fontSize: "var(--s-2)", marginTop: "0.7rem", maxWidth: "22ch" }}>Things we left out on purpose.</h2>
                <div className="specs" style={{ maxWidth: "70ch" }}>
                    <div className="spec">
                        <span className="spec__k">NOT IN THE WAY</span>
                        <div>
                            <h3>Your connections don&apos;t go through us</h3>
                            <p>Vantage decides who is allowed in; when you log in you go straight to the server. If Vantage is down for any reason, you can still get to your machines.</p>
                        </div>
                    </div>
                    <div className="spec">
                        <span className="spec__k">NOT A KEYRING</span>
                        <div>
                            <h3>We&apos;d rather not hold your private keys</h3>
                            <p>A key created on a server stays there unless you choose to upload it, and we only ever need the public half to give someone access.</p>
                        </div>
                    </div>
                    <div className="spec">
                        <span className="spec__k">NOT PER-PERSON</span>
                        <div>
                            <h3>Access to the server, not to accounts on it</h3>
                            <p>Vantage manages administrator access to each machine. Handing individual people their own separate logins on every box is a different job, and a bigger one.</p>
                        </div>
                    </div>
                    <div className="spec">
                        <span className="spec__k">NO ADD-ONS</span>
                        <div>
                            <h3>Nothing to extend, on purpose</h3>
                            <p>The program on your servers is small and has no plugin system. It runs with full privileges, so we would rather it be something you could sit down and read.</p>
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
}
