// BlueberryPage.jsx — ブルーベリー狩りページ
const BlueberryPage = ({ onNavigate }) => {
  const flow = [
    { step: '01', title: '到着・受付', desc: '駐車場に車を停め、受付テントへお越しください。予約番号をお伝えください。' },
    { step: '02', title: 'ご説明', desc: 'スタッフより当日の注意事項・摘み方・区画のご案内をします（約5分）。' },
    { step: '03', title: '摘み取り体験', desc: '完熟のブルーベリーをお好みで摘んでください。甘い品種・酸味のある品種など多様な味をお楽しみください。' },
    { step: '04', title: 'カフェ・休憩', desc: '摘み取りの後は農園カフェへ。農園直産のベリーを使ったドリンク・スイーツでひと休みしてください（整備予定）。' },
    { step: '05', title: 'お会計・お土産', desc: '量り売り・パック販売のご購入はここで。ジャムなどの加工品もご用意しています（予定）。' },
  ];

  return (
    <div style={{ minHeight: '100vh', background: '#FAF6F0', paddingTop: '68px' }}>
      {/* Hero */}
      <div style={{ position: 'relative', height: '380px', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(./assets/photos/berries-large-blue.jpg)', backgroundSize: 'cover', backgroundPosition: 'center' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(160deg, rgba(26,58,110,0.82) 0%, rgba(26,58,110,0.55) 100%)' }} />
        <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '0 48px' }}>
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '11px', letterSpacing: '4px', textTransform: 'uppercase', color: '#B5C4DB', marginBottom: '14px' }}>Blueberry Picking</div>
          <h1 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: 'clamp(28px,4vw,48px)', fontWeight: 500, color: '#FAF6F0', lineHeight: 1.3, maxWidth: '600px' }}>
            ブルーベリー狩り
          </h1>
          <p style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 300, color: '#C9D5E5', marginTop: '14px', lineHeight: 1.9 }}>
            80品種以上の完熟ブルーベリーを、奈良の田園でお楽しみください。
          </p>
        </div>
      </div>

      {/* Status banner */}
      <div style={{ background: '#E5ECF5', padding: '16px 24px', textAlign: 'center' }}>
        <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 400, color: '#1A3A6E' }}>
          現在のステータス:
          <span style={{ fontWeight: 500, marginLeft: '8px', background: '#1A3A6E', color: 'white', padding: '3px 12px', borderRadius: '4px', fontSize: '13px' }}>
            開園準備中 — 2027年初夏 プレオープン予定
          </span>
        </div>
      </div>

      <div style={{ maxWidth: '900px', margin: '0 auto', padding: '64px 24px' }}>
        {/* Features */}
        <div style={{ marginBottom: '64px' }}>
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '11px', letterSpacing: '3px', textTransform: 'uppercase', color: '#C9920A', marginBottom: '12px' }}>Features</div>
          <h2 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '28px', fontWeight: 500, color: '#0F2240', marginBottom: '32px' }}>体験の特徴</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px' }}>
            {[
              ['80品種以上', '早生〜晩生まで揃えた多品種。シーズン中ずっと旬のベリーを。', '#E5ECF5', '#122A52'],
              ['完熟を、その場で', '農園スタッフが毎朝確認。完熟ならではの甘さをお楽しみください。', '#F5F8FC', '#1A3A6E'],
              ['子連れ安心設計', '段差なし・日よけあり・ベビーカー対応。ご家族でどうぞ。', '#F3FAF2', '#3D6535'],
              ['奈良市街から便利', '大和郡山市。イオンモールから約3分、郡山ICから約10分。', '#FAF3E8', '#6B4520'],
            ].map(([t, d, bg, tc]) => (
              <div key={t} style={{ background: bg, borderRadius: '12px', padding: '20px' }}>
                <div style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '16px', fontWeight: 500, color: tc, marginBottom: '8px' }}>{t}</div>
                <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '12px', fontWeight: 300, color: '#6B5D52', lineHeight: 1.8 }}>{d}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Season & Price */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '24px', marginBottom: '64px' }}>
          <div style={{ background: 'white', borderRadius: '16px', padding: '28px', 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' }}>Season</div>
            <div style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '20px', fontWeight: 500, color: '#0F2240', marginBottom: '8px' }}>6月下旬〜8月上旬</div>
            <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '12px', fontWeight: 300, color: '#6B5D52', lineHeight: 1.8 }}>
              実際の実りにより前後します。<br />開園情報はLINEでお知らせします。
            </div>
          </div>
          <div style={{ background: 'white', borderRadius: '16px', padding: '28px', 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' }}>Price</div>
            <div style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '20px', fontWeight: 500, color: '#0F2240', marginBottom: '8px' }}>料金未定</div>
            <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '12px', fontWeight: 300, color: '#6B5D52', lineHeight: 1.85 }}>
              料金は開園前に公開いたします。<br />LINE・Instagramでお知らせします。
            </div>
          </div>
        </div>

        {/* Flow */}
        <div style={{ marginBottom: '64px' }}>
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '11px', letterSpacing: '3px', textTransform: 'uppercase', color: '#C9920A', marginBottom: '12px' }}>Flow</div>
          <h2 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '24px', fontWeight: 500, color: '#0F2240', marginBottom: '28px' }}>当日の流れ</h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '0' }}>
            {flow.map((f, i) => (
              <div key={f.step} style={{ display: 'flex', gap: '0', position: 'relative' }}>
                {/* Line */}
                {i < flow.length - 1 && <div style={{ position: 'absolute', left: '24px', top: '52px', bottom: '-8px', width: '2px', background: '#E5ECF5' }} />}
                <div style={{ flexShrink: 0, width: '48px', height: '48px', borderRadius: '50%', background: '#1A3A6E', display: 'flex', alignItems: 'center', justifyContent: 'center', marginRight: '24px', marginBottom: i < flow.length - 1 ? '24px' : '0' }}>
                  <span style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '14px', fontWeight: 600, color: 'white' }}>{f.step}</span>
                </div>
                <div style={{ paddingTop: '10px', flex: 1, paddingBottom: i < flow.length - 1 ? '24px' : '0' }}>
                  <div style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '16px', fontWeight: 500, color: '#0F2240', marginBottom: '4px' }}>{f.title}</div>
                  <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '13px', fontWeight: 300, color: '#6B5D52', lineHeight: 1.8 }}>{f.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Gear list */}
        <div style={{ background: '#F3FAF2', borderRadius: '16px', padding: '28px', marginBottom: '40px' }}>
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '10px', letterSpacing: '3px', textTransform: 'uppercase', color: '#3D6535', marginBottom: '10px' }}>What to Bring</div>
          <h3 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '18px', fontWeight: 500, color: '#0F2240', marginBottom: '14px' }}>服装・持ち物</h3>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: '8px' }}>
            {['帽子・日よけ', 'タオル', '歩きやすい靴', '虫よけスプレー', '飲み物', '汚れても良い服装'].map(item => (
              <div key={item} style={{ display: 'flex', gap: '8px', alignItems: 'center', fontFamily: "'Noto Sans JP', sans-serif", fontSize: '13px', fontWeight: 300, color: '#3D6535' }}>
                <span style={{ color: '#5E9252' }}>✓</span> {item}
              </div>
            ))}
          </div>
        </div>

        <FAQSection limit={4} />
        <div style={{ marginTop: '40px', 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' }}>Continue</div>
          <h3 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '20px', fontWeight: 500, color: '#0F2240', marginBottom: '10px' }}>あわせて見たいページ</h3>
          <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
            <button onClick={() => onNavigate('access')} style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '13px', fontWeight: 500, background: '#1A3A6E', color: '#fff', border: 'none', borderRadius: '8px', padding: '12px 18px', cursor: 'pointer' }}>アクセスを見る</button>
            <button onClick={() => onNavigate('cafe')} 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>
            <button onClick={() => onNavigate('contact')} 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>

      {/* CTA */}
      <div style={{ background: '#1A3A6E', padding: '64px 24px', textAlign: 'center' }}>
        <h2 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '26px', fontWeight: 500, color: '#FAF6F0', marginBottom: '12px' }}>
          プレオープン通知を受け取る
        </h2>
        <p style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '13px', fontWeight: 300, color: '#B5C4DB', marginBottom: '28px', lineHeight: 1.9 }}>
          予約開始・キャンセル枠・開園情報をLINEでお届けします。
        </p>
        <a href="https://lin.ee/bNXQHpg" target="_blank" rel="noreferrer" style={{
          display: 'inline-block', fontFamily: "'Noto Sans JP', sans-serif", fontSize: '15px', fontWeight: 500,
          background: '#06C755', color: 'white', textDecoration: 'none', padding: '14px 36px', borderRadius: '8px',
        }}>LINE 友達登録</a>
      </div>

      <Footer onNavigate={onNavigate} />
    </div>
  );
};

Object.assign(window, { BlueberryPage });