// Footer.jsx — Site footer
const Footer = ({ onNavigate }) => (
  <footer style={{ background: '#0F0826', padding: '64px 24px 32px', color: '#8DA9C9' }}>
    <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: '48px', marginBottom: '48px' }}>
        {/* Brand */}
        <div>
          <div style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '20px', fontWeight: 500, color: '#FAF6F0', marginBottom: '4px' }}>奈良ベリーガーデン</div>
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic', fontSize: '12px', letterSpacing: '2px', color: '#8DA9C9', marginBottom: '20px' }}>Nara Berry Garden</div>
          <p style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '13px', fontWeight: 400, lineHeight: 1.9, color: '#B5C4DB', maxWidth: '280px' }}>
            奈良県のブルーベリー観光農園。果物狩り・農業体験・農家カフェを通じて、地域に根ざした体験型サービスを提供しています。
          </p>
        </div>

        {/* Links */}
        <div>
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '10px', letterSpacing: '3px', textTransform: 'uppercase', color: '#C9920A', marginBottom: '16px' }}>Menu</div>
          {[['農園について', 'about'], ['体験・サービス', 'services'], ['カフェ', 'cafe'], ['アクセス', 'access'], ['予約', 'reserve']].map(([label, page]) => (
            <div key={page} style={{ marginBottom: '10px' }}>
              <button onClick={() => onNavigate(page)} style={{ background: 'none', border: 'none', cursor: 'pointer', fontFamily: "'Noto Sans JP', sans-serif", fontSize: '13px', fontWeight: 400, color: '#B5C4DB', padding: 0, transition: 'color 0.15s' }}
                onMouseEnter={e => e.target.style.color = '#FAF6F0'}
                onMouseLeave={e => e.target.style.color = '#B5C4DB'}
              >{label}</button>
            </div>
          ))}
        </div>

        {/* Contact */}
        <div>
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '10px', letterSpacing: '3px', textTransform: 'uppercase', color: '#C9920A', marginBottom: '16px' }}>Contact</div>
          <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '13px', fontWeight: 400, color: '#B5C4DB', lineHeight: 1.9 }}>
            <div>〒639-1012</div>
            <div>奈良県大和郡山市下三橋町625</div>
            <div style={{ marginTop: '12px' }}>TEL: 受付開始後公開予定</div>
            <div style={{ marginTop: '4px' }}>郡山IC（西名阪）から約10分</div>
          </div>
        </div>
      </div>

      <div style={{ borderTop: '1px solid rgba(141,169,201,0.2)', paddingTop: '24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '11px', fontWeight: 300, color: '#8DA9C9' }}>© 2024 ミノリア株式会社 / 奈良ベリーガーデン</div>
        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic', fontSize: '11px', letterSpacing: '1px', color: '#8DA9C9' }}>Minoria Co., Ltd.</div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Footer });