const Footer = ({ onNav }) => {
  const links = {
    Services: ['Custom Software', 'AI & ML', 'SaaS Platforms', 'Blockchain', 'Analytics', 'Cloud'],
    Company: ['About', 'Work', 'Contact'],
  };
  const site = (window.zData && window.zData('site')) || {};
  const socialHref = (label) => {
    const val = label === 'LinkedIn' ? site.linkedin
             : label === 'Twitter'  ? site.twitter
             : label === 'GitHub'   ? site.github
             : '';
    return val && val !== '#' ? val : '#';
  };
  const year = new Date().getFullYear();

  return (
    <footer style={{ background: '#0f172a', padding: '64px 0 32px' }}>
      <div className="inner-wrap" style={{ maxWidth: 1200, margin: '0 auto', padding: '0 32px' }}>
        <Newsletter />
        <div className="footer-grid" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 48, marginBottom: 52 }}>
          {/* Brand */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
              <div style={{ width: 36, height: 36, borderRadius: 9, background: 'linear-gradient(135deg, #1d4ed8, #3b82f6)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 4px 12px rgba(29,78,216,0.4)' }}>
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
                  <path d="M9 2L16 6.5V11.5L9 16L2 11.5V6.5L9 2Z" stroke="white" strokeWidth="1.5" fill="none"/>
                  <circle cx="9" cy="9" r="2.5" fill="white"/>
                </svg>
              </div>
              <span style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 18, color: '#f8fafc', letterSpacing: '-0.02em' }}>
                {(site.companyName || 'Ziverse Technologies').replace(/\s+Technologies\s*$/i, '') || 'Ziverse'}<span style={{ color: '#60a5fa' }}>.</span>
              </span>
            </div>
            <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14.5, color: '#64748b', lineHeight: 1.7, maxWidth: 300, margin: '0 0 24px' }}>
              Custom software, AI systems, and digital transformation for startups, SMEs, and enterprises.
            </p>
            <div style={{ display: 'flex', gap: 10 }}>
              {[
                { label: 'LinkedIn', d: 'M3 3h2v2H3V3zm0 3h2v7H3V6zm3 0h2v1s.5-1 2-1 2 1 2 2.5V13h-2V9c0-.6-.3-1-1-1s-1 .5-1 1v4H6V6z' },
                { label: 'Twitter', d: 'M14 4s-.9.4-1.4.5c.6-.4 1-1 1-1s-.7.3-1.4.5c-.7-.7-1.6-.7-2.2 0-.8.8-.5 2 .1 2.5-1.8-.1-3.3-1-4.5-2.3 0 0-.6 1.5.8 2.5-.4 0-.9-.2-.9-.2s.1 1.4 1.8 1.9c-.4.1-.9.1-.9.1s.5 1.3 2.3 1.4c-1.2.9-2.9 1-2.9 1A6.5 6.5 0 0 0 14 4z' },
                { label: 'GitHub', d: 'M8 2a6 6 0 0 0-1.9 11.7c.3.1.4-.1.4-.3V12c-1.7.4-2-.8-2-.8-.3-.7-.6-.9-.6-.9-.5-.4 0-.4 0-.4.6 0 .9.6.9.6.5.9 1.3.6 1.6.5 0-.4.2-.6.4-.8-1.4-.2-2.8-.7-2.8-3 0-.7.2-1.2.6-1.7 0-.1-.3-.8.1-1.6 0 0 .5-.2 1.7.6a5.8 5.8 0 0 1 3 0c1.2-.8 1.7-.6 1.7-.6.4.8.1 1.5.1 1.6.4.5.6 1 .6 1.7 0 2.3-1.4 2.8-2.8 3 .2.2.4.6.4 1.2v1.8c0 .2.1.4.4.3A6 6 0 0 0 8 2z' },
              ].map(({ label, d }) => (
                <a key={label} href={socialHref(label)} target={socialHref(label) !== '#' ? '_blank' : undefined} rel={socialHref(label) !== '#' ? 'noopener noreferrer' : undefined} aria-label={label} style={{ width: 36, height: 36, borderRadius: 8, border: '1px solid rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all 0.2s', color: '#64748b', textDecoration: 'none' }}
                  onMouseEnter={e => { e.currentTarget.style.borderColor = '#3b82f6'; e.currentTarget.style.color = '#60a5fa'; e.currentTarget.style.background = 'rgba(59,130,246,0.1)'; }}
                  onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.1)'; e.currentTarget.style.color = '#64748b'; e.currentTarget.style.background = 'transparent'; }}>
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d={d}/></svg>
                </a>
              ))}
            </div>
          </div>

          {Object.entries(links).map(([col, items]) => (
            <div key={col}>
              <h5 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 12, fontWeight: 700, color: '#f8fafc', letterSpacing: '0.08em', margin: '0 0 18px', textTransform: 'uppercase' }}>{col}</h5>
              {items.map(item => (
                <a key={item} href="#"
                  onClick={e => { e.preventDefault(); onNav(item === 'About' ? 'about' : item === 'Work' ? 'portfolio' : item === 'Contact' ? 'contact' : 'services'); }}
                  style={{ display: 'block', fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: '#64748b', marginBottom: 11, textDecoration: 'none', transition: 'color 0.15s' }}
                  onMouseEnter={e => e.target.style.color = '#93c5fd'}
                  onMouseLeave={e => e.target.style.color = '#64748b'}>
                  {item}
                </a>
              ))}
            </div>
          ))}
        </div>

        <div style={{ borderTop: '1px solid rgba(255,255,255,0.07)', paddingTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
          <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: '#475569' }}>© {year} {site.companyName || 'Ziverse Technologies'}. All rights reserved.</span>
          <div style={{ display: 'flex', gap: 24 }}>
            {['Privacy Policy', 'Terms of Service'].map(t => (
              <a key={t} href="#" style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: '#475569', textDecoration: 'none', transition: 'color 0.15s' }}
                onMouseEnter={e => e.target.style.color = '#60a5fa'}
                onMouseLeave={e => e.target.style.color = '#475569'}>{t}</a>
            ))}
            <a href="/admin" style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: '#475569', textDecoration: 'none', transition: 'color 0.15s' }}
              onMouseEnter={e => e.target.style.color = '#60a5fa'}
              onMouseLeave={e => e.target.style.color = '#475569'}>Admin</a>
          </div>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { Footer });