// Boise Maternity — Sections 4 (Documented Not Posed), 5 (A Family Moment), 6 (What's Included)

// ---------- 4. DOCUMENTED, NOT POSED ----------
function BmFraming() {
  return (
    <section data-screen-label="04 BM Framing" 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>The Framing</VmEyebrow>
          <VmGoldRule width={36} />
        </div>
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: VM_INK,
          fontSize: "clamp(36px, 5vw, 64px)", lineHeight: 1.08,
          letterSpacing: "-0.005em", margin: "0 0 56px 0", textWrap: "balance",
        }}>
          Editorial. Intentional. <em style={{ fontStyle: "italic", color: VM_GOLD }}>Authentic.</em>
        </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" }}>
            The maternity images you've seen across the internet — the floating-on-water shots, the gauzy-dress-in-a-field shots, the over-styled goddess moments — were made for a specific moment in time. That moment has passed.
          </p>
          <p style={{
            margin: "36px 0", textAlign: "center",
            fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 24,
            color: VM_INK, lineHeight: 1.4,
          }}>
            What I make is different.
          </p>
          <p style={{ margin: "0 0 22px 0" }}>
            Refined. Intentional. Authentic. The kind of editorial photography that shows up in magazines — images that capture this chapter, hold up in fifteen years, and still feel like you when your child is old enough to look at them.
          </p>
          <p style={{ margin: "0 0 22px 0" }}>
            You will be guided through every pose. Every angle. Every expression.
          </p>
          <p style={{ margin: "0 0 22px 0" }}>
            But what we make together will not look like a maternity photo.
          </p>
          <p style={{
            margin: "36px 0 0 0", textAlign: "center",
            fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 28,
            color: VM_GOLD, lineHeight: 1.3,
          }}>
            It will look like a portrait.
          </p>
        </div>
      </div>
    </section>
  );
}

// ---------- 5. A FAMILY MOMENT ----------
function BmFamilyMoment() {
  const cards = [
    { n: "01", label: "Solo",
      body: "A full editorial maternity session focused entirely on her — the body in transition, the chapter of becoming, the woman before she becomes a mother to one more." },
    { n: "02", label: "With your partner",
      body: "Your partner is welcome in any portion of the session. Some of the most striking maternity portraits are the ones that capture the relationship at this exact moment — the way he looks at her right now, before everything changes again." },
    { n: "03", label: "With your children",
      body: "Children are welcome in any portion of the session. The way they touch her belly. The way they look at her differently, knowing what's coming. A family of three becoming a family of four — captured the way it actually felt." },
  ];
  return (
    <section data-screen-label="05 BM Family Moment" style={{ background: VM_BEIGE, padding: "180px 48px" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
            <VmGoldRule width={36} />
            <VmEyebrow>A Family Moment</VmEyebrow>
            <VmGoldRule width={36} />
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: VM_INK,
            fontSize: "clamp(34px, 4.4vw, 56px)", lineHeight: 1.1,
            letterSpacing: "-0.005em", margin: "0 0 40px 0", textWrap: "balance",
          }}>
            Welcome the people who define <em style={{ fontStyle: "italic", color: VM_GOLD }}>this chapter</em> with you.
          </h2>
          <p style={{
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 16,
            lineHeight: 1.85, color: "#2a2622", margin: 0, maxWidth: 640, marginInline: "auto",
          }}>
            Modern Maternity sessions are built around her — but not necessarily of her alone. Whoever is part of this chapter is welcome to be part of these images, equally.
          </p>
        </div>
        <div className="grid-3" style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32, marginTop: 80,
        }}>
          {cards.map(c => (
            <div key={c.n} style={{
              background: VM_WHITE, padding: "56px 40px",
              border: `1px solid rgba(201,168,76,0.4)`,
            }}>
              <VmGoldRule width={40} style={{ marginBottom: 28 }} />
              <div style={{
                fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 13,
                letterSpacing: "0.32em", color: VM_GOLD, marginBottom: 16, textTransform: "uppercase",
              }}>{c.n}</div>
              <h3 style={{
                fontFamily: "Gloock, serif", fontWeight: 400, color: VM_INK,
                fontSize: 24, lineHeight: 1.2, margin: "0 0 22px 0", letterSpacing: "-0.005em",
              }}>{c.label}</h3>
              <p style={{
                fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 14.5,
                lineHeight: 1.8, color: "#3a342e", margin: 0,
              }}>{c.body}</p>
            </div>
          ))}
        </div>
        <p style={{
          marginTop: 48, textAlign: "center",
          fontFamily: "Poppins, sans-serif", fontStyle: "italic", fontWeight: 300,
          fontSize: 14, color: VM_GREY,
        }}>
          All three combinations are included. There's no upcharge for adding your family.
        </p>
      </div>
    </section>
  );
}

// ---------- 6. WHAT'S INCLUDED ----------
function BmIncluded() {
  const items = [
    { n: "01", label: "Professional hair and makeup",
      body: "With my in-studio team. Editorial-grade, designed for camera and tuned for maternity portraiture." },
    { n: "02", label: "Wardrobe planning and the studio's maternity collection",
      body: "A wardrobe consultation is sent in advance. The studio also has a curated maternity wardrobe collection available for use — so you don't have to buy something you'll only wear once." },
    { n: "03", label: "Fully guided posing",
      body: "I walk you through every pose, every angle, every expression — start to finish. You're never standing there wondering what to do." },
    { n: "04", label: "A private, all-female studio",
      body: "Every person you'll meet on the day of your session is a woman. The photographer behind the camera is always me." },
    { n: "05", label: "Every image fully retouched",
      body: "Editorial standard, every frame. Color and black-and-white where appropriate." },
    { n: "06", label: "Next-day private gallery reveal",
      body: "We hop on a Zoom together, walk through your gallery, and narrow to your favorites. You only purchase what you love." },
  ];
  return (
    <section data-screen-label="06 BM Included" style={{ background: VM_WHITE, padding: "180px 48px" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 88 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
            <VmGoldRule width={36} />
            <VmEyebrow>Every Session Includes</VmEyebrow>
            <VmGoldRule width={36} />
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: VM_INK,
            fontSize: "clamp(34px, 4.4vw, 56px)", lineHeight: 1.08,
            letterSpacing: "-0.005em", margin: 0, textWrap: "balance",
          }}>
            What you walk in with.<br/>What you <em style={{ fontStyle: "italic", color: VM_GOLD }}>walk out</em> with.
          </h2>
        </div>
        <div className="grid-3" style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "56px 48px",
        }}>
          {items.map(it => (
            <div key={it.n}>
              <VmGoldRule width={32} style={{ marginBottom: 22 }} />
              <div style={{
                fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 12.5,
                letterSpacing: "0.32em", color: VM_GOLD, marginBottom: 14, textTransform: "uppercase",
              }}>{it.n}</div>
              <h3 style={{
                fontFamily: "Gloock, serif", fontWeight: 400, color: VM_INK,
                fontSize: 20, lineHeight: 1.25, margin: "0 0 18px 0", letterSpacing: "-0.005em",
              }}>{it.label}</h3>
              <p style={{
                fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 14,
                lineHeight: 1.78, color: "#3a342e", margin: 0,
              }}>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { BmFraming, BmFamilyMoment, BmIncluded });
