// Maison Yeya — Bridal & Couture collection pages

function CollectionsPage({ kind, setRoute, onAppointment, onOpenLook, onSave, isSaved }) {
  // kind: "bridal" or "couture"
  const isBridal = kind === "bridal";
  const collections = isBridal ? BRIDAL_COLLECTIONS : COUTURE_COLLECTIONS;

  const [filter, setFilter] = useState("all");
  const filtered = filter === "all" ? collections : collections.filter(c => c.id === filter);

  const heroCopy = isBridal
    ? {
        eyebrow: "Bridal · Couture Privée",
        title: "Bridal Couture Privée",
        sub: "Six collections of hand-made bridal couture, each made to measure at the atelier. Reach out by appointment to view the full lookbook.",
        heroImg: "media/media-09-website-banner-1.webp",
        heroLook: "Gharami"
      }
    : {
        eyebrow: "Couture · Eveningwear",
        title: "Couture Privée",
        sub: "Ten couture and eveningwear collections in the maison's archive. Pieces from current and past series are available by private quotation.",
        heroImg: "media/media-01-yeya-couture-les-marionettes-capella-01.webp",
        heroLook: "Les Marionettes · Capella"
      };

  return (
    <div className="page">
      {/* HERO BANNER */}
      <section style={{ position: "relative", padding: "0 56px" }}>
        <div className="img-frame" style={{ aspectRatio: "16/8", position: "relative", overflow: "hidden" }}>
          <img src={heroCopy.heroImg} alt={heroCopy.heroLook} className="drift"/>
          <div style={{
            position: "absolute", inset: 0,
            background: "linear-gradient(to right, rgba(20,17,15,0.55) 0%, rgba(20,17,15,0) 50%)"
          }}></div>
          <div style={{ position: "absolute", left: 56, top: 56, bottom: 56, right: 56,
                        display: "flex", flexDirection: "column", justifyContent: "space-between", color: "#fff" }}>
            <div>
              <div className="micro" style={{ color: "rgba(255,255,255,0.85)" }}>{heroCopy.eyebrow}</div>
            </div>
            <div style={{ maxWidth: 720 }}>
              <h1 className="display" style={{ fontSize: "clamp(64px, 8vw, 132px)", color: "#fff", margin: 0, lineHeight: 0.96 }}>
                {heroCopy.title}
              </h1>
              <p className="editorial" style={{ fontSize: 20, color: "rgba(255,255,255,0.85)", marginTop: 28, maxWidth: 520, fontStyle: "italic" }}>
                {heroCopy.sub}
              </p>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
              <div className="micro" style={{ color: "rgba(255,255,255,0.7)" }}>
                Featured · {heroCopy.heroLook}
              </div>
              <div className="num" style={{ fontSize: 13, color: "rgba(255,255,255,0.7)", letterSpacing: "0.1em" }}>
                {String(collections.length).padStart(2, "0")} / {isBridal ? "06" : "10"}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FILTER BAR */}
      <section style={{ padding: "56px 0 24px" }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 24 }}>
            <div>
              <div className="micro" style={{ marginBottom: 14 }}>{isBridal ? "All Bridal" : "All Couture"} Collections</div>
              <h2 className="display" style={{ margin: 0, fontSize: 40 }}>Browse the Lookbook</h2>
            </div>
            <div className="scroll-pretty" style={{ display: "flex", gap: 10, flexWrap: "wrap", maxWidth: 800 }}>
              <button className={`chip ${filter === "all" ? "on" : ""}`} onClick={() => setFilter("all")}>
                All ({collections.length})
              </button>
              {collections.map(c => (
                <button key={c.id}
                        className={`chip ${filter === c.id ? "on" : ""}`}
                        onClick={() => setFilter(c.id)}>
                  {c.name}
                </button>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* COLLECTION SHOWCASE — large editorial blocks */}
      <section style={{ padding: "40px 0 60px" }}>
        <div className="container">
          {filtered.map((c, i) => (
            <CollectionShowcase
              key={c.id} c={c} index={i}
              onOpen={onOpenLook} onSave={onSave} saved={isSaved(c)}
              onAppointment={onAppointment}
            />
          ))}
        </div>
      </section>

      {/* PRIVATE BOOK CTA */}
      <section style={{ padding: "100px 0", background: "var(--paper-2)" }}>
        <div className="container-narrow" style={{ textAlign: "center" }}>
          <div className="micro" style={{ marginBottom: 22 }}>
            Private Lookbook
          </div>
          <h3 className="display" style={{ fontSize: "clamp(40px, 4.5vw, 64px)", margin: 0, lineHeight: 1.04 }}>
            {isBridal
              ? "The full bridal lookbook is shared at consultation."
              : "Couture pieces are shown by private appointment at the atelier."}
          </h3>
          <p className="editorial" style={{ fontSize: 20, color: "var(--ink-soft)", margin: "32px auto 40px", maxWidth: 580, fontStyle: "italic" }}>
            Save the looks that move you to your Enquiry — we will assemble a personal selection and book a fitting.
          </p>
          <button className="btn solid" onClick={onAppointment}>
            Request a Private Viewing
          </button>
        </div>
      </section>
    </div>
  );
}

