import Image from "next/image";
import Link from "next/link";
import { formatDistanceToNow } from "date-fns";
import { Post, getFeaturedImage, postUrl } from "@/lib/wordpress";
import CategoryBadge from "./CategoryBadge";

export default function HeroSection({ posts }: { posts: Post[] }) {
  const [hero, ...secondary] = posts.slice(0, 4);
  if (!hero) return null;

  const heroImage    = getFeaturedImage(hero);
  const heroCategory = hero.category?.name ?? "News";
  const heroTitle    = hero.title;
  const heroExcerpt  = (hero.excerpt ?? "").slice(0, 200);
  const heroTime     = hero.published_at
    ? formatDistanceToNow(new Date(hero.published_at), { addSuffix: true })
    : "";

  return (
    <section className="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-10">

      {/* ── Main hero ──────────────────────────────────────── */}
      <Link href={postUrl(hero)} className="group relative lg:col-span-2 rounded-2xl overflow-hidden min-h-[420px] flex items-end bg-navy-900">
        <Image src={heroImage} alt={heroTitle} fill className="object-cover group-hover:scale-105 transition-transform duration-700" />
        <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent" />
        <div className="relative z-10 p-6 lg:p-8">
          <CategoryBadge category={heroCategory} size="md" />
          <h1 className="text-white text-2xl lg:text-4xl font-display font-bold mt-3 leading-tight group-hover:text-brand-500 transition-colors">
            {heroTitle}
          </h1>
          <p className="text-gray-300 text-sm mt-3 line-clamp-2 max-w-xl">{heroExcerpt}</p>
          <p className="text-gray-400 text-xs mt-3">{heroTime}</p>
        </div>
      </Link>

      {/* ── Secondary stack ────────────────────────────────── */}
      <div className="flex flex-col gap-4">
        {secondary.map((post) => {
          const img  = getFeaturedImage(post);
          const cat  = post.category?.name ?? "News";
          const t    = post.title;
          const time = post.published_at
            ? formatDistanceToNow(new Date(post.published_at), { addSuffix: true })
            : "";
          return (
            <Link key={post.id} href={postUrl(post)}
              className="group relative rounded-xl overflow-hidden flex-1 min-h-[120px] flex items-end bg-navy-900">
              <Image src={img} alt={t} fill className="object-cover group-hover:scale-105 transition-transform duration-500" />
              <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent" />
              <div className="relative z-10 p-4">
                <CategoryBadge category={cat} />
                <h3 className="text-white text-sm font-semibold mt-1.5 line-clamp-2 group-hover:text-brand-500 transition-colors leading-snug">
                  {t}
                </h3>
                <p className="text-gray-400 text-xs mt-1">{time}</p>
              </div>
            </Link>
          );
        })}
      </div>
    </section>
  );
}
