import React from "react";
import type { Metadata } from "next";
import Link from "next/link";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import AppImage from "@/components/ui/AppImage";
import AdImage from "@/components/AdImage";
import { pickAds } from "@/lib/ads";
import { getLegacyArticlesBySection } from "@/lib/articles/legacy-source";
import SidebarAdStack from "@/components/SidebarAdStack";

export const revalidate = 1800;

export const metadata: Metadata = {
  title: "Production Gear & Reviews — AV Beat",
  description: "In-depth reviews and coverage of pro AV gear, displays, audio systems, control hardware, and live production equipment.",
  alternates: { canonical: "/gear" },
  openGraph: {
    title: "Production Gear & Reviews — AV Beat",
    description: "In-depth reviews and coverage of pro AV gear, displays, audio systems, control hardware, and live production equipment.",
    url: "/gear",
    type: "website",
  },
};

export default async function GearPage() {
  const articles = await getLegacyArticlesBySection("gear");

  return (
    <div className="min-h-screen bg-background">
      <Header />
      {/* DO NOT OVERRIDE — Gear page hero header */}
      <div className="bg-[#111] border-b border-[#222] py-8">
        <div className="max-w-container mx-auto px-4">
          <div className="flex items-center gap-3 mb-2">
            <span className="section-label">Gear &amp; Reviews</span>
            <div className="flex-1 h-px bg-[#DCE6F2]" />
          </div>
          <h1 className="font-heading text-white text-3xl font-bold">Production Gear &amp; Reviews</h1>
          <p className="text-[#777] font-body text-sm mt-2">In-depth reviews and coverage of cameras, audio, infrastructure, and production technology</p>
        </div>
      </div>

      <main className="max-w-container mx-auto px-4 py-8">
      <aside className="float-right ml-6 mb-6 hidden lg:block max-w-[300px]"><SidebarAdStack /></aside>
        {/* Featured gear grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-10">
          {articles.map((article) => (
            <Link
              key={article.slug}
              href={`/articles/${article.slug}`}
              className="bg-[#111] border border-[#222] overflow-hidden group hover:border-[#1D4ED8] transition-colors">
              <div className="relative h-[200px] overflow-hidden">
                <AppImage
                  src={article.image}
                  alt={article.alt}
                  fill
                  className="object-cover group-hover:scale-105 transition-transform duration-300"
                  sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
                />
                <div className="absolute top-2 left-2">
                  <span className="bg-[#1D4ED8] text-white font-body text-[9px] font-bold px-2 py-0.5 tracking-wider uppercase">
                    {article.category}
                  </span>
                </div>
              </div>
              <div className="p-4">
                <div className="flex items-center gap-2 mb-2">
                  {article.category !== "Featured" && (
                    <>
                      <span className="text-[#555] font-body text-[11px]">{article.date}</span>
                      <span className="text-[#444] text-[10px]">·</span>
                    </>
                  )}
                  <span className="text-[#555] font-body text-[11px]">{article.readTime}</span>
                </div>
                <h2 className="font-heading text-[#e0e0e0] text-sm font-bold leading-snug mb-2 group-hover:text-[#1D4ED8] transition-colors line-clamp-3">
                  {article.title}
                </h2>
                <p className="text-[#666] font-body text-xs leading-relaxed line-clamp-2">{article.excerpt}</p>
                <div className="mt-3 flex flex-wrap gap-1">
                  {article.tags.slice(0, 3).map((tag) => (
                    <span key={tag} className="px-1.5 py-0.5 bg-[#FFFFFF] border border-[#DCE6F2] text-[#666] text-[10px] font-body rounded-sm">
                      {tag}
                    </span>
                  ))}
                </div>
              </div>
            </Link>
          ))}
        </div>

        {/* In-content 728x90 banner */}
        {pickAds("728x90", 1).length > 0 && (
          <div className="mt-12 hidden md:flex justify-center" aria-label="Advertisement">
            <AdImage ad={pickAds("728x90", 1)[0]} page="gear" />
          </div>
        )}
      </main>
      <Footer />
    </div>
  );
}
