// Al Bustan Palace case study + lightbox
const { useState: useStateC, useEffect: useEffectC, useCallback: useCallbackC } = React;

function CaseStudy({ onRoute, onEnquire, t }) {
  const [lightbox, setLightbox] = useStateC(null);

  return (
    <div data-screen-label="03 Case study — Al Bustan Palace">
      <CaseHero onRoute={onRoute} />
      <CaseMeta />
      <CaseNarrative chapter="Design" num="01"
        title="From a single conversation, a colour."
        body={[
          "The couple arrived with a Tuesday-evening conversation about Omani magnolia at her grandmother's house. From it, we drew a colour story — ivory, marble, the inside of a magnolia petal — and a structural idea: a ballroom that could pass from ceremony to dinner to after-party without ever feeling like it had been emptied and reset.",
          "Three concept renderings were drawn before we settled on the canopy form. Each was tested against the room's actual light, at two times of day, with a 1:50 scale model the couple visited twice."
        ]}
        images={[
          { src: "media/case-albustan-hero.webp", credit: "Varna Studios", caption: "Reception canopy — ivory silk and magnolia" },
          { src: "media/wedding-setup-3.webp", credit: "DEN Photo", caption: "Tabletop study, bone china and brass" },
        ]}
        onLightbox={setLightbox}
      />
      <CaseFullBleed src="media/wedding-eko-1.webp" credit="EKO Studios" caption="First dance — 1,400 hand-set candles" />
      <CaseNarrative chapter="Production" num="02" reverse
        title="Fourteen florists, thirty-six hours."
        body={[
          "The single hardest constraint was time. The ballroom released to us at 09:00 on the day before, and we needed the canopy, 42 dressed tables and 1,400 candles in place by 17:00. An in-house team of fourteen florists worked in three rotations.",
          "Production roles named on the run-of-show: Production Manager, Floral Designer, Event Designer, Operations Manager, Coordinators — the same titles we ship every project with. No subcontracted leads."
        ]}
        images={[
          { src: "media/wedding-setup-2.webp", credit: "DEN Photo", caption: "Load-in, T-minus 36 hours" },
          { src: "media/wedding-2.webp", credit: "Varna Studios", caption: "Aisle, day of" },
        ]}
        onLightbox={setLightbox}
      />
      <CaseStats />
      <CaseNarrative chapter="Management" num="03"
        title="Every detail accounted for."
        body={[
          "Forty-two travel itineraries were managed from our studio in Dubai for guests arriving from nine countries. A guest concierge sat in the hotel lobby from the morning of arrival until the morning after. Our run-of-show ran to ninety-seven cues; the couple saw three of them.",
          "Discretion is the work. The couple's parents thanked us by name; the guests would not have known we were there."
        ]}
        images={[
          { src: "media/wedding-4.webp", credit: "Varna Studios", caption: "Family welcome line" },
          { src: "media/wedding-5.webp", credit: "Varna Studios", caption: "Late evening pavilion" },
        ]}
        onLightbox={setLightbox}
      />
      <CaseGalleryGrid onLightbox={setLightbox} />
      <CaseCredits />
      <CaseCTA onEnquire={onEnquire} onRoute={onRoute} t={t} />

      {lightbox !== null && <Lightbox index={lightbox} onClose={() => setLightbox(null)} onSet={setLightbox} />}
    </div>
  );
}

