import Image from "next/image";
import { BrandLogo } from "@/components/layout/BrandLogo";

const carriers = [
  { name: "DPD", src: "/images/carriers/dpd.png", width: 30, height: 15 },
  { name: "Evri", src: "/images/carriers/evri.png", width: 30, height: 15 },
];

const paymentMethods = [
  { name: "Visa", src: "/images/payment-methods/visa_card.svg" },
  { name: "Mastercard", src: "/images/payment-methods/master_card.svg" },
  { name: "Discover", src: "/images/payment-methods/discovery_card.svg" },
  { name: "Apple Pay", src: "/images/payment-methods/apple_pay.svg" },
  { name: "Google Pay", src: "/images/payment-methods/google_pay.svg" },
  { name: "Link", src: "/images/payment-methods/link.svg" },
  { name: "Revolut Pay", src: "/images/payment-methods/revoult_pay.svg" },
  { name: "Billie", src: "/images/payment-methods/billie.svg" },
  { name: "Cartes", src: "/images/payment-methods/cartes.svg" },
  { name: "Klarna", src: "/images/payment-methods/klarna.svg" },
];

const linkClasses =
  "text-sm text-[#3d5554] transition-colors hover:text-[#38a99f]";

function FacebookIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
      <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
    </svg>
  );
}

function InstagramIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" />
    </svg>
  );
}

function TwitterIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
      <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>
  );
}

const shopLinks = [
  { label: "Pet Toys", href: "/shop/toys" },
  { label: "Pet Treats", href: "/shop/treats" },
  { label: "Cats Food", href: "/shop/cats/cat-dry-food" },
  { label: "Dogs Food", href: "/shop/dogs/dog-dry-food" },
  { label: "Cat Grooming & Care", href: "/shop/cats/cat-feliway-care" },
  { label: "Dogs Grooming & Care", href: "/shop/dogs/dog-grooming-care" },
];

const specialtyGroups = [
  {
    heading: "Promotions",
    links: [
      { label: "Special Offers", href: "/shop/sale" },
      { label: "Top Picks", href: "/shop/top-picks" },
      { label: "What's New", href: "/shop/recently-added" },
    ],
  },
];

const engagementGroups = [
  {
    heading: "Support",
    links: [
      { label: "Order Tracking", href: "/account/orders" },
      { label: "Shipping", href: "/support/shipping" },
      { label: "Returns & Refunds", href: "/support/returns" },
      { label: "Payment Security", href: "/support/payment-security" },
      { label: "FAQs", href: "/support/faqs" },
    ],
  },
];

const utilityGroups = [
  // {
  //   heading: "Content",
  //   links: [
  //     { label: "Blog", href: "/blog" },
  //     { label: "Tips & Tricks", href: "/tips" },
  //     { label: "Pet Guides", href: "/guides" },
  //   ],
  // },
  {
    heading: "Company",
    links: [
      // { label: "About Us", href: "/about" },
      { label: "Contact Us", href: "/support/contact-us" },
      { label: "General Terms and Conditions", href: "/legal/general-terms-and-conditions" },
    ],
  },
];

