"use client";

import Link from "next/link";
import { useTranslations } from "next-intl";
import {
  Home,
  MapPin,
  Mail,
  Phone,
  Globe,
  Shield,
  ArrowRight,
} from "lucide-react";

export function Footer() {
  const t = useTranslations("footer");
  const currentYear = new Date().getFullYear();

  return (
    <footer className="relative bg-brand-grey-dark text-white overflow-hidden">
      <div className="absolute top-0 left-0 right-0 h-2 bg-gradient-to-r from-brand-green via-brand-green-light to-brand-green" />
      <div className="absolute -top-24 -right-24 w-64 h-64 bg-brand-green/10 rounded-full blur-3xl" />
      <div className="absolute -bottom-32 -left-32 w-80 h-80 bg-brand-green/10 rounded-full blur-3xl" />

      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
          <div className="space-y-4">
            <div className="flex items-center gap-3">
              <div className="p-2.5 bg-brand-green rounded-xl">
                <Home className="w-6 h-6 text-white" />
              </div>
              <h3 className="text-xl font-bold">{t("brandTitle")}</h3>
            </div>
            <p className="text-brand-grey-light text-sm leading-relaxed">
              {t("welcome")}
            </p>
          </div>

          <div className="space-y-4">
            <div className="flex items-center gap-2 text-brand-green-light mb-2">
              <MapPin className="w-5 h-5" />
              <h3 className="text-lg font-bold text-white">{t("locationsTitle")}</h3>
            </div>
            <div className="space-y-4 text-sm">
              <a
                href="https://maps.google.com/?q=Herdweg+71+Böblingen"
                target="_blank"
                rel="noopener noreferrer"
                className="block text-brand-grey-light hover:text-brand-green-light transition-colors"
              >
                <span className="font-semibold text-white">{t("herdwegName")}</span>
                <br />
                {t("herdwegAddress")}
              </a>
              <a
                href="https://maps.google.com/?q=Schönaicher+Straße+26+Böblingen"
                target="_blank"
                rel="noopener noreferrer"
                className="block text-brand-grey-light hover:text-brand-green-light transition-colors"
              >
                <span className="font-semibold text-white">{t("schoenaicherName")}</span>
                <br />
                {t("schoenaicherAddress")}
              </a>
            </div>
          </div>

          <div className="space-y-4">
            <div className="flex items-center gap-2 text-brand-green-light mb-2">
              <Phone className="w-5 h-5" />
              <h3 className="text-lg font-bold text-white">{t("contactTitle")}</h3>
            </div>
            <div className="space-y-3 text-sm">
              <a
                href={`mailto:${t("email")}`}
                className="flex items-center gap-2 text-brand-grey-light hover:text-brand-green-light transition-colors"
              >
                <Mail className="w-4 h-4 text-brand-green" />
                {t("email")}
              </a>
              <a
                href={`tel:${t("phone").replace(/\s/g, "")}`}
                className="flex items-center gap-2 text-brand-grey-light hover:text-brand-green-light transition-colors"
              >
                <Phone className="w-4 h-4 text-brand-green" />
                {t("phone")}
              </a>
              <a
                href={`https://${t("web")}`}
                className="flex items-center gap-2 text-brand-grey-light hover:text-brand-green-light transition-colors"
              >
                <Globe className="w-4 h-4 text-brand-green" />
                {t("web")}
              </a>
            </div>
          </div>

          <div className="space-y-4">
            <div className="flex items-center gap-2 text-brand-green-light mb-2">
              <Shield className="w-5 h-5" />
              <h3 className="text-lg font-bold text-white">{t("legalTitle")}</h3>
            </div>
            <div className="flex flex-col gap-3">
              <Link
                href="/imprint"
                className="flex items-center gap-2 text-brand-grey-light hover:text-brand-green-light hover:translate-x-1 transition-all text-sm"
              >
                <ArrowRight className="w-4 h-4 text-brand-green" />
                {t("imprint")}
              </Link>
              <Link
                href="/privacy"
                className="flex items-center gap-2 text-brand-grey-light hover:text-brand-green-light hover:translate-x-1 transition-all text-sm"
              >
                <ArrowRight className="w-4 h-4 text-brand-green" />
                {t("privacy")}
              </Link>
            </div>
          </div>
        </div>

        <div className="relative mt-14 pt-8 border-t border-brand-grey/30 text-center text-brand-grey-light text-sm">
          © {currentYear} BB-Apartment. {t("rights")}
        </div>
      </div>
    </footer>
  );
}