/* The Purple Chair — page components */

const { useState, useEffect, useRef } = React;

// ---------- shared bits ----------

function Mark({ size = 28, white = false }) {
  // A wordmark-style monogram drawn from the brief lockup. Original — does not reproduce the existing logo.
  const c = white ? "#FBFAF8" : "var(--ink)";
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
      <svg width={size * 1.35} height={size} viewBox="0 0 54 40" fill="none" aria-hidden="true">
        {/* small chair glyph — abstract: three legs + back */}
        <path d="M10 8 L10 22 M22 8 L22 22 M7 22 L25 22 M10 22 L10 32 M22 22 L22 32 M16 4 L16 22" stroke={c} strokeWidth="1.5" strokeLinecap="square" />
        <circle cx="16" cy="4.5" r="0.9" fill={c} />
      </svg>
      <div style={{ display: "flex", flexDirection: "column", lineHeight: 1, fontFamily: "var(--font-display)", color: c }}>
        <div style={{ fontSize: size * 0.62, letterSpacing: "0.04em", fontWeight: 400, fontStyle: "italic" }}>The Purple Chair</div>
        <div style={{ fontSize: size * 0.28, letterSpacing: "0.42em", fontFamily: "var(--font-sans)", textTransform: "uppercase", marginTop: 4, opacity: 0.7, fontWeight: 500 }}>Dubai · Worldwide</div>
      </div>
    </div>
  );
}

function Eyebrow({ children, white }) {
  return (
    <div style={{
      fontFamily: "var(--font-sans)",
      fontSize: 11,
      letterSpacing: "0.36em",
      textTransform: "uppercase",
      color: white ? "rgba(251,250,248,.7)" : "var(--muted)",
      fontWeight: 500,
    }}>{children}</div>
  );
}

function DisplayH({ children, size = 72, italic = false, style = {} }) {
  return (
    <h1 style={{
      fontFamily: "var(--font-display)",
      fontSize: size,
      fontWeight: 400,
      lineHeight: 1.04,
      letterSpacing: "-0.01em",
      margin: 0,
      fontStyle: italic ? "italic" : "normal",
      color: "var(--ink)",
      textWrap: "balance",
      ...style,
    }}>{children}</h1>
  );
}

function HairlineButton({ children, onClick, variant = "outline", style = {} }) {
  const base = {
    fontFamily: "var(--font-sans)",
    fontSize: 11,
    letterSpacing: "0.32em",
    textTransform: "uppercase",
    padding: "16px 28px",
    border: "1px solid",
    cursor: "pointer",
    transition: "all .25s ease",
    fontWeight: 500,
    display: "inline-flex",
    alignItems: "center",
    gap: 14,
    background: "transparent",
  };
  const variants = {
    outline: { borderColor: "var(--ink)", color: "var(--ink)" },
    solid: { borderColor: "var(--ink)", background: "var(--ink)", color: "var(--paper)" },
    plum: { borderColor: "var(--plum)", background: "var(--plum)", color: "var(--paper)" },
    ghost: { borderColor: "rgba(255,255,255,.6)", color: "white" },
  };
  return (
    <button onClick={onClick} className="hl-btn" style={{ ...base, ...variants[variant], ...style }}>
      {children}
      <span style={{ display: "inline-block", width: 24, height: 1, background: "currentColor" }}></span>
    </button>
  );
}

// ---------- NAV ----------

