// Vegas Maternity — Sections 7 (Trust Block), 8 (FAQ), 9 (Final CTA)

const VM_FAQS = [
  { q: "When in pregnancy should I book my Las Vegas maternity session?", a: "I recommend scheduling your session between 26 and 34 weeks. That's the window when the body has rounded fully but you're still comfortable enough to enjoy the experience. Earlier than 26 weeks and the bump may not photograph the way you'll want it to. Later than 34 weeks and most women feel too tired to enjoy a full session." },
  { q: "How much does a Las Vegas Modern Maternity session cost?", a: "The session fee is $490 and includes professional hair and makeup, wardrobe planning and access to the studio's maternity wardrobe collection, the fully guided studio session, every image retouched, and a next-day private gallery reveal. Image collections are purchased separately after your reveal — single images start at $250 and collections start at $1,997 for ten images. Most maternity clients invest between $2,000 and $4,000 on a collection." },
  { q: "Is this only for solo maternity portraits, or can my partner and kids be in the photos?", a: "Sessions are built around her, but the whole family is welcome. Your partner can be in part of the session. Your older children can be in part of the session. There's no upcharge for including them — they're part of the portrait of who you are right now." },
  { q: "Do you have maternity wardrobe in the studio?", a: "Yes. Wardrobe planning is included with every session, and the studio has a curated maternity wardrobe collection available for use — so you don't have to buy something you'll only wear once. You're welcome to bring your own pieces too. Most clients use a mix." },
  { q: "How long is a Las Vegas maternity session?", a: "About two and a half hours, start to finish. That includes professional hair and makeup, settling in, your full session, and a few minutes to decompress before you leave. Sessions that include older children may run slightly longer to accommodate breaks and wardrobe changes." },
  { q: "I'm nervous about being photographed pregnant. Is that normal?", a: "Yes. Almost every woman who books a maternity session feels this way at first — bodies look unfamiliar, energy levels are different, the whole thing can feel exposed in a way she's not used to. Within the first ten minutes of being in the studio, the nerves are usually gone. My job is to support you, guide you, and do this with you — not to put you in front of a camera and ask you to figure it out." },
  { q: "I've gained weight or my body doesn't look the way it usually does. Should I wait?", a: "No. The body you have right now is the body that's making a person — and that's exactly the body these images are meant to celebrate. I've photographed thousands of women, and I have never once photographed a woman who didn't love her images afterward. Posing, lighting, and twenty years of experience do the work. You don't have to change a single thing." },
  { q: "Do you offer payment plans?", a: "Yes. I offer Affirm, Klarna, and an in-house payment plan. Payment plans can be set up before your session so your images can be delivered at the time of your shoot." },
  { q: "What is your turnaround time?", a: "Your fully retouched gallery is ready the next day for your private Zoom reveal. After you select your images, digital files are delivered within about three days. Albums and wall art take roughly three to four weeks — early enough to have them in hand before the baby arrives if you book the session at the start of the recommended window." },
  { q: "How far in advance should I book my Las Vegas maternity session?", a: "I recommend booking as soon as you know your due date — Las Vegas dates fill quickly, and maternity sessions are uniquely time-sensitive. Most maternity clients book at least 8–12 weeks ahead to lock in the right week of pregnancy." },
  { q: "Who is the photographer for my session?", a: "Me — Jennifer. I'm the only photographer at J. Renée Studios. I shoot every session personally, every frame. There are no associate photographers." },
];

