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/in/tawhidul-alom-b8b42629a/', path: 'M4.98 3.5a2 2 0 1 1-.02 4.02A2 2 0 0 1 4.98 3.5ZM3.4 8.9h3.16V20H3.4V8.9Zm5.2 0h3.03v1.52h.04c.42-.8 1.45-1.64 2.99-1.64 3.2 0 3.79 2.1 3.79 4.84V20h-3.16v-4.92c0-1.17-.02-2.68-1.63-2.68-1.64 0-1.89 1.28-1.89 2.6V20H8.6V8.9Z' },
              { label: 'Instagram', href: 'https://www.instagram.com/nexcutmedia/', path: 'M12 6.9A5.1 5.1 0 1 0 12 17.1 5.1 5.1 0 0 0 12 6.9Zm0 8.42A3.32 3.32 0 1 1 12 8.68a3.32 3.32 0 0 1 0 6.64Zm5.3-8.62a1.19 1.19 0 1 1-2.38 0 1.19 1.19 0 0 1 2.38 0ZM20.6 8.1c-.04-1.6-.4-3.02-1.58-4.18C17.86 2.76 16.44 2.4 14.84 2.32 13.2 2.23 8.8 2.23 7.16 2.32 5.56 2.4 4.14 2.76 2.98 3.92 1.82 5.08 1.46 6.5 1.38 8.1c-.1 1.64-.1 6.04 0 7.68.08 1.6.44 3.02 1.6 4.18 1.16 1.16 2.58 1.52 4.18 1.6 1.64.1 6.04.1 7.68 0 1.6-.08 3.02-.44 4.18-1.6 1.16-1.16 1.52-2.58 1.6-4.18.1-1.64.1-6.04 0-7.68Zm-2.12 9.44a3.36 3.36 0 0 1-1.9 1.9c-1.3.52-4.4.4-5.84.4-1.44 0-4.54.11-5.84-.4a3.36 3.36 0 0 1-1.9-1.9c-.52-1.3-.4-4.4-.4-5.84 0-1.44-.11-4.54.4-5.84a3.36 3.36 0 0 1 1.9-1.9c1.3-.52 4.4-.4 5.84-.4 1.44 0 4.54-.11 5.84.4a3.36 3.36 0 0 1 1.9 1.9c.52 1.3.4 4.4.4 5.84 0 1.44.12 4.54-.4 5.84Z' },
            ].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',
                color: 'var(--ink-dim)',
                transition: 'color 0.2s, border-color 0.2s, background 0.2s',
              }}>
                <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d={s.path} /></svg>
              </a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });
