import Link from "next/link";
import Image from "next/image";
import Reveal from "@/components/Reveal";
import AppointmentInvite from "@/components/AppointmentInvite";
import { gemstones } from "@/content/gemstones";
import { featuredCreations } from "@/content/creations";
import { journal } from "@/content/journal";
import { press } from "@/content/media";
import { leadership } from "@/content/leadership";
import { archiveStrip, archiveCount } from "@/content/archive";

export default function Home() {
  const gems = gemstones;
  const articles = journal.slice(0, 3);
  const strip = archiveStrip().slice(0, 6);

  return (
    <>
      <Reveal />

      {/* ================= SCENE ONE, ARRIVAL ================= */}
      <section
        className="room-deep"
        style={{ minHeight: "92svh", display: "flex", alignItems: "center", position: "relative", overflow: "hidden" }}
        aria-label="Genesis Global"
      >
        <video
          className="hero-video"
          autoPlay
          muted
          loop
          playsInline
          poster="/star/star-genesis.png"
          aria-hidden="true"
        >
          <source src="/star/star-of-genesis.mp4" type="video/mp4" />
        </video>
        <div className="hero-veil" aria-hidden="true" />
        <div
          className="wrap"
          style={{ position: "relative", zIndex: 2, width: "100%", paddingTop: 150, paddingBottom: 100 }}
        >
          <p className="eyebrow rv on" style={{ marginBottom: 18 }}>
            A Private Gemstone House · Est. 2012
          </p>
          <h1 className="h1 rv on d1" style={{ maxWidth: "18ch", fontSize: "clamp(2.4rem, 4.8vw, 4.4rem)", fontWeight: 400 }}>
            Welcome to Genesis Global.
          </h1>
          <p className="lead rv on d2" style={{ marginTop: 26, maxWidth: "52ch" }}>
            A private house of exceptional natural gemstones and high
            jewellery, at home in Hong Kong and at your service worldwide,
            by appointment.
          </p>
          <div
            className="rv on d3"
            style={{ display: "flex", gap: "clamp(22px, 4vw, 44px)", flexWrap: "wrap", marginTop: 40 }}
          >
            <Link href="/gemstones" className="btn">
              Extraordinary Gemstones <span className="arr">→</span>
            </Link>
            <Link href="/appointments" className="btn">
              Private Appointments <span className="arr">→</span>
            </Link>
          </div>
        </div>
      </section>

      {/* ================= SCENE TWO, WHO WE ARE ================= */}
      <section className="section room-paper" aria-labelledby="who-h">
        <div className="wrap grid-12" style={{ alignItems: "center" }}>
          <div style={{ gridColumn: "span 6" }}>
            <p className="eyebrow rv">Who We Are</p>
            <h2 id="who-h" className="h2 rv d1" style={{ maxWidth: "16ch" }}>
              A house built by collectors, for collectors
            </h2>
            <div className="body-copy rv d2" style={{ marginTop: 28 }}>
              <p>
                Genesis Global began in Singapore in 2012, founded on a private
                collection of precious gemstones assembled over more than
                fifteen years. It has grown into a house serving private
                clients internationally, from its headquarters in Hong Kong,
                one of the world&apos;s great crossroads of the gemstone trade.
              </p>
              <p>
                The house&apos;s strength lies in long established relationships
                with key precious gem mining companies: rubies, sapphires,
                emeralds, jadeite and diamonds, sourced close to origin and
                documented by internationally recognised gemmological
                laboratories.
              </p>
              <p>
                Every acquisition is approached the way the founders approach
                their own: patiently, sceptically, and with the conviction that
                nature&apos;s greatest masterpieces deserve extraordinary care.
              </p>
            </div>
            <div className="rv d3" style={{ marginTop: 30 }}>
              <Link href="/about" className="btn">
                About Genesis <span className="arr">→</span>
              </Link>
            </div>
          </div>
          <div style={{ gridColumn: "span 6" }}>
            <figure className="rv d2" style={{ margin: 0 }}>
              <div className="archive-img lit" style={{ aspectRatio: "1/1" }}>
                <Image
                  src="/site/palette.jpg"
                  alt="A hand carrying loose coloured gemstones alongside gem set rings at a private viewing"
                  width={2268}
                  height={4032}
                  sizes="(max-width: 760px) 100vw, 50vw"
                  style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "50% 42%" }}
                />
              </div>
              <figcaption className="figure-cap">
                A handful of colour · stones and creations at a private viewing.
              </figcaption>
            </figure>
          </div>
        </div>
      </section>

      {/* ================= SCENE THREE, WHY GENESIS ================= */}
      <section className="section room-paper wash" aria-labelledby="why-h">
        <div className="wrap">
          <p className="eyebrow rv">Why Genesis</p>
          <h2 id="why-h" className="h2 rv d1" style={{ maxWidth: "18ch" }}>
            Five things worth knowing about this house
          </h2>
          <div style={{ marginTop: "clamp(44px, 5vw, 72px)", borderTop: "1px solid var(--hairline-dark)" }}>
            {[
              {
                n: "I",
                t: "Exceptional Natural Gemstones",
                x: "Access to some of the world's rarest natural gemstones, through long established relationships with key mining companies, sourced close to origin, never from the middle of the market.",
              },
              {
                n: "II",
                t: "Private High Jewellery",
                x: "One of one creations conceived around the stone, never the other way round. The gemstone remains the protagonist; the jewellery is its frame.",
              },
              {
                n: "III",
                t: "Knowledge & Education",
                x: "A house that documents, explains and teaches, through its Journal, its laboratory documentation and its conversations. Knowledge shared freely is the house's strongest credential.",
              },
              {
                n: "IV",
                t: "International Relationships",
                x: "Collectors, exhibitions, laboratories and industry partners across Asia and beyond, a network on public record in the house's archive and press.",
              },
              {
                n: "V",
                t: "The Private Client Experience",
                x: "Discretion, patience and long term relationships. Consultations begin with your objectives, not with the house's inventory, and they are conducted by appointment only.",
              },
            ].map((p) => (
              <div
                key={p.n}
                className="rv"
                style={{
                  display: "grid",
                  gridTemplateColumns: "minmax(48px, 90px) 1fr",
                  gap: "clamp(16px, 3vw, 48px)",
                  padding: "clamp(26px, 3.5vw, 44px) 4px",
                  borderBottom: "1px solid var(--hairline-dark)",
                }}
              >
                <div
                  className="serif"
                  style={{ fontSize: "clamp(1.3rem, 2vw, 1.8rem)", color: "var(--brand-blue)", lineHeight: 1.3 }}
                >
                  {p.n}
                </div>
                <div className="pillar-inner">
                  <h3 className="h3">{p.t}</h3>
                  <p className="lead" style={{ margin: 0, maxWidth: "62ch" }}>{p.x}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ================= SCENE FOUR, THE GEMSTONE UNIVERSE ================= */}
      <section className="section room-paper" aria-labelledby="gems-h">
        <div className="wrap">
          <p className="eyebrow rv">Extraordinary Gemstones</p>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap" }}>
            <h2 id="gems-h" className="h2 rv d1" style={{ maxWidth: "16ch" }}>
              Nature is the first artist
            </h2>
            <p className="lead rv d2" style={{ maxWidth: "44ch" }}>
              The house works across the full breadth of the gem kingdom. Each
              category below is a destination of its own, science, provenance
              and collecting knowledge included.
            </p>
          </div>
          <div className="tile-grid" style={{ marginTop: "clamp(44px, 5vw, 72px)" }}>
            {gems.map((g, i) => (
              <Link
                key={g.slug}
                href={`/gemstones/${g.slug}`}
                className="rv"
                style={{
                  display: "flex",
                  flexDirection: "column",
                  transitionDelay: `${(i % 3) * 0.08}s`,
                }}
              >
                <span
                  className={(g.tileFit ?? g.imageFit) === "contain" ? "gem-tile" : "archive-img"}
                  style={{ display: "block", aspectRatio: "4/3", border: 0 }}
                >
                  <Image
                    src={g.tileImage ?? g.image}
                    alt={g.tileAlt ?? g.imageAlt}
                    width={800}
                    height={600}
                    sizes="(max-width: 560px) 100vw, (max-width: 1000px) 50vw, 25vw"
                    style={{ width: "100%", height: "100%", objectFit: g.tileFit ?? g.imageFit }}
                  />
                </span>
                <span style={{ padding: "clamp(20px, 2.2vw, 30px)", display: "block" }}>
                  <span className="caption" style={{ letterSpacing: "0.24em", textTransform: "uppercase", display: "block" }}>
                    {String(i + 1).padStart(2, "0")}
                  </span>
                  <span className="h3 serif" style={{ display: "block", marginTop: 10 }}>{g.name}</span>
                  <span className="caption" style={{ display: "block", marginTop: 6 }}>{g.tagline}</span>
                </span>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* ================= SCENE FIVE, THE STAR OF GENESIS ================= */}
      <section className="section vitrine" aria-labelledby="star-h">
        <div className="wrap grid-12" style={{ alignItems: "center" }}>
          <div style={{ gridColumn: "span 6" }}>
            <figure className="rv" style={{ margin: 0 }}>
              <div className="plate lit" style={{ aspectRatio: "1/1", display: "grid", placeItems: "center" }}>
                <Image
                  src="/star/star-genesis.png"
                  alt="The Star of Genesis, a 48.95 carat Burmese colour change star sapphire, set within a diamond pendant"
                  width={1200}
                  height={1130}
                  style={{ width: "88%", height: "88%", objectFit: "contain" }}
                />
              </div>
              <figcaption className="figure-cap">
                The Star of Genesis · 48.95 carats · Burma (Myanmar)
              </figcaption>
            </figure>
          </div>
          <div style={{ gridColumn: "span 6" }}>
            <p className="eyebrow rv">The Flagship Masterpiece</p>
            <h2 id="star-h" className="h2 rv d1">
              The Star of Genesis
            </h2>
            <p className="lead rv d2" style={{ marginTop: 24 }}>
              One of one. A natural colour change star sapphire of 48.95
              carats, Burmese, unheated, its six-rayed star riding a colour
              that turns from deep blue in daylight to violet under evening
              light. Documented by the Gübelin Gem Lab and rated 93.7,
              Outstanding.
            </p>
            <div className="spec-list rv d3" style={{ marginTop: 34, maxWidth: 560 }}>
              {[
                ["Weight", "48.95 ct"],
                ["Origin", "Burma (Myanmar)"],
                ["Phenomena", "Six-ray asterism · colour change"],
                ["Treatment", "No indications of heating"],
                ["Gübelin Rating", "93.7 · Outstanding"],
              ].map(([k, v], idx) => (
                <div className="spec-row" key={k}>
                  <span className="spec-key">{k}</span>
                  <span className={`spec-val${idx === 4 ? " hl" : ""}`}>{v}</span>
                </div>
              ))}
            </div>
            <div className="rv d3" style={{ marginTop: 32 }}>
              <Link href="/star-of-genesis" className="btn">
                View the Star of Genesis <span className="arr">→</span>
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* ================= SCENE SIX, HIGH JEWELLERY ================= */}
      <section className="section room-paper" aria-labelledby="hj-h">
        <div className="wrap">
          <p className="eyebrow rv">High Jewellery</p>
          <h2 id="hj-h" className="h2 rv d1" style={{ maxWidth: "18ch" }}>
            Jewellery that exists to honour the stone
          </h2>
          <div className="grid-12" style={{ marginTop: "clamp(44px, 5vw, 72px)", alignItems: "start" }}>
            <Link href="/high-jewellery" style={{ gridColumn: "span 7" }} className="rv">
              <figure style={{ margin: 0 }}>
                <div className="archive-img" style={{ aspectRatio: "4/3" }}>
                  <Image
                    src="/archive/full/2013_12_03_82613a-WYP_0037.jpg"
                    alt="A sapphire and diamond necklace on a display bust, photographed at the couture evening"
                    width={1067}
                    height={1600}
                    sizes="(max-width: 760px) 100vw, 58vw"
                    style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "50% 38%" }}
                  />
                </div>
                <figcaption className="figure-cap">
                  A sapphire and diamond necklace · an evening of couture and jewels, 2013.
                </figcaption>
              </figure>
            </Link>
            <div style={{ gridColumn: "span 5", display: "grid", gap: "clamp(20px, 2.5vw, 32px)" }}>
              {[
                { id: "g03", image: "/creations/g03.png", description: "A pear cut gem of luminous lagoon blue within a double halo of brilliant cut diamonds." },
                { id: "g28", image: "/creations/g28.png", description: "A blossom of pink and yellow diamonds set in white gold." },
              ].map((c) => (
                <Link href="/high-jewellery" key={c.id} className="rv d1">
                  <figure style={{ margin: 0 }}>
                    <div className="gem-tile" style={{ aspectRatio: "16/10" }}>
                      <Image src={c.image} alt={c.description} width={700} height={438} />
                    </div>
                    <figcaption className="figure-cap">{c.description}</figcaption>
                  </figure>
                </Link>
              ))}
            </div>
          </div>
          <div className="rv d2" style={{ marginTop: 40 }}>
            <Link href="/high-jewellery" className="btn">
              Explore Selected Masterpieces <span className="arr">→</span>
            </Link>
          </div>
        </div>
      </section>

      {/* ================= SCENE SEVEN, KNOWLEDGE ================= */}
      <section className="section room-paper tint" aria-labelledby="journal-h">
        <div className="wrap">
          <p className="eyebrow rv">The Genesis Journal</p>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap" }}>
            <h2 id="journal-h" className="h2 rv d1" style={{ maxWidth: "16ch" }}>
              Knowledge is the bridge to trust
            </h2>
            <Link href="/journal" className="btn rv d2">
              Read the Journal <span className="arr">→</span>
            </Link>
          </div>
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
              gap: "clamp(28px, 4vw, 56px)",
              marginTop: "clamp(44px, 5vw, 72px)",
            }}
          >
            {articles.map((a, i) => (
              <Link
                key={a.slug}
                href={`/journal/${a.slug}`}
                className={`rv d${i + 1}`}
                style={{ borderTop: "1px solid var(--hairline-dark)", paddingTop: 26 }}
              >
                <span className="caption" style={{ textTransform: "uppercase", letterSpacing: "0.2em" }}>
                  {a.category} · {a.minutes} min
                </span>
                <span className="h3 serif" style={{ display: "block", marginTop: 14 }}>
                  {a.title}
                </span>
                <span className="caption" style={{ display: "block", marginTop: 12, fontSize: 13.5, lineHeight: 1.7 }}>
                  {a.deck}
                </span>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* ================= SCENE EIGHT, LEADERSHIP ================= */}
      <section className="section room-paper" aria-labelledby="lead-h">
        <div className="wrap grid-12" style={{ alignItems: "start" }}>
          <div style={{ gridColumn: "span 5" }}>
            <p className="eyebrow rv">Leadership</p>
            <h2 id="lead-h" className="h2 rv d1" style={{ maxWidth: "14ch" }}>
              Custodians, not executives
            </h2>
            <p className="lead rv d2" style={{ marginTop: 24 }}>
              Genesis is led by its founders: a former lawyer who collected
              gemstones for fifteen years before building a house around them,
              and a service leader whose career began at The Ritz-Carlton and
              spans two decades of client experience across Asia.
            </p>
            <div className="rv d3" style={{ marginTop: 30 }}>
              <Link href="/leadership" className="btn">
                Meet the Leadership <span className="arr">→</span>
              </Link>
            </div>
          </div>
          <div
            style={{
              gridColumn: "span 7",
              display: "grid",
              gridTemplateColumns: "1fr 1fr",
              gap: "clamp(20px, 3vw, 40px)",
            }}
          >
            {leadership.map((l, i) => (
              <Link key={l.slug} href="/leadership" className={`rv d${i + 1}`}>
                <div className="archive-img" style={{ aspectRatio: "3/4", maxWidth: 160 }}>
                  <Image
                    src={l.portrait}
                    alt={`${l.name}, ${l.role}`}
                    width={248}
                    height={320}
                    style={{ width: "100%", height: "100%", objectFit: "cover", filter: "saturate(0.92)" }}
                  />
                </div>
                <p className="h3 serif" style={{ marginTop: 18 }}>
                  {l.name}{" "}
                  <span style={{ color: "var(--stone)", fontSize: "0.75em" }}>{l.chineseName}</span>
                </p>
                <p className="caption" style={{ marginTop: 6, textTransform: "uppercase", letterSpacing: "0.18em" }}>
                  {l.role}
                </p>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* ================= SCENE NINE, MEDIA ================= */}
      <section className="section-tight room-paper tint" aria-labelledby="media-h">
        <div className="wrap">
          <p className="eyebrow rv">Media</p>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap" }}>
            <h2 id="media-h" className="h2 rv d1" style={{ maxWidth: "18ch" }}>
              On the record since 2013
            </h2>
            <Link href="/media" className="btn rv d2">
              Press &amp; Film <span className="arr">→</span>
            </Link>
          </div>
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
              gap: "clamp(18px, 2.5vw, 36px)",
              marginTop: "clamp(40px, 5vw, 64px)",
            }}
          >
            {press.slice(0, 4).map((p, i) => (
              <a
                key={p.publication + p.year}
                href={p.pdf ?? p.url}
                target="_blank"
                rel="noopener"
                className={`rv d${(i % 3) + 1}`}
                style={{ borderTop: "1px solid var(--hairline-dark)", paddingTop: 20 }}
              >
                <span className="serif" style={{ fontSize: "1.35rem", color: "var(--charcoal)", display: "block" }}>
                  {p.publication}
                </span>
                <span className="caption" style={{ display: "block", marginTop: 8 }}>
                  {p.year ? `${p.year} · ` : ""}
                  {p.note}
                </span>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* ================= SCENE TEN, THE ARCHIVE ================= */}
      <section className="section room" aria-labelledby="arch-h">
        <div className="wrap">
          <p className="eyebrow rv">The Genesis Archive</p>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap" }}>
            <h2 id="arch-h" className="h2 rv d1" style={{ maxWidth: "18ch" }}>
              {`${archiveCount()} photographs of a house at work`}
            </h2>
            <Link href="/gallery" className="btn rv d2">
              Enter the Archive <span className="arr">→</span>
            </Link>
          </div>
        </div>
        <div className="archive-strip">
          {strip.map(({ src, event }, i) => (
            <Link key={event.key} href="/gallery" className="rv" style={{ transitionDelay: `${i * 0.06}s` }}>
              <div className="archive-img" style={{ aspectRatio: "1/1", border: 0 }}>
                <Image
                  src={src}
                  alt={`${event.title}, ${event.when}`}
                  width={520}
                  height={520}
                  sizes="(max-width: 560px) 50vw, (max-width: 1000px) 33vw, 17vw"
                  style={{ width: "100%", height: "100%", objectFit: "cover" }}
                />
              </div>
            </Link>
          ))}
        </div>
      </section>

      {/* ================= SCENE ELEVEN, HONG KONG ================= */}
      <section className="section-tight room-paper wash" aria-labelledby="hk-h">
        <div className="wrap" style={{ maxWidth: 860, textAlign: "center", marginInline: "auto" }}>
          <p className="eyebrow rv" style={{ justifyContent: "center" }}>
            Hong Kong
          </p>
          <h2 id="hk-h" className="h2 rv d1">
            Headquartered where the world&apos;s great stones change hands
          </h2>
          <p className="lead rv d2" style={{ marginInline: "auto", marginTop: 24 }}>
            Founded in Singapore, seasoned in Bangkok&apos;s gem trade, the house
            now operates from Hong Kong, the clearing house of the Asian
            gemstone world, as Genesis Global Gems &amp; Jewellery (Hong Kong)
            Limited, serving private clients worldwide.
          </p>
          <div className="rv d3" style={{ marginTop: 30 }}>
            <Link href="/about" className="btn">
              The Genesis Story <span className="arr">→</span>
            </Link>
          </div>
        </div>
      </section>

      {/* ================= SCENE TWELVE, THE QUIET DOOR ================= */}
      <AppointmentInvite />
    </>
  );
}