import type { Metadata } from "next";
import Reveal from "@/components/Reveal";
import AppointmentInvite from "@/components/AppointmentInvite";
import { press, videos } from "@/content/media";

export const metadata: Metadata = {
  title: "Media & Press",
  description:
    "Genesis Global in the press and on film: Prestige, Millionaire Asia, Channel NewsAsia and more, the public record of the house since 2013.",
};

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

      <section className="vitrine" style={{ paddingTop: "clamp(150px, 20vh, 230px)", paddingBottom: "clamp(60px, 8vw, 110px)" }}>
        <div className="wrap">
          <p className="eyebrow rv on">Media</p>
          <h1 className="h1 rv on d1" style={{ maxWidth: "15ch" }}>
            The public record
          </h1>
          <p className="lead rv on d2" style={{ marginTop: 26, maxWidth: "56ch" }}>
            The house does not ask to be taken on faith. Its press, television
            appearances and published features are collected here, originals
            included.
          </p>
        </div>
      </section>

      {/* Press */}
      <section className="section room-paper" aria-labelledby="press-h">
        <div className="wrap">
          <p className="eyebrow rv">In Print</p>
          <h2 id="press-h" className="h2 rv d1" style={{ maxWidth: "16ch" }}>
            Features &amp; publications
          </h2>
          <div style={{ display: "grid", gap: 1, background: "var(--hairline-dark)", border: "1px solid var(--hairline-dark)", marginTop: "clamp(40px, 5vw, 64px)" }}>
            {press.map((p, i) => (
              <a
                key={p.publication + p.year + i}
                href={p.pdf ?? p.url}
                target="_blank"
                rel="noopener"
                className="rv press-row"
                style={{
                  display: "grid",
                  gridTemplateColumns: "minmax(120px, 200px) 1fr minmax(60px, 90px) auto",
                  gap: "clamp(12px, 2.5vw, 32px)",
                  alignItems: "baseline",
                  padding: "clamp(20px, 2.5vw, 32px) clamp(16px, 2.5vw, 32px)",
                  background: "var(--white)",
                }}
              >
                <span className="serif" style={{ fontSize: "clamp(1.1rem, 1.7vw, 1.4rem)", color: "var(--charcoal)" }}>
                  {p.publication}
                </span>
                <span className="caption">{p.note}</span>
                {p.year ? <span className="caption tabular">{p.year}</span> : <span />}
                <span className="caption" style={{ color: "var(--brand-blue)" }}>
                  {p.pdf ? "PDF →" : "View →"}
                </span>
              </a>
            ))}
          </div>
          <p className="caption rv" style={{ marginTop: 20 }}>
            Original magazine scans open as PDF documents; external features open at their publishers.
          </p>
        </div>
      </section>

      {/* Film */}
      <section className="section room-deep" aria-labelledby="film-h">
        <div className="wrap">
          <p className="eyebrow rv">On Film</p>
          <h2 id="film-h" className="h2 rv d1" style={{ maxWidth: "16ch" }}>
            The house on camera
          </h2>
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
              gap: "clamp(24px, 3vw, 44px)",
              marginTop: "clamp(40px, 5vw, 64px)",
            }}
          >
            {videos.map((v, i) => (
              <figure key={v.youtubeId} className={`rv d${(i % 2) + 1}`} style={{ margin: 0 }}>
                <div className="plate" style={{ aspectRatio: "16/9" }}>
                  <iframe
                    src={`https://www.youtube-nocookie.com/embed/${v.youtubeId}`}
                    title={v.title}
                    loading="lazy"
                    allow="accelerometer; encrypted-media; picture-in-picture"
                    allowFullScreen
                    style={{ width: "100%", height: "100%", border: 0, display: "block" }}
                  />
                </div>
                <figcaption className="figure-cap">{v.title}</figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>

      <AppointmentInvite heading="Media enquiries welcome" line="Journalists, publishers and institutions are welcome to contact the house directly through the private appointment channel." />
    </>
  );
}