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

export const metadata: Metadata = {
  title: "About Genesis",
  description:
    "Genesis Global exists to discover, preserve and present exceptional natural gemstones, a private house founded in Singapore in 2012, headquartered today in Hong Kong.",
};

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

      {/* Opening statement */}
      <section className="vitrine" style={{ paddingTop: "clamp(150px, 20vh, 230px)", paddingBottom: "clamp(70px, 9vw, 130px)" }}>
        <div className="wrap">
          <p className="eyebrow rv on">About Genesis</p>
          <h1 className="h1 rv on d1" style={{ maxWidth: "20ch" }}>
            Why does this house exist?
          </h1>
          <p className="lead rv on d2" style={{ marginTop: 28, maxWidth: "62ch", fontSize: "clamp(1.1rem, 1.6vw, 1.35rem)" }}>
            Genesis Global exists to discover, preserve and present exceptional
            natural gemstones with the respect they deserve, combining decades
            of expertise with enduring relationships across the international
            gemstone community.
          </p>
        </div>
      </section>

      {/* The story */}
      <section className="section room-paper" aria-labelledby="story-h">
        <div className="wrap grid-12">
          <div style={{ gridColumn: "span 7" }}>
            <p className="eyebrow rv">The Story</p>
            <h2 id="story-h" className="h2 rv d1" style={{ maxWidth: "16ch" }}>
              A collection that became a house
            </h2>
            <div className="body-copy rv d2" style={{ marginTop: 28 }}>
              <p>
                Before Genesis was a company, it was a private discipline. Its
                founder, then a senior lawyer, spent more than fifteen years
                quietly assembling a collection of precious gemstones, buying
                rarely, documenting everything, and holding for the long term.
                The collection&apos;s appreciation taught a lesson that no
                marketing could: exceptional natural gemstones reward patience.
              </p>
              <p>
                In 2012 that discipline took corporate form. Genesis-Global
                Gems &amp; Jewellery (Singapore) Pte Ltd was founded as a
                purveyor of exquisite gems and jewellery in the ultra-luxury
                sector, its strength resting on established relationships with
                key precious gem mining companies, sources of rubies,
                sapphires, emeralds, jadeite and diamonds close to origin.
              </p>
              <p>
                A showroom era in Bangkok placed the house at one of the great
                crossroads of the world&apos;s coloured stone trade and deepened
                those sourcing relationships further. Exhibitions, private
                viewings, press features and television followed, years of
                public record preserved today in the house&apos;s archive.
              </p>
              <p>
                Today the house operates as Genesis Global Gems &amp; Jewellery
                (Hong Kong) Limited, headquartered in the city where the
                great Asian gemstones change hands, and
                serving private clients internationally, by appointment.
              </p>
            </div>
            <div className="rv d3" style={{ marginTop: 30 }}>
              <Link href="/journal/the-genesis-story" className="btn">
                Read the full story in the Journal <span className="arr">→</span>
              </Link>
            </div>
          </div>
          <div style={{ gridColumn: "span 5", display: "grid", gap: "clamp(20px, 2.5vw, 32px)", alignContent: "start" }}>
            <figure className="rv d2" style={{ margin: 0 }}>
              <div className="archive-img lit" style={{ aspectRatio: "4/3" }}>
                <Image
                  src="/archive/full/2013_03_05_47942250113_GenesisGlobal_268.jpg"
                  alt="A private consultation at the launch of the house, stones examined across the table"
                  width={1600}
                  height={1200}
                  sizes="(max-width: 760px) 100vw, 42vw"
                  style={{ width: "100%", height: "100%", objectFit: "cover" }}
                />
              </div>
              <figcaption className="figure-cap">A private consultation at the launch of the house · January 2013.</figcaption>
            </figure>
            <figure className="rv d3" style={{ margin: 0 }}>
              <div className="archive-img lit" style={{ aspectRatio: "4/3" }}>
                <Image
                  src="/archive/full/2015_11_30_28023IMG_8087.jpg"
                  alt="Guests at a Genesis private client evening"
                  width={1600}
                  height={1200}
                  style={{ width: "100%", height: "100%", objectFit: "cover" }}
                />
              </div>
              <figcaption className="figure-cap">An evening with private clients, November 2015.</figcaption>
            </figure>
          </div>
        </div>
      </section>

      {/* Philosophy */}
      <section className="section room-paper wash" aria-labelledby="phil-h">
        <div className="wrap">
          <p className="eyebrow rv">The Philosophy</p>
          <h2 id="phil-h" className="h2 rv d1" style={{ maxWidth: "18ch" }}>
            Beliefs the house does not negotiate
          </h2>
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
              gap: "clamp(28px, 4vw, 56px)",
              marginTop: "clamp(44px, 5vw, 72px)",
            }}
          >
            {[
              ["Nature is the greatest artist", "A gemstone is a geological miracle formed over millions of years. Jewellery exists to honour it, never to overshadow it."],
              ["Knowledge creates confidence", "The house documents, explains and teaches. An educated client is the only client worth having."],
              ["Relationships outlast transactions", "Sourcing close to origin, and serving clients for decades, both rest on the same foundation: trust accumulated slowly."],
              ["Authenticity cannot be manufactured", "Laboratory documentation from recognised houses is the ground truth of everything Genesis presents."],
              ["Craftsmanship deserves patience", "One of one creations are conceived around the stone and finished without deadline pressure."],
              ["Luxury begins with trust", "Not with marketing. Every claim on these pages is defensible; everything else was left out."],
            ].map(([t, x], i) => (
              <div key={t} className={`rv d${(i % 3) + 1}`} style={{ borderTop: "2px solid var(--brand-blue)", paddingTop: 24 }}>
                <h3 className="h3">{t}</h3>
                <p className="lead" style={{ marginTop: 12, fontSize: "1rem" }}>{x}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Hong Kong */}
      <section className="section room-paper" aria-labelledby="hk-h">
        <div className="wrap grid-12" style={{ alignItems: "center" }}>
          <div style={{ gridColumn: "span 6" }}>
            <p className="eyebrow rv">Hong Kong</p>
            <h2 id="hk-h" className="h2 rv d1" style={{ maxWidth: "15ch" }}>
              Why the house is here
            </h2>
            <div className="body-copy rv d2" style={{ marginTop: 26 }}>
              <p>
                Hong Kong is not an address; it is a position. The city is the
                clearing house of the Asian gemstone world, the market where
                the great jadeites, sapphires and fancy colour diamonds are
                traded, auctioned and certified, and one of the world&apos;s
                foremost centres of finance, logistics and law.
              </p>
              <p>
                For a private gemstone house, that concentration matters:
                proximity to the region&apos;s laboratories, auction rooms and
                collectors shortens every distance that counts. From Hong Kong,
                Genesis consults with clients in person and remotely, and
                travels where the relationship requires.
              </p>
            </div>
          </div>
          <div style={{ gridColumn: "span 6" }}>
            <figure className="rv d2" style={{ margin: 0 }}>
              <div className="archive-img lit" style={{ aspectRatio: "4/3" }}>
                <Image
                  src="/archive/full/2017_11_27_29448IMG_3650.jpg"
                  alt="Guests at a formal Genesis reception"
                  width={1600}
                  height={1200}
                  style={{ width: "100%", height: "100%", objectFit: "cover" }}
                />
              </div>
              <figcaption className="figure-cap">A formal reception, November 2017.</figcaption>
            </figure>
          </div>
        </div>
      </section>

      {/* Leadership hand-off */}
      <section className="section-tight room-deep" aria-labelledby="ldr-h">
        <div className="wrap">
          <p className="eyebrow rv">The People</p>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap" }}>
            <h2 id="ldr-h" className="h2 rv d1" style={{ maxWidth: "18ch" }}>
              Trust people before companies
            </h2>
            <Link href="/leadership" className="btn rv d2">
              Meet {leadership.map((l) => l.name.split(" ")[0]).join(" & ")} <span className="arr">→</span>
            </Link>
          </div>
        </div>
      </section>

      <AppointmentInvite heading="Meet the house properly" />
    </>
  );
}