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

export const metadata: Metadata = {
    title: "Vantage Cloud",
    description: "An instance owns its servers, keys, workflows, monitors and secrets. Free for three servers, hosted or self-hosted.",
};

export default function StartPage() {
    return (
        <section className="rail band band--open">
            <div className="split">
                <div>
                    <span className="tag">Vantage Cloud</span>
                    <h1 style={{ fontSize: "var(--s-3)", margin: "0.8rem 0 1rem", maxWidth: "15ch" }}>Set up your instance.</h1>
                    <p className="lede" style={{ fontSize: "var(--s-0)" }}>
                        An instance owns its servers, keys, workflows, monitors and secrets. Nothing inside it is visible to any other instance. Confirm your email and it is created with you
                        as its owner.
                    </p>

                    <div className="card" style={{ marginTop: "1.9rem" }}>
                        <InstanceForm />
                    </div>
                </div>

                <div>
                    <span className="tag">What happens next</span>
                    <div className="specs">
                        <div className="spec">
                            <span className="spec__k">FIRST</span>
                            <div>
                                <h3>Confirm your email</h3>
                                <p>We send a link that works once. Your instance is created when you open it, not before.</p>
                            </div>
                        </div>
                        <div className="spec">
                            <span className="spec__k">THEN</span>
                            <div>
                                <h3>Add a key</h3>
                                <p>
                                    Paste the contents of <code>~/.ssh/id_ed25519.pub</code>. Vantage fingerprints it and refuses duplicates.
                                </p>
                            </div>
                        </div>
                        <div className="spec">
                            <span className="spec__k">THEN</span>
                            <div>
                                <h3>Add a server</h3>
                                <p>Run the install command as root. It expires in an hour and works once.</p>
                            </div>
                        </div>
                        <div className="spec">
                            <span className="spec__k">THEN</span>
                            <div>
                                <h3>Watch it register</h3>
                                <p>The server moves from pending to active on first sync, usually inside 30 seconds.</p>
                            </div>
                        </div>
                    </div>

                    <pre className="code" style={{ marginTop: "1.8rem" }}>
                        <b>curl</b> -fsSL https://vantage.hostxtra.co.uk/install | \{"\n"}
                        {"  "}bash -s -- --server-id=<b>$ID</b> --token=<b>$TOKEN</b>
                    </pre>
                </div>
            </div>
        </section>
    );
}
