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">Server management you can host yourself</span>
                    <h1>One place to manage every server you look after.</h1>
                    <p className="lede">
                        Vantage keeps track of who has access to which server, runs your scripts, checks your services are still up, stores your passwords and gives you a terminal in the browser. You
                        install one small program on each server, and you can run the whole thing on your own hardware.
                    </p>
                    <div className="hero__acts">
                        <Link className="btn btn--solid" href="/start">
                            Get started free
                        </Link>
                        <Link className="btn btn--line" href="/platform">
                            What it does
                        </Link>
                    </div>
                    <p className="hero__foot">Free for 3 servers · Linux and Windows · Hosted by us or by you</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" }}>Nothing knows about anything else.</h2>
                <div className="split" style={{ marginTop: "2rem" }}>
                    <p className="prose">
                        Access ends up in a spreadsheet. Scripts end up in somebody&apos;s home directory. Uptime checks live in a separate service, passwords get pasted into a chat thread, and nobody
                        writes down who ran what. So when you need to know who can get into a particular box, or what was done to it last week, you go and work it out by hand.
                    </p>
                    <div className="specs specs--flush">
                        <div className="spec">
                            <span className="spec__k">ONE AGENT</span>
                            <div>
                                <h3>One thing to install</h3>
                                <p>Access, scripts, uptime checks and hardware stats all come down the same connection. You don&apos;t install a second thing to get the second feature.</p>
                            </div>
                        </div>
                        <div className="spec">
                            <span className="spec__k">ONE RECORD</span>
                            <div>
                                <h3>Everything is written down</h3>
                                <p>Who was given access and who took it away, who ran which script, who opened a session. It all goes in the same log with a name against it.</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" }}>What it does.</h2>
                <div className="caps">
                    <article className="cap">
                        <span className="cap__k">Access</span>
                        <h3>SSH keys</h3>
                        <p>
                            Choose which servers a key can reach, and take that access away again when someone leaves. Each server is kept matching what you set, without you logging in to change it.
                        </p>
                        <ul>
                            <li>spots the same key added twice</li>
                            <li>can create a key on the server itself</li>
                            <li>keeps a record of access you removed</li>
                        </ul>
                    </article>

                    <article className="cap">
                        <span className="cap__k">Scripts</span>
                        <h3>Workflows</h3>
                        <p>Keep your shell and PowerShell scripts in one library instead of scattered across machines, then run them in order across a group of servers.</p>
                        <ul>
                            <li>watch the output as it happens</li>
                            <li>stop, carry on or retry when a step fails</li>
                            <li>pass values from one step to the next</li>
                        </ul>
                    </article>

                    <article className="cap">
                        <span className="cap__k">Uptime</span>
                        <h3>Monitors</h3>
                        <p>
                            Check that a site, a port, a machine or a certificate is still answering. Checks can run from us, or from an agent inside your own network for things the internet
                            can&apos;t see.
                        </p>
                        <ul>
                            <li>a history of outages and uptime</li>
                            <li>warnings before a certificate expires</li>
                            <li>alerts by email, Slack, Discord or Telegram</li>
                        </ul>
                    </article>

                    <article className="cap">
                        <span className="cap__k">Passwords</span>
                        <h3>Vault</h3>
                        <p>Keep passwords, tokens and licence keys in one encrypted place. Your scripts are handed what they need as they run, and it never shows up in the logs afterwards.</p>
                        <ul>
                            <li>grouped by the thing they belong to</li>
                            <li>encrypted with a key only you hold</li>
                            <li>looking at one is recorded</li>
                        </ul>
                    </article>

                    <article className="cap">
                        <span className="cap__k">Access</span>
                        <h3>Browser console</h3>
                        <p>Open a terminal or a remote desktop from the browser. Nothing to install on the machine you&apos;re sitting at, and every session goes in the log.</p>
                        <ul>
                            <li>links that only work once</li>
                            <li>passwords used once, then discarded</li>
                            <li>works from a borrowed laptop</li>
                        </ul>
                    </article>

                    <article className="cap">
                        <span className="cap__k">Health</span>
                        <h3>Hardware and updates</h3>
                        <p>See processor, memory, disk and operating system for every server, along with the updates waiting to be installed and install them without logging in.</p>
                        <ul>
                            <li>refreshed every 30 seconds</li>
                            <li>updates applied from the same screen</li>
                            <li>agents keep themselves up to date</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" }}>Getting your first server in.</h2>
                <div className="flow">
                    <div className="flow__c">
                        <span className="flow__n">FIRST</span>
                        <h3>Set up your account</h3>
                        <p>You&apos;re the owner. Nobody outside your account can see anything in it.</p>
                    </div>
                    <div className="flow__c">
                        <span className="flow__n">THEN</span>
                        <h3>Add a server</h3>
                        <p>Copy the install command we show you and paste it into the server. It works once, then expires.</p>
                    </div>
                    <div className="flow__c">
                        <span className="flow__n">THEN</span>
                        <h3>Give yourself access</h3>
                        <p>Paste your public key and tick the servers it should reach. It arrives within 30 seconds.</p>
                    </div>
                    <div className="flow__c">
                        <span className="flow__n">AFTER</span>
                        <h3>Add the rest as you need it</h3>
                        <p>Set up an uptime check, save a script, invite the people you work with.</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" }}>Set up an account, add one server, and see it working before you decide anything.</p>
                    </div>
                    <Link className="btn btn--solid" href="/start">
                        Get started
                    </Link>
                </div>
            </section>
        </>
    );
}