/* Nav, language toggle, backgrounds, footer */

const chromeStyles = {
  nav: {
    position: 'sticky', top: 0, zIndex: 40,
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '18px 40px',
    background: 'rgba(10,10,14,0.72)',
    backdropFilter: 'blur(20px) saturate(140%)',
    WebkitBackdropFilter: 'blur(20px) saturate(140%)',
    borderBottom: '1px solid rgba(255,255,255,0.06)',
  },
  brandWrap: { display: 'flex', alignItems: 'baseline', gap: 14 },
  brand: {
    fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18,
    letterSpacing: '0.3em', color: '#fff',
  },
  brandSub: {
    fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em',
    textTransform: 'uppercase', color: 'var(--fg-4)',
  },
  links: { display: 'flex', gap: 32 },
  link: {
    fontFamily: 'var(--font-display)', fontSize: 11, letterSpacing: '0.18em',
    textTransform: 'uppercase', color: 'var(--fg-3)', cursor: 'pointer',
    transition: 'all 160ms var(--ease-out)', background: 'none', border: 0, padding: 0,
  },
  right: { display: 'flex', alignItems: 'center', gap: 20 },
  langWrap: {
    display: 'flex', padding: 2, borderRadius: 999,
    border: '1px solid rgba(255,255,255,0.1)', background: 'rgba(255,255,255,0.03)',
  },
  langBtn: {
    fontFamily: 'var(--font-display)', fontSize: 10, letterSpacing: '0.2em',
    padding: '6px 12px', borderRadius: 999, background: 'transparent', border: 0,
    color: 'var(--fg-3)', cursor: 'pointer',
  },
  langBtnOn: {
    background: 'var(--gfc-cyan)', color: '#000',
    boxShadow: '0 0 12px rgba(0,229,255,0.5)',
  },
  cta: {
    fontFamily: 'var(--font-display)', fontSize: 11, letterSpacing: '0.18em',
    textTransform: 'uppercase', color: 'var(--gfc-cyan)',
    padding: '10px 16px', borderRadius: 6, background: 'transparent',
    border: '1px solid rgba(0,229,255,0.5)', cursor: 'pointer',
    boxShadow: 'var(--glow-xs-cyan)',
  },
};

const GFCNav = ({ lang, setLang, t, onNav }) => (
  <nav style={chromeStyles.nav}>
    <div style={chromeStyles.brandWrap}>
      <div style={chromeStyles.brand}>G·F·C</div>
      <div style={chromeStyles.brandSub}>Software Studio</div>
    </div>
    <div style={chromeStyles.links}>
      <button style={chromeStyles.link} onClick={() => onNav('studio')}>{t.nav.studio}</button>
      <button style={chromeStyles.link} onClick={() => onNav('products')}>{t.nav.products}</button>
      <button style={chromeStyles.link} onClick={() => onNav('apps')}>{t.nav.apps}</button>
      <button style={chromeStyles.link} onClick={() => onNav('contact')}>{t.nav.contact}</button>
    </div>
    <div style={chromeStyles.right}>
      <div style={chromeStyles.langWrap} role="group" aria-label="Language">
        {['en','nl'].map(l => (
          <button key={l}
            style={{ ...chromeStyles.langBtn, ...(lang === l ? chromeStyles.langBtnOn : {}) }}
            onClick={() => setLang(l)}>{l.toUpperCase()}</button>
        ))}
      </div>
      <button style={chromeStyles.cta} onClick={() => onNav('contact')}>{t.nav.cta}</button>
    </div>
  </nav>
);

/* ---------- Background layer, varies by tweak ---------- */
const GFCBackdrop = ({ motion, accent }) => {
  // motion: 'particles' | 'grid' | 'rings' | 'none'
  const accentMap = {
    cyan:    'rgba(0,229,255,0.28)',
    violet:  'rgba(123,44,255,0.32)',
    magenta: 'rgba(255,43,209,0.28)',
  };
  const glow = accentMap[accent] || accentMap.violet;
  return (
    <div aria-hidden style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none', zIndex: 0 }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse at 75% 25%, ${glow}, transparent 55%), radial-gradient(ellipse at 10% 90%, rgba(0,229,255,0.12), transparent 50%)`,
      }}/>
      {motion === 'grid'      && <GFCGridOverlay/>}
      {motion === 'particles' && <GFCParticleField count={70}/>}
      {motion === 'rings'     && <GFCOrbitalRings/>}
      {/* noise */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.06, mixBlendMode: 'overlay',
        backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>\")",
      }}/>
    </div>
  );
};