function CaseHero({ onRoute }) {
  return (
    <section style={{ position: "relative", height: "100vh", minHeight: 720, overflow: "hidden", color: "var(--paper)" }}>
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: "url(media/case-albustan-hero.webp)",
        backgroundSize: "cover", backgroundPosition: "center",
      }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(16,12,10,0.55) 0%, rgba(16,12,10,0.25) 30%, rgba(16,12,10,0.85) 100%)" }} />
      <div className="container" style={{ position: "relative", height: "100%", display: "flex", flexDirection: "column", justifyContent: "space-between", paddingTop: 120, paddingBottom: 60 }}>
        <button onClick={() => onRoute("weddings")} className="btn-link" style={{ color: "var(--paper)", alignSelf: "flex-start" }}>
          <span className="arrow">←</span><span>All weddings</span>
        </button>
        <div>
          <div className="mono-tiny" style={{ marginBottom: 24, opacity: 0.85 }}>I · Wedding · Destination</div>
          <h1 className="serif" style={{
            fontSize: "clamp(68px, 11vw, 200px)", lineHeight: 0.92, fontWeight: 300,
            letterSpacing: "-0.03em", margin: "0 0 28px", maxWidth: 1100,
          }}>
            Marble &amp;<br /><em style={{ fontWeight: 300, color: "var(--accent-soft)" }}>Magnolia.</em>
          </h1>
          <div style={{ display: "flex", gap: 56, flexWrap: "wrap", paddingTop: 28, borderTop: "1px solid rgba(255,255,255,0.2)", maxWidth: 880, color: "rgba(255,255,255,0.85)" }}>
            <Meta label="Venue" value="Al Bustan Palace" />
            <Meta label="Location" value="Muscat, Oman" />
            <Meta label="Scale" value="420 guests" />
            <Meta label="Year" value="2023" />
            <Meta label="Photographer" value="Varna Studios" />
          </div>
        </div>
      </div>
    </section>
  );
}

function Meta({ label, value, dark }) {
  return (
    <div>
      <div className="mono-tiny" style={{ color: dark ? "var(--muted)" : "rgba(255,255,255,0.6)", marginBottom: 6 }}>{label}</div>
      <div className="serif" style={{ fontSize: 18, fontStyle: "italic", color: dark ? "var(--ink)" : "var(--paper)" }}>{value}</div>
    </div>
  );
}

function CaseMeta() {
  const r = useReveal();
  return (
    <section ref={r} className="reveal" style={{ padding: "var(--space-block) 0", borderBottom: "1px solid var(--line)" }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80 }}>
        <SectionEyebrow label="The brief" num="00" />
        <div>
          <p className="serif" style={{ fontSize: "clamp(24px, 2.6vw, 36px)", lineHeight: 1.4, fontWeight: 300, margin: "0 0 32px", color: "var(--ink)", textWrap: "balance", letterSpacing: "-0.005em" }}>
            "A three-day destination wedding that doesn't feel like a destination wedding — that feels like a family home, just larger, just more candlelit, just outside Muscat."
          </p>
          <div className="mono-tiny" style={{ color: "var(--muted)" }}>— The couple, in their first meeting</div>
        </div>
      </div>
    </section>
  );
}

