// ConceptPage.jsx — 栽培へのこだわりページ
const ConceptPage = ({ onNavigate }) => {
  const points = [
    {
      num: '01', title: '80品種以上の多品種栽培',
      titleEn: 'Over 80 Varieties',
      body: '早生・中生・晩生の品種を組み合わせることで、シーズン中ずっと旬のベリーをお楽しみいただけます。甘い品種、酸味のある品種、大粒品種など、食べ比べの楽しさも魅力のひとつです。',
      color: '#1A3A6E', bg: '#F5F8FC',
    },
    {
      num: '02', title: '完熟を待って、その場で',
      titleEn: 'Harvested at Peak Ripeness',
      body: '農園スタッフが毎朝果実の状態を確認し、完熟のタイミングで区画を開放しています。スーパーでは手に入らない、完熟ならではの甘さと香りをその場でお召し上がりいただけます。',
      color: '#1A3A6E', bg: '#E5ECF5',
    },
    {
      num: '03', title: '子連れでも安心できる設計',
      titleEn: 'Designed for Families',
      body: '段差の少ない通路設計、日よけ付き休憩スペース、ベビーカー対応の動線。小さなお子さまから祖父母まで、家族みんなが安心して過ごせる農園づくりを心がけています。',
      color: '#3D6535', bg: '#F3FAF2',
    },
    {
      num: '04', title: '奈良の土と気候を活かす',
      titleEn: 'Rooted in Nara\'s Soil',
      body: '大和郡山の豊かな土壌と奈良盆地の気候がブルーベリーの栽培に適しています。農薬の使用を最小限に抑え、土の力を大切にした栽培を行っています。',
      color: '#6B4520', bg: '#FAF3E8',
    },
  ];

  return (
    <div style={{ minHeight: '100vh', background: '#FAF6F0', paddingTop: '68px' }}>
      {/* Hero */}
      <div style={{ background: 'linear-gradient(135deg, #1A3A6E, #3E5C8A)', padding: '72px 24px', textAlign: 'center' }}>
        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '11px', letterSpacing: '4px', textTransform: 'uppercase', color: '#B5C4DB', marginBottom: '14px' }}>Our Commitment</div>
        <h1 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: 'clamp(28px,4vw,44px)', fontWeight: 500, color: '#FAF6F0', lineHeight: 1.3 }}>栽培へのこだわり</h1>
        <p style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 300, color: '#B5C4DB', marginTop: '16px', lineHeight: 1.9, maxWidth: '480px', margin: '16px auto 0' }}>
          「ブルーベリー狩りができる場所」ではなく、奈良の田園で完熟果実を味わい、ゆっくり過ごせる体験を。
        </p>
      </div>

      {/* Points */}
      <div style={{ maxWidth: '900px', margin: '0 auto', padding: '80px 24px' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
          {points.map((p, i) => (
            <div key={p.num} style={{
              display: 'grid', gridTemplateColumns: i % 2 === 0 ? '1fr 2fr' : '2fr 1fr',
              gap: '40px', alignItems: 'center', background: 'white', borderRadius: '20px',
              padding: '40px', boxShadow: '0 2px 12px rgba(18,42,82,0.07)',
            }}>
              {i % 2 === 0 ? (
                <>
                  <div style={{ background: p.bg, borderRadius: '16px', padding: '32px', textAlign: 'center' }}>
                    <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '56px', fontWeight: 600, color: p.color, lineHeight: 1 }}>{p.num}</div>
                    <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic', fontSize: '12px', letterSpacing: '2px', color: p.color, opacity: 0.7, marginTop: '8px' }}>{p.titleEn}</div>
                  </div>
                  <div>
                    <h3 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '22px', fontWeight: 500, color: '#0F2240', marginBottom: '16px', lineHeight: 1.4 }}>{p.title}</h3>
                    <p style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 300, color: '#6B5D52', lineHeight: 1.95 }}>{p.body}</p>
                  </div>
                </>
              ) : (
                <>
                  <div>
                    <h3 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '22px', fontWeight: 500, color: '#0F2240', marginBottom: '16px', lineHeight: 1.4 }}>{p.title}</h3>
                    <p style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 300, color: '#6B5D52', lineHeight: 1.95 }}>{p.body}</p>
                  </div>
                  <div style={{ background: p.bg, borderRadius: '16px', padding: '32px', textAlign: 'center' }}>
                    <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '56px', fontWeight: 600, color: p.color, lineHeight: 1 }}>{p.num}</div>
                    <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic', fontSize: '12px', letterSpacing: '2px', color: p.color, opacity: 0.7, marginTop: '8px' }}>{p.titleEn}</div>
                  </div>
                </>
              )}
            </div>
          ))}
        </div>
      </div>

      {/* Photo strip */}
      <PhotoStrip />

      {/* CTA */}
      <div style={{ background: '#F0E8D8', padding: '64px 24px', textAlign: 'center' }}>
        <h2 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '28px', fontWeight: 500, color: '#0F2240', marginBottom: '24px' }}>
          開園情報をいち早く受け取る
        </h2>
        <p style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '13px', fontWeight: 300, color: '#6B5D52', lineHeight: 1.9, marginBottom: '20px' }}>
          栽培の考え方に共感いただけた方へ。開園準備の進捗はLINEと詳細ページで順次ご案内します。
        </p>
        <div style={{ display: 'flex', gap: '12px', justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href="https://lin.ee/bNXQHpg" target="_blank" rel="noreferrer" style={{
            display: 'inline-block', fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 500,
            background: '#06C755', color: 'white', textDecoration: 'none', padding: '13px 32px', borderRadius: '8px',
          }}>LINE で通知を受け取る</a>
          <button onClick={() => onNavigate('blueberry')} style={{
            fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 500,
            background: '#fff', color: '#1A3A6E', border: '1.5px solid #C9D5E5', cursor: 'pointer',
            padding: '13px 24px', borderRadius: '8px',
          }}>体験内容を見る</button>
        </div>
      </div>

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

Object.assign(window, { ConceptPage });