function Strengths() {
  const items = [
    {
      no: "01",
      title: "障害年金に特化した専門性",
      body: "当事務所は障害年金の申請のみを取り扱う特化型事務所です。日々最新の認定基準と判例を研究し、傷病ごとの最適な申請戦略を蓄積しています。",
      icon: (
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.4">
          <path d="M16 3 L26 8 V16 C26 22 21 27 16 29 C 11 27 6 22 6 16 V8 Z"/>
          <path d="M11 16 L 14 19 L 21 12"/>
        </svg>
      ),
    },
    {
      no: "02",
      title: "受給までを最後まで丁寧に伴走",
      body: "初回相談から受給決定まで、担当社労士が一貫して対応。書類作成だけでなく、医師面談の進め方や日常生活状況の整理まで、お気持ちに寄り添ってご支援いたします。",
      icon: (
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.4">
          <path d="M11 12 C 11 8, 16 6, 16 6 C 16 6, 21 8, 21 12 C 21 17, 16 21, 16 21 C 16 21, 11 17, 11 12 Z"/>
          <path d="M5 27 C 8 23, 12 22, 16 22 C 20 22, 24 23, 27 27"/>
        </svg>
      ),
    },
    {
      no: "03",
      title: "全国どこでも、ご来所不要",
      body: "電話・オンライン・郵送で全国対応。外出が困難な方や遠方の方も、ご自宅にいながら申請手続きを進めていただけます。",
      icon: (
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.4">
          <circle cx="16" cy="16" r="11"/>
          <path d="M5 16 H 27"/>
          <path d="M16 5 C 12 9, 12 23, 16 27 M 16 5 C 20 9, 20 23, 16 27"/>
        </svg>
      ),
    },
    {
      no: "04",
      title: "完全成功報酬制で安心",
      body: "着手金は無料、受給が決定した場合のみ報酬をいただく完全成功報酬制。費用面のご心配なく、まずはお気軽にご相談いただけます。",
      icon: (
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.4">
          <circle cx="16" cy="16" r="11"/>
          <path d="M11 13 H 21 M 11 17 H 21 M 14 10 V 22 M 18 10 V 22"/>
        </svg>
      ),
    },
  ];

  return (
    <section id="strengths" data-screen-label="03 Strengths" style={{
      padding: "140px 0",
      background: "linear-gradient(180deg, var(--bg-warm), var(--bg))",
      position: "relative",
    }}>
      <div style={{ maxWidth: 1180, margin: "0 auto", padding: "0 32px" }}>
        <SectionHead en="OUR STRENGTHS" ja="当事務所が選ばれる" jaAccent="4つの理由" />

        <div style={{
          marginTop: 80,
          display: "grid",
          gridTemplateColumns: "repeat(2, 1fr)",
          gap: 28,
        }} className="strength-grid">
          {items.map((it) => (
            <article key={it.no} style={{
              padding: "40px 36px",
              background: "var(--paper)",
              border: "1px solid var(--line)",
              borderRadius: 4,
              position: "relative",
              boxShadow: "var(--shadow-soft)",
              overflow: "hidden",
            }}>
              <div className="num" style={{
                position: "absolute", top: 16, right: 24,
                fontSize: 80,
                fontWeight: 300,
                color: "var(--bg-cream)",
                lineHeight: 1,
                letterSpacing: "-0.02em",
              }}>
                {it.no}
              </div>
              <div style={{ position: "relative" }}>
                <div style={{
                  width: 64, height: 64,
                  borderRadius: "50%",
                  background: "var(--bg-warm)",
                  color: "var(--gold-deep)",
                  display: "grid", placeItems: "center",
                  marginBottom: 20,
                }}>
                  {it.icon}
                </div>
                <h3 style={{ fontSize: 21, fontWeight: 700, lineHeight: 1.6, letterSpacing: "0.04em", marginBottom: 14 }}>
                  {it.title}
                </h3>
                <p style={{ fontSize: 14.5, color: "var(--ink-soft)", lineHeight: 2.0 }}>
                  {it.body}
                </p>
              </div>
            </article>
          ))}
        </div>

        {/* Representative message */}
        <div style={{
          marginTop: 100,
          display: "grid",
          gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.4fr)",
          gap: 56,
          alignItems: "center",
          padding: "0",
        }} className="rep-grid">
          <div>
            <PortraitPlaceholder aspect="4 / 5" label="代表 写真" />
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <div className="en" style={{ fontSize: 13, letterSpacing: "0.4em", color: "var(--gold-deep)", fontStyle: "italic" }}>
              — MESSAGE —
            </div>
            <h3 style={{ fontSize: "clamp(24px, 2.8vw, 34px)", fontWeight: 700, lineHeight: 1.6, letterSpacing: "0.05em" }}>
              「申請を、<span style={{ color: "var(--gold-deep)" }}>諦めないで</span>ほしい」<br />
              その想いで、ご支援しています。
            </h3>
            <div style={{ width: 60, height: 1, background: "var(--gold)", margin: "8px 0" }} />
            <p style={{ fontSize: 15, lineHeight: 2.1, color: "var(--ink)" }}>
              障害年金は、本来受け取れるはずの方が、書類の不備や説明不足でやむなく不支給となってしまうケースが少なくありません。
              <br /><br />
              当事務所では、お一人おひとりの病状と日常生活を丁寧にお伺いし、ご本人の状況が正しく伝わる申請書類づくりをお手伝いしています。
              <br /><br />
              「自分には難しいかも」とお感じの方こそ、どうぞ一度お話を聞かせてください。
            </p>
            <div style={{ marginTop: 12, display: "flex", alignItems: "baseline", gap: 16 }}>
              <span style={{ fontSize: 12, color: "var(--ink-soft)", letterSpacing: "0.2em" }}>代表 社会保険労務士</span>
              <span style={{ fontSize: 22, fontWeight: 700, letterSpacing: "0.15em" }}>◯◯ ◯◯</span>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 820px) {
          .strength-grid { grid-template-columns: 1fr !important; }
          .rep-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </section>
  );
}

window.Strengths = Strengths;
