/* GA-Coach · Kompetenz-Check — Nav, Footer & kleine Bausteine
   (nutzt Icon / circuitDataUri aus ga-shared.jsx) */

const KC_NAV_LINKS = [
  { label: 'Academy', href: '/#academy' },
  { label: 'App', href: '/#app' },
  { label: 'KI-Assistent', href: '/#ki' },
  { label: 'Blog', href: '/#blog' },
  { label: 'Schulungen', href: '/#schulungen' },
];

function KCLogo({ height = 36 }) {
  return (
    <a href="/" style={{ display: 'inline-flex', alignItems: 'center', textDecoration: 'none' }}>
      <span style={{ display: 'inline-flex', background: '#fff', borderRadius: 10, padding: '5px 9px', boxShadow: 'var(--ga-shadow-1)', border: '1px solid var(--ga-line)' }}>
        <img src="assets/ga-coach-logo.jpg" alt="GA-Coach — Gebäudeautomation nach VDI 3814" style={{ height, display: 'block' }} />
      </span>
    </a>
  );
}

function KCNav({ onStart }) {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const f = () => setScrolled(window.scrollY > 8);
    f(); window.addEventListener('scroll', f, { passive: true });
    return () => window.removeEventListener('scroll', f);
  }, []);
  useLucide([open]);

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 100,
      background: scrolled ? 'rgba(255,255,255,.86)' : 'transparent',
      backdropFilter: scrolled ? 'blur(10px)' : 'none', WebkitBackdropFilter: scrolled ? 'blur(10px)' : 'none',
      borderBottom: `1px solid ${scrolled ? 'var(--ga-line)' : 'transparent'}`, transition: 'all .25s ease'
    }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 72, gap: 20 }}>
        <KCLogo />
        <nav className="kc-nav-links">
          {KC_NAV_LINKS.map(l => <a key={l.label} href={l.href} className="kc-nav-link">{l.label}</a>)}
          <span style={{ width: 1, height: 22, background: 'var(--ga-line)', margin: '0 6px' }} />
          <a href="#top" className="kc-nav-link" style={{ color: 'var(--ga-primary)' }} onClick={e => { e.preventDefault(); onStart(); }}>Kompetenz-Check</a>
        </nav>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <button onClick={onStart} className="btn btn-primary kc-nav-cta"><Icon name="gauge" size={17} /> Check starten</button>
          <button className="kc-burger" onClick={() => setOpen(o => !o)} style={{ width: 42, height: 42, borderRadius: 10, border: '1px solid var(--ga-line)', background: '#fff', color: 'var(--ga-text)', cursor: 'pointer', alignItems: 'center', justifyContent: 'center' }}><Icon name={open ? 'x' : 'menu'} size={22} /></button>
        </div>
      </div>
      {open && (
        <div style={{ borderTop: '1px solid var(--ga-line)', background: '#fff' }}>
          <div className="container" style={{ padding: '14px 24px 20px', display: 'flex', flexDirection: 'column', gap: 4 }}>
            {KC_NAV_LINKS.map(l => <a key={l.label} href={l.href} style={{ padding: '13px 8px', textDecoration: 'none', color: 'var(--ga-text)', fontWeight: 700, fontSize: 16 }}>{l.label}</a>)}
            <button onClick={() => { setOpen(false); onStart(); }} className="btn btn-primary btn-block" style={{ marginTop: 8 }}><Icon name="gauge" size={17} /> Kompetenz-Check starten</button>
          </div>
        </div>
      )}
    </header>
  );
}

const KC_SOCIALS = [
  { name: 'LinkedIn', path: '<path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z"/>' },
  { name: 'Instagram', path: '<path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.43.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23a3.7 3.7 0 0 1-.9 1.38 3.7 3.7 0 0 1-1.38.9c-.43.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.43-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.43-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16zm0 3.68A6.16 6.16 0 1 0 18.16 12 6.16 6.16 0 0 0 12 5.84zm0 10.16a4 4 0 1 1 4-4 4 4 0 0 1-4 4zm6.41-10.85a1.44 1.44 0 1 0 1.44 1.44 1.44 1.44 0 0 0-1.44-1.44z"/>' },
  { name: 'YouTube', path: '<path d="M23.5 6.19a3.02 3.02 0 0 0-2.12-2.14C19.5 3.55 12 3.55 12 3.55s-7.5 0-9.38.5A3.02 3.02 0 0 0 .5 6.19 31.5 31.5 0 0 0 0 12a31.5 31.5 0 0 0 .5 5.81 3.02 3.02 0 0 0 2.12 2.14c1.88.5 9.38.5 9.38.5s7.5 0 9.38-.5a3.02 3.02 0 0 0 2.12-2.14A31.5 31.5 0 0 0 24 12a31.5 31.5 0 0 0-.5-5.81zM9.55 15.57V8.43L15.82 12z"/>' },
];

const KC_FOOTER_COLS = [
  { h: 'Plattform', l: [['Academy', '/#academy'], ['GA-Coach App', '/#app'], ['KI-Assistent', '/#ki'], ['Blog', '/#blog']] },
  { h: 'Schulungen', l: [['VDI 3814 Schulung', '/#schulungen'], ['BACnet Schulung', '/#schulungen'], ['Workshops', '/#schulungen'], ['Online-Kurse', '/#schulungen']] },
  { h: 'Unternehmen', l: [['Über GA-Coach', '/#ueber'], ['Kompetenz-Check', '#top'], ['Newsletter', '/#newsletter'], ['Kontakt', '/#footer']] },
];

function KCFooter() {
  useLucide([]);
  return (
    <footer style={{ background: 'var(--ga-primary-900)', color: 'rgba(255,255,255,.82)' }}>
      <div className="container" style={{ padding: '64px 24px 0' }}>
        <div className="footer-grid">
          <div>
            <span style={{ display: 'inline-flex', background: '#fff', borderRadius: 10, padding: '6px 10px' }}>
              <img src="assets/ga-coach-logo.jpg" alt="GA-Coach" style={{ height: 42 }} />
            </span>
            <p style={{ fontSize: 14, lineHeight: 1.65, opacity: .82, maxWidth: 300, margin: '16px 0 0' }}>Die Wissensplattform für Gebäudeautomation. Praxis. System. Qualität.</p>
            <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>
              {KC_SOCIALS.map(s => (
                <a key={s.name} href="#" onClick={e => e.preventDefault()} aria-label={s.name} style={{ width: 38, height: 38, borderRadius: 9, background: 'rgba(255,255,255,.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" dangerouslySetInnerHTML={{ __html: s.path }} />
                </a>
              ))}
            </div>
          </div>
          {KC_FOOTER_COLS.map(c => (
            <div key={c.h}>
              <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: '.1em', textTransform: 'uppercase', color: '#90BAE5', marginBottom: 14 }}>{c.h}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                {c.l.map(([t, href]) => <a key={t} href={href} style={{ color: 'rgba(255,255,255,.82)', fontSize: 14, textDecoration: 'none', padding: '5px 0' }}>{t}</a>)}
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 48, padding: '22px 0 30px', borderTop: '1px solid rgba(255,255,255,.12)', display: 'flex', justifyContent: 'space-between', gap: 16, fontSize: 13, opacity: .65, flexWrap: 'wrap' }}>
          <span>© 2026 Dennis Wieczorek · GA-Coach®</span>
          <span>Gebäudeautomation nach VDI 3814 · www.ga-coach.de</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { KCNav, KCFooter, KCLogo });