// nav.jsx - black global nav + frosted sticky sub-nav + footer
function GlobalNav({ go, section }) {
  const link = (label, path) => {
    const active = section === label.toLowerCase();
    return (
      <button key={label} onClick={() => go(path)} style={{
        background: 'none', border: 0, color: '#fff', cursor: 'pointer', padding: '4px 0',
        fontFamily: 'var(--font-text)', fontSize: 13, letterSpacing: '-0.12px',
        opacity: active ? 1 : 0.7, transition: 'opacity .2s ease',
      }}
      onMouseEnter={e => e.currentTarget.style.opacity = 1}
      onMouseLeave={e => e.currentTarget.style.opacity = active ? 1 : 0.7}>{label}</button>
    );
  };
  return (
    <div style={{ position: 'sticky', top: 0, zIndex: 60, height: 48, background: '#000',
      display: 'flex', alignItems: 'center', gap: 28, padding: '0 clamp(18px, 4vw, 40px)' }}>
      <button onClick={() => go('/')} style={{ background: 'none', border: 0, color: '#fff',
        fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16, letterSpacing: '-0.3px',
        cursor: 'pointer', padding: 0 }}>Samuel&nbsp;Doane</button>
      <nav style={{ display: 'flex', gap: 22, marginLeft: 6 }}>
        {link('Work', '/work')}
        {link('About', '/about')}
      </nav>
      <div style={{ flex: 1 }} />
      <a href={PROFILE.github} target="_blank" rel="noreferrer" aria-label="GitHub"
        style={{ display: 'grid', placeItems: 'center', opacity: 0.78 }}
        onMouseEnter={e => e.currentTarget.style.opacity = 1}
        onMouseLeave={e => e.currentTarget.style.opacity = 0.78}><Icon name="github" size={16} color="#fff" /></a>
      <a href={PROFILE.linkedin} target="_blank" rel="noreferrer" aria-label="LinkedIn"
        style={{ display: 'grid', placeItems: 'center', opacity: 0.78 }}
        onMouseEnter={e => e.currentTarget.style.opacity = 1}
        onMouseLeave={e => e.currentTarget.style.opacity = 0.78}><Icon name="linkedin" size={16} color="#fff" /></a>
    </div>
  );
}

function SubNav({ label, go, onContact, onResume }) {
  const subLink = { background: 'none', border: 0, cursor: 'pointer', color: 'var(--ink)',
    fontSize: 14, letterSpacing: '-0.224px', fontFamily: 'var(--font-text)', padding: '6px 4px' };
  return (
    <div style={{ position: 'sticky', top: 48, zIndex: 55, minHeight: 54,
      display: 'flex', alignItems: 'center', gap: 14, padding: '0 clamp(18px, 4vw, 40px)',
      background: 'rgba(245,245,247,0.8)', backdropFilter: 'var(--blur-frosted)',
      WebkitBackdropFilter: 'var(--blur-frosted)', borderBottom: '1px solid var(--hairline)' }}>
      <span className="t-tagline" style={{ color: 'var(--ink)', whiteSpace: 'nowrap', overflow: 'hidden',
        textOverflow: 'ellipsis' }}>{label}</span>
      <div style={{ flex: 1 }} />
      <button onClick={onResume} style={{ ...subLink, display: 'inline-flex', alignItems: 'center', gap: 6,
        color: 'var(--primary)' }}><Icon name="doc" size={14} color="var(--primary)" strokeWidth={1.8} />Résumé</button>
      <button onClick={onContact} {...pressHandlers} style={{ background: 'var(--primary)', color: '#fff',
        border: 0, borderRadius: 9999, padding: '9px 17px', fontSize: 14, cursor: 'pointer',
        fontFamily: 'var(--font-text)', transition: 'transform .12s ease', whiteSpace: 'nowrap' }}>Get in touch</button>
    </div>
  );
}

function Footer({ go, onContact, onResume }) {
  const col = { display: 'flex', flexDirection: 'column', gap: 2 };
  const fl = { background: 'none', border: 0, padding: '4px 0', textAlign: 'left', cursor: 'pointer',
    fontFamily: 'var(--font-text)', fontSize: 14, color: 'var(--ink-muted-80)', textDecoration: 'none',
    transition: 'color .2s ease' };
  const hov = {
    onMouseEnter: e => e.currentTarget.style.color = 'var(--primary)',
    onMouseLeave: e => e.currentTarget.style.color = 'var(--ink-muted-80)',
  };
  return (
    <footer style={{ background: 'var(--canvas-parchment)', padding: '72px clamp(18px,4vw,40px) 40px' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr)',
          gap: '36px 48px', alignItems: 'start' }} className="footer-grid">
          <div style={{ maxWidth: 420 }}>
            <button onClick={() => go('/')} style={{ background: 'none', border: 0, padding: 0, cursor: 'pointer',
              color: 'var(--ink)', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 21, letterSpacing: '-0.3px' }}>{PROFILE.name}</button>
            <p className="t-body" style={{ color: 'var(--ink-muted-48)', marginTop: 12, textWrap: 'pretty' }}>{PROFILE.micro}</p>
            <div style={{ display: 'flex', gap: 12, marginTop: 20, flexWrap: 'wrap' }}>
              <Pill onClick={onContact}>Get in touch</Pill>
              <Pill variant="ghost" onClick={onResume}><Icon name="doc" size={16} color="var(--primary)" strokeWidth={1.8} />Résumé</Pill>
            </div>
          </div>
          <div style={col}>
            <div className="t-caption-strong" style={{ color: 'var(--ink)', marginBottom: 6 }}>Explore</div>
            <button style={fl} {...hov} onClick={() => go('/work')}>Selected work</button>
            <button style={fl} {...hov} onClick={() => go('/about')}>About</button>
            <button style={fl} {...hov} onClick={onContact}>Contact</button>
          </div>
          <div style={col}>
            <div className="t-caption-strong" style={{ color: 'var(--ink)', marginBottom: 6 }}>Elsewhere</div>
            <a style={fl} {...hov} href={PROFILE.github} target="_blank" rel="noreferrer">GitHub ↗</a>
            <a style={fl} {...hov} href={PROFILE.linkedin} target="_blank" rel="noreferrer">LinkedIn ↗</a>
            <a style={fl} {...hov} href={'mailto:' + PROFILE.email}>Email</a>
          </div>
        </div>
        <div style={{ marginTop: 48, paddingTop: 18, borderTop: '1px solid var(--hairline)',
          display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <span className="t-fine-print" style={{ color: 'var(--ink-muted-48)' }}>© 2026 {PROFILE.name}. Built in Los Angeles.</span>
          <span className="t-fine-print" style={{ color: 'var(--ink-muted-48)' }}>Project visuals are placeholders pending final renders.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { GlobalNav, SubNav, Footer });