// HerbGardenSection.jsx — ハーブ園・花畑セクション
const HerbGardenSection = ({ 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 gardens = [
    {
      title: 'ハーブ園',
      titleEn: 'Herb Garden',
      desc: '摘みたてハーブの香りを楽しみながら、料理やティー作りに使えるハーブを収穫できます。',
      herbs: ['バジル', 'ローズマリー', 'ミント', 'ラベンダー', 'タイム', 'オレガノ'],
      bgColor: '#E4F0E2',
      textColor: '#2C4A28',
      accentColor: '#5E9252',
    },
    {
      title: '花畑',
      titleEn: 'Flower Garden',
      desc: '季節の花々が咲き誇る花畑。摘み取った花はブーケにしてお持ち帰りいただけます。',
      herbs: ['ひまわり', 'コスモス', '菜の花', 'チューリップ', 'ラベンダー', 'マリーゴールド'],
      bgColor: '#FFF3C4',
      textColor: '#6B4804',
      accentColor: '#F5C518',
    },
  ];

  return (
    <section 
      ref={setRef}
      style={{ 
        background: 'white',
        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' }}>
            Herb &amp; Flower
          </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>

        {/* Garden cards */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '32px', marginBottom: '48px' }}>
          {gardens.map((garden, idx) => (
            <div 
              key={garden.title}
              style={{
                background: garden.bgColor,
                borderRadius: '20px',
                padding: '40px 32px',
                opacity: isVisible ? 1 : 0,
                transform: isVisible ? 'translateY(0)' : 'translateY(30px)',
                transition: `all 0.7s ease-out ${idx * 0.2}s`,
              }}
            >
              <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '12px', letterSpacing: '3px', textTransform: 'uppercase', color: garden.accentColor, marginBottom: '12px' }}>
                {garden.titleEn}
              </div>
              <h3 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '28px', fontWeight: 500, color: garden.textColor, marginBottom: '16px', lineHeight: 1.3 }}>
                {garden.title}
              </h3>
              <p style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 300, color: garden.textColor, lineHeight: 1.9, marginBottom: '24px' }}>
                {garden.desc}
              </p>

              {/* Herb/flower tags */}
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
                {garden.herbs.map(herb => (
                  <span 
                    key={herb}
                    style={{
                      display: 'inline-block',
                      padding: '6px 14px',
                      background: 'rgba(255,255,255,0.7)',
                      borderRadius: '6px',
                      fontFamily: "'Noto Sans JP', sans-serif",
                      fontSize: '12px',
                      fontWeight: 400,
                      color: garden.textColor,
                    }}
                  >
                    {herb}
                  </span>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* Activity cards */}
        <div style={{ 
          background: 'linear-gradient(135deg, #F0E8D8 0%, #E5D8C4 100%)',
          borderRadius: '20px',
          padding: '40px 32px',
          opacity: isVisible ? 1 : 0,
          transform: isVisible ? 'translateY(0)' : 'translateY(30px)',
          transition: 'all 0.8s ease-out 0.4s',
        }}>
          <h3 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '22px', fontWeight: 500, color: '#0F2240', marginBottom: '24px', textAlign: 'center' }}>
            こんな体験ができます
          </h3>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '24px' }}>
            {[
              { icon: '✂️', title: 'ハーブ摘み取り', desc: '好きなハーブを摘んでお持ち帰り' },
              { icon: '💐', title: '花束作り', desc: '摘んだ花でオリジナルブーケ' },
              { icon: '🫖', title: 'ハーブティー体験', desc: 'フレッシュハーブティーの試飲' },
              { icon: '🧴', title: 'アロマワークショップ', desc: 'ハーブを使った手作りアロマ' },
            ].map(activity => (
              <div key={activity.title} style={{ textAlign: 'center' }}>
                <div style={{ fontSize: '32px', marginBottom: '12px' }}>{activity.icon}</div>
                <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 500, color: '#0F2240', marginBottom: '6px' }}>
                  {activity.title}
                </div>
                <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '12px', fontWeight: 300, color: '#6B5D52', lineHeight: 1.6 }}>
                  {activity.desc}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Family-friendly note */}
        <div style={{ 
          marginTop: '32px',
          textAlign: 'center',
          padding: '20px',
          background: '#E5ECF5',
          borderRadius: '12px',
        }}>
          <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '13px', fontWeight: 400, color: '#122A52', lineHeight: 1.8 }}>
            👨‍👩‍👧‍👦 <strong>お子様も安心</strong> — 低農薬・有機栽培のハーブと花。小さなお子様でも安全に摘み取り体験を楽しめます。
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { HerbGardenSection });