// Vegas Boudoir — Sections 5 (Gallery), 6 (What's Included), 7 (Before/After)

// ---------- 5. THE WORK (mosaic gallery) ----------
function VbGallery() {
  // 12 images, alt texts for SEO
  const imgs = [
    { src: "/images/boudoir-01.jpg?v=3", alt: "Las Vegas boudoir — emerald lace bodysuit on crisp white linens, relaxed smile in soft daylight", span: "h" },
    { src: "/images/boudoir-02.jpg?v=3", alt: "Las Vegas boudoir — dramatic black-and-white frame draped from the bed, legs raised against a sunlit window", span: "h" },
    { src: "/images/boudoir-03.jpg?v=3", alt: "Las Vegas boudoir — monochrome reclining portrait on white sheets, strappy lingerie and long flowing hair", span: "v" },
    { src: "/images/boudoir-04.jpg?v=3", alt: "Las Vegas boudoir — black-and-white of a brunette in delicate white lace, laughing softly against the bed", span: "h" },
    { src: "/images/boudoir-05.jpg?v=3", alt: "Las Vegas boudoir — moody monochrome on a tufted bed, oversized white shirt and direct, confident gaze", span: "h" },
    { src: "/images/boudoir-06.jpg?v=3", alt: "Las Vegas boudoir — striped window light across the floor, black lingerie and an arched, head-back pose", span: "v" },
    { src: "/images/boudoir-07.jpg?v=3", alt: "Las Vegas boudoir — backlit full-length pose against a glowing window, black lace and graceful lines", span: "h" },
    { src: "/images/boudoir-08.jpg?v=3", alt: "Las Vegas boudoir — monochrome rear view across rumpled sheets, relaxed grey cotton set in window light", span: "h" },
    { src: "/images/boudoir-09.jpg?v=3", alt: "Las Vegas boudoir — clean monochrome study, legs raised against a dark corner in white lingerie", span: "v" },
    { src: "/images/boudoir-10.jpg?v=3", alt: "Las Vegas boudoir — relaxed grey cotton set on white linens, soft smile bathed in daylight", span: "h" },
    { src: "/images/boudoir-11.jpg?v=3", alt: "Las Vegas boudoir — top-down frame on a tan leather couch, black lace and a calm, confident look", span: "h" },
    { src: "/images/boudoir-12.jpg?v=3", alt: "Las Vegas boudoir — intimate monochrome, knees drawn in beneath a loose white shirt, gaze cast down", span: "v" },
    { src: "/images/boudoir-13.jpg?v=3", alt: "Las Vegas boudoir — backlit fine-art figure against flowing sheers, graceful lifted legs", span: "h" },
    { src: "/images/boudoir-14.jpg?v=3", alt: "Las Vegas boudoir — monochrome of a brunette on white sheets, lace lingerie and a smoldering look", span: "h" },
    { src: "/images/boudoir-15.jpg?v=3", alt: "Las Vegas boudoir — bare-back study in a draped white shirt on black, tousled blonde hair", span: "v" },
    { src: "/images/boudoir-16.jpg?v=3", alt: "Las Vegas boudoir — elegant silver-haired figure easing a sheer shirt down, backlit by curtains", span: "h" },
    { src: "/images/boudoir-17.jpg?v=3", alt: "Las Vegas boudoir — long reclining silhouette against window light, relaxed cotton lingerie", span: "h" },
    { src: "/images/boudoir-18.jpg?v=3", alt: "Las Vegas boudoir — floor-seated pose beside the bed, intricate black lace in soft window light", span: "v" },
    { src: "/images/boudoir-19.jpg?v=3", alt: "Las Vegas boudoir — candid laughter on crisp white linens, white shirt slipping off the shoulder", span: "h" },
    { src: "/images/boudoir-20.jpg?v=3", alt: "Las Vegas boudoir — dreamy monochrome contour wrapped in flowing white sheets", span: "h" },
    { src: "/images/boudoir-21.jpg?v=3", alt: "Las Vegas boudoir — top-down monochrome on white bedding, tattoo art and a playful reversed gaze", span: "v" },
    { src: "/images/boudoir-22.jpg?v=3", alt: "Las Vegas boudoir — bright airy frame on white bedding, draped sheet and delicate gold jewelry", span: "h" },
    { src: "/images/boudoir-23.jpg?v=3", alt: "Las Vegas boudoir — monochrome leaning on a leather sofa, lace lingerie glowing against window light", span: "h" },
    { src: "/images/boudoir-24.jpg?v=3", alt: "Las Vegas boudoir — sculptural bare-back portrait, loose blonde curls and softly draped white silk", span: "v" },
    { src: "/images/boudoir-25.jpg?v=3", alt: "Las Vegas boudoir — luminous high-key frame, joyful laughter on white linens in a silk slip", span: "h" },
    { src: "/images/boudoir-26.jpg?v=3", alt: "Las Vegas boudoir — moody monochrome on white bedding, black lace and a relaxed head-back pose", span: "h" },
    { src: "/images/boudoir-27.jpg?v=3", alt: "Las Vegas boudoir — dramatic low-key contour study, the figure carved out of darkness", span: "v" },
    { src: "/images/boudoir-28.jpg?v=3", alt: "Las Vegas boudoir — backlit floor pose against flowing sheers, black lace and confident lines", span: "h" },
    { src: "/images/boudoir-29.jpg?v=3", alt: "Las Vegas boudoir — dramatic side-lit kneeling pose in black lace, arms framing the face", span: "v" },
    { src: "/images/boudoir-30.jpg?v=3", alt: "Las Vegas boudoir — top-down frame in an emerald lace bodysuit on white linens, relaxed and serene", span: "v" },
    { src: "/images/boudoir-31.jpg?v=3", alt: "Las Vegas boudoir — relaxed black-and-white silhouette lounging on a bed in a black bodysuit against bright sheer drapes", span: "h" },
    { src: "/images/boudoir-32.jpg?v=3", alt: "Las Vegas boudoir — top-down editorial frame in black lace bra and panties bathed in dramatic window-light shadows", 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 ${VB_GOLD}`, overflow: "hidden", background: VB_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 VB Gallery" className="vb-gallery-section" style={{ background: VB_WHITE, padding: "160px 0 160px", scrollMarginTop: 100 }}>
      <style>{`
        @media (max-width: 640px) {
          .vb-gallery-section { padding: 88px 0 88px !important; }
          .vb-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 }}>
          <VbGoldRule width={36} />
          <VbEyebrow>The Work</VbEyebrow>
          <VbGoldRule width={36} />
        </div>
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: VB_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: VB_GOLD }}>portfolio</em>.
        </h2>
        <p style={{
          fontFamily: "Gloock, serif", fontStyle: "italic", color: VB_GREY,
          fontSize: 16, margin: 0,
        }}>
          Selected sessions from the Las Vegas 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: VB_BEIGE, display: "flex", alignItems: "center", justifyContent: "center", border: `1px solid ${VB_GOLD}` }}>
            <span style={{ fontFamily: "Gloock, serif", fontStyle: "italic", color: VB_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: VB_INK,
            background: "transparent", border: `1px solid ${VB_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: VB_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: VB_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: VB_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 VbIncluded() {
  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 VB Included" style={{ background: VB_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 }}>
            <VbGoldRule width={36} />
            <VbEyebrow>Every Session Includes</VbEyebrow>
            <VbGoldRule width={36} />
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: VB_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: VB_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}>
              <VbGoldRule width={32} style={{ display: "block", marginBottom: 20 }} />
              <div style={{
                fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11,
                letterSpacing: "0.32em", textTransform: "uppercase", color: VB_GOLD, marginBottom: 14,
              }}>{it.num}</div>
              <h3 style={{
                fontFamily: "Gloock, serif", fontWeight: 400, color: VB_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>
  );
}

// ---------- 7. REAL WOMEN. REAL LIVES. ----------
function VbBeforeAfter() {
  const pairs = [
    { before: "/images/vb-ba-1-before.jpg", after: "/images/vb-ba-1-after.jpg",
      name: "RACHEL", context: "Mother of three. Marketing director. First boudoir session at 42." },
    { before: "/images/vb-ba-2-before.jpg", after: "/images/vb-ba-2-after.jpg",
      name: "DANIELLE", context: "Recently divorced. Anniversary gift to herself." },
    { before: "/images/vb-ba-3-before.jpg", after: "/images/vb-ba-3-after.jpg",
      name: "MEREDITH", context: "Thirty-fifth birthday. Hadn't had a professional photo of herself since her wedding." },
  ];
  return (
    <section data-screen-label="07 VB BeforeAfter" style={{ background: VB_WHITE, padding: "0 48px 160px" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 96 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
            <VbGoldRule width={36} />
            <VbEyebrow>Real Women. Real Lives.</VbEyebrow>
            <VbGoldRule width={36} />
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: VB_INK,
            fontSize: "clamp(34px, 4.6vw, 56px)", lineHeight: 1.08,
            letterSpacing: "-0.005em", margin: "0 0 18px 0", textWrap: "balance",
          }}>
            Not models. <em style={{ fontStyle: "italic", color: VB_GOLD }}>Mothers, founders, friends.</em>
          </h2>
          <p style={{
            fontFamily: "Gloock, serif", fontStyle: "italic", color: VB_GREY,
            fontSize: 16, lineHeight: 1.6, maxWidth: 640, margin: "0 auto", textWrap: "balance",
          }}>
            Every woman on this page walked in nervous. Every woman walked out seeing herself for the first time.
          </p>
        </div>
        <div style={{ display: "grid", gap: 96 }}>
          {pairs.map((p, i) => (
            <div key={i} className="vb-ba-pair" style={{
              display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 32, alignItems: "end",
            }}>
              <div>
                <div style={{
                  fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 9.5,
                  letterSpacing: "0.4em", textTransform: "uppercase", color: VB_GREY, marginBottom: 12,
                }}>Before</div>
                <div style={{ aspectRatio: "4/5", overflow: "hidden", background: VB_BEIGE, opacity: 0.92 }}>
                  <img src={p.before}
                    alt={`Las Vegas boudoir before-and-after — ${p.name.toLowerCase()} arrived nervous at J Renee Studios`}
                    style={{ width: "100%", height: "100%", objectFit: "cover", filter: "saturate(0.6) brightness(1.04)" }}/>
                </div>
              </div>
              <div>
                <div style={{
                  fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 9.5,
                  letterSpacing: "0.4em", textTransform: "uppercase", color: VB_GOLD, marginBottom: 12,
                }}>After</div>
                <div style={{ aspectRatio: "4/5", overflow: "hidden", background: VB_INK }}>
                  <img src={p.after}
                    alt={`Las Vegas boudoir final editorial portrait — ${p.name.toLowerCase()} at J Renee Studios`}
                    style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
                </div>
              </div>
              <div style={{ gridColumn: "1 / -1", textAlign: "center", paddingTop: 8 }}>
                <span style={{
                  fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11,
                  letterSpacing: "0.36em", textTransform: "uppercase", color: VB_INK,
                }}>{p.name}</span>
                <span style={{ display: "inline-block", width: 24, height: 1, background: VB_GOLD, margin: "0 14px", verticalAlign: "middle" }} />
                <span style={{
                  fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 16, color: "#3a342e",
                }}>{p.context}</span>
              </div>
            </div>
          ))}
        </div>
        <p style={{
          textAlign: "center", marginTop: 72,
          fontFamily: "Gloock, serif", fontStyle: "italic", color: VB_GOLD,
          fontSize: 18,
        }}>
          This is what showing up looks like.
        </p>
      </div>
    </section>
  );
}

Object.assign(window, { VbGallery, VbIncluded, VbBeforeAfter });
