import Header from "@/components/Header";
import Footer from "@/components/Footer";
import SidebarAdStack from "@/components/SidebarAdStack";

export const metadata = { title: "Contact — AV Beat" };

const CONTACTS = [
  {
    title: "Editorial",
    body: (
      <a className="text-[var(--color-text-info,#60a5fa)] hover:underline" href="mailto:editor@avbeat.com">editor@avbeat.com</a>
    ),
    hint: "Story tips, corrections, interview requests.",
  },
  {
    title: "Press releases",
    body: (
      <>
        Route PR-firm submissions through{" "}
        <a className="text-[var(--color-text-info,#60a5fa)] hover:underline" href="https://distribution.relevantmediaproperties.com">distribution.relevantmediaproperties.com</a>.
      </>
    ),
    hint: "Routed submissions land in our editorial queue with provenance.",
  },
  {
    title: "Advertising",
    body: (
      <>
        <a className="text-[var(--color-text-info,#60a5fa)] hover:underline" href="mailto:advertising@relevantmediaproperties.com">advertising@relevantmediaproperties.com</a> — see the{" "}
        <a className="text-[var(--color-text-info,#60a5fa)] hover:underline" href="https://relevantmediaproperties.com/av-beat---media-kit">media kit</a>.
      </>
    ),
    hint: "728×90, 300×600, 300×250 inventory; CTR + impression reports monthly.",
  },
  {
    title: "Publisher",
    body: (
      <>
        Ryan Salazar ·{" "}
        <a className="text-[var(--color-text-info,#60a5fa)] hover:underline" href="mailto:ryan.salazar@relevantmediaproperties.com">ryan.salazar@relevantmediaproperties.com</a>
      </>
    ),
    hint: "Partnerships, M&A, syndication, network membership.",
  },
];

export default function ContactPage() {
  return (
    <div className="min-h-screen bg-background">
      <Header />
      <div className="max-w-container mx-auto px-4 py-12 text-[#e5e7eb]">
        <div className="lg:grid lg:grid-cols-[1fr,300px] lg:gap-10">
          <main>
            <header className="mb-8 border-b border-[#DCE6F2] pb-6">
              <div className="text-[10px] font-mono uppercase tracking-[0.22em] text-[var(--color-text-info,#60a5fa)] mb-2">
                AV Beat
              </div>
              <h1 className="font-serif text-4xl md:text-5xl font-bold tracking-tight">Contact</h1>
              <p className="mt-3 text-[#9ca3af] text-base">
                Pitches, press, partnerships — pick the right desk and we'll get back fast.
              </p>
            </header>

            <ul className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {CONTACTS.map((c) => (
                <li key={c.title} className="rounded border border-[#DCE6F2] bg-[#0b0f17] p-5 hover:border-[var(--color-text-info,#60a5fa)]/60 transition-colors">
                  <div className="text-[10px] font-mono uppercase tracking-[0.18em] text-[var(--color-text-info,#60a5fa)] mb-2">
                    {c.title}
                  </div>
                  <div className="text-[15px] leading-relaxed">{c.body}</div>
                  <div className="mt-3 text-xs text-[#6b7280]">{c.hint}</div>
                </li>
              ))}
            </ul>
          </main>

          <aside className="mt-10 lg:mt-0" aria-label="Advertisements">
            <div className="lg:sticky lg:top-24">
              <SidebarAdStack />
            </div>
          </aside>
        </div>
      </div>
      <Footer />
    </div>
  );
}