const GFCOrbitalRings = () => (
  <div style={{ position: 'absolute', inset: 0 }}>
    {[0,1,2].map(i => (
      <div key={i} style={{
        position: 'absolute', left: '50%', top: '40%',
        width: `${60 + i*20}vmax`, height: `${60 + i*20}vmax`,
        marginLeft: `-${30 + i*10}vmax`, marginTop: `-${30 + i*10}vmax`,
        borderRadius: '50%',
        border: `1px ${i%2===0?'solid':'dashed'} rgba(0,229,255,${0.08 - i*0.02})`,
        animation: `gfc-spin ${60 + i*30}s linear ${i%2===0?'':'reverse'} infinite`,
      }}/>
    ))}
  </div>
);

/* ---------- Footer ---------- */
const footStyles = {
  wrap: { padding: '80px 40px 40px', borderTop: '1px solid var(--border)', background: '#0B0B0F', position: 'relative' },
  hairline: { position: 'absolute', top: 0, left: 0, right: 0, height: 1, background: 'linear-gradient(90deg, transparent, var(--gfc-cyan), var(--gfc-violet), var(--gfc-magenta), transparent)', opacity: 0.5 },
  inner: { maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 48 },
  brandBlock: {},
  brand: { fontFamily: 'var(--font-display)', fontSize: 28, letterSpacing: '0.3em', color: '#fff' },
  tag: { fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.1em', marginTop: 10 },
  parent: { fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-4)', letterSpacing: '0.1em', marginTop: 24, maxWidth: 280, lineHeight: 1.6 },
  colTitle: { fontFamily: 'var(--font-display)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--fg-4)', marginBottom: 18 },
  colItem: { display: 'block', fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--fg-2)', marginBottom: 10, textDecoration: 'none', cursor: 'pointer' },
  bottom: { maxWidth: 1280, margin: '64px auto 0', paddingTop: 24, borderTop: '1px solid var(--border)',
    display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-4)', letterSpacing: '0.08em' },
};

const LEGAL_HREFS = ['/legal.html#privacy', '/legal.html#terms', '/legal.html#imprint'];

const GFCFooter = ({ t }) => (
  <footer style={footStyles.wrap}>
    <div style={footStyles.hairline}/>
    <div style={footStyles.inner}>
      <div style={footStyles.brandBlock}>
        <div style={footStyles.brand}>G·F·C</div>
        <div style={footStyles.tag}>{t.footer.tagline}</div>
        <div style={footStyles.parent}>{t.footer.parent}</div>
      </div>
      <div>
        <div style={footStyles.colTitle}>{t.footer.colBrands}</div>
        <a style={footStyles.colItem} href="https://snelwebsite.be" target="_blank" rel="noopener">snelwebsite.be</a>
        <a style={footStyles.colItem} href="#sec-apps">GFC Apps</a>
        <a style={footStyles.colItem} href="#sec-apps">GFC Skills</a>
      </div>
      <div>
        <div style={footStyles.colTitle}>{t.footer.colContact}</div>
        <a style={footStyles.colItem} href="mailto:gorik@gfconsulting.be">gorik@gfconsulting.be</a>
      </div>
      <div>
        <div style={footStyles.colTitle}>{t.footer.colLegal}</div>
        {t.footer.legal.map((l,i) => (
          <a key={i} style={footStyles.colItem} href={LEGAL_HREFS[i]}>{l}</a>
        ))}
      </div>
    </div>
    <div style={footStyles.bottom}>
      <div>{t.footer.rights}</div>
      <div>INTELLIGENTLY BUILT · FUTURE READY</div>
    </div>
  </footer>
);

Object.assign(window, { GFCNav, GFCBackdrop, GFCFooter });