// Shared tokens + tiny components used across the full Fongos landing page.
// Deep-black base, purple #7c3aed + cyan #06b6d4, monospace accents.

window.FONGOS = {
  bg: '#020208',
  bg2: '#05050d',
  surface: 'rgba(255,255,255,0.02)',
  surface2: 'rgba(255,255,255,0.035)',
  ink: '#e8e8f0',
  inkDim: 'rgba(232,232,240,0.6)',
  inkFaint: 'rgba(232,232,240,0.32)',
  inkGhost: 'rgba(232,232,240,0.12)',
  purple: '#7c3aed',
  purpleSoft: '#a78bfa',
  purpleDeep: '#5b21b6',
  cyan: '#06b6d4',
  cyanSoft: '#67e8f9',
  line: 'rgba(232,232,240,0.08)',
  lineStrong: 'rgba(232,232,240,0.16)',
  good: '#4ade80',
  bad: '#f87171',
  warn: '#fbbf24',
  mono: '"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace',
  sans: '"Inter Tight", "Helvetica Neue", Helvetica, system-ui, sans-serif',
};

function Chip({ children, dot = true, color, style = {} }) {
  const c = color || FONGOS.cyan;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      fontFamily: FONGOS.mono, fontSize: 10.5, letterSpacing: '0.2em',
      color: FONGOS.inkDim, textTransform: 'uppercase',
      padding: '6px 10px', border: `1px solid ${FONGOS.line}`,
      borderRadius: 2, background: 'rgba(255,255,255,0.02)',
      whiteSpace: 'nowrap',
      ...style,
    }}>
      {dot && <span style={{
        width: 6, height: 6, borderRadius: '50%', background: c,
        boxShadow: `0 0 8px ${c}`,
        animation: 'fongosPulse 1.8s ease-in-out infinite',
      }}/>}
      {children}
    </span>
  );
}

function SectionLabel({ num, name }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 14,
      fontFamily: FONGOS.mono, fontSize: 11, letterSpacing: '0.22em',
      color: FONGOS.inkFaint, textTransform: 'uppercase',
      marginBottom: 28,
    }}>
      <span style={{ color: FONGOS.purpleSoft }}>§{num}</span>
      <span style={{ width: 28, height: 1, background: FONGOS.lineStrong }}/>
      <span>{name}</span>
    </div>
  );
}

// Headline helper — thin 200-weight, tight tracking, purple accent word
function Headline({ children, size = 68, style = {} }) {
  return (
    <h2 style={{
      fontSize: size, lineHeight: 1.02, fontWeight: 200,
      letterSpacing: '-0.035em', margin: 0, color: FONGOS.ink,
      textWrap: 'balance', ...style,
    }}>{children}</h2>
  );
}

function TopNav() {
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '18px 40px', background: 'rgba(2,2,8,0.7)',
      backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
      borderBottom: `1px solid ${FONGOS.line}`,
    }} className="fg-nav">
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <svg width="32" height="32" style={{ animation: 'fongosMushroomFloat 4s ease-in-out infinite' }}>
          <use href="#mushroom-logo"/>
        </svg>
        <span style={{ fontFamily: FONGOS.mono, fontSize: 13, letterSpacing: '0.22em', color: FONGOS.ink }}>FONGOS</span>
      </div>
      <div className="fg-nav-links" style={{ display: 'flex', gap: 28, fontSize: 13, color: FONGOS.inkDim }}>
        <a href="#who" style={{color:'inherit',textDecoration:'none'}}>who</a>
        <a href="#moments" style={{color:'inherit',textDecoration:'none'}}>moments</a>
        <a href="#architecture" style={{color:'inherit',textDecoration:'none'}}>architecture</a>
        <a href="#compare" style={{color:'inherit',textDecoration:'none'}}>compare</a>
        <a href="#faq" style={{color:'inherit',textDecoration:'none'}}>faq</a>
        <a href="#install" style={{color:'inherit',textDecoration:'none'}}>access</a>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <span style={{ fontFamily: FONGOS.mono, fontSize: 11, color: FONGOS.inkFaint }}>v0.9.1</span>
        <a href="mailto:contact@fongos.net?subject=Fongos%20%E2%80%94%20request%20access" style={{
          padding: '8px 14px', background: FONGOS.ink, color: FONGOS.bg,
          border: 'none', fontSize: 12, fontWeight: 500, cursor: 'pointer',
          fontFamily: FONGOS.sans, letterSpacing: 0.3, textDecoration: 'none',
        }}>request access</a>
      </div>
    </nav>
  );
}

Object.assign(window, { Chip, SectionLabel, Headline, TopNav });