import Link from "next/link";
import type { Metadata } from "next";

export const metadata: Metadata = {
    title: "Pricing",
    description: "Three tiers, cloud or self-hosted, priced per managed server. Free for 3 servers. Professional from £19 a month, Enterprise from £49 a month, £5 per extra server.",
};

/* Prices and allowances are the shipped catalogue, not marketing rounding:
 * allowances come from shared/license/plans.go and the amounts from the Paddle
 * catalogue. Annual is ten times monthly everywhere, which is the "two months
 * free" the portal's own term picker states. */
const COMPARISON: [string, string, string, string][] = [
    ["Managed servers", "3", "5, then £2.50 each", "10, then £2.50 each"],
    ["People", "Unlimited", "Unlimited", "Unlimited"],
    ["SSH key assignment", "Yes", "Yes", "Yes"],
    ["Workflows and step library", "Yes", "Yes", "Yes"],
    ["Monitors", "3", "Unlimited", "Unlimited"],
    ["Secret groups", "1", "Unlimited", "Unlimited"],
    ["Notification channels", "1", "Unlimited", "Unlimited"],
    ["Audit history", "30 days", "365 days", "Forever"],
    ["Browser console", "Not Available", "Add-on", "Add-on"],
    ["Single sign-on", "Not Available", "Add-on", "Add-on"],
    ["Vulnerability scanning", "Not Available", "Add-on", "Add-on"],
    ["Support", "Community", "Email, 24/5", "Email and phone, 24/7"],
    ["Cloud term", "Annual, £0", "Monthly or annual", "Monthly or annual"],
    ["Self-hosted term", "Annual, £0", "Annual", "Annual"],
];

