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

export const metadata = {
  title: "About AV Beat",
  description: "AV Beat is an independent industry publication covering pro AV, live production, and display tech.",
};

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-[#1e293b]">
        <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-display text-4xl md:text-5xl font-bold tracking-tight">About</h1>
              <p className="mt-3 text-[#475569] text-base max-w-2xl">
                An independent trade publication covering pro AV, live production, display tech, and signal-flow 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-[#1e293b] text-[15px] leading-relaxed">
              <Block title="What we cover">
                AV 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 — InfoComm, ISE, NAB Show, IBC, 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 editorial team to our house style guide;
                the original submission is preserved on file for provenance.
              </Block>

              <Block title="Get involved">
                For editorial pitches: <a className="text-[var(--color-text-info,#60a5fa)] hover:underline" href="mailto:editor@avbeat.com">editor@avbeat.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 }) {
  // Brand-gradient top accent (animated sheen) gives the stat tile its
  // on-brand identity without redoing the layout. The tile itself stays
  // white-on-light-border for legibility.
  return (
    <div className="relative overflow-hidden rounded border border-[#DCE6F2] bg-[#FFFFFF] p-4">
      <span className="brand-gradient absolute top-0 left-0 right-0 h-1" aria-hidden />
      <div className="font-display text-3xl font-bold text-[#0F172A]">{value}</div>
      <div className="mt-1 text-[10px] font-mono uppercase tracking-[0.16em] text-[#475569]">
        {label}
      </div>
    </div>
  );
}

function Block({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div className="rounded border border-[#DCE6F2] bg-[#FFFFFF] 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>
  );
}