// ──────────────────────────────────────────────────────────
// One collection block (alternating layout)
// ──────────────────────────────────────────────────────────
function CollectionShowcase({ c, index, onOpen, onSave, saved, onAppointment }) {
  const flip = index % 2 === 1;
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: "minmax(0,1fr) minmax(0,1fr)",
      gap: 48,
      padding: "60px 0",
      borderTop: index === 0 ? "none" : "1px solid var(--hair-soft)",
      alignItems: "stretch"
    }}>
      {/* Image */}
      <div style={{ order: flip ? 2 : 1 }}>
        <div onClick={() => onOpen(c)} className="img-frame"
             style={{ aspectRatio: "4/5", cursor: "pointer", position: "relative", overflow: "hidden" }}>
          <ZoomImage src={c.image} alt={c.name}/>
        </div>
      </div>

      {/* Copy */}
      <div style={{
        order: flip ? 1 : 2,
        display: "flex", flexDirection: "column", justifyContent: "center",
        padding: "0 24px"
      }}>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 28
        }}>
          <div className="micro">{c.subtitle}</div>
          <div className="num" style={{ fontSize: 12, color: "var(--ink-mute)", letterSpacing: "0.1em" }}>
            № {String(index + 1).padStart(2, "0")}
          </div>
        </div>

        <h3 className="display" style={{ margin: 0, fontSize: "clamp(56px, 6vw, 96px)", lineHeight: 0.98, letterSpacing: "-0.005em" }}>
          {c.name}
        </h3>

        <p className="editorial" style={{
          fontSize: 22, lineHeight: 1.45, color: "var(--ink-soft)", marginTop: 28, marginBottom: 36, fontStyle: "italic"
        }}>
          {c.note}
        </p>

        <dl style={{ display: "grid", gridTemplateColumns: "auto 1fr", columnGap: 32, rowGap: 14, margin: 0 }}>
          <DTerm label="Series"><span>{c.range}</span></DTerm>
          <DTerm label="Looks"><span>{String(c.looks).padStart(2, "0")}</span></DTerm>
          <DTerm label="Reference"><span style={{ fontFamily: "var(--sans-ui)" }}>MY · {c.id.toUpperCase()}</span></DTerm>
        </dl>

        <div style={{ display: "flex", gap: 14, marginTop: 40, flexWrap: "wrap" }}>
          <button className="btn solid" onClick={() => onOpen(c)}>View Look</button>
          <button className="btn" onClick={() => onSave(c)}>
            {saved ? "✓ Saved" : "Save to Enquiry"}
          </button>
          <button className="btn ghost" onClick={onAppointment}>Enquire</button>
        </div>
      </div>
    </div>
  );
}

function DTerm({ label, children }) {
  return (
    <React.Fragment>
      <dt className="micro" style={{ paddingTop: 4 }}>{label}</dt>
      <dd className="editorial" style={{ margin: 0, fontSize: 17 }}>{children}</dd>
    </React.Fragment>
  );
}

function ZoomImage({ src, alt }) {
  const [hover, setHover] = useState(false);
  return (
    <>
      <img src={src} alt={alt}
           onMouseEnter={() => setHover(true)}
           onMouseLeave={() => setHover(false)}
           style={{
             width: "100%", height: "100%", objectFit: "cover",
             transform: hover ? "scale(1.05)" : "scale(1)",
             transition: "transform 1400ms cubic-bezier(0.22, 1, 0.36, 1)"
           }}/>
      <div style={{
        position: "absolute", left: 24, bottom: 24,
        background: "rgba(244,239,231,0.92)", backdropFilter: "blur(6px)",
        padding: "10px 16px",
        opacity: hover ? 1 : 0, transform: hover ? "translateY(0)" : "translateY(6px)",
        transition: "all 240ms ease",
        pointerEvents: "none"
      }}>
        <span className="label">View Look →</span>
      </div>
    </>
  );
}

window.CollectionsPage = CollectionsPage;