// Weddings hub — sector page with filter
const { useState: useStateW, useMemo: useMemoW } = React;

function Weddings({ onRoute, onEnquire, t }) {
  const [filter, setFilter] = useStateW("All");
  const filtered = useMemoW(() => {
    if (filter === "All") return WEDDING_PROJECTS;
    return WEDDING_PROJECTS.filter((p) => (TAG_MAP[p.id] || []).includes(filter));
  }, [filter]);

  return (
    <div data-screen-label="02 Weddings hub">
      <WeddingsHero t={t} />
      <WeddingsIntro />
      <WeddingsFilter tags={WEDDING_TAGS} active={filter} onSet={setFilter} count={filtered.length} />
      <WeddingsGrid projects={filtered} onProject={(p) => p.href === "case" ? onRoute("case") : null} />
      <WeddingsApproachBlock />
      <WeddingsCTA onEnquire={onEnquire} t={t} />
    </div>
  );
}

function WeddingsHero({ t }) {
  return (
    <section style={{ position: "relative", height: "78vh", minHeight: 580, overflow: "hidden", color: "var(--paper)" }}>
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: "url(media/weddings-hero.webp)",
        backgroundSize: "cover", backgroundPosition: "center 40%",
      }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(16,12,10,0.55) 0%, rgba(16,12,10,0.45) 35%, rgba(16,12,10,0.85) 100%)" }} />
      <div className="container" style={{ position: "relative", height: "100%", display: "flex", flexDirection: "column", justifyContent: "flex-end", paddingBottom: 80 }}>
        <div className="mono-tiny" style={{ opacity: 0.8, marginBottom: 18 }}>I · Weddings</div>
        <h1 className="serif" style={{
          fontSize: "clamp(64px, 11vw, 180px)", lineHeight: 0.94, fontWeight: 300,
          letterSpacing: "-0.025em", margin: 0,
        }}>
          The <em style={{ fontWeight: 300, color: "var(--accent-soft)" }}>once</em>-in-a-lifetime,<br />
          planned like it.
        </h1>
        <div style={{
          marginTop: 32, display: "flex", gap: 48, fontSize: 13,
          letterSpacing: "0.06em", color: "rgba(255,255,255,0.78)",
          paddingTop: 24, borderTop: "1px solid rgba(255,255,255,0.18)", maxWidth: 720,
        }}>
          <span>Local &amp; destination</span>
          <span>40 — 1,200 guests*</span>
          <span>Planned 3 to 12 months out</span>
          <span style={{ marginLeft: "auto", opacity: 0.6 }}>*press figures</span>
        </div>
      </div>
    </section>
  );
}

