// LV Modern Portraits — Sections D: FAQ + Final CTA

// ---------- 9. FAQ ----------
function VpFAQItem({ q, a, defaultOpen = false }) {
  const [open, setOpen] = vpUseState(defaultOpen);
  return (
    <div style={{ borderTop: `1px solid rgba(201,168,76,0.4)` }}>
      <button onClick={()=>setOpen(o=>!o)} aria-expanded={open} style={{
        width: "100%", textAlign: "left", background: "transparent", border: "none",
        padding: "28px 4px", cursor: "pointer",
        display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 32,
      }}>
        <span style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: VP_INK,
          fontSize: 19, lineHeight: 1.35, letterSpacing: "-0.005em",
        }}>{q}</span>
        <span style={{
          flexShrink: 0, fontFamily: "Gloock, serif", color: VP_GOLD,
          fontSize: 24, lineHeight: 1, transform: open ? "rotate(45deg)" : "rotate(0)",
          transition: "transform 220ms ease",
        }}>+</span>
      </button>
      <div style={{
        maxHeight: open ? 600 : 0, overflow: "hidden",
        transition: "max-height 320ms ease, opacity 220ms ease",
        opacity: open ? 1 : 0,
      }}>
        <p style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 14.5,
          lineHeight: 1.85, color: "#2a2622", margin: 0,
          padding: "0 4px 32px 4px", maxWidth: 820,
        }}>{a}</p>
      </div>
    </div>
  );
}

function VpFAQ() {
  const faqs = [
    { q: "Who is Modern Portraits for?",
      a: "Modern Portraits is for any woman at any age who wants a beautifully made portrait of herself — for a milestone, for a chapter, or for no reason at all beyond the quiet decision that it's time. There's no age requirement, no occasion required, and no body type that doesn't belong here." },
    { q: "Can I include my children in the session?",
      a: "Yes. Modern Portraits sessions can include children, a partner, or anyone who defines this season of her life. The session is built around her — she is the subject — and the people in her life are part of the portrait of who she is right now." },
    { q: "What's the difference between Modern Portraits and the ICONIC Experience 40+?",
      a: "Modern Portraits is open to women of every age and built around an editorial portrait session. The ICONIC Experience 40+ is a signature event experience reserved for women celebrating the chapter that begins at 40 — a full-day rite of passage with editorial styling and a gala-style reveal. Both are luxury portrait experiences; ICONIC is the elevated, event-format version." },
    { q: "How long is a Boise Modern Portraits 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 children may run slightly longer to accommodate breaks and wardrobe changes." },
    { q: "How much does a Boise Modern Portraits session cost?",
      a: "The session fee is $490 and includes professional hair and makeup, wardrobe and styling consultation, the fully guided studio session, every image retouched, and a next-day private gallery reveal. Image collections are purchased separately after your reveal and are designed around how many images you fall in love with. Most clients invest between $2,000 and $5,000 on a luxury collection." },
    { q: "I'm nervous about being in front of a camera. Is that normal?",
      a: "Yes. Almost every woman who walks into a Modern Portraits session feels this way. And almost every one tells me, within the first ten minutes, that the nerves are 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: "What if I don't like how I look in photos?",
      a: "Most women who book me say this exact thing in our first conversation. And then they see their gallery the next day and tell me they've never loved photos of themselves more in their life. Being photogenic isn't a personality trait — it's a skill the photographer brings. You don't have to be photogenic. You just have to show up." },
    { 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." },
    { q: "How far in advance should I book my Boise Modern Portraits session?",
      a: "I recommend booking 30–60 days in advance — Boise dates fill quickly. Last-minute sessions are sometimes possible, but the calendar is rarely empty." },
    { 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." },
  ];
  return (
    <section data-screen-label="09 VP FAQ" style={{ background: VP_BEIGE, padding: "160px 48px" }}>
      <div style={{ maxWidth: 920, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 72 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
            <VpGoldRule width={36} />
            <VpEyebrow>Frequently Asked</VpEyebrow>
            <VpGoldRule width={36} />
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: VP_INK,
            fontSize: "clamp(32px, 4.4vw, 54px)", lineHeight: 1.1,
            letterSpacing: "-0.005em", margin: 0, textTransform: "none", textWrap: "balance",
          }}>
            The questions women ask <em style={{ fontStyle: "italic", color: VP_GOLD }}>before</em> booking.
          </h2>
        </div>
        <div style={{ borderBottom: `1px solid rgba(201,168,76,0.4)` }}>
          {faqs.map((f, i) => <VpFAQItem key={i} q={f.q} a={f.a} defaultOpen={i === 0} />)}
        </div>
      </div>
    </section>
  );
}

// ---------- 10. FINAL CTA ----------
function VpFinalCTA() {
  return (
    <section data-screen-label="10 VP Final CTA" id="inquire" style={{
      background: VP_WHITE, padding: "180px 48px", textAlign: "center",
    }}>
      <div style={{ maxWidth: 720, margin: "0 auto" }}>
        <VpGoldRule width={64} style={{ marginBottom: 40 }} />
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: VP_INK,
          fontSize: "clamp(40px, 5.6vw, 80px)", lineHeight: 1.06,
          letterSpacing: "-0.005em", margin: "0 0 28px 0", textTransform: "none", textWrap: "balance",
        }}>
          Tell me <em style={{ fontStyle: "italic", color: VP_GOLD }}>your</em> story.
        </h2>
        <p style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 16.5,
          lineHeight: 1.75, color: "#3a342e", margin: "0 0 56px 0",
        }}>
          Every session starts with a conversation. I respond to every inquiry personally, usually within 24 hours.
        </p>
        <VpBtn variant="gold" href="/inquire/" style={{ padding: "22px 44px", fontSize: 11.5 }}>
          Inquire
        </VpBtn>
      </div>
    </section>
  );
}

Object.assign(window, { VpFAQ, VpFinalCTA });