import Link from "next/link";

import Image from "next/image";

import { SITE } from "@/lib/site";

const SOLUTIONS = [
  { href: "/solutions#ups", label: "Uninterruptible Power Supply" },
  { href: "/solutions#solar", label: "Solar Energy" },
  { href: "/solutions#biomass", label: "Biomass Energy" },
  { href: "/solutions#bess", label: "Battery Energy Storage" },
];

const COMPANY = [
  { href: "/about", label: "About Us" },
  { href: "/projects", label: "Projects" },
  { href: "/contact", label: "Contact" },
];

export default function Footer() {
  return (
    <footer className="bg-navy text-white">
      <div className="container-gv grid gap-12 py-16 md:grid-cols-2 lg:grid-cols-4 lg:gap-8 lg:py-20">
        <div className="lg:pr-8">
          <Link href="/" className="inline-block" aria-label="GV Bumisinar - home">
            <Image
              src="/images/brand/gv-logo-white.png"
              alt=""
              width={658}
              height={550}
              priority={false}
              className="h-10 w-auto"
            />
          </Link>
          <p className="mt-5 text-sm leading-relaxed text-white/60">
            {SITE.blurb}
          </p>
        </div>

        <div>
          <h3 className="text-xs font-bold uppercase tracking-[0.22em] text-white/55">
            Solutions
          </h3>
          <ul className="mt-5 space-y-3">
            {SOLUTIONS.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>
          <h3 className="text-xs font-bold uppercase tracking-[0.22em] text-white/55">
            Company
          </h3>
          <ul className="mt-5 space-y-3">
            {COMPANY.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>
          <h3 className="text-xs font-bold uppercase tracking-[0.22em] text-white/55">
            Contact
          </h3>
          <ul className="mt-5 space-y-3 text-sm text-white/75">
            <li>
              <a
                href={SITE.emailHref}
                className="transition-colors hover:text-white"
              >
                {SITE.email}
              </a>
            </li>
            <li>
              <a
                href={SITE.telHref}
                className="transition-colors hover:text-white"
              >
                {SITE.tel}
              </a>
            </li>
            <li className="leading-relaxed">{SITE.address}</li>
          </ul>
        </div>
      </div>

      <div className="border-t border-white/10">
        <div className="container-gv flex flex-col gap-3 py-6 text-xs text-white/55 sm:flex-row sm:items-center sm:justify-between">
          <p>
            {"©"} 2026 {SITE.name} ({SITE.regNo})
          </p>
          <p>{SITE.website}</p>
        </div>
      </div>
    </footer>
  );
}