function Nav({ page, go, locale, setLocale, openEnquire }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const sc = document.querySelector(".tpc-scroll");
    if (!sc) return;
    const on = () => setScrolled(sc.scrollTop > 60);
    sc.addEventListener("scroll", on);
    return () => sc.removeEventListener("scroll", on);
  }, []);

  const links = [
    ["portfolio", "Portfolio"],
    ["weddings", "Weddings"],
    ["events", "Events"],
    ["brand-events", "Brand Events"],
    ["services", "Approach"],
    ["about", "Studio"],
    ["press", "Press"],
    ["contact", "Contact"],
  ];

  const onHome = page === "home";
  const dark = onHome && !scrolled;

  return (
    <header className="tpc-nav" style={{
      position: "sticky", top: 0, zIndex: 50,
      padding: "20px 56px",
      borderBottom: scrolled ? "1px solid var(--line)" : "1px solid transparent",
      background: scrolled ? "rgba(251,250,248,.92)" : (dark ? "transparent" : "var(--paper)"),
      backdropFilter: scrolled ? "blur(14px)" : "none",
      transition: "all .35s ease",
      display: "grid",
      gridTemplateColumns: "auto 1fr auto",
      alignItems: "center",
      gap: 40,
      color: dark ? "white" : "var(--ink)",
    }}>
      <button onClick={() => go("home")} style={{ background: "none", border: 0, padding: 0, cursor: "pointer" }}>
        <Mark size={22} white={dark} />
      </button>

      <nav style={{ display: "flex", justifyContent: "center", gap: 32 }}>
        {links.map(([key, label]) => (
          <button key={key} onClick={() => go(key)} className="tpc-navlink" style={{
            background: "none", border: 0, cursor: "pointer", padding: "6px 0",
            fontFamily: "var(--font-sans)", fontSize: 11, letterSpacing: "0.28em", textTransform: "uppercase",
            color: "inherit", fontWeight: 500, opacity: page === key ? 1 : 0.72,
            borderBottom: page === key ? "1px solid currentColor" : "1px solid transparent",
          }}>{label}</button>
        ))}
      </nav>

      <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
        <div style={{ display: "flex", gap: 6, fontFamily: "var(--font-sans)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", opacity: 0.7 }}>
          {["EN", "AR", "RU"].map(l => (
            <button key={l} onClick={() => setLocale(l)} style={{
              background: "none", border: 0, padding: "4px 6px", cursor: "pointer",
              color: "inherit", fontWeight: locale === l ? 700 : 400,
              textDecoration: locale === l ? "underline" : "none",
              textUnderlineOffset: 4,
            }}>{l}</button>
          ))}
        </div>
        <HairlineButton variant={dark ? "ghost" : "outline"} onClick={openEnquire} style={{ padding: "12px 20px", fontSize: 10 }}>
          Enquire
        </HairlineButton>
      </div>
    </header>
  );
}

// ---------- HOME ----------

