// Boise Headshots & Branding — Sections 8-9: FAQ (12 Qs incl. Modern Headshot Day), Final CTA

const BH_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: "Do you offer something smaller than a full branding session?",
    a: "Yes — once a month in Boise, I host Modern Headshot Day: a single day reserved for women who need elevated headshots without booking a full branding session. It's $990, includes professional makeup, a 40-minute studio session with me, and three final images of your choice — with the option to purchase additional images. Spots are limited and Modern Headshot Day runs only one day per month. You can see the upcoming date and reserve your spot through the link at the top of the page." },
  { 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 Boise 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 Boise branding 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: "How long is a Boise 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." },
];

function BhFAQ() {
  const [open, setOpen] = bhUseState(0);
  return (
    <section data-screen-label="08 BH FAQ" style={{ background: BH_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 }}>
            <BhGoldRule width={36} />
            <BhEyebrow>Frequently Asked</BhEyebrow>
            <BhGoldRule width={36} />
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: BH_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: BH_GOLD }}>before booking</em>.
          </h2>
        </div>
        <div>
          {BH_FAQS.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i}
                style={{ borderTop: i === 0 ? `1px solid ${BH_GOLD}` : "none", borderBottom: `1px solid ${BH_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: BH_INK,
                    fontSize: 22, lineHeight: 1.35, textWrap: "balance",
                  }}>{f.q}</span>
                  <span style={{
                    flexShrink: 0, width: 32, height: 32, borderRadius: "50%", border: `1px solid ${BH_GOLD}`,
                    color: BH_GOLD, fontSize: 18, lineHeight: "30px", textAlign: "center",
                    transition: "transform 220ms ease, background-color 220ms ease",
                    transform: isOpen ? "rotate(45deg)" : "rotate(0deg)",
                    background: isOpen ? BH_GOLD : "transparent",
                  }}>
                    <span style={{ color: isOpen ? BH_WHITE : BH_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>
  );
}

function BhFinalCTA() {
  return (
    <section id="inquire" data-screen-label="09 BH Final CTA" style={{ background: BH_WHITE, padding: "160px 48px" }}>
      <div style={{ maxWidth: 720, margin: "0 auto", textAlign: "center" }}>
        <BhGoldRule width={48} style={{ display: "inline-block", marginBottom: 40 }} />
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: BH_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: BH_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>
        <BhBtn variant="gold" href="/inquire/">Inquire</BhBtn>
      </div>
    </section>
  );
}

Object.assign(window, { BhFAQ, BhFinalCTA, BH_FAQS });