import type { Metadata } from "next";
import Reveal from "@/components/Reveal";
import EnquiryForm from "@/components/EnquiryForm";
import { ENQUIRY_EMAIL, ENTITY } from "@/content/contact";

export const metadata: Metadata = {
  title: "Private Appointments",
  description:
    "Every Genesis relationship begins with a conversation. Private consultations for collectors, high jewellery clients, family offices and institutions, in Hong Kong and worldwide.",
};

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

      {/* Introduction */}
      <section className="vitrine" style={{ paddingTop: "clamp(150px, 20vh, 230px)", paddingBottom: "clamp(60px, 8vw, 110px)" }}>
        <div className="wrap">
          <p className="eyebrow rv on">Private Appointments</p>
          <h1 className="h1 rv on d1" style={{ maxWidth: "16ch" }}>
            It begins with a conversation
          </h1>
          <p className="lead rv on d2" style={{ marginTop: 26, maxWidth: "58ch" }}>
            No consultation at Genesis begins with inventory. It begins with your objectives: what you collect, what you are
            searching for, what you would like to understand. It proceeds at
            your pace, and in confidence.
          </p>
        </div>
      </section>

      {/* Who we work with */}
      <section className="section room-paper" aria-labelledby="who-h">
        <div className="wrap">
          <p className="eyebrow rv">Who We Work With</p>
          <h2 id="who-h" className="h2 rv d1" style={{ maxWidth: "16ch" }}>
            The house&apos;s clients
          </h2>
          <div className="tile-grid" style={{ marginTop: "clamp(40px, 5vw, 64px)" }}>
            {[
              ["Private Collectors", "Seeking exceptional natural gemstones with documentation to match."],
              ["High Jewellery Clients", "Commissioning one of one creations around extraordinary stones."],
              ["Family Offices", "Exploring tangible assets with centuries of collecting precedent."],
              ["Museums & Institutions", "Loans, research and collaboration around important stones."],
              ["Luxury Partners", "Houses and platforms whose clients expect the exceptional."],
              ["Media", "Journalists and publishers covering the gemstone world."],
            ].map(([t, x], i) => (
              <div key={t} className={`rv d${(i % 3) + 1}`} style={{ padding: "clamp(24px, 3vw, 36px)" }}>
                <h3 className="h3 serif" style={{ fontSize: "1.25rem" }}>{t}</h3>
                <p className="caption" style={{ marginTop: 10, fontSize: 13, lineHeight: 1.7 }}>{x}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* The consultation journey */}
      <section className="section room-paper wash" aria-labelledby="journey-h">
        <div className="wrap grid-12" style={{ alignItems: "start" }}>
          <div style={{ gridColumn: "span 5" }}>
            <p className="eyebrow rv">The Consultation</p>
            <h2 id="journey-h" className="h2 rv d1" style={{ maxWidth: "14ch" }}>
              How a relationship unfolds
            </h2>
            <p className="lead rv d2" style={{ marginTop: 22 }}>
              Calm, transparent and personal. Consultations take place in Hong
              Kong, remotely, or where the relationship requires; private
              enquiries are typically acknowledged within one business day.
            </p>
          </div>
          <div style={{ gridColumn: "span 7" }}>
            <ol style={{ listStyle: "none", margin: 0, padding: 0, borderTop: "1px solid var(--hairline-dark)" }}>
              {[
                ["Initial enquiry", "You write to the house; a specialist replies personally."],
                ["Private consultation", "A conversation about your objectives, never a presentation of stock."],
                ["Discovery & education", "Stones are proposed with their documentation, and explained fully."],
                ["Selection", "Viewings in person where possible; the stone always answers for itself."],
                ["Design, if commissioned", "For bespoke creations, design begins only after the stone is right."],
                ["An ongoing relationship", "The house remains at your side, resale counsel, documentation, care."],
              ].map(([t, x], i) => (
                <li key={t} className="rv" style={{ display: "grid", gridTemplateColumns: "56px 1fr", gap: "clamp(14px, 2vw, 28px)", padding: "22px 4px", borderBottom: "1px solid var(--hairline-dark)" }}>
                  <span className="serif" style={{ color: "var(--brand-blue)", fontSize: "1.4rem" }}>{String(i + 1).padStart(2, "0")}</span>
                  <span>
                    <span className="h3 serif" style={{ display: "block", fontSize: "1.2rem" }}>{t}</span>
                    <span className="caption" style={{ display: "block", marginTop: 6, fontSize: 13.5 }}>{x}</span>
                  </span>
                </li>
              ))}
            </ol>
          </div>
        </div>
      </section>

      {/* Contact */}
      <section className="section room" aria-labelledby="contact-h">
        <div className="wrap grid-12" style={{ alignItems: "start" }}>
          <div style={{ gridColumn: "span 5" }}>
            <p className="eyebrow rv">Write to the House</p>
            <h2 id="contact-h" className="h2 rv d1" style={{ maxWidth: "13ch" }}>
              In confidence
            </h2>
            <div className="body-copy rv d2" style={{ marginTop: 24 }}>
              <p>
                {ENTITY}
                <br />
                Hong Kong · by private appointment
              </p>
              <p>
                <a href={`mailto:${ENQUIRY_EMAIL}`} className="link-quiet">
                  {ENQUIRY_EMAIL}
                </a>
              </p>
              <p className="caption" style={{ fontSize: 12.5 }}>
                Discretion is absolute. Enquiries are read only by the house&apos;s
                own specialists, and personal data is handled under the
                house&apos;s{" "}
                <a href="/documents/GG-PDPA-Compliance-Policy.pdf" target="_blank" rel="noopener" className="link-quiet">PDPA compliance policy</a>.
              </p>
            </div>
          </div>
          <div style={{ gridColumn: "span 7" }}>
            <div className="rv d2">
              <EnquiryForm />
            </div>
          </div>
        </div>
      </section>

      {/* Closing statement */}
      <section className="section-tight vitrine">
        <div className="wrap" style={{ maxWidth: 760, marginInline: "auto", textAlign: "center" }}>
          <p className="rv serif" style={{ fontStyle: "italic", fontSize: "clamp(1.3rem, 2.4vw, 1.9rem)", lineHeight: 1.55, color: "var(--ivory)", margin: 0 }}>
            Whether you are searching for an extraordinary natural gemstone,
            commissioning a bespoke creation or seeking expert guidance, we
            look forward to beginning a conversation.
          </p>
        </div>
      </section>
    </>
  );
}