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

export const metadata: Metadata = {
    title: "Contact",
    description: "Questions about pricing, licensing for self-hosted installs, security reports and bugs.",
};

const CHANNELS = [
    {
        title: "Support",
        body: "Everything else, including anything urgent.",
        link: "support@hostxtra.co.uk",
        href: "mailto:support@hostxtra.co.uk",
    },
    {
        title: "Security disclosure",
        body: "Encrypted reports, acknowledged within 72 hours.",
        link: "support@hostxtra.co.uk",
        href: "mailto:support@hostxtra.co.uk?subject=Security%20disclosure",
    },
    {
        title: "Bugs and feature requests",
        body: "Our public issue tracker, read by the people who write the code.",
        link: "git.vantage.hostxtra.co.uk/vantage",
        href: "https://git.vantage.hostxtra.co.uk/vantage",
    },
    {
        title: "Status",
        body: "Whether the hosted service is up, and a history of past incidents.",
        link: "status.vantage.hostxtra.co.uk",
        href: "https://status.vantage.hostxtra.co.uk",
    },
];

export default function ContactPage() {
    return (
        <section className="rail band band--open">
            <span className="tag">Contact</span>
            <h1 style={{ fontSize: "var(--s-3)", margin: "0.8rem 0 1rem", maxWidth: "15ch" }}>Get in touch.</h1>

            <div className="split" style={{ marginTop: "2.4rem" }}>
                <div className="card">
                    <ContactForm />
                </div>

                <div>
                    <p className="prose">If one of these is a better fit than the form, use it you&apos;ll get an answer sooner.</p>
                    {CHANNELS.map((channel) => (
                        <div className="chan" key={channel.title}>
                            <h3>{channel.title}</h3>
                            <p>{channel.body}</p>
                            <a href={channel.href}>{channel.link}</a>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}
