/* global React, IK */
// Real-wedding components: filterable grid + case-study deep-dive
const { useState, useMemo } = React;

function ConsentRibbon({ lang }) {
  const c = window.__ikLang === "ar" ? IK.t.ar.consent : IK.t.en.consent;
  return (
    <span className="consent-ribbon" title="Per design brief: consent + photographer credit gated">
      {c}
    </span>
  );
}

function WeddingCard({ w, lang, onOpen, size = "md" }) {
  const ratio = size === "tall" ? "3 / 4" : size === "wide" ? "5 / 3" : "4 / 5";
  return (
    <button
      type="button"
      onClick={() => onOpen(w.slug)}
      className="cardlift imghover"
      data-screen-label={`wedding-card-${w.slug}`}
      style={{
        appearance: "none", background: "transparent", border: 0,
        textAlign: "left", padding: 0, cursor: "pointer", color: "inherit",
        display: "flex", flexDirection: "column", gap: 18,
      }}
    >
      <div style={{ position: "relative", overflow: "hidden", aspectRatio: ratio, background: "var(--blush)" }}>
        <img src={w.hero} alt="" loading="lazy"
          style={{ width: "100%", height: "100%", objectFit: "cover" }} />
        <div style={{
          position: "absolute", left: 16, top: 16,
          background: "rgba(251,247,242,.92)", padding: "6px 10px",
          fontSize: 10, letterSpacing: ".2em", textTransform: "uppercase", fontWeight: 600,
          color: "var(--ink)",
        }}>{w.destinationLabel[lang]} · {w.year}</div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        <h3 className="display" style={{ fontSize: 26, lineHeight: 1.1 }}>{w.title[lang]}</h3>
        <p className="cap" style={{ textTransform: "none", letterSpacing: 0, fontFamily: "var(--f-body)", fontSize: 14, color: "var(--muted)" }}>
          {w.venue} · {w.functions.slice(0,3).join(" · ")}
        </p>
        <div style={{ marginTop: 4 }}><ConsentRibbon /></div>
      </div>
    </button>
  );
}

function RealWeddingsSection({ lang, onOpen }) {
  const [filter, setFilter] = useState("all");
  const T = IK.t[lang];
  const dests = [{ slug: "all", label: { en: "All", ar: "الكل" } }, ...IK.destinations];
  const filtered = useMemo(
    () => filter === "all" ? IK.weddings : IK.weddings.filter(w => w.destination === filter),
    [filter]
  );

  return (
    <section id="real-weddings" data-screen-label="section-real-weddings" style={{ background: "var(--paper)" }}>
      <div className="wrap">
        <header style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, marginBottom: 56, alignItems: "end" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}><span className="rule" /> &nbsp; {T.realEyebrow}</div>
            <h2 className="display balance" style={{ fontSize: "clamp(40px, 5.6vw, 76px)", whiteSpace: "pre-line" }}>
              {T.realTitle}
            </h2>
          </div>
          <p className="pretty" style={{ color: "var(--muted)", maxWidth: 460, fontSize: 16, lineHeight: 1.7 }}>
            {T.realSub}
          </p>
        </header>

        {/* Filter chips */}
        <div role="tablist" aria-label="Filter weddings by destination"
          style={{ display: "flex", flexWrap: "wrap", gap: 10, marginBottom: 44 }}>
          {dests.map(d => (
            <button key={d.slug} className="chip"
              aria-pressed={filter === d.slug}
              onClick={() => setFilter(d.slug)}>
              {d.label[lang]}
            </button>
          ))}
        </div>

        {/* Editorial grid: irregular spans */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(12, 1fr)",
          gap: 28,
        }}>
          {filtered.map((w, i) => {
            const span = (i % 5 === 0) ? 7 : (i % 5 === 1) ? 5 : (i % 5 === 2) ? 4 : (i % 5 === 3) ? 4 : 4;
            const size = span === 7 ? "wide" : span === 5 ? "tall" : "md";
            return (
              <div key={w.slug} style={{ gridColumn: `span ${span}` }}>
                <WeddingCard w={w} lang={lang} onOpen={onOpen} size={size} />
              </div>
            );
          })}
        </div>

        <div style={{ marginTop: 64, display: "flex", justifyContent: "center" }}>
          <a className="btn btn-ghost-ink" href="#" onClick={e => e.preventDefault()}>
            {T.seeAll} <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

