import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowRight, ImageIcon } from "lucide-react";
import { useState } from "react";
import { Reveal } from "@/components/site/Reveal";

export const Route = createFileRoute("/news")({
  head: () => ({
    meta: [
      { title: "News & Media — Vigor Group of Companies" },
      {
        name: "description",
        content:
          "Corporate announcements, project milestones, community initiatives, awards and events from Vigor Group of Companies.",
      },
      { property: "og:title", content: "News & Media — Vigor Group of Companies" },
      { property: "og:description", content: "Announcements, projects, CSR, awards and events." },
      { property: "og:type", content: "website" },
      { property: "og:url", content: "/news" },
    ],
    links: [{ rel: "canonical", href: "/news" }],
  }),
  component: News,
});

const categories = ["All", "Announcements", "Awards"] as const;

const posts = [
  { category: "Announcements", title: "Zanzibar Waterfront continues its next phase of development", excerpt: "Work progresses on the group's flagship seafront destination in Bweleo, Zanzibar." },
  { category: "Announcements", title: "Group strengthens its healthcare division", excerpt: "Continued investment in clinical capacity across Ampola Regency and Tasakhtaa hospitals." },
  { category: "Announcements", title: "Supporting local communities across Zanzibar", excerpt: "Community initiatives focused on health access, employment and local sourcing." },
  { category: "Announcements", title: "Turkys Mifuko expands packaging output for regional customers", excerpt: "Manufacturing capacity grows to meet demand from agriculture and construction." },
  { category: "Announcements", title: "Group leadership meets international partners", excerpt: "Ongoing partnership engagement across East Africa and Asia." },
  { category: "Awards", title: "Recognition for service standards across the group", excerpt: "Our teams continue to be recognised for quality and customer care." },
];

function News() {
  const [activeCategory, setActiveCategory] = useState<(typeof categories)[number]>("All");
  const visiblePosts = activeCategory === "All"
    ? posts
    : posts.filter((post) => post.category === activeCategory);

  return (
    <>
      <section className="container-x pt-16 md:pt-20 pb-12 border-b border-border">
        <p className="eyebrow">News & Media</p>
        <h1 className="mt-6 text-5xl md:text-7xl max-w-4xl leading-[1]">
          News from the Companies <span className="italic text-crimson">Shaping</span> Tanzania
        </h1>
        <p className="mt-8 max-w-2xl text-lg text-ink-soft leading-relaxed">
          Corporate announcements, project milestones and community initiatives.
        </p>
      </section>

      <section className="container-x py-16 md:py-20">
        <div className="flex flex-wrap gap-2 mb-12">
          {categories.map((c) => (
            <button
              key={c}
              type="button"
              onClick={() => setActiveCategory(c)}
              aria-pressed={activeCategory === c}
              className={`px-4 py-2 text-xs font-semibold uppercase tracking-[0.12em] border transition-colors ${
                activeCategory === c
                  ? "bg-navy text-white border-navy"
                  : "border-border text-ink-soft hover:border-crimson hover:text-crimson"
              }`}
            >
              {c}
            </button>
          ))}
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {visiblePosts.map((p, i) => (
            <Reveal key={p.title} delay={i * 60}>
              <article className="group h-full flex flex-col bg-card border border-border hover:border-crimson transition-colors">
                <div className="aspect-[16/10] bg-secondary border-b border-dashed border-border grid place-items-center text-muted-foreground">
                  <div className="flex flex-col items-center gap-2">
                    <ImageIcon size={30} />
                    <span className="text-[0.65rem] uppercase tracking-[0.2em]">Image placeholder</span>
                  </div>
                </div>
                <div className="p-7 flex flex-col flex-1">
                  <p className="text-xs uppercase tracking-[0.16em] text-crimson font-semibold">{p.category}</p>
                  <h2 className="mt-3 text-xl font-semibold leading-snug">{p.title}</h2>
                  <p className="mt-3 text-sm text-muted-foreground leading-relaxed flex-1">{p.excerpt}</p>
                  <span className="mt-6 inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.1em] text-navy group-hover:text-crimson transition-colors">
                    Read more <ArrowRight size={14} />
                  </span>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </section>

      <section className="bg-secondary/60 border-t border-border">
        <div className="container-x py-16 flex flex-col md:flex-row md:items-center md:justify-between gap-8">
          <h2 className="text-3xl md:text-4xl max-w-xl">Media enquiries and interview requests</h2>
          <Link to="/contact" className="btn-accent self-start">
            Contact the group <ArrowRight size={16} />
          </Link>
        </div>
      </section>
    </>
  );
}
