import Link from "next/link"
import { LayoutGrid, Phone, Mail, MapPin, ArrowRight } from "lucide-react"
import siteData from "@/data/site.json"

export function Footer() {
  const { company, footer } = siteData

  return (
    <footer className="snap-start bg-surface-dark text-white">
      {/* Main grid */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="grid grid-cols-1 lg:grid-cols-5 gap-12">

          {/* Brand column */}
          <div className="lg:col-span-2 flex flex-col gap-5">
            <div className="flex items-center gap-2.5">
              <div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
                <LayoutGrid className="w-4 h-4 text-white" strokeWidth={2.5} />
              </div>
              <div className="flex flex-col leading-none">
                <span className="font-bold text-base text-white">{company.name}</span>
                <span className="text-[9px] tracking-widest text-white/40">{company.nameEn.toUpperCase()}</span>
              </div>
            </div>

            <p className="text-sm leading-relaxed text-white/55 max-w-xs text-pretty">
              {company.description}
            </p>

            <div className="flex flex-col gap-2.5">
              <a
                href={`tel:${company.phone}`}
                className="flex items-center gap-2 text-sm text-white/55 hover:text-white transition-colors"
              >
                <Phone className="w-3.5 h-3.5 text-primary shrink-0" />
                {company.phone}
              </a>
              <a
                href={`mailto:${company.email}`}
                className="flex items-center gap-2 text-sm text-white/55 hover:text-white transition-colors"
              >
                <Mail className="w-3.5 h-3.5 text-primary shrink-0" />
                {company.email}
              </a>
              <span className="flex items-start gap-2 text-sm text-white/55">
                <MapPin className="w-3.5 h-3.5 text-primary shrink-0 mt-0.5" />
                {company.address}
              </span>
            </div>
          </div>

          {/* Link columns */}
          {footer.columns.map((col) => (
            <div key={col.title} className="flex flex-col gap-4">
              <h3 className="text-xs font-semibold uppercase tracking-widest text-white/40">
                {col.title}
              </h3>
              <ul className="flex flex-col gap-2.5">
                {col.links.map((link) => (
                  <li key={link.label}>
                    <Link
                      href={link.href}
                      className="group flex items-center gap-1 text-sm text-white/55 hover:text-white transition-colors"
                    >
                      <ArrowRight className="w-3 h-3 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all" />
                      {link.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>

      {/* Bottom bar */}
      <div className="border-t border-white/10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-5 flex flex-col sm:flex-row items-center justify-between gap-3">
          <p className="text-xs text-white/35">{footer.copyright}</p>
          <div className="flex items-center gap-5">
            {footer.legal.map((item) => (
              <Link
                key={item.label}
                href={item.href}
                className="text-xs text-white/35 hover:text-white/65 transition-colors"
              >
                {item.label}
              </Link>
            ))}
            {company.icp && (
              <span className="text-xs text-white/35">{company.icp}</span>
            )}
          </div>
        </div>
      </div>
    </footer>
  )
}