import Link from "next/link";

import { NotFoundTracker } from "@/components/public/seo/NotFoundTracker";

const QUICK_LINKS = [
  {
    title: "Kompanije",
    desc: "Pretraži lokalne i nacionalne kompanije po kategoriji ili gradu.",
    href: "/kompanije",
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 21h18M5 21V7l8-4 8 4v14M9 9h.01M9 13h.01M9 17h.01M15 9h.01M15 13h.01M15 17h.01" />
      </svg>
    ),
  },
  {
    title: "Mesta",
    desc: "Restorani, kafići, fitness, butici i druga mesta u Srbiji.",
    href: "/mesta",
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" /><circle cx="12" cy="10" r="3" />
      </svg>
    ),
  },
  {
    title: "Nekretnine",
    desc: "Stanovi i kuće na prodaju i izdavanje širom Srbije.",
    href: "/nekretnine",
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /><polyline points="9 22 9 12 15 12 15 22" />
      </svg>
    ),
  },
  {
    title: "Automobili",
    desc: "Polovni i novi automobili od proverenih oglašivača.",
    href: "/automobili",
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="5" cy="17" r="2" /><circle cx="19" cy="17" r="2" /><path d="M3 17h2m12 0h4M5 17v-5a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v5" />
      </svg>
    ),
  },
  {
    title: "Događaji",
    desc: "Koncerti, festivali, sajmovi i sva dešavanja u Srbiji.",
    href: "/dogadjaji",
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
        <rect x="3" y="4" width="18" height="18" rx="2" ry="2" /><line x1="16" y1="2" x2="16" y2="6" /><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" />
      </svg>
    ),
  },
  {
    title: "Poslovi",
    desc: "Otvorene pozicije u kompanijama i remote prilike.",
    href: "/poslovi",
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
        <rect x="2" y="7" width="20" height="14" rx="2" ry="2" /><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
      </svg>
    ),
  },
];

