"use client";

import Link from "next/link";
import { Mail, Phone, MapPin, Clock, ArrowUpRight, Linkedin, Globe } from "lucide-react";
import { siteConfig } from "@/lib/utils";
import { useLanguage } from "@/components/language-provider";
import { Logo } from "@/components/logo";

export function Footer() {
  const { t } = useLanguage();

  const navLinks = [
    { href: "/", label: t.nav.home },
    { href: "/about", label: t.nav.about },
    { href: "/services", label: t.nav.services },
    { href: "/contact", label: t.nav.contact },
  ];

  const serviceLinks = t.services.items.map((s, i) => ({
    href: `/services#${["cnc-turning-milling","drilling-grinding-welding","material-expertise","cutting-forming","construction-engineering","logistics"][i] || ""}`,
    label: s.title,
  }));

  return (
    <footer className="relative overflow-hidden bg-steel-900 text-white">
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-[radial-gradient(60%_60%_at_50%_0%,rgba(255,255,255,0.06),transparent_60%)]"
      />
      <div className="container-wide relative pt-20 pb-10">
        <div className="grid grid-cols-1 gap-12 lg:grid-cols-12">
          <div className="lg:col-span-4 flex flex-col gap-6">
            <Link href="/" aria-label="Steel-Tech home" className="inline-block">
              <Logo variant="light" className="h-12 w-auto" />
            </Link>
            <p className="max-w-sm text-sm leading-relaxed text-white/65">
              {t.footer.tagline}
            </p>
            <div className="flex gap-3">
              <a
                href={siteConfig.social.linkedin}
                target="_blank"
                rel="noopener noreferrer"
                aria-label="LinkedIn"
                className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/15 text-white/80 transition-colors hover:border-white/40 hover:text-white"
              >
                <Linkedin className="h-4 w-4" />
              </a>
              <a
                href={`https://${siteConfig.web}`}
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Website"
                className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/15 text-white/80 transition-colors hover:border-white/40 hover:text-white"
              >
                <Globe className="h-4 w-4" />
              </a>
            </div>
          </div>

          <div className="lg:col-span-2">
            <h4 className="mb-5 text-xs font-semibold uppercase tracking-[0.18em] text-white/50">
              {t.footer.navigate}
            </h4>
            <ul className="flex flex-col gap-3">
              {navLinks.map((l) => (
                <li key={l.href}>
                  <Link
                    href={l.href}
                    className="text-sm text-white/75 transition-colors hover:text-white"
                  >
                    {l.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div className="lg:col-span-3">
            <h4 className="mb-5 text-xs font-semibold uppercase tracking-[0.18em] text-white/50">
              {t.footer.services}
            </h4>
            <ul className="flex flex-col gap-3">
              {serviceLinks.map((l) => (
                <li key={l.href}>
                  <Link
                    href={l.href}
                    className="text-sm text-white/75 transition-colors hover:text-white"
                  >
                    {l.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div className="lg:col-span-3">
            <h4 className="mb-5 text-xs font-semibold uppercase tracking-[0.18em] text-white/50">
              {t.footer.contact}
            </h4>
            <ul className="flex flex-col gap-4 text-sm text-white/75">
              <li className="flex items-start gap-3">
                <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-white/50" />
                <span>
                  {siteConfig.address.street}
                  <br />
                  {siteConfig.address.postalCode} {siteConfig.address.city}
                </span>
              </li>
              <li className="flex items-center gap-3">
                <Phone className="h-4 w-4 shrink-0 text-white/50" />
                <a href={`tel:${siteConfig.phone}`} className="hover:text-white">
                  {siteConfig.phoneDisplay}
                </a>
              </li>
              <li className="flex items-center gap-3">
                <Mail className="h-4 w-4 shrink-0 text-white/50" />
                <a href={`mailto:${siteConfig.email}`} className="hover:text-white">
                  {siteConfig.email}
                </a>
              </li>
              <li className="flex items-center gap-3">
                <Clock className="h-4 w-4 shrink-0 text-white/50" />
                <span>{t.contact.details.hoursValue}</span>
              </li>
            </ul>

            <Link
              href="/contact"
              className="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-white"
            >
              {t.nav.cta}
              <ArrowUpRight className="h-4 w-4" />
            </Link>
          </div>
        </div>

        <div className="mt-16 flex flex-col items-start justify-between gap-4 border-t border-white/10 pt-8 sm:flex-row sm:items-center">
          <p className="text-xs text-white/50">
            © {new Date().getFullYear()} {siteConfig.name}. {t.footer.rights}
          </p>
          <p className="text-xs text-white/50">{t.footer.footerTag}</p>
        </div>
      </div>
    </footer>
  );
}