function CaseNarrative({ chapter, num, title, body, images, reverse, onLightbox }) {
  const r = useReveal();
  return (
    <section ref={r} className="reveal" style={{ padding: "var(--space-section) 0" }}>
      <div className="container" style={{
        display: "grid", gridTemplateColumns: reverse ? "1.1fr 1fr" : "1fr 1.1fr", gap: 80, alignItems: "flex-start",
      }}>
        <div style={{ order: reverse ? 2 : 1, position: "sticky", top: 120 }}>
          <div className="mono-tiny" style={{ color: "var(--accent)", marginBottom: 18 }}>{num} · Phase {chapter}</div>
          <h2 className="serif" style={{
            fontSize: "clamp(36px, 4.6vw, 60px)", lineHeight: 1.05, fontWeight: 300, margin: "0 0 32px", letterSpacing: "-0.02em",
          }}>{title}</h2>
          {body.map((p, i) => (
            <p key={i} style={{ fontSize: 16, lineHeight: 1.75, color: i === 0 ? "var(--ink)" : "var(--muted)", margin: "0 0 18px", maxWidth: 480 }}>{p}</p>
          ))}
        </div>
        <div style={{ order: reverse ? 1 : 2, display: "grid", gap: 24 }}>
          {images.map((img, i) => (
            <button key={i} onClick={() => onLightbox(GALLERY_LOOKUP[img.src] ?? 0)}
              style={{ display: "block", textAlign: "left", cursor: "zoom-in", padding: 0, background: "transparent" }}>
              <CreditedImage src={img.src} alt={img.caption} credit={img.credit} ratio={i === 0 ? "4/5" : "5/4"} />
              <div style={{ fontSize: 13, color: "var(--muted)", letterSpacing: "0.02em", marginTop: 10, paddingLeft: 2 }}>
                <em className="serif" style={{ fontStyle: "italic" }}>{img.caption}</em>
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

function CaseFullBleed({ src, credit, caption }) {
  return (
    <section style={{ position: "relative", padding: 0 }}>
      <div style={{ position: "relative", height: "75vh", minHeight: 520, overflow: "hidden" }}>
        <img src={src} alt={caption} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
        <div style={{
          position: "absolute", bottom: 24, left: 24,
          color: "rgba(255,255,255,0.9)", fontSize: 12, letterSpacing: "0.16em",
        }}>© {credit}</div>
        <div style={{
          position: "absolute", bottom: 24, right: 24, maxWidth: 380, textAlign: "right",
        }}>
          <div className="serif" style={{ color: "var(--paper)", fontSize: 22, fontStyle: "italic", lineHeight: 1.3, textShadow: "0 2px 12px rgba(0,0,0,0.5)" }}>{caption}</div>
        </div>
      </div>
    </section>
  );
}

function CaseStats() {
  const r = useReveal();
  const stats = [
    ["420", "guests"], ["3", "days"], ["1,400", "candles"], ["9", "countries"], ["42", "tables"], ["97", "run-of-show cues"],
  ];
  return (
    <section ref={r} className="reveal" style={{ padding: "var(--space-section) 0", background: "var(--noir)", color: "var(--paper)" }}>
      <div className="container">
        <SectionEyebrow label="By the numbers" num="—" />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 32, marginTop: 24 }}>
          {stats.map(([n, l]) => (
            <div key={l}>
              <div className="serif" style={{
                fontSize: "clamp(46px, 5vw, 88px)", lineHeight: 1, fontWeight: 300,
                letterSpacing: "-0.02em", color: "var(--paper)", marginBottom: 12,
              }}>{n}</div>
              <div className="mono-tiny" style={{ color: "rgba(255,255,255,0.55)" }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CaseGalleryGrid({ onLightbox }) {
  const r = useReveal();
  return (
    <section ref={r} className="reveal" style={{ padding: "var(--space-section) 0" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 56 }}>
          <div>
            <SectionEyebrow label="Gallery" num="04" />
            <h2 className="serif" style={{ fontSize: "clamp(36px, 4.4vw, 56px)", lineHeight: 1.02, fontWeight: 300, margin: 0, letterSpacing: "-0.02em" }}>
              Eight frames.
            </h2>
          </div>
          <div className="mono-tiny" style={{ color: "var(--muted)" }}>Click any image to enlarge</div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 16 }}>
          {CASE_GALLERY.map((g, i) => {
            const spans = [
              { col: "span 7", row: "span 2", ratio: "4/3" },
              { col: "span 5", row: "span 1", ratio: "1/1" },
              { col: "span 5", row: "span 1", ratio: "5/4" },
              { col: "span 4", row: "span 1", ratio: "3/4" },
              { col: "span 4", row: "span 1", ratio: "3/4" },
              { col: "span 4", row: "span 1", ratio: "3/4" },
              { col: "span 6", row: "span 1", ratio: "4/3" },
              { col: "span 6", row: "span 1", ratio: "4/3" },
            ];
            const s = spans[i] || spans[0];
            return (
              <button key={i} onClick={() => onLightbox(i)} style={{
                gridColumn: s.col, padding: 0, background: "transparent", cursor: "zoom-in",
              }}>
                <div style={{ position: "relative", aspectRatio: s.ratio, overflow: "hidden", background: "var(--ivory)" }}>
                  <img src={g.src} alt={g.caption} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                </div>
              </button>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function CaseCredits() {
  return (
    <section style={{ padding: "var(--space-block) 0", background: "var(--ivory)" }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80 }}>
        <SectionEyebrow label="Credits" num="05" />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
          {[
            ["Design & planning", "Carousel Events"],
            ["Creative direction", "Zainab Alsalih"],
            ["Floral", "Carousel Floral (in-house)"],
            ["Photography", "Varna Studios"],
            ["Stationery", "Atelier P."],
            ["Catering", "Al Bustan Palace"],
            ["Music", "Live ensemble · Vienna"],
            ["Couple consent", "Cleared · names withheld"],
          ].map(([k, v]) => (
            <div key={k}>
              <div className="mono-tiny" style={{ color: "var(--muted)", marginBottom: 6 }}>{k}</div>
              <div className="serif" style={{ fontSize: 18, fontStyle: "italic" }}>{v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CaseCTA({ onEnquire, onRoute, t }) {
  return (
    <section style={{ padding: "var(--space-section) 0", borderTop: "1px solid var(--line)" }}>
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 800, margin: "0 auto" }}>
          <SectionEyebrow label="Plan a similar wedding" num="06" />
          <h2 className="serif" style={{ fontSize: "clamp(40px, 5.4vw, 76px)", lineHeight: 1.05, fontWeight: 300, margin: "0 0 28px", letterSpacing: "-0.02em" }}>
            Yours will be its own.
          </h2>
          <p style={{ fontSize: 17, color: "var(--muted)", maxWidth: 540, margin: "0 auto 40px", lineHeight: 1.7 }}>
            Tell us about your wedding and a designer will be in touch personally. Three rounds of design conversations, no obligation.
          </p>
          <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={() => onEnquire("wedding")}>{t.requestProposal}<Arrow /></button>
            <button className="btn btn-ghost" onClick={() => onRoute("weddings")}>More weddings<Arrow /></button>
          </div>
        </div>
      </div>
    </section>
  );
}

const GALLERY_LOOKUP = Object.fromEntries(CASE_GALLERY.map((g, i) => [g.src, i]));

function Lightbox({ index, onClose, onSet }) {
  const total = CASE_GALLERY.length;
  const item = CASE_GALLERY[index];
  const prev = () => onSet((index - 1 + total) % total);
  const next = () => onSet((index + 1) % total);
  useEffectC(() => {
    document.body.style.overflow = "hidden";
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      else if (e.key === "ArrowLeft") prev();
      else if (e.key === "ArrowRight") next();
    };
    window.addEventListener("keydown", onKey);
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [index]);

  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, zIndex: 220,
      background: "rgba(8,6,4,0.96)",
      display: "flex", flexDirection: "column", padding: "32px 48px",
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", color: "var(--paper)", marginBottom: 24 }}>
        <div className="mono-tiny" style={{ opacity: 0.7 }}>{String(index + 1).padStart(2, "0")} / {String(total).padStart(2, "0")} · {item.chapter}</div>
        <button onClick={(e) => { e.stopPropagation(); onClose(); }} aria-label="Close" style={{ color: "var(--paper)", fontSize: 22 }}>×</button>
      </div>
      <div onClick={(e) => e.stopPropagation()} style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", position: "relative" }}>
        <button onClick={prev} aria-label="Previous" style={{
          position: "absolute", left: -16, width: 56, height: 56, borderRadius: 999,
          border: "1px solid rgba(255,255,255,0.2)", color: "var(--paper)",
          display: "flex", alignItems: "center", justifyContent: "center",
        }}>‹</button>
        <img src={item.src} alt={item.caption} style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }} />
        <button onClick={next} aria-label="Next" style={{
          position: "absolute", right: -16, width: 56, height: 56, borderRadius: 999,
          border: "1px solid rgba(255,255,255,0.2)", color: "var(--paper)",
          display: "flex", alignItems: "center", justifyContent: "center",
        }}>›</button>
      </div>
      <div onClick={(e) => e.stopPropagation()} style={{ paddingTop: 20, color: "rgba(255,255,255,0.7)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div className="serif" style={{ fontSize: 16, fontStyle: "italic" }}>{item.caption}</div>
        <div className="mono-tiny" style={{ opacity: 0.5 }}>Use ← → to navigate</div>
      </div>
    </div>
  );
}

Object.assign(window, { CaseStudy });