// Boise Boudoir — Sections 5 (Gallery), 6 (What's Included)

// ---------- 5. THE WORK (mosaic gallery) ----------
function BbGallery() {
  // Real images (same boudoir set as Las Vegas; alt text is Boise-specific). span: "v" = tall, "h" = wide.
  // To grow the gallery, just append entries below — lightbox + "View more" adapt automatically.
  const imgs = [
    { src: "/images/boudoir-01.jpg?v=3", alt: "Boise boudoir — woman in teal lace bodysuit reclining on white bed, smiling softly in natural window light", span: "h" },
    { src: "/images/boudoir-02.jpg?v=3", alt: "Boise boudoir — black-and-white editorial pose arched off the bed, legs lifted toward bright curtained window", span: "h" },
    { src: "/images/boudoir-03.jpg?v=3", alt: "Boise boudoir — black-and-white portrait reclining on white bedding in strappy lingerie, arms framing the face", span: "v" },
    { src: "/images/boudoir-04.jpg?v=3", alt: "Boise boudoir — brunette in white lace lingerie resting on the bed, warm smile, hand in her hair", span: "h" },
    { src: "/images/boudoir-05.jpg?v=3", alt: "Boise boudoir — sultry black-and-white against a tufted headboard, open white shirt and soft gaze", span: "h" },
    { src: "/images/boudoir-06.jpg?v=3", alt: "Boise boudoir — black lingerie on the floor in a beam of window light, head tilted back", span: "v" },
    { src: "/images/boudoir-07.jpg?v=3", alt: "Boise boudoir — full-length silhouette on the studio floor before a bright window, black lace lingerie", span: "h" },
    { src: "/images/boudoir-08.jpg?v=3", alt: "Boise boudoir — soft black-and-white from behind on rumpled bedding, grey cotton lingerie set", span: "h" },
    { src: "/images/boudoir-09.jpg?v=3", alt: "Boise boudoir — minimalist black-and-white with legs extended up a corner wall, white lingerie", span: "v" },
    { src: "/images/boudoir-10.jpg?v=3", alt: "Boise boudoir — grey cotton lingerie on a white bed, easy smile in bright natural light", span: "h" },
    { src: "/images/boudoir-11.jpg?v=3", alt: "Boise boudoir — overhead pose on a caramel leather sofa in black lace, soft direct gaze", span: "h" },
    { src: "/images/boudoir-12.jpg?v=3", alt: "Boise boudoir — black-and-white portrait curled up in an off-the-shoulder white shirt, eyes lowered", span: "v" },
    { src: "/images/boudoir-13.jpg?v=3", alt: "Boise boudoir — fine-art black-and-white silhouette on the floor before sheer curtains, legs lifted", span: "h" },
    { src: "/images/boudoir-14.jpg?v=3", alt: "Boise boudoir — brunette reclining on white bedding in lace, sultry over-the-shoulder gaze", span: "h" },
    { src: "/images/boudoir-15.jpg?v=3", alt: "Boise boudoir — back view in an open white shirt against a dark backdrop, soft blonde waves", span: "v" },
    { src: "/images/boudoir-16.jpg?v=3", alt: "Boise boudoir — woman with short silver hair slipping a sheer shirt off her shoulders by the window", span: "h" },
    { src: "/images/boudoir-17.jpg?v=3", alt: "Boise boudoir — full-length black-and-white on the floor before bright windows, cotton lingerie", span: "h" },
    { src: "/images/boudoir-18.jpg?v=3", alt: "Boise boudoir — seated on the floor by the bed in black lace, hand in her hair, window-lit", span: "v" },
    { src: "/images/boudoir-19.jpg?v=3", alt: "Boise boudoir — joyful blonde laughing on a white bed in an off-shoulder white shirt", span: "h" },
    { src: "/images/boudoir-20.jpg?v=3", alt: "Boise boudoir — soft-focus black-and-white form study draped in white sheets", span: "h" },
    { src: "/images/boudoir-21.jpg?v=3", alt: "Boise boudoir — black-and-white overhead on white sheets, tattooed legs drawn up, playful upside-down gaze", span: "v" },
    { src: "/images/boudoir-22.jpg?v=3", alt: "Boise boudoir — relaxed on white linens wrapped in a white sheet, soft natural light, gold bracelet", span: "h" },
    { src: "/images/boudoir-23.jpg?v=3", alt: "Boise boudoir — black-and-white reclined against a tufted sofa in lace, backlit by tall windows", span: "h" },
    { src: "/images/boudoir-24.jpg?v=3", alt: "Boise boudoir — back study with cascading blonde waves and a white sheet draped low", span: "v" },
    { src: "/images/boudoir-25.jpg?v=3", alt: "Boise boudoir — bright high-key black-and-white, blonde laughing on a white bed in a silk slip", span: "h" },
    { src: "/images/boudoir-26.jpg?v=3", alt: "Boise boudoir — black-and-white reclined on a white bed in black lace, head tipped back in window light", span: "h" },
    { src: "/images/boudoir-27.jpg?v=3", alt: "Boise boudoir — fine-art low-key profile, sculpted curves emerging from deep shadow", span: "v" },
    { src: "/images/boudoir-28.jpg?v=3", alt: "Boise boudoir — seated on the floor before sheer curtains, black lace and arched, head-back pose", span: "h" },
    { src: "/images/boudoir-29.jpg?v=3", alt: "Boise boudoir — low-key side profile kneeling in black lace, arms raised, light grazing the silhouette", span: "v" },
    { src: "/images/boudoir-30.jpg?v=3", alt: "Boise boudoir — overhead on white bedding in a teal lace bodysuit, soft waves and a gentle gaze", span: "v" },
    { src: "/images/boudoir-31.jpg?v=3", alt: "Boise boudoir — black-and-white reclining pose on white bedding in a black bodysuit, backlit by sheer floor-to-ceiling curtains", span: "h" },
    { src: "/images/boudoir-32.jpg?v=3", alt: "Boise boudoir — overhead view in black lace lingerie with sunlight and soft shadow stripes falling across the frame", span: "h" },
  ];

  const INITIAL = 12;
  const [visible, setVisible] = React.useState(INITIAL);
  const [lb, setLb] = React.useState(null);

  const shown = imgs.slice(0, visible);
  const allShown = visible >= imgs.length;

  const closeLb = () => setLb(null);
  const prev = () => setLb((n) => (n === null ? n : (n - 1 + imgs.length) % imgs.length));
  const next = () => setLb((n) => (n === null ? n : (n + 1) % imgs.length));

  React.useEffect(() => {
    if (lb === null) return;
    document.body.style.overflow = "hidden";
    const onKey = (e) => {
      if (e.key === "Escape") closeLb();
      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 = "";
    };
  }, [lb]);

  const cellStyle = {
    border: `1px solid ${BB_GOLD}`, overflow: "hidden", background: BB_INK, cursor: "pointer",
  };
  const cellFor = (c) => c.span === "h"
    ? { ...cellStyle, gridColumn: "span 2", aspectRatio: "5/3" }
    : { ...cellStyle, aspectRatio: "4/5" };

  return (
    <section id="gallery" data-screen-label="05 BB Gallery" className="bb-gallery-section" style={{ background: BB_WHITE, padding: "160px 0 160px", scrollMarginTop: 100 }}>
      <style>{`
        @media (max-width: 640px) {
          .bb-gallery-section { padding: 88px 0 88px !important; }
          .bb-gallery-section .vb-gallery-grid {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 10px !important;
            padding: 0 16px !important;
          }
        }
      `}</style>
      <div style={{ maxWidth: 1280, margin: "0 auto 80px", padding: "0 48px", textAlign: "center" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
          <BbGoldRule width={36} />
          <BbEyebrow>The Work</BbEyebrow>
          <BbGoldRule width={36} />
        </div>
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: BB_INK,
          fontSize: "clamp(36px, 5vw, 64px)", lineHeight: 1.06,
          letterSpacing: "-0.005em", margin: "0 0 18px 0", textWrap: "balance",
        }}>
          A look at the studio's <em style={{ fontStyle: "italic", color: BB_GOLD }}>portfolio</em>.
        </h2>
        <p style={{
          fontFamily: "Gloock, serif", fontStyle: "italic", color: BB_GREY,
          fontSize: 16, margin: 0,
        }}>
          Selected sessions from the Boise studio.
        </p>
      </div>

      <div className="vb-gallery-grid" style={{
        maxWidth: 1320, margin: "0 auto", padding: "0 48px",
        display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18, gridAutoFlow: "dense",
      }}>
        {shown.map((c, i) => (
          <div key={i} style={cellFor(c)} onClick={() => setLb(i)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setLb(i); } }} role="button" tabIndex={0} aria-label={`Enlarge: ${c.alt}`}>
            <img src={c.src} alt={c.alt} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
          </div>
        ))}
        {allShown && (
          <div style={{ ...cellStyle, cursor: "default", aspectRatio: "4/5", background: BB_BEIGE, display: "flex", alignItems: "center", justifyContent: "center", border: `1px solid ${BB_GOLD}` }}>
            <span style={{ fontFamily: "Gloock, serif", fontStyle: "italic", color: BB_GOLD, fontSize: 14, letterSpacing: "0.18em", textAlign: "center", padding: "0 16px" }}>
              More in<br/>your private<br/>consultation
            </span>
          </div>
        )}
      </div>

      {!allShown && (
        <div style={{ textAlign: "center", marginTop: 56 }}>
          <button onClick={() => setVisible(imgs.length)} style={{
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11,
            letterSpacing: "0.32em", textTransform: "uppercase", color: BB_INK,
            background: "transparent", border: `1px solid ${BB_GOLD}`,
            padding: "16px 42px", cursor: "pointer",
          }}>View more</button>
        </div>
      )}

      {lb !== null && (
        <div onClick={closeLb} role="dialog" aria-modal="true" aria-label="Portfolio image viewer" style={{
          position: "fixed", inset: 0, zIndex: 200, background: "rgba(10,9,7,0.94)",
          display: "flex", alignItems: "center", justifyContent: "center", padding: 40,
        }}>
          <button onClick={closeLb} aria-label="Close" style={{
            position: "absolute", top: 22, right: 26, background: "transparent", border: "none",
            color: BB_WHITE, fontSize: 34, lineHeight: 1, cursor: "pointer", opacity: 0.85,
          }}>×</button>
          <button onClick={(e) => { e.stopPropagation(); prev(); }} aria-label="Previous image" style={{
            position: "absolute", left: 16, top: "50%", transform: "translateY(-50%)",
            background: "transparent", border: "none", color: BB_WHITE, fontSize: 48,
            lineHeight: 1, cursor: "pointer", opacity: 0.85, padding: 12,
          }}>‹</button>
          <img src={imgs[lb].src} alt={imgs[lb].alt} onClick={(e) => e.stopPropagation()} style={{
            maxWidth: "90vw", maxHeight: "84vh", objectFit: "contain", boxShadow: "0 24px 70px rgba(0,0,0,0.55)",
          }}/>
          <button onClick={(e) => { e.stopPropagation(); next(); }} aria-label="Next image" style={{
            position: "absolute", right: 16, top: "50%", transform: "translateY(-50%)",
            background: "transparent", border: "none", color: BB_WHITE, fontSize: 48,
            lineHeight: 1, cursor: "pointer", opacity: 0.85, padding: 12,
          }}>›</button>
          <div style={{
            position: "absolute", bottom: 24, left: "50%", transform: "translateX(-50%)",
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11,
            letterSpacing: "0.3em", textTransform: "uppercase", color: "rgba(255,255,255,0.7)",
          }}>{lb + 1} / {imgs.length}</div>
        </div>
      )}
    </section>
  );
}

