import { Link } from "@tanstack/react-router";
import { units } from "@/lib/units";
import { Logo } from "./Logo";
import { Facebook, Instagram, Linkedin, Mail, MapPin, Phone, ArrowRight } from "lucide-react";

const group = [
  { to: "/about", label: "About" },
  { to: "/businesses", label: "Our Businesses" },
  { to: "/leadership", label: "Leadership" },
] as const;

const explore = [
  { to: "/foundation", label: "Salim Turky Foundation" },
  { to: "/news", label: "News & Media" },
  { to: "/careers", label: "Careers" },
  { to: "/contact", label: "Contact" },
  { to: "/whistleblower", label: "Whistleblower" },
  { to: "/feedback", label: "Feedback" },
] as const;


export function Footer() {
  return (
    <footer className="bg-navy-deep text-white mt-0">
      {/* Newsletter band */}
      <div className="border-b border-white/10">
        <div className="container-x py-14 grid gap-8 lg:grid-cols-[1.2fr_1fr] lg:items-center">
          <div>
            <h2 className="text-3xl md:text-4xl">Stay informed</h2>
            <p className="mt-3 text-white/65 max-w-lg text-sm leading-relaxed">
              Corporate announcements, project milestones and community initiatives.
            </p>
          </div>
          <form
            className="flex flex-col sm:flex-row gap-3"
            onSubmit={(e) => e.preventDefault()}
          >
            <label className="sr-only" htmlFor="newsletter-email">Email address</label>
            <input
              id="newsletter-email"
              type="email"
              required
              placeholder="your@email.com"
              className="flex-1 min-w-0 bg-white/5 border border-white/20 px-4 py-3.5 text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-crimson"
            />
            <button type="submit" className="btn-accent justify-center">
              Subscribe <ArrowRight size={15} />
            </button>
          </form>
        </div>
      </div>

      <div className="container-x py-16 grid gap-12 md:grid-cols-2 lg:grid-cols-5">
        <div className="lg:col-span-2 max-w-md">
          <div className="mb-6">
            <Logo size="md" light />
          </div>
          <p className="text-white/65 leading-relaxed text-sm">
            For nearly four decades, Vigor Group has been investing in the industries
            that shape everyday life—from healthcare and hospitality to real estate,
            manufacturing and trade. Proudly rooted in Zanzibar. Growing across Tanzania.
            Looking to the world.
          </p>
          <ul className="mt-7 space-y-3 text-sm text-white/70">
            <li className="flex gap-3"><MapPin size={16} className="shrink-0 mt-0.5 text-crimson" /> Headquarters — Zanzibar, Tanzania</li>
            <li className="flex gap-3"><Mail size={16} className="shrink-0 mt-0.5 text-crimson" /> <a className="hover:text-white" href="mailto:info@turkysgroup.co.tz">info@turkysgroup.co.tz</a></li>
            <li className="flex gap-3">
              <Phone size={16} className="shrink-0 mt-0.5 text-crimson" />
              <a className="hover:text-white" href="tel:+255671700800">
                +255 671 700 800
              </a>
            </li>
          </ul>
          <div className="mt-7 flex items-center gap-3">
            {[
              {
                Icon: Linkedin,
                label: "LinkedIn",
                href: "https://tz.linkedin.com/company/vigor-group-of-companies",
              },
              { Icon: Facebook, label: "Facebook" },
              {
                Icon: Instagram,
                label: "Instagram",
                href: "https://www.instagram.com/turkysgroupofcompanies/?hl=en",
              },
            ].map(({ Icon, label, href }) => (
              <a
                key={label}
                href={href ?? "#"}
                aria-label={label}
                {...(href ? { target: "_blank", rel: "noopener noreferrer" } : {})}
                className="w-10 h-10 grid place-items-center border border-white/20 hover:border-crimson hover:bg-crimson transition-colors"
              >
                <Icon size={16} />
              </a>
            ))}
          </div>
        </div>

        <div>
          <h3 className="text-xs uppercase tracking-[0.2em] text-white/45 mb-5 font-sans font-semibold">Group</h3>
          <ul className="space-y-3 text-sm text-white/75">
            {group.map((l) => (
              <li key={l.to}><Link to={l.to} className="hover:text-crimson transition-colors">{l.label}</Link></li>
            ))}
          </ul>
        </div>

        <div>
          <h3 className="text-xs uppercase tracking-[0.2em] text-white/45 mb-5 font-sans font-semibold">Explore</h3>
          <ul className="space-y-3 text-sm text-white/75">
            {explore.map((l) => (
              <li key={l.to}><Link to={l.to} className="hover:text-crimson transition-colors">{l.label}</Link></li>
            ))}
          </ul>
        </div>

        <div>
          <h3 className="text-xs uppercase tracking-[0.2em] text-white/45 mb-5 font-sans font-semibold">Business Units</h3>
          <ul className="space-y-3 text-sm text-white/75">
            {units.map((u) => (
              <li key={u.slug}>
                <a href={u.href} target="_blank" rel="noreferrer" className="hover:text-crimson transition-colors">
                  {u.name} ↗
                </a>
              </li>
            ))}
          </ul>
        </div>
      </div>

      <div className="border-t border-white/10">
        <div className="container-x py-6 flex flex-col md:flex-row items-center justify-between gap-3 text-xs text-white/50">
          <p>© {new Date().getFullYear()} Vigor Group of Companies. All rights reserved.</p>
          <div className="flex items-center gap-6">
            <Link to="/privacy" className="hover:text-white">Privacy Policy</Link>
            <p>Zanzibar · Dar es Salaam · Tanzania</p>
          </div>
        </div>
      </div>
    </footer>
  );
}
