/* global React, Logo, Icon */

function Footer() {
  return (
    <footer style={{ background: 'var(--fg-1)', color: '#fff', padding: '80px 28px 36px' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <div className="kmu-footer-grid" style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1.2fr', gap: 48 }}>
          <div>
            <img src={(window.__resources && window.__resources.logoColor) || "assets/logo-kmucare.svg?v=7hex-blue"} height={40} style={{ filter: 'brightness(0) invert(1)' }} alt="KMUcare"/>
            <p style={{ marginTop: 22, fontSize: 14, lineHeight: 1.65, color: 'rgba(255,255,255,0.7)', maxWidth: 320 }}>
              IT für Schweizer KMU. Persönlich, geradeaus, schweizweit.
            </p>
            <div style={{ marginTop: 24, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <Pill>Seit 2017</Pill>
              <Pill>Enterprise Netzwerk</Pill>
              <Pill>Open‑Source</Pill>
              <Pill>Hosting in CH</Pill>
              <Pill>Inhabergeführt</Pill>
            </div>
          </div>
          <div data-soft-launch-hide><FooterCol title="Angebot" items={[
            { label: 'KMUcare.network', href: '#/dienstleistungen#network' },
            { label: 'KMUcare.system', href: '#/dienstleistungen#system' },
            { label: 'KMUcare.complete', href: '#/dienstleistungen#complete' },
            { label: 'Individuell', href: '#/dienstleistungen#einzelthemen' },
          ]}/></div>
          <div data-soft-launch-hide><FooterCol title="Unternehmen" items={[
            { label: 'Über uns', href: '#/ueber-uns' },
            { label: 'Jobs', href: '#/jobs' },
            { label: 'Blog', href: '#/blog' },
            { label: 'Kontakt', href: '#/kontakt' },
            { label: 'Impressum', href: '#/impressum' },
            { label: 'Datenschutz', href: '#/datenschutz' },
          ]}/></div>
          <div>
            <FooterTitle>Direkt erreichbar</FooterTitle>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 14, fontSize: 14, color: 'rgba(255,255,255,0.78)' }}>
              <li style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <Icon name="map-pin" size={16}/>
                <span>Aarauerstrasse 27<br/>5102 Rupperswil</span>
              </li>
              <li style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                <Icon name="phone" size={16}/>
                <a href="tel:+41625629600" style={{ color: 'inherit', textDecoration: 'none' }}>+41 62 562 96 00</a>
              </li>
              <li style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                <Icon name="mail" size={16}/>
                <a href="mailto:hallo@kmucare.ch" style={{ color: 'inherit', textDecoration: 'none' }}>hallo@kmucare.ch</a>
              </li>
              <li style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <Icon name="clock" size={16}/>
                <span>Mo – Fr · 08:00 – 17:30<br/>Notfall‑Hotline 24 / 7</span>
              </li>
            </ul>
          </div>
        </div>
        <div style={{ marginTop: 64, paddingTop: 26, borderTop: '1px solid rgba(255,255,255,0.12)',
          display: 'flex', justifyContent: 'space-between', fontSize: 13, color: 'rgba(255,255,255,0.5)', flexWrap: 'wrap', gap: 12 }}>
          <span>© 2026 KMUcare GmbH · Aarauerstrasse 27 · 5102 Rupperswil</span>
          <span className="kmu-mono">Made in Switzerland</span>
        </div>
      </div>
    </footer>
  );
}

function Pill({ children }) {
  return <span style={{
    fontSize: 11, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase',
    color: 'rgba(255,255,255,0.85)', background: 'rgba(255,255,255,0.08)',
    border: '1px solid rgba(255,255,255,0.16)',
    padding: '5px 10px', borderRadius: 999,
  }}>{children}</span>;
}

function FooterTitle({ children }) {
  return <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', marginBottom: 18 }}>{children}</div>;
}

function FooterCol({ title, items }) {
  return (
    <div>
      <FooterTitle>{title}</FooterTitle>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 11 }}>
        {items.map((i) => <li key={i.label}><a href={i.href} style={{ color: 'rgba(255,255,255,0.78)', textDecoration: 'none', fontSize: 14 }}
          onMouseEnter={(e) => e.currentTarget.style.color = '#fff'}
          onMouseLeave={(e) => e.currentTarget.style.color = 'rgba(255,255,255,0.78)'}>{i.label}</a></li>)}
      </ul>
    </div>
  );
}

window.Footer = Footer;