import type { Metadata } from "next";
import Link from "next/link";
import { Section, Eyebrow } from "@/components/ui";
import { Icon } from "@/components/icons";
import { CtaBand } from "@/components/cta-band";
import { posts } from "@/content/posts";

export const metadata: Metadata = {
  title: "Blog",
  description:
    "Notes on recruitment, background checks, immigration and careers in Kenya from the team at Phina Consultants Limited.",
};

const dateFmt = new Intl.DateTimeFormat("en-GB", {
  day: "numeric",
  month: "short",
  year: "numeric",
});

export default function BlogPage() {
  const [featured, ...rest] = posts;

  return (
    <>
      <section className="bg-cream">
        <div className="container-page py-16 lg:py-20">
          <Eyebrow>Blog</Eyebrow>
          <h1 className="mt-5 font-display text-4xl font-bold tracking-tight text-ink-900 sm:text-5xl">
            Insight from the Phina Consultants team
          </h1>
          <p className="mt-5 max-w-2xl text-lg leading-relaxed text-ink-500">
            Practical notes on hiring, screening, mobility and careers in Kenya.
          </p>
        </div>
      </section>

      <Section tone="white">
        {featured && (
          <Link
            href={`/blog/${featured.slug}`}
            className="group grid gap-6 rounded-3xl border border-ink-100 bg-cream p-6 shadow-card transition-colors hover:border-brand-300 sm:p-8 lg:grid-cols-[1fr_1.4fr] lg:items-center"
          >
            <div className="aspect-[4/3] rounded-2xl bg-gradient-to-br from-brand-600 to-brand-800" />
            <div>
              <div className="flex items-center gap-3 text-xs font-medium text-ink-500">
                <span className="rounded-full bg-brand-50 px-2.5 py-1 text-brand-700">
                  {featured.category}
                </span>
                <span>{dateFmt.format(new Date(featured.dateISO))}</span>
                <span>{featured.readMinutes} min read</span>
              </div>
              <h2 className="mt-3 font-display text-2xl font-bold text-ink-900 group-hover:text-brand-700">
                {featured.title}
              </h2>
              <p className="mt-2 text-ink-600">{featured.excerpt}</p>
              <span className="mt-4 inline-flex items-center gap-1.5 text-sm font-semibold text-brand-700">
                Read article <Icon name="arrow-right" className="h-4 w-4" />
              </span>
            </div>
          </Link>
        )}

        <div className="mt-8 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {rest.map((post) => (
            <Link
              key={post.slug}
              href={`/blog/${post.slug}`}
              className="group flex flex-col rounded-2xl border border-ink-100 bg-white p-6 shadow-card transition-colors hover:border-brand-300"
            >
              <div className="mb-4 aspect-[16/10] rounded-xl bg-gradient-to-br from-brand-100 to-brand-300" />
              <div className="flex items-center gap-2 text-xs font-medium text-ink-500">
                <span className="rounded-full bg-brand-50 px-2.5 py-1 text-brand-700">
                  {post.category}
                </span>
                <span>{post.readMinutes} min</span>
              </div>
              <h3 className="mt-3 flex-1 font-display text-lg font-bold text-ink-900 group-hover:text-brand-700">
                {post.title}
              </h3>
              <p className="mt-2 text-sm text-ink-600">{post.excerpt}</p>
              <span className="mt-4 text-xs text-ink-400">
                {dateFmt.format(new Date(post.dateISO))}
              </span>
            </Link>
          ))}
        </div>
      </Section>

      <CtaBand />
    </>
  );
}