const FOOTER_I18N = {
  EN: {
    nav: [
      { title: 'Services', links: [
        { label: 'Managed IT Services', href: 'services/managed-it.html' },
        { label: 'Database Management', href: 'services/database.html' },
        { label: 'AI Solutions & Simulation', href: 'services/ai-simulation.html' },
        { label: 'Medical Device Integration', href: 'services/medical-devices.html' },
        { label: 'ServiceNow', href: 'services/servicenow.html' },
        { label: 'Digital Services', href: 'services/digital.html' },
      ] },
      { title: 'Company', links: [
        { label: 'About', href: 'about.html' },
        { label: 'Case Studies', href: 'case-studies.html' },
        { label: 'Insights', href: 'insights.html' },
        { label: 'Careers', href: 'about.html' },
        { label: 'Press', href: 'about.html' },
      ] },
      { title: 'Resources', links: [
        { label: 'Documentation', href: 'insights.html' },
        { label: 'Compliance & DPA', href: 'about.html' },
        { label: 'Security', href: 'about.html' },
        { label: 'Status', href: 'about.html' },
        { label: 'Support', href: 'contact.html' },
        { label: 'Contact Us', href: 'contact.html' },
      ] },
    ],
    tagline: 'Grey Space IT Services GmbH — helping organizations streamline operations with scalable, well-architected IT.',
    headquartersLabel: 'Headquarters',
    contactLabel: 'Contact',
    supportLine: '24/7 support desk',
    regions: ['Germany', 'USA', 'Europe', 'India', 'Pakistan'],
    newsletterTitle: 'Field notes from the operations side of IT.',
    newsletterSub: 'One brief email a month. No noise.',
    subscribe: 'Subscribe',
    legal: ['Impressum', 'Datenschutz', 'AGB', 'Cookies'],
  },
  DE: {
    nav: [
      { title: 'Leistungen', links: [
        { label: 'Managed IT Services', href: 'services/managed-it.html' },
        { label: 'Datenbankmanagement', href: 'services/database.html' },
        { label: 'KI-Lösungen & Simulation', href: 'services/ai-simulation.html' },
        { label: 'Integration Medizintechnik', href: 'services/medical-devices.html' },
        { label: 'ServiceNow', href: 'services/servicenow.html' },
        { label: 'Digital Services', href: 'services/digital.html' },
      ] },
      { title: 'Unternehmen', links: [
        { label: 'Über uns', href: 'about.html' },
        { label: 'Case Studies', href: 'case-studies.html' },
        { label: 'Insights', href: 'insights.html' },
        { label: 'Karriere', href: 'about.html' },
        { label: 'Presse', href: 'about.html' },
      ] },
      { title: 'Ressourcen', links: [
        { label: 'Dokumentation', href: 'insights.html' },
        { label: 'Compliance & AVV', href: 'about.html' },
        { label: 'Sicherheit', href: 'about.html' },
        { label: 'Status', href: 'about.html' },
        { label: 'Support', href: 'contact.html' },
        { label: 'Kontakt', href: 'contact.html' },
      ] },
    ],
    tagline: 'Grey Space IT Services GmbH — wir helfen Unternehmen, ihre Abläufe mit skalierbarer, gut konzipierter IT zu optimieren.',
    headquartersLabel: 'Hauptsitz',
    contactLabel: 'Kontakt',
    supportLine: '24/7 Support-Desk',
    regions: ['Deutschland', 'USA', 'Europa', 'Indien', 'Pakistan'],
    newsletterTitle: 'Field Notes aus dem IT-Betrieb.',
    newsletterSub: 'Eine kurze E-Mail pro Monat. Kein Rauschen.',
    subscribe: 'Abonnieren',
    legal: ['Impressum', 'Datenschutz', 'AGB', 'Cookies'],
  },
};

