// ── Contact ────────────────────────────────────────
function Contact() {
  const [sent, setSent] = React.useState(false);
  const [audience, setAudience] = React.useState('');
  return (
    <section id="contact" className="section" style={{ background: 'var(--color-bg-primary-soft)' }}>
      <div className="container" style={{ maxWidth: 900 }}>
        <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
          <div className="ct-grid" style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr' }}>
            <div style={{
              background: 'var(--brand-primary-gradient)',
              color: '#fff', padding: '40px 34px'
            }}>
              <h2 style={{ color: '#fff', fontSize: 26 }}>まずは無料でご相談</h2>
              <p style={{ marginTop: 14, color: 'var(--color-primary-100)', fontSize: 15.5 }}>
                対象になるか、料金はいくらか——気になることを何でもお聞きください。
                ご家族・ケアマネ様からのご連絡も歓迎です。
              </p>
              <div style={{ marginTop: 28, display: 'grid', gap: 14, fontSize: 15.5 }}>
                <div>📞 <strong>0000-00-0000</strong>（平日9:00–18:00）</div>
                <div>✉️ info@example.com</div>
                <div>🕒 土日のご相談も承ります</div>
              </div>
            </div>

            <div style={{ padding: '40px 34px' }}>
              {sent ? (
                <div style={{ textAlign: 'center', padding: '30px 0' }}>
                  <div style={{ fontSize: 46 }}>✅</div>
                  <h3 style={{ fontSize: 20, margin: '12px 0 8px' }}>送信ありがとうございます</h3>
                  <p style={{ fontSize: 15 }}>（デモのため実際には送信されません）担当より折り返しご連絡します。</p>
                </div>
              ) : (
                <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: 'grid', gap: 14 }}>
                  <label style={{ display: 'grid', gap: 6, fontSize: 14, fontWeight: 600, color: 'var(--color-text-heading)' }}>
                    ご相談者
                    <select required style={inp} value={audience} onChange={(e) => setAudience(e.target.value)}>
                      <option value="" disabled>選択してください</option>
                      <option value="family">ご家族・ご本人</option>
                      <option value="pro">ケアマネジャー・医療関係者</option>
                      <option value="other">その他</option>
                    </select>
                  </label>
                  <label style={{ display: 'grid', gap: 6, fontSize: 14, fontWeight: 600, color: 'var(--color-text-heading)' }}>
                    お名前
                    <input required placeholder="山田 太郎" style={inp} />
                  </label>
                  <label style={{ display: 'grid', gap: 6, fontSize: 14, fontWeight: 600, color: 'var(--color-text-heading)' }}>
                    ご連絡先（電話またはメール）
                    <input required placeholder="090-0000-0000" style={inp} />
                  </label>
                  <label style={{ display: 'grid', gap: 6, fontSize: 14, fontWeight: 600, color: 'var(--color-text-heading)' }}>
                    ご相談内容
                    <textarea rows={3} placeholder="母の通院がつらく、自宅での施術を検討しています…" style={{ ...inp, resize: 'vertical' }} />
                  </label>
                  <button type="submit" className={`btn ${audience === 'pro' ? 'btn-pro' : 'btn-family'}`} style={{ width: '100%', justifyContent: 'center', marginTop: 4 }}>
                    無料で相談する
                  </button>
                  <p style={{ fontSize: 12.5, color: 'var(--color-text-secondary)', textAlign: 'center' }}>
                    ※ これはデモ用フォームです。入力内容は送信・保存されません。
                  </p>
                </form>
              )}
            </div>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 760px){ .ct-grid{ grid-template-columns:1fr !important; } }`}</style>
    </section>
  );
}
const inp = {
  padding: '12px 14px', borderRadius: 'var(--radius-sm)',
  border: '1px solid var(--color-border-strong)', fontSize: 15,
  fontFamily: 'var(--font-sans)', background: '#fff', color: 'var(--color-text-body)'
};