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

export const metadata: Metadata = {
    title: "Vantage Cloud",
    description: "Set up an account, confirm your email, and get a free Vantage for three servers. Hosted by us, or installed on your own hardware.",
};

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" }}>Create your account.</h1>
                    <p className="lede" style={{ fontSize: "var(--s-0)" }}>
                        This is where your billing and your Vantage sites live. Confirm your email address and you can set one up right away free, for three servers, hosted by us.
                    </p>

                    <div className="card" style={{ marginTop: "1.9rem" }}>
                        <AccountForm />
                    </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 you a link that works once. Nothing is created until you open it.</p>
                            </div>
                        </div>
                        <div className="spec">
                            <span className="spec__k">THEN</span>
                            <div>
                                <h3>Set up your Vantage</h3>
                                <p>One click. It gets its own web address, and you&apos;re the owner of it.</p>
                            </div>
                        </div>
                        <div className="spec">
                            <span className="spec__k">THEN</span>
                            <div>
                                <h3>Add a key and a server</h3>
                                <p>Paste in your public key, then run the install command on the server. It works once and expires after an hour.</p>
                            </div>
                        </div>
                        <div className="spec">
                            <span className="spec__k">THEN</span>
                            <div>
                                <h3>Watch it appear</h3>
                                <p>The server turns from pending to active as soon as it checks in, usually within 30 seconds.</p>
                            </div>
                        </div>
                    </div>

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