function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    {
      q: "What does 'pre-licensed' mean?",
      a: "I'm a Marriage and Family Therapy student in my practicum year at University of San Francisco. I provide therapy under the weekly clinical supervision of Sarah Chen, LMFT #12345. This means you get thoughtful, evidence-based care at a significantly reduced rate.",
    },
    {
      q: "What is eco-therapy and what does a walking session look like?",
      a: "Eco-therapy honors the healing power of being outdoors. A walking session is a regular therapy session held while we walk slowly together at Lake Merritt or in a nearby green space. Many clients find it easier to open up while moving and surrounded by green.",
    },
    {
      q: "Do you accept insurance?",
      a: "Not at this time. My agency doesn't bill insurance, but I keep sessions affordable through my sliding scale ($30–$60 for individuals). I can provide a superbill if you'd like to submit for out-of-network reimbursement.",
    },
    {
      q: "How long is a typical course of therapy?",
      a: "There's no right answer. Some folks come for a few months to work through a specific transition; others stay for years. We'll talk openly about pace and progress — and you can pause or stop any time, no judgment.",
    },
    {
      q: "Is what we discuss confidential?",
      a: "Yes. Therapy is bound by California confidentiality law. The exceptions are narrow and required by law (e.g., imminent danger to self or others, abuse of a child or dependent adult). I'll walk through these with you in our first session.",
    },
    {
      q: "Are you accepting new clients?",
      a: "Yes — I have limited Thursday and Friday availability. The fastest way to find out if it's a fit is to book a free 15-minute consult above.",
    },
  ];

  return (
    <section id="faq" style={{
      padding: "120px 0",
      background: "var(--cream-2)",
      position: "relative",
      overflow: "hidden",
    }}>
      {/* Soft accent */}
      <div style={{
        position: "absolute", bottom: -120, left: -120,
        width: 420, height: 420,
        backgroundImage: "url(assets/section-bg.png)",
        backgroundSize: "cover",
        backgroundPosition: "bottom left",
        opacity: 0.35,
        mixBlendMode: "multiply",
        transform: "scaleX(-1)",
        maskImage: "radial-gradient(ellipse at bottom left, black 30%, transparent 70%)",
        WebkitMaskImage: "radial-gradient(ellipse at bottom left, black 30%, transparent 70%)",
      }} />

      <div className="wrap" style={{ position: "relative" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "0.7fr 1.3fr",
          gap: 72, alignItems: "start",
        }} className="faq-grid">
          <div style={{ position: "sticky", top: 100 }}>
            <p className="eyebrow" style={{ marginBottom: 20 }}>FAQ</p>
            <h2 className="serif" style={{
              fontSize: "clamp(36px, 4.4vw, 52px)",
              lineHeight: 1.05, color: "var(--forest)",
              letterSpacing: "-0.015em",
            }}>
              Questions,<br/>
              <em style={{ fontStyle: "italic", color: "var(--terracotta)" }}>
                gently answered.
              </em>
            </h2>
            <p style={{
              marginTop: 20, fontSize: 15, color: "var(--ink-2)",
              maxWidth: 320, lineHeight: 1.6,
            }}>
              Still wondering something? Bring it to our free consult — no
              question too small.
            </p>
          </div>

          <div>
            {items.map((item, i) => {
              const isOpen = open === i;
              return (
                <div key={i} style={{ borderBottom: "1px solid var(--line)" }}>
                  <button
                    onClick={() => setOpen(isOpen ? -1 : i)}
                    style={{
                      width: "100%", textAlign: "left",
                      padding: "24px 0", display: "flex",
                      justifyContent: "space-between", alignItems: "center",
                      gap: 24, color: "var(--forest)",
                    }}>
                    <span className="serif" style={{
                      fontSize: 21, lineHeight: 1.3,
                      color: "var(--forest)",
                    }}>{item.q}</span>
                    <span style={{
                      flexShrink: 0,
                      width: 36, height: 36, borderRadius: "50%",
                      border: "1px solid var(--line)",
                      display: "grid", placeItems: "center",
                      transition: "all .25s ease",
                      background: isOpen ? "var(--forest)" : "transparent",
                      color: isOpen ? "var(--cream)" : "var(--forest)",
                      transform: isOpen ? "rotate(45deg)" : "none",
                    }}>
                      <svg width="14" height="14" viewBox="0 0 14 14" stroke="currentColor" strokeWidth="1.5" fill="none">
                        <line x1="7" y1="1" x2="7" y2="13" />
                        <line x1="1" y1="7" x2="13" y2="7" />
                      </svg>
                    </span>
                  </button>
                  <div style={{
                    maxHeight: isOpen ? 300 : 0,
                    overflow: "hidden",
                    transition: "max-height .35s ease",
                  }}>
                    <p style={{
                      paddingBottom: 24, paddingRight: 60,
                      fontSize: 15.5, lineHeight: 1.7, color: "var(--ink-2)",
                    }}>{item.a}</p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .faq-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .faq-grid > div:first-child { position: relative !important; top: 0 !important; }
        }
        @media (max-width: 640px) {
          .faq-grid > div:first-child { max-width: 100%; }
          .faq-grid button { gap: 12px !important; padding: 16px 0 !important; }
          .faq-grid button span:first-child { font-size: 18px !important; }
          .faq-grid button span:last-child { width: 28px !important; height: 28px !important; }
          .faq-grid p { padding-right: 20px !important; font-size: 14.5px !important; }
        }
      `}</style>
    </section>
  );
}

window.FAQ = FAQ;