function WeddingsIntro() {
  const r = useReveal();
  return (
    <section ref={r} className="reveal" style={{ padding: "var(--space-section) 0 var(--space-block)" }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80 }}>
        <div>
          <SectionEyebrow label="The wedding studio" num="01" />
          <div className="mono-tiny" style={{ color: "var(--muted)", marginTop: 32 }}>Photographer credits</div>
          <div style={{ marginTop: 12, color: "var(--muted)", fontSize: 14, lineHeight: 1.7 }}>
            Varna Studios · Andy Mac Photography · DaniB Photo · EKO Studios · DEN Photo
          </div>
        </div>
        <div>
          <h2 className="serif" style={{ fontSize: "clamp(34px, 4.4vw, 60px)", lineHeight: 1.1, fontWeight: 300, margin: "0 0 32px", letterSpacing: "-0.015em", textWrap: "balance" }}>
            We plan a small number of weddings each year so the studio can sit with yours — its families, its faiths, its room, its weather — long enough to design it properly.
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 24, paddingTop: 32, borderTop: "1px solid var(--line)" }}>
            {[
              ["Concept", "Renderings, mood, palette"],
              ["Production", "Floral, set, AV, build"],
              ["Day-of", "Run-of-show, guest care, travel"],
            ].map(([k, d]) => (
              <div key={k}>
                <div className="serif" style={{ fontSize: 22, fontWeight: 400, marginBottom: 6 }}>{k}</div>
                <div style={{ fontSize: 13, color: "var(--muted)" }}>{d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function WeddingsFilter({ tags, active, onSet, count }) {
  return (
    <div style={{ position: "sticky", top: 70, zIndex: 30, background: "var(--paper)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "20px 0", flexWrap: "wrap", gap: 16 }}>
        <div style={{ display: "flex", gap: 4, alignItems: "center", flexWrap: "wrap" }}>
          <span className="mono-tiny" style={{ color: "var(--muted)", marginRight: 16 }}>Filter</span>
          {tags.map((t) => (
            <button key={t} onClick={() => onSet(t)} style={{
              padding: "8px 16px", fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase",
              fontWeight: 500, borderRadius: 999,
              background: active === t ? "var(--ink)" : "transparent",
              color: active === t ? "var(--paper)" : "var(--ink)",
              border: "1px solid " + (active === t ? "var(--ink)" : "var(--line-strong)"),
              transition: "all 0.2s",
            }}>{t}</button>
          ))}
        </div>
        <div className="mono-tiny" style={{ color: "var(--muted)" }}>{count} project{count !== 1 ? "s" : ""}</div>
      </div>
    </div>
  );
}

function WeddingsGrid({ projects, onProject }) {
  return (
    <section style={{ padding: "var(--space-block) 0 var(--space-section)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 32, rowGap: 80 }}>
          {projects.map((p, i) => (
            <ProjectCard key={p.id} project={p} onClick={() => onProject(p)} index={i} />
          ))}
        </div>
      </div>
    </section>
  );
}

function ProjectCard({ project, onClick, index }) {
  const [hover, setHover] = useStateW(false);
  // editorial varying spans — featured wide; alternate big/small
  const layout = (() => {
    if (project.featured) return { col: "span 12", ratio: "16/9", big: true };
    const pattern = index % 5;
    if (pattern === 0) return { col: "span 7", ratio: "4/5" };
    if (pattern === 1) return { col: "span 5", ratio: "3/4" };
    if (pattern === 2) return { col: "span 5", ratio: "4/5", offset: true };
    if (pattern === 3) return { col: "span 7", ratio: "3/2" };
    return { col: "span 6", ratio: "4/5" };
  })();
  const tags = (TAG_MAP[project.id] || []);

  return (
    <article onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        gridColumn: layout.col,
        cursor: project.href === "case" ? "pointer" : "default",
        position: "relative",
        marginTop: layout.offset ? 64 : 0,
      }}>
      <div style={{ position: "relative", aspectRatio: layout.ratio, overflow: "hidden", background: "var(--ivory)" }}>
        <img src={project.image} alt={project.name} loading="lazy" style={{
          width: "100%", height: "100%", objectFit: "cover",
          transform: hover ? "scale(1.03)" : "scale(1)",
          transition: "transform 0.8s cubic-bezier(0.22,1,0.36,1)",
        }} />
        {project.featured && (
          <div style={{
            position: "absolute", top: 20, left: 20,
            background: "var(--paper)", color: "var(--ink)", padding: "8px 14px",
            fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", fontWeight: 500,
          }}>Case study</div>
        )}
        <div style={{
          position: "absolute", bottom: 12, right: 14,
          fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase",
          color: "rgba(255,255,255,0.85)", fontWeight: 500,
          textShadow: "0 1px 8px rgba(0,0,0,0.5)",
        }}>© {project.photographer}</div>
      </div>
      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "flex-start",
        gap: 24, padding: "20px 0 0",
      }}>
        <div>
          <h3 className="serif" style={{
            fontSize: layout.big ? 38 : 26, fontWeight: 400, margin: "0 0 6px",
            color: hover ? "var(--accent)" : "var(--ink)", transition: "color 0.3s",
            letterSpacing: "-0.01em",
          }}>{project.name}</h3>
          <div style={{ fontSize: 13, color: "var(--muted)", letterSpacing: "0.04em" }}>
            {project.venue} · {project.location} · {project.year}
          </div>
        </div>
        <div style={{ display: "flex", gap: 6, flexShrink: 0 }}>
          {tags.map((tag) => (
            <span key={tag} className="mono-tiny" style={{
              padding: "5px 10px", border: "1px solid var(--line-strong)",
              color: "var(--muted)", fontSize: 10, letterSpacing: "0.16em",
            }}>{tag}</span>
          ))}
        </div>
      </div>
      {project.featured && (
        <div style={{
          marginTop: 14, paddingTop: 14, borderTop: "1px solid var(--line)",
          display: "flex", justifyContent: "space-between", alignItems: "center",
          fontSize: 13, color: "var(--muted)",
        }}>
          <span>{project.scale} · {project.palette}</span>
          <span className="btn-link" style={{ color: "var(--ink)" }}>
            <span>Read case study</span><span className="arrow">→</span>
          </span>
        </div>
      )}
    </article>
  );
}

function WeddingsApproachBlock() {
  const r = useReveal();
  return (
    <section ref={r} className="reveal" style={{ padding: "var(--space-section) 0", background: "var(--ivory)" }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 80, alignItems: "center" }}>
        <CreditedImage src="media/approach.webp" alt="Behind the scenes" credit="Carousel Studio" ratio="5/4" />
        <div>
          <SectionEyebrow label="How we work" num="03" />
          <h2 className="serif" style={{ fontSize: "clamp(34px, 4.4vw, 56px)", lineHeight: 1.05, fontWeight: 300, margin: "0 0 24px", letterSpacing: "-0.015em" }}>
            Every event theme is developed from scratch.
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--muted)", marginBottom: 28, maxWidth: 480 }}>
            Inspired by our conversations with each couple — custom concept renderings, visual inspiration, floor plans, décor selections. Production and management are kept in-house so the design survives the room change.
          </p>
          <a href="#" onClick={e => e.preventDefault()} className="btn-link"><span>Our methodology</span><span className="arrow">→</span></a>
        </div>
      </div>
    </section>
  );
}

function WeddingsCTA({ onEnquire, t }) {
  return (
    <section style={{ padding: "var(--space-section) 0", borderTop: "1px solid var(--line)" }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "end" }}>
        <h2 className="serif" style={{ fontSize: "clamp(40px, 5.2vw, 72px)", lineHeight: 1.05, fontWeight: 300, margin: 0, letterSpacing: "-0.02em" }}>
          Tell us about<br />your wedding.
        </h2>
        <div>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--muted)", margin: "0 0 32px", maxWidth: 460 }}>
            Three rounds of design conversations, in person or on a call. We respond personally to every enquiry within two working days.
          </p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={onEnquire}>{t.requestProposal}<Arrow /></button>
            <a className="btn btn-ghost" href="tel:+97144334363">+971 4 433 4363</a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Weddings });