// Vegas Boudoir — Sections 1-4: Hero, Experience, Why, Investment
// Uses primitives from vb-chrome.jsx (already on window)

// ---------- 1. HERO ----------
function VbHero() {
  return (
    <section data-screen-label="01 VB Hero" style={{
      position: "relative", height: "100vh", minHeight: 760, background: VB_INK, overflow: "hidden", marginTop: -1,
    }}>
      <img
        src="/images/vb-hero.jpg"
        alt="Las Vegas boudoir photographer J Renee Studios — signature editorial black-and-white portrait"
        fetchpriority="high"
        decoding="async"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 65%", display: "block" }}
      />
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.05) 26%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%)",
      }} />
      <div style={{
        position: "absolute", inset: 0, display: "flex", flexDirection: "column", justifyContent: "flex-end",
        padding: "0 56px 96px", maxWidth: 1280, margin: "0 auto",
      }}>
        <VbEyebrow color={VB_GOLD} style={{ marginBottom: 24, color: VB_GOLD }}>Las Vegas &nbsp;·&nbsp; Modern Boudoir</VbEyebrow>
        <h1 className="hero-h1" style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: VB_WHITE,
          fontSize: "clamp(48px, 8vw, 116px)", lineHeight: 1.04,
          letterSpacing: "-0.005em", margin: 0, textWrap: "balance", maxWidth: 1100,
        }}>
          Finally, images of yourself you <em style={{ fontStyle: "italic", color: "#efe5cf" }}>actually love</em>.
        </h1>
        <p style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 16,
          lineHeight: 1.7, color: "rgba(255,255,255,0.86)", maxWidth: 600,
          margin: "40px 0 0 0",
        }}>
          Luxury boudoir photography in a private, all-female Las Vegas studio.
        </p>
      </div>
    </section>
  );
}

// ---------- 2. THE EXPERIENCE ----------
function VbExperience() {
  return (
    <section id="experience" data-screen-label="02 VB Experience" style={{ background: VB_WHITE, padding: "160px 48px", scrollMarginTop: 100 }}>
      <div className="grid-2" style={{
        maxWidth: 1280, margin: "0 auto",
        display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 96, alignItems: "center",
      }}>
        <div style={{ aspectRatio: "4/5", overflow: "hidden", background: VB_INK }}>
          <img src="/images/vb-experience.jpg"
            alt="Las Vegas boudoir studio interior — vertical editorial detail of the experience at J Renee Studios"
            style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
        </div>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
            <VbGoldRule width={36} />
            <VbEyebrow>The Experience</VbEyebrow>
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: VB_INK,
            fontSize: "clamp(34px, 4.4vw, 56px)", lineHeight: 1.1,
            letterSpacing: "-0.005em", margin: "0 0 36px 0", textWrap: "balance",
          }}>
            More than a <em style={{ fontStyle: "italic", color: VB_GOLD }}>photoshoot</em>.
          </h2>
          <div style={{
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 16,
            lineHeight: 1.85, color: "#2a2622",
          }}>
            <p style={{ margin: "0 0 22px 0" }}>
              Every boudoir session at J Renee Studios is designed to be more than a photoshoot — it's a transformational experience built around you. From your first consultation to the moment you see yourself in your reveal, every detail is curated to help you feel seen, celebrated, and completely at ease.
            </p>
            <p style={{ margin: 0 }}>
              The Las Vegas studio is a private, judgment-free space where women of every shape, size, and story come to reconnect with themselves. You don't need to be a certain size, age, or confidence level to walk through our doors — you just need to show up.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- FILM ----------
function VbFilm() {
  const [play, setPlay] = React.useState(false);
  return (
    <section data-screen-label="VB Film" style={{ background: VB_INK, padding: "140px 48px" }}>
      <div style={{ maxWidth: 1080, margin: "0 auto" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 28, justifyContent: "center" }}>
          <VbGoldRule width={36} />
          <VbEyebrow color={VB_GOLD} style={{ color: VB_GOLD }}>The Film</VbEyebrow>
          <VbGoldRule width={36} />
        </div>
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: VB_WHITE,
          fontSize: "clamp(34px, 4.4vw, 56px)", lineHeight: 1.1,
          letterSpacing: "-0.005em", margin: "0 0 48px 0", textAlign: "center", textWrap: "balance",
        }}>
          See the experience in <em style={{ fontStyle: "italic", color: VB_GOLD }}>motion</em>.
        </h2>
        <div style={{
          position: "relative", aspectRatio: "16 / 9", overflow: "hidden",
          borderRadius: 6, background: "#000", boxShadow: "0 30px 80px rgba(0,0,0,0.45)",
        }}>
          {play ? (
            <iframe
              src="https://www.youtube-nocookie.com/embed/ghYMgST1TMI?rel=0&modestbranding=1&autoplay=1"
              title="J Renee Studios — Modern Boudoir film"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: 0, display: "block" }}
            />
          ) : (
            <button type="button" onClick={() => setPlay(true)}
              aria-label="Play the J Renee Studios film"
              style={{
                position: "absolute", inset: 0, width: "100%", height: "100%", padding: 0,
                border: 0, cursor: "pointer", display: "block", background: "#000",
              }}>
              <img
                src="https://i.ytimg.com/vi/ghYMgST1TMI/maxresdefault.jpg"
                alt="J Renee Studios — Modern Boudoir film preview"
                loading="lazy"
                onError={(e) => { if (!e.currentTarget.dataset.fb) { e.currentTarget.dataset.fb = "1"; e.currentTarget.src = "https://i.ytimg.com/vi/ghYMgST1TMI/hqdefault.jpg"; } }}
                style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block", opacity: 0.8 }}
              />
              <span aria-hidden="true" style={{
                position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)",
                width: 84, height: 84, borderRadius: "50%", background: "rgba(201,168,76,0.92)",
                display: "flex", alignItems: "center", justifyContent: "center",
                boxShadow: "0 10px 40px rgba(0,0,0,0.4)",
              }}>
                <span style={{
                  width: 0, height: 0, marginLeft: 6,
                  borderTop: "15px solid transparent", borderBottom: "15px solid transparent",
                  borderLeft: "25px solid #1A1A1A",
                }} />
              </span>
            </button>
          )}
        </div>
      </div>
    </section>
  );
}

