import Image from "next/image";
import Link from "next/link";

const footerSections = [
  {
    title: "Company Info",
    links: ["About Us", "Open Store", "Help & Support", "Blog"],
  },
  {
    title: "Legal",
    links: ["About Us", "Carrier", "We are hiring", "Blog"],
  },
  {
    title: "Features",
    links: ["Business Marketing", "User Analytic", "Live Chat", "Unlimited Support"],
  },
  {
    title: "Resources",
    links: ["IOS & Android", "Watch a Demo", "Customers", "API"],
  },
];

function FacebookIcon() {
  return (
    <svg viewBox="0 0 24 24" className="h-5 w-5" aria-hidden="true">
      <path
        fill="currentColor"
        d="M22 12.06C22 6.49 17.52 2 12 2S2 6.49 2 12.06c0 5.02 3.66 9.18 8.44 9.94v-7.03H7.9v-2.91h2.54V9.84c0-2.52 1.49-3.91 3.77-3.91 1.09 0 2.23.2 2.23.2v2.47h-1.26c-1.24 0-1.63.78-1.63 1.57v1.89h2.78l-.44 2.91h-2.34V22c4.78-.76 8.44-4.92 8.44-9.94Z"
      />
    </svg>
  );
}

function InstagramIcon() {
  return (
    <svg viewBox="0 0 24 24" className="h-5 w-5" aria-hidden="true">
      <path
        fill="currentColor"
        d="M7.75 2h8.5A5.76 5.76 0 0 1 22 7.75v8.5A5.76 5.76 0 0 1 16.25 22h-8.5A5.76 5.76 0 0 1 2 16.25v-8.5A5.76 5.76 0 0 1 7.75 2Zm0 2A3.75 3.75 0 0 0 4 7.75v8.5A3.75 3.75 0 0 0 7.75 20h8.5A3.75 3.75 0 0 0 20 16.25v-8.5A3.75 3.75 0 0 0 16.25 4h-8.5Zm8.75 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5ZM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z"
      />
    </svg>
  );
}

function TwitterIcon() {
  return (
    <svg viewBox="0 0 24 24" className="h-5 w-5" aria-hidden="true">
      <path
        fill="currentColor"
        d="M22 5.92c-.73.32-1.51.54-2.33.64a4.08 4.08 0 0 0 1.79-2.25 8.2 8.2 0 0 1-2.58.99A4.06 4.06 0 0 0 11.96 9c0 .32.04.64.11.94A11.52 11.52 0 0 1 3.7 5.69a4.05 4.05 0 0 0 1.26 5.42 4 4 0 0 1-1.84-.51v.05a4.06 4.06 0 0 0 3.26 3.98c-.34.09-.7.14-1.07.14-.26 0-.52-.03-.77-.08a4.07 4.07 0 0 0 3.79 2.82A8.14 8.14 0 0 1 2 19.29 11.48 11.48 0 0 0 8.23 21c7.48 0 11.57-6.2 11.57-11.58v-.53A8.28 8.28 0 0 0 22 5.92Z"
      />
    </svg>
  );
}

export default function Footer() {
  return (
    <footer className="bg-[#f7f7f8] px-4 py-8 text-[#1f2937] sm:px-6 lg:px-8">
      <div className="mx-auto grid max-w-[1160px] grid-cols-1 gap-8 min-[420px]:grid-cols-2 lg:grid-cols-[1.4fr_repeat(5,1fr)]">
        <div>
          <Image
            src="/images/Diriya-logo.png"
            alt="Diriya"
            width={120}
            height={48}
            className="h-auto w-[112px] sm:w-[120px]"
            priority
          />
        </div>

        {footerSections.map((section) => (
          <div key={section.title} className="space-y-3">
            <h2 className="text-sm font-semibold text-[#111827]">{section.title}</h2>
            <ul className="space-y-2">
              {section.links.map((link) => (
                <li key={link}>
                  <Link href="#" className="text-xs text-gray-500 transition-colors hover:text-[#00AFC1]">
                    {link}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        ))}

        <div className="space-y-3">
          <h2 className="text-sm font-semibold text-[#111827]">Get In Touch</h2>
          <div className="flex items-center gap-3 text-[#00AFC1]">
            <Link href="#" aria-label="Facebook" className="transition-opacity hover:opacity-75">
              <FacebookIcon />
            </Link>
            <Link href="#" aria-label="Instagram" className="transition-opacity hover:opacity-75">
              <InstagramIcon />
            </Link>
            <Link href="#" aria-label="Twitter" className="transition-opacity hover:opacity-75">
              <TwitterIcon />
            </Link>
          </div>
          <div className="space-y-2 text-xs text-gray-500">
            <p>(+94) 71555-0129</p>
            <p>info@diriyardb.com</p>
          </div>
        </div>
      </div>
    </footer>
  );
}
