// ICONIC Experience 40+ — Sections D: FAQ, The Last Thing, Anchor

function IcFAQ() {
  const qs = [
    { q: "Is this boudoir?",
      a: "No. ICONIC is editorial portraiture — produced in black and white, designed for the kind of imagery that appears on Vanity Fair covers, not in private albums. Boudoir is a different service line entirely. ICONIC is for the woman who wants to be seen with the gravity of a published feature, not the intimacy of a boudoir session." },
    { q: "What if I'm nervous or self-conscious?",
      a: "Almost every woman who books an ICONIC session feels this way at first. 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. Every pose, every angle, every expression is fully guided." },
    { q: "Will there be surprise upsells?",
      a: "No. Collection pricing is established before your session, not after. You'll know exactly what each collection includes before you arrive, and there are no high-pressure sales tactics at any point in the process." },
    { q: "How much does ICONIC cost?",
      a: "The session fee is $490 and includes the fully produced editorial session, professional hair and makeup, wardrobe consultation, the interview that becomes your magazine feature, your full feature in ICONIC Magazine Volume One, one copy of the magazine, tickets for you and a guest to The ICONIC Celebration, and one 11×14 print of the image chosen for your feature. Image collections are purchased separately after the reveal and start at $3,000. Most ICONIC clients invest between $3,000 and $8,000 on a collection — including additional retouched images, an heirloom album, and wall art. Custom collections are available." },
    { q: "Why black and white only?",
      a: "Because color photography ages, and these portraits are meant to last. Black and white is the format Annie Leibovitz used, the format Peter Lindbergh used, the format that holds up fifty years from now. ICONIC is built to be timeless — and that begins with how the images are made." },
    { q: "When is Volume One happening?",
      a: "Sessions are held at the Las Vegas studio between May and August. The ICONIC Celebration follows in September, once all thirty women in Volume One have been photographed. Volume Two will follow." },
    { q: "Who writes the magazine features?",
      a: "Each feature is crafted from your interview — a guided conversation that captures your voice, your story, and the chapter you're celebrating. Your interview becomes the foundation of your published feature in ICONIC Magazine Volume One." },
    { q: "How many copies of the magazine are printed?",
      a: "A limited print run of ICONIC Magazine Volume One. Each woman in Volume One receives her own copy, presented ceremonially at The ICONIC Celebration. Additional copies are available for purchase as part of the higher-tier collections, and a small number of magazines may be made available publicly through the J. Renée Studios archive." },
    { q: "Will my photos and story be public?",
      a: "Yes. ICONIC is a public campaign — every woman in Volume One is featured in the printed magazine, on the J. Renée Studios website, across social media, in email marketing, and in press materials. If you'd prefer a private session, a Modern Portraits session is the right experience for you instead." },
    { q: "When is The ICONIC Celebration?",
      a: "The date and venue will be announced once Volume One is complete — typically in September, following the May–August session period. You and one guest will be invited." },
    { q: "Can I bring my husband, partner, kids, or sister to the celebration?",
      a: "You receive one guest ticket. The guest can be anyone you choose — a partner, a daughter, a sister, a best friend." },
    { q: "How do I reserve my spot in Volume One?",
      a: "Click Reserve Your Spot in Volume One, fill out the inquiry form, and I'll be in touch personally — usually within an hour during the day. Spots are first-come, first-reserved." },
    { q: "Who is the photographer?",
      a: "Me — Jennifer. I'm the only photographer at J. Renée Studios. Every ICONIC session, every frame." },
  ];
  const [open, setOpen] = icUseState(-1);
  return (
    <section data-screen-label="12 IC FAQ" style={{ background: IC_BEIGE, padding: "160px 48px" }}>
      <div style={{ maxWidth: 920, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 80 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
            <IcRule width={36} />
            <IcEyebrow>Frequently Asked</IcEyebrow>
            <IcRule width={36} />
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: IC_INK,
            fontSize: "clamp(34px, 4.6vw, 56px)", lineHeight: 1.08, letterSpacing: "-0.005em",
            margin: 0, textWrap: "balance",
          }}>
            The questions women ask <em style={{ fontStyle: "italic", color: IC_GOLD }}>before booking.</em>
          </h2>
        </div>
        <div>
          {qs.map((it, i) => (
            <div key={i} style={{ borderBottom: `1px solid ${IC_GOLD}`, borderTop: i === 0 ? `1px solid ${IC_GOLD}` : "none" }}>
              <button onClick={() => setOpen(open === i ? -1 : i)}
                style={{
                  width: "100%", padding: "28px 0", background: "transparent", border: "none",
                  display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24,
                  textAlign: "left", cursor: "pointer",
                  fontFamily: "Gloock, serif", fontWeight: 400, color: IC_INK,
                  fontSize: "clamp(17px, 1.7vw, 21px)", lineHeight: 1.35,
                }}>
                <span style={{ flex: 1 }}>{it.q}</span>
                <span style={{ color: IC_GOLD, fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 22, lineHeight: 1, transition: "transform 200ms ease", transform: open === i ? "rotate(45deg)" : "rotate(0)" }}>+</span>
              </button>
              {open === i && (
                <div style={{
                  paddingBottom: 28,
                  fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 15,
                  lineHeight: 1.85, color: "#2a2622", maxWidth: 760,
                }}>{it.a}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- 13. THE LAST THING + final CTA ----------
function IcLastThing() {
  return (
    <section id="inquire" data-screen-label="13 IC Last Thing" style={{ background: IC_WHITE, padding: "200px 48px 220px" }}>
      <div style={{ maxWidth: 720, margin: "0 auto", textAlign: "center" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 40 }}>
          <IcRule width={36} />
          <IcEyebrow>The Last Thing</IcEyebrow>
          <IcRule width={36} />
        </div>
        <div style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 17,
          lineHeight: 1.95, color: "#2a2622", textAlign: "center",
        }}>
          <p style={{ margin: "0 0 22px 0" }}>This is not a favor I'm asking of women.</p>
          <p style={{ margin: "0 0 44px 0" }}>This is an experience I'm offering to the ones who are ready.</p>
          <p style={{ margin: "0 0 44px 0" }}>If you are a woman over 40 and something about this has made you lean forward — I want to hear from you.</p>
          <p style={{ margin: "0 0 12px 0" }}>Not because your story is special enough.</p>
          <p style={{
            margin: "0 0 64px 0",
            fontFamily: "Gloock, serif", fontStyle: "italic", fontWeight: 400,
            fontSize: "clamp(36px, 5.2vw, 64px)", lineHeight: 1.05,
            color: IC_INK, letterSpacing: "-0.01em",
          }}>
            Because <em style={{ fontStyle: "italic", color: IC_GOLD }}>you</em> are.
          </p>
        </div>
        <IcCTA href="reserve/" variant="gold">
          Reserve Your Spot in Volume One →
        </IcCTA>
      </div>
    </section>
  );
}

Object.assign(window, { IcFAQ, IcLastThing });