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: "All Products", href: "/shop" },
  { label: "Dog Food", href: "/shop/dogs/dry-food" },
  { label: "Cat Food", href: "/shop/cats/dry-food" },
  { label: "Treats & Snacks", href: "/shop/dogs/treats" },
  { label: "Toys", href: "/shop/dogs/toys" },
  { label: "Beds & Baskets", href: "/shop/dogs/beds-and-baskets" },
  { label: "Grooming & Care", href: "/shop/dogs/grooming-and-care" },
  { label: "Leads & Collars", href: "/shop/dogs/leads-and-collars" },
  { label: "Bowls & Feeders", href: "/shop/dogs/bowls-and-feeders" },
  { label: "Flea & Worming", href: "/shop/dogs/flea-tick-and-worming-treatments" },
  { label: "Clothing", href: "/shop/dogs/clothing" },
];

const specialtyGroups = [
  {
    heading: "Brands",
    links: [
      { label: "Almo Nature", href: "/brands/almo-nature" },
      { label: "Applaws", href: "/brands/applaws" },
      { label: "Arden Grange", href: "/brands/arden-grange" },
      { label: "Shop All", href: "/shop" },
    ],
  },
  {
    heading: "Accessories",
    links: [
      { label: "Crates & Travel", href: "/shop/dogs/crates-and-travel-accessories" },
      { label: "Kennels & Gates", href: "/shop/dogs/kennels-flaps-and-gates" },
      { label: "Trees & Scratching", href: "/shop/cats/trees-and-scratching-posts" },
    ],
  },
];

const engagementGroups = [
  {
    heading: "Community",
    links: [
      { label: "Adopt a Pet", href: "/community/adopt" },
      { label: "Pet Pharmacy", href: "/pharmacy" },
      { label: "Pet Services", href: "/services" },
    ],
  },
  {
    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 utilityGroups = [
  {
    heading: "Content",
    links: [
      { label: "Blog", href: "/blog" },
      { label: "Tips & Tricks", href: "/tips" },
      { label: "Pet Guides", href: "/guides" },
    ],
  },
  {
    heading: "Support",
    links: [
      { label: "Order Tracking", href: "/account/orders" },
      { label: "Shipping Info", href: "/support/shipping" },
      { label: "Returns & Refunds", href: "/support/returns" },
      { label: "FAQs", href: "/support/faqs" },
    ],
  },
  {
    heading: "Company",
    links: [
      { label: "About Us", href: "/about" },
      { label: "Contact Us", href: "/contact" },
      { label: "Careers", href: "/careers" },
    ],
  },
];

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={30}
                textClassName="font-[family-name:var(--font-fraunces)] text-xl font-bold tracking-tight text-[#236f6b]"
              />
              <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>
            <a
              href="/special-offers"
              className="mt-3 inline-block text-sm font-semibold text-[#f2705a] transition-colors hover:text-[#e05a42]"
            >
              Sale
            </a>
          </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="/terms"
              className="text-xs text-white/80 transition-colors hover:text-white"
            >
              Terms of Use
            </a>
            <a
              href="/privacy"
              className="text-xs text-white/80 transition-colors hover:text-white"
            >
              Privacy Policy
            </a>
            <a
              href="/data-protection"
              className="text-xs text-white/80 transition-colors hover:text-white"
            >
              Data Protection
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}