// LV Modern Portraits — Sections A: Hero + Welcome + Sliding Gallery

// ---------- 1. HERO (full-bleed editorial) ----------
function VpHero() {
  return (
    <section data-screen-label="01 VP Hero" style={{
      position: "relative", height: "100vh", minHeight: 760, background: VP_INK, overflow: "hidden",
    }}>
      <img
        src="/images/vegas-portraits.jpg"
        alt="Boise portrait photographer — modern editorial portrait of a woman at J Renee 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.5) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.78) 100%)",
      }} />
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.18) 35%, rgba(0,0,0,0) 60%)",
      }} />
      <div style={{
        position: "relative", zIndex: 2, height: "100%",
        maxWidth: 1320, margin: "0 auto", padding: "0 48px",
        display: "flex", flexDirection: "column", justifyContent: "flex-end",
        paddingBottom: 96, paddingTop: 140,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 18, marginBottom: 36 }}>
          <VpGoldRule width={56} />
          <VpEyebrow>Boise &nbsp;·&nbsp; Modern Portraits</VpEyebrow>
        </div>
        <h1 className="vp-h1" style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: VP_WHITE,
          fontSize: "clamp(46px, 7.6vw, 116px)",
          lineHeight: 1.04, letterSpacing: "-0.005em",
          margin: 0, maxWidth: 1100, textTransform: "none", textWrap: "balance",
        }}>
          A portrait worthy of the woman <em style={{ fontStyle: "italic", color: "#efe5cf" }}>you've become</em>.
        </h1>
        <p style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 16.5,
          lineHeight: 1.7, color: "rgba(255,255,255,0.86)", maxWidth: 600,
          margin: "44px 0 0 0",
        }}>
          Editorial portrait photography for women — at any age, at every chapter.
        </p>
      </div>
    </section>
  );
}

// ---------- 2. WELCOME ----------
function VpWelcome() {
  return (
    <section data-screen-label="02 VP Welcome" style={{ background: VP_WHITE, padding: "160px 48px" }}>
      <div style={{ maxWidth: 760, margin: "0 auto", textAlign: "center" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 40 }}>
          <VpGoldRule width={36} />
          <VpEyebrow>Welcome</VpEyebrow>
          <VpGoldRule width={36} />
        </div>
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: VP_INK,
          fontSize: "clamp(28px, 3.4vw, 40px)", lineHeight: 1.2,
          letterSpacing: "-0.005em", margin: "0 0 44px 0", textTransform: "none",
          textWrap: "balance",
        }}>
          Boise Modern Portraits <em style={{ fontStyle: "italic", color: VP_GOLD }}>Photographer</em>.
        </h2>
        <div style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 16,
          lineHeight: 1.85, color: "#2a2622", textAlign: "left",
        }}>
          <p style={{ margin: "0 0 22px 0" }}>
            Modern Portraits is luxury portrait photography for women — built around a single idea: that a woman, at every age, deserves images of herself that feel like her.
          </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 photographing women through the chapters that matter. The milestone year. The moment of becoming. The body she's worked for. The role she's grown into. The version of herself she's been waiting to be photographed as.
          </p>
          <p style={{ margin: 0 }}>
            Every Modern Portraits session is fully guided, fully supported, and built entirely around her — alone, or with the people who define this season of her life.
          </p>
        </div>
      </div>
    </section>
  );
}

// ---------- 3. SLIDING GALLERY (12 portrait images) ----------
function VpGallery() {
  // 12 vertical portrait images — full natural aspect (no crop).
  // Studio owner can swap files in /images/vp-gallery-NN.jpg.
  const VP_GALLERY = [
    { src: "/images/vp-gallery-01.jpg", alt: "Boise portrait photographer — black and white portrait of a mother holding her baby at J Renee Studios" },
    { src: "/images/vp-gallery-02.jpg", alt: "Boise modern portraits — joyful editorial black and white portrait of a woman in a turtleneck" },
    { src: "/images/vp-gallery-03.jpg", alt: "Boise modern portraits — soft black and white editorial portrait of a woman seated on a stool" },
    { src: "/images/vp-gallery-04.jpg", alt: "Boise portrait photographer — black and white editorial portrait of a woman in a blazer and bustier" },
    { src: "/images/vp-gallery-05.jpg", alt: "Boise modern portraits — black and white editorial beauty portrait of a woman with long hair" },
    { src: "/images/vp-gallery-06.jpg", alt: "Boise portrait photographer — black and white seated portrait of a woman in a fitted dress" },
    { src: "/images/vp-gallery-07.jpg", alt: "Boise modern portraits — joyful black and white portrait of a woman in a white blouse" },
    { src: "/images/vp-gallery-08.jpg", alt: "Boise portrait photographer — playful black and white portrait of a woman with flowing hair" },
    { src: "/images/vp-gallery-09.jpg", alt: "Boise modern portraits — joyful black and white portrait of a woman laughing in a white blazer" },
    { src: "/images/vp-gallery-10.jpg", alt: "Boise portrait photographer — black and white editorial portrait of a woman with short blonde hair" },
    { src: "/images/vp-gallery-11.jpg", alt: "Boise modern portraits — black and white profile portrait of a woman in jeans and a blazer" },
    { src: "/images/vp-gallery-12.jpg", alt: "Boise portrait photographer — black and white editorial portrait of a woman in a white shirt" },
  ];
  return (
    <PortfolioGrid
      images={VP_GALLERY}
      label="03 VP Gallery"
      galleryAria="Boise Modern Portraits gallery"
      subhead="Selected portrait sessions from the Boise studio."
    />
  );
}

Object.assign(window, { VpHero, VpWelcome, VpGallery });