// ---------- 6. WHAT'S INCLUDED ----------
function BbIncluded() {
  const items = [
    { num: "01", title: "Professional hair and makeup", body: "With my in-studio team. Editorial-grade glam, designed for camera." },
    { num: "02", title: "Full access to the client closet", body: "Lingerie, white shirts, sweaters, blazers, sheets. Sizes XS–6X. Everything washed between sessions." },
    { num: "03", title: "Fully guided posing", body: "I walk you through every pose, every angle, every expression — start to finish. You're never wondering what to do." },
    { num: "04", title: "Preparation emails", body: "Sent in the weeks before your session, so you arrive confident and ready." },
    { num: "05", title: "Every image fully retouched", body: "Color and black-and-white delivered together. Editorial standard, every frame." },
    { num: "06", title: "Next-day private gallery reveal", body: "We hop on a Zoom together, walk through your gallery, and narrow to your favorites. You only purchase what you love." },
    { num: "07", title: "An all-female team", body: "Every person you'll meet on the day of your session is a woman — myself, my hair and makeup artist, every member of the team. The photographer behind the camera is always me. The environment is always private, always held by women who do this work for women." },
  ];
  return (
    <section id="included" data-screen-label="06 BB Included" style={{ background: BB_WHITE, padding: "160px 48px", scrollMarginTop: 100 }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 88 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
            <BbGoldRule width={36} />
            <BbEyebrow>Every Session Includes</BbEyebrow>
            <BbGoldRule width={36} />
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: BB_INK,
            fontSize: "clamp(36px, 5vw, 60px)", lineHeight: 1.06,
            letterSpacing: "-0.005em", margin: 0, textWrap: "balance", maxWidth: 880, marginLeft: "auto", marginRight: "auto",
          }}>
            What you walk in with. What you walk <em style={{ fontStyle: "italic", color: BB_GOLD }}>out</em> with.
          </h2>
        </div>
        <div className="vb-included-grid" style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "64px 56px",
        }}>
          {items.map(it => (
            <div key={it.num}>
              <BbGoldRule width={32} style={{ display: "block", marginBottom: 20 }} />
              <div style={{
                fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11,
                letterSpacing: "0.32em", textTransform: "uppercase", color: BB_GOLD, marginBottom: 14,
              }}>{it.num}</div>
              <h3 style={{
                fontFamily: "Gloock, serif", fontWeight: 400, color: BB_INK,
                fontSize: 22, lineHeight: 1.25, margin: "0 0 14px 0", textWrap: "balance",
              }}>{it.title}</h3>
              <p style={{
                fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 14.5,
                lineHeight: 1.75, color: "#3a342e", margin: 0,
              }}>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { BbGallery, BbIncluded });
