import Link from "next/link";
import {getTranslations} from "next-intl/server";
import {Car, Mail, Phone, ArrowRight} from "lucide-react";

export async function PublicFooter() {
  const t = await getTranslations("nav");

  return (
    <footer className="bg-gray-900 text-gray-400">
      <div className="mx-auto max-w-7xl px-6 py-14">
        <div className="grid grid-cols-1 gap-10 md:grid-cols-4">
          {/* Brand */}
          <div className="col-span-1 md:col-span-2">
            <Link className="flex items-center gap-2.5 group" href="/">
              <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-indigo-600 shadow-sm transition-transform duration-200 group-hover:scale-105">
                <Car className="h-4 w-4 text-white" />
              </div>
              <span className="text-[15px] font-bold text-white tracking-tight">RentCar</span>
            </Link>
            <p className="mt-4 max-w-xs text-sm leading-relaxed text-gray-400">
              Your trusted platform for finding the best car rentals across the country. Simple, fast, and reliable.
            </p>
            <div className="mt-5 flex flex-col gap-2.5 text-sm text-gray-500">
              <div className="flex items-center gap-2.5">
                <Mail className="h-4 w-4 shrink-0 text-gray-600" />
                <span>support@rentcar.com</span>
              </div>
              <div className="flex items-center gap-2.5">
                <Phone className="h-4 w-4 shrink-0 text-gray-600" />
                <span>+1 (800) 123-4567</span>
              </div>
            </div>
          </div>

          {/* Navigation */}
          <div>
            <h3 className="mb-4 text-xs font-semibold uppercase tracking-widest text-gray-300">Navigation</h3>
            <ul className="space-y-3 text-sm">
              {[
                {href: "/cars", label: t("cars")},
                {href: "/companies", label: t("companies")},
                {href: "/about", label: t("about")},
                {href: "/contact", label: t("contact")}
              ].map(({href, label}) => (
                <li key={href}>
                  <Link className="flex items-center gap-1 transition-colors hover:text-white group" href={href}>
                    <ArrowRight className="h-3 w-3 opacity-0 -ms-4 group-hover:opacity-100 group-hover:ms-0 transition-all duration-150" />
                    {label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Legal */}
          <div>
            <h3 className="mb-4 text-xs font-semibold uppercase tracking-widest text-gray-300">Legal</h3>
            <ul className="space-y-3 text-sm">
              <li>
                <Link className="flex items-center gap-1 transition-colors hover:text-white group" href="/terms">
                  <ArrowRight className="h-3 w-3 opacity-0 -ms-4 group-hover:opacity-100 group-hover:ms-0 transition-all duration-150" />
                  Terms of Service
                </Link>
              </li>
              <li>
                <Link className="flex items-center gap-1 transition-colors hover:text-white group" href="/privacy">
                  <ArrowRight className="h-3 w-3 opacity-0 -ms-4 group-hover:opacity-100 group-hover:ms-0 transition-all duration-150" />
                  Privacy Policy
                </Link>
              </li>
            </ul>
          </div>
        </div>

        {/* Bottom */}
        <div className="mt-12 flex flex-col items-center justify-between gap-3 border-t border-gray-800 pt-6 sm:flex-row">
          <p className="text-xs text-gray-600">© {new Date().getFullYear()} RentCar. All rights reserved.</p>
          <p className="text-xs text-gray-600">Built with care for drivers everywhere.</p>
        </div>
      </div>
    </footer>
  );
}