function Footer({ base, lang = 'EN' }) {
  const F = FOOTER_I18N[lang] || FOOTER_I18N.EN;
  const FOOTER_NAV = F.nav;
  const B = base || '';
  return (
    <footer style={{background: '#0A0A0B', color: '#fff', padding: 'clamp(48px,8vw,96px) 0 32px'}}>
      <div style={{maxWidth: 1440, margin: '0 auto', padding: '0 var(--page-px,40px)'}}>
        <div className="gs-footer-grid" style={{
          display: 'grid', gridTemplateColumns: '1.4fr 2fr', gap: 'clamp(32px,6vw,96px)',
          paddingBottom: 64, borderBottom: '1px solid #1F1F22',
        }}>
          <div>
            <img src={B + 'assets/logo-dark.svg'} alt="Grey Space IT" style={{height: 38, display: 'block'}} />
            <p style={{
              marginTop: 28, maxWidth: 380,
              fontSize: 17, lineHeight: 1.55, color: '#9B9B93',
            }} dangerouslySetInnerHTML={{__html: F.tagline}} />

            <div style={{
              marginTop: 40,
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24,
            }}>
              <div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 13,
                  letterSpacing: '0.14em', color: '#9B9B93',
                  textTransform: 'uppercase', marginBottom: 10,
                  fontWeight: 700,
                }}>{F.headquartersLabel}</div>
                <div style={{fontSize: 14, lineHeight: 1.55, color: '#fff'}}>
                  Rosenheimer Landstraße 97<br/>
                  85521 Ottobrunn<br/>
                  Germany
                </div>
              </div>
              <div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 13,
                  letterSpacing: '0.14em', color: '#9B9B93',
                  textTransform: 'uppercase', marginBottom: 10,
                  fontWeight: 700,
                }}>{F.contactLabel}</div>
                <div style={{fontSize: 14, lineHeight: 1.55, color: '#fff'}}>
                  <a href="mailto:info@greyspaceit.com" style={{color: '#fff'}}>info@greyspaceit.com</a><br/>
                  <a href="tel:+4915754593581" style={{color: '#fff', fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.02em'}}>+49 1575 4593581</a><br/>
                  <span style={{color: '#9B9B93'}}>{F.supportLine}</span>
                </div>
              </div>
            </div>

            <div style={{
              marginTop: 32, display: 'flex', gap: 8, flexWrap: 'wrap',
            }}>
              {F.regions.map((r) => (
                <span key={r} style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10,
                  letterSpacing: '0.12em', textTransform: 'uppercase',
                  padding: '6px 12px', borderRadius: 999,
                  border: '1px solid #2A2A2D', color: '#C5C6C8',
                }}>{r}</span>
              ))}
            </div>
          </div>

          <div className="gs-footer-sitemap" style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32}}>
            {FOOTER_NAV.map((col) => (
              <div key={col.title}>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 13,
                  letterSpacing: '0.14em', color: '#9B9B93',
                  textTransform: 'uppercase', marginBottom: 18,
                  fontWeight: 700,
                }}>{col.title}</div>
                <ul style={{listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12}}>
                  {col.links.map((link) => (
                    <li key={link.label}>
                      <a href={B + link.href} style={{
                        fontSize: 14, color: '#C5C6C8',
                        transition: 'color 160ms',
                      }}
                      onMouseEnter={(e) => e.currentTarget.style.color = '#fff'}
                      onMouseLeave={(e) => e.currentTarget.style.color = '#C5C6C8'}
                      >{link.label}</a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>

        <div className="gs-newsletter-grid" style={{
          padding: '40px 0',
          display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center',
          borderBottom: '1px solid #1F1F22',
        }}>
          <div>
            <div style={{fontSize: 22, fontWeight: 500, letterSpacing: '-0.015em'}}>
              {F.newsletterTitle}
            </div>
            <div style={{fontSize: 14, color: '#9B9B93', marginTop: 6}}>
              {F.newsletterSub}
            </div>
          </div>
          <form onSubmit={(e) => e.preventDefault()} style={{
            display: 'flex', gap: 8, alignItems: 'center',
            background: '#111114', border: '1px solid #2A2A2D',
            borderRadius: 999, padding: 6, minWidth: 'min(380px,100%)',
          }}>
            <input type="email" placeholder="you@company.com" style={{
              flex: 1, border: 'none', background: 'transparent',
              color: '#fff', fontFamily: 'inherit', fontSize: 14,
              padding: '8px 14px', outline: 'none',
            }}/>
            <button type="submit" style={{
              border: 'none', background: 'var(--accent)', color: '#fff',
              fontFamily: 'inherit', fontSize: 13, fontWeight: 500,
              padding: '10px 20px', borderRadius: 999, cursor: 'pointer',
            }}>{F.subscribe} →</button>
          </form>
        </div>

        <div style={{
          paddingTop: 32,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          gap: 24, flexWrap: 'wrap',
        }}>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 11,
            letterSpacing: '0.1em', color: '#6C6C65',
          }}>
            © 2026 GREY SPACE IT SERVICES GMBH · HRB 234 567 · USt-IdNr. DE123456789
          </div>
          <div style={{display: 'flex', gap: 24}}>
            {F.legal.map((l) => (
              <a key={l} href="#" style={{
                fontSize: 13, color: '#9B9B93',
                transition: 'color 160ms',
              }}
              onMouseEnter={(e) => e.currentTarget.style.color = '#fff'}
              onMouseLeave={(e) => e.currentTarget.style.color = '#9B9B93'}
              >{l}</a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;