import Link from "next/link";
import KineticTitle from "@/components/KineticTitle";
import Reveal from "@/components/Reveal";
import { ARTICLES } from "@/lib/articles";

function MetaRow({ category, date, readTime }: { category: string; date: string; readTime: string }) {
  return (
    <div className="flex flex-wrap items-center gap-3 font-mono text-[0.6rem] uppercase tracking-[0.24em] text-warmgrey">
      <span className="text-gold">{category}</span>
      <span aria-hidden>·</span>
      <time dateTime={date}>
        {new Date(date).toLocaleDateString("en-ZA", { year: "numeric", month: "short", day: "numeric" })}
      </time>
      <span aria-hidden>·</span>
      <span>{readTime}</span>
    </div>
  );
}

/** 05 — The Journal: Monocle-style magazine grid, featured essay + latest four. */
export default function JournalSection() {
  const [featured, ...rest] = ARTICLES;
  const latest = rest.slice(0, 4);

  return (
    <section id="journal" className="relative bg-charcoal py-28 md:py-40">
      <div className="mx-auto max-w-[1440px] px-6 md:px-10">
        <div className="flex flex-wrap items-end justify-between gap-6">
          <div>
            <Reveal>
              <p className="kicker mb-6">04 — The Journal</p>
            </Reveal>
            <KineticTitle
              as="h2"
              text="Essays from the digital frontier."
              className="font-display max-w-3xl text-4xl font-black leading-[1.06] tracking-[-0.02em] text-ivory md:text-6xl"
            />
          </div>
          <Reveal>
            <Link
              href="/journal"
              className="btn-underline mb-2 font-mono text-[0.66rem] uppercase tracking-[0.26em] text-gold"
            >
              All essays →
            </Link>
          </Reveal>
        </div>

        {/* Featured */}
        <Reveal className="mt-16">
          <Link href={`/journal/${featured.slug}`} className="group grid gap-8 md:grid-cols-12">
            <div className="overflow-hidden md:col-span-7">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={featured.cover}
                alt={featured.coverAlt}
                loading="lazy"
                decoding="async"
                className="aspect-[16/10] w-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.04]"
              />
            </div>
            <div className="flex flex-col justify-center md:col-span-5">
              <MetaRow category={featured.category} date={featured.date} readTime={featured.readTime} />
              <h3 className="font-display mt-5 text-3xl font-black leading-[1.12] tracking-tight text-ivory transition-colors group-hover:text-gold md:text-4xl">
                {featured.title}
              </h3>
              <p className="mt-5 max-w-md leading-relaxed text-ivory/65">{featured.dek}</p>
              <span className="btn-underline mt-7 inline-block self-start font-mono text-[0.62rem] uppercase tracking-[0.26em] text-gold">
                Read the essay →
              </span>
            </div>
          </Link>
        </Reveal>

        {/* Grid */}
        <div className="mt-16 grid gap-x-8 gap-y-14 border-t border-ivory/10 pt-14 sm:grid-cols-2 xl:grid-cols-4">
          {latest.map((a, i) => (
            <Reveal key={a.slug} delay={i * 0.06}>
              <Link href={`/journal/${a.slug}`} className="group block">
                <div className="overflow-hidden">
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img
                    src={a.cover}
                    alt={a.coverAlt}
                    loading="lazy"
                    decoding="async"
                    className="aspect-[4/3] w-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.05]"
                  />
                </div>
                <div className="mt-5">
                  <MetaRow category={a.category} date={a.date} readTime={a.readTime} />
                </div>
                <h3 className="font-display mt-3 text-xl font-black leading-snug tracking-tight text-ivory transition-colors group-hover:text-gold">
                  {a.title}
                </h3>
              </Link>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}