export default function NotFound() {
  return (
    <main className="min-h-screen bg-[#faf9f7]">
      <NotFoundTracker />
      {/* Hero */}
      <section className="relative overflow-hidden bg-[#0c1828]">
        <div
          aria-hidden="true"
          className="pointer-events-none absolute -right-32 -top-32 h-[480px] w-[480px] rounded-full blur-3xl"
          style={{ background: "rgba(194,65,12,0.12)" }}
        />
        <div
          aria-hidden="true"
          className="pointer-events-none absolute bottom-0 left-1/4 h-[300px] w-[300px] rounded-full blur-2xl"
          style={{ background: "rgba(136,191,214,0.06)" }}
        />

        <div className="site-full relative px-4 py-20 sm:px-6 sm:py-28 lg:px-8">
          <div className="mx-auto max-w-3xl text-center">
            {/* Big 404 mark */}
            <div className="relative inline-block">
              <p
                className="font-display text-[clamp(7rem,18vw,14rem)] font-black leading-none tracking-[-0.06em]"
                style={{
                  background:
                    "linear-gradient(180deg, rgba(194,65,12,0.95) 0%, rgba(194,65,12,0.20) 100%)",
                  WebkitBackgroundClip: "text",
                  WebkitTextFillColor: "transparent",
                }}
              >
                404
              </p>
              <span
                aria-hidden="true"
                className="pointer-events-none absolute inset-0 -z-10 blur-[80px]"
                style={{ background: "rgba(194,65,12,0.30)" }}
              />
            </div>

            <div
              className="mx-auto mt-2 inline-flex items-center gap-2.5 rounded-full px-4 py-2 text-[0.72rem] font-extrabold uppercase tracking-[0.20em]"
              style={{
                border: "1px solid rgba(194,65,12,0.35)",
                background: "rgba(194,65,12,0.12)",
                color: "#c2410c",
              }}
            >
              <span className="h-1.5 w-1.5 rounded-full bg-[#c2410c] shadow-[0_0_8px_rgba(194,65,12,0.7)]" />
              Stranica nije pronađena
            </div>

            <h1 className="mt-6 font-display text-[clamp(1.8rem,4vw,2.8rem)] font-bold leading-[1.1] tracking-[-0.025em] text-white">
              Izgleda da ova stranica<br />
              <span style={{ color: "rgba(255,255,255,0.45)" }}>više ne postoji.</span>
            </h1>

            <p
              className="mx-auto mt-5 max-w-xl text-[0.97rem] font-medium leading-[1.85]"
              style={{ color: "rgba(255,255,255,0.55)" }}
            >
              Možda je profil obrisan, link istekao, ili je u međuvremenu promenjen URL.
              Pokušajte sa pretragom ili se vratite na početnu.
            </p>

            <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
              <Link
                href="/"
                className="inline-flex items-center gap-2 rounded-full bg-[#c2410c] px-6 py-3 text-sm font-bold text-white transition hover:bg-[#d94e22] active:scale-[0.97]"
              >
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 0 0 1 1h3m10-11l2 2m-2-2v10a1 1 0 0 1-1 1h-3m-6 0a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1m-6 0h6" />
                </svg>
                Nazad na početnu
              </Link>
              <Link
                href="/kontakt"
                className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-6 py-3 text-sm font-bold text-white transition hover:border-white/30 hover:bg-white/10"
              >
                Prijavi prekinut link
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Quick links */}
      <section className="site-full px-4 py-14 sm:px-6 sm:py-20 lg:px-8">
        <div className="mx-auto max-w-5xl">
          <div className="text-center">
            <p className="text-[0.72rem] font-extrabold uppercase tracking-[0.22em] text-[#c2410c]">
              Možda tražite
            </p>
            <h2 className="mt-3 font-display text-[1.6rem] font-bold leading-[1.14] tracking-[-0.025em] text-[#0c1828]">
              Pretraži po kategoriji.
            </h2>
          </div>

          <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {QUICK_LINKS.map((link) => (
              <Link
                key={link.href}
                href={link.href}
                className="group relative overflow-hidden rounded-[1.5rem] bg-white p-5 transition hover:-translate-y-0.5 hover:shadow-[0_12px_32px_rgba(12,24,40,0.06)]"
                style={{ border: "1px solid #ede8e3" }}
              >
                <div
                  className="absolute inset-x-0 top-0 h-[3px] rounded-t-[1.5rem] opacity-0 transition group-hover:opacity-100"
                  style={{ background: "linear-gradient(90deg,#c2410c,#ff8c5a)" }}
                />
                <div
                  className="mb-3 flex h-11 w-11 items-center justify-center rounded-xl"
                  style={{ background: "rgba(194,65,12,0.08)", color: "#c2410c" }}
                >
                  {link.icon}
                </div>
                <p className="font-bold text-[#0c1828]">{link.title}</p>
                <p className="mt-1.5 text-[0.85rem] leading-[1.7] text-[#6b7280]">{link.desc}</p>
                <span
                  className="mt-3 inline-flex items-center gap-1 text-xs font-bold text-[#c2410c] opacity-0 transition group-hover:opacity-100"
                >
                  Otvori
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="9 18 15 12 9 6" />
                  </svg>
                </span>
              </Link>
            ))}
          </div>

          {/* Help */}
          <div
            className="mt-12 rounded-[1.5rem] p-6 sm:p-8"
            style={{ border: "1px solid #ede8e3", background: "#faf8f6" }}
          >
            <div className="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
              <div>
                <p className="text-[0.72rem] font-extrabold uppercase tracking-[0.22em] text-[#c2410c]">
                  Treba vam pomoć?
                </p>
                <h3 className="mt-2 font-display text-[1.25rem] font-bold leading-[1.2] tracking-[-0.02em] text-[#0c1828]">
                  Naš tim odgovara u roku od 24h.
                </h3>
                <p className="mt-1.5 text-sm text-[#6b7280]">
                  Pišite nam ako mislite da je ovo greška, ili ako tražite određeni profil.
                </p>
              </div>
              <Link
                href="/kontakt"
                className="inline-flex items-center gap-2 rounded-full border border-[#0c1828] bg-[#0c1828] px-5 py-3 text-sm font-bold text-white transition hover:bg-[#1a2840]"
              >
                Kontaktirajte podršku
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                  <line x1="7" y1="17" x2="17" y2="7" />
                  <polyline points="7 7 17 7 17 17" />
                </svg>
              </Link>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}