/* Top navigation + day strip + footer */
const { useState: useStateNav } = React;

function LangToggle() {
  const cur = (window.NG_LANG === 'es') ? 'es' : 'en';
  const set = (l) => { if (l !== cur && window.NG_setLang) window.NG_setLang(l); };
  const item = (l, label) => (
    <button key={l} onClick={()=>set(l)} aria-pressed={cur===l} aria-label={l==='en'?'English':'Español'}
      style={{ border:0, cursor:'pointer', padding:'5px 9px', fontFamily:'var(--font-sans)',
        fontWeight:700, fontSize:12, lineHeight:1,
        background: cur===l ? 'var(--paper)' : 'transparent',
        color: cur===l ? 'var(--ink)' : 'rgba(247,242,233,.58)', borderRadius:6 }}>{label}</button>
  );
  return (
    <div style={{ display:'inline-flex', alignItems:'center', gap:2, padding:3,
      borderRadius:9, background:'rgba(247,242,233,.10)', flex:'none' }}>
      {item('en','EN')}{item('es','ES')}
    </div>
  );
}

function DayStrip() {
  return (
    <div style={{ background:'var(--ink)', color:'var(--paper)', fontFamily:'var(--font-sans)',
      display:'flex', alignItems:'center', justifyContent:'center', gap:14, padding:'8px 16px',
      fontSize:12.5 }}>
      <span style={{ display:'inline-flex', alignItems:'center', gap:7, background:'var(--marker-red)',
        color:'#fff', fontWeight:700, padding:'3px 11px', borderRadius:999 }}>
        <Ribbon size={12} color="#fff" /> DAY {window.NG_DAY}
      </span>
      <span style={{ opacity:.85 }}>Still waiting. Still drawing.</span>
      <a href="#" style={{ color:'var(--ribbon)', fontWeight:700, textDecoration:'none' }}>Bring them home →</a>
    </div>
  );
}

function TopBar({ route, go }) {
  const [open, setOpen] = useStateNav(false);
  const items = [['hostages','Hostages'],['about','About'],['speaking','Appearances'],['news','News'],['shop','Shop']];
  const nav = (k) => { setOpen(false); go(k); };
  const onLogo = () => {
    setOpen(false);
    if (route === 'home') { window.scrollTo({ top: 0, behavior: 'smooth' }); }
    else { go('home'); }
  };
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  return (
    <header style={{ position:'sticky', top:0, zIndex:50 }}>
      <div style={{ background:'rgba(20,20,20,.92)', backdropFilter:'blur(10px)',
        WebkitBackdropFilter:'blur(10px)', borderBottom:'1px solid rgba(247,242,233,.10)' }}>
        <div className="ng-topbar-inner">
          <button className="ng-logo-btn" onClick={onLogo} aria-label="Back to top">
            <Logo height={40} invert={true} />
          </button>
          <nav className="ng-nav-desktop">
            {items.map(([k,label]) => (
              <a key={k} onClick={()=>nav(k)} className={'ng-nav-link' + (route===k ? ' is-active' : '')}>
                {label}
              </a>
            ))}
            <LangToggle/>
          </nav>
          <div className="ng-topbar-mobile">
            <LangToggle/>
            <button className="ng-burger" aria-label={open ? 'Close menu' : 'Open menu'} aria-expanded={open}
              onClick={()=>setOpen(!open)}>
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor"
                strokeWidth="2" strokeLinecap="round" aria-hidden="true">
                {open
                  ? <path d="M4 4 L16 16 M16 4 L4 16"></path>
                  : <path d="M3 5 H17 M3 10 H17 M3 15 H17"></path>}
              </svg>
            </button>
          </div>
        </div>
      </div>
      {open && (
        <nav className="ng-drawer" aria-label="Mobile navigation">
          {items.map(([k,label]) => (
            <a key={k} className={'ng-drawer-link' + (route===k ? ' is-active' : '')} onClick={()=>nav(k)}>
              {label}
            </a>
          ))}
          <div style={{ marginTop:28, display:'flex', flexDirection:'column', gap:12 }}>
            <a href="https://www.instagram.com/naomiygal/" target="_blank" rel="noreferrer"
              style={{ textAlign:'center', color:'rgba(247,242,233,.65)', fontSize:14, fontWeight:700,
                textDecoration:'none', padding:'12px 0' }}>@naomiygal on Instagram</a>
          </div>
        </nav>
      )}
    </header>
  );
}

function Footer({ go }) {
  return (
    <footer style={{ background:'var(--ink)', color:'var(--paper)', fontFamily:'var(--font-sans)',
      padding:'clamp(40px,7vw,56px) var(--pad-x) clamp(28px,5vw,40px)' }}>
      <div style={{ maxWidth:1120, margin:'0 auto', display:'flex', justifyContent:'space-between',
        flexWrap:'wrap', gap:'clamp(28px,5vw,40px)' }}>
        <div style={{ maxWidth:340 }}>
          <Logo height={30} invert={true} />
          <p style={{ marginTop:18, fontSize:14.5, lineHeight:1.65, color:'rgba(247,242,233,.7)' }}>
            Portraits, books, leaders, and the October 7 hostages. Drawn so no one becomes a number.
          </p>
        </div>
        <div style={{ display:'flex', gap:'clamp(28px,5vw,56px)', flexWrap:'wrap' }}>
          <FootCol title="The work" links={[['hostages','Hostages'],['story','A story']]} go={go}/>
          <FootCol title="More" links={[['about','About me'],['speaking','Appearances'],['news','News'],['shop','Shop']]} go={go}/>
          <FootCol title="Find me" links={[['ext:https://www.instagram.com/naomiygal','Instagram @naomiygal'],['ext:https://x.com/naomiygal','X @naomiygal'],['ext:mailto:naomigal@gmail.com','naomigal@gmail.com']]} go={go}/>
        </div>
      </div>
      <div className="ng-foot-bottom" style={{ maxWidth:1120, margin:'40px auto 0', paddingTop:22,
        borderTop:'1px solid rgba(247,242,233,.14)', fontSize:12.5, color:'rgba(247,242,233,.5)' }}>
        <span>© {new Date().getFullYear()} Naomi Gal</span>
        <span style={{ fontStyle:'italic' }}>The whole world was created for them.</span>
      </div>
    </footer>
  );
}
function FootCol({ title, links, go }) {
  return (
    <div>
      <div style={{ fontSize:13, fontWeight:700, color:'var(--paper)', marginBottom:14 }}>{title}</div>
      <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
        {links.map(([k,label],i)=>{
          const ext = typeof k === 'string' && k.startsWith('ext:');
          if (ext) return (
            <a key={i} href={k.slice(4)} target="_blank" rel="noreferrer"
              style={{ cursor:'pointer', fontSize:14, color:'rgba(247,242,233,.8)', textDecoration:'none' }}>{label}</a>
          );
          return (
            <a key={i} onClick={()=>k&&go(k)} style={{ cursor:k?'pointer':'default', fontSize:14,
              color:'rgba(247,242,233,.8)' }}>{label}</a>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { TopBar, Footer, DayStrip });