"use client";

import Link from "next/link";
import Image from "next/image";
import { motion } from "framer-motion";
import {
  Home,
  Wrench,
  FolderKanban,
  Phone,
  ArrowRight,
  AlertTriangle,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { useTranslations } from "next-intl";

const quickLinks = [
  { labelKey: "home", href: "/", icon: Home },
  { labelKey: "services", href: "/services", icon: Wrench },
  { labelKey: "projects", href: "/projects", icon: FolderKanban },
  { labelKey: "contact", href: "/contact", icon: Phone },
];

export default function NotFound() {
  const t = useTranslations("notFound");
  const tNav = useTranslations("nav");
  return (
    <div className="flex flex-col min-h-screen bg-background text-foreground">
  

      <main className="flex-1 flex flex-col items-center justify-center px-6 relative overflow-hidden">
        {/* Background decoration */}
        <div className="absolute inset-0 pointer-events-none select-none overflow-hidden">
          <div className="absolute -top-32 -left-32 w-[500px] h-[500px] rounded-full border border-accent/10" />
          <div className="absolute -top-16 -left-16 w-[350px] h-[350px] rounded-full border border-accent/10" />
          <div className="absolute -bottom-32 -right-32 w-[500px] h-[500px] rounded-full border border-accent/10" />
          <div className="absolute -bottom-16 -right-16 w-[350px] h-[350px] rounded-full border border-accent/10" />
        </div>

        <div className="relative z-10 flex flex-col items-center text-center max-w-2xl">
          {/* Logo */}
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="mb-10"
          >
            <Image
              src="/logo.png"
              alt="Petro-Base Group"
              width={160}
              height={160}
              className="object-contain opacity-80"
            />
          </motion.div>

          {/* 404 number */}
          <motion.div
            initial={{ opacity: 0, scale: 0.85 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.5, delay: 0.1 }}
            className="relative mb-6 select-none"
          >
            <span className="text-[10rem] leading-none font-black text-primary/5 absolute inset-0 flex items-center justify-center pointer-events-none">
              404
            </span>
            <div className="relative flex items-center gap-4 px-6 py-3 bg-accent/10 border border-accent/20 rounded-sm">
              <AlertTriangle className="h-5 w-5 text-accent shrink-0" />
              <span className="text-sm font-bold uppercase tracking-[0.2em] text-accent">
                {t("title")}
              </span>
            </div>
          </motion.div>

          {/* Heading */}
          <motion.h1
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="text-3xl md:text-4xl font-bold text-foreground tracking-tight mb-4"
          >
            {t("message")}
          </motion.h1>

          {/* Subtext */}
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.3 }}
            className="text-muted-foreground text-base leading-relaxed mb-10 max-w-md"
          >
            {t("message")}
          </motion.p>

          {/* CTAs */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.4 }}
            className="flex flex-col sm:flex-row items-center gap-3 mb-14"
          >
            <Button size="lg">
              <Link href="/" className="flex items-center gap-2">
                <Home className="h-4 w-4" />
                {t("backHome")}
              </Link>
            </Button>
            <Button variant="outline" size="lg">
              <Link href="/contact" className="flex items-center gap-2">
                {tNav("contact")}
                <ArrowRight className="h-4 w-4" />
              </Link>
            </Button>
          </motion.div>

          {/* Quick links */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.5, delay: 0.55 }}
            className="w-full"
          >
            <p className="text-xs uppercase tracking-[0.25em] text-muted-foreground/60 font-semibold mb-4">
              Popular pages
            </p>
            <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
              {quickLinks.map((link) => (
                <Link
                  key={link.href}
                  href={link.href}
                  className="group flex flex-col items-center gap-2 p-4 bg-card border border-border rounded-sm hover:border-accent/40 hover:bg-secondary transition-all"
                >
                  <link.icon className="h-5 w-5 text-muted-foreground group-hover:text-accent transition-colors" />
                  <span className="text-sm font-medium text-foreground">
                    {tNav(link.labelKey as Parameters<typeof tNav>[0])}
                  </span>
                </Link>
              ))}
            </div>
          </motion.div>
        </div>
      </main>

   
    </div>
  );
}