import Header from "@/components/Header";
import Footer from "@/components/Footer";
import AdImage from "@/components/AdImage";
import SidebarAdStack from "@/components/SidebarAdStack";
import { ADS_728X90, ADS_300X250, FIXED_300X600, shuffle } from "@/lib/ads";

export const metadata = { title: "Advertise — Broadcast Beat" };

export default function AdvertisePage() {
  const example728 = ADS_728X90[0];
  const example300x250 = ADS_300X250[0];
  const example300x600 = FIXED_300X600;

  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-[#252525] pb-6">
              <div className="text-[10px] font-mono uppercase tracking-[0.22em] text-[var(--color-text-info,#60a5fa)] mb-2">
                Broadcast Beat
              </div>
              <h1 className="font-serif text-4xl md:text-5xl font-bold tracking-tight">Advertise</h1>
              <p className="mt-3 text-[#9ca3af] text-base max-w-2xl">
                Broadcast Beat reaches broadcast engineers, post supervisors,
                streaming architects, and live-event professionals across the
                industry — daily.
              </p>
            </header>

            <section className="mb-12">
              <h2 className="font-mono text-xs uppercase tracking-[0.18em] text-[var(--color-text-info,#60a5fa)] mb-5">
                Available units
              </h2>

              <div className="grid grid-cols-1 gap-5">
                {/* 728x90 */}
                <div className="rounded border border-[#252525] bg-[#0b0f17] p-5 flex flex-col md:flex-row md:items-center gap-5">
                  <div className="md:flex-1 min-w-0">
                    <h3 className="font-serif text-xl font-semibold">728 × 90 leaderboard</h3>
                    <div className="mt-1 text-[10px] font-mono uppercase tracking-wider text-[#6b7280]">Site-wide · top of every page</div>
                    <p className="mt-3 text-sm text-[#d1d5db]">
                      Sits between the main nav and the headline ticker on
                      every page. The premium first-impression unit.
                    </p>
                  </div>
                  <div className="flex-shrink-0 flex items-center justify-center rounded border border-[#1e1e1e] bg-[#0a0a0a] p-3" style={{ minWidth: 250 }}>
                    {example728 ? <AdImage ad={example728} page="advertise-example" /> : <div className="w-[728px] max-w-full h-[90px] flex items-center justify-center text-xs text-[#555]">728 × 90</div>}
                  </div>
                </div>

                {/* 300x600 */}
                <div className="rounded border border-[#252525] bg-[#0b0f17] p-5 flex flex-col md:flex-row md:items-center gap-5">
                  <div className="md:flex-1 min-w-0">
                    <h3 className="font-serif text-xl font-semibold">300 × 600 sidebar premium</h3>
                    <div className="mt-1 text-[10px] font-mono uppercase tracking-wider text-[#6b7280]">Pinned · every sidebar · sitewide</div>
                    <p className="mt-3 text-sm text-[#d1d5db]">
                      Pinned at the top of every sidebar, sitewide. Stays
                      visible while readers scroll the article body.
                    </p>
                  </div>
                  <div className="flex-shrink-0 flex items-center justify-center rounded border border-[#1e1e1e] bg-[#0a0a0a] p-3">
                    {example300x600 ? <AdImage ad={example300x600} page="advertise-example" /> : <div className="w-[300px] h-[600px] flex items-center justify-center text-xs text-[#555]">300 × 600</div>}
                  </div>
                </div>

                {/* 300x250 */}
                <div className="rounded border border-[#252525] bg-[#0b0f17] p-5 flex flex-col md:flex-row md:items-center gap-5">
                  <div className="md:flex-1 min-w-0">
                    <h3 className="font-serif text-xl font-semibold">300 × 250 sidebar rotation</h3>
                    <div className="mt-1 text-[10px] font-mono uppercase tracking-wider text-[#6b7280]">Rotating · multiple slots · every page</div>
                    <p className="mt-3 text-sm text-[#d1d5db]">
                      Rotates across every page, multiple slots per page.
                      Highest-volume inventory — best for awareness campaigns
                      and seasonal pushes (NAB, IBC, BroadcastAsia).
                    </p>
                  </div>
                  <div className="flex-shrink-0 flex items-center justify-center rounded border border-[#1e1e1e] bg-[#0a0a0a] p-3">
                    {example300x250 ? <AdImage ad={example300x250} page="advertise-example" /> : <div className="w-[300px] h-[250px] flex items-center justify-center text-xs text-[#555]">300 × 250</div>}
                  </div>
                </div>
              </div>
            </section>

            <section className="mb-10">
              <h2 className="font-mono text-xs uppercase tracking-[0.18em] text-[var(--color-text-info,#60a5fa)] mb-3">Reporting</h2>
              <p className="text-[15px] text-[#d1d5db] leading-relaxed">
                Every banner is tracked for gross impressions and clicks.
                Advertisers receive a monthly report with totals and CTR. Click
                links route through <code className="text-[#60a5fa]">/r/{`{campaign}`}</code> for accurate counting independent of
                analytics blockers.
              </p>
            </section>

            <section>
              <h2 className="font-mono text-xs uppercase tracking-[0.18em] text-[var(--color-text-info,#60a5fa)] mb-3">Get in touch</h2>
              <p className="text-[15px]">
                <a className="text-[var(--color-text-info,#60a5fa)] hover:underline" href="mailto:advertising@broadcastbeat.com">advertising@broadcastbeat.com</a>
              </p>
            </section>
          </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>
  );
}
