// ── Footer ─────────────────────────────────────────
function Footer() {
  return (
    <footer style={{ background: 'var(--color-neutral-900)', color: 'var(--color-neutral-300)', padding: '52px 0 28px' }}>
      <div className="container">
        <div className="ft-grid" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: 32 }}>
          <div>
            <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 19, color: '#fff', marginBottom: 12 }}>
              あおぞら訪問マッサージ院
            </div>
            <p style={{ fontSize: 14, lineHeight: 1.9 }}>
              通院がむずかしい方のご自宅へ、国家資格者がお伺いする訪問マッサージ。
              ご家族・ケアマネジャー様のご相談を承ります。
            </p>
          </div>
          <div>
            <div style={{ color: '#fff', fontWeight: 600, marginBottom: 12, fontSize: 14 }}>メニュー</div>
            <div style={{ display: 'grid', gap: 8, fontSize: 14 }}>
              <a href="#about">訪問マッサージとは</a>
              <a href="#flow">ご利用の流れ</a>
              <a href="#price">料金</a>
              <a href="#pro">ケアマネ・医療の方へ</a>
              <a href="#faq">よくある質問</a>
            </div>
          </div>
          <div>
            <div style={{ color: '#fff', fontWeight: 600, marginBottom: 12, fontSize: 14 }}>お問い合わせ</div>
            <div style={{ display: 'grid', gap: 8, fontSize: 14 }}>
              <span>📞 0000-00-0000</span>
              <span>✉️ info@example.com</span>
              <span>平日 9:00–18:00</span>
            </div>
          </div>
        </div>
        <div style={{
          marginTop: 40, paddingTop: 20, borderTop: '1px solid rgba(255,255,255,0.12)',
          display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 10, fontSize: 12.5
        }}>
          <span>© あおぞら訪問マッサージ院（デモ）</span>
          <span>Sample designed by siruko design ／ 架空の院・実在しません</span>
        </div>
      </div>
      <style>{`@media (max-width: 720px){ .ft-grid{ grid-template-columns:1fr !important; gap:24px !important; } }`}</style>
    </footer>
  );
}