// Vegas Maternity — Sections 1 (Hero), 2 (Welcome), 3 (Gallery)

// ---------- 1. HERO ----------
function VmHero() {
  return (
    <section data-screen-label="01 VM Hero" style={{
      position: "relative", height: "100vh", minHeight: 760,
      background: VM_INK, overflow: "hidden",
    }}>
      <img
        src="/images/vegas-maternity.jpg"
        alt="Las Vegas maternity photographer — luxury modern maternity portrait by J. Renée Studios"
        style={{
          position: "absolute", inset: 0, width: "100%", height: "100%",
          objectFit: "cover", objectPosition: "center 30%",
        }}
      />
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.18) 30%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.7) 100%)",
      }} />
      <div style={{
        position: "relative", zIndex: 2, height: "100%",
        maxWidth: 1320, margin: "0 auto", padding: "140px 48px 84px",
        display: "flex", flexDirection: "column", justifyContent: "flex-end",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 18, marginBottom: 36 }}>
          <VmGoldRule width={56} />
          <VmEyebrow color={VM_GOLD}>Las Vegas · Modern Maternity</VmEyebrow>
        </div>
        <h1 className="vm-hero-h1" style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: VM_WHITE,
          fontSize: "clamp(48px, 8.4vw, 132px)", lineHeight: 1.0,
          letterSpacing: "-0.005em", margin: 0, textWrap: "balance", maxWidth: 1100,
        }}>
          Modern <em style={{ fontStyle: "italic", color: "#efe5cf" }}>Maternity</em><br/>Portraits.
        </h1>
        <p style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 17,
          lineHeight: 1.7, color: "rgba(255,255,255,0.88)",
          maxWidth: 580, margin: "44px 0 0 0",
        }}>
          Editorial maternity photography in the Las Vegas studio — for the woman, and for the people who define this chapter with her.
        </p>
      </div>
    </section>
  );
}

// ---------- 2. WELCOME ----------
function VmWelcome() {
  return (
    <section data-screen-label="02 VM Welcome" style={{ background: VM_WHITE, padding: "180px 48px" }}>
      <div style={{ maxWidth: 760, margin: "0 auto", textAlign: "center" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
          <VmGoldRule width={36} />
          <VmEyebrow>Welcome</VmEyebrow>
          <VmGoldRule width={36} />
        </div>
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: VM_INK,
          fontSize: "clamp(28px, 3.2vw, 38px)", lineHeight: 1.2,
          letterSpacing: "-0.005em", margin: "0 0 56px 0", textWrap: "balance",
        }}>
          Las Vegas Modern Maternity Photographer.
        </h2>
        <div style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 16,
          lineHeight: 1.95, color: "#2a2622", textAlign: "left",
        }}>
          <p style={{ margin: "0 0 22px 0" }}>
            Modern Maternity is luxury maternity photography in the Las Vegas studio — built around a single belief: that a woman in this chapter of her life deserves images she'll actually want to display, not tuck into a baby book.
          </p>
          <p style={{ margin: "0 0 22px 0" }}>
            I'm Jennifer — the photographer behind J. Renée Studios. For more than twenty years, I've been documenting women through the chapters that matter, and few chapters are more fleeting than this one.
          </p>
          <p style={{ margin: "0 0 22px 0" }}>
            Every Modern Maternity session is fully guided, fully styled, and built around her. Her partner is welcome. Her older children are welcome. The people who define this chapter with her are part of the portrait of who she is becoming.
          </p>
          <p style={{ margin: 0, fontStyle: "italic" }}>
            This is editorial. This is intentional. This is the kind of session you'll look back on years from now and finally love an image of yourself.
          </p>
        </div>
      </div>
    </section>
  );
}

// ---------- 3. GALLERY (sliding marquee) ----------
function VmGallery() {
  // Pulled from existing Vegas gallery library — swap files in /images to update.
  const images = [
    { src: "/images/vm-gallery-01.jpg", alt: "Las Vegas modern maternity — black-and-white silhouette portrait of a pregnant woman draped in flowing fabric" },
    { src: "/images/vm-gallery-02.jpg", alt: "Las Vegas modern maternity — striking black-and-white silhouette of a pregnant woman in profile" },
    { src: "/images/vm-gallery-03.jpg", alt: "Las Vegas modern maternity — intimate black-and-white couples portrait, partner kissing the belly" },
    { src: "/images/vm-gallery-04.jpg", alt: "Las Vegas modern maternity — editorial black-and-white couples portrait, partner's hands cradling the belly" },
    { src: "/images/vm-gallery-05.jpg", alt: "Las Vegas modern maternity — black-and-white profile portrait in a fitted black turtleneck" },
    { src: "/images/vm-gallery-06.jpg", alt: "Las Vegas modern maternity — joyful black-and-white portrait in a fitted dress and wide-brim hat" },
    { src: "/images/vm-gallery-07.jpg", alt: "Las Vegas modern maternity — editorial silhouette seated on a studio cube" },
    { src: "/images/vm-gallery-08.jpg", alt: "Las Vegas modern maternity — black-and-white family portrait, partner kissing the belly while toddler kisses mother" },
    { src: "/images/vm-gallery-09.jpg", alt: "Las Vegas modern maternity — dramatic low-key black-and-white profile, single light revealing the silhouette" },
    { src: "/images/vm-gallery-10.jpg", alt: "Las Vegas modern maternity — full-length portrait draped in flowing nude chiffon against a textured wall" },
    { src: "/images/vm-gallery-11.jpg", alt: "Las Vegas modern maternity — black-and-white couples portrait, foreheads together with hands cradling the belly" },
    { src: "/images/vm-gallery-12.jpg", alt: "Las Vegas modern maternity — intimate black-and-white couples portrait in studio" },
  ];
  return (
    <PortfolioGrid
      images={images}
      label="03 VM Gallery"
      galleryAria="Las Vegas Modern Maternity gallery"
      subhead="Selected maternity sessions from the Las Vegas studio."
    />
  );
}

Object.assign(window, { VmHero, VmWelcome, VmGallery });