// Vegas Boudoir — Sections 8 (Pricing) and 9 (Trust Block w/ CTA)

// ---------- 8. PRICING ----------
function VbPricing() {
  const tiers = [
    { label: "Session Fee", price: "$490", body: "Includes professional hair and makeup, the client closet, fully guided posing, preparation emails, every image retouched, and your next-day private gallery reveal." },
    { label: "Collections", price: "Starting at $1,997", body: "Image collections are purchased after your gallery reveal, so you only invest in what you love. Most clients invest $2,000–$5,000 on a luxury collection — including a heirloom album, digital images, and wall art credit." },
    { label: "Payment Plans Available", price: null, body: "Affirm, Klarna, and in-house payment plans. Your boudoir session doesn't have to wait on your savings account." },
  ];
  return (
    <section id="pricing" data-screen-label="08 VB Pricing" style={{ background: VB_WHITE, padding: "160px 48px", scrollMarginTop: 100 }}>
      <div style={{ maxWidth: 760, margin: "0 auto", textAlign: "center" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
          <VbGoldRule width={36} />
          <VbEyebrow>The Investment</VbEyebrow>
          <VbGoldRule width={36} />
        </div>
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: VB_INK,
          fontSize: "clamp(40px, 5.5vw, 72px)", lineHeight: 1.05,
          letterSpacing: "-0.005em", margin: "0 0 96px 0",
        }}>
          Pricing.
        </h2>
        <div style={{ display: "grid", gap: 80 }}>
          {tiers.map((t, i) => (
            <div key={i}>
              <VbGoldRule width={40} style={{ display: "inline-block", marginBottom: 22 }} />
              <div style={{
                fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11,
                letterSpacing: "0.42em", textTransform: "uppercase", color: VB_GOLD, marginBottom: 18,
              }}>{t.label}</div>
              {t.price && (
                <div style={{
                  fontFamily: "Gloock, serif", fontWeight: 400, color: VB_INK,
                  fontSize: "clamp(34px, 4.4vw, 52px)", lineHeight: 1.1, marginBottom: 24,
                }}>{t.price}</div>
              )}
              <p style={{
                fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 15,
                lineHeight: 1.8, color: "#3a342e", margin: 0, maxWidth: 600, marginLeft: "auto", marginRight: "auto",
              }}>{t.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- 9. TRUST BLOCK ----------
function VbTrust() {
  return (
    <section data-screen-label="09 VB Trust" style={{
      position: "relative", background: VB_INK, overflow: "hidden",
      padding: "180px 48px", minHeight: 720,
    }}>
      <img src="/images/vb-trust.jpg"
        alt="Las Vegas boudoir photographer with twenty years of experience — moody editorial portrait at J Renee Studios"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 30%", opacity: 0.42 }}/>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.7) 60%, rgba(0,0,0,0.78) 100%)" }}/>
      <div style={{ position: "relative", maxWidth: 980, margin: "0 auto", textAlign: "center" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 36 }}>
          <VbGoldRule width={44} />
          <VbEyebrow color={VB_GOLD}>Twenty Years Behind the Lens</VbEyebrow>
          <VbGoldRule width={44} />
        </div>
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: VB_WHITE,
          fontSize: "clamp(40px, 5.4vw, 72px)", lineHeight: 1.08,
          letterSpacing: "-0.005em", margin: "0 0 44px 0", textWrap: "balance",
        }}>
          You don't need to be photogenic. <em style={{ fontStyle: "italic", color: "#efe5cf" }}>You need the right photographer.</em>
        </h2>
        <div style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 16,
          lineHeight: 1.85, color: "rgba(255,255,255,0.86)", maxWidth: 740, margin: "0 auto 56px",
        }}>
          <p style={{ margin: "0 0 22px 0" }}>
            I've been a working photographer for over twenty years. I've photographed thousands of women — many of them in this exact studio, on this exact floor.
          </p>
          <p style={{ margin: "0 0 22px 0" }}>
            I've never once photographed a woman who didn't love her images. Not because of Photoshop. Because of posing, lighting, and two decades of knowing exactly how to show a woman herself.
          </p>
          <p style={{ margin: 0, fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 22, color: VB_WHITE }}>
            You don't have to change a single thing.
          </p>
        </div>
        <VbBtn variant="gold" href="#inquire">Tell me your story → Inquire</VbBtn>
      </div>
    </section>
  );
}

Object.assign(window, { VbPricing, VbTrust });