/* JAM — Real Weddings index + Case Study detail */

function RealWeddingsPage({ setRoute, openWedding }) {
  const D = window.JAM;
  const initial = window.__JAMFilter || "all";
  const [filter, setFilter] = useState(initial);
  useEffect(() => { if (window.__JAMFilter) { window.__JAMFilter = null; } }, []);

  const filtered = useMemo(() => (
    filter === "all" ? D.weddings : D.weddings.filter(w => w.tradition === filter)
  ), [filter]);

  // Counts per tradition
  const counts = useMemo(() => {
    const c = { all: D.weddings.length };
    D.traditions.forEach(t => { c[t.id] = D.weddings.filter(w => w.tradition === t.id).length; });
    return c;
  }, []);

  // Span layout — varied sizes by index
  const layoutFor = (idx, len) => {
    const patterns = ["wcard-l", "wcard-r", "wcard-m", "wcard-m", "wcard-l", "wcard-r"];
    return patterns[idx % patterns.length];
  };

  return (
    <div className="page-enter">
      {/* Header */}
      <section style={{ padding: "100px 0 40px" }}>
        <div className="wrap">
          <span className="eyebrow eyebrow-rose">Real Weddings · 2022–2024</span>
          <h1 className="display" style={{ fontSize: "clamp(48px, 6vw, 96px)", fontWeight: 300, margin: "16px 0 24px", lineHeight: 1.02, maxWidth: "18ch" }}>
            Real couples. <em className="display-italic" style={{ color: "var(--primary-ink)" }}>Real</em> rooms.<br/> Told in full.
          </h1>
          <p className="lead" style={{ maxWidth: "62ch" }}>
            Each wedding below is a structured story — tradition, venue, functions covered,
            guest band, year, photographer credit and the design moves we made. Use the filter
            to see weddings by tradition.
          </p>
          <div style={{ marginTop: 22 }}>
            <ConsentNote text="Demo imagery — live site shows weddings with written couple consent and photographer credit" />
          </div>
        </div>
      </section>

      {/* Filter */}
      <div className="wrap">
        <div className="filter-bar">
          <button className={`filter-chip ${filter==="all"?"on":""}`} onClick={()=>setFilter("all")}>
            All traditions <span className="filter-count">({counts.all})</span>
          </button>
          {D.traditions.map(t => (
            <button key={t.id} className={`filter-chip ${filter===t.id?"on":""}`} onClick={()=>setFilter(t.id)}>
              {t.label} <span className="filter-count">({counts[t.id] || 0})</span>
            </button>
          ))}
        </div>
      </div>

      {/* Grid */}
      <section>
        <div className="wrap">
          <div className="wedding-grid">
            {filtered.map((w, i) => (
              <article key={w.id} className={`wcard ${layoutFor(i, filtered.length)}`} onClick={() => openWedding(w.id)}>
                <div className="img">
                  <img src={w.cover} alt={w.title} />
                </div>
                <div className="meta-row">
                  <span className="tradition">{w.traditionLabel}</span>
                  <span className="year">{w.year} · {w.guestBand}</span>
                </div>
                <div className="title">{w.title}</div>
                <div className="venue">{w.venue} · {w.city}</div>
              </article>
            ))}
          </div>
          {filtered.length === 0 && (
            <div style={{ padding: "120px 0", textAlign: "center", color: "var(--muted)" }}>
              <Lotus size={28} />
              <p className="display" style={{ fontSize: 28, fontWeight: 300, marginTop: 18 }}>No stories published yet in this tradition.</p>
              <p style={{ color: "var(--muted)" }}>More case studies in publication — pending consent.</p>
            </div>
          )}
        </div>
      </section>

      {/* CTA */}
      <section style={{ background: "var(--surface)", padding: "80px 0", borderTop: "1px solid var(--border)", marginTop: 80 }}>
        <div className="wrap" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 24 }}>
          <h3 className="display" style={{ fontSize: 36, fontWeight: 300, margin: 0, maxWidth: "20ch" }}>
            Imagining yours? <em className="display-italic" style={{ color: "var(--primary-ink)" }}>Let's talk.</em>
          </h3>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <a className="btn btn-rose" href="#/contact" onClick={() => setRoute("contact")}>Book a consultation <span>→</span></a>
            <a className="btn btn-ghost" href={window.JAM.brand.whatsapp}>WhatsApp ↗</a>
          </div>
        </div>
      </section>
    </div>
  );
}