// ---------- 7. TRUST BLOCK ----------
function VmTrust() {
  return (
    <section data-screen-label="07 VM Trust" style={{
      position: "relative", padding: "200px 48px", overflow: "hidden",
    }}>
      <img
        src="/images/vegas-maternity.jpg"
        alt="Las Vegas maternity photographer with twenty years of experience"
        style={{
          position: "absolute", inset: 0, width: "100%", height: "100%",
          objectFit: "cover", objectPosition: "center 40%",
        }}
      />
      <div style={{ position: "absolute", inset: 0, background: "rgba(10,9,7,0.72)" }} />
      <div style={{ position: "relative", zIndex: 2, maxWidth: 880, margin: "0 auto", color: VM_WHITE, textAlign: "center" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
          <VmGoldRule width={36} />
          <VmEyebrow>Twenty Years Behind the Lens</VmEyebrow>
          <VmGoldRule width={36} />
        </div>
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: VM_WHITE,
          fontSize: "clamp(36px, 5.5vw, 76px)", lineHeight: 1.06,
          letterSpacing: "-0.005em", margin: "0 0 48px 0", textWrap: "balance",
        }}>
          Maternity images you'll want to <em style={{ fontStyle: "italic", color: VM_GOLD }}>display</em>.
        </h2>
        <div style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 16,
          lineHeight: 1.85, color: "rgba(255,255,255,0.88)", textAlign: "left", maxWidth: 720, margin: "0 auto",
        }}>
          <p style={{ margin: "0 0 22px 0" }}>
            I've been a working photographer for over twenty years. Before boudoir and portraits became the heart of my work, I spent years photographing newborns and maternity — being trusted with families through the most personal seasons of their lives.
          </p>
          <p style={{ margin: "0 0 22px 0" }}>
            I know exactly how to photograph a body in transition. I know how to capture a couple in this exact chapter without it feeling staged. I know how to keep older children comfortable enough to be themselves in front of the camera.
          </p>
          <p style={{ margin: 0 }}>
            These are not photographs you tuck into a baby book. They are images you'll want to display — above your bed, in the nursery, in the home you're about to fill with one more person.
          </p>
        </div>
        <div style={{ marginTop: 56 }}>
          <VmBtn variant="gold" href="/inquire/">Tell me your story → Inquire</VmBtn>
        </div>
      </div>
    </section>
  );
}

// ---------- 8. FAQ ----------
function VmFAQ() {
  const [open, setOpen] = vmUseState(0);
  return (
    <section data-screen-label="08 VM FAQ" style={{ background: VM_BEIGE, padding: "180px 48px" }}>
      <div style={{ maxWidth: 980, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 88 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
            <VmGoldRule width={36} />
            <VmEyebrow>Frequently Asked</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",
          }}>
            The questions women ask <em style={{ fontStyle: "italic", color: VM_GOLD }}>before booking</em>.
          </h2>
        </div>
        <div>
          {VM_FAQS.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i}
                style={{ borderTop: i === 0 ? `1px solid ${VM_GOLD}` : "none", borderBottom: `1px solid ${VM_GOLD}` }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: "100%", textAlign: "left", background: "transparent", border: "none",
                    padding: "32px 0", cursor: "pointer",
                    display: "flex", alignItems: "center", justifyContent: "space-between", gap: 32,
                  }}>
                  <span style={{
                    fontFamily: "Gloock, serif", fontWeight: 400, color: VM_INK,
                    fontSize: 22, lineHeight: 1.35, textWrap: "balance",
                  }}>{f.q}</span>
                  <span style={{
                    flexShrink: 0, width: 32, height: 32, borderRadius: "50%", border: `1px solid ${VM_GOLD}`,
                    color: VM_GOLD, fontSize: 18, lineHeight: "30px", textAlign: "center",
                    transition: "transform 220ms ease, background-color 220ms ease",
                    transform: isOpen ? "rotate(45deg)" : "rotate(0deg)",
                    background: isOpen ? VM_GOLD : "transparent",
                  }}>
                    <span style={{ color: isOpen ? VM_WHITE : VM_GOLD, display: "inline-block" }}>+</span>
                  </span>
                </button>
                <div
                  style={{
                    maxHeight: isOpen ? 1200 : 0, overflow: "hidden",
                    transition: "max-height 320ms ease",
                  }}>
                  <p style={{
                    fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 15.5,
                    lineHeight: 1.85, color: "#3a342e", margin: "0 0 32px 0", maxWidth: 820,
                  }}>{f.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ---------- 9. FINAL CTA ----------
function VmFinalCTA() {
  return (
    <section id="inquire" data-screen-label="09 VM Final CTA" style={{ background: VM_WHITE, padding: "180px 48px" }}>
      <div style={{ maxWidth: 720, margin: "0 auto", textAlign: "center" }}>
        <VmGoldRule width={48} style={{ display: "inline-block", marginBottom: 40 }} />
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: VM_INK,
          fontSize: "clamp(40px, 5.5vw, 72px)", lineHeight: 1.06,
          letterSpacing: "-0.005em", margin: "0 0 32px 0",
        }}>
          Tell me your <em style={{ fontStyle: "italic", color: VM_GOLD }}>story</em>.
        </h2>
        <p style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 16,
          lineHeight: 1.8, color: "#3a342e", margin: "0 0 56px 0", maxWidth: 560, marginLeft: "auto", marginRight: "auto",
        }}>
          Every session starts with a conversation. I respond to every inquiry personally, usually within 24 hours.
        </p>
        <VmBtn variant="gold" href="/inquire/">Inquire</VmBtn>
      </div>
    </section>
  );
}

Object.assign(window, { VmTrust, VmFAQ, VmFinalCTA, VM_FAQS });
