"use client";

import { BookOpen, Instagram, Youtube } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { Icons } from "@/components/icons";
import { Button } from "@/components/ui/button";
import { Marquee } from "@/components/ui/marquee";

const artifactImages = [
  "https://res.cloudinary.com/dcxm3ccir/image/upload/v1741613286/h1.jpg",
  "https://res.cloudinary.com/dcxm3ccir/image/upload/v1741613286/h4.jpg",
  "https://res.cloudinary.com/dcxm3ccir/image/upload/v1741613286/h6.jpg",
  "https://res.cloudinary.com/dcxm3ccir/image/upload/v1741613286/h10.jpg",
  "https://res.cloudinary.com/dcxm3ccir/image/upload/v1741613286/h1.jpg",
  "https://res.cloudinary.com/dcxm3ccir/image/upload/v1741613286/h4.jpg",
  "https://res.cloudinary.com/dcxm3ccir/image/upload/v1741613286/h6.jpg",
];

const footerLinks = {
  antik: {
    links: [
      { href: "#", label: "About us" },
      { href: "#", label: "Certifications" },
      { href: "#", label: "Help Center" },
    ],
    title: "Cnippet",
  },
  browse: {
    links: [
      { href: "#", label: "Artifacts" },
      { href: "#", label: "3D Gallery" },
      { href: "#", label: "Collection" },
    ],
    title: "Browse",
  },
  collection: {
    links: [
      { href: "#", label: "Babylon" },
      { href: "#", label: "Mesopotamian" },
      { href: "#", label: "Greek" },
    ],
    title: "Collection",
  },
};

const socialLinks = [
  { href: "#", icon: Instagram, label: "Instagram" },
  { href: "#", icon: BookOpen, label: "Substack" },
  { href: "#", icon: Youtube, label: "YouTube" },
];

export default function FooterVariant2() {
  return (
    <footer className="relative w-full overflow-hidden bg-white pt-12 pb-8">
      <div className="mx-auto max-w-2xl px-4 sm:px-6 lg:px-8">
        <div className="flex items-center gap-3">
          <Image
            alt=""
            className="size-18"
            height={600}
            src="https://res.cloudinary.com/dcxm3ccir/image/upload/v1753948225/logo-light.png"
            width={600}
          />
          <div>
            <h3 className="font-onest font-semibold text-gray-900 text-xl">
              Cnippet
            </h3>
            <p className="font-onest text-gray-600 text-sm">
              Curation of 100+ ancient artifacts collection
            </p>
          </div>
        </div>

        <p className="mt-6 max-w-full font-onest text-base text-gray-600 leading-relaxed">
          Uncover and explore each relic's hidden story with detailed origins,
          uses, and cultural context with Antik.
        </p>

        <div className="relative -mx-4 mt-8 sm:-mx-6 lg:-mx-8">
          <div className="absolute left-0 z-40 h-full w-20 bg-linear-to-r from-white" />
          <div className="absolute right-0 z-40 h-full w-20 bg-linear-to-l from-white" />

          <Marquee className="py-4 [--duration:30s]" pauseOnHover>
            {artifactImages.map((src, index) => {
              const k = `img_sno_${index}`;
              return (
                <div
                  className="relative size-20 overflow-hidden rounded-full border-4 border-white shadow-sm"
                  key={k}
                >
                  <Image
                    alt={`Artifact ${index + 1}`}
                    className="object-cover"
                    fill
                    src={src}
                  />
                </div>
              );
            })}
          </Marquee>
        </div>

        <div className="mt-12 grid grid-cols-1 gap-12 lg:grid-cols-6">
          <div className="grid grid-cols-3 gap-8 lg:col-span-6">
            {Object.entries(footerLinks).map(([key, section]) => (
              <div key={key}>
                <h4 className="font-medium font-onest text-gray-900">
                  {section.title}
                </h4>
                <ul className="mt-4 flex flex-col gap-3">
                  {section.links.map((link) => (
                    <li key={link.label}>
                      <Link
                        className="font-onest text-gray-600 text-sm transition-colors hover:text-blue-600"
                        href={link.href}
                      >
                        {link.label}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>

          <div className="lg:col-span-6">
            <div className="grid grid-cols-1 gap-8 sm:grid-cols-2">
              <div>
                <h4 className="font-medium font-onest text-gray-900 text-sm">
                  Follow us
                </h4>
                <ul className="mt-4 flex flex-col gap-3">
                  {socialLinks.map((link) => (
                    <li key={link.label}>
                      <Link
                        className="flex items-center gap-2 font-onest text-gray-600 text-sm transition-colors hover:text-blue-600"
                        href={link.href}
                      >
                        <link.icon className="size-4" />
                        <span className="underline">{link.label}</span>
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>

              <div className="relative aspect-32 overflow-hidden rounded-2xl">
                <Image
                  alt="Featured artifact"
                  className="object-cover"
                  fill
                  src="https://res.cloudinary.com/dcxm3ccir/image/upload/v1741613286/h1.jpg"
                />
              </div>
            </div>
          </div>
        </div>

        <div className="mt-12 flex flex-col items-center justify-between gap-4 border-gray-200 border-t py-6 sm:flex-row">
          <div className="flex flex-wrap items-center gap-4">
            <Link
              className="font-onest text-gray-600 text-xs underline transition-colors hover:text-gray-900"
              href="#"
            >
              Cookies Settings
            </Link>
            <Link
              className="font-onest text-gray-600 text-xs underline transition-colors hover:text-gray-900"
              href="#"
            >
              Terms of Services
            </Link>
            <Link
              className="font-onest text-gray-600 text-xs underline transition-colors hover:text-gray-900"
              href="#"
            >
              Privacy Policy
            </Link>
          </div>

          <Button className="flex items-center justify-center gap-0 border-none bg-transparent text-black shadow-none hover:bg-transparent">
            <span className="rounded-full border p-2.5 dark:border-neutral-200">
              <Icons.emailSparkle className="size-4" />
            </span>
            <span className="rounded-full border px-2 py-2 dark:border-neutral-200">
              support@cnippet.dev
            </span>
          </Button>
        </div>

        <div className="border-gray-200 border-t py-4">
          <p className="font-onest text-gray-500 text-sm">
            ©2025 CNIPPET. All Rights Reserved.
          </p>
        </div>
      </div>
    </footer>
  );
}