Footer 1

"use client";

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

import { Icons } from "@/components/icons";
import { Button } from "@/components/ui/button";

const footerLinks = {
  antik1: {
    links: [
      { href: "#", label: "About us" },
      { href: "#", label: "Certifications" },
      { href: "#", label: "Help Center" },
    ],
    title: "Others",
  },
  antik2: {
    links: [
      { href: "#", label: "About us" },
      { href: "#", label: "Certifications" },
      { href: "#", label: "Help Center" },
    ],
    title: "Pages",
  },
  browse: {
    links: [
      { href: "#", label: "Artifacts" },
      { href: "#", label: "3D Gallery" },
    ],
    title: "Browse",
  },
};

export default function FooterVariant1() {
  return (
    <footer className="relative w-full overflow-hidden bg-gray-50 pt-16 pb-8">
      <div className="mx-auto max-w-5xl px-4 pb-52 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 gap-12 lg:grid-cols-12">
          <div className="lg:col-span-4">
            <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-sm font-onest text-gray-600 text-sm leading-relaxed">
              Browse our handpicked collection of unique artifacts and
              handcrafted pieces.
            </p>

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

          <div className="grid grid-cols-2 gap-8 sm:grid-cols-3 lg:col-span-7">
            {Object.entries(footerLinks).map(([key, section]) => (
              <div key={key}>
                <h4 className="font-medium font-onest text-base 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>

        <div className="mt-16 flex flex-col items-center justify-between gap-4 border-gray-200 border-t pt-8 sm:flex-row">
          <p className="font-onest text-gray-500 text-xs">
            ©2025 CNIPPET. All Rights Reserved.
          </p>
          <p className="font-onest text-gray-500 text-xs">
            All artifacts are certified by{" "}
            <Link
              className="font-medium text-blue-600 hover:underline"
              href="#"
            >
              ARC
            </Link>{" "}
            (Artifacts Registry & Certification).
          </p>
        </div>
      </div>

      <div className="pointer-events-none absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/3">
        <span className="font-bold font-onest text-[180px] text-gray-200/50 tracking-widest sm:text-[240px] lg:text-[200px]">
          CNIPPET
        </span>
      </div>
    </footer>
  );
}