import { HomeModernIcon, MapPinIcon, HomeIcon, MapIcon, DocumentTextIcon } from "@heroicons/react/24/outline";

export default function Footer() {
  return (
    <footer className="bg-sky-900 text-sky-100 mt-16">
      <div className="max-w-5xl mx-auto px-4 py-10 grid grid-cols-1 md:grid-cols-3 gap-8">
        <div>
          <h3 className="font-semibold text-white mb-2 flex items-center gap-2"><HomeModernIcon className="w-5 h-5" /> Angolo di Pace</h3>
          <p className="text-sm text-sky-200">Primorski kutak za odmor, mir i plavo more na dlanu.</p>
        </div>
        <div>
          <h3 className="font-semibold text-white mb-2">Brzi linkovi</h3>
          <ul className="text-sm space-y-1 text-sky-200">
            <li><a href="/lokacija" className="hover:text-white flex items-center gap-1.5"><MapPinIcon className="w-3.5 h-3.5" /> Lokacija</a></li>
            <li><a href="/vodic" className="hover:text-white flex items-center gap-1.5"><HomeIcon className="w-3.5 h-3.5" /> Vodič kroz kuću</a></li>
            <li><a href="/okolina" className="hover:text-white flex items-center gap-1.5"><MapIcon className="w-3.5 h-3.5" /> Okolina</a></li>
            <li><a href="/blog" className="hover:text-white flex items-center gap-1.5"><DocumentTextIcon className="w-3.5 h-3.5" /> Blog</a></li>
          </ul>
        </div>
        <div>
          <h3 className="font-semibold text-white mb-2">Kontakt</h3>
          <p className="text-sm text-sky-200">Za rezervacije i pitanja:</p>
          <a href="mailto:vas@email.com" className="text-sky-300 hover:text-white text-sm">
            vas@email.com
          </a>
        </div>
      </div>
      <div className="border-t border-sky-800 text-center py-4 text-xs text-sky-400">
        © {new Date().getFullYear()} Angolo di Pace. Sva prava zadržana.
      </div>
    </footer>
  );
}