// Case-study deep dive
function CaseStudy({ slug, onClose, lang }) {
  const w = IK.weddings.find(x => x.slug === slug);
  const [lightbox, setLightbox] = useState(null);
  if (!w) return null;
  const T = IK.t[lang];

  return (
    <div data-screen-label={`case-study-${slug}`} style={{
      position: "fixed", inset: 0, zIndex: 70,
      background: "var(--paper)", overflow: "auto",
      animation: "fadeUp .35s cubic-bezier(.2,.7,.2,1) both",
    }}>
      {/* top bar */}
      <div style={{
        position: "sticky", top: 0, zIndex: 5,
        display: "flex", justifyContent: "space-between", alignItems: "center",
        padding: "20px 40px",
        background: "rgba(251,247,242,.92)", backdropFilter: "blur(12px)",
        borderBottom: "1px solid var(--line)",
      }}>
        <button onClick={onClose} className="btn btn-text" style={{ background: "transparent" }}>
          ← Back to portfolio
        </button>
        <span className="cap">Case study · {w.year}</span>
        <a className="btn btn-ghost-ink" href="#contact" onClick={onClose} style={{ padding: "10px 18px", fontSize: 11 }}>
          Plan yours <span className="arrow">→</span>
        </a>
      </div>

      {/* Hero */}
      <div style={{ position: "relative", height: "78vh", minHeight: 560, overflow: "hidden" }}>
        <img src={w.hero} alt=""
          style={{ width: "100%", height: "100%", objectFit: "cover" }} />
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(180deg, rgba(14,12,11,.18) 0%, rgba(14,12,11,.0) 35%, rgba(14,12,11,.5) 100%)",
        }} />
        <div className="wrap" style={{
          position: "absolute", inset: 0,
          display: "flex", flexDirection: "column", justifyContent: "flex-end",
          paddingBottom: 56, color: "var(--paper)",
        }}>
          <div className="eyebrow" style={{ color: "rgba(251,247,242,.78)", marginBottom: 20 }}>
            <span className="rule" /> &nbsp; A wedding story
          </div>
          <h1 className="display balance" style={{ fontSize: "clamp(42px, 7vw, 100px)", color: "var(--paper)", maxWidth: 1100 }}>
            {w.title[lang]}
          </h1>
          <p className="cap" style={{ color: "rgba(251,247,242,.7)", marginTop: 18 }}>
            {w.destinationLabel[lang]} · {w.venue} · {w.year}
          </p>
        </div>
      </div>

      {/* Meta row */}
      <div className="wrap" style={{ padding: "56px 0 24px" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32,
          borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)",
          padding: "28px 0",
        }}>
          {[
            ["Destination", w.destinationLabel[lang]],
            ["Venue", w.venue],
            ["Functions", w.functions.join(" · ")],
            ["Guest count", w.guestBand],
          ].map(([k, v]) => (
            <div key={k} style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              <span className="cap">{k}</span>
              <span className="display" style={{ fontSize: 22, lineHeight: 1.2 }}>{v}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Narrative */}
      <div className="wrap-sm" style={{ padding: "40px 0 80px" }}>
        <p className="display pretty" style={{ fontSize: "clamp(22px, 2.2vw, 30px)", lineHeight: 1.45, color: "var(--ink)" }}>
          {w.excerpt[lang]} A celebration is rarely about one evening — it's about the small kindnesses
          that make a week feel like one long, slow exhale. We held the calendar, the budget, the difficult
          conversation about cousins; the couple held everything else.
        </p>

        <div style={{ marginTop: 36, display: "flex", flexWrap: "wrap", gap: 12 }}>
          {w.functions.map(f => (
            <span key={f} style={{
              padding: "8px 14px", border: "1px solid var(--rose)", color: "var(--rose-deep)",
              fontSize: 11, letterSpacing: ".22em", textTransform: "uppercase", borderRadius: 999, fontWeight: 600,
            }}>{f}</span>
          ))}
        </div>
      </div>

      {/* Gallery */}
      <div className="wrap" style={{ paddingBottom: 64 }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 18 }}>
          {w.gallery.map((src, i) => {
            const span = i === 0 ? 6 : (i % 3 === 1) ? 4 : 2;
            const ratio = span === 6 ? "16 / 9" : span === 4 ? "5 / 4" : "3 / 4";
            return (
              <button key={i} type="button"
                onClick={() => setLightbox(src)}
                className="imghover"
                style={{
                  gridColumn: `span ${span}`, padding: 0, border: 0, background: "var(--blush)",
                  aspectRatio: ratio, overflow: "hidden", cursor: "zoom-in",
                }}>
                <img src={src} alt="" loading="lazy"
                  style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              </button>
            );
          })}
        </div>

        {/* Photographer credit + consent */}
        <div style={{
          marginTop: 36, padding: "20px 24px",
          background: "var(--blush)",
          display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16,
        }}>
          <span className="cap">Photography credit · {w.photographer}</span>
          <ConsentRibbon />
        </div>
      </div>

      {/* CTA band */}
      <div className="noir" style={{ padding: "80px 0" }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 40, alignItems: "center" }}>
          <h3 className="display balance" style={{ fontSize: "clamp(34px, 4vw, 56px)", color: "var(--paper)" }}>
            Plan a wedding like this — <em className="ikigai" style={{ color: "#E5C4A4" }}>quietly,</em> &nbsp;over many evenings.
          </h3>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <a className="btn btn-rose" href="#contact" onClick={onClose}>{T.enquire} <span className="arrow">→</span></a>
            <a className="btn btn-ghost-paper" href="https://wa.me/971552873665" target="_blank" rel="noreferrer">WhatsApp</a>
          </div>
        </div>
      </div>

      {/* Lightbox */}
      {lightbox && (
        <div className="lightbox-bg" onClick={() => setLightbox(null)} role="dialog" aria-modal="true">
          <img src={lightbox} alt="" style={{ maxWidth: "92vw", maxHeight: "92vh", objectFit: "contain" }} />
          <button onClick={() => setLightbox(null)} className="btn btn-ghost-paper"
            style={{ position: "fixed", top: 24, right: 24 }}>Close ✕</button>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { RealWeddingsSection, CaseStudy, ConsentRibbon });