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

export const metadata: Metadata = {
  title: "Pricing",
  description:
    "Priced per managed server. People, keys, workflows and secrets are free. Free for 3 servers, £4 per server per month, or £290 a year self-hosted.",
};

const COMPARISON: [string, string, string, string][] = [
  ["Managed servers", "3", "Unlimited", "Unlimited"],
  ["Members", "1", "Unlimited", "Unlimited"],
  ["SSH key assignment", "Yes", "Yes", "Yes"],
  ["Workflows and step library", "Yes", "Yes", "Yes"],
  ["Monitors", "3", "Unlimited", "Unlimited"],
  ["Secrets vault", "No", "Yes", "Yes"],
  ["Browser console", "No", "Yes", "Yes"],
  ["OIDC single sign-on", "No", "Yes", "Yes"],
  ["Audit history", "30 days", "Forever", "Forever"],
  ["Runs on your hardware", "No", "No", "Yes"],
  ["Support", "Community", "Next business day", "Priority"],
];

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" }}>
        Per managed server. Nothing else counts.
      </h1>
      <p className="lede">
        People are free. Keys, workflows, monitors and secrets are free. You pay for servers running an agent, because
        that is the only number that grows with you.
      </p>

      <div className="plans">
        <div className="plan">
          <div>
            <div className="plan__n">Solo</div>
            <p className="plan__d">A homelab, a couple of VPSes, and the keys on your own laptop.</p>
          </div>
          <div className="plan__p">
            £0 <span>forever</span>
          </div>
          <ul>
            <li>Up to 3 servers</li>
            <li>Keys, workflows and monitors</li>
            <li>One member, one instance</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">Fleet</div>
            <p className="plan__d">Real infrastructure, and more than one person holding the keys.</p>
          </div>
          <div className="plan__p">
            £4 <span>/ server / month</span>
          </div>
          <ul>
            <li>Unlimited servers and members</li>
            <li>Owner, admin and member roles</li>
            <li>OIDC single sign-on</li>
            <li>Browser console and secrets vault</li>
            <li>Full audit history</li>
            <li>Email support, next business day</li>
          </ul>
          <Link className="btn btn--solid" href="/start">
            Start 14-day trial
          </Link>
        </div>

        <div className="plan">
          <div>
            <div className="plan__n">Self-hosted</div>
            <p className="plan__d">The whole stack on your metal, behind your own boundary.</p>
          </div>
          <div className="plan__p">
            £290 <span>/ year, per install</span>
          </div>
          <ul>
            <li>Everything in Fleet, no server cap</li>
            <li>Your MongoDB, Redis and certificates</li>
            <li>Mirror agent releases internally</li>
            <li>Priority support and upgrade notes</li>
          </ul>
          <Link className="btn btn--line" href="/contact">
            Talk to us
          </Link>
        </div>
      </div>

      <div className="scroll">
        <table className="cmp">
          <thead>
            <tr>
              <th>Capability</th>
              <th>Solo</th>
              <th>Fleet</th>
              <th>Self-hosted</th>
            </tr>
          </thead>
          <tbody>
            {COMPARISON.map(([capability, solo, fleet, selfHosted]) => (
              <tr key={capability}>
                <td>{capability}</td>
                <td>{solo}</td>
                <td>{fleet}</td>
                <td>{selfHosted}</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>One running agent, one server. Remove a box and it stops billing that day.</p>
            </div>
          </div>
          <div className="spec">
            <span className="spec__k">LIMITS</span>
            <div>
              <h3>Going over on Solo</h3>
              <p>
                Nothing is deleted. A fourth agent registers and heartbeats, but stops syncing keys until you upgrade or
                remove a server.
              </p>
            </div>
          </div>
          <div className="spec">
            <span className="spec__k">EXIT</span>
            <div>
              <h3>Leaving</h3>
              <p>
                Export every server, key, workflow and secret group as JSON whenever you like. Agents keep their last
                synced state on disk, so nobody is locked out mid-migration.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
