// SnsSection.jsx — SNSフォロー誘導
const SnsSection = ({ onNavigate }) => (
  <section style={{ background: '#1A3A6E', padding: '72px 24px', textAlign: 'center' }}>
    <div style={{ maxWidth: '600px', margin: '0 auto' }}>
      <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '11px', letterSpacing: '4px', textTransform: 'uppercase', color: '#F5C518', marginBottom: '14px' }}>Stay Connected</div>
      <h2 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '28px', fontWeight: 500, color: '#FAF6F0', marginBottom: '12px' }}>開園情報・農園の様子を<br />SNSでお届け</h2>
      <p style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 400, color: '#D4DEEC', lineHeight: 1.9, marginBottom: '36px' }}>
        シーズン開始のお知らせ・新品種情報・カフェの新メニューなど、最新情報はInstagramとLINEで発信中。
      </p>
      <div style={{ display: 'flex', gap: '14px', justifyContent: 'center', flexWrap: 'wrap' }}>
        <button onClick={() => onNavigate && onNavigate('contact')} style={{
          display: 'flex', alignItems: 'center', gap: '10px',
          fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 500,
          background: 'linear-gradient(135deg, #833AB4, #E1306C, #F77737)',
          color: 'white', textDecoration: 'none',
          padding: '12px 24px', borderRadius: '8px', transition: 'opacity 0.2s',
          border: 'none', cursor: 'pointer',
        }}
          onMouseEnter={e => e.currentTarget.style.opacity = '0.85'}
          onMouseLeave={e => e.currentTarget.style.opacity = '1'}
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
          Instagram・SNS情報を見る
        </button>
        <a href="https://lin.ee/bNXQHpg" target="_blank" rel="noreferrer" style={{
          display: 'flex', alignItems: 'center', gap: '10px',
          fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 500,
          background: '#06C755', color: 'white', textDecoration: 'none',
          padding: '12px 24px', borderRadius: '8px', transition: 'opacity 0.2s',
        }}
          onMouseEnter={e => e.currentTarget.style.opacity = '0.85'}
          onMouseLeave={e => e.currentTarget.style.opacity = '1'}
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.07 2 11.07c0 4.5 3.44 8.26 8.11 9.07.59.11.81-.26.81-.58v-2.02c-3.31.73-4.01-1.59-4.01-1.59-.54-1.38-1.32-1.74-1.32-1.74-1.08-.74.08-.73.08-.73 1.2.08 1.83 1.23 1.83 1.23 1.06 1.82 2.78 1.29 3.46.99.11-.77.42-1.29.76-1.59-2.64-.3-5.41-1.32-5.41-5.88 0-1.3.46-2.36 1.23-3.19-.12-.3-.53-1.51.12-3.15 0 0 1-.32 3.3 1.23a11.5 11.5 0 016 0C17 4.68 18 5 18 5c.65 1.64.24 2.85.12 3.15.77.83 1.23 1.89 1.23 3.19 0 4.57-2.78 5.57-5.43 5.86.43.37.81 1.1.81 2.22v3.29c0 .32.21.69.82.58C18.56 19.33 22 15.57 22 11.07 22 6.07 17.52 2 12 2z"/></svg>
          LINE 友達登録
        </a>
      </div>
    </div>
  </section>
);

Object.assign(window, { SnsSection });