app/components/footer.js

export default function Footer() {
  return (
    <footer className="bg-gray-900 text-white py-12 px-4 border-t border-gray-800">
      <div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
        <div>
          <h3 className="text-teal-400 text-xl mb-4">Sysmotix</h3>
          <p className="mb-4">Quebec's premier AI automation consultancy helping SMEs scale intelligently.</p>
          <div className="flex space-x-4">
            <a href="#" className="text-white hover:text-teal-400">
              <i data-feather="linkedin"></i>
            </a>
            <a href="#" className="text-white hover:text-teal-400">
              <i data-feather="twitter"></i>
            </a>
            <a href="#" className="text-white hover:text-teal-400">
              <i data-feather="facebook"></i>
            </a>
          </div>
        </div>
        <div>
          <h3 className="text-teal-400 text-xl mb-4">Quick Links</h3>
          <ul>
            <li><a href="#solutions" className="hover:text-teal-400">Solutions</a></li>
            <li><a href="#process" className="hover:text-teal-400">Process</a></li>
            <li><a href="#technology" className="hover:text-teal-400">Technology</a></li>
            <li><a href="#results" className="hover:text-teal-400">Results</a></li>
          </ul>
        </div>
        <div>
          <h3 className="text-teal-400 text-xl mb-4">Contact</h3>
          <ul>
            <li><a href="mailto:[email protected]" className="hover:text-teal-400">[email protected]</a></li>
            <li><a href="tel:+15145551234" className="hover:text-teal-400">+1 (514) 555-1234</a></li>
            <li>Montreal, Quebec</li>
          </ul>
        </div>
      </div>
      <div className="max-w-6xl mx-auto mt-8 pt-8 border-t border-gray-800 text-sm text-gray-400">
        &copy; {new Date().getFullYear()} Sysmotix. All rights reserved.
      </div>
    </footer>
  )
}