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

export default function Footer() {
    return (
        <footer className="bg-white text-gray-500 border-t">
            <div className="container mx-auto px-4 py-10">
                <div className="grid grid-cols-1 md:grid-cols-4 gap-8 items-start">
                    {/* Brand + socials */}
                    <div className="flex flex-col gap-4">
                        <div className="flex items-center gap-3">
                            <Link href="/">
                                <Image
                                    src="/images/logo.svg"
                                    alt="Marine Travel"
                                    width={150}
                                    height={45}
                                />
                            </Link>
                        </div>
                        <div className="flex items-center gap-4 text-teal-500">
                            <a
                                href="#"
                                aria-label="VK"
                                className="hover:opacity-80"
                            >
                                vk
                            </a>
                            <a
                                href="#"
                                aria-label="Telegram"
                                className="hover:opacity-80"
                            >
                                tg
                            </a>
                            <a
                                href="#"
                                aria-label="YouTube"
                                className="hover:opacity-80"
                            >
                                yt
                            </a>
                        </div>
                    </div>

                    {/* Column 1 */}
                    <ul className="space-y-3">
                        <li>
                            <a href="#" className="hover:text-gray-700">
                                О нас
                            </a>
                        </li>
                        <li>
                            <a href="#" className="hover:text-gray-700">
                                Задать вопрос
                            </a>
                        </li>
                        <li>
                            <a href="#" className="hover:text-gray-700">
                                Контакты
                            </a>
                        </li>
                        <li>
                            <a href="#" className="hover:text-gray-700">
                                Блог
                            </a>
                        </li>
                    </ul>

                    {/* Column 2 */}
                    <ul className="space-y-3">
                        <li>
                            <a href="#" className="hover:text-gray-700">
                                Разместить яхту
                            </a>
                        </li>
                        <li>
                            <a href="#" className="hover:text-gray-700">
                                Договор оферты
                            </a>
                        </li>
                    </ul>

                    {/* Column 3 */}
                    <ul className="space-y-3">
                        <li>
                            <a href="#" className="hover:text-gray-700">
                                Пользовательское соглашение
                            </a>
                        </li>
                        <li>
                            <a href="#" className="hover:text-gray-700">
                                Политика конфиденциальности
                            </a>
                        </li>
                        <li>
                            <a href="#" className="hover:text-gray-700">
                                Раскрытие информации Google
                            </a>
                        </li>
                    </ul>
                </div>

                <div className="mt-12 flex justify-end text-sm text-gray-400">
                    <span>Сделано в Inavate</span>
                </div>
            </div>
        </footer>
    );
}
