import type { Metadata } from "next";
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: "Leadership",
  description:
    "Kelvin Tan and Dennis Tan, the founders and custodians of Genesis Global, a private gemstone and high jewellery house headquartered in Hong Kong.",
};

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

      <section className="vitrine" style={{ paddingTop: "clamp(150px, 20vh, 230px)", paddingBottom: "clamp(60px, 8vw, 110px)" }}>
        <div className="wrap">
          <p className="eyebrow rv on">Leadership</p>
          <h1 className="h1 rv on d1" style={{ maxWidth: "18ch" }}>
            Custodians of exceptional stones
          </h1>
          <p className="lead rv on d2" style={{ marginTop: 26 }}>
            Genesis is led by the two people who built it. Their careers, one in law, one in hospitality, explain a great deal about how
            the house behaves.
          </p>
        </div>
      </section>

      {leadership.map((l, idx) => (
        <section
          key={l.slug}
          className={`section room-paper${idx % 2 ? " wash" : ""}`}
          aria-labelledby={`${l.slug}-h`}
        >
          <div className="wrap grid-12" style={{ alignItems: "start" }}>
            <div style={{ gridColumn: "span 4" }}>
              <figure className="rv" style={{ margin: 0, position: "sticky", top: 110 }}>
                <div className="archive-img" style={{ maxWidth: 160 }}>
                  <Image
                    src={l.portrait}
                    alt={`${l.name}, ${l.role} of Genesis Global`}
                    width={248}
                    height={320}
                    style={{ width: "100%", height: "auto", filter: "saturate(0.92)" }}
                  />
                </div>
                <figcaption className="figure-cap">
                  {l.name} {l.chineseName} · {l.role}
                </figcaption>
              </figure>
            </div>
            <div style={{ gridColumn: "span 8", maxWidth: 720 }}>
              <p className="eyebrow rv">{l.role}</p>
              <h2 id={`${l.slug}-h`} className="h2 rv d1">
                {l.name} <span style={{ color: "var(--stone)", fontSize: "0.6em" }}>{l.chineseName}</span>
              </h2>
              <p className="lead rv d2" style={{ marginTop: 20, fontStyle: "italic", fontFamily: "var(--font-serif)", fontSize: "1.3rem" }}>
                {l.intro}
              </p>
              <div className="body-copy rv d2" style={{ marginTop: 26 }}>
                {l.paragraphs.map((p, i) => (
                  <p key={i}>{p}</p>
                ))}
                <p style={{ color: "var(--stone)" }}>{l.personal}</p>
              </div>
            </div>
          </div>
        </section>
      ))}

      <section className="section-tight room-deep">
        <div className="wrap" style={{ maxWidth: 800, textAlign: "center", marginInline: "auto" }}>
          <p className="pull rv" style={{ border: 0, padding: 0, margin: "0 auto", maxWidth: "36ch", fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: "clamp(1.4rem, 2.6vw, 2.1rem)", lineHeight: 1.45, color: "var(--ivory)" }}>
            A collection came long before a company. That order of events is
            the house&apos;s entire philosophy.
          </p>
          <p className="caption rv d1" style={{ marginTop: 20 }}>
            The founding conviction of Genesis: a collection first, a company second.
          </p>
        </div>
      </section>

      <AppointmentInvite heading="Speak with the house&apos;s specialists" />
    </>
  );
}