// Services.jsx — Services section
const Services = ({ onNavigate }) => {
  const services = [
    {
      tag: '体験',
      tagColor: '#E5ECF5', tagText: '#122A52',
      photo: './assets/photos/hand-holding-berries.jpg',
      title: 'ブルーベリー摘み取り',
      titleEn: 'Blueberry Picking',
      desc: '自分で摘んだブルーベリーをその場でお召し上がりください。農園スタッフがご案内します。',
      price: '¥1,500〜（税込）',
      season: '6月下旬〜8月上旬',
      page: 'blueberry',
      cta: '体験の詳細を見る',
      familyFriendly: true,
    },
    {
      tag: 'ハーブ・花',
      tagColor: '#E4F0E2', tagText: '#3D6535',
      photo: './assets/photos/berry-garden.jpg',
      title: 'ハーブ・花摘み取り',
      titleEn: 'Herb & Flower Picking',
      desc: '季節のハーブや花を摘んでお持ち帰り。ブーケ作りやハーブティー体験も。',
      price: '¥800〜（税込）',
      season: '通年（季節により品種変動）',
      page: 'contact',
      cta: '体験について問い合わせる',
      familyFriendly: true,
    },
    {
      tag: 'カフェ',
      tagColor: '#FFF3C4', tagText: '#6B4804',
      photo: './assets/photos/berries-closeup-blue.jpg',
      title: '農家カフェ',
      titleEn: 'Farm Café',
      desc: '農園で摘んだブルーベリーを使ったスイーツ・ドリンクをご提供。奈良の自然を感じながらひと休み。',
      price: 'ドリンク ¥600〜',
      season: '通年営業（整備予定）',
      page: 'cafe',
      cta: 'カフェメニューを見る',
      familyFriendly: true,
    },
    {
      tag: '農業体験',
      tagColor: '#F0E0C8', tagText: '#6B4520',
      photo: './assets/photos/berry-bush-pink.jpg',
      title: '農業・加工体験',
      titleEn: 'Farm Workshop',
      desc: 'ジャムやジュースの手作り体験。収穫から加工まで、農業の楽しさを丸ごと体験できます。',
      price: '¥2,500〜（税込）',
      season: '要予約・通年',
      page: 'reserve',
      cta: '予約の流れを見る',
      familyFriendly: true,
    },
  ];

  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' }}>
            Services &amp; Experience
          </div>
          <h2 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: 'clamp(28px,4vw,42px)', fontWeight: 500, color: '#0F2240', lineHeight: 1.3, letterSpacing: '-0.01em' }}>
            農園まるごと、楽しむ。
          </h2>
        </div>

        {/* Cards */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '24px' }}>
          {services.map(svc => (
            <div key={svc.title}
              onClick={() => onNavigate(svc.page)}
              style={{
                background: 'white', borderRadius: '16px', overflow: 'hidden',
                boxShadow: '0 2px 8px rgba(18,42,82,0.08)',
                cursor: 'pointer', transition: 'all 0.25s ease',
              }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 8px 32px rgba(18,42,82,0.14)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 2px 8px rgba(18,42,82,0.08)'; }}
            >
              {/* Card image area */}
              <div style={{ height: '180px', backgroundImage: `url(${svc.photo})`, backgroundSize: 'cover', backgroundPosition: 'center', position: 'relative' }}>
                <div style={{ position: 'absolute', inset: 0, background: 'rgba(8,18,36,0.25)' }} />
                <div style={{ position: 'absolute', bottom: '16px', left: '16px', fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic', fontSize: '13px', letterSpacing: '1px', color: 'rgba(255,255,255,0.8)' }}>{svc.titleEn}</div>
              </div>
              {/* Card body */}
              <div style={{ padding: '20px 22px 24px' }}>
                <div style={{ display: 'flex', gap: '6px', marginBottom: '10px', flexWrap: 'wrap' }}>
                  <span style={{ display: 'inline-block', fontSize: '10px', letterSpacing: '1.5px', background: svc.tagColor, color: svc.tagText, padding: '2px 8px', borderRadius: '4px', fontFamily: "'Noto Sans JP', sans-serif" }}>
                    {svc.tag}
                  </span>
                  {svc.familyFriendly && (
                    <span style={{ display: 'inline-block', fontSize: '10px', background: '#FFF3C4', color: '#6B4804', padding: '2px 8px', borderRadius: '4px', fontFamily: "'Noto Sans JP', sans-serif" }}>
                      👨‍👩‍👧‍👦 ファミリー向け
                    </span>
                  )}
                </div>
                <h3 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '20px', fontWeight: 500, color: '#0F2240', lineHeight: 1.3, marginBottom: '10px' }}>
                  {svc.title}
                </h3>
                <p style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '13px', fontWeight: 300, color: '#6B5D52', lineHeight: 1.85, marginBottom: '16px' }}>
                  {svc.desc}
                </p>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '1px solid #F0E8D8', paddingTop: '14px' }}>
                  <div>
                    <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '13px', fontWeight: 500, color: '#0F2240' }}>{svc.price}</div>
                    <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '11px', color: '#A89A90', marginTop: '2px' }}>{svc.season}</div>
                  </div>
                  <span style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '12px', fontWeight: 500, color: '#1A3A6E' }}>{svc.cta} →</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Services });