"use client";

import React, { useState } from "react";
import Image from "next/image";
import { useLocale, useTranslations } from "next-intl";
import { Globe, MapPin, Phone, Mail } from "lucide-react";
import IntentLink from "@/components/IntentLink";

interface IconProps extends React.SVGProps<SVGSVGElement> {
  size?: number;
}
function InstagramIcon({ size = 16, ...props }: IconProps) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
      <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
    </svg>
  );
}
function LinkedinIcon({ size = 16, ...props }: IconProps) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
      <rect width="4" height="12" x="2" y="9" />
      <circle cx="4" cy="4" r="2" />
    </svg>
  );
}
function FacebookIcon({ size = 16, ...props }: IconProps) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M13.5 21v-8h2.75l.41-3H13.5V8.08c0-.87.24-1.46 1.57-1.46h1.68V3.94c-.29-.04-1.29-.12-2.45-.12-2.42 0-4.08 1.48-4.08 4.2V10H7.5v3h2.72v8h3.28Z" />
    </svg>
  );
}

export default function Footer() {
  const t = useTranslations();
  const locale = useLocale();
  const currentYear = new Date().getFullYear();
  const [logoError, setLogoError] = useState(false);

  const productLinks = [
    { name: t("nav.hobs"), href: "/products?category=hobs" },
  ];
  const companyLinks = [
    { name: t("footer.about"), href: `/${locale}#about` },
    { name: t("footer.certificates"), href: `/${locale}/certificates` },
    { name: t("footer.catalog"), href: `/${locale}/catalog` },
    { name: t("footer.gallery"), href: `/${locale}/gallery` },
  ];

  return (
    <footer
      className="norden-view-reveal pt-20 pb-10"
      style={{ background: "var(--surface-0)", borderTop: "1px solid var(--border)", color: "var(--fg-primary)" }}
    >
      <div className="w-full max-w-7xl mx-auto px-6 md:px-12">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-12 md:gap-8 mb-16">

          {/* Column 1: Brand */}
          <div className="norden-view-reveal norden-view-reveal-left flex flex-col gap-5">
            <IntentLink href={`/${locale}`} className="flex min-h-11 items-center gap-3">
              {!logoError ? (
                <span className="relative flex h-9 w-[150px] items-center">
                  <Image src="/brand/nordenwhite.png" alt="Norden Logo" width={900} height={190} onError={() => setLogoError(true)} className="theme-logo-dark h-auto w-[150px] object-contain" />
                  <Image src="/brand/norden.png" alt="Norden Logo" width={385} height={88} onError={() => setLogoError(true)} className="theme-logo-light h-auto w-[150px] object-contain" />
                </span>
              ) : (
                <span className="font-serif text-2xl font-semibold tracking-wide">Norden</span>
              )}
            </IntentLink>
            <p className="text-xs leading-relaxed max-w-sm" style={{ color: "var(--fg-secondary)" }}>
              {t("footer.description")}
            </p>
            <div className="flex items-center gap-3 mt-1">
              {[
                { href: "https://www.instagram.com/nordenbuiltin/", Icon: InstagramIcon, label: "Norden Instagram" },
                { href: "https://www.linkedin.com/company/nordenhaus", Icon: LinkedinIcon, label: "Norden LinkedIn" },
                { href: "https://www.facebook.com/people/Norden-Haus/61594236441752/", Icon: FacebookIcon, label: "Norden Facebook" },
              ].map(({ href, Icon, label }) => (
                <a
                  key={label}
                  href={href}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label={label}
                  className="flex h-11 w-11 items-center justify-center rounded-full transition-all duration-300"
                  style={{ border: "1px solid var(--border)", color: "var(--fg-muted)" }}
                  onMouseEnter={(e) => { e.currentTarget.style.color = "var(--ember)"; e.currentTarget.style.borderColor = "var(--ember)"; }}
                  onMouseLeave={(e) => { e.currentTarget.style.color = "var(--fg-muted)"; e.currentTarget.style.borderColor = "var(--border)"; }}
                >
                  <Icon size={13} />
                </a>
              ))}
            </div>
          </div>

          {/* Column 2: Products */}
          <div className="norden-view-reveal">
            <h3 className="text-xs font-semibold uppercase tracking-widest mb-6" style={{ color: "var(--fg-muted)" }}>
              {t("footer.products")}
            </h3>
            <ul className="flex flex-col gap-3.5">
              {productLinks.map((item) => (
                <li key={item.name}>
                  <IntentLink
                    href={`/${locale}${item.href}`}
                    className="inline-flex min-h-11 items-center text-xs transition-colors duration-200"
                    style={{ color: "var(--fg-secondary)" }}
                    onMouseEnter={(e) => (e.currentTarget.style.color = "var(--ember)")}
                    onMouseLeave={(e) => (e.currentTarget.style.color = "var(--fg-secondary)")}
                  >
                    {item.name}
                  </IntentLink>
                </li>
              ))}
            </ul>
          </div>

          {/* Column 3: Company */}
          <div className="norden-view-reveal">
            <h3 className="text-xs font-semibold uppercase tracking-widest mb-6" style={{ color: "var(--fg-muted)" }}>
              {t("footer.company")}
            </h3>
            <ul className="flex flex-col gap-3.5">
              {companyLinks.map((item) => (
                <li key={item.name}>
                  <IntentLink
                    href={item.href}
                    className="inline-flex min-h-11 min-w-11 items-center text-xs transition-colors duration-200"
                    style={{ color: "var(--fg-secondary)" }}
                    onMouseEnter={(e) => (e.currentTarget.style.color = "var(--ember)")}
                    onMouseLeave={(e) => (e.currentTarget.style.color = "var(--fg-secondary)")}
                  >
                    {item.name}
                  </IntentLink>
                </li>
              ))}
            </ul>
          </div>

          {/* Column 4: Contact */}
          <div className="norden-view-reveal norden-view-reveal-right">
            <h3 className="text-xs font-semibold uppercase tracking-widest mb-6" style={{ color: "var(--fg-muted)" }}>
              {t("contact.eyebrow")}
            </h3>
            <ul className="flex flex-col gap-4 text-xs leading-relaxed" style={{ color: "var(--fg-secondary)" }}>
              <li className="flex gap-3">
                <MapPin size={14} className="flex-shrink-0 mt-0.5" style={{ color: "var(--ember)" }} />
                <span>{t("contact.address_value")}</span>
              </li>
              <li className="flex min-h-11 items-center gap-3">
                <Phone size={14} className="flex-shrink-0" style={{ color: "var(--ember)" }} />
                <a href="tel:+905394671328" className="inline-flex min-h-11 items-center hover:underline">+90 539 467 13 28</a>
              </li>
              <li className="flex min-h-11 items-center gap-3">
                <Mail size={14} className="flex-shrink-0" style={{ color: "var(--ember)" }} />
                <a href="mailto:info@norden-haus.com" className="inline-flex min-h-11 items-center hover:underline">info@norden-haus.com</a>
              </li>
              <li className="flex min-h-11 items-center gap-3">
                <Globe size={14} className="flex-shrink-0" style={{ color: "var(--ember)" }} />
                <a href="https://www.norden-haus.com" target="_blank" rel="noopener noreferrer" className="inline-flex min-h-11 items-center hover:underline">www.norden-haus.com</a>
              </li>
            </ul>
          </div>
        </div>

        {/* Bottom bar */}
        <div
          className="pt-8 flex flex-col sm:flex-row items-center justify-between gap-4"
          style={{ borderTop: "1px solid var(--border)", color: "var(--fg-muted)", fontSize: "10px", fontFamily: "var(--font-ibm-plex-mono)", letterSpacing: "0.1em" }}
        >
          <div>© {currentYear} NORDEN. {t("footer.rights").toUpperCase()}</div>
          <div className="flex items-center gap-2">
            <Globe size={11} style={{ color: "var(--ember)" }} />
            <span>MADE IN TURKEY</span>
          </div>
        </div>
      </div>
    </footer>
  );
}