// dthas landing — footer. Inverted, mirrors the hero. Wordmark, tagline, copyright.
function Footer() {
  return (
    <footer style={{ background: 'var(--c-black)', color: 'var(--c-white)' }}>
      <div style={{
        maxWidth: 'var(--container-max)', margin: '0 auto',
        padding: 'clamp(56px, 9vh, 120px) var(--container-pad) clamp(28px, 4vh, 48px)',
      }}>
        <div className="dthas-foot-top" style={{
          display: 'grid', gridTemplateColumns: 'minmax(0, 1.4fr) minmax(0, 1fr)',
          gap: 'clamp(32px, 5vw, 80px)', alignItems: 'end',
          paddingBottom: 'clamp(40px, 6vh, 72px)',
        }}>
          <div>
            <div style={{ fontWeight: 400, fontSize: 'clamp(3rem, 9vw, 7rem)', lineHeight: 0.9, letterSpacing: '-0.05em' }}>dthas</div>
            <p style={{ margin: '20px 0 0', color: 'var(--c-paper-700)', fontSize: 'var(--fs-lead)', letterSpacing: '-0.01em' }}>design · technology hub and services</p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', alignItems: 'flex-start' }}>
            <nav style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
              {[['Services', 'services.html'], ['Work', 'work.html'], ['About', 'about.html'], ['Contact', 'contact.html']].map(([label, href]) => (
                <a key={href} href={href} className="ds-ulink" style={{
                  fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-caption)',
                  letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--c-paper-700)',
                  transition: 'color var(--dur-base) var(--ease-out)',
                }}
                  onMouseEnter={(e)=>e.target.style.color='var(--c-white)'}
                  onMouseLeave={(e)=>e.target.style.color='var(--c-paper-700)'}
                >{label}</a>
              ))}
            </nav>
            <a href="mailto:dthastech@gmail.com" style={{ color: 'var(--c-white)', borderBottom: '1px solid var(--c-line-invert)', paddingBottom: '2px' }}>dthastech@gmail.com</a>
            <span style={{ color: 'var(--c-paper-700)', fontSize: 'var(--fs-small)' }}>Den Haag, Netherlands</span>
            <a href="https://www.linkedin.com/company/dthas/" target="_blank" rel="noopener" aria-label="dthas on LinkedIn"
              style={{ display: 'inline-flex', color: 'var(--c-paper-700)', transition: 'color var(--dur-base) var(--ease-out)' }}
              onMouseEnter={(e)=>e.currentTarget.style.color='var(--c-white)'}
              onMouseLeave={(e)=>e.currentTarget.style.color='var(--c-paper-700)'}
            >
              <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
                <path d="M20.45 20.45h-3.56v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.34V9h3.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.07 2.07 0 1 1 0-4.13 2.07 2.07 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.8 0 0 .78 0 1.73v20.54C0 23.22.8 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .78 23.2 0 22.22 0z" />
              </svg>
            </a>
          </div>
        </div>
        <div style={{
          display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: '12px',
          paddingTop: '24px', borderTop: '1px solid var(--c-line-invert)',
          fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-caption)',
          letterSpacing: '0.03em', color: 'var(--c-paper-500)',
        }}>
          <span>© 2026 dthas</span>
          <span>Den Haag · NL</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });