// Boise Boudoir — Sections 1-4: Hero, Experience, Why, Investment
// Uses primitives from bb-chrome.jsx (already on window)
// Reuses Vegas image assets per client direction (same physical photographs)

// ---------- 1. HERO ----------
function BbHero() {
  return (
    <section data-screen-label="01 BB Hero" style={{
      position: "relative", height: "100vh", minHeight: 760, background: BB_INK, overflow: "hidden", marginTop: -1,
    }}>
      <img
        src="/images/vb-hero.jpg"
        alt="Boise 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",
      }}>
        <BbEyebrow color={BB_GOLD} style={{ marginBottom: 24, color: BB_GOLD }}>Boise &nbsp;·&nbsp; Modern Boudoir</BbEyebrow>
        <h1 className="hero-h1" style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: BB_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 Boise studio.
        </p>
      </div>
    </section>
  );
}

// ---------- 2. THE EXPERIENCE ----------
function BbExperience() {
  return (
    <section id="experience" data-screen-label="02 BB Experience" style={{ background: BB_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: BB_INK }}>
          <img src="/images/vb-experience.jpg"
            alt="Boise 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 }}>
            <BbGoldRule width={36} />
            <BbEyebrow>The Experience</BbEyebrow>
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: BB_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: BB_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 Boise 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 BbFilm() {
  const [play, setPlay] = React.useState(false);
  return (
    <section data-screen-label="BB Film" style={{ background: BB_INK, padding: "140px 48px" }}>
      <div style={{ maxWidth: 1080, margin: "0 auto" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 28, justifyContent: "center" }}>
          <BbGoldRule width={36} />
          <BbEyebrow color={BB_GOLD} style={{ color: BB_GOLD }}>The Film</BbEyebrow>
          <BbGoldRule width={36} />
        </div>
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: BB_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: BB_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 BbWhy() {
  return (
    <section data-screen-label="03 BB Why" style={{ background: BB_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 }}>
            <BbGoldRule width={36} />
            <BbEyebrow>The Why</BbEyebrow>
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: BB_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: BB_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 Boise 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: BB_INK }}>
          <img src="/images/vb-why.jpg?v=2"
            alt="Boise 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 BbInvestment() {
  return (
    <section id="pricing" data-screen-label="04 BB Investment" style={{ background: BB_BEIGE, 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: BB_INK }}>
          <img src="/images/vb-investment.jpg?v=2"
            alt="Boise 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 }}>
            <BbGoldRule width={36} />
            <BbEyebrow>The Investment</BbEyebrow>
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: BB_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: BB_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: BB_INK, paddingTop: 8 }}>
              If you've been thinking about booking a boudoir photographer in Boise, that feeling isn't an accident — it's your sign.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { BbHero, BbExperience, BbWhy, BbInvestment });