function Worries() {
  const items = [
    "申請書類が複雑で、何から手をつければいいか分からない",
    "一度自分で申請したが、不支給となってしまった",
    "病状の説明をうまく書けるか不安がある",
    "通院歴が古く、書類が揃うか心配",
    "うつ病・発達障害などで、自分で動くのがつらい",
    "周囲に知られず、静かに進めたい",
  ];

  return (
    <section id="worries" data-screen-label="02 Worries" style={{ padding: "120px 0", background: "var(--bg)" }}>
      <div style={{ maxWidth: 1080, margin: "0 auto", padding: "0 32px" }}>
        <SectionHead
          en="WORRIES"
          ja="このようなお悩みは"
          jaAccent="ありませんか"
        />

        <div style={{
          marginTop: 64,
          display: "grid",
          gridTemplateColumns: "repeat(2, 1fr)",
          gap: 16,
        }} className="worry-grid">
          {items.map((t, i) => (
            <div key={i} style={{
              display: "flex", alignItems: "flex-start", gap: 18,
              padding: "26px 28px",
              background: "var(--paper)",
              border: "1px solid var(--line)",
              borderRadius: 4,
              boxShadow: "var(--shadow-soft)",
            }}>
              <div style={{
                flexShrink: 0,
                width: 36, height: 36,
                borderRadius: "50%",
                border: "1px solid var(--gold)",
                color: "var(--gold-deep)",
                display: "grid", placeItems: "center",
                fontSize: 16,
                fontWeight: 500,
              }} className="num">
                {String(i + 1).padStart(2, "0")}
              </div>
              <p style={{ fontSize: 16, lineHeight: 1.85, color: "var(--ink)", paddingTop: 4 }}>
                {t}
              </p>
            </div>
          ))}
        </div>

        {/* Bridge message */}
        <div style={{
          marginTop: 80,
          padding: "48px 40px",
          textAlign: "center",
          background: "linear-gradient(180deg, var(--bg-warm), var(--bg-cream))",
          borderRadius: 4,
          position: "relative",
        }}>
          <div style={{ fontSize: 12, letterSpacing: "0.4em", color: "var(--gold-deep)", marginBottom: 16 }}>
            お任せください
          </div>
          <p style={{ fontSize: "clamp(20px, 2.4vw, 30px)", fontWeight: 700, lineHeight: 1.7, letterSpacing: "0.06em" }}>
            障害年金専門だからこそできる、<br />
            <span style={{ color: "var(--gold-deep)" }}>あなたに寄り添う申請サポート</span>があります。
          </p>
        </div>
      </div>

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

function SectionHead({ en, ja, jaAccent }) {
  return (
    <div style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 16 }}>
      <div className="en" style={{ fontSize: 14, letterSpacing: "0.4em", color: "var(--gold-deep)", fontStyle: "italic", fontWeight: 400 }}>
        — {en} —
      </div>
      <h2 style={{ fontSize: "clamp(26px, 3.4vw, 40px)", fontWeight: 700, lineHeight: 1.5, letterSpacing: "0.06em" }}>
        {ja}
        {jaAccent && <span style={{ color: "var(--gold-deep)" }}>{jaAccent}</span>}
      </h2>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 4 }}>
        <span style={{ width: 30, height: 1, background: "var(--gold)" }} />
        <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--gold)" }} />
        <span style={{ width: 30, height: 1, background: "var(--gold)" }} />
      </div>
    </div>
  );
}

window.Worries = Worries;
window.SectionHead = SectionHead;