function Footer() {
  return (
    <footer style={{ padding: '60px 0 40px', borderTop: '1px solid var(--line)', position: 'relative' }}>
      <div className="container">
        <div className="footer-grid" style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 40,
          marginBottom: 50,
        }}>
          <div className="footer-brand">
            <Logo size={40} />
            <p style={{ marginTop: 16, color: 'var(--ink-dim)', fontSize: 14, lineHeight: 1.55, maxWidth: 320 }}>
              An end-to-end content system that turns a 2-hour shoot into 30 days of authority-building content.
            </p>
          </div>
          {[
            { h: 'Navigate', l: [
              { t: 'Work', href: '#work' },
              { t: 'Process', href: '#process' },
              { t: 'Packages', href: '#packages' },
              { t: 'FAQ', href: '#faq' },
            ]},
            { h: 'Company', l: [
              { t: 'Reviews', href: '#testimonial' },
              { t: 'Case study', href: '#case-study' },
              { t: 'Book a call', href: '#book-a-call' },
              { t: 'Email us', href: 'mailto:hello@nexcutmedia.com' },
            ]},
            { h: 'Legal', l: [
              { t: 'Terms & Conditions', href: 'legal/terms.html' },
              { t: 'Refund Policy', href: 'legal/refund.html' },
              { t: 'Privacy Policy', href: 'legal/privacy.html' },
            ]},
          ].map(col => (
            <div key={col.h}>
              <div style={{ fontSize: 12, fontFamily: 'Geist Mono, monospace', letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--ink-muted)', marginBottom: 16 }}>{col.h}</div>
              <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10, padding: 0, margin: 0 }}>
                {col.l.map(item => (
                  <li key={item.t}><a href={item.href} style={{ fontSize: 14, color: 'var(--ink-dim)' }}>{item.t}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="footer-bottom" style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          paddingTop: 24, borderTop: '1px solid var(--line)',
          fontSize: 13, color: 'var(--ink-muted)',
        }}>
          <div>© 2026 Nexcut Media. All rights reserved.</div>
          <div style={{ display: 'flex', gap: 14 }}>
            {[
              { label: 'LinkedIn', href: 'https://www.linkedin.com/' },
              { label: 'X', href: 'https://x.com/' },
              { label: 'Instagram', href: 'https://www.instagram.com/' },
            ].map(s => (
              <a key={s.label} href={s.href} target="_blank" rel="noopener" aria-label={s.label} style={{
                width: 32, height: 32, borderRadius: '50%',
                background: 'rgba(255,255,255,0.04)',
                border: '1px solid var(--line)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 11,
              }}>{s.label[0]}</a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });