// site-nav.jsx — self-contained shared nav + footer (hardcoded colors, no external deps)
// Safe to load on any page; defines only SiteNav, SiteFooter.

const NAV_LINKS = [
  { label: 'Home', href: '/', key: 'home' },
  { label: 'The World', href: '/#world', key: 'world' },
  { label: '$NECTAR', href: '/token', key: 'token' },
  { label: 'Mint', href: '/bible', key: 'mint' },
];
const MONCADE_PLAY_URL = 'https://www.gerrystephen.com/moncade';

function SiteNav({ active }) {
  const [compact, setCompact] = React.useState(() => window.innerWidth < 760);
  React.useEffect(() => {
    const onResize = () => setCompact(window.innerWidth < 760);
    window.addEventListener('resize', onResize, { passive: true });
    return () => window.removeEventListener('resize', onResize);
  }, []);
  const links = compact ? NAV_LINKS.filter((l) => l.key !== 'world') : NAV_LINKS;
  return (
    <div style={{ position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(7,4,14,0.72)', backdropFilter: 'blur(16px) saturate(150%)',
      WebkitBackdropFilter: 'blur(16px) saturate(150%)', borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: compact ? '9px 14px 10px' : '0 40px', minHeight: compact ? 86 : 64,
        display: 'flex', alignItems: compact ? 'stretch' : 'center', justifyContent: 'space-between', gap: compact ? 9 : 16, flexDirection: compact ? 'column' : 'row' }}>
        <a href="/" style={{ display: 'flex', alignItems: 'center', gap: 11, textDecoration: 'none' }}>
          <span style={{ width: 24, height: 24, borderRadius: 7, position: 'relative',
            background: 'radial-gradient(circle at 50% 40%, #B6A6FF, #5B3FD6)', boxShadow: '0 0 16px #836EF999' }}>
            <span style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 11, color: '#0c0716', fontWeight: 800, fontFamily: '"Space Mono", monospace' }}>B</span>
          </span>
          <span style={{ fontFamily: '"Space Mono", monospace', fontSize: 13.5, fontWeight: 700, letterSpacing: 4, color: '#F3EEFF' }}>BIOME</span>
        </a>
        <div style={{ display: 'flex', alignItems: 'center', gap: compact ? 3 : 4, overflowX: compact ? 'auto' : 'visible', paddingBottom: compact ? 2 : 0, WebkitOverflowScrolling: 'touch' }}>
          {links.map((l) => (
            <a key={l.key} href={l.href} style={{ textDecoration: 'none', padding: '8px 14px', borderRadius: 9, whiteSpace: 'nowrap',
              fontFamily: '"Space Grotesk", sans-serif', fontSize: compact ? 13 : 14, fontWeight: 500,
              color: active === l.key ? '#F3EEFF' : '#9C92BC',
              background: active === l.key ? 'rgba(131,110,249,0.16)' : 'transparent' }}>{l.label}</a>
          ))}
          <a href={MONCADE_PLAY_URL} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', marginLeft: compact ? 2 : 8, padding: compact ? '8px 13px' : '9px 18px', borderRadius: 10, whiteSpace: 'nowrap',
            fontFamily: '"Space Grotesk", sans-serif', fontSize: compact ? 13 : 14, fontWeight: 650, color: '#0c0716',
            background: 'linear-gradient(180deg, #B6A6FF, #836EF9)', boxShadow: '0 4px 18px rgba(131,110,249,0.4)' }}>Play Moncade</a>
        </div>
      </div>
    </div>
  );
}

function SiteFooter() {
  const cols = [
    { h: 'Explore', links: [['The World', '/#world'], ['Collection', '/bible'], ['$NECTAR token', '/token'], ['Launch app', '/app'], ['Play Moncade', MONCADE_PLAY_URL]] },
    { h: 'Collection', links: [['Premint', '/bible'], ['Traits', '/bible'], ['Rarity', '/bible']] },
    { h: 'Protocol', links: [['Tokenomics', '/token'], ['Proof-of-Life', '/token'], ['Roadmap', '/']] },
  ];
  return (
    <footer style={{ borderTop: '1px solid rgba(255,255,255,0.08)', background: '#05030b' }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '56px clamp(18px, 5vw, 40px) 44px',
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: 32 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
            <span style={{ width: 22, height: 22, borderRadius: 6, background: 'radial-gradient(circle at 50% 40%, #B6A6FF, #5B3FD6)', boxShadow: '0 0 14px #836EF999' }} />
            <span style={{ fontFamily: '"Space Mono", monospace', fontSize: 13, fontWeight: 700, letterSpacing: 4, color: '#F3EEFF' }}>BIOME</span>
          </div>
          <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.6, color: '#6A6388', maxWidth: 260, fontFamily: '"Space Grotesk", sans-serif' }}>
            A living, fully on-chain world. 10,000 organisms that grow, decay, breed and persist — powered by $NECTAR on Monad.
          </p>
        </div>
        {cols.map((c) => (
          <div key={c.h}>
            <div style={{ fontFamily: '"Space Mono", monospace', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: '#836EF9', fontWeight: 700, marginBottom: 14 }}>{c.h}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {c.links.map(([t, h]) => (
                <a key={t} href={h} style={{ textDecoration: 'none', fontSize: 13.5, color: '#9C92BC', fontFamily: '"Space Grotesk", sans-serif' }}>{t}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '20px 40px 40px', borderTop: '1px solid rgba(255,255,255,0.06)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 10 }}>
        <span style={{ fontFamily: '"Space Mono", monospace', fontSize: 11.5, color: '#4f4a68' }}>Concept · not financial advice · v1</span>
        <span style={{ fontFamily: '"Space Mono", monospace', fontSize: 11.5, color: '#4f4a68' }}>Built on Monad</span>
      </div>
    </footer>
  );
}

Object.assign(window, { SiteNav, SiteFooter });