import type { Metadata } from "next";
import Link from "next/link";
import SiteNav from "@/components/site-nav";
import SiteFooter from "@/components/site-footer";
import { BLOG_POSTS } from "@/lib/blog";
import { ArrowRightIcon } from "@/components/icons";

export const metadata: Metadata = {
  title: "Blog — VibePass Tickets",
  description:
    "Recaps of events VibePass has powered — from the inaugural Vulai night at KICC to the beach hangout in Mombasa.",
};

export default function BlogIndexPage() {
  const [lead, ...rest] = BLOG_POSTS;

  return (
    <div className="flex-1 bg-bg">
      <SiteNav />

      <section className="bg-bg">
        <div className="max-w-6xl mx-auto px-4 pt-16 pb-10">
          <p className="text-xs font-semibold uppercase tracking-[0.3em] text-brand-green-h">
            The VibePass blog
          </p>
          <h1 className="mt-3 text-4xl sm:text-6xl font-black tracking-tight text-white">
            Events we&apos;ve powered
          </h1>
          <p className="mt-5 max-w-2xl text-lg text-muted">
            Real nights, told from our side of the ticket gate — the music, the crowds, and
            what it took to get everyone through the door.
          </p>
        </div>
      </section>

      {/* Lead post */}
      <section className="bg-bg">
        <div className="max-w-6xl mx-auto px-4 pb-6">
          <Link
            href={`/blog/${lead.slug}`}
            className="group grid lg:grid-cols-2 gap-0 overflow-hidden rounded-3xl border border-line bg-panel transition-all duration-200 hover:border-brand-green motion-reduce:hover:translate-y-0"
          >
            <div className="aspect-[16/10] lg:aspect-auto overflow-hidden bg-brand-green-panel">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={lead.cover}
                alt={lead.title}
                className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
              />
            </div>
            <div className="flex flex-col justify-center p-7 sm:p-10">
              <div className="flex items-center gap-3 text-xs font-semibold uppercase tracking-wide">
                <span className="rounded-full bg-brand-green px-2.5 py-1 text-white">Latest</span>
                <span className="text-brand-green-h">{lead.category}</span>
              </div>
              <h2 className="mt-4 text-2xl sm:text-3xl font-black tracking-tight text-white group-hover:text-brand-gold-h transition-colors">
                {lead.title}
              </h2>
              <p className="mt-2 text-sm text-muted">
                <time dateTime={lead.isoDate}>{lead.date}</time> · {lead.venue}, {lead.city}
              </p>
              <p className="mt-4 text-muted leading-relaxed">{lead.excerpt}</p>
              <span className="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-brand-green-h">
                Read the story
                <ArrowRightIcon className="w-4 h-4" />
              </span>
            </div>
          </Link>
        </div>
      </section>

      {/* The rest */}
      <section className="bg-bg">
        <div className="max-w-6xl mx-auto px-4 pb-20">
          <div className="grid sm:grid-cols-2 gap-6">
            {rest.map((p) => (
              <Link
                key={p.slug}
                href={`/blog/${p.slug}`}
                className="group flex flex-col overflow-hidden rounded-2xl border border-line bg-panel transition-all duration-200 hover:-translate-y-0.5 hover:border-brand-green motion-reduce:hover:translate-y-0"
              >
                <div className="aspect-[16/10] overflow-hidden bg-brand-green-panel">
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img
                    src={p.cover}
                    alt={p.title}
                    className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
                  />
                </div>
                <div className="flex flex-1 flex-col p-6">
                  <span className="text-xs font-semibold uppercase tracking-wide text-brand-green-h">
                    {p.category}
                  </span>
                  <h3 className="mt-2 text-lg font-bold text-white group-hover:text-brand-gold-h transition-colors">
                    {p.title}
                  </h3>
                  <p className="mt-1 text-sm text-muted">
                    <time dateTime={p.isoDate}>{p.date}</time> · {p.city}
                  </p>
                  <p className="mt-3 text-sm text-muted leading-relaxed flex-1">{p.excerpt}</p>
                  <span className="mt-4 inline-flex items-center gap-2 text-sm font-semibold text-brand-green-h">
                    Read the story
                    <ArrowRightIcon className="w-4 h-4" />
                  </span>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      <SiteFooter />
    </div>
  );
}