// WhyUs.jsx — 「奈良ベリーガーデンが選ばれる理由」セクション
const WhyUs = ({ onNavigate }) => {
  const reasons = [
    {
      number: '01',
      title: '80品種以上のブルーベリー',
      titleEn: 'Over 80 Varieties',
      desc: '国内最大級の品種数。早生・中生・晩生を揃えているため、シーズン中いつ来ても異なる品種の食べ比べをお楽しみいただけます。',
      color: '#1A3A6E',
      bg: '#F0F4F9',
    },
    {
      number: '02',
      title: '完熟した実をその場で',
      titleEn: 'Fresh & Fully Ripe',
      desc: '農園スタッフが毎朝状態を確認。完熟のタイミングに合わせて区画を開放するので、いつでも最高の甘さのベリーが摘めます。',
      color: '#1A3A6E',
      bg: '#E5ECF5',
    },
    {
      number: '03',
      title: '子ども連れでも安心',
      titleEn: 'Family Friendly',
      desc: '段差の少ない園内設計、日よけ屋根付き休憩エリア、ベビーカーOK。小さなお子さまから祖父母まで一緒に楽しめる空間です。',
      color: '#3D6535',
      bg: '#F3FAF2',
    },
    {
      number: '04',
      title: '奈良市街地から好アクセス',
      titleEn: 'Easily Accessible',
      desc: '奈良市街地・大和郡山方面から車で約〇〇分。主要道路沿いで駐車場完備。県外からも訪れやすい立地です。',
      color: '#6B4520',
      bg: '#FAF3E8',
    },
    {
      number: '05',
      title: 'カフェ・休憩スペースを整備',
      titleEn: 'Café & Rest Area',
      desc: '農園直営カフェでは収穫したベリーを使ったドリンク・スイーツをご提供。摘み取りの後も、ゆっくりと農園の時間をお楽しみいただけます。',
      color: '#C9920A',
      bg: '#F0E0C8',
    },
  ];

  return (
    <section style={{ background: '#FAF6F0', padding: '96px 24px' }}>
      <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
        {/* Section header */}
        <div style={{ textAlign: 'center', marginBottom: '64px' }}>
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '11px', letterSpacing: '4px', textTransform: 'uppercase', color: '#C9920A', marginBottom: '14px' }}>
            Why Nara Berry Garden
          </div>
          <h2 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: 'clamp(26px,4vw,40px)', fontWeight: 500, color: '#0F2240', lineHeight: 1.35 }}>
            奈良ベリーガーデンが<br />選ばれる5つの理由
          </h2>
        </div>

        {/* Reasons grid */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '20px' }}>
          {reasons.map(r => (
            <div key={r.number} style={{
              background: 'white', borderRadius: '16px', padding: '28px 28px 28px',
              boxShadow: '0 2px 8px rgba(18,42,82,0.07)',
              display: 'flex', gap: '20px', alignItems: 'flex-start',
            }}>
              {/* Number badge */}
              <div style={{
                flexShrink: 0, width: '48px', height: '48px', borderRadius: '12px',
                background: r.bg, display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <span style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '20px', fontWeight: 600, color: r.color }}>{r.number}</span>
              </div>
              {/* Text */}
              <div>
                <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic', fontSize: '10px', letterSpacing: '2px', color: '#A89A90', marginBottom: '4px' }}>{r.titleEn}</div>
                <h3 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '17px', fontWeight: 500, color: '#0F2240', lineHeight: 1.4, marginBottom: '8px' }}>{r.title}</h3>
                <p style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '12px', fontWeight: 300, color: '#6B5D52', lineHeight: 1.9 }}>{r.desc}</p>
              </div>
            </div>
          ))}
        </div>

        {/* CTA */}
        <div style={{ textAlign: 'center', marginTop: '48px' }}>
          <button onClick={() => onNavigate('reserve')} style={{
            fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 500,
            background: '#1A3A6E', color: 'white', border: 'none', cursor: 'pointer',
            padding: '13px 36px', borderRadius: '8px', transition: 'all 0.2s ease',
          }}
            onMouseEnter={e => e.target.style.background = '#122A52'}
            onMouseLeave={e => e.target.style.background = '#1A3A6E'}
          >体験を予約する</button>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { WhyUs });