import Link from "next/link";
import Image from "next/image";

export default function Footer() {
  return (
    <footer className="site-footer">
      <div className="footer-container">

        <div className="footer-brand">
          <Image
            src="/logo_simple.png"
            alt="Leon's Pet Store logo"
            width={50}
            height={50}
            className="footer-logo"
          />
          <p className="footer-tagline">
            Your neighbourhood pet store!
          </p>
        </div>

        <div className="footer-section">
          <h3 className="footer-heading">Quick Links</h3>
          <ul className="footer-links">
            <li><Link href="/">Home</Link></li>
            <li><Link href="/adopt">Adopt a Pet</Link></li>
            <li><Link href="/products">Online Store</Link></li>
            <li><Link href="/appointments">Schedule an Appointment</Link></li>
            <li><Link href="/ai-chat">AI Assistant</Link></li>
          </ul>
        </div>

        <div className="footer-section">
          <h3 className="footer-heading">Company</h3>
          <ul className="footer-links">
            <li><Link href="/about">About Us</Link></li>
            <li><Link href="/contact">Contact Us</Link></li>
          </ul>
        </div>

        <div className="footer-section">
          <h3 className="footer-heading">Contact</h3>
          <ul className="footer-links footer-contact">
            <li>(403) 123-4567</li>
            <li>support@leonspetstore.com</li>
          </ul>
        </div>

      </div>

      <div className="footer-bottom">
        <p>&copy; {new Date().getFullYear()} Leon&apos;s Pet Store. All rights reserved.</p>
      </div>
    </footer>
  );
}
