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

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

const channels = [
  {
    label: "GENERAL",
    value: "hello@highlandgamesstudio.com",
    href: "mailto:hello@highlandgamesstudio.com",
  },
  {
    label: "PRESS",
    value: "press@highlandgamesstudio.com",
    href: "mailto:press@highlandgamesstudio.com",
  },
  {
    label: "BUSINESS",
    value: "business@highlandgamesstudio.com",
    href: "mailto:business@highlandgamesstudio.com",
  },
];

export default function ContactPage() {
  return (
    <div className="pt-32 pb-24 px-6 lg:px-10">
      <div className="max-w-4xl mx-auto">
        <p className="font-display text-sm tracking-[0.3em] text-accent mb-4">
          — GET IN TOUCH
        </p>
        <h1 className="font-display text-5xl sm:text-6xl lg:text-7xl tracking-wider leading-[0.95] mb-8">
          SAY HELLO.
        </h1>
        <p className="text-lg text-foreground-muted leading-relaxed max-w-2xl mb-16">
          Press inquiries, business opportunities, fan messages — all are
          welcome. Pick a channel and reach out.
        </p>

        <div className="grid sm:grid-cols-3 gap-6 mb-24">
          {channels.map((c) => (
            <a
              key={c.label}
              href={c.href}
              className="border border-border p-8 hover:border-accent transition-colors group"
            >
              <p className="font-display text-xs tracking-[0.3em] text-accent mb-3">
                {c.label}
              </p>
              <p className="text-xs text-foreground group-hover:text-accent transition-colors">
                {c.value}
              </p>
            </a>
          ))}
        </div>

        <div className="border-t border-border pt-16">
          <p className="font-display text-xs tracking-[0.3em] text-accent mb-3">
            — OR
          </p>
          <h2 className="font-display text-3xl sm:text-4xl tracking-wider mb-4">
            SEND US A MESSAGE
          </h2>
          <p className="text-foreground-muted leading-relaxed max-w-2xl mb-10">
            Prefer not to use email? Drop your message here and we&apos;ll get
            back to you.
          </p>
          <ContactForm />
        </div>

        <div className="mt-24 border-t border-border pt-12">
          <h2 className="font-display text-2xl tracking-wider mb-4">
            PRESS KIT
          </h2>
          <p className="text-foreground-muted leading-relaxed mb-6 max-w-xl">
            Logos, screenshots and fact sheets for our games will be available
            here soon. In the meantime, drop us an email and we&apos;ll send
            assets directly.
          </p>
          <a
            href="mailto:press@highlandgamesstudio.com?subject=Press%20Kit%20Request"
            className="inline-block px-8 py-3 border border-border text-foreground font-display tracking-widest text-sm hover:border-accent hover:text-accent hover:scale-[1.03] transition duration-200"
          >
            REQUEST PRESS KIT →
          </a>
        </div>
      </div>
    </div>
  );
}