// Vegas Headshots & Branding — Sections 8-9: FAQ, Final CTA

const VH_FAQS = [
  { q: "Why is professional branding photography worth the investment?",
    a: "Because in 2026, your image is your introduction. Before a potential client books a call, hires you, or buys what you sell, she's already met you online — through your LinkedIn, your website, your speaker page, your Instagram. Women whose businesses scale, whose fees climb, and whose calendars stay full have figured out something other women haven't: imagery doesn't decorate a business. It runs it." },
  { q: "How do branding images actually help me make more money?",
    a: "Three ways. First, they raise your perceived authority — clients pay more for the woman who looks like she belongs at the level she's pricing at. Second, they shorten the sales cycle — strong imagery does the trust-building work before the discovery call, which means fewer \"let me think about it\" responses. Third, they unlock new opportunities — speaking gigs, press features, partnership invitations, podcast bookings. The right images don't just support your business. They open doors that were closed before." },
  { q: "What's the difference between a headshot session and a branding session?",
    a: "A traditional headshot is a single image — useful, but limited. A branding session is a full library of imagery built for the way modern businesses actually run: website, social media, press features, speaking decks, ads, and content for the next year of your business. If you're a woman whose work depends on visibility, you need a library, not a single photo." },
  { q: "How much does a Las Vegas branding session cost?",
    a: "The session fee is $495 and includes professional hair and makeup, wardrobe and styling consultation, fully guided posing, and the session with me. Branding image collections start at $1,997 — which includes six of your favorite images, multiple wardrobe choices, and the full session experience. Larger collections are available for women whose businesses need a more comprehensive image library. All collections include digital files and a full commercial license." },
  { q: "Do you offer payment plans?",
    a: "Yes. I offer Affirm, Klarna, and PayPal as payment plan options, and we can also set up an in-house payment plan before your session so your images can be delivered at the time of your shoot." },
  { q: "What is your turnaround time?",
    a: "I can offer a private gallery viewing over Zoom the same day or the very next day. After you select your images, digital files are delivered within about three days. Branding sessions are typically delivered fully within one to two weeks." },
  { q: "How far in advance should I book my Las Vegas branding session?",
    a: "I recommend booking 30–60 days in advance — Las Vegas dates fill quickly. Last-minute sessions are sometimes possible, but the calendar is rarely empty." },
  { q: "How long is a Las Vegas branding session?",
    a: "Most branding sessions run two to three hours, depending on the number of looks and locations you've planned. That includes hair and makeup, wardrobe changes, and the full shoot." },
  { q: "Can I use my branding images for advertising and commercial work?",
    a: "Yes. Every collection includes a full commercial license. You can use your images for your website, social media, press, ads, paid campaigns, books, speaking materials, and anything else your business needs." },
  { q: "Who is the photographer for my session?",
    a: "Me — Jennifer. I'm the only photographer at J Renee Studios. I shoot every session personally, every frame. There are no associate photographers." },
  { q: "What is the next step?",
    a: "Submit an inquiry below. We'll have a short consultation to talk through what your business needs, choose a date, and start planning the session. If you have questions before reserving your spot, you can email me directly at jennifer@jreneestudios.com." },
];

// ---------- 8. FAQ ----------
function VhFAQ() {
  const [open, setOpen] = vhUseState(0);
  return (
    <section data-screen-label="08 VH FAQ" style={{ background: VH_BEIGE, padding: "160px 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 }}>
            <VhGoldRule width={36} />
            <VhEyebrow>Frequently Asked</VhEyebrow>
            <VhGoldRule width={36} />
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: VH_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: VH_GOLD }}>before booking</em>.
          </h2>
        </div>
        <div>
          {VH_FAQS.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i}
                style={{ borderTop: i === 0 ? `1px solid ${VH_GOLD}` : "none", borderBottom: `1px solid ${VH_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: VH_INK,
                    fontSize: 22, lineHeight: 1.35, textWrap: "balance",
                  }}>{f.q}</span>
                  <span style={{
                    flexShrink: 0, width: 32, height: 32, borderRadius: "50%", border: `1px solid ${VH_GOLD}`,
                    color: VH_GOLD, fontSize: 18, lineHeight: "30px", textAlign: "center",
                    transition: "transform 220ms ease, background-color 220ms ease",
                    transform: isOpen ? "rotate(45deg)" : "rotate(0deg)",
                    background: isOpen ? VH_GOLD : "transparent",
                  }}>
                    <span style={{ color: isOpen ? VH_WHITE : VH_GOLD, display: "inline-block" }}>+</span>
                  </span>
                </button>
                <div
                  style={{
                    maxHeight: isOpen ? 1000 : 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 VhFinalCTA() {
  return (
    <section id="inquire" data-screen-label="09 VH Final CTA" style={{ background: VH_WHITE, padding: "160px 48px" }}>
      <div style={{ maxWidth: 720, margin: "0 auto", textAlign: "center" }}>
        <VhGoldRule width={48} style={{ display: "inline-block", marginBottom: 40 }} />
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: VH_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: VH_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>
        <VhBtn variant="gold" href="/inquire/">Inquire</VhBtn>
      </div>
    </section>
  );
}

Object.assign(window, { VhFAQ, VhFinalCTA, VH_FAQS });
