"use client";

import { HardHat, Mail, Phone, MapPin, Facebook, Linkedin, Instagram, ArrowUp } from "lucide-react";
import { COMPANY, NAV_LINKS, SERVICES } from "./site-data";
import { Button } from "@/components/ui/button";

export function Footer() {
  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  return (
    <footer className="relative bg-stone-950 text-stone-300 border-t border-stone-800">
      <div className="hazard-stripe h-1" />
      <div className="mx-auto max-w-7xl px-4 py-16 md:px-6">
        <div className="grid gap-10 md:grid-cols-2 lg:grid-cols-5">
          {/* Brand */}
          <div className="lg:col-span-2 space-y-4">
            <div className="flex items-center gap-3">
              <span className="flex h-10 w-10 items-center justify-center rounded-lg bg-amber-400 text-stone-950 font-bold">
                <HardHat className="h-5 w-5" />
              </span>
              <span className="text-xl font-extrabold tracking-tight text-white">
                BECS <span className="text-amber-400">Pvt. Ltd.</span>
              </span>
            </div>
            <p className="text-xs leading-relaxed text-stone-400 max-w-sm">
              {COMPANY.name} — a Nepal-based infrastructure development company delivering civil engineering, hydropower, transport, and environmental solutions nationwide.
            </p>

            <div className="rounded-lg border border-stone-800 bg-stone-900/60 p-3.5 text-xs text-stone-300 space-y-1">
              <div className="font-bold text-amber-400">Government Registration Disclosure</div>
              <div>Reg. No. {COMPANY.registrationNo} · Incorporated {COMPANY.incorporatedDate}</div>
              <div className="text-stone-400 text-[11px]">{COMPANY.authority}</div>
            </div>

            <div className="flex gap-2.5 pt-2">
              <a
                href={COMPANY.socials.facebook}
                aria-label="Facebook"
                className="flex h-9 w-9 items-center justify-center rounded-lg border border-stone-800 text-stone-400 transition-colors hover:border-amber-400 hover:text-amber-400"
              >
                <Facebook className="h-4 w-4" strokeWidth={1.5} />
              </a>
              <a
                href={COMPANY.socials.linkedin}
                aria-label="LinkedIn"
                className="flex h-9 w-9 items-center justify-center rounded-lg border border-stone-800 text-stone-400 transition-colors hover:border-amber-400 hover:text-amber-400"
              >
                <Linkedin className="h-4 w-4" strokeWidth={1.5} />
              </a>
              <a
                href={COMPANY.socials.instagram}
                aria-label="Instagram"
                className="flex h-9 w-9 items-center justify-center rounded-lg border border-stone-800 text-stone-400 transition-colors hover:border-amber-400 hover:text-amber-400"
              >
                <Instagram className="h-4 w-4" strokeWidth={1.5} />
              </a>
            </div>
          </div>

          {/* Quick links */}
          <div>
            <h4 className="text-xs font-bold uppercase tracking-[0.18em] text-stone-400 border-b border-stone-800 pb-2">
              Navigation
            </h4>
            <ul className="mt-4 space-y-2.5">
              {NAV_LINKS.map((link) => (
                <li key={link.href}>
                  <a
                    href={link.href}
                    className="text-xs text-stone-400 transition-colors hover:text-amber-400"
                  >
                    {link.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Services */}
          <div>
            <h4 className="text-xs font-bold uppercase tracking-[0.18em] text-stone-400 border-b border-stone-800 pb-2">
              Engineering Domains
            </h4>
            <ul className="mt-4 space-y-2.5">
              {SERVICES.slice(0, 7).map((s) => (
                <li key={s.title}>
                  <a
                    href="#services"
                    className="text-xs text-stone-400 transition-colors hover:text-amber-400"
                  >
                    {s.title}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact */}
          <div>
            <h4 className="text-xs font-bold uppercase tracking-[0.18em] text-stone-400 border-b border-stone-800 pb-2">
              Contact Center
            </h4>
            <ul className="mt-4 space-y-3">
              <li className="flex items-start gap-2.5 text-xs text-stone-400">
                <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-amber-400" strokeWidth={1.5} />
                <span>{COMPANY.address}</span>
              </li>
              <li className="flex items-start gap-2.5 text-xs text-stone-400">
                <Mail className="mt-0.5 h-4 w-4 shrink-0 text-amber-400" strokeWidth={1.5} />
                <a
                  href={`mailto:${COMPANY.email}`}
                  className="transition-colors hover:text-amber-400"
                >
                  {COMPANY.email}
                </a>
              </li>
              <li className="flex items-start gap-2.5 text-xs text-stone-400">
                <Phone className="mt-0.5 h-4 w-4 shrink-0 text-amber-400" strokeWidth={1.5} />
                <a
                  href={`tel:${COMPANY.phone.replace(/[^+\d]/g, "")}`}
                  className="transition-colors hover:text-amber-400"
                >
                  {COMPANY.phone}
                </a>
              </li>
            </ul>
          </div>
        </div>

        <div className="mt-14 flex flex-col items-center justify-between gap-4 border-t border-stone-800 pt-8 sm:flex-row">
          <p className="text-xs text-stone-500">
            © {new Date().getFullYear()} {COMPANY.name} {COMPANY.legalSuffix}. All rights reserved.
          </p>
          <div className="flex items-center gap-4 text-xs text-stone-500">
            <span>{COMPANY.domain}</span>
            <span>·</span>
            <span>Companies Act, 2006</span>
            <Button
              variant="outline"
              size="icon"
              onClick={scrollToTop}
              className="h-8 w-8 rounded-full border-stone-800 bg-stone-900 text-stone-400 hover:bg-stone-800 hover:text-white"
            >
              <ArrowUp className="h-4 w-4" />
            </Button>
          </div>
        </div>
      </div>
    </footer>
  );
}