import Image from "next/image";
import { Mail } from "lucide-react";
import { NAV_LINKS, type Contact } from "@/lib/contentTypes";
import BgAnimation from "./BgAnimation";
import Reveal from "./ui/Reveal";
import PillButton from "./ui/PillButton";

/** Panel CTA besar + footer. */
export default function CtaFooter({
  contact,
  slogan,
}: {
  contact: Contact;
  slogan: string;
}) {
  const navLinks = NAV_LINKS;
  return (
    <footer id="kontak" className="mx-auto max-w-6xl px-5 pb-10 md:px-8">
      {/* Panel CTA */}
      <Reveal>
        <div className="fluid-bg glow-border relative overflow-hidden rounded-[2.5rem] px-6 py-20 text-center md:py-28">
          {/* background animasi shader — seperti Portfolite */}
          <BgAnimation intensity={0.8} />
          <div className="pointer-events-none absolute -top-24 left-1/2 size-[28rem] -translate-x-1/2 rounded-full bg-panel-strong blur-[110px]" />
          <div className="relative z-10 mx-auto max-w-2xl">
            <span className="inline-flex items-center gap-2 rounded-full border border-line bg-ink/60 px-4 py-2 font-accent text-xs text-fog backdrop-blur">
              <span className="relative flex size-1.5">
                <span className="absolute inline-flex size-full animate-ping rounded-full bg-fg opacity-60" />
                <span className="relative inline-flex size-1.5 rounded-full bg-fg" />
              </span>
              Tersedia untuk proyek baru
            </span>
            <h2 className="mt-6 text-3xl font-semibold tracking-tight text-fg md:text-5xl">
              Punya ide proyek? Mari wujudkan bersama.
            </h2>
            <p className="mx-auto mt-4 max-w-md text-sm leading-relaxed text-fog md:text-base">
              Ceritakan kebutuhan Anda hari ini — konsultasi pertama gratis,
              tanpa komitmen.
            </p>
            <div className="mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row">
              <PillButton href={`mailto:${contact.email}`}>
                Konsultasi Gratis
              </PillButton>
              <PillButton href={`mailto:${contact.email}`} variant="ghost" withIcon={false}>
                <Mail size={15} />
                {contact.email}
              </PillButton>
            </div>
          </div>
        </div>
      </Reveal>

      {/* Footer */}
      <div className="mt-16 flex flex-col items-center justify-between gap-8 border-t border-line pt-10 md:flex-row">
        <a href="#" className="flex w-fit flex-col items-start gap-1.5">
          <Image
            src="/logo-velo.png"
            alt="Logo Velo Teknologi"
            width={300}
            height={160}
            className="h-10 w-auto shrink-0"
          />
          <span className="font-accent text-[11px] tracking-wide text-mist italic">
            {slogan}
          </span>
        </a>

        <nav className="flex flex-wrap items-center justify-center gap-6">
          {navLinks.map((link) => (
            <a
              key={link.href}
              href={link.href}
              className="font-accent text-xs text-fog transition-colors hover:text-accent"
            >
              {link.label}
            </a>
          ))}
        </nav>

        <div className="flex items-center gap-2.5">
          {[
            { short: "IG", label: "Instagram" },
            { short: "IN", label: "LinkedIn" },
            { short: "GH", label: "GitHub" },
          ].map(({ short, label }) => (
            <a
              key={label}
              href="#"
              aria-label={label}
              className="glow-border grid size-9 place-items-center rounded-full font-accent text-[11px] font-semibold text-fog transition-colors hover:text-accent"
            >
              {short}
            </a>
          ))}
        </div>
      </div>

      <div className="mt-8 flex flex-col items-center justify-between gap-3 pb-4 text-[11px] text-mist md:flex-row">
        <p>Hak cipta dilindungi. ©2025 Velo Teknologi</p>
        <p className="font-accent">Dibangun dengan Next.js & Tailwind CSS</p>
      </div>
    </footer>
  );
}