// Header.jsx — 奈良ベリーガーデン Navigation Header
const Header = ({ currentPage, onNavigate }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);

  const navItems = [
    { label: '農園について', page: 'about' },
    { label: 'こだわり', page: 'concept' },
    { label: 'ブルーベリー狩り', page: 'blueberry' },
    { label: 'カフェ', page: 'cafe' },
    { label: 'アクセス', page: 'access' },
    { label: 'FAQ', page: 'faq' },
  ];

  const headerStyles = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
    background: 'rgba(250,246,240,0.96)',
    backdropFilter: 'blur(12px)',
    borderBottom: '1px solid rgba(229,216,196,0.6)',
    height: '76px',
    display: 'flex', alignItems: 'center',
  };

  const innerStyles = {
    maxWidth: '1200px', margin: '0 auto', padding: '0 24px',
    width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
  };

  const logoStyles = {
    display: 'flex', flexDirection: 'column', gap: '1px', cursor: 'pointer',
    textDecoration: 'none',
  };

  return (
    <header style={headerStyles}>
      <div style={innerStyles}>
        <div style={logoStyles} onClick={() => onNavigate('home')}>
          <img src="./assets/logo/symbol-mark.png" alt="奈良ベリーガーデン" style={{ height: '52px', width: 'auto', objectFit: 'contain' }} />
        </div>

        <nav style={{ display: 'flex', alignItems: 'center', gap: '2px' }}>
          {navItems.map(item => (
            <button key={item.page}
              onClick={() => onNavigate(item.page)}
              style={{
                background: 'none', border: 'none', cursor: 'pointer',
                fontFamily: "'Noto Sans JP', sans-serif", fontSize: '13px', fontWeight: 400,
                color: currentPage === item.page ? '#1A3A6E' : '#3D3028',
                padding: '8px 14px', borderRadius: '6px',
                transition: 'all 0.15s ease',
                borderBottom: currentPage === item.page ? '2px solid #1A3A6E' : '2px solid transparent',
              }}
            >{item.label}</button>
          ))}
          <button onClick={() => onNavigate('contact')} style={{
            background: '#1A3A6E', color: 'white', border: 'none', cursor: 'pointer',
            fontFamily: "'Noto Sans JP', sans-serif", fontSize: '13px', fontWeight: 500,
            padding: '9px 20px', borderRadius: '8px', marginLeft: '8px',
            transition: 'background 0.15s ease',
          }}
            onMouseEnter={e => e.target.style.background = '#122A52'}
            onMouseLeave={e => e.target.style.background = '#1A3A6E'}
          >お問い合わせ</button>
        </nav>
      </div>
    </header>
  );
};

Object.assign(window, { Header });