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-[#7DD3FC] hover:underline" href="mailto:editor@relevantmediaproperties.com">editor@relevantmediaproperties.com</a>
    ),
    hint: "Story tips, corrections, interview requests.",
  },
  {
    title: "Press releases",
    body: (
      <>
        Route PR-firm submissions through{" "}
        <a className="text-[#7DD3FC] 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-[#7DD3FC] hover:underline" href="mailto:advertising@relevantmediaproperties.com">advertising@relevantmediaproperties.com</a> — see the{" "}
        <a className="text-[#7DD3FC] 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-[#7DD3FC] 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-[#0F172A]">
        <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-[#1D4ED8] mb-2">
                AV Beat
              </div>
              <h1 className="font-display text-4xl md:text-5xl font-bold tracking-tight text-[#0F172A]">Contact</h1>
              <p className="mt-3 text-[#475569] 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) => (
                // Dark contact card with a brand-gradient top accent (animated
                // sheen). Card body text is explicitly light because the parent
                // wrapper is now dark-on-light at the page level.
                <li key={c.title} className="relative overflow-hidden rounded border border-[#1a1f2a] bg-[#0b0f17] p-5 hover:border-[#1D4ED8]/60 transition-colors">
                  <span className="brand-gradient absolute top-0 left-0 right-0 h-1" aria-hidden />
                  <div className="text-[10px] font-mono uppercase tracking-[0.18em] text-[#93C5FD] mb-2">
                    {c.title}
                  </div>
                  <div className="text-[15px] leading-relaxed text-[#e5e7eb]">{c.body}</div>
                  <div className="mt-3 text-xs text-[#94a3b8]">{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>
  );
}
