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 { getArticlesBySection } from "@/lib/articles/sampleArticles";

export const metadata: Metadata = {
  title: "Broadcast Technology Deep Dives — BroadcastBeat",
  description:
    "Deep-dive analysis of broadcast technology trends: IP workflows, cloud production, AI automation, streaming infrastructure, and ATSC 3.0.",
  alternates: { canonical: "/technology" },
  openGraph: {
    title: "Broadcast Technology Deep Dives — BroadcastBeat",
    description:
      "Deep-dive analysis of broadcast technology trends: IP workflows, cloud production, AI automation, streaming infrastructure, and ATSC 3.0.",
    url: "/technology",
    type: "website",
  },
};

export default function TechnologyPage() {
  const articles = getArticlesBySection("technology");

  return (
    <div className="min-h-screen bg-background">
      <Header />
      {/* DO NOT OVERRIDE — Technology 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">Technology</span>
            <div className="flex-1 h-px bg-[#2a2a2a]" />
          </div>
          <h1 className="font-heading text-white text-3xl font-bold">Broadcast Technology</h1>
          <p className="text-[#777] font-body text-sm mt-2">Deep-dive coverage of IP infrastructure, AI, cloud production, and the standards shaping broadcast&apos;s future</p>
        </div>
      </div>

      <main className="max-w-container mx-auto px-4 py-8">
        {/* Featured technology article */}
        {articles[0] && (
          <div className="mb-10">
            <Link
              href={`/articles/${articles[0].slug}`}
              className="flex flex-col md:flex-row gap-6 bg-[#111] border border-[#222] overflow-hidden group hover:border-[#3b82f6] transition-colors p-5">
              <div className="flex-shrink-0 relative w-full md:w-[320px] h-[200px] md:h-[200px] overflow-hidden rounded-sm">
                <AppImage
                  src={articles[0].image}
                  alt={articles[0].alt}
                  fill
                  className="object-cover group-hover:scale-105 transition-transform duration-300"
                  sizes="(max-width: 768px) 100vw, 320px"
                />
              </div>
              <div className="flex-1">
                <div className="flex items-center gap-2 mb-2">
                  <span className="text-[#3b82f6] font-body text-[10px] font-bold uppercase tracking-wider">{articles[0].category}</span>
                  <span className="text-[#444] text-[10px]">·</span>
                  <span className="text-[#555] font-body text-[11px]">{articles[0].date}</span>
                  <span className="text-[#444] text-[10px]">·</span>
                  <span className="text-[#555] font-body text-[11px]">{articles[0].readTime}</span>
                </div>
                <h2 className="font-heading text-[#e0e0e0] text-xl font-bold leading-tight mb-3 group-hover:text-[#3b82f6] transition-colors">
                  {articles[0].title}
                </h2>
                <p className="text-[#777] font-body text-sm leading-relaxed mb-4">{articles[0].excerpt}</p>
                <div className="flex flex-wrap gap-1.5">
                  {articles[0].tags.map((tag) => (
                    <span key={tag} className="px-2 py-0.5 bg-[#1a1a1a] border border-[#2a2a2a] text-[#666] text-[10px] font-body rounded-sm">
                      {tag}
                    </span>
                  ))}
                </div>
              </div>
            </Link>
          </div>
        )}

        {/* Technology article grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {articles.slice(1).map((article) => (
            <Link
              key={article.slug}
              href={`/articles/${article.slug}`}
              className="flex gap-4 bg-[#111] border border-[#222] p-4 group hover:border-[#3b82f6] transition-colors">
              <div className="flex-shrink-0 w-[120px] h-[80px] relative overflow-hidden rounded-sm">
                <AppImage
                  src={article.image}
                  alt={article.alt}
                  fill
                  className="object-cover group-hover:scale-105 transition-transform duration-300"
                  sizes="120px"
                />
              </div>
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2 mb-1">
                  <span className="text-[#3b82f6] font-body text-[9px] font-bold uppercase tracking-wider">{article.category}</span>
                  <span className="text-[#444] text-[9px]">·</span>
                  <span className="text-[#555] font-body text-[10px]">{article.readTime}</span>
                </div>
                <h2 className="font-heading text-[#e0e0e0] text-sm font-bold leading-snug mb-1 group-hover:text-[#3b82f6] transition-colors line-clamp-2">
                  {article.title}
                </h2>
                <span className="text-[#555] font-body text-[11px]">{article.date}</span>
              </div>
            </Link>
          ))}
        </div>
      </main>
      <Footer />
    </div>
  );
}