import type { Metadata } from "next";
import { PageHeader } from "../components/ui/PageHeader";
import { Section } from "../components/ui/Section";
import { ButtonLink } from "../components/ui/ButtonLink";
import { ContactForm } from "../components/forms/ContactForm";
import { SocialLinks } from "../components/layout/SocialLinks";
import { CONTACT_CHANNELS } from "@/lib/site";

export const metadata: Metadata = {
  title: "Contact",
  description: "Get in touch with Highland Games Studio.",
};

const pressEmail =
  CONTACT_CHANNELS.find((channel) => channel.label === "PRESS")?.email ??
  CONTACT_CHANNELS[0].email;

/**
 * Contact.
 *
 * The page used to stack three sections of identical weight — three mailto
 * cards, then the form, then a press-kit block — which offered four ways to do
 * one thing and ranked none of them. Now the form is the page, and every
 * alternative sits in a column beside it: same information, one obvious
 * default.
 */
export default function ContactPage() {
  return (
    <>
      <PageHeader
        eyebrow="GET IN TOUCH"
        title="SAY HELLO."
        lead="Press inquiries, business opportunities, fan messages. All are welcome. We're three people, so answers take a few days, but they always come."
      />

      <Section top="none">
        <div className="grid gap-12 lg:grid-cols-[1.35fr_0.65fr] lg:gap-16">
          <div>
            <h2 className="mb-8 font-display text-2xl tracking-wider sm:text-3xl">
              SEND US A MESSAGE
            </h2>
            <ContactForm />
          </div>

          <aside className="flex flex-col gap-6">
            {/* Direct addresses, for anyone who would rather use their own mail
                client than a form. Secondary by placement, not hidden. */}
            <div className="rounded-2xl border border-border bg-surface p-8 transition-colors duration-300 hover:border-accent/40">
              <h2 className="font-display text-sm tracking-[0.25em] text-foreground-muted">
                DIRECT EMAIL
              </h2>
              <ul className="mt-6 space-y-6">
                {CONTACT_CHANNELS.map((channel) => (
                  <li key={channel.label}>
                    <p className="font-display text-xs tracking-[0.3em] text-accent">
                      {channel.label}
                    </p>
                    <p className="mt-2 text-sm leading-relaxed text-foreground-muted">
                      {channel.description}
                    </p>
                    <a
                      href={`mailto:${channel.email}`}
                      className="underline-grow mt-2 inline-block break-words text-sm text-foreground transition-colors hover:text-accent"
                    >
                      {channel.email}
                    </a>
                  </li>
                ))}
              </ul>
            </div>

            <div className="rounded-2xl border border-border bg-surface p-8 transition-colors duration-300 hover:border-accent/40">
              <h2 className="font-display text-sm tracking-[0.25em] text-foreground-muted">
                PRESS KIT
              </h2>
              <p className="mt-4 text-sm leading-relaxed text-foreground-muted">
                Logos, screenshots and fact sheets will live here soon. Until
                then, ask and we send the assets directly.
              </p>
              <div className="mt-6">
                <ButtonLink
                  href={`mailto:${pressEmail}?subject=Press%20Kit%20Request`}
                  variant="outline"
                >
                  REQUEST PRESS KIT
                </ButtonLink>
              </div>
            </div>

            <div className="rounded-2xl border border-border bg-surface p-8 transition-colors duration-300 hover:border-accent/40">
              <h2 className="mb-6 font-display text-sm tracking-[0.25em] text-foreground-muted">
                FOLLOW
              </h2>
              <SocialLinks />
            </div>
          </aside>
        </div>
      </Section>
    </>
  );
}