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

export const metadata: Metadata = {
  title: "The Journal — AI, POPIA, Cybersecurity & African ICT",
  description:
    "Essays by Damian Michael, CEO of Innovo Networks: practical thinking on AI for SMEs, POPIA compliance, cybersecurity and Africa's digital infrastructure decade.",
  alternates: { canonical: "/journal" },
};

export default function JournalIndex() {
  return (
    <div className="bg-obsidian pb-28 pt-32 md:pt-44">
      <div className="mx-auto max-w-[1440px] px-6 md:px-10">
        <Reveal>
          <p className="kicker mb-6">The Journal</p>
        </Reveal>
        <KineticTitle
          as="h1"
          text="Field notes from Africa's digital build-out."
          className="font-display max-w-4xl text-4xl font-black leading-[1.05] tracking-[-0.02em] text-ivory md:text-7xl"
        />
        <Reveal delay={0.1}>
          <p className="mt-8 max-w-xl text-ivory/70">
            No-fluff essays on AI for SMEs, POPIA &amp; compliance, cybersecurity,
            leadership and Africa rising — written from the operator&apos;s chair,
            not the sidelines.
          </p>
        </Reveal>

        <div className="mt-20 divide-y divide-ivory/10 border-y border-ivory/10">
          {ARTICLES.map((a, i) => (
            <Reveal key={a.slug} delay={i * 0.05}>
              <Link
                href={`/journal/${a.slug}`}
                className="group grid gap-6 py-10 md:grid-cols-12 md:items-center"
              >
                <div className="overflow-hidden md:col-span-3">
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img
                    src={a.cover}
                    alt={a.coverAlt}
                    loading="lazy"
                    decoding="async"
                    className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-[1.05]"
                  />
                </div>
                <div className="md:col-span-7">
                  <div className="flex flex-wrap items-center gap-3 font-mono text-[0.6rem] uppercase tracking-[0.24em] text-warmgrey">
                    <span className="text-gold">{a.category}</span>
                    <span aria-hidden>·</span>
                    <time dateTime={a.date}>
                      {new Date(a.date).toLocaleDateString("en-ZA", {
                        year: "numeric",
                        month: "long",
                        day: "numeric",
                      })}
                    </time>
                    <span aria-hidden>·</span>
                    <span>{a.readTime}</span>
                  </div>
                  <h2 className="font-display mt-3 text-2xl font-black leading-snug tracking-tight text-ivory transition-colors group-hover:text-gold md:text-3xl">
                    {a.title}
                  </h2>
                  <p className="mt-3 max-w-2xl text-[0.95rem] leading-relaxed text-ivory/60">
                    {a.dek}
                  </p>
                </div>
                <div className="hidden justify-end md:col-span-2 md:flex">
                  <span className="font-mono text-[0.66rem] uppercase tracking-[0.26em] text-gold opacity-0 transition-opacity duration-500 group-hover:opacity-100">
                    Read →
                  </span>
                </div>
              </Link>
            </Reveal>
          ))}
        </div>
      </div>
    </div>
  );
}