function Header() {
  const [open, setOpen] = React.useState(false);
  const links = [
    { label: 'How It Works', target: '.how' },
    { label: 'Claim Yours', target: '.get' },
    { label: 'Reviews', target: '.tst' },
    { label: 'FAQ', target: '.faq' },
  ];
  const scrollTo = (sel) => {
    const el = document.querySelector(sel);
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY - 80;
    window.scrollTo({ top, behavior: 'smooth' });
  };
  const handle = (e, target) => { e.preventDefault(); setOpen(false); scrollTo(target); };
  return (
    <header className="hdr">
      <style>{`
        .hdr { background: var(--color-bg); border-bottom: 1px solid var(--color-line-faint); position: sticky; top: 0; z-index: 30; }
        .hdr-row1 { display: flex; align-items: center; justify-content: center; padding: 14px var(--gutter); max-width: 1180px; margin: 0 auto; position: relative; }
        .hdr-logo { display: flex; align-items: center; justify-content: center; }
        .hdr-logo img { height: 56px; width: auto; }
        @media (min-width: 768px) { .hdr-logo img { height: 72px; } }
        .hdr-menu { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: var(--color-text); padding: 6px; cursor: pointer; display: inline-flex; }
        @media (min-width: 768px) { .hdr-menu { display: none; } }
        .nav-row { border-top: 1px solid var(--color-line-faint); display: none; }
        @media (min-width: 768px) { .nav-row { display: block; } }
        .nav-list { display: flex; justify-content: center; gap: 36px; padding: 14px 0; max-width: 1180px; margin: 0 auto; flex-wrap: wrap; }
        .nav-list a { color: var(--color-text); text-decoration: none; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; cursor: pointer; }
        .nav-list a:hover { color: var(--color-primary-dark); }
        .drawer { padding: 8px var(--gutter) 24px; background: var(--color-bg); border-top: 1px solid var(--color-line-faint); }
        .drawer a { display: block; padding: 14px 0; border-bottom: 1px solid var(--color-line-faint); color: var(--color-text); text-decoration: none; font-size: 15px; font-weight: 500; cursor: pointer; }
      `}</style>
      <div className="hdr-row1">
        <a href="#" className="hdr-logo" onClick={(e)=>{e.preventDefault();window.scrollTo({top:0,behavior:'smooth'});}}>
          <img src={(window.__resources && window.__resources.logo) || "/assets/logo-country-script.png"} alt="Mother's Country Store" />
        </a>
        <button className="hdr-menu" onClick={()=>setOpen(o=>!o)} aria-label="Menu"><Icon name={open?'close':'menu'} size={22} /></button>
      </div>
      <nav className="nav-row" aria-label="Primary">
        <div className="nav-list">
          {links.map(l => <a key={l.label} href="#" onClick={(e)=>handle(e, l.target)}>{l.label}</a>)}
        </div>
      </nav>
      {open && <div className="drawer">{links.map(l => <a key={l.label} href="#" onClick={(e)=>handle(e, l.target)}>{l.label}</a>)}</div>}
    </header>
  );
}
window.Header = Header;