function Home({ go, openEnquire, projects, heroVariant }) {
  // Pick hero by variant
  const heroImages = {
    "anantara": "media/wedding-anantara-qasr-al-sarab.webp",
    "desert-palm": "media/wedding-desert-palm-dubai.webp",
    "sintra": "media/wedding-destination-sintra-portugal.webp",
    "armani": "media/wedding-armani-hotel-sangeet-dubai.webp",
    "ritz": "media/wedding-ritz-carlton-difc-dubai.webp",
    "rove": "media/event-rove-home-jumeirah-beach-hotel.webp",
  };
  const heroSrc = heroImages[heroVariant] || heroImages["anantara"];

  const featured = projects.slice(0, 6);

  return (
    <main>
      {/* HERO */}
      <section style={{
        position: "relative", minHeight: "100vh",
        marginTop: "-78px", paddingTop: "78px",
        color: "white", overflow: "hidden",
      }}>
        <div style={{
          position: "absolute", inset: 0,
          backgroundImage: `url(${heroSrc})`,
          backgroundSize: "cover", backgroundPosition: "center",
          filter: "saturate(0.92)",
        }}></div>
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(15,14,16,.55) 0%, rgba(15,14,16,.15) 35%, rgba(15,14,16,.0) 60%, rgba(15,14,16,.55) 100%)" }}></div>

        <div style={{ position: "relative", padding: "120px 56px 80px", minHeight: "calc(100vh - 78px)", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
          <div style={{ maxWidth: 920 }}>
            <Eyebrow white>Dubai · Worldwide · Est. by Rasha Badran</Eyebrow>
            <h1 style={{
              fontFamily: "var(--font-display)",
              fontSize: "clamp(56px, 8.5vw, 140px)",
              fontWeight: 300, lineHeight: 0.98, letterSpacing: "-0.02em",
              margin: "32px 0 0", color: "white",
              textWrap: "balance",
            }}>
              Bespoke event design,<br/>
              <span style={{ fontStyle: "italic", fontWeight: 300 }}>tasteful and timeless.</span>
            </h1>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "end", gap: 40 }}>
            <div style={{ maxWidth: 380 }}>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: 14, lineHeight: 1.6, color: "rgba(255,255,255,.85)", fontWeight: 300, margin: 0 }}>
                A full-service design house for luxury weddings, social events and brand activations — known for minimalist, cohesive design and quiet, considered production.
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 14 }}>
              <Eyebrow white>Planning · Styling · Creative Direction</Eyebrow>
              <div style={{ width: 1, height: 56, background: "rgba(255,255,255,.5)" }}></div>
            </div>
            <div style={{ display: "flex", gap: 12, justifyContent: "flex-end" }}>
              <HairlineButton variant="ghost" onClick={() => go("portfolio")}>View Portfolio</HairlineButton>
              <HairlineButton variant="ghost" onClick={openEnquire}>Request a Proposal</HairlineButton>
            </div>
          </div>
        </div>
      </section>

      {/* INTRO / MANIFESTO */}
      <section style={{ padding: "160px 56px 120px", background: "var(--paper)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80, maxWidth: 1400, margin: "0 auto" }}>
          <div>
            <Eyebrow>01 — The Studio</Eyebrow>
          </div>
          <div>
            <DisplayH size={56}>
              A boutique founded by the <em>Badran sisters</em> — designing the moments that become the photographs, the toasts, the memories.
            </DisplayH>
            <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64 }}>
              <div>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: 15, lineHeight: 1.7, color: "var(--text)", fontWeight: 300, margin: 0 }}>
                  We are an editorially-led design house based in Dubai. Our work begins with conversation — a careful brief, a real point of view — and ends with an event that feels effortless, considered, and unmistakeably yours.
                </p>
              </div>
              <div>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: 15, lineHeight: 1.7, color: "var(--text)", fontWeight: 300, margin: 0 }}>
                  We work across weddings, social occasions, and brand activations — for private clients and luxury Maisons. Bespoke by definition; no template, no public price list.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* THREE ARMS */}
      <section style={{ padding: "40px 56px 120px", background: "var(--paper)" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto" }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28 }}>
            {[
              { key: "weddings", num: "i.", title: "Weddings", desc: "Intimate ceremonies and multi-day celebrations across the UAE and abroad.", img: "media/wedding-vida-umm-al-quwain-beach.webp" },
              { key: "events", num: "ii.", title: "Events & Social", desc: "Milestone celebrations, private dinners and styled gatherings.", img: "media/event-farm-event.webp" },
              { key: "brand-events", num: "iii.", title: "Brand Events", desc: "Elevated brand experiences, activations and production for luxury Maisons.", img: "media/event-bulgari-ramadan-majlis-dubai.webp" },
            ].map(t => (
              <button key={t.key} onClick={() => go(t.key)} className="tpc-tile" style={{
                background: "var(--paper)", border: 0, padding: 0, cursor: "pointer", textAlign: "left",
                display: "block",
              }}>
                <div style={{ aspectRatio: "4/5", overflow: "hidden", background: "var(--mist)" }}>
                  <img src={t.img} style={{ width: "100%", height: "100%", objectFit: "cover", transition: "transform .8s ease" }} alt={t.title}/>
                </div>
                <div style={{ paddingTop: 22, display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 16, alignItems: "baseline" }}>
                  <span style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 22, color: "var(--muted)" }}>{t.num}</span>
                  <div>
                    <DisplayH size={32}>{t.title}</DisplayH>
                    <p style={{ fontFamily: "var(--font-sans)", fontSize: 14, lineHeight: 1.6, color: "var(--muted)", fontWeight: 300, margin: "10px 0 0", maxWidth: 360 }}>{t.desc}</p>
                  </div>
                  <span style={{ fontFamily: "var(--font-sans)", fontSize: 18, color: "var(--ink)" }}>→</span>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* FEATURED WORK */}
      <section style={{ padding: "120px 56px", background: "var(--mist)" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", alignItems: "end", gap: 40, marginBottom: 80 }}>
            <div>
              <Eyebrow>02 — Selected Work</Eyebrow>
              <DisplayH size={56} style={{ marginTop: 24 }}>
                Quiet, considered <em>productions</em> — across the desert, the dunes and the diaspora.
              </DisplayH>
            </div>
            <div style={{ justifySelf: "end" }}>
              <HairlineButton onClick={() => go("portfolio")}>The Full Portfolio</HairlineButton>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 24, gridAutoFlow: "row dense" }}>
            {featured.map((p, i) => {
              // Editorial irregular grid
              const layouts = [
                { col: "span 7", aspect: "4/3" },
                { col: "span 5", aspect: "3/4" },
                { col: "span 4", aspect: "3/4" },
                { col: "span 8", aspect: "16/10" },
                { col: "span 5", aspect: "3/4" },
                { col: "span 7", aspect: "4/3" },
              ];
              const L = layouts[i % layouts.length];
              return (
                <article key={p.id} onClick={() => go(`project:${p.id}`)} style={{
                  gridColumn: L.col, cursor: "pointer",
                }} className="tpc-card">
                  <div style={{ aspectRatio: L.aspect, overflow: "hidden", background: "var(--paper)" }}>
                    <img src={p.image} alt={p.title} style={{ width: "100%", height: "100%", objectFit: "cover", transition: "transform .8s ease" }}/>
                  </div>
                  <div style={{ paddingTop: 18, display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 24 }}>
                    <div>
                      <Eyebrow>{p.category} · {p.location}</Eyebrow>
                      <h3 style={{ fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 400, margin: "10px 0 0", color: "var(--ink)" }}>{p.title}</h3>
                    </div>
                    <span style={{ fontFamily: "var(--font-sans)", fontSize: 10, letterSpacing: "0.3em", color: "var(--muted)" }}>0{i+1} / {String(featured.length).padStart(2,"0")}</span>
                  </div>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      {/* PHILOSOPHY QUOTE */}
      <section style={{ padding: "200px 56px", background: "var(--paper)", textAlign: "center" }}>
        <div style={{ maxWidth: 1100, margin: "0 auto" }}>
          <Eyebrow>03 — Philosophy</Eyebrow>
          <DisplayH size={64} italic style={{ marginTop: 40, fontWeight: 300 }}>
            "Known for our minimalist and cohesive designs — tasteful and timeless events."
          </DisplayH>
          <div style={{ marginTop: 48, fontFamily: "var(--font-sans)", fontSize: 11, letterSpacing: "0.32em", textTransform: "uppercase", color: "var(--muted)" }}>
            — The Purple Chair
          </div>
        </div>
      </section>

      {/* PRESS */}
      <section style={{ padding: "100px 56px", background: "var(--noir)", color: "white" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 56 }}>
            <Eyebrow white>04 — As Featured In</Eyebrow>
            <button onClick={() => go("press")} style={{ background: "none", border: 0, color: "white", fontFamily: "var(--font-sans)", fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", cursor: "pointer" }}>Read coverage →</button>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 40, alignItems: "center" }}>
            {window.PRESS.map(p => (
              <div key={p.name} style={{ textAlign: "center", opacity: p.confirmed ? 1 : 0.4 }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontStyle: "italic", fontWeight: 300, color: "white" }}>{p.name}</div>
                <div style={{ fontFamily: "var(--font-sans)", fontSize: 9, letterSpacing: "0.3em", textTransform: "uppercase", marginTop: 8, opacity: 0.6 }}>{p.note}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ENQUIRE CTA */}
      <EnquireBand openEnquire={openEnquire}/>

      <Footer go={go}/>
    </main>
  );
}

// ---------- PORTFOLIO ----------

function Portfolio({ go, projects, openEnquire }) {
  const [filter, setFilter] = useState("All");
  const cats = ["All", "Weddings", "Events & Social", "Brand Events"];
  const filtered = filter === "All" ? projects : projects.filter(p => p.category === filter);

  return (
    <main>
      <section style={{ padding: "120px 56px 60px", background: "var(--paper)" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto" }}>
          <Eyebrow>The Portfolio</Eyebrow>
          <DisplayH size={88} style={{ marginTop: 28, maxWidth: 1100 }}>
            Twenty-two productions, <em>across three disciplines.</em>
          </DisplayH>

          <div style={{ marginTop: 80, display: "flex", justifyContent: "space-between", alignItems: "baseline", borderTop: "1px solid var(--line)", paddingTop: 28 }}>
            <div style={{ display: "flex", gap: 8 }}>
              {cats.map(c => (
                <button key={c} onClick={() => setFilter(c)} style={{
                  fontFamily: "var(--font-sans)", fontSize: 11, letterSpacing: "0.28em", textTransform: "uppercase",
                  padding: "10px 18px", border: "1px solid", borderColor: filter === c ? "var(--ink)" : "var(--line)",
                  background: filter === c ? "var(--ink)" : "transparent",
                  color: filter === c ? "var(--paper)" : "var(--ink)",
                  cursor: "pointer", fontWeight: 500, transition: "all .25s",
                }}>{c}</button>
              ))}
            </div>
            <div style={{ fontFamily: "var(--font-sans)", fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "var(--muted)" }}>
              {filtered.length} {filtered.length === 1 ? "project" : "projects"}
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: "60px 56px 120px", background: "var(--paper)" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto" }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28, columnGap: 28, rowGap: 64 }}>
            {filtered.map((p, i) => (
              <article key={p.id} onClick={() => go(`project:${p.id}`)} style={{ cursor: "pointer" }} className="tpc-card">
                <div style={{ aspectRatio: "4/5", overflow: "hidden", background: "var(--mist)", position: "relative" }}>
                  <img src={p.image} alt={p.title} style={{ width: "100%", height: "100%", objectFit: "cover", transition: "transform .8s ease" }}/>
                  {p.permissionGated && (
                    <div style={{ position: "absolute", top: 14, left: 14, padding: "6px 10px", background: "rgba(15,14,16,.7)", color: "white", fontFamily: "var(--font-sans)", fontSize: 9, letterSpacing: "0.24em", textTransform: "uppercase" }}>
                      Permission pending
                    </div>
                  )}
                </div>
                <div style={{ paddingTop: 22 }}>
                  <Eyebrow>{p.category}</Eyebrow>
                  <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 400, margin: "12px 0 8px", color: "var(--ink)" }}>{p.title}</h3>
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--muted)", fontWeight: 300 }}>{p.venue} · {p.location}</div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <EnquireBand openEnquire={openEnquire}/>
      <Footer go={go}/>
    </main>
  );
}

// ---------- CASE STUDY ----------

function CaseStudy({ projectId, go, projects, openEnquire }) {
  const p = projects.find(x => x.id === projectId) || projects[0];
  const others = projects.filter(x => x.id !== p.id && x.category === p.category).slice(0, 3);

  // Build a fake gallery from other category images
  const galleryImages = [
    p.image,
    ...projects.filter(x => x.id !== p.id).slice(0, 5).map(x => x.image),
  ];

  return (
    <main>
      {/* Hero */}
      <section style={{ position: "relative", height: "92vh", marginTop: "-78px", color: "white" }}>
        <div style={{ position: "absolute", inset: 0, backgroundImage: `url(${p.image})`, backgroundSize: "cover", backgroundPosition: "center" }}></div>
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(15,14,16,.55) 0%, transparent 40%, rgba(15,14,16,.85) 100%)" }}></div>
        <div style={{ position: "relative", height: "100%", padding: "140px 56px 64px", display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
          <button onClick={() => go("portfolio")} style={{ background: "none", border: 0, color: "white", fontFamily: "var(--font-sans)", fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", cursor: "pointer", alignSelf: "flex-start", marginBottom: 32, opacity: 0.8 }}>← Back to Portfolio</button>
          <Eyebrow white>{p.category}</Eyebrow>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(56px, 8vw, 120px)", fontWeight: 300, letterSpacing: "-0.02em", lineHeight: 1, margin: "20px 0 0", color: "white", textWrap: "balance" }}>{p.title}</h1>
          <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 40, maxWidth: 900, borderTop: "1px solid rgba(255,255,255,.3)", paddingTop: 28 }}>
            {[["Venue", p.venue], ["Location", p.location], ["Year", p.year], ["Photography", p.photographer]].map(([k, v]) => (
              <div key={k}>
                <Eyebrow white>{k}</Eyebrow>
                <div style={{ marginTop: 10, fontFamily: "var(--font-display)", fontSize: 18, color: "white", fontStyle: "italic", fontWeight: 300 }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Concept */}
      <section style={{ padding: "140px 56px", background: "var(--paper)" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80 }}>
          <div>
            <Eyebrow>The Concept</Eyebrow>
            <div style={{ marginTop: 40, display: "flex", flexDirection: "column", gap: 24 }}>
              <div>
                <Eyebrow>Palette</Eyebrow>
                <div style={{ display: "flex", gap: 8, marginTop: 12 }}>
                  {p.palette.map((c, i) => (
                    <div key={i} style={{ width: 56, height: 56, background: c, border: "1px solid var(--line)" }}></div>
                  ))}
                </div>
              </div>
              <div>
                <Eyebrow>Disciplines</Eyebrow>
                <div style={{ display: "flex", gap: 8, marginTop: 12, flexWrap: "wrap" }}>
                  {p.tags.map(t => (
                    <span key={t} style={{ padding: "8px 14px", border: "1px solid var(--line)", fontFamily: "var(--font-sans)", fontSize: 10, letterSpacing: "0.24em", textTransform: "uppercase", color: "var(--ink)" }}>{t}</span>
                  ))}
                </div>
              </div>
            </div>
          </div>
          <div>
            <DisplayH size={56}>
              <em>"{p.concept}"</em>
            </DisplayH>
            <div style={{ marginTop: 56, columnCount: 2, columnGap: 56 }}>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: 15, lineHeight: 1.7, color: "var(--text)", fontWeight: 300, margin: "0 0 24px" }}>
                We began with the place itself — its geometry, its light, the hour the guests would arrive. The brief was answered first with restraint: a refined palette, a tight floral language, a single signature material drawn through the entire event.
              </p>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: 15, lineHeight: 1.7, color: "var(--text)", fontWeight: 300, margin: 0 }}>
                From there: tablescape, ceremony staging, transitions between moments, and the small private rituals that make a celebration feel singular. Planning, styling and on-the-day production were held in-house from concept through breakdown.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Gallery — editorial irregular */}
      <section style={{ padding: "20px 56px 120px", background: "var(--paper)" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto", display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 16 }}>
          <div style={{ gridColumn: "span 12", aspectRatio: "16/7", overflow: "hidden", background: "var(--mist)" }}>
            <img src={galleryImages[0]} style={{ width: "100%", height: "100%", objectFit: "cover" }} alt=""/>
          </div>
          <div style={{ gridColumn: "span 5", aspectRatio: "3/4", overflow: "hidden", background: "var(--mist)" }}>
            <img src={galleryImages[1]} style={{ width: "100%", height: "100%", objectFit: "cover" }} alt=""/>
          </div>
          <div style={{ gridColumn: "span 7", aspectRatio: "4/3", overflow: "hidden", background: "var(--mist)" }}>
            <img src={galleryImages[2]} style={{ width: "100%", height: "100%", objectFit: "cover" }} alt=""/>
          </div>
          <div style={{ gridColumn: "span 4", aspectRatio: "3/4", overflow: "hidden", background: "var(--mist)" }}>
            <img src={galleryImages[3]} style={{ width: "100%", height: "100%", objectFit: "cover" }} alt=""/>
          </div>
          <div style={{ gridColumn: "span 4", aspectRatio: "3/4", overflow: "hidden", background: "var(--mist)" }}>
            <img src={galleryImages[4]} style={{ width: "100%", height: "100%", objectFit: "cover" }} alt=""/>
          </div>
          <div style={{ gridColumn: "span 4", aspectRatio: "3/4", overflow: "hidden", background: "var(--mist)" }}>
            <img src={galleryImages[5] || galleryImages[0]} style={{ width: "100%", height: "100%", objectFit: "cover" }} alt=""/>
          </div>
        </div>
      </section>

      {/* Credits */}
      <section style={{ padding: "80px 56px", background: "var(--mist)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: 40 }}>
          {[
            ["Planning", "The Purple Chair"],
            ["Styling", "The Purple Chair"],
            ["Creative Direction", "The Purple Chair"],
            ["Photography", p.photographer + " — credit pending"],
          ].map(([k, v]) => (
            <div key={k}>
              <Eyebrow>{k}</Eyebrow>
              <div style={{ marginTop: 14, fontFamily: "var(--font-display)", fontSize: 22, fontStyle: "italic", fontWeight: 300 }}>{v}</div>
            </div>
          ))}
        </div>
      </section>

      {/* More work */}
      <section style={{ padding: "140px 56px", background: "var(--paper)" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 56 }}>
            <DisplayH size={48}>More <em>in this discipline</em></DisplayH>
            <HairlineButton onClick={() => go("portfolio")}>All Work</HairlineButton>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28 }}>
            {others.map(o => (
              <article key={o.id} onClick={() => go(`project:${o.id}`)} style={{ cursor: "pointer" }} className="tpc-card">
                <div style={{ aspectRatio: "4/5", overflow: "hidden", background: "var(--mist)" }}>
                  <img src={o.image} alt={o.title} style={{ width: "100%", height: "100%", objectFit: "cover", transition: "transform .8s ease" }}/>
                </div>
                <div style={{ paddingTop: 18 }}>
                  <Eyebrow>{o.category}</Eyebrow>
                  <h3 style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 400, margin: "10px 0 4px" }}>{o.title}</h3>
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: 12, color: "var(--muted)" }}>{o.location}</div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <EnquireBand openEnquire={openEnquire}/>
      <Footer go={go}/>
    </main>
  );
}

window.Nav = Nav;
window.Home = Home;
window.Portfolio = Portfolio;
window.CaseStudy = CaseStudy;
window.Eyebrow = Eyebrow;
window.DisplayH = DisplayH;
window.HairlineButton = HairlineButton;
window.Mark = Mark;
