import Link from "next/link";
import Image from "next/image";
import type { Locale, SiteSettings } from "@/types/content";
import { localizedPath } from "@/lib/routing";
import { FooterSubscribe } from "@/components/layout/FooterSubscribe";

function InstagramIcon() {
  return (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" aria-hidden="true">
      <rect x="3" y="3" width="18" height="18" rx="5" stroke="currentColor" strokeWidth="1.7" />
      <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.7" />
      <circle cx="17.5" cy="6.5" r="1.2" fill="currentColor" />
    </svg>
  );
}

function WhatsAppIcon() {
  return (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true">
      <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.86.49 3.68 1.42 5.28L2 22l4.94-1.52a9.9 9.9 0 0 0 5.1 1.39h.01c5.46 0 9.9-4.45 9.9-9.91C21.95 6.45 17.5 2 12.04 2Zm0 18.13h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-2.93.9.9-2.86-.2-.3a8.2 8.2 0 0 1-1.26-4.4c0-4.54 3.7-8.23 8.24-8.23 2.2 0 4.27.86 5.83 2.42a8.2 8.2 0 0 1 2.41 5.82c0 4.54-3.7 8.23-8.24 8.23Zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.78.97-.15.16-.29.18-.54.06-.25-.13-1.05-.39-1.99-1.23-.74-.66-1.24-1.47-1.38-1.72-.15-.25-.02-.38.11-.5.11-.11.25-.29.37-.43.13-.15.17-.25.25-.42.09-.16.04-.31-.02-.43-.06-.12-.56-1.35-.77-1.85-.2-.48-.4-.42-.56-.42l-.48-.01c-.16 0-.43.06-.66.31-.23.24-.86.85-.86 2.07 0 1.22.89 2.4 1.01 2.57.13.16 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.11-.22-.17-.47-.29Z" />
    </svg>
  );
}

function MailIcon() {
  return (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" aria-hidden="true">
      <rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" strokeWidth="1.7" />
      <path d="m4 7 8 6 8-6" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export function Footer({ locale, settings }: { locale: Locale; settings: SiteSettings }) {
  const isId = locale === "id";
  const labels = {
    company: isId ? "Perusahaan" : "Company",
    explore: isId ? "Jelajahi" : "Explore",
    contact: isId ? "Hubungi Kami" : "Contact Us",
    follow: isId ? "Ikuti kami" : "Follow us",
    privacy: isId ? "Kebijakan Privasi" : "Privacy Policy",
    copyright: isId
      ? "© 2026 Akarya. Seluruh hak cipta dilindungi."
      : "© 2026 Akarya. All rights reserved."
  };

  const companyLinks = [
    { href: "/about", label: isId ? "Tentang" : "About" },
    { href: "/success-stories", label: "Success Stories" },
    { href: "/insights", label: "Insight" },
    { href: "/talk-to-akarya", label: isId ? "Hubungi Kami" : "Contact Us" }
  ];
  const exploreLinks = [
    { href: "/solutions", label: isId ? "Solusi" : "Solutions" },
    { href: "/products", label: isId ? "Produk" : "Product" },
    { href: "/room-designer", label: "Room Designer" }
  ];

  const waNumber = (settings.whatsappNumber || "").replace(/[^\d]/g, "");
  const igHandle = settings.socialHandle.replace("@", "");

  return (
    <footer className="footer">
      <div className="container footer-inner">
        <div className="footer-top">
          <div className="footer-brand-col">
            <Link prefetch={false} href={localizedPath("/", locale)} className="footer-brand">
              <Image
                src="/logos/akarya/akarya-logo-full-white-blue.png"
                alt={settings.siteName}
                width={190}
                height={58}
              />
            </Link>
            <strong className="footer-company">PT Akarya Solusi Kreatif</strong>
            <p className="footer-tagline">{settings.siteDescription[locale]}</p>
          </div>

          <nav className="footer-col" aria-label={labels.company}>
            <h2>{labels.company}</h2>
            {companyLinks.map((item) => (
              <Link key={item.href} prefetch={false} href={localizedPath(item.href, locale)}>
                {item.label}
              </Link>
            ))}
          </nav>

          <nav className="footer-col" aria-label={labels.explore}>
            <h2>{labels.explore}</h2>
            {exploreLinks.map((item) => (
              <Link key={item.href} prefetch={false} href={localizedPath(item.href, locale)}>
                {item.label}
              </Link>
            ))}
          </nav>

          <div className="footer-col footer-contact-col">
            <h2>{labels.contact}</h2>
            <div className="footer-contact-list">
              <a href={`mailto:${settings.contactEmail}`}>{settings.contactEmail}</a>
              <a href={`tel:${settings.phoneNumber}`}>{settings.phoneNumber}</a>
            </div>
            <FooterSubscribe locale={locale} contactEmail={settings.contactEmail} />
          </div>
        </div>

        <div className="footer-mid">
          <div className="footer-offices">
            <div className="footer-office">
              <h3>Head Office</h3>
              <p>{settings.headOfficeAddress}</p>
            </div>
            <div className="footer-office">
              <h3>Akarya Studio</h3>
              <p>{settings.studioAddress}</p>
            </div>
          </div>
          <div className="footer-social">
            <span>{labels.follow}</span>
            <div className="footer-social-links">
              <a
                href={`https://www.instagram.com/${igHandle}`}
                target="_blank"
                rel="noopener noreferrer"
                aria-label={`Instagram ${settings.socialHandle}`}
              >
                <InstagramIcon />
              </a>
              {waNumber ? (
                <a
                  href={`https://wa.me/${waNumber}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="WhatsApp"
                >
                  <WhatsAppIcon />
                </a>
              ) : null}
              <a href={`mailto:${settings.contactEmail}`} aria-label={settings.contactEmail}>
                <MailIcon />
              </a>
            </div>
          </div>
        </div>

        <div className="footer-bottom">
          <p>{labels.copyright}</p>
          <Link prefetch={false} href={localizedPath("/privacy-policy", locale)}>
            {labels.privacy}
          </Link>
        </div>
      </div>
    </footer>
  );
}
