// CafePage.jsx — Café page
const CafePage = ({ onNavigate }) => {
  const menu = [
    { cat: 'ドリンク', items: [
      { name: 'ブルーベリーソーダ', desc: '自家製ベリーシロップ使用', price: '価格未定' },
      { name: 'ブルーベリーラテ', desc: '農園産ブルーベリー使用', price: '価格未定' },
      { name: 'ブルーベリービネガーソーダ', desc: 'ベリービネガーのさわやかソーダ', price: '価格未定' },
    ]},
    { cat: 'スイーツ', items: [
      { name: 'ブルーベリーかき氷', desc: '農園直送ベリーシロップ', price: '価格未定' },
    ]},
  ];

  return (
    <div style={{ minHeight: '100vh', background: '#FAF6F0', paddingTop: '68px' }}>
      {/* Hero band */}
      <div style={{ background: 'linear-gradient(135deg, #3D6535 0%, #5E9252 50%, #7AB86A 100%)', padding: '64px 24px', textAlign: 'center' }}>
        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '11px', letterSpacing: '4px', textTransform: 'uppercase', color: '#9EC893', marginBottom: '14px' }}>Farm Café</div>
        <h1 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: 'clamp(28px,4vw,48px)', fontWeight: 500, color: '#FAF6F0', lineHeight: 1.3 }}>農家カフェ</h1>
        <p style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 300, color: '#C4DFC0', marginTop: '14px', lineHeight: 1.9 }}>農園で摘んだベリーを使ったスイーツとドリンクをご提供。</p>
      </div>

      {/* Menu */}
      <div style={{ maxWidth: '800px', margin: '0 auto', padding: '64px 24px' }}>
        {menu.map(section => (
          <div key={section.cat} style={{ marginBottom: '48px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '24px' }}>
              <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '10px', letterSpacing: '3px', textTransform: 'uppercase', color: '#C9920A' }}>{section.cat}</div>
              <div style={{ flex: 1, height: '1px', background: '#E5D8C4' }} />
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '0' }}>
              {section.items.map((item, i) => (
                <div key={item.name} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px 0', borderBottom: i < section.items.length - 1 ? '1px solid #F0E8D8' : 'none' }}>
                  <div>
                    <div style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '17px', fontWeight: 500, color: '#0F2240', marginBottom: '3px' }}>{item.name}</div>
                    <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '12px', fontWeight: 300, color: '#A89A90' }}>{item.desc}</div>
                  </div>
                  <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '12px', fontWeight: 400, color: '#A89A90', flexShrink: 0, marginLeft: '24px' }}>{item.price}</div>
                </div>
              ))}
            </div>
          </div>
        ))}
        <div style={{ background: '#E4F0E2', borderRadius: '12px', padding: '16px 20px', fontFamily: "'Noto Sans JP', sans-serif", fontSize: '12px', fontWeight: 300, color: '#3D6535', lineHeight: 1.8 }}>
          ※ メニューは季節・入荷状況により変更になる場合があります。価格は税込表示。
        </div>
        <div style={{ marginTop: '28px', background: '#FFFFFF', borderRadius: '16px', padding: '24px', boxShadow: '0 2px 8px rgba(18,42,82,0.07)' }}>
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '10px', letterSpacing: '3px', textTransform: 'uppercase', color: '#C9920A', marginBottom: '10px' }}>Next</div>
          <h3 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '20px', fontWeight: 500, color: '#0F2240', marginBottom: '10px' }}>農園体験もチェックする</h3>
          <p style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '13px', fontWeight: 300, color: '#6B5D52', lineHeight: 1.8, marginBottom: '18px' }}>
            カフェだけでなく、摘み取り体験やアクセス情報もあわせてご覧いただくと来園イメージがつかみやすくなります。
          </p>
          <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
            <button onClick={() => onNavigate('blueberry')} style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '13px', fontWeight: 500, background: '#3D6535', color: '#fff', border: 'none', borderRadius: '8px', padding: '12px 18px', cursor: 'pointer' }}>ブルーベリー狩りを見る</button>
            <button onClick={() => onNavigate('access')} style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '13px', fontWeight: 500, background: '#fff', color: '#1A3A6E', border: '1.5px solid #C9D5E5', borderRadius: '8px', padding: '12px 18px', cursor: 'pointer' }}>アクセスを見る</button>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { CafePage });