function FooterColumn({
  groups,
}: {
  groups: { heading: string; links: { label: string; href: string }[] }[];
}) {
  return (
    <div className="space-y-5">
      {groups.map((group) => (
        <div key={group.heading}>
          <h4 className="mb-2 text-sm font-semibold text-[#236f6b]">
            {group.heading}
          </h4>
          <ul className="space-y-1.5">
            {group.links.map((link) => (
              <li key={link.label}>
                <a href={link.href} className={linkClasses}>
                  {link.label}
                </a>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

export function Footer() {
  return (
    <footer className="mt-auto w-full max-w-full overflow-x-hidden">
      {/* Main footer */}
      <div className="border-t border-[#e8f7f6] bg-white">
        <div className="mx-auto grid min-w-0 max-w-[1400px] grid-cols-1 gap-10 px-4 py-12 sm:grid-cols-2 lg:grid-cols-[240px_1fr_1fr_1fr_1fr] lg:px-6">
          {/* Brand & Social */}
          <div className="space-y-6">
            <div>
              <BrandLogo size={40} />
              <p className="mt-3 text-sm leading-relaxed text-[#3d5554]">
                Your trusted partner for premium pet supplies. Healthy pets,
                happy homes — from nutrition to play, we&apos;ve got it all.
              </p>
            </div>

            <div className="flex items-center gap-3" suppressHydrationWarning>
              <a
                suppressHydrationWarning
                href="https://facebook.com"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Facebook"
                className="flex h-9 w-9 items-center justify-center rounded-full bg-[#f0f8f7] text-[#3d5554] transition-colors hover:bg-[#e8f7f6] hover:text-[#236f6b]"
              >
                <FacebookIcon />
              </a>
              <a
                suppressHydrationWarning
                href="https://instagram.com"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Instagram"
                className="flex h-9 w-9 items-center justify-center rounded-full bg-[#f0f8f7] text-[#3d5554] transition-colors hover:bg-[#e8f7f6] hover:text-[#236f6b]"
              >
                <InstagramIcon />
              </a>
              <a
                suppressHydrationWarning
                href="https://twitter.com"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Twitter / X"
                className="flex h-9 w-9 items-center justify-center rounded-full bg-[#f0f8f7] text-[#3d5554] transition-colors hover:bg-[#e8f7f6] hover:text-[#236f6b]"
              >
                <TwitterIcon />
              </a>
            </div>
          </div>

          {/* Column 1 — Shop */}
          <div>
            <h4 className="mb-3 text-sm font-semibold text-[#236f6b]">Shop</h4>
            <ul className="space-y-1.5">
              {shopLinks.map((link) => (
                <li key={link.label}>
                  <a href={link.href} className={linkClasses}>
                    {link.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Column 2 — Specialty */}
          <FooterColumn groups={specialtyGroups} />

          {/* Column 3 — Engagement */}
          <FooterColumn groups={engagementGroups} />

          {/* Column 4 — Utility */}
          <FooterColumn groups={utilityGroups} />
        </div>

        {/* Carrier partners + Payment methods */}
        <section
          className="border-t border-[#e8f7f6] px-4 py-6 lg:px-6"
          aria-label="Delivery and payment options"
        >
          <div className="mx-auto flex min-w-0 max-w-[1400px] flex-col gap-6 md:flex-row md:items-center md:justify-between">
            {/* Delivery partners — left */}
            <div className="flex flex-col items-center gap-3 sm:flex-row sm:justify-center sm:gap-6 md:justify-start">
              <p className="text-xs font-medium text-[#3d5554]">
                DELIVERY PARTNERS
              </p>
              <div className="flex flex-wrap items-center justify-center gap-6 md:justify-start">
                {carriers.map((carrier) => (
                  <span
                    key={carrier.name}
                    className="flex items-center justify-center rounded px-3 py-2"
                    title={carrier.name}
                  >
                    <Image
                      src={carrier.src}
                      alt={carrier.name}
                      width={carrier.width}
                      height={carrier.height}
                      className="h-5 w-auto object-contain md:h-6"
                    />
                  </span>
                ))}
              </div>
            </div>
            {/* Payment methods — right */}
            <div className="flex flex-col items-center gap-3 sm:flex-row sm:justify-center sm:gap-4 md:justify-end">
              <p className="text-xs font-medium text-[#3d5554]">
                PAYMENT METHODS
              </p>
              <div className="flex flex-wrap items-center justify-center gap-3 md:justify-end">
                {paymentMethods.map((method) => (
                  <span
                    key={method.name}
                    className="flex items-center justify-center px-2 "
                    title={method.name}
                  >
                    <Image
                      src={method.src}
                      alt={method.name}
                      width={30}
                      height={15}
                      className="h-6 w-auto max-w-10 object-contain md:h-7"
                    />
                  </span>
                ))}
              </div>
            </div>
          </div>
        </section>
      </div>

      {/* Copyright bar */}
      <div className="w-full max-w-full bg-[#236f6b]">
        <div className="mx-auto flex min-w-0 max-w-[1400px] flex-wrap items-center justify-between gap-3 px-4 py-4 lg:px-6">
          <p className="text-xs text-white/80">
            &copy; {new Date().getFullYear()} The Pet Loft. All rights reserved.
          </p>
          <div className="flex items-center gap-6">
          <a
              href="/legal/return-and-refund-policy"
              className="text-xs text-white/80 transition-colors hover:text-white"
            >
              Return & Refund Policy
            </a>
            <a
              href="/legal/terms-of-service"
              className="text-xs text-white/80 transition-colors hover:text-white"
            >
              Terms of Service
            </a>
            <a
              href="/legal/privacy-policy"
              className="text-xs text-white/80 transition-colors hover:text-white"
            >
              Privacy Policy
            </a>
            <a
              href="/legal/data-protection"
              className="text-xs text-white/80 transition-colors hover:text-white"
            >
              Data Protection
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}