import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { ArrowRight } from "lucide-react";
import { news } from "@/lib/cwf-data";
import { PageHero } from "@/components/PageHero";

export const Route = createFileRoute("/news")({
  head: () => ({
    meta: [
      { title: "News — Latest CWF Announcements & Results" },
      { name: "description", content: "Match results, event announcements, signings, and all the latest from Central Wrestling Federation." },
      { property: "og:title", content: "CWF News" },
      { property: "og:description", content: "Stay current with every CWF announcement and match result." },
    ],
  }),
  component: NewsPage,
});

const categories = ["All", "Event", "Results", "Signing"] as const;

function NewsPage() {
  const [cat, setCat] = useState<(typeof categories)[number]>("All");
  const filtered = cat === "All" ? news : news.filter((n) => n.category === cat);
  const featured = filtered[0];
  const rest = filtered.slice(1);

  return (
    <>
      <PageHero kicker="The Latest" title="NEWS" subtitle="Announcements, results, signings, and everything else moving the CWF needle." />

      <section className="py-12 bg-charcoal border-b border-border">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 flex flex-wrap gap-2">
          {categories.map((c) => (
            <button
              key={c}
              onClick={() => setCat(c)}
              className={`px-5 py-2 font-display tracking-widest text-sm transition-colors border ${
                cat === c ? "bg-primary text-primary-foreground border-primary" : "border-border hover:border-primary"
              }`}
            >
              {c.toUpperCase()}
            </button>
          ))}
        </div>
      </section>

      <section className="py-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          {featured && (
            <article className="mb-16 bg-card border border-border p-8 lg:p-12 relative">
              <div className="absolute top-0 left-0 w-20 h-1 bg-primary" />
              <span className="inline-block px-3 py-1 bg-primary text-primary-foreground text-xs font-display tracking-widest">FEATURED — {featured.category.toUpperCase()}</span>
              <h2 className="font-display text-4xl lg:text-6xl leading-tight mt-4">{featured.title}</h2>
              <p className="text-muted-foreground mt-4 text-lg max-w-3xl">{featured.excerpt}</p>
              <div className="mt-6 flex items-center justify-between">
                <p className="text-sm text-muted-foreground">{featured.date}</p>
                <a href="#" className="inline-flex items-center gap-2 text-primary font-display tracking-widest">READ STORY <ArrowRight size={16} /></a>
              </div>
            </article>
          )}

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {rest.map((n) => (
              <article key={n.slug} className="group bg-card border border-border p-6 hover:border-primary transition-colors">
                <div className="flex items-center justify-between mb-3">
                  <span className="px-2 py-0.5 bg-primary text-primary-foreground text-xs font-display tracking-widest">{n.category.toUpperCase()}</span>
                  <span className="text-xs text-muted-foreground">{n.date}</span>
                </div>
                <h3 className="font-display text-2xl leading-tight mb-2 group-hover:text-primary transition-colors">{n.title}</h3>
                <p className="text-sm text-muted-foreground">{n.excerpt}</p>
              </article>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}