// Top nav, footer, mobile menu

const NAV = [
  { id: 'home',      label: 'Home' },
  { id: 'about',     label: 'About' },
  { id: 'build',     label: 'Build' },
];

const Logo = ({ size = 28 }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
    <img src="assets/logo-mark.png" alt="" width={size*1.6} height={size}
      style={{ objectFit: 'contain' }} />
    <div style={{ lineHeight: 1 }}>
      <div className="oblik" style={{ fontSize: 14, letterSpacing: '-0.01em' }}>
        AFRICAN TECHNOPRENEURS
      </div>
      <div className="mono" style={{ fontSize: 9.5, color: 'var(--fg-3)', letterSpacing: '0.24em', marginTop: 2 }}>
        AI DIVISION · ai.africantechno.com
      </div>
    </div>
  </div>
);

const Header = ({ route, setRoute }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  const [themePref, setThemePrefState] = React.useState(() => (typeof window !== 'undefined' ? window.getThemePref() : 'light'));

  const cycleTheme = () => {
    const order = ['light', 'dark', 'auto'];
    const next = order[(order.indexOf(themePref) + 1) % order.length];
    window.setThemePref(next);
    setThemePrefState(next);
  };

  const themeIcon = themePref === 'dark' ? 'moon' : themePref === 'auto' ? 'monitor' : 'sun';
  const themeLabel = themePref === 'dark' ? 'Dark' : themePref === 'auto' ? 'Auto' : 'Light';
  const themeNextHint = themePref === 'light' ? 'Switch to dark' : themePref === 'dark' ? 'Switch to auto' : 'Switch to light';

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <>
      <header style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 40,
        background: scrolled ? 'var(--bg-scrolled)' : 'transparent',
        backdropFilter: scrolled ? 'blur(14px) saturate(130%)' : 'none',
        WebkitBackdropFilter: scrolled ? 'blur(14px) saturate(130%)' : 'none',
        borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
        transition: 'background 240ms ease, border-color 240ms ease'
      }}>
        <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 72 }}>
          <a onClick={() => setRoute('home')} style={{ cursor: 'pointer' }}>
            <Logo />
          </a>
          <nav style={{ display: 'flex', alignItems: 'center', gap: 28 }} className="desktop-nav">
            {NAV.map(item => (
              <a key={item.id}
                onClick={() => setRoute(item.id)}
                className={`nav-link ${route === item.id ? 'active' : ''}`}
                style={{
                  fontSize: 13.5, fontWeight: 500,
                  color: route === item.id ? 'var(--fg)' : 'var(--fg-2)',
                  cursor: 'pointer'
                }}>
                {item.label}
              </a>
            ))}
          </nav>
          <div className="desktop-cta" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <button onClick={cycleTheme} aria-label={`Theme: ${themeLabel}. ${themeNextHint}`} title={`Theme: ${themeLabel} · ${themeNextHint}`} style={{
              width: 38, height: 38, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              borderRadius: 999, border: '1px solid var(--line-2)', color: 'var(--fg-2)',
              background: 'transparent', cursor: 'pointer', transition: 'color 160ms, border-color 160ms'
            }}>
              <Icon name={themeIcon} size={17} />
            </button>
            <a href="mailto:info@africantechno.com" className="btn btn-primary">
              Get in touch <Icon name="arrow" size={14} />
            </a>
          </div>
          <button className="mobile-burger" onClick={() => setOpen(true)} style={{
            display: 'none', padding: 8, borderRadius: 8,
            border: '1px solid var(--line-2)'
          }}>
            <Icon name="menu" size={20} />
          </button>
        </div>
      </header>

      {open && (
        <div style={{
          position: 'fixed', inset: 0, zIndex: 50, background: 'var(--bg)',
          padding: '24px', display: 'flex', flexDirection: 'column'
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 32 }}>
            <Logo />
            <button onClick={() => setOpen(false)} style={{ padding: 8, borderRadius: 8, border: '1px solid var(--line-2)' }}>
              <Icon name="close" size={20} />
            </button>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            {NAV.map(item => (
              <a key={item.id} onClick={() => { setRoute(item.id); setOpen(false); }}
                style={{
                  padding: '18px 4px', fontSize: 22, fontWeight: 500,
                  borderBottom: '1px solid var(--line)',
                  color: route === item.id ? 'var(--green)' : 'var(--fg)',
                  letterSpacing: '-0.01em'
                }}>
                {item.label}
              </a>
            ))}
          </div>
          <div style={{ marginTop: 'auto', display: 'grid', gap: 12 }}>
            <button onClick={cycleTheme} title={themeNextHint} style={{
              padding: '12px', fontSize: 13, borderRadius: 10, border: '1px solid var(--line-2)',
              color: 'var(--fg-2)', background: 'transparent',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8
            }}>
              <Icon name={themeIcon} size={16} />
              Theme: {themeLabel}
            </button>
            <a href="mailto:info@africantechno.com" className="btn btn-primary" onClick={() => setOpen(false)}>
              Get in touch <Icon name="arrow" size={14} />
            </a>
            <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.16em', textAlign: 'center' }}>
              CENTURION · JOHANNESBURG · GAUTENG
            </div>
          </div>
        </div>
      )}

      <style>{`
        @media (max-width: 900px) {
          .desktop-nav, .desktop-cta { display: none !important; }
          .mobile-burger { display: inline-flex !important; }
        }
      `}</style>
    </>
  );
};

