"use client";

import Link from "next/link";

/**
 * Customer confidence booster: trust badges (Free Shipping, Easy Returns, Secure Checkout).
 * Rendered below product grids on shop pages and homepage. PetPaws theme, mobile-first.
 * Each badge links to its corresponding policy page.
 */
export function TrustAndCredibilitySection() {
  const items: {
    title: string;
    subheading: string;
    href: string;
    icon: React.ReactNode;
  }[] = [
    {
      title: "Free Shipping",
      subheading: "No extra costs (T&C apply)",
      href: "/support/shipping",
      icon: (
        <svg
          className="size-8 shrink-0"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden
        >
          <path d="M5 18H3c-.6 0-1-.4-1-1V7c0-.6.4-1 1-1h10c.6 0 1 .4 1 1v2" />
          <path d="M19 10h2l-1.5 4.5L18 10h2" />
          <path d="M14 10h4" />
          <path d="M2 14h15.5" />
          <circle cx="7" cy="18" r="2" />
          <path d="M9 18h6" />
          <circle cx="17" cy="18" r="2" />
        </svg>
      ),
    },
    {
      title: "Easy Returns",
      subheading: "Return with ease",
      href: "/support/returns",
      icon: (
        <svg
          className="size-8 shrink-0"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden
        >
          <path d="M16 3h5v5" />
          <path d="M8 3H3v5" />
          <path d="M12 22v-8.3a4 4 0 0 0-1.2-2.9L3 7" />
          <path d="m3 7 7.8 7.8a4 4 0 0 1 1.2 2.9V22" />
          <path d="M21 7l-7.8 7.8a4 4 0 0 1-1.2 2.9V12" />
        </svg>
      ),
    },
    {
      title: "Secure Checkout",
      subheading: "Secure payment",
      href: "/support/payment-security",
      icon: (
        <svg
          className="size-8 shrink-0"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden
        >
          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
        </svg>
      ),
    },
  ];

  return (
    <section
      aria-label="Why shop with us"
      className="w-full border border-[#f4a13a] bg-gradient-to-r from-[#e8f7f6] to-[#f0f8f7] px-4 py-6 md:px-6 md:py-8 m-16 max-w-7xl mx-auto rounded-xl"
    >
      <div className="mx-auto grid w-full max-w-4xl grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 md:gap-8">
        {items.map(({ title, subheading, href, icon }) => (
          <Link
            key={title}
            href={href}
            className="flex flex-col items-center gap-3 text-center transition-colors hover:text-[#236f6b] focus:outline-none focus:ring-2 focus:ring-[#38a99f] focus:ring-offset-2 focus:ring-offset-[#e8f7f6] rounded-lg"
          >
            <div
              className="flex size-12 items-center justify-center rounded-full bg-white text-[#236f6b] shadow-sm ring-1 ring-[#d9e8e7] transition-colors"
              aria-hidden
            >
              {icon}
            </div>
            <div className="flex flex-col gap-0.5">
              <span className="block font-[family-name:var(--font-fraunces)] text-base font-semibold text-[#1a2e2d] md:text-lg">
                {title}
              </span>
              <span className="block text-sm text-[#3d5554]">{subheading}</span>
            </div>
          </Link>
        ))}
      </div>
    </section>
  );
}
