// Footer.jsx: Orbital Aerial Solutions
const OASFooter = () => {
  const scrollTo = (id) => {
    const el = document.getElementById(id.toLowerCase().replace(' ', '-'));
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <footer style={{ background: 'var(--bg-surface)', borderTop: '1px solid var(--border)', padding: '64px 32px 32px' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div className="footer-grid" style={{ marginBottom: 48 }}>
          {/* Logo block */}
          <div style={{ maxWidth: 350 }}>
            <div style={{ marginBottom: 16 }}>
              <img className="logo-dark" src="assets/Color%20Logo%20-%20Dark%20Theme.svg" alt="Orbital Aerial Solutions" style={{ height: 76, width: 'auto', display: 'block' }} />
              <img className="logo-light" src="assets/Color%20Logo%20-%20Light%20Theme.svg" alt="Orbital Aerial Solutions" style={{ height: 76, width: 'auto', display: 'block' }} />
            </div>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--fg-3)', lineHeight: 1.65, marginTop: 12 }}>
              Enterprise aerial intelligence built for industrial and commercial environments. Deploying secure, NDAA compliant systems engineered for precision data capture to execute high precision aerial workflows nationwide.
            </p>
          </div>

          {/* Services Links */}
          <div className="footer-column" style={{ paddingTop: 10 }}>
            <h2 className="footer-heading">Services</h2>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                { name: 'Stockpile Volumetric Reporting', target: 'services' },
                { name: 'Roof & Infrastructure Inspections', target: 'services' },
                { name: 'Autonomous 3D Reality Capture', target: 'services' },
                { name: 'Thermal Diagnostics', target: 'services' }
              ].map(item => (
                <button key={item.name} onClick={() => scrollTo(item.target)} className="footer-link" style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', textAlign: 'left' }}>
                  {item.name}
                </button>
              ))}
            </div>
          </div>

          {/* Company Links */}
          <div className="footer-column" style={{ paddingTop: 10 }}>
            <h2 className="footer-heading">Company</h2>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                { name: 'Advantage', target: 'advantage' },
                { name: 'Credentials', target: 'credentials' },
                { name: 'Contact', target: 'contact' }
              ].map(item => (
                <button key={item.name} onClick={() => scrollTo(item.target)} className="footer-link" style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', textAlign: 'left' }}>
                  {item.name}
                </button>
              ))}
            </div>
          </div>

          {/* Sectors Information */}
          <div className="footer-column" style={{ paddingTop: 10 }}>
            <h2 className="footer-heading">Sectors</h2>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {['Hyperscale Computing', 'Critical Infrastructure', 'Defense Adjacent', 'Industrial Mining', 'Land & Home Development'].map(l => (
                <span key={l} className="footer-text-item">{l}</span>
              ))}
            </div>
          </div>
        </div>

        <div style={{ borderTop: '1px solid var(--border-muted)', paddingTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--fg-3)' }}>
            © 2026 Orbital Aerial Solutions. All rights reserved.
          </div>
          <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
            <a href="#" className="footer-link" style={{ fontSize: 12 }}>Privacy</a>
          </div>
        </div>
      </div>
    </footer>
  );
};
Object.assign(window, { OASFooter });