const Footer = ({ setRoute }) => {
  return (
    <footer style={{
      borderTop: '1px solid var(--line)',
      marginTop: 120,
      paddingTop: 72,
      paddingBottom: 48,
      background: 'var(--bg)'
    }}>
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.4fr 1fr 1fr 1fr',
          gap: 48, marginBottom: 64
        }} className="footer-grid">
          <div>
            <Logo />
            <p style={{ color: 'var(--fg-3)', fontSize: 14, lineHeight: 1.65, marginTop: 20, maxWidth: 320 }}>
              Practical AI systems, automations and advisory —
              built in South Africa for the realities of African business.
            </p>
            <div style={{ display: 'flex', gap: 8, marginTop: 24 }}>
              <span className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.16em',
                border: '1px solid var(--line)', padding: '6px 10px', borderRadius: 6 }}>
                EARN GROUP COMPANY
              </span>
            </div>
          </div>
          <div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 18 }}>
              Explore
            </div>
            <div style={{ display: 'grid', gap: 10 }}>
              {['about','build'].map(id => (
                <a key={id} onClick={() => setRoute(id)} style={{ fontSize: 14, color: 'var(--fg-2)', cursor: 'pointer', textTransform: 'capitalize' }}>{id}</a>
              ))}
            </div>
          </div>
          <div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 18 }}>
              Network
            </div>
            <div style={{ display: 'grid', gap: 10 }}>
              <a href="https://ai.africantechno.com" style={{ fontSize: 14, color: 'var(--fg-2)' }}>ai.africantechno.com</a>
              <a href="https://www.gaic.co.za" target="_blank" rel="noopener" style={{ fontSize: 14, color: 'var(--fg-2)' }}>Gauteng AI Community</a>
              <a style={{ fontSize: 14, color: 'var(--fg-2)' }}>EARN Group</a>
            </div>
          </div>
          <div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 18 }}>
              Contact
            </div>
            <div style={{ display: 'grid', gap: 10, fontSize: 14, color: 'var(--fg-2)' }}>
              <span>info@africantechno.com</span>
              <span>+27 12 946 2665</span>
              <span style={{ color: 'var(--fg-3)' }}>Centurion, Gauteng<br/>South Africa</span>
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          borderTop: '1px solid var(--line)', paddingTop: 28 }} className="footer-bottom">
          <div className="mono" style={{ fontSize: 11, color: 'var(--fg-4)', letterSpacing: '0.14em' }}>
            © 2026 AFRICAN TECHNOPRENEURS (PTY) LTD · EARN GROUP COMPANY
          </div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--fg-4)', letterSpacing: '0.14em' }}>
            CONNECTING AFRICA · BUILDING SYSTEMS
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
        }
        @media (max-width: 560px) {
          .footer-grid { grid-template-columns: 1fr !important; }
          .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start !important; }
        }
      `}</style>
    </footer>
  );
};

Object.assign(window, { Header, Footer, Logo, NAV });