// Boise Boudoir — Sections 8 (Love Notes), 9 (FAQ), 10 (Final CTA)

const BB_FAQS = [
  { q: "How long is a Boise boudoir 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. It's enough time to truly relax into the experience without it stretching into an exhausting full day." },
  { q: "I'm nervous. I'm really nervous. Is that normal?", a: "Yes. Every single woman who walks in feels this way. Every one. And almost every one tells me, within the first ten minutes of being in the studio, that the nerves were already gone. It really does matter who's photographing you. 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. Your comfort is the entire foundation of how I work." },
  { 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. Posing, lighting, expression, and twenty years of knowing exactly how to show a woman herself. You don't have to be photogenic. You just have to show up." },
  { q: "How much does a Boise boudoir session cost?", a: "The session fee is $490 and includes professional hair and makeup, the client closet, fully guided posing, every image retouched, and a next-day private gallery reveal. Image collections are purchased separately after your reveal and start at $1,997. Most clients invest between $2,000 and $5,000 on a luxury collection." },
  { q: "Can I make payments on my boudoir session?", a: "Yes. I offer payment plans through Affirm, Klarna, and an in-house payment plan. Payment plans can be set up before your shoot so your images can be delivered at the time of your session." },
  { q: "Do you have a client closet I can use?", a: "Yes. The client closet is fully stocked with lingerie, white shirts, sweaters, blazers, and sheets in sizes XS through 6X. Everything is washed between sessions. You're welcome to bring your own pieces too — most clients use a mix." },
  { 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 boudoir 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: "Will my images be shared publicly?", a: "You are in control of whether all, some, or none of your images are shared. I require signed consent regarding your privacy preferences before any image leaves the studio. If you do not sign a photo release, your images will not be shared anywhere." },
  { 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." },
];

// ---------- 8. LOVE NOTES ----------
function BbLoveNotes() {
  const cards = [
    { quote: "I went into my session feeling very nervous, but from the moment I arrived, Jenn made me feel completely at ease. She guided me through every step in such a warm, encouraging way that the nerves melted into laughter and fun. Looking through my photos, I was blown away.",
      avatar: "/images/vb-avatar-1.jpg" },
    { quote: "I had the most amazing boudoir session with Jenn. She made me feel so beautiful and comfortable from start to finish. Her direction with poses was super helpful — these are the best photos I've ever taken. From her welcome package to the final delivery, the entire experience felt incredibly high-end.",
      avatar: "/images/vb-avatar-2.jpg" },
    { quote: "Working with Jennifer was such a confidence booster. Hair and makeup were on point. She gives clear direction that makes the whole experience natural and fun. The time flew by and I am ecstatic about the final products.",
      avatar: "/images/vb-avatar-3.jpg" },
  ];

  const stars = (
    <span style={{ letterSpacing: 4, color: BB_GOLD, fontSize: 14 }}>★★★★★</span>
  );

  return (
    <section id="reviews" data-screen-label="08 BB LoveNotes" style={{ background: BB_WHITE, padding: "160px 48px", scrollMarginTop: 100 }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 88 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
            <BbGoldRule width={36} />
            <BbEyebrow>Love Notes</BbEyebrow>
            <BbGoldRule width={36} />
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: BB_INK,
            fontSize: "clamp(34px, 4.4vw, 56px)", lineHeight: 1.08,
            letterSpacing: "-0.005em", margin: "0 0 18px 0", textWrap: "balance", maxWidth: 880, marginLeft: "auto", marginRight: "auto",
          }}>
            What women say after their Boise <em style={{ fontStyle: "italic", color: BB_GOLD }}>boudoir session</em>.
          </h2>
          <p style={{
            fontFamily: "Gloock, serif", fontStyle: "italic", color: BB_GREY,
            fontSize: 16, margin: 0,
          }}>
            Real reviews from real Boise clients. Pulled from Google.
          </p>
        </div>

        <div className="vb-love-grid" style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28,
        }}>
          {cards.map((c, i) => (
            <div key={i} style={{
              background: BB_BEIGE, padding: "48px 40px",
              display: "flex", flexDirection: "column", gap: 28,
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                {stars}
                <span style={{
                  fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 9,
                  letterSpacing: "0.32em", textTransform: "uppercase", color: BB_GREY,
                }}>Google</span>
              </div>
              <p style={{
                fontFamily: "Gloock, serif", fontStyle: "italic", color: BB_INK,
                fontSize: 17, lineHeight: 1.55, margin: 0, flex: 1,
              }}>
                "{c.quote}"
              </p>
              <div style={{ display: "flex", alignItems: "center", gap: 16, paddingTop: 8, borderTop: `1px solid ${BB_GOLD}` }}>
                <div>
                  <div style={{
                    fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 10.5,
                    letterSpacing: "0.28em", textTransform: "uppercase", color: BB_INK,
                  }}>Verified Google Review</div>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div style={{
          textAlign: "center", marginTop: 64,
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 12,
          letterSpacing: "0.32em", textTransform: "uppercase", color: BB_INK,
        }}>
          <span style={{ color: BB_GOLD }}>★</span> &nbsp; 5.0 / 5 &nbsp;·&nbsp; 37+ Verified Google Reviews &nbsp;·&nbsp; Boise
        </div>
      </div>
    </section>
  );
}

// ---------- 9. FAQ ----------
function BbFAQ() {
  const [open, setOpen] = bbUseState(0);
  return (
    <section id="faq" data-screen-label="09 BB FAQ" style={{ background: BB_BEIGE, padding: "160px 48px", scrollMarginTop: 100 }}>
      <div style={{ maxWidth: 980, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 88 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
            <BbGoldRule width={36} />
            <BbEyebrow>Frequently Asked</BbEyebrow>
            <BbGoldRule width={36} />
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: BB_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: BB_GOLD }}>before booking</em>.
          </h2>
        </div>

        <div>
          {BB_FAQS.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i}
                style={{ borderTop: i === 0 ? `1px solid ${BB_GOLD}` : "none", borderBottom: `1px solid ${BB_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: BB_INK,
                    fontSize: 22, lineHeight: 1.35, textWrap: "balance",
                  }}>{f.q}</span>
                  <span style={{
                    flexShrink: 0, width: 32, height: 32, borderRadius: "50%", border: `1px solid ${BB_GOLD}`,
                    color: BB_GOLD, fontSize: 18, lineHeight: "30px", textAlign: "center",
                    transition: "transform 220ms ease, background-color 220ms ease",
                    transform: isOpen ? "rotate(45deg)" : "rotate(0deg)",
                    background: isOpen ? BB_GOLD : "transparent",
                  }}>
                    <span style={{ color: isOpen ? BB_WHITE : BB_GOLD, display: "inline-block" }}>+</span>
                  </span>
                </button>
                <div
                  style={{
                    maxHeight: isOpen ? 800 : 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>
  );
}

// ---------- 10. FINAL CTA ----------
function BbFinalCTA() {
  React.useEffect(() => {
    const SRC = "https://link.clicktolaunch.co/js/form_embed.js";
    if (document.querySelector(`script[src="${SRC}"]`)) return;
    const s = document.createElement("script");
    s.src = SRC;
    s.async = true;
    document.body.appendChild(s);
  }, []);

  return (
    <section id="inquire" data-screen-label="10 BB Final CTA" style={{ background: BB_WHITE, padding: "160px 48px" }}>
      <div style={{ maxWidth: 720, margin: "0 auto", textAlign: "center" }}>
        <BbGoldRule width={48} style={{ display: "inline-block", marginBottom: 40 }} />
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: BB_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: BB_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>
        <div style={{ maxWidth: 640, margin: "0 auto", textAlign: "left" }}>
          <iframe
            src="https://link.clicktolaunch.co/widget/form/zFlYQ2Ppeez2vcUKfpjx"
            style={{ width: "100%", height: 760, minHeight: 600, border: "none", borderRadius: 4 }}
            id="inline-zFlYQ2Ppeez2vcUKfpjx"
            data-layout="{'id':'INLINE'}"
            data-trigger-type="alwaysShow"
            data-trigger-value=""
            data-activation-type="alwaysActivated"
            data-activation-value=""
            data-deactivation-type="neverDeactivate"
            data-deactivation-value=""
            data-form-name="00. MAIN Boudoir intake form"
            data-height="undefined"
            data-layout-iframe-id="inline-zFlYQ2Ppeez2vcUKfpjx"
            data-form-id="zFlYQ2Ppeez2vcUKfpjx"
            title="00. MAIN Boudoir intake form"
          />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { BbLoveNotes, BbFAQ, BbFinalCTA, BB_FAQS });