import type { Metadata } from "next";
import Link from "next/link";
import Reveal from "@/components/Reveal";
import AppointmentInvite from "@/components/AppointmentInvite";
import { journal } from "@/content/journal";

export const metadata: Metadata = {
  title: "The Genesis Journal",
  description:
    "Gemmology, phenomena, provenance and collecting knowledge from Genesis Global, the intellectual centre of the house.",
};

export default function JournalPage() {
  const [first, ...rest] = journal;

  return (
    <>
      <Reveal />

      <section className="vitrine" style={{ paddingTop: "clamp(150px, 20vh, 230px)", paddingBottom: "clamp(60px, 8vw, 110px)" }}>
        <div className="wrap">
          <p className="eyebrow rv on">The Genesis Journal</p>
          <h1 className="h1 rv on d1" style={{ maxWidth: "16ch" }}>
            Knowledge, shared freely
          </h1>
          <p className="lead rv on d2" style={{ marginTop: 26, maxWidth: "56ch" }}>
            The house writes about what it knows: the science of gemstones,
            the meaning of provenance, the craft of collecting. No marketing;
            education is the credential.
          </p>
        </div>
      </section>

      <section className="section room-paper" aria-label="Articles">
        <div className="wrap">
          {/* Lead essay */}
          <Link href={`/journal/${first.slug}`} className="rv" style={{ display: "block", borderTop: "2px solid var(--brand-blue)", paddingTop: 34 }}>
            <span className="caption" style={{ textTransform: "uppercase", letterSpacing: "0.22em" }}>
              {first.category} · {first.minutes} minute read
            </span>
            <span className="h2 serif" style={{ display: "block", marginTop: 16, maxWidth: "22ch", color: "var(--charcoal)" }}>
              {first.title}
            </span>
            <span className="lead" style={{ display: "block", marginTop: 16, maxWidth: "62ch" }}>{first.deck}</span>
            <span className="btn" style={{ marginTop: 20 }}>
              Read the essay <span className="arr">→</span>
            </span>
          </Link>

          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
              gap: "clamp(32px, 4vw, 64px)",
              marginTop: "clamp(56px, 7vw, 96px)",
            }}
          >
            {rest.map((a, i) => (
              <Link
                key={a.slug}
                href={`/journal/${a.slug}`}
                className={`rv d${(i % 3) + 1}`}
                style={{ borderTop: "1px solid var(--hairline-dark)", paddingTop: 26 }}
              >
                <span className="caption" style={{ textTransform: "uppercase", letterSpacing: "0.2em" }}>
                  {a.category} · {a.minutes} min
                </span>
                <span className="h3 serif" style={{ display: "block", marginTop: 14, color: "var(--charcoal)" }}>{a.title}</span>
                <span className="caption" style={{ display: "block", marginTop: 12, fontSize: 13.5, lineHeight: 1.7 }}>
                  {a.deck}
                </span>
              </Link>
            ))}
          </div>
        </div>
      </section>

      <AppointmentInvite heading="Continue the conversation in person" />
    </>
  );
}