// 13 FAQ — menopause version
function MenoProductFAQ() {
  const items = [
    { q: "What if I'm skeptical?", a: "How strongly people expected the placebo to help didn't predict how much they actually improved. The science shows that belief is not required for Open Label Placebos to help." },
    { q: "Can I use this alongside HRT or other treatments?", a: "Yes. The gummies contain no active medicinal ingredients, so they don't interact with hormone therapy or other medications. Continue your prescribed treatment unless your doctor tells you otherwise." },
    { q: "Can't I just do this myself?", a: (
      <>
        <p style={{ margin: 0 }}>The research shows that receiving proper rationale on how honest placebos work was an important part of every OLP study but not everyone can enroll in a research study at Harvard. The Copables protocol has been designed to replicate the experience of the research participants to give you a better chance of experiencing a positive outcome.</p>
        <blockquote style={{
          margin: "18px 0 0", padding: "16px 18px",
          borderLeft: "3px solid #DE541E", background: "#FFF6EF", borderRadius: 8,
          fontStyle: "italic", color: "#000", fontSize: 15.5, lineHeight: 1.55, fontWeight: 400,
        }}>
          "…an open placebo with a convincing rationale had an impact on subjective pain relief, whereas an open application of a placebo without any rationale showed no effects."
          <cite style={{ display: "block", marginTop: 10, fontStyle: "normal", fontSize: 13, color: "#525252", fontWeight: 600 }}>
            Locher et al. 2017, <em style={{ fontStyle: "italic", fontWeight: 600 }}>A randomized controlled trial of open-label placebo analgesia.</em> Pain. 2017;158(12):2320–2328.
          </cite>
        </blockquote>
      </>
    ) },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section data-screen-label="Product · FAQ" style={{
      background: "#FFFDF7", borderBottom: "3px solid #000", padding: "120px 48px",
    }}>
      <div style={{ maxWidth: 1160, margin: "0 auto", display: "grid", gridTemplateColumns: "0.7fr 1.3fr", gap: 64 }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "#DE541E", marginBottom: 18 }}>Frequently asked</div>
          <h2 style={{ fontSize: 56, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 0.95, margin: 0 }}>
            Quick answers.
          </h2>
          <p style={{ marginTop: 22, fontSize: 17, fontWeight: 300, lineHeight: 1.55, color: "#1B1C1C", maxWidth: 360 }}>
            Still on the fence? Email <a href="mailto:hello@copables.com" style={{ color: "#000" }}>hello@copables.com</a> and we'll answer within a day.
          </p>
        </div>

        <div>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                borderBottom: "1.5px solid #000",
                borderTop: i === 0 ? "1.5px solid #000" : "none",
              }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: "100%", textAlign: "left", padding: "22px 0",
                  background: "transparent", border: "none", cursor: "pointer",
                  display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16,
                  fontSize: 18, fontWeight: 700, letterSpacing: "-0.005em", color: "#000",
                }}>
                  <span>{it.q}</span>
                  <span style={{
                    width: 32, height: 32, borderRadius: 999, border: "1.5px solid #000",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    fontSize: 18, fontWeight: 500, flexShrink: 0,
                    background: isOpen ? "#000" : "transparent",
                    color: isOpen ? "#fff" : "#000",
                  }}>{isOpen ? "−" : "+"}</span>
                </button>
                {isOpen && (
                  <div style={{ paddingBottom: 24, fontSize: 16, fontWeight: 300, lineHeight: 1.55, color: "#1B1C1C", maxWidth: 720 }}>
                    {it.a}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
window.MenoProductFAQ = MenoProductFAQ;