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 { journal } from "@/content/journal";

export const metadata: Metadata = {
  title: "The Star of Genesis, 48.95 ct Burmese Colour Change Star Sapphire",
  description:
    "One of one: a natural colour change star sapphire of 48.95 carats, Burma (Myanmar), unheated, six-ray asterism. Gübelin Report No. 24057232, rated 93.7 Outstanding.",
};

const SPECS: [string, string][] = [
  ["Name", "The Star of Genesis"],
  ["Gem type", "Natural colour change star sapphire (corundum)"],
  ["Weight", "48.95 ct"],
  ["Origin", "Burma (Myanmar)"],
  ["Cut", "Oval cabochon"],
  ["Measurements", "21.65 × 16.80 × 13.16 mm"],
  ["Phenomena", "Natural six-ray asterism · colour change, blue to violet"],
  ["Treatment", "No indications of heating"],
  ["Certification", "Gübelin Gemmological Report No. 24057232 (7 June 2024)"],
  ["Gübelin Rating", "93.7 · Outstanding"],
];

export default function StarPage() {
  const related = journal.filter((a) =>
    ["understanding-asterism", "the-colour-change-phenomenon", "reading-a-gubelin-report"].includes(a.slug)
  );

  return (
    <>
      <Reveal />

      {/* The chamber: silence, space, one object */}
      <section
        className="vitrine"
        style={{ minHeight: "92svh", display: "grid", alignItems: "center", paddingTop: 110 }}
        aria-label="The Star of Genesis"
      >
        <div className="wrap" style={{ textAlign: "center" }}>
          <p className="eyebrow rv on" style={{ justifyContent: "center" }}>
            The Flagship Masterpiece · One of One
          </p>
          <h1 className="h1 rv on d1">The Star of Genesis</h1>
          <div className="rv on d2" style={{ maxWidth: 640, margin: "clamp(28px, 4vw, 52px) auto 0" }}>
            <Image
              src="/star/star-genesis.png"
              alt="The Star of Genesis, a 48.95 carat Burmese colour change star sapphire within a halo of marquise diamonds"
              width={1200}
              height={1130}
              priority
              style={{ width: "100%", height: "auto" }}
            />
          </div>
          <p className="caption rv on d3" style={{ marginTop: 22 }}>
            48.95 carats · Burma (Myanmar) · unheated · six-ray asterism · blue to violet
          </p>
        </div>
      </section>

      {/* Information first */}
      <section className="section room" aria-labelledby="doc-h">
        <div className="wrap grid-12" style={{ alignItems: "start" }}>
          <div style={{ gridColumn: "span 5" }}>
            <p className="eyebrow rv">The Document</p>
            <h2 id="doc-h" className="h2 rv d1" style={{ maxWidth: "14ch" }}>
              Every fact, on the record
            </h2>
            <p className="lead rv d2" style={{ marginTop: 22 }}>
              The stone is presented with its complete documentation from the
              Gübelin Gem Lab of Lucerne, report, gemstone rating and
              appendix. Nothing about this object requires trust in the
              house&apos;s word alone.
            </p>
            <div className="rv d3" style={{ marginTop: 28 }}>
              <Link href="/journal/reading-a-gubelin-report" className="btn">
                How to read the report <span className="arr">→</span>
              </Link>
            </div>
          </div>
          <div style={{ gridColumn: "span 7" }}>
            <div className="spec-list rv d2">
              {SPECS.map(([k, v], i) => (
                <div className="spec-row" key={k}>
                  <span className="spec-key">{k}</span>
                  <span className={`spec-val${i === 9 ? " hl" : ""}`}>{v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* The phenomenon, on film */}
      <section className="section room-deep" aria-labelledby="phen-h">
        <div className="wrap">
          <p className="eyebrow rv">The Phenomenon</p>
          <h2 id="phen-h" className="h2 rv d1" style={{ maxWidth: "18ch" }}>
            A star that lives in moving light
          </h2>
          <p className="lead rv d2" style={{ marginTop: 22 }}>
            Six rays of light, assembled from rutile silk finer than a human
            hair, glide across the cabochon as the light source moves, while
            the stone&apos;s body colour shifts from deep blue in daylight to
            violet under incandescent light. Two phenomena, one stone.
          </p>
          <figure className="rv d2" style={{ margin: "clamp(36px, 5vw, 64px) auto 0", maxWidth: 920 }}>
            <div className="plate">
              <video
                autoPlay
                muted
                loop
                playsInline
                preload="metadata"
                poster="/star/star-genesis.png"
                style={{ width: "100%", display: "block" }}
                aria-label="A slow film of the Star of Genesis showing its six-rayed star and colour change"
              >
                <source src="/star/star-of-genesis.mp4" type="video/mp4" />
              </video>
            </div>
            <figcaption className="figure-cap" style={{ textAlign: "center", marginInline: "auto" }}>
              The asterism and colour change of the Star of Genesis, on film.
            </figcaption>
          </figure>
        </div>
      </section>

      {/* Why it matters */}
      <section className="section room" aria-labelledby="why-h">
        <div className="wrap">
          <p className="eyebrow rv">Rarity</p>
          <h2 id="why-h" className="h2 rv d1" style={{ maxWidth: "16ch" }}>
            Five rarities, one stone
          </h2>
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
              gap: 1,
              background: "var(--hairline)",
              border: "1px solid var(--hairline)",
              marginTop: "clamp(40px, 5vw, 64px)",
            }}
          >
            {[
              ["Scale", "48.95 carats, far beyond the sizes in which fine star sapphire is normally seen."],
              ["Origin", "Burma (Myanmar), the classic source, established by laboratory determination."],
              ["Colour change", "Deep blue in daylight; violet under incandescent light."],
              ["Asterism", "A natural six-rayed star, sharp and centred on the dome."],
              ["Untreated", "No indications of heating, geology's work alone."],
            ].map(([t, x], i) => (
              <div key={t} className={`rv d${(i % 3) + 1}`} style={{ background: "var(--night-900)", padding: "clamp(24px, 3vw, 38px)" }}>
                <h3 className="h3 serif" style={{ fontSize: "1.3rem" }}>{t}</h3>
                <p className="caption" style={{ marginTop: 12, fontSize: 13, lineHeight: 1.7 }}>{x}</p>
              </div>
            ))}
          </div>
          <p className="lead rv" style={{ marginTop: 36, maxWidth: "62ch" }}>
            Each of these qualities is uncommon on its own. Their convergence
            in a single sapphire places the Star of Genesis among the rarest
            phenomena stones documented in recent years, and it is why the stone
            bears the house&apos;s name.
          </p>
        </div>
      </section>

      {/* Reading room */}
      <section className="section-tight room-paper" aria-labelledby="read-h">
        <div className="wrap">
          <p className="eyebrow rv">Understand the Stone</p>
          <h2 id="read-h" className="h3 rv d1">Three essays from the Journal</h2>
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
              gap: "clamp(24px, 4vw, 56px)",
              marginTop: 36,
            }}
          >
            {related.map((a, i) => (
              <Link key={a.slug} href={`/journal/${a.slug}`} className={`rv d${i + 1}`} style={{ borderTop: "1px solid var(--hairline-dark)", paddingTop: 22 }}>
                <span className="caption" style={{ textTransform: "uppercase", letterSpacing: "0.2em" }}>
                  {a.category} · {a.minutes} min
                </span>
                <span className="h3 serif" style={{ display: "block", marginTop: 12, fontSize: "1.3rem" }}>{a.title}</span>
                <span className="caption" style={{ display: "block", marginTop: 10, fontSize: 13 }}>{a.deck}</span>
              </Link>
            ))}
          </div>
        </div>
      </section>

      <AppointmentInvite
        heading="View the Star of Genesis"
        line="The stone is available for private viewing and confidential enquiry. Appointments are arranged discreetly for collectors, clients and institutions."
      />
    </>
  );
}