// ---------- 3. THE WHY (mirrored) ----------
function VbWhy() {
  return (
    <section data-screen-label="03 VB Why" style={{ background: VB_WHITE, padding: "0 48px 160px" }}>
      <div className="grid-2" style={{
        maxWidth: 1280, margin: "0 auto",
        display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 96, alignItems: "center",
      }}>
        <div className="why-copy">
          <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
            <VbGoldRule width={36} />
            <VbEyebrow>The Why</VbEyebrow>
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: VB_INK,
            fontSize: "clamp(34px, 4.4vw, 56px)", lineHeight: 1.1,
            letterSpacing: "-0.005em", margin: "0 0 36px 0", textWrap: "balance",
          }}>
            Why women <em style={{ fontStyle: "italic", color: VB_GOLD }}>book</em>.
          </h2>
          <div style={{
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 16,
            lineHeight: 1.85, color: "#2a2622",
          }}>
            <p style={{ margin: "0 0 22px 0" }}>
              Women book their Las Vegas boudoir session for all kinds of reasons — a milestone birthday, a divorce that finally feels like freedom, a body they've worked hard for, or simply the quiet decision that it's time to do something just for themselves.
            </p>
            <p style={{ margin: "0 0 22px 0" }}>
              Whatever brings you here, the experience is the same: a space where you feel powerful, beautiful, and worthy of being photographed.
            </p>
            <p style={{ margin: 0 }}>
              Boudoir photography isn't about performing for the camera. It's about seeing yourself the way the people who love you already do — and finally believing it.
            </p>
          </div>
        </div>
        <div className="why-img" style={{ aspectRatio: "4/5", overflow: "hidden", background: VB_INK }}>
          <img src="/images/vb-why.jpg?v=2"
            alt="Las Vegas boudoir editorial portrait — confident woman photographed at J Renee Studios"
            style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
        </div>
      </div>
    </section>
  );
}

// ---------- 4. THE INVESTMENT ----------
function VbInvestment() {
  return (
    <section data-screen-label="04 VB Investment" style={{ background: VB_BEIGE, padding: "160px 48px" }}>
      <div className="grid-2" style={{
        maxWidth: 1280, margin: "0 auto",
        display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 96, alignItems: "center",
      }}>
        <div style={{ aspectRatio: "4/5", overflow: "hidden", background: VB_INK }}>
          <img src="/images/vb-investment.jpg?v=2"
            alt="Las Vegas boudoir heirloom album detail — luxury keepsake from J Renee Studios"
            style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
        </div>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
            <VbGoldRule width={36} />
            <VbEyebrow>The Investment</VbEyebrow>
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: VB_INK,
            fontSize: "clamp(34px, 4.4vw, 56px)", lineHeight: 1.1,
            letterSpacing: "-0.005em", margin: "0 0 36px 0", textWrap: "balance",
          }}>
            Heirloom, not <em style={{ fontStyle: "italic", color: VB_GOLD }}>transaction</em>.
          </h2>
          <div style={{
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 16,
            lineHeight: 1.85, color: "#2a2622",
          }}>
            <p style={{ margin: "0 0 22px 0" }}>
              A luxury boudoir session is one of the most personal investments a woman can make in herself. These are not just photographs — they are heirloom pieces that capture who you are right now, in this chapter of your life.
            </p>
            <p style={{ margin: "0 0 22px 0" }}>
              Clients often tell me their boudoir images become some of the most treasured things they own.
            </p>
            <p style={{ margin: 0, fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 20, lineHeight: 1.5, color: VB_INK, paddingTop: 8 }}>
              If you've been thinking about booking a boudoir photographer in Las Vegas, that feeling isn't an accident — it's your sign.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { VbHero, VbExperience, VbWhy, VbInvestment });