"use client";

import Link from "next/link";
import { MapPin, Mail, Phone } from "lucide-react";

const footerLinks = {
  Organisation: [
    { label: "About CALCC", href: "/about" },
    { label: "Introduction", href: "/about/introduction" },
    { label: "Committees", href: "/about/committees" },
    { label: "Regional Centres", href: "/about/regional-centres" },
  ],
  Membership: [
    { label: "Become a Member", href: "/members/register" },
    { label: "Member Login", href: "/members/login" },
    { label: "Member Directory", href: "/members/directory" },
    { label: "Member Benefits", href: "/members/benefits" },
  ],
  Services: [
    { label: "Legal Connect", href: "/legal-connect" },
    { label: "Activities", href: "/activities" },
    { label: "Publications", href: "/publications" },
    { label: "Contact Us", href: "/contact" },
  ],
};

const socials = [
  {
    label: "LinkedIn",
    href: "#",
    icon: (
      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
      </svg>
    ),
  },
  {
    label: "Twitter / X",
    href: "#",
    icon: (
      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
      </svg>
    ),
  },
  {
    label: "WeChat",
    href: "#",
    icon: (
      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 01.213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 00.167-.054l1.903-1.114a.864.864 0 01.717-.098 10.16 10.16 0 002.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 01-1.162 1.178A1.17 1.17 0 014.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 01-1.162 1.178 1.17 1.17 0 01-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 01.598.082l1.584.926a.272.272 0 00.14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 01-.023-.156.49.49 0 01.201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-7.062-6.122zm-3.18 3.31c.537 0 .972.44.972.982a.977.977 0 01-.972.983.977.977 0 01-.972-.983c0-.542.434-.982.972-.982zm4.908 0c.537 0 .972.44.972.982a.977.977 0 01-.972.983.977.977 0 01-.972-.983c0-.542.434-.982.972-.982z" />
      </svg>
    ),
  },
];

export default function Footer() {
  const year = new Date().getFullYear();

  return (
    <footer
      style={{
        background: "#1A1A2E",
        borderTop: "3px solid #C9A84C",
      }}
    >
      {/* Main footer */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="grid lg:grid-cols-5 gap-12">
          {/* Brand column */}
          <div className="lg:col-span-2">
            <Link href="/" className="inline-flex items-center gap-3 mb-6 group">
              <div
                className="flex items-center justify-center w-12 h-12 rounded-xl font-serif font-bold text-sm"
                style={{ background: "#2D5FA6", color: "white" }}
              >
                <span className="block text-xs leading-tight text-center">CA<br/>LCC</span>
              </div>
              <div>
                <div className="text-white font-serif font-bold text-lg leading-tight group-hover:text-blue-300 transition-colors duration-200">CALCC</div>
                <div style={{ color: "rgba(255,255,255,0.45)", fontSize: "11px" }}>中国东盟法律合作中心</div>
              </div>
            </Link>

            <p style={{ color: "rgba(255,255,255,0.55)", fontSize: "14px", lineHeight: "1.7", maxWidth: "320px" }} className="mb-8">
              The China-ASEAN Legal Cooperation Center is the premier institution bridging
              legal systems between China and ASEAN member states.
            </p>

            {/* Contact info */}
            <div className="space-y-3">
              {[
                {
                  icon: <MapPin className="w-4 h-4 flex-shrink-0" />,
                  text: "Kuala Lumpur, Malaysia",
                },
                {
                  icon: <Mail className="w-4 h-4 flex-shrink-0" />,
                  text: "info@calcc.world",
                  href: "mailto:info@calcc.world",
                },
                {
                  icon: <Phone className="w-4 h-4 flex-shrink-0" />,
                  text: "+60 3-XXXX XXXX",
                },
              ].map((item) => (
                <div key={item.text} className="flex items-start gap-3" style={{ color: "rgba(255,255,255,0.5)", fontSize: "13px" }}>
                  <span style={{ color: "#C9A84C", marginTop: "1px" }}>{item.icon}</span>
                  {item.href ? (
                    <a href={item.href} className="hover:text-white transition-colors duration-150 cursor-pointer" style={{ color: "rgba(255,255,255,0.5)" }}>
                      {item.text}
                    </a>
                  ) : (
                    <span>{item.text}</span>
                  )}
                </div>
              ))}
            </div>

            {/* Socials */}
            <div className="flex gap-3 mt-8">
              {socials.map((s) => (
                <a
                  key={s.label}
                  href={s.href}
                  aria-label={s.label}
                  className="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-200 cursor-pointer"
                  style={{
                    background: "rgba(255,255,255,0.08)",
                    color: "rgba(255,255,255,0.5)",
                    border: "1px solid rgba(255,255,255,0.1)",
                  }}
                  onMouseEnter={(e) => {
                    (e.currentTarget as HTMLAnchorElement).style.background = "#2D5FA6";
                    (e.currentTarget as HTMLAnchorElement).style.color = "white";
                    (e.currentTarget as HTMLAnchorElement).style.borderColor = "#2D5FA6";
                  }}
                  onMouseLeave={(e) => {
                    (e.currentTarget as HTMLAnchorElement).style.background = "rgba(255,255,255,0.08)";
                    (e.currentTarget as HTMLAnchorElement).style.color = "rgba(255,255,255,0.5)";
                    (e.currentTarget as HTMLAnchorElement).style.borderColor = "rgba(255,255,255,0.1)";
                  }}
                >
                  {s.icon}
                </a>
              ))}
            </div>
          </div>

          {/* Link columns */}
          {Object.entries(footerLinks).map(([heading, links]) => (
            <div key={heading}>
              <h3 className="font-serif font-semibold text-sm mb-5" style={{ color: "#C9A84C", letterSpacing: "0.05em" }}>
                {heading}
              </h3>
              <ul className="space-y-3">
                {links.map((link) => (
                  <li key={link.label}>
                    <Link
                      href={link.href}
                      className="text-sm transition-colors duration-150 cursor-pointer hover:text-white"
                      style={{ color: "rgba(255,255,255,0.5)" }}
                    >
                      {link.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>

      {/* Bottom bar */}
      <div style={{ borderTop: "1px solid rgba(255,255,255,0.08)" }}>
        <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-4"
          style={{ color: "rgba(255,255,255,0.35)", fontSize: "12px" }}
        >
          <div>© {year} China-ASEAN Legal Cooperation Center (CALCC). All rights reserved.</div>
          <div className="flex items-center gap-6">
            {["Privacy Policy", "Terms of Use", "Cookie Policy"].map((item) => (
              <Link
                key={item}
                href="#"
                className="hover:text-white transition-colors duration-150 cursor-pointer"
                style={{ color: "rgba(255,255,255,0.35)" }}
              >
                {item}
              </Link>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}