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

export const metadata: Metadata = {
  title: "Extraordinary Gemstones",
  description:
    "The Genesis gemstone universe: sapphire, ruby, emerald, spinel, tsavorite, jadeite, diamond and the rare collector stones, science, provenance and collecting knowledge.",
};

export default function GemstonesPage() {
  return (
    <>
      <Reveal />

      <section className="vitrine" style={{ paddingTop: "clamp(150px, 20vh, 230px)", paddingBottom: "clamp(60px, 8vw, 110px)" }}>
        <div className="wrap">
          <p className="eyebrow rv on">Extraordinary Gemstones</p>
          <h1 className="h1 rv on d1" style={{ maxWidth: "16ch" }}>
            The gemstone universe
          </h1>
          <p className="lead rv on d2" style={{ marginTop: 26, maxWidth: "58ch" }}>
            These are not product categories. Each is a world, a geology, a
            history, a collecting tradition, and each page below is written
            to leave you knowing more than when you arrived.
          </p>
        </div>
      </section>

      <section className="section room-paper" aria-label="Gemstone categories">
        <div className="wrap" style={{ display: "grid", gap: 1, background: "var(--hairline-dark)", border: "1px solid var(--hairline-dark)", padding: 0, maxWidth: "var(--maxw)" }}>
          {gemstones.map((g, i) => (
            <Link
              key={g.slug}
              href={`/gemstones/${g.slug}`}
              className="rv gem-row"
              style={{
                display: "grid",
                gridTemplateColumns: "minmax(72px, 96px) minmax(52px, 70px) minmax(160px, 300px) 1fr auto",
                gap: "clamp(14px, 3vw, 40px)",
                alignItems: "baseline",
                padding: "clamp(24px, 3vw, 40px) clamp(18px, 3vw, 44px)",
                background: "linear-gradient(105deg, #EAF1FA 0%, var(--white) 55%)",
              }}
            >
              <span className={(g.tileFit ?? g.imageFit) === "contain" ? "gem-tile" : "archive-img"} style={{ display: "block", width: "100%", aspectRatio: "1/1", border: 0 }}>
                <Image src={g.tileImage ?? g.image} alt="" width={192} height={192} style={{ width: "100%", height: "100%", objectFit: g.tileFit ?? g.imageFit }} />
              </span>
              <span className="caption" style={{ letterSpacing: "0.2em" }}>
                {String(i + 1).padStart(2, "0")}
              </span>
              <span className="h3 serif" style={{ color: "var(--charcoal)" }}>{g.name}</span>
              <span className="caption gem-row-tag" style={{ fontSize: 13 }}>{g.tagline}</span>
              <span className="caption" aria-hidden="true" style={{ color: "var(--brand-blue)" }}>
                →
              </span>
            </Link>
          ))}
        </div>
      </section>

      <AppointmentInvite heading="Discuss an extraordinary gemstone" />
    </>
  );
}