// AboutPage.jsx — 農園について（フルページ）
const AboutPage = ({ onNavigate }) => {
  const sectionTitle = (en, jp) => (
    <div style={{ marginBottom: '24px' }}>
      <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '11px', letterSpacing: '4px', textTransform: 'uppercase', color: '#C9920A', marginBottom: '8px' }}>{en}</div>
      <h2 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: 'clamp(22px,3vw,30px)', fontWeight: 500, color: '#0F2240', lineHeight: 1.4 }}>{jp}</h2>
    </div>
  );

  const para = (text) => (
    <p style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 300, color: '#3D3028', lineHeight: 2.05, marginBottom: '16px' }}>{text}</p>
  );

  return (
    <div style={{ minHeight: '100vh', background: '#FAF6F0', paddingTop: '68px' }}>
      {/* Hero */}
      <div style={{ background: 'linear-gradient(135deg, #0F2240, #1A3A6E)', padding: '72px 24px', textAlign: 'center' }}>
        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '11px', letterSpacing: '4px', textTransform: 'uppercase', color: '#8DA9C9', marginBottom: '14px' }}>About Us</div>
        <h1 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: 'clamp(28px,4vw,42px)', fontWeight: 500, color: '#FAF6F0' }}>農園について</h1>
      </div>

      <div style={{ maxWidth: '760px', margin: '0 auto', padding: '72px 24px' }}>
        {/* この農園が目指していること */}
        {sectionTitle('Our Vision', 'この農園が目指していること')}
        {para('奈良ベリーガーデンは、「ゆっくり過ごせる小さな農園の時間」を届けることを目指しています。')}
        <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '10px', marginBottom: '24px', paddingLeft: '4px' }}>
          {['家族で季節を感じながら楽しめる場所', 'カップルや友人同士でのんびりできる場所', '地域の人がふらっと立ち寄れる場所'].map(t => (
            <li key={t} style={{ display: 'flex', gap: '12px', fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 300, color: '#3D3028', lineHeight: 1.8 }}>
              <span style={{ flexShrink: 0, color: '#1A3A6E' }}>—</span> {t}
            </li>
          ))}
        </ul>
        {para('観光地というより、少しだけ特別な「いつもの場所」のような存在になれたらうれしいです。')}

        <div style={{ height: '1px', background: '#E5D8C4', margin: '64px 0' }} />

        {/* ブルーベリーへのこだわり */}
        {sectionTitle('Our Cultivation', 'ブルーベリーへのこだわり')}
        {para('奈良ベリーガーデンは他の農園では珍しい2通りの栽培方法を実践しています。')}

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px', marginBottom: '32px' }}>
          <div style={{ background: 'white', borderRadius: '12px', padding: '24px', boxShadow: '0 2px 8px rgba(18,42,82,0.06)' }}>
            <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '10px', letterSpacing: '2px', textTransform: 'uppercase', color: '#5E9252', marginBottom: '8px' }}>Method 01</div>
            <h3 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '16px', fontWeight: 500, color: '#0F2240', marginBottom: '8px' }}>草生栽培</h3>
            <p style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '12px', fontWeight: 300, color: '#6B5D52', lineHeight: 1.85 }}>
              ブルーベリーをより自然の状態で栽培する方法。
            </p>
          </div>
          <div style={{ background: 'white', borderRadius: '12px', padding: '24px', boxShadow: '0 2px 8px rgba(18,42,82,0.06)' }}>
            <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '10px', letterSpacing: '2px', textTransform: 'uppercase', color: '#1A3A6E', marginBottom: '8px' }}>Method 02</div>
            <h3 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '16px', fontWeight: 500, color: '#0F2240', marginBottom: '8px' }}>養液ポット栽培</h3>
            <p style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '12px', fontWeight: 300, color: '#6B5D52', lineHeight: 1.85 }}>
              適切に水や肥料を管理して栽培する方法。
            </p>
          </div>
        </div>

        {para('それぞれにメリット、デメリットがあります。栽培方法が違うブルーベリーを食べ比べてみてください。')}
        {para('ブルーベリーは、土づくりと水管理で味が大きく変わる作物です。')}
        {para('草生栽培では、ブルーベリーの木本来のたくましさを最大限に活かして肥料や農薬を一切使用しない自然本来の育て方を行っています。自然環境下では様々なストレスがかかるため、抗酸化物質がより多く生成されるという研究結果も出ています。')}
        {para('養液ポット栽培では、品種ごとの個性を活かしながら、水はけと通気性の良い培地を使ったポット栽培、根に負担をかけない自動潅水システム、農薬に頼らない栽培など、ひとつひとつの木を大切に育てていきます。')}

        {/* こだわり3点 */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '12px', marginTop: '32px', marginBottom: '24px' }}>
          {[
            ['灌水システム', '最適な水管理が可能'],
            ['果実品質の向上', '一粒一粒を丁寧に'],
            ['高糖度・大粒', '安定した実りを実現'],
          ].map(([t, d]) => (
            <div key={t} style={{ background: '#F0E8D8', borderRadius: '10px', padding: '16px' }}>
              <div style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '14px', fontWeight: 500, color: '#0F2240', marginBottom: '4px' }}>{t}</div>
              <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '11px', fontWeight: 300, color: '#6B5D52', lineHeight: 1.7 }}>{d}</div>
            </div>
          ))}
        </div>

        <div style={{ height: '1px', background: '#E5D8C4', margin: '64px 0' }} />

        {/* 生まれた理由 */}
        {sectionTitle('Our Story', '奈良ベリーガーデンが生まれた理由')}
        {para('幼い頃、祖父が育てたイチゴを食べたときの香りと味が、今も忘れられません。「心を込めてつくった果物には、人の心を動かす力がある」——その原体験が、この農園をつくるきっかけになりました。')}
        {para('農園がある奈良県大和郡山市は、祖父がかつて農業を営んでいた土地です。祖父が丁寧に耕したこの場所で、今度は私が果物を育てる。それが自然な選択でした。')}
        {para('父と二人で、少しずつ準備を進めています。完熟したブルーベリーを、木の下でそのまま食べてもらえる——そんな体験の場をつくることが、私たちの目指すところです。')}
        <p style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '17px', fontWeight: 500, color: '#1A3A6E', lineHeight: 1.7, marginTop: '24px', marginBottom: '16px', borderLeft: '3px solid #C9920A', paddingLeft: '16px' }}>
          小さくていい。でも、「来てよかった」と思ってもらえる農園を。
        </p>

        <div style={{ height: '1px', background: '#E5D8C4', margin: '64px 0' }} />

        {/* 運営者 */}
        {sectionTitle('Operator', '運営者の紹介')}
        {para('奈良で生まれ育ち、家族で農地や土地の管理を続けてきました。')}
        {para('相続や事業承継をきっかけに、「せっかくの土地をもっと楽しく活かしたい」「次の世代にも残せる形にしたい」「引き継いだ土地で何か出来ることはないか」という思いから、ブルーベリー観光農園の準備を始めました。')}
        {para('農業としての収穫だけでなく、ここで過ごした時間が思い出として残るような場所にしていきたいと思っています。')}
        <div style={{ marginTop: '56px', background: '#FFFFFF', borderRadius: '18px', padding: '28px', boxShadow: '0 2px 12px rgba(18,42,82,0.07)' }}>
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '10px', letterSpacing: '3px', textTransform: 'uppercase', color: '#C9920A', marginBottom: '10px' }}>Next Step</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.9, marginBottom: '18px' }}>
            農園の背景をご覧いただいたあとは、栽培へのこだわりや実際の体験内容もぜひご確認ください。
          </p>
          <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
            <button onClick={() => onNavigate('concept')} 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('blueberry')} 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>

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

Object.assign(window, { AboutPage });