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

export const metadata = {
  title: "About Broadcast Beat",
  description: "Broadcast Beat is an independent industry publication covering broadcast, production, and post-production technology.",
};

export default function AboutPage() {
  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">About</h1>
              <p className="mt-3 text-[#9ca3af] text-base max-w-2xl">
                An independent trade publication covering broadcast, live production, streaming, and post-production technology.
              </p>
            </header>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-10">
              <Stat label="Years covering the industry" value="20+" />
              <Stat label="Shows tracked annually" value="14+" />
              <Stat label="Stories archived" value="29k+" />
            </div>

            <section className="space-y-6 text-[#d1d5db] text-[15px] leading-relaxed">
              <Block title="What we cover">
                Broadcast Beat reports on the equipment, services, and people
                that move the professional video industry forward. We follow
                product launches, executive moves, acquisitions, and the live
                production / IP / cloud workflows reshaping how content gets
                made and delivered.
              </Block>

              <Block title="Where we go">
                We cover the major industry shows in person and remotely — NAB
                Show, IBC, BroadcastAsia, MPTS, InfoComm, and more — track
                product launches and acquisitions year-round, and publish
                interviews with the engineers, post supervisors, and executives
                building the next generation of workflows.
              </Block>

              <Block title="How we work">
                Editorial decisions are made independently of advertising. We
                do not accept payment for editorial coverage. Vendor-supplied
                press releases routed through our distribution platform are
                rewritten by our staff or AI assistants according to our
                editorial style guide; the original submission is preserved on
                file. Our AI personas are clearly labeled wherever they appear.
              </Block>

              <Block title="Get involved">
                For editorial pitches: <a className="text-[var(--color-text-info,#60a5fa)] hover:underline" href="mailto:editor@broadcastbeat.com">editor@broadcastbeat.com</a>.
                {" "}For advertising: <a className="text-[var(--color-text-info,#60a5fa)] hover:underline" href="/about/advertise">see the media kit</a>.
                {" "}For our team: <a className="text-[var(--color-text-info,#60a5fa)] hover:underline" href="/about/team">meet the editorial team</a>.
              </Block>
            </section>
          </main>

          {/* Sidebar: 300x600 + rotating 300x250s */}
          <aside className="mt-10 lg:mt-0" aria-label="Advertisements">
            <div className="lg:sticky lg:top-24">
              <SidebarAdStack />
            </div>
          </aside>
        </div>
      </div>
      <Footer />
    </div>
  );
}

function Stat({ label, value }: { label: string; value: string }) {
  return (
    <div className="rounded border border-[#252525] bg-[#0b0f17] p-4">
      <div className="font-serif text-3xl text-white">{value}</div>
      <div className="mt-1 text-[10px] font-mono uppercase tracking-[0.16em] text-[#6b7280]">
        {label}
      </div>
    </div>
  );
}

function Block({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div className="rounded border border-[#1e1e1e] bg-[#0b0f17]/70 p-5">
      <h2 className="font-mono text-xs uppercase tracking-[0.18em] text-[var(--color-text-info,#60a5fa)] mb-2">
        {title}
      </h2>
      <p className="text-[15px] leading-relaxed">{children}</p>
    </div>
  );
}
