// ── Target（こんな方へ / 対象になりやすい状態） ──────
function Target() {
  const items = [
    '歩行が困難で、通院がむずかしい',
    '寝たきり、または寝たきりに近い状態',
    '脳梗塞などの後遺症で、手足が動かしにくい',
    '関節が硬くなり、動かすと痛みやこわばりがある',
    'パーキンソン病などで筋肉のこわばりがある',
    'リハビリを続けたいが、外出の負担が大きい',
  ];
  return (
    <section id="target" className="section" style={{ background: 'var(--color-bg-subtle)' }}>
      <div className="container">
        <div className="tgt-grid" style={{
          display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 48, alignItems: 'center'
        }}>
          <div>
            <span className="eyebrow">For You</span>
            <h2 className="section-title">こんな方に<br />ご利用いただいています</h2>
            <p className="section-lead">
              ひとつでも当てはまれば、対象となる可能性があります。
              ご本人の状態がわからない場合も、まずはご相談ください。
            </p>
            <a href="#contact" className="btn btn-family tgt-cta-desktop" style={{ marginTop: 26 }}>対象になるか相談する</a>
          </div>

          <div style={{ display: 'grid', gap: 12 }}>
            {items.map((t, i) => (
              <div key={i} className="card" style={{
                padding: '16px 20px', display: 'flex', alignItems: 'center', gap: 14
              }}>
                <span style={{
                  flex: '0 0 auto', width: 30, height: 30, borderRadius: '50%',
                  background: 'var(--brand-primary-gradient)', color: '#fff',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 15
                }}>✓</span>
                <span style={{ fontSize: 16, color: 'var(--color-text-heading)' }}>{t}</span>
              </div>
            ))}
            <a href="#contact" className="btn btn-family tgt-cta-mobile">対象になるか相談する</a>
          </div>
        </div>
      </div>
      <style>{`
        .tgt-cta-mobile { display: none; }
        @media (max-width: 820px) {
          .tgt-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .tgt-cta-desktop { display: none; }
          .tgt-cta-mobile { display: inline-flex; width: 100%; justify-content: center; margin-top: 12px; }
        }
      `}</style>
    </section>
  );
}
