// About.jsx — 農園について（ホームページ用ティーザー）
const About = ({ onNavigate }) => (
  <section style={{ background: '#0F2240', padding: '96px 24px', position: 'relative', overflow: 'hidden' }}>
    <div style={{ position: 'absolute', width: '500px', height: '500px', borderRadius: '50%', background: '#1A3A6E', right: '-150px', top: '-100px', filter: 'blur(80px)', opacity: 0.4 }} />
    <div style={{ maxWidth: '1100px', margin: '0 auto', position: 'relative', zIndex: 1 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '64px', alignItems: 'center' }}>
        <div style={{ position: 'relative' }}>
          <div style={{ borderRadius: '16px', overflow: 'hidden', height: '420px', backgroundImage: 'url(./assets/photos/hand-holding-berries.jpg)', backgroundSize: 'cover', backgroundPosition: 'center' }} />
          <div style={{ position: 'absolute', bottom: '32px', left: '28px', right: '28px' }}>
            <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '56px', color: 'rgba(255,255,255,0.2)', lineHeight: 1, marginBottom: '-8px' }}>"</div>
            <blockquote style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: 'clamp(18px,2vw,22px)', fontWeight: 400, color: '#FAF6F0', lineHeight: 1.6 }}>
              小さくていい。でも、<br />「来てよかった」と思える農園を。
            </blockquote>
          </div>
        </div>
        <div>
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '11px', letterSpacing: '4px', textTransform: 'uppercase', color: '#C9920A', marginBottom: '16px' }}>About</div>
          <h2 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: 'clamp(24px,3vw,34px)', fontWeight: 500, color: '#E5ECF5', lineHeight: 1.4, marginBottom: '20px' }}>
            ゆっくり過ごせる、<br />小さな農園の時間を。
          </h2>
          <p style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 400, color: '#D4DEEC', lineHeight: 2, marginBottom: '16px' }}>
            奈良ベリーガーデンは、家族で季節を感じられる場所、カップルや友人同士でのんびり過ごせる場所、地域の方がふらっと立ち寄れる場所を目指しています。
          </p>
          <p style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 400, color: '#B5C4DB', lineHeight: 2, marginBottom: '32px' }}>
            観光地というより、少しだけ特別な「いつもの場所」のような存在になれたら、と願っています。
          </p>
          {onNavigate && (
            <button onClick={() => onNavigate('about')} style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '13px', fontWeight: 400, background: 'transparent', color: '#E5ECF5', border: '1.5px solid rgba(229,236,245,0.4)', cursor: 'pointer', padding: '12px 28px', borderRadius: '8px' }}>
              農園について詳しく
            </button>
          )}
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { About });