// Hero.jsx — Full-bleed hero section
const Hero = ({ onNavigate }) => {
  const [scrollY, setScrollY] = React.useState(0);
  const [isMobile, setIsMobile] = React.useState(window.innerWidth < 768);
  
  React.useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY);
    const handleResize = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('scroll', handleScroll);
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('scroll', handleScroll);
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <section style={{
      position: 'relative',
      minHeight: isMobile ? 'calc(100svh - 160px)' : 'calc(100svh - 116px)',
      maxHeight: isMobile ? '680px' : '920px',
      display: 'flex',
      alignItems: 'center',
      overflow: 'hidden',
    }}>
      {/* Background photo with parallax */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'url(./assets/photos/berry-branch-leaves.jpg)',
        backgroundSize: 'cover', backgroundPosition: 'center',
        transform: `translateY(${scrollY * 0.4}px)`,
        transition: 'transform 0.1s ease-out',
      }} />
      {/* Dark overlay for text legibility */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(160deg, rgba(18,42,82,0.80) 0%, rgba(26,58,110,0.72) 45%, rgba(26,58,110,0.55) 100%)',
      }} />

      {/* Right photo panel */}
      <div style={{
        position: 'absolute', right: 0, top: 0, bottom: 0, width: '42%',
        overflow: 'hidden', display: 'none',
      }}></div>

      {/* Content with fade-in */}
      <div style={{ 
        position: 'relative', zIndex: 2, maxWidth: '1200px', margin: '0 auto', padding: isMobile ? '20px 20px 20px' : '32px 24px 36px', paddingTop: isMobile ? '24px' : '48px',
        opacity: Math.max(0, 1 - scrollY / 400),
        transform: `translateY(${scrollY * 0.2}px)`,
      }}>
        <div style={{ maxWidth: '580px' }}>
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: isMobile ? '10px' : '12px', letterSpacing: '4px', textTransform: 'uppercase', color: '#8DA9C9', marginBottom: isMobile ? '12px' : '24px' }}>
            Coming Soon · Nara Berry Garden
          </div>
          <h1 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: isMobile ? 'clamp(24px, 7.4vw, 34px)' : 'clamp(28px,5vw,56px)', fontWeight: 500, color: '#FAF6F0', lineHeight: 1.18, letterSpacing: '-0.02em', marginBottom: isMobile ? '12px' : '24px' }}>
            奈良の田園で、<br />完熟ブルーベリーを味わう。
          </h1>
          <p style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: isMobile ? '12px' : '15px', fontWeight: 300, color: '#C9D5E5', lineHeight: isMobile ? 1.7 : 1.95, marginBottom: isMobile ? '18px' : '40px', maxWidth: '480px' }}>
            奈良県大和郡山市で準備中のブルーベリー観光農園。家族や大切な人と、ゆっくり過ごせる場所をつくっています。
          </p>
          <div style={{ display: 'flex', gap: isMobile ? '10px' : '14px', flexWrap: 'wrap' }}>
            <button onClick={() => onNavigate('reserve')} style={{
              fontFamily: "'Noto Sans JP', sans-serif", fontSize: isMobile ? '13px' : '15px', fontWeight: 500,
              background: '#FAF6F0', color: '#122A52', border: 'none', cursor: 'pointer',
              padding: isMobile ? '11px 18px' : '14px 32px', borderRadius: '8px', transition: 'all 0.2s ease',
            }}
              onMouseEnter={e => { e.target.style.background = 'white'; e.target.style.transform = 'translateY(-1px)'; }}
              onMouseLeave={e => { e.target.style.background = '#FAF6F0'; e.target.style.transform = 'none'; }}
            >開園通知を受け取る</button>
            <button onClick={() => onNavigate('about')} style={{
              fontFamily: "'Noto Sans JP', sans-serif", fontSize: isMobile ? '13px' : '15px', fontWeight: 400,
              background: 'transparent', color: '#E5ECF5', border: '1.5px solid rgba(229,236,245,0.4)', cursor: 'pointer',
              padding: isMobile ? '11px 18px' : '14px 32px', borderRadius: '8px', transition: 'all 0.2s ease',
            }}
              onMouseEnter={e => { e.target.style.borderColor = 'rgba(229,236,245,0.8)'; }}
              onMouseLeave={e => { e.target.style.borderColor = 'rgba(229,236,245,0.4)'; }}
            >農園について</button>
          </div>

          {/* Opening schedule teaser */}
          <div style={{
            display: 'flex',
            gap: isMobile ? '10px' : '32px',
            marginTop: isMobile ? '18px' : '64px',
            flexWrap: 'wrap',
            padding: isMobile ? '12px 14px' : '0',
            borderRadius: isMobile ? '12px' : '0',
            background: isMobile ? 'rgba(10, 24, 48, 0.28)' : 'transparent',
            backdropFilter: isMobile ? 'blur(6px)' : 'none',
          }}>
            {[['2027年初夏', 'プレオープン'], ['2028年夏', '本オープン予定'], ['80品種以上', 'ブルーベリー']].map(([val, desc]) => (
              <div key={val} style={{ minWidth: isMobile ? 'calc(50% - 6px)' : 'auto' }}>
                <div style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: isMobile ? '14px' : '17px', fontWeight: 500, color: '#E5ECF5' }}>{val}</div>
                <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: isMobile ? '10px' : '11px', fontWeight: 300, color: '#8DA9C9', marginTop: '2px', letterSpacing: '0.4px' }}>{desc}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Scroll indicator */}
      <div style={{ position: 'absolute', bottom: '24px', right: '24px', display: isMobile ? 'none' : 'flex', flexDirection: 'column', alignItems: 'center', gap: '6px' }}>
        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '9px', letterSpacing: '3px', textTransform: 'uppercase', color: 'rgba(141,169,201,0.5)', writingMode: 'vertical-rl' }}>Scroll</div>
        <div style={{ width: '1px', height: '40px', background: 'linear-gradient(to bottom, rgba(141,169,201,0.5), transparent)' }} />
      </div>
    </section>
  );
};

Object.assign(window, { Hero });