// Header.jsx
function Header({ route, onNav, onSearch, search }) {
  const links = [
  { id: 'home', label: 'Inicio' },
  { id: 'blog', label: 'Blog' },
  { id: 'works', label: 'Trabajos' },
  { id: 'about', label: 'Sobre mí' }];

  const [searchOpen, setSearchOpen] = React.useState(false);
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    if (searchOpen) inputRef.current?.focus();
  }, [searchOpen]);

  return (
    <header className="im-header" style={{ fontFamily: "Arial", fontWeight: "900" }}>
      <a
        href="#"
        onClick={(e) => {e.preventDefault();onNav('home');}}
        className="im-brand"
        aria-label="IsaMunoz inicio">
        
        <img src="assets/logo-im-mark.png" alt="" className="im-brand-mark" />
        <span className="im-brand-word" style={{ fontFamily: "Arial" }}>IsaMuñoz</span>
      </a>

      <nav className="im-nav">
        {links.map((l) => {
          const active = route === l.id || l.id === 'blog' && route === 'article';
          return (
            <a
              key={l.id}
              href="#"
              onClick={(e) => {e.preventDefault();onNav(l.id);}}
              className={`im-nav-link ${active ? 'is-active' : ''}`}>
              
              {l.label}
            </a>);

        })}
      </nav>

      <div className="im-header-actions">
        <div className={`im-search ${searchOpen ? 'is-open' : ''}`}>
          <button
            className="im-icon-btn"
            onClick={() => setSearchOpen((s) => !s)}
            aria-label="Buscar">
            
            <SearchIcon />
          </button>
          {searchOpen &&
          <input
            ref={inputRef}
            type="text"
            placeholder="Buscar artículos…"
            className="im-search-input"
            value={search}
            onChange={(e) => onSearch(e.target.value)}
            onBlur={() => {if (!search) setSearchOpen(false);}} />

          }
        </div>
        <button
          className="im-btn im-btn-primary"
          onClick={() => onNav('contact-anchor')}>

          Contacto
        </button>
      </div>
    </header>);

}

function SearchIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="11" cy="11" r="7" />
      <path d="m20 20-3.5-3.5" />
    </svg>);

}

window.Header = Header;
window.SearchIcon = SearchIcon;