function Voice() {
  const items = [
    {
      tag: "うつ病・40代女性",
      title: "「自分には無理」と諦めかけていました",
      body: "通院歴も長く、自力では書類が書けずに諦めかけていましたが、丁寧に話を聞きながら一緒に進めてくださり、無事に受給できました。",
    },
    {
      tag: "発達障害・30代男性",
      title: "面談ゼロでも全国から支援いただけました",
      body: "遠方在住で来所が難しい中、お電話と郵送ですべて完結。担当の方が状況を丁寧に整理してくださったのが心強かったです。",
    },
    {
      tag: "脳梗塞後遺症・60代男性",
      title: "一度不支給だった案件で再申請が叶いました",
      body: "他事務所で不支給になり、半ば諦めていましたが、診断書の取り直しから戦略を立て直してくださり、再申請で受給に至りました。",
    },
  ];

  return (
    <section id="voice" data-screen-label="07 Voice" style={{
      padding: "140px 0",
      background: "var(--bg)",
    }}>
      <div style={{ maxWidth: 1180, margin: "0 auto", padding: "0 32px" }}>
        <SectionHead en="VOICE" ja="ご相談者様の" jaAccent="お声" />

        <div style={{
          marginTop: 80,
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 28,
        }} className="voice-grid">
          {items.map((v, i) => (
            <article key={i} style={{
              padding: "36px 32px",
              background: "var(--paper)",
              border: "1px solid var(--line)",
              borderRadius: 4,
              position: "relative",
              boxShadow: "var(--shadow-soft)",
              display: "flex", flexDirection: "column", gap: 18,
            }}>
              {/* Decorative quote */}
              <div className="num" style={{
                position: "absolute", top: 16, right: 24,
                fontSize: 64,
                color: "var(--bg-cream)",
                lineHeight: 1,
                fontStyle: "italic",
              }}>
                ”
              </div>
              <div style={{
                alignSelf: "flex-start",
                fontSize: 11,
                letterSpacing: "0.18em",
                color: "var(--gold-deep)",
                padding: "4px 12px",
                background: "var(--bg-warm)",
                borderRadius: 2,
              }}>
                {v.tag}
              </div>
              <h3 style={{ fontSize: 17, fontWeight: 700, lineHeight: 1.7, letterSpacing: "0.04em" }}>
                {v.title}
              </h3>
              <p style={{ fontSize: 14, color: "var(--ink-soft)", lineHeight: 2.0 }}>
                {v.body}
              </p>
              <div style={{ display: "flex", gap: 4, marginTop: 6 }}>
                {[...Array(5)].map((_, k) => (
                  <svg key={k} width="14" height="14" viewBox="0 0 24 24" fill="var(--gold)"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
                ))}
              </div>
            </article>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .voice-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

window.Voice = Voice;