function CaseStudyPage({ weddingId, setRoute, openWedding }) {
  const D = window.JAM;
  const w = D.weddings.find(x => x.id === weddingId) || D.weddings[0];
  const [lbIndex, setLbIndex] = useState(null);

  const related = D.weddings.filter(x => x.id !== w.id).slice(0, 3);

  return (
    <div className="page-enter">
      {/* Breadcrumb */}
      <div className="wrap" style={{ paddingTop: 32, paddingBottom: 24 }}>
        <p className="meta">
          <a href="#/real-weddings" onClick={() => setRoute("real-weddings")} style={{ borderBottom: "1px solid var(--border-strong)", paddingBottom: 2 }}>Real Weddings</a>
          &nbsp; / &nbsp; {w.traditionLabel}
        </p>
      </div>

      {/* Hero */}
      <section style={{ marginBottom: 56 }}>
        <div className="wrap">
          <div className="cs-hero">
            <img src={w.cover} alt={w.title} />
          </div>
        </div>
      </section>

      {/* Title block */}
      <section style={{ paddingBottom: 56 }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 60, alignItems: "end" }}>
          <div>
            <span className="eyebrow eyebrow-rose">{w.traditionLabel} · {w.year}</span>
            <h1 className="display" style={{ fontSize: "clamp(44px, 5vw, 84px)", fontWeight: 300, margin: "12px 0 0", lineHeight: 1.02, maxWidth: "18ch" }}>
              {w.title}
            </h1>
          </div>
          <div style={{ textAlign: "right" }}>
            <ConsentNote text="Couple consent: gated demo · photographer credit gated" />
          </div>
        </div>
      </section>

      {/* Meta strip */}
      <section style={{ paddingBottom: 80 }}>
        <div className="wrap">
          <div className="cs-meta">
            <div className="item"><div className="l">Tradition</div><div className="v">{w.traditionLabel}</div></div>
            <div className="item"><div className="l">Venue</div><div className="v">{w.venue}</div></div>
            <div className="item"><div className="l">Functions</div><div className="v">{w.functions.join(", ")}</div></div>
            <div className="item"><div className="l">Guests</div><div className="v">{w.guestBand}</div></div>
            <div className="item"><div className="l">Year</div><div className="v">{w.year}</div></div>
          </div>
        </div>
      </section>

      {/* Narrative + design notes */}
      <section style={{ paddingBottom: 100 }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80 }}>
          <div>
            <span className="meta">The story</span>
            <p className="display" style={{ fontSize: "clamp(22px, 1.8vw, 28px)", fontWeight: 300, lineHeight: 1.5, margin: "16px 0 0", letterSpacing: "-0.005em", color: "var(--text)" }}>
              {w.narrative}
            </p>
          </div>
          <div>
            <span className="meta">Design moves</span>
            <ul style={{ listStyle: "none", padding: 0, margin: "16px 0 0" }}>
              {w.design.split("·").map(item => item.trim()).filter(Boolean).map((it, i) => (
                <li key={i} style={{ padding: "16px 0", borderTop: "1px solid var(--border)", fontSize: 15, color: "var(--secondary)", display: "flex", gap: 18, alignItems: "flex-start" }}>
                  <span style={{ fontFamily: "var(--serif)", fontStyle: "italic", color: "var(--accent)", minWidth: 28 }}>0{i+1}</span>
                  <span>{it}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* Gallery */}
      <section style={{ paddingBottom: 80 }}>
        <div className="wrap">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 32 }}>
            <span className="eyebrow eyebrow-rose">Gallery</span>
            <span className="meta">{w.gallery.length} images · click to enlarge</span>
          </div>
          <div className="cs-gallery">
            {w.gallery.map((g, i) => (
              <div key={i} className={`g ${g.layout}`} onClick={() => setLbIndex(i)}>
                <img src={g.src} alt="" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Credits / consent strip */}
      <section style={{ background: "var(--surface)", padding: "56px 0", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 40 }}>
          <div>
            <p className="meta">Photography</p>
            <p style={{ fontSize: 14, marginTop: 8, color: "var(--secondary)" }}>{w.photographer}</p>
          </div>
          <div>
            <p className="meta">Planning, design &amp; production</p>
            <p style={{ fontSize: 14, marginTop: 8, color: "var(--secondary)" }}>Jam Wedding Planner — full team</p>
          </div>
          <div>
            <p className="meta">Consent</p>
            <p style={{ fontSize: 14, marginTop: 8, color: "var(--secondary)" }}>Published with couple permission · names redacted by request</p>
          </div>
        </div>
      </section>

      {/* Related */}
      <section className="section">
        <div className="wrap">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 40 }}>
            <h3 className="display" style={{ fontSize: 36, fontWeight: 300, margin: 0 }}>More <em className="display-italic" style={{ color: "var(--primary-ink)" }}>real</em> weddings</h3>
            <a className="btn-link" href="#/real-weddings" onClick={() => setRoute("real-weddings")}>All stories <span>→</span></a>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 22 }}>
            {related.map(r => (
              <article key={r.id} className="wcard" onClick={() => openWedding(r.id)}>
                <div className="img" style={{ aspectRatio: "3/4" }}>
                  <img src={r.cover} alt={r.title} />
                </div>
                <div className="meta-row">
                  <span className="tradition">{r.traditionLabel}</span>
                  <span className="year">{r.year}</span>
                </div>
                <div className="title">{r.title}</div>
                <div className="venue">{r.venue}</div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ background: "var(--ink)", color: "#FBF6F2", padding: "100px 0" }}>
        <div className="wrap" style={{ textAlign: "center" }}>
          <Lotus size={28} color="var(--accent)" />
          <h2 className="display" style={{ fontSize: "clamp(36px, 4.5vw, 64px)", fontWeight: 300, margin: "24px auto 28px", maxWidth: "18ch", lineHeight: 1.05 }}>
            Plan your wedding with <em className="display-italic" style={{ color: "var(--accent)" }}>Jam</em>.
          </h2>
          <a className="btn btn-rose" href="#/contact" onClick={() => setRoute("contact")}>Book a free consultation <span>→</span></a>
        </div>
      </section>

      {lbIndex != null && (
        <Lightbox
          images={w.gallery}
          index={lbIndex}
          onClose={() => setLbIndex(null)}
          onPrev={() => setLbIndex((lbIndex - 1 + w.gallery.length) % w.gallery.length)}
          onNext={() => setLbIndex((lbIndex + 1) % w.gallery.length)}
        />
      )}
    </div>
  );
}

Object.assign(window, { RealWeddingsPage, CaseStudyPage });