import Image from "next/image";
import Link from "next/link";
import products from "@/lib/data/products.json";

export default function Footer() {
  // Group products by "types" and collect unique "category" values for each type
  const grouped = products.reduce((acc, product) => {
    const type = product.types || "Other";
    if (!acc[type]) {
      acc[type] = new Set();
    }
    if (product.category) {
      acc[type].add(product.category);
    }
    return acc;
  }, {});

  return (
    <footer className="w-full bg-slate-50 text-sm overflow-x-hidden">
      <div className="mx-auto flex max-w-screen-2xl flex-col gap-20 px-5 py-28 sm:px-8 lg:px-10">
        <div className="flex flex-wrap gap-16 xl:justify-between">
          <div className="flex grow flex-col items-start gap-5 lg:max-w-[320px]">
            <Image src="/assets/img/logo-verola-black.svg" alt="Verola Logo" width={120} height={20} />
            <p>Founded in 2022, Verola® is a manufacturing enterprise focused on creating ergonomically designed, scientifically advanced, and aesthetically pleasing office chairs.</p>
            <div className="mt-2 flex flex-row items-center gap-3">
              <span className="mr-2 font-semibold">Follow us</span>
              <Link href="https://instagram.com/verola.id" passHref={true} target="_blank" aria-label="Instagram">
                <svg xmlns="http://www.w3.org/2000/svg" className="size-5 shrink-0" fill="currentColor" viewBox="0 0 14 14">
                  <path d="M7.003 3.41A3.584 3.584 0 0 0 3.413 7a3.584 3.584 0 0 0 3.59 3.59A3.584 3.584 0 0 0 10.593 7a3.584 3.584 0 0 0-3.59-3.59Zm0 5.924A2.338 2.338 0 0 1 4.67 7a2.336 2.336 0 0 1 2.333-2.334A2.336 2.336 0 0 1 9.337 7a2.338 2.338 0 0 1-2.334 2.334Zm4.574-6.07a.835.835 0 0 1-.838.837.837.837 0 1 1 .837-.837Zm2.377.85c-.053-1.122-.31-2.115-1.13-2.934C12.003.362 11.01.105 9.89.05c-1.156-.066-4.62-.066-5.777 0C2.995.101 2.002.357 1.18 1.176.358 1.995.105 2.989.05 4.11c-.066 1.156-.066 4.62 0 5.777C.101 11.008.357 12 1.18 12.82c.822.818 1.812 1.075 2.933 1.13 1.156.066 4.62.066 5.777 0 1.121-.052 2.115-.308 2.933-1.13.819-.819 1.075-1.812 1.13-2.933.067-1.156.067-4.618 0-5.774Zm-1.493 7.013a2.362 2.362 0 0 1-1.331 1.33c-.922.366-3.108.282-4.127.282-1.018 0-3.208.08-4.127-.282a2.362 2.362 0 0 1-1.33-1.33C1.18 10.205 1.264 8.018 1.264 7c0-1.018-.08-3.208.282-4.127a2.363 2.363 0 0 1 1.33-1.33c.922-.366 3.109-.282 4.127-.282 1.019 0 3.208-.08 4.127.281a2.363 2.363 0 0 1 1.33 1.331c.366.922.282 3.109.282 4.127 0 1.018.084 3.208-.281 4.127Z" />
                </svg>
              </Link>
              <Link href="https://tiktok.com/@verola.id" passHref={true} target="_blank" aria-label="Tiktok">
                <svg xmlns="http://www.w3.org/2000/svg" className="size-5 shrink-0" fill="currentColor" viewBox="0 0 13 14">
                  <path d="M12.251 5.74a5.746 5.746 0 0 1-3.358-1.075v4.89A4.446 4.446 0 1 1 5.06 5.149v2.459a2.04 2.04 0 1 0 1.428 1.947V0h2.406c-.001.204.016.407.052.607A3.342 3.342 0 0 0 10.419 2.8a3.32 3.32 0 0 0 1.832.55v2.39Z" />
                </svg>
              </Link>
            </div>
          </div>

          <div className="flex shrink-0 flex-col gap-4 sm:flex-row lg:order-last xl:flex-col">
            <Link href="https://wa.me/6281298595911" target="_blank" className="box-border flex h-16 w-[200px] flex-row items-center gap-3 rounded-lg bg-green-500 px-4 text-white">
              <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 360 362" className="size-8 shrink-0">
                <path fillRule="evenodd" d="M307.546 52.566C273.709 18.684 228.706.017 180.756 0 81.951 0 1.538 80.404 1.504 179.235c-.017 31.594 8.242 62.432 23.928 89.609L0 361.736l95.024-24.925c26.179 14.285 55.659 21.805 85.655 21.814h.077c98.788 0 179.21-80.413 179.244-179.244.017-47.898-18.608-92.926-52.454-126.807v-.008Zm-126.79 275.788h-.06c-26.73-.008-52.952-7.194-75.831-20.765l-5.44-3.231-56.391 14.791 15.05-54.981-3.542-5.638c-14.912-23.721-22.793-51.139-22.776-79.286.035-82.14 66.867-148.973 149.051-148.973 39.793.017 77.198 15.53 105.328 43.695 28.131 28.157 43.61 65.596 43.593 105.398-.035 82.149-66.867 148.982-148.982 148.982v.008Zm81.719-111.577c-4.478-2.243-26.497-13.073-30.606-14.568-4.108-1.496-7.09-2.243-10.073 2.243-2.982 4.487-11.568 14.577-14.181 17.559-2.613 2.991-5.226 3.361-9.704 1.117-4.477-2.243-18.908-6.97-36.02-22.226-13.313-11.878-22.304-26.54-24.916-31.027-2.613-4.486-.275-6.91 1.959-9.136 2.011-2.011 4.478-5.234 6.721-7.847 2.244-2.613 2.983-4.486 4.478-7.469 1.496-2.991.748-5.603-.369-7.847-1.118-2.243-10.073-24.289-13.812-33.253-3.636-8.732-7.331-7.546-10.073-7.692-2.613-.13-5.595-.155-8.586-.155-2.991 0-7.839 1.118-11.947 5.604-4.108 4.486-15.677 15.324-15.677 37.361s16.047 43.344 18.29 46.335c2.243 2.991 31.585 48.225 76.51 67.632 10.684 4.615 19.029 7.374 25.535 9.437 10.727 3.412 20.49 2.931 28.208 1.779 8.604-1.289 26.498-10.838 30.228-21.298 3.73-10.46 3.73-19.433 2.613-21.298-1.117-1.865-4.108-2.991-8.586-5.234l.008-.017Z" clipRule="evenodd" />
              </svg>
              <div className="flex flex-col">
                <p className="text-xs">Contact Our Sales</p>
                <p className="-mt-[2px] font-semibold">WhatsApp Chat</p>
              </div>
            </Link>

            <Link href="/assets/docs/catalog-verola-2024.pdf" download className="box-border flex h-16 w-[200px] flex-row items-center gap-3 rounded-lg border border-slate-300 px-4 cursor-pointer">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="size-8 shrink-0 text-green-500">
                <path strokeLinecap="round" strokeLinejoin="round" d="M12 9.75v6.75m0 0-3-3m3 3 3-3m-8.25 6a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z" />
              </svg>
              <div className="flex flex-col">
                <p className="text-xs">Download</p>
                <p className="-mt-[2px] font-semibold">Product Catalog</p>
              </div>
            </Link>
          </div>

          {/* Dynamic Footer Menu */}
          <div className="flex flex-wrap gap-12">
            {Object.entries(grouped).map(([type, categories]) => (
              <div key={type} className="flex shrink-0 flex-col gap-2">
                <p className="font-semibold">{type}</p>
                <div className="flex flex-col gap-2">
                  {[...categories].map((category) => (
                    <Link key={category} href={`/products?types=${encodeURIComponent(type)}&category=${encodeURIComponent(category)}`}>
                      {category}
                    </Link>
                  ))}
                </div>
              </div>
            ))}
          </div>
          {/* End Dynamic Footer Menu */}

          <div className="flex shrink-0 flex-col gap-2">
            <p className="font-semibold">Resources</p>
            <div className="flex flex-col gap-2">
              <Link href="/inspirations">Inspirations</Link>
              <Link href="/projects">Projects</Link>
            </div>
          </div>
          <div className="flex shrink-0 flex-col gap-2">
            <p className="font-semibold">Company</p>
            <div className="flex flex-col gap-2">
              <Link href="#">Warranty Care</Link>
            </div>
          </div>
        </div>

        <div className="flex flex-col gap-4 text-xs opacity-60">
          <p className="text-sm font-semibold">Kursi Kantor Ergonomis Berkualitas untuk Kesehatan dan Produktivitas Anda</p>
          <p>
            <strong>Verola®</strong> menghadirkan solusi kursi kantor ergonomis untuk mendukung kenyamanan dan produktivitas Anda sepanjang hari. Dengan desain modern dan fitur yang dapat disesuaikan, kursi kami dirancang untuk menjaga postur tubuh yang sehat, mengurangi kelelahan, dan meningkatkan fokus selama bekerja.
          </p>
          <p>
            Kursi <strong>Verola®</strong> dilengkapi dengan sandaran jaring ergonomis, busa berkualitas tinggi dengan desain sarang lebah elastis, dan bahan ramah lingkungan bebas formaldehida. Selain itu, fitur seperti penyesuaian tinggi kursi, armrest 3D, dan mekanisme penguncian membuat kursi ini sempurna untuk kebutuhan kerja Anda, baik di kantor maupun di rumah.
          </p>
          <p>
            Pesan kursi kantor ergonomis dari <strong>Verola®</strong> dengan mudah melalui situs resmi kami atau marketplace terpercaya. Kami menyediakan pengiriman ke seluruh Indonesia dengan proses yang cepat dan nyaman.
          </p>
        </div>
      </div>
      <div className="mx-auto flex max-w-screen-2xl items-center px-5 text-sm sm:px-8 lg:px-10">
        <div className="flex h-24 w-full flex-row items-center justify-between border-t border-slate-300">
          <span>Copyright © PT. Solusi Andalan Makmur Abadi, 2025.</span>
          <Link href="https://hypercodesolutions.com" passHref={true} target="_blank">
            Made by Hypercode®
          </Link>
        </div>
      </div>
    </footer>
  );
}
