/* ARBEITSSCHIRM — Footer */
(function () {
  const { Icon } = window.ABIcons;

  const SITE = 'https://www.ab-industrie.de/';
  const SHOP = 'https://www.ab-industrie.de/Baustellenschirme';
  const BLOG = 'https://www.ab-industrie.de/Wetterschutz-Baustelle-Sicherheit-bei-jedem-Wetter';

  const COLS = [
    { h: 'Modelle', items: [
      { label: 'Worker', href: '#modelle' },
      { label: 'Pipeliner', href: '#modelle' },
      { label: 'Heavy', href: '#modelle' },
      { label: 'Verstärkte Ausführung', href: '#modelle' },
      { label: 'Rechteckschirm', href: '#modelle' },
    ] },
    { h: 'Service', items: [
      { label: 'Beratung & Angebot', href: '#angebot' },
      { label: 'Standsystem', href: '#technik' },
      { label: 'Ratgeber', href: BLOG, ext: true },
      { label: 'Alle Baustellenschirme', href: SHOP, ext: true },
    ] },
    { h: 'Unternehmen', items: [
      { label: 'AB Industrie Service', href: SITE, ext: true },
      { label: 'Kontakt', href: '#angebot' },
      { label: 'info@ab-industrie.de', href: 'mailto:info@ab-industrie.de' },
    ] },
  ];

  function Footer() {
    return (
      <footer style={{ background: 'var(--surface-darker)', color: 'var(--steel-400)' }}>
        <div className="ab-container" style={{ paddingBlock: 'var(--space-9)' }}>
          <div className="ab-foot-grid" style={{ display: 'grid', gridTemplateColumns: '1.5fr repeat(3, 1fr)', gap: 'var(--space-7)' }}>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <img src="assets/logo-ab-mark.png" alt="AB Industrie Service" style={{ height: 42 }} />
                <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
                  <span style={{ fontFamily: 'var(--font-wordmark)', fontWeight: 400, fontSize: 18, letterSpacing: '0.02em', color: '#fff', textTransform: 'uppercase' }}>Arbeitsschirme</span>
                  <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 10, letterSpacing: '0.16em', color: 'var(--red-400)', textTransform: 'uppercase', marginTop: 5 }}>von AB Industrie Service</span>
                </span>
              </div>
              <p style={{ marginTop: 'var(--space-4)', fontSize: 'var(--fs-sm)', lineHeight: 1.6, maxWidth: '36ch' }}>
                Mobiler Wetterschutz für den Rohrleitungs-, Anlagen- und Kanalbau. Wind, Regen, Sturm, Schnee — die Arbeit läuft weiter.
              </p>
              <div style={{ display: 'flex', gap: 'var(--space-5)', marginTop: 'var(--space-5)', flexWrap: 'wrap' }}>
                <a href="mailto:info@ab-industrie.de" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: '#fff', fontWeight: 600, fontSize: 14, textDecoration: 'none' }}>
                  <Icon name="mail" size={16} color="var(--red-400)" /> info@ab-industrie.de
                </a>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: 'var(--steel-400)', fontSize: 14 }}>
                  <Icon name="map-pin" size={16} color="var(--red-400)" /> Leipzig
                </span>
              </div>
            </div>
            {COLS.map((col) => (
              <div key={col.h}>
                <h4 style={{ margin: '0 0 var(--space-4)', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#fff' }}>{col.h}</h4>
                <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {col.items.map((it) => (
                    <li key={it.label}><a href={it.href} target={it.ext ? '_blank' : undefined} rel={it.ext ? 'noopener noreferrer' : undefined} style={{ color: 'var(--steel-400)', fontSize: 'var(--fs-sm)', textDecoration: 'none', transition: 'color var(--dur-fast)' }}
                      onMouseEnter={(e) => (e.currentTarget.style.color = '#fff')}
                      onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--steel-400)')}>{it.label}</a></li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 'var(--space-8)', paddingTop: 'var(--space-5)', borderTop: '1px solid var(--border-on-dark)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 'var(--space-3)', fontSize: 'var(--fs-xs)' }}>
            <span>© 2026 AB Industrie Service · www.ab-industrie.de</span>
            <span style={{ display: 'flex', gap: 'var(--space-5)' }}>
              <a href="https://www.ab-industrie.de/Impressum" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--steel-500)' }}>Impressum</a>
              <a href="https://www.ab-industrie.de/Datenschutz" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--steel-500)' }}>Datenschutz</a>
              <a href="https://www.ab-industrie.de/AGB" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--steel-500)' }}>AGB</a>
            </span>
          </div>
        </div>
      </footer>
    );
  }

  window.ABArbeit = Object.assign(window.ABArbeit || {}, { Footer });
})();