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

export const metadata: Metadata = {
  title: "High Jewellery, Selected Masterpieces",
  description:
    "One of one Genesis creations conceived around exceptional natural gemstones: jadeite, rubies, fancy colour diamonds and rare coloured stones. Available by private enquiry.",
};

/**
 * One editorial cadence (client brief): six signature creations as
 * full-breadth chapters with alternating captions, then the wider
 * portfolio in a balanced grid, the jewelled hour, and bespoke.
 */
export default function HighJewelleryPage() {
  const signatureIds = ["g27", "g19", "g13", "g07", "g18", "g28"];
  const signatures = signatureIds
    .map((id) => creations.find((c) => c.id === id))
    .filter(Boolean) as typeof creations;
  const rest = creations.filter(
    (c) => !signatureIds.includes(c.id) && c.category !== "watches"
  );
  const watches = creations.filter((c) => c.category === "watches");

  return (
    <>
      <Reveal />

      <section
        className="vitrine"
        style={{ paddingTop: "clamp(150px, 20vh, 230px)", paddingBottom: "clamp(60px, 8vw, 110px)" }}
      >
        <div className="wrap">
          <p className="eyebrow rv on">High Jewellery</p>
          <h1 className="h1 rv on d1" style={{ maxWidth: "16ch" }}>
            Selected masterpieces
          </h1>
          <p className="lead rv on d2" style={{ marginTop: 26, maxWidth: "58ch" }}>
            Each creation is one of one, conceived around its stone and
            available by private enquiry. What follows is a representative
            selection from the house&apos;s broader portfolio: the gemstone
            always the protagonist, the jewellery its frame.
          </p>
        </div>
      </section>

      {/* The signature six: one calm cadence, generous breathing room */}
      <section className="section room-paper" aria-label="Signature creations">
        <div className="wrap" style={{ display: "grid", gap: "clamp(72px, 9vw, 140px)" }}>
          {signatures.map((c, i) => (
            <figure
              key={c.id}
              className="rv hj-row"
              style={{ margin: 0 }}
              data-flip={i % 2 === 1 ? "true" : undefined}
            >
              <div className="gem-tile" style={{ aspectRatio: "4/3" }}>
                <Image
                  src={c.image}
                  alt={c.description}
                  width={1000}
                  height={750}
                  sizes="(max-width: 860px) 100vw, 58vw"
                />
              </div>
              <figcaption className="hj-caption">
                <p className="caption" style={{ textTransform: "uppercase", letterSpacing: "0.22em" }}>
                  {String(i + 1).padStart(2, "0")} · {c.category}
                </p>
                <p className="h3 serif" style={{ marginTop: 12 }}>{c.title}</p>
                <p className="lead" style={{ marginTop: 12, fontSize: "1.02rem", maxWidth: "38ch" }}>
                  {c.description}
                </p>
                <p className="caption" style={{ marginTop: 18, color: "var(--brand-blue)" }}>
                  Available for private enquiry
                </p>
              </figcaption>
            </figure>
          ))}
        </div>
      </section>

      {/* The evening: the jewels worn and shown */}
      <section className="section room-paper tint" aria-labelledby="evening-h">
        <div className="wrap">
          <p className="eyebrow rv">On Stage</p>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap" }}>
            <h2 id="evening-h" className="h2 rv d1" style={{ maxWidth: "18ch" }}>
              An evening of couture and jewels
            </h2>
            <p className="lead rv d2" style={{ maxWidth: "44ch" }}>
              December 2013: the house&apos;s diamonds and coloured stones on
              stage and in vitrines, worn the way they were always meant to be.
            </p>
          </div>
          <div className="tile-grid" style={{ marginTop: "clamp(40px, 5vw, 64px)" }}>
            {[
              { src: "/archive/full/2013_12_03_28260a-WYP_0411.jpg", alt: "A model wearing a diamond necklace beside the vitrines", pos: "50% 25%" },
              { src: "/archive/full/2013_12_03_60506a-WYP_0412.jpg", alt: "A model wearing an emerald suite: necklace, earrings, bracelet and ring", pos: "50% 22%" },
              { src: "/archive/full/2013_12_03_3079a-WYP_0414.jpg", alt: "A model in bridal lace at the couture evening", pos: "50% 20%" },
            ].map((m, i) => (
              <figure key={m.src} className={`rv d${i + 1}`} style={{ margin: 0, padding: 0 }}>
                <div className="archive-img" style={{ aspectRatio: "3/4", border: 0 }}>
                  <Image
                    src={m.src}
                    alt={m.alt}
                    width={800}
                    height={1067}
                    sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 33vw"
                    style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: m.pos }}
                  />
                </div>
                <figcaption className="figure-cap" style={{ padding: "0 clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px)", marginTop: 14 }}>
                  {m.alt}.
                </figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>

      {/* The wider portfolio: balanced grid, no leftovers */}
      <section className="section room-paper" aria-labelledby="port-h">
        <div className="wrap">
          <p className="eyebrow rv">The Wider Portfolio</p>
          <h2 id="port-h" className="h2 rv d1" style={{ maxWidth: "16ch" }}>
            Further creations
          </h2>
          <div className="tile-grid" style={{ marginTop: "clamp(40px, 5vw, 64px)" }}>
            {rest.map((c, i) => (
              <figure key={c.id} className={`rv d${(i % 3) + 1}`} style={{ margin: 0, padding: 0 }}>
                <div className="gem-tile" style={{ aspectRatio: "4/3", border: 0 }}>
                  <Image
                    src={c.image}
                    alt={c.description}
                    width={640}
                    height={480}
                    sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 33vw"
                  />
                </div>
                <figcaption style={{ padding: "clamp(18px, 2vw, 26px)" }}>
                  <p className="h3 serif" style={{ fontSize: "1.2rem" }}>{c.title}</p>
                  <p className="caption" style={{ marginTop: 6, fontSize: 13 }}>{c.description}</p>
                </figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>

      {/* The jewelled hour */}
      <section className="section room-paper tint" aria-labelledby="watch-h">
        <div className="wrap">
          <p className="eyebrow rv">The Jewelled Hour</p>
          <h2 id="watch-h" className="h2 rv d1" style={{ maxWidth: "16ch" }}>
            Timepieces as jewellery
          </h2>
          <div className="tile-grid" style={{ marginTop: "clamp(40px, 5vw, 64px)" }}>
            {watches.map((c, i) => (
              <figure key={c.id} className={`rv d${(i % 3) + 1}`} style={{ margin: 0, padding: 0 }}>
                <div className="gem-tile" style={{ aspectRatio: "4/3", border: 0 }}>
                  <Image
                    src={c.image}
                    alt={c.description}
                    width={640}
                    height={480}
                    sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 33vw"
                  />
                </div>
                <figcaption style={{ padding: "clamp(18px, 2vw, 26px)" }}>
                  <p className="h3 serif" style={{ fontSize: "1.2rem" }}>{c.title}</p>
                  <p className="caption" style={{ marginTop: 6, fontSize: 13 }}>{c.description}</p>
                </figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>

      {/* Bespoke */}
      <section className="section room-paper" aria-labelledby="bespoke-h">
        <div className="wrap grid-12">
          <div style={{ gridColumn: "span 6" }}>
            <p className="eyebrow rv">Bespoke</p>
            <h2 id="bespoke-h" className="h2 rv d1" style={{ maxWidth: "15ch" }}>
              Creations that begin with a conversation
            </h2>
          </div>
          <div style={{ gridColumn: "span 6" }}>
            <div className="body-copy rv d2">
              <p>
                A bespoke commission at Genesis follows the order the house
                believes in: first the stone, then the design. It begins with a
                private consultation about your intentions; continues through
                the sourcing and documentation of the gemstone itself; and only
                then moves to design, craftsmanship and completion.
              </p>
              <p>
                There is no catalogue and no deadline pressure. Some
                commissions complete in months; the right ones take the time
                they take.
              </p>
            </div>
            <div className="rv d3" style={{ marginTop: 26 }}>
              <Link href="/appointments" className="btn">
                Begin a commission <span className="arr">→</span>
              </Link>
            </div>
          </div>
        </div>
      </section>

      <AppointmentInvite heading="Enquire about a creation" />
    </>
  );
}