// Header.jsx — agency header. SAGUO wordmark left, nav center.
const headerStyles = {
  wrap: {
    position: 'sticky', top: 0, zIndex: 50,
    background: 'rgba(242,242,242,0.96)',
    backdropFilter: 'blur(8px)',
    borderBottom: '1px solid #000',
    height: 80,
    display: 'grid', gridTemplateColumns: '1fr auto 1fr',
    alignItems: 'center',
    padding: '0 36px',
  },
  logo: {
    display: 'flex', alignItems: 'center',
    cursor: 'pointer',
  },
  logoImg: { height: 22, width: 'auto', display: 'block' },
  nav: { display: 'flex', alignItems: 'center', gap: 36 },
  navLink: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 12,
    letterSpacing: '-0.03em', textTransform: 'uppercase',
    color: '#000', textDecoration: 'none',
    transition: 'opacity .2s',
    cursor: 'pointer',
  },
};

const iconStyle = {
  display: 'flex', alignItems: 'center',
  color: '#000', transition: 'opacity .2s',
  opacity: 0.75,
};

function Header({ active = 'models', onNav }) {
  const items = [
    { id: 'home',    en: 'Home' },
    { id: 'models',  en: 'Models' },
    { id: 'contact', en: 'Contact' },
  ];
  const [hover, setHover] = React.useState(null);
  return (
    <header style={headerStyles.wrap}>
      <div style={headerStyles.logo} onClick={() => onNav && onNav('home')}>
        <img src="assets/saguo-logo-black.png" alt="SAGUO" style={headerStyles.logoImg} />
      </div>
      <nav style={headerStyles.nav}>
        {items.map(i => {
          const isActive = i.id === active;
          const isHover = hover === i.id;
          return (
            <a key={i.id} href="#"
               onClick={(e) => { e.preventDefault(); onNav && onNav(i.id); }}
               onMouseEnter={() => setHover(i.id)}
               onMouseLeave={() => setHover(null)}
               style={{ ...headerStyles.navLink,
                        opacity: isActive ? 1 : (isHover ? 0.95 : 0.55) }}>
              <span>{i.en}</span>
            </a>
          );
        })}
      </nav>
      {/* Right — social icons */}
      <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 18 }}>
        <a href="https://instagram.com/saguo.management" target="_blank" rel="noopener noreferrer"
           style={iconStyle}
           onMouseEnter={e => e.currentTarget.style.opacity = 1}
           onMouseLeave={e => e.currentTarget.style.opacity = 0.75}>
          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
            <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
            <circle cx="12" cy="12" r="4.5"/>
            <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/>
          </svg>
        </a>
        <a href="mailto:contact@saguo.co.kr"
           style={iconStyle}
           onMouseEnter={e => e.currentTarget.style.opacity = 1}
           onMouseLeave={e => e.currentTarget.style.opacity = 0.75}>
          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
            <line x1="22" y1="2" x2="11" y2="13"/>
            <polygon points="22,2 15,22 11,13 2,9"/>
          </svg>
        </a>
        <a href="https://www.google.com/maps/search/서울특별시+서초구+사임당로8길+13" target="_blank" rel="noopener noreferrer"
           style={iconStyle}
           onMouseEnter={e => e.currentTarget.style.opacity = 1}
           onMouseLeave={e => e.currentTarget.style.opacity = 0.75}>
          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/>
            <circle cx="12" cy="9" r="2.5"/>
          </svg>
        </a>
      </div>
    </header>
  );
}

window.Header = Header;