export default function PricingPage() {
    return (
        <section className="rail band band--open">
            <span className="tag">Pricing</span>
            <h1
                style={{
                    fontSize: "var(--s-3)",
                    margin: "0.8rem 0 1rem",
                    maxWidth: "17ch",
                }}
            >
                Pick a tier, then pay per server.
            </h1>
            <p className="lede">You pay for the number of servers you manage, and nothing else. Adding people costs nothing, and neither does adding keys, scripts, uptime checks or stored passwords. Every tier costs the same whether we host it or you do.</p>

            <div className="plans">
                <div className="plan">
                    <div>
                        <div className="plan__n">Free</div>
                        <p className="plan__d">For a home lab or a couple of servers you look after on your own.</p>
                    </div>
                    <div className="plan__p">
                        £0 <span>3 servers</span>
                    </div>
                    <p className="plan__t">Cloud or self-hosted. Renewed once a year from the portal, one free instance per deployment.</p>
                    <ul>
                        <li>3 servers and 3 monitors</li>
                        <li>Keys, workflows and the step library</li>
                        <li>One secret group, one alert channel</li>
                        <li>30 days of audit history</li>
                        <li>Community support</li>
                    </ul>
                    <Link className="btn btn--line" href="/start">
                        Get started
                    </Link>
                </div>

                <div className="plan plan--pick">
                    <div>
                        <div className="plan__n">Professional</div>
                        <p className="plan__d">For servers people rely on, looked after by more than one person.</p>
                    </div>
                    <div className="plan__p">
                        £19 <span>/ month, 3 servers</span>
                    </div>
                    <p className="plan__t">£2.50 per extra server. £190 a year saves two months. Self-hosted is £190 a year.</p>
                    <ul>
                        <li>3 servers included, add as many as you like</li>
                        <li>Unlimited monitors, secrets and channels</li>
                        <li>365 days of audit history</li>
                        <li>Browser console, single sign-on and vulnerability scanning as add-ons</li>
                        <li>Email support, 24/5</li>
                    </ul>
                    <Link className="btn btn--solid" href="/start">
                        Get started
                    </Link>
                </div>

                <div className="plan">
                    <div>
                        <div className="plan__n">Enterprise</div>
                        <p className="plan__d">For larger estates, and for anyone who has to answer to an auditor.</p>
                    </div>
                    <div className="plan__p">
                        £49 <span>/ month, 10 servers</span>
                    </div>
                    <p className="plan__t">£2.50 per extra server. £490 a year saves two months. Self-hosted is £490 a year.</p>
                    <ul>
                        <li>10 servers included, add as many as you like</li>
                        <li>Everything in Professional</li>
                        <li>Audit history kept forever</li>
                        <li>Email and phone support, 24/7</li>
                        <li>Buy it yourself, no sales call</li>
                    </ul>
                    <Link className="btn btn--line" href="/start">
                        Get started
                    </Link>
                </div>
            </div>

            <div className="specs" style={{ marginTop: "2.6rem", maxWidth: "66ch" }}>
                <span className="tag">Add-ons, on Professional and Enterprise</span>
                <div className="spec">
                    <span className="spec__k">£5 / MO</span>
                    <div>
                        <h3>Browser console</h3>
                        <p>SSH, RDP and VNC sessions in the browser, audited like everything else. £50 a year.</p>
                    </div>
                </div>
                <div className="spec">
                    <span className="spec__k">£9 / MO</span>
                    <div>
                        <h3>Single sign-on</h3>
                        <p>Connect your own OIDC provider to an instance. £90 a year.</p>
                    </div>
                </div>
                <div className="spec">
                    <span className="spec__k">£7 / MO</span>
                    <div>
                        <h3>Vulnerability Scanning</h3>
                        <p>Agents will scan and report known Vulnerabilites. £70 a year.</p>
                    </div>
                </div>
            </div>

            <p className="scroll__hint">Scroll the table sideways for all three tiers</p>
            <div className="scroll" tabIndex={0} role="region" aria-label="Plan comparison">
                <table className="cmp">
                    <thead>
                        <tr>
                            <th>Capability</th>
                            <th>Free</th>
                            <th>Professional</th>
                            <th>Enterprise</th>
                        </tr>
                    </thead>
                    <tbody>
                        {COMPARISON.map(([capability, free, professional, enterprise]) => (
                            <tr key={capability}>
                                <td>{capability}</td>
                                <td>{free}</td>
                                <td>{professional}</td>
                                <td>{enterprise}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>

            <div style={{ marginTop: "3.2rem", maxWidth: "66ch" }}>
                <span className="tag">Fine print, in plain words</span>
                <div className="specs">
                    <div className="spec">
                        <span className="spec__k">COUNTING</span>
                        <div>
                            <h3>What counts as a server</h3>
                            <p>Anything with Vantage installed on it counts as one. You set the limit yourself rather than being metered, so the bill is always the number you chose.</p>
                        </div>
                    </div>
                    <div className="spec">
                        <span className="spec__k">ADDING</span>
                        <div>
                            <h3>Going up mid-term</h3>
                            <p>Raise the server count and the new cap applies straight away, prorated for the rest of the period. Your renewal date does not move.</p>
                        </div>
                    </div>
                    <div className="spec">
                        <span className="spec__k">REDUCING</span>
                        <div>
                            <h3>Going down</h3>
                            <p>A reduction takes effect at your next renewal. You keep what you have already paid for until then, and we show you the date it changes.</p>
                        </div>
                    </div>
                    <div className="spec">
                        <span className="spec__k">LIMITS</span>
                        <div>
                            <h3>Reaching your limit</h3>
                            <p>Nothing gets deleted. A server past the limit still checks in and still shows up in your list, but access changes stop reaching it until you raise the limit or remove one.</p>
                        </div>
                    </div>
                    <div className="spec">
                        <span className="spec__k">CANCELLING</span>
                        <div>
                            <h3>What happens when you stop paying</h3>
                            <p>You keep everything until the end of the period you paid for. After that it becomes read-only: your uptime checks carry on running, your alerts still arrive and your servers keep the access they have. You just can&apos;t change anything until you renew.</p>
                        </div>
                    </div>
                    <div className="spec">
                        <span className="spec__k">SELF-HOSTED</span>
                        <div>
                            <h3>Why self-hosted is yearly only</h3>
                            <p>When you host it yourself, your licence is a file your installation checks on its own. It never contacts us, which is the point but it also means we can&apos;t switch one off partway through, so we sell it a year at a time.</p>
                        </div>
                    </div>
                    <div className="spec">
                        <span className="spec__k">EXIT</span>
                        <div>
                            <h3>Leaving</h3>
                            <p>You can export your servers, keys, scripts and stored passwords at any time. Your servers keep the access they already have, so nobody gets locked out while you move.</p>
                        </div>
                    </div>
                </div>
            </div>

            <p className="prose" style={{ marginTop: "2.4rem" }}>
                Prices exclude VAT, which is calculated at checkout. Billing is handled by Paddle as merchant of record.{" "}
                <Link href="/contact" style={{ color: "var(--accent)" }}>
                    Ask us anything
                </Link>{" "}
                before you buy.
            </p>
        </section>
    );
}
