// EventsSection.jsx — 季節のイベント・農業体験
const EventsSection = ({ onNavigate }) => {
  const [ref, setRef] = React.useState(null);
  const [isVisible, setIsVisible] = React.useState(false);

  React.useEffect(() => {
    if (!ref) return;
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) setIsVisible(true);
      },
      { threshold: 0.2 }
    );
    observer.observe(ref);
    return () => observer.disconnect();
  }, [ref]);

  const events = [
    {
      season: '春',
      seasonEn: 'Spring',
      color: '#F5C518',
      items: [
        { icon: '🌸', title: '春の花摘み体験', desc: '菜の花・チューリップなど春の花を摘んでお持ち帰り' },
        { icon: '🌿', title: 'ハーブ摘み取り', desc: 'バジル・ミントなど新鮮ハーブを摘んで香りを楽しむ' },
        { icon: '🎨', title: 'お花のリース作り', desc: '摘んだ花で作るオリジナルリースワークショップ' },
      ]
    },
    {
      season: '夏',
      seasonEn: 'Summer',
      color: '#3E5C8A',
      items: [
        { icon: '🫐', title: 'ブルーベリー摘み取り', desc: '完熟ブルーベリーの食べ放題・お持ち帰り' },
        { icon: '🌻', title: 'ひまわり畑開放', desc: 'フォトスポットとしても人気のひまわり畑' },
        { icon: '🍧', title: 'かき氷フェス', desc: '自家製ベリーシロップの特製かき氷' },
      ]
    },
    {
      season: '秋',
      seasonEn: 'Autumn',
      color: '#C9920A',
      items: [
        { icon: '🌾', title: '稲刈り体験', desc: '鎌を使った本格的な稲刈り・脱穀体験' },
        { icon: '🍯', title: 'ジャム作り教室', desc: 'ブルーベリージャムを一から手作り' },
        { icon: '🎃', title: 'ハロウィンイベント', desc: 'かぼちゃランタン作り・収穫祭' },
      ]
    },
    {
      season: '冬',
      seasonEn: 'Winter',
      color: '#5E9252',
      items: [
        { icon: '🌿', title: '冬野菜収穫体験', desc: '大根・白菜など旬の野菜を収穫' },
        { icon: '🔥', title: '焚き火カフェ', desc: '焚き火を囲んで温かいドリンクとスイーツ' },
        { icon: '🎍', title: 'しめ縄作り', desc: '新年を迎えるしめ縄飾りのワークショップ' },
      ]
    },
  ];

  return (
    <section 
      ref={setRef}
      style={{ 
        background: 'linear-gradient(to bottom, #FAF6F0 0%, #F0E8D8 100%)', 
        padding: '96px 24px',
        opacity: isVisible ? 1 : 0,
        transform: isVisible ? 'translateY(0)' : 'translateY(40px)',
        transition: 'all 0.8s ease-out',
      }}
    >
      <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' }}>
            Seasonal Events
          </div>
          <h2 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: 'clamp(28px,4vw,42px)', fontWeight: 500, color: '#0F2240', lineHeight: 1.3, letterSpacing: '-0.01em', marginBottom: '16px' }}>
            一年中、自然と触れあう。
          </h2>
          <p style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '15px', fontWeight: 300, color: '#6B5D52', lineHeight: 1.9, maxWidth: '600px', margin: '0 auto' }}>
            ブルーベリーだけでなく、四季折々の花・ハーブ・野菜の収穫体験、<br />
            農業体験イベントを通じて、家族みんなで楽しめる農園です。
          </p>
        </div>

        {/* Seasons grid */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '24px' }}>
          {events.map((season, idx) => (
            <div 
              key={season.season}
              style={{
                background: 'white',
                borderRadius: '16px',
                padding: '28px 24px',
                boxShadow: '0 2px 12px rgba(18,42,82,0.08)',
                opacity: isVisible ? 1 : 0,
                transform: isVisible ? 'translateY(0)' : 'translateY(30px)',
                transition: `all 0.6s ease-out ${idx * 0.15}s`,
              }}
            >
              {/* Season header */}
              <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '20px', paddingBottom: '16px', borderBottom: `2px solid ${season.color}` }}>
                <div style={{ 
                  fontFamily: "'Shippori Mincho B1', serif", 
                  fontSize: '24px', 
                  fontWeight: 500, 
                  color: '#0F2240',
                  flex: 1,
                }}>
                  {season.season}
                </div>
                <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '11px', letterSpacing: '3px', textTransform: 'uppercase', color: season.color }}>
                  {season.seasonEn}
                </div>
              </div>

              {/* Items */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
                {season.items.map(item => (
                  <div key={item.title} style={{ display: 'flex', gap: '12px', alignItems: 'flex-start' }}>
                    <div style={{ fontSize: '20px', flexShrink: 0, lineHeight: 1 }}>{item.icon}</div>
                    <div>
                      <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 500, color: '#0F2240', marginBottom: '4px' }}>
                        {item.title}
                      </div>
                      <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '12px', fontWeight: 300, color: '#6B5D52', lineHeight: 1.7 }}>
                        {item.desc}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* CTA */}
        <div style={{ textAlign: 'center', marginTop: '48px' }}>
          <div style={{ 
            display: 'inline-block',
            padding: '16px 28px', 
            background: '#E5ECF5', 
            borderRadius: '12px',
            fontFamily: "'Noto Sans JP', sans-serif", 
            fontSize: '13px', 
            fontWeight: 300, 
            color: '#122A52', 
            lineHeight: 1.8,
          }}>
            ※ イベントは季節・天候により変更になる場合があります。最新情報はLINE・SNSでお知らせします。
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { EventsSection });