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

const linkCls = "text-[#2f2f2f] no-underline text-[0.95rem] opacity-85 transition-opacity hover:opacity-100 hover:underline";

export default function Footer() {
  return (
    <footer className="bg-[#e68672] text-[#2f2f2f] mt-16 rounded-t-[10px]">
      <div className="max-w-[1200px] mx-auto px-8 pt-12 pb-8 grid [grid-template-columns:2fr_1fr_1fr_1fr] gap-8 max-[900px]:[grid-template-columns:1fr_1fr] max-[550px]:grid-cols-1">

        <div className="max-[900px]:[grid-column:1/-1]">
          <Image src="/logo_simple.png" alt="Leon's Pet Store logo" width={50} height={50} className="rounded-full mb-3" />
          <p className="text-[0.95rem] leading-relaxed opacity-90 max-w-[260px]">
            Your neighbourhood pet store!
          </p>
        </div>

        <div>
          <h3 className="text-base font-bold mb-4 uppercase tracking-[0.05em]">Quick Links</h3>
          <ul className="list-none p-0 m-0 flex flex-col gap-2">
            <li><Link href="/" className={linkCls}>Home</Link></li>
            <li><Link href="/adopt" className={linkCls}>Adopt a Pet</Link></li>
            <li><Link href="/products" className={linkCls}>Online Store</Link></li>
            <li><Link href="/appointments" className={linkCls}>Schedule an Appointment</Link></li>
            <li><Link href="/ai-chat" className={linkCls}>AI Assistant</Link></li>
          </ul>
        </div>

        <div>
          <h3 className="text-base font-bold mb-4 uppercase tracking-[0.05em]">Company</h3>
          <ul className="list-none p-0 m-0 flex flex-col gap-2">
            <li><Link href="/about" className={linkCls}>About Us</Link></li>
            <li><Link href="/contact" className={linkCls}>Contact Us</Link></li>
          </ul>
        </div>

        <div>
          <h3 className="text-base font-bold mb-4 uppercase tracking-[0.05em]">Contact</h3>
          <ul className="list-none p-0 m-0 flex flex-col gap-2">
            <li className="text-[0.95rem] opacity-85">(403) 123-4567</li>
            <li className="text-[0.95rem] opacity-85">support@leonspetstore.com</li>
          </ul>
        </div>

      </div>

      <div className="border-t border-[rgba(47,47,47,0.2)] text-center px-8 py-4 text-[0.85rem] opacity-80">
        <p>&copy; {new Date().getFullYear()} Leon&apos;s Pet Store. All rights reserved.</p>
      </div>
    </footer>
  );
}