function Faq() {
  const items = [
    { q: "相談は本当に無料ですか？", a: "はい、ご契約に至るまでのご相談は何度でも無料です。お電話でお気軽にご相談ください。お話を伺った上で、受給の可能性が見込めない場合や、ご自身で申請いただくほうが良いケースには、その旨を正直にお伝えしております。" },
    { q: "全国どこからでも依頼できますか？", a: "はい、全国47都道府県すべてに対応しております。お電話・郵送・オンラインを組み合わせて、ご来所いただかなくても申請手続きを進めることができます。外出が困難な方も安心してご利用ください。" },
    { q: "うつ病や発達障害でも申請できますか？", a: "もちろん可能です。当事務所はうつ病・双極性障害・発達障害・統合失調症などの精神疾患を含め、あらゆる傷病の障害年金申請を取り扱っています。診断書や病歴申立書の作成方法も、傷病ごとに最適化してご支援します。" },
    { q: "一度自分で申請して不支給でしたが、再申請できますか？", a: "はい、不支給決定の通知から3ヶ月以内であれば「審査請求」、それを超える場合でも改めて「再請求」を行うことが可能です。なぜ不支給となったのかを精査し、必要に応じて診断書の取り直しから戦略を立て直します。" },
    { q: "費用はいつ支払うのですか？", a: "完全成功報酬制ですので、受給が決定し、年金が振り込まれた後にお支払いいただきます。ご契約時の着手金や月額顧問料はいただきません。受給に至らなかった場合は、報酬は発生いたしません（実費を除く）。" },
    { q: "周囲に知られずに進められますか？", a: "はい、もちろんです。当事務所からのご連絡は、ご希望の連絡方法（個人携帯のみ等）に限定することができます。書類の郵送方法もご相談に応じます。プライバシーは厳守いたします。" },
  ];

  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq" data-screen-label="08 FAQ" style={{
      padding: "140px 0",
      background: "linear-gradient(180deg, var(--bg), var(--bg-warm))",
    }}>
      <div style={{ maxWidth: 920, margin: "0 auto", padding: "0 32px" }}>
        <SectionHead en="FAQ" ja="よくある" jaAccent="ご質問" />

        <div style={{ marginTop: 64, display: "flex", flexDirection: "column", gap: 12 }}>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                background: "var(--paper)",
                border: "1px solid var(--line)",
                borderRadius: 4,
                overflow: "hidden",
                boxShadow: isOpen ? "var(--shadow-card)" : "var(--shadow-soft)",
                transition: "box-shadow 0.3s",
              }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: "100%",
                    padding: "24px 28px",
                    display: "flex", alignItems: "flex-start", gap: 20,
                    textAlign: "left",
                  }}>
                  <span className="num" style={{
                    flexShrink: 0,
                    fontSize: 22,
                    color: "var(--gold-deep)",
                    fontWeight: 500,
                    lineHeight: 1.2,
                    width: 28,
                  }}>
                    Q
                  </span>
                  <span style={{ flex: 1, fontSize: 16, fontWeight: 700, lineHeight: 1.7, letterSpacing: "0.04em" }}>
                    {it.q}
                  </span>
                  <span style={{
                    flexShrink: 0,
                    width: 28, height: 28,
                    borderRadius: "50%",
                    border: "1px solid var(--gold-light)",
                    color: "var(--gold-deep)",
                    display: "grid", placeItems: "center",
                    transition: "transform 0.3s",
                    transform: isOpen ? "rotate(45deg)" : "rotate(0)",
                  }}>
                    <svg width="12" height="12" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2"><path d="M12 5v14M5 12h14"/></svg>
                  </span>
                </button>
                <div style={{
                  maxHeight: isOpen ? 400 : 0,
                  opacity: isOpen ? 1 : 0,
                  overflow: "hidden",
                  transition: "max-height 0.4s ease, opacity 0.3s ease",
                }}>
                  <div style={{
                    padding: "0 28px 28px 76px",
                    display: "flex", gap: 20,
                    borderTop: "1px solid var(--line-soft)",
                    paddingTop: 20,
                  }}>
                    <span className="num" style={{ fontSize: 18, color: "var(--gold)", fontWeight: 500, marginLeft: -48 }}>
                      A
                    </span>
                    <p style={{ fontSize: 14.5, color: "var(--ink-soft)", lineHeight: 2.1 }}>
                      {it.a}
                    </p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

window.Faq = Faq;
