// Header.jsx — sticky top header + mobile sticky bottom CTA bar
const Header = ({ onQuote }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const root = document.scrollingElement || document.documentElement;
    const onScroll = () => setScrolled(root.scrollTop > 16);
    document.addEventListener('scroll', onScroll, { passive: true });
    return () => document.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header style={{
      position:'sticky', top:0, zIndex:50,
      background: T.white,
      borderBottom: scrolled ? `1px solid ${T.border}` : '1px solid transparent',
      transition:'border-color .15s ease-out',
      height:76,
    }}>
      <div style={{
        maxWidth: 1200, margin:'0 auto', padding:'0 24px',
        height:'100%', display:'flex', alignItems:'center', gap:24,
      }}>
        <a href="#top" style={{ display:'flex', alignItems:'center', gap:8, border:'none', padding:'4px 0' }}>
          <img src={(window.__resources && window.__resources.logo) || "assets/logo.png"} alt="Food Trucks On The Move — home" style={{ height:52, display:'block' }} />
        </a>
        <nav style={{ display:'flex', gap:22, flex:1, justifyContent:'center', fontSize:14, color: T.ink }}>
          {[
            { l:'Corporate',    href:'corporate.html' },
            { l:'Weddings',     href:'weddings.html' },
            { l:'Campus',       href:'campus.html' },
            { l:'Large Events', href:'large-events.html' },
            { l:'Trucks',       href:'index.html#trucks' },
            { l:'Calculator',   href:'calculator.html' },
            { l:'About',        href:'index.html#about' },
          ].map(({ l, href }) => (
            <a key={l} href={href} style={{ border:'none', opacity:.85 }}>{l}</a>
          ))}
        </nav>
        <a href="tel:+12012082682" style={{ display:'flex', alignItems:'center', gap:6, fontSize:14, color: T.ink, border:'none' }}>
          <IconPhone size={16} /> (201) 208-2682
        </a>
        <button onClick={onQuote} className="btn btn-primary" style={{ padding:'10px 16px', fontSize:14 }}>
          Get a Quote
        </button>
      </div>
    </header>
  );
};

const MobileStickyBar = ({ onQuote }) => (
  <div className="mobile-only" style={{
    position:'fixed', left:12, right:12, bottom:12, zIndex:60,
    background:T.white, border:`1px solid ${T.border}`, borderRadius:12,
    boxShadow:'0 8px 24px rgba(17,24,39,.12)',
    padding:8, gap:8,
  }}>
    <a href="tel:+12012082682" className="btn btn-secondary" style={{ flex:'0 0 48px', justifyContent:'center', padding:0, height:44 }}>
      <IconPhone size={18} />
    </a>
    <button onClick={onQuote} className="btn btn-primary" style={{ flex:1, justifyContent:'center' }}>
      Get a Quote
    </button>
  </div>
);

Object.assign(window, { Header, MobileStickyBar });