/* global React, Reveal */
function Footer() {
  return (
    <footer data-nal="footer" data-screen-label="07 Footer" style={{
      background: '#F7F9FB', color: '#3E4B5E',
      padding: '80px clamp(20px,4vw,48px) 36px',
      position: 'relative', overflow: 'hidden',
      borderTop: '1px solid #EEF2F6',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(circle, rgba(14,22,38,0.06) 1px, transparent 1.2px)',
        backgroundSize: '28px 28px',
        maskImage: 'radial-gradient(ellipse 70% 60% at 50% 80%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%)',
        WebkitMaskImage: 'radial-gradient(ellipse 70% 60% at 50% 80%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%)',
        pointerEvents: 'none',
      }} />
      <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto' }}>
        <div className="nal-foot-grid" style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr', gap: 40 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
              <img src="assets/nal-mark.png" style={{ height: 28, width: 'auto' }} alt="NAL" />
              <div>
                <div style={{ fontWeight: 700, fontSize: 15, color: '#0B1220', letterSpacing: '-0.01em' }}>NAL</div>
                <div style={{ fontSize: 11.5, color: '#5F6E82', letterSpacing: '0.02em' }}>Software Solutions LLC</div>
              </div>
            </div>
            <p style={{ fontSize: 13.5, lineHeight: 1.6, color: '#5F6E82', maxWidth: 320, margin: 0 }}>
              Backend &amp; cloud engineering partner
            </p>
            <div style={{ marginTop: 20, fontFamily: 'var(--font-mono)', fontSize: 11.5, color: '#5F6E82', display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ position: 'relative', width: 7, height: 7, background: '#2E9D6E', borderRadius: 999 }}>
                <span style={{ position: 'absolute', inset: -3, borderRadius: 999, background: '#2E9D6E', opacity: 0.35, animation: 'nal-ping 1.8s cubic-bezier(0,0,.2,1) infinite' }} />
              </span>
              Accepting projects
            </div>
          </div>
          <FooterCol h="Site" links={[
            ['Services', '#services'], ['How we work', '#work'], ['About', '#about'], ['Contact', '#contact'],
          ]} />
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#3A7BB8', letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 16 }}>Reach</div>
            <address style={{ fontStyle: 'normal', fontSize: 13, color: '#5F6E82', lineHeight: 1.6, marginBottom: 14 }}>
              <div style={{ color: '#0B1220', fontWeight: 600, fontSize: 13, letterSpacing: '-0.005em', marginBottom: 4 }}>NAL Software Solutions FZ-LLC</div>
              Compass Building — Al Hulaila<br />
              Ras Al Khaimah, U.A.E.
            </address>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
              <li>
                <a href="mailto:business@nalsoftwaresolutions.com" style={{ fontSize: 13.5, color: '#0B1220', textDecoration: 'none', borderBottom: '1px solid transparent', transition: 'border-color 200ms', paddingBottom: 1 }}
                  onMouseEnter={e => { e.currentTarget.style.borderColor = '#0B1220'; }}
                  onMouseLeave={e => { e.currentTarget.style.borderColor = 'transparent'; }}
                >business@nalsoftwaresolutions.com</a>
              </li>
              <li>
                <a href="terms.html" style={{ fontSize: 13.5, color: '#0B1220', textDecoration: 'none', borderBottom: '1px solid transparent', transition: 'border-color 200ms', paddingBottom: 1 }}
                  onMouseEnter={e => { e.currentTarget.style.borderColor = '#0B1220'; }}
                  onMouseLeave={e => { e.currentTarget.style.borderColor = 'transparent'; }}
                >Terms of Service</a>
              </li>
              <li>
                <a href="privacy.html" style={{ fontSize: 13.5, color: '#0B1220', textDecoration: 'none', borderBottom: '1px solid transparent', transition: 'border-color 200ms', paddingBottom: 1 }}
                  onMouseEnter={e => { e.currentTarget.style.borderColor = '#0B1220'; }}
                  onMouseLeave={e => { e.currentTarget.style.borderColor = 'transparent'; }}
                >Privacy Policy</a>
              </li>
            </ul>
          </div>
        </div>

        <div style={{ marginTop: 48, paddingTop: 20, borderTop: '1px solid #D9E0E8', display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 11.5, color: '#8695A8', flexWrap: 'wrap', gap: 12, letterSpacing: '0.02em' }}>
          <div>© 2026 NAL Software Solutions LLC</div>
          <div>Ras Al Khaimah, UAE · built with care</div>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ h, links }) {
  return (
    <div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#3A7BB8', letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 16 }}>{h}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {links.map(([l, href], i) => (
          <li key={i}>
            <a href={href} style={{ fontSize: 13.5, color: '#0B1220', textDecoration: 'none', borderBottom: '1px solid transparent', transition: 'border-color 200ms, color 200ms', paddingBottom: 1 }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = '#0B1220'; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = 'transparent'; }}
            >{l}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

window.Footer = Footer;