import Link from "next/link";
import { ArrowRight, MessageCircle, Home, Compass } from "lucide-react";
import { getWhatsAppUrl } from "@/lib/whatsapp";
import { WhatsAppIcon } from "@/components/ui/whatsapp-icon";

export default function Custom404() {
  return (
    <div className="min-h-[80vh] flex items-center justify-center bg-brand-ivory hero-pattern py-20 px-4 sm:px-6 lg:px-8">
      <div className="max-w-2xl w-full text-center space-y-8 bg-white/80 backdrop-blur-xs border border-brand-border/80 rounded-3xl p-8 sm:p-14 shadow-xl">
        {/* Luxury Badge */}
        <div className="inline-flex items-center gap-3 justify-center">
          <span className="w-8 h-px bg-brand-gold/60" />
          <span className="text-xs font-semibold tracking-[0.25em] text-brand-gold uppercase">
            Error 404 &bull; Page Under Curation
          </span>
          <span className="w-8 h-px bg-brand-gold/60" />
        </div>

        {/* Big Stylized 404 */}
        <div className="space-y-3">
          <h1 className="font-title text-6xl sm:text-7xl lg:text-8xl font-bold tracking-tight text-brand-dark leading-none">
            4<span className="gold-gradient-text">0</span>4
          </h1>
          <h2 className="font-title text-2xl sm:text-3xl font-bold text-brand-dark">
            Lost on Your Wedding Journey?
          </h2>
        </div>

        {/* Narrative Description */}
        <p className="text-base text-brand-muted leading-relaxed max-w-lg mx-auto">
          The editorial guide, service tier, or page you are looking for may have been relocated or is currently undergoing bespoke editorial curation.
        </p>

        {/* Helpful Direct Actions */}
        <div className="pt-4 flex flex-col sm:flex-row items-center justify-center gap-4">
          <Link
            href="/"
            className="w-full sm:w-auto inline-flex items-center justify-center gap-2.5 bg-brand-gold hover:bg-brand-gold-hover text-white px-7 py-3.5 rounded-full text-xs font-semibold uppercase tracking-widest shadow-sm hover:shadow-md transition-all duration-300"
          >
            <Home className="w-4 h-4" />
            <span>Return to Homepage</span>
          </Link>

          <Link
            href="/blog"
            className="w-full sm:w-auto inline-flex items-center justify-center gap-2.5 bg-white hover:bg-brand-sand text-brand-dark border border-brand-border hover:border-brand-gold px-7 py-3.5 rounded-full text-xs font-semibold uppercase tracking-widest transition-all duration-300 shadow-xs"
          >
            <Compass className="w-4 h-4 text-brand-gold" />
            <span>Explore Wedding Guides</span>
          </Link>
        </div>

        {/* Concierge Help Ribbon */}
        <div className="pt-6 border-t border-brand-border/60">
          <p className="text-xs text-brand-muted mb-3">
            Looking for a specific Vietnam venue comparison or immediate budget audit?
          </p>
          <a
            href={getWhatsAppUrl("Hello VWG, I hit a 404 page and need assistance locating a wedding guide.")}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-brand-gold hover:underline"
          >
            <WhatsAppIcon className="w-3.5 h-3.5 fill-[#25D366]" />
            <span>Connect with Advisor via WhatsApp</span>
            <ArrowRight className="w-3 h-3" />
          </a>
        </div>
      </div>
    </div>
  );
}