"use client";

import { Home, ArrowLeft, Search, Film, Phone } from "lucide-react";
import { ROUTES } from "@/config/routes";
import Link from "next/link";
import { useEffect } from "react";

export default function NotFoundClient() {
  // Hide header, footer, scroll to top, and floating buttons on mount
  useEffect(() => {
    // Add styles to hide layout components
    const style = document.createElement('style');
    style.innerHTML = `
      header,
      footer,
      .scroll-to-top,
      [class*="FloatingContact"] {
        display: none !important;
      }
      body {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
      }
      html {
        overflow-x: hidden !important;
      }
    `;
    document.head.appendChild(style);

    // Reset scroll position to top
    window.scrollTo(0, 0);

    return () => {
      // Cleanup on unmount
      document.head.removeChild(style);
      document.body.style.overflow = '';
      document.body.style.position = '';
      document.body.style.width = '';
      document.body.style.height = '';
      document.documentElement.style.overflowX = '';
    };
  }, []);

  return (
    <section className="fixed inset-0 z-[9999] bg-gradient-to-b from-white via-red-50/30 to-orange-50/20 overflow-y-auto overflow-hidden">
      <div className="absolute inset-0 pointer-events-none opacity-20 sm:opacity-30 md:opacity-40 overflow-hidden">
        <div className="absolute -top-10 sm:top-10 md:top-20 -right-20 sm:-right-10 md:right-10 w-48 h-48 sm:w-72 sm:h-72 md:w-96 md:h-96 bg-gradient-to-br from-red-200 to-orange-200 rounded-full blur-3xl opacity-40" />
        <div className="absolute -bottom-10 sm:bottom-10 md:bottom-20 -left-20 sm:-left-10 md:left-10 w-40 h-40 sm:w-60 sm:h-60 md:w-80 md:h-80 bg-gradient-to-br from-yellow-200 to-red-200 rounded-full blur-3xl opacity-40" />
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-32 h-32 sm:w-48 sm:h-48 md:w-64 md:h-64 bg-orange-200 rounded-full blur-3xl opacity-40" />
      </div>

      <div className="container max-w-full px-4 sm:px-6 lg:px-8 relative z-10 min-h-screen flex items-center justify-center py-8 sm:py-12 md:py-16 overflow-x-hidden">
        <div className="max-w-4xl mx-auto text-center w-full">
          {/* 404 Number with Animation */}
          <div className="mb-4 sm:mb-6 md:mb-8 overflow-hidden">
            <h1 className="text-[80px] font-black leading-none whitespace-nowrap">
              <span className="text-black">
                404
              </span>
            </h1>
          </div>

          {/* Main Message */}
          <div className="mb-2 sm:mb-4 md:mb-6 px-2 sm:px-4">
            <h2 className="text-xl sm:text-2xl md:text-3xl lg:text-5xl font-bold text-neutral-800 mb-3 sm:mb-4">
              Ối! Trang Không Tồn Tại
            </h2>
            <p className="text-base sm:text-lg md:text-xl text-neutral-600 max-w-2xl mx-auto leading-relaxed">
              Trang bạn đang tìm kiếm có thể đã được di chuyển, xóa hoặc chưa
              bao giờ tồn tại. Đừng lo lắng, chúng tôi sẽ giúp bạn tìm đúng
              hướng!
            </p>
          </div>

          {/* Suggestion Box */}
          <div className="mb-8 sm:mb-10 md:mb-12 p-4 sm:p-6 bg-white/80 backdrop-blur-sm rounded-xl sm:rounded-2xl border-2 border-red-100 shadow-xl max-w-2xl mx-auto">
            <h3 className="text-lg sm:text-xl font-bold text-neutral-800 mb-3">
              Bạn Có Thể Thử:
            </h3>
            <ul className="text-left text-sm sm:text-base text-neutral-600 space-y-2">
              <li className="flex items-start gap-2">
                <span className="text-red-500 mt-1 flex-shrink-0">•</span>
                <span>Kiểm tra lại URL bạn đã nhập</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-red-500 mt-1 flex-shrink-0">•</span>
                <span>Quay lại trang chủ và tìm kiếm lại</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-red-500 mt-1 flex-shrink-0">•</span>
                <span>Liên hệ với chúng tôi nếu bạn nghĩ đây là lỗi</span>
              </li>
            </ul>
          </div>

          {/* Action Buttons */}
          <div className="flex flex-col sm:flex-row flex-wrap items-center justify-center gap-3 sm:gap-4 px-2 sm:px-4">
            {/* Home Button */}
            <Link href={ROUTES.HOME} className="w-full sm:w-auto">
              <button className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 sm:px-8 py-3 sm:py-4 bg-gradient-to-r from-red-500 to-red-600 text-white font-bold text-sm sm:text-base rounded-full shadow-lg hover:shadow-xl transition-all duration-300">
                <Home className="w-4 h-4 sm:w-5 sm:h-5" />
                Về Trang Chủ
              </button>
            </Link>

            {/* Back Button */}
            <button
              onClick={() => window.history.back()}
              className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 sm:px-8 py-3 sm:py-4 bg-white text-red-600 font-bold text-sm sm:text-base rounded-full shadow-lg hover:shadow-xl border-2 border-red-200 hover:border-red-300 transition-all duration-300"
            >
              <ArrowLeft className="w-4 h-4 sm:w-5 sm:h-5" />
              Quay Lại
            </button>
          </div>

          {/* Quick Links */}
          <div className="mt-10 sm:mt-12 md:mt-16 grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 max-w-4xl mx-auto">
            {/* Về Chúng Tôi Link */}
            <Link href={ROUTES.ABOUT}>
              <div className="p-4 sm:p-5 md:p-6 bg-white/80 backdrop-blur-sm rounded-xl sm:rounded-2xl border-2 border-red-100 hover:border-red-300 shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer group h-full">
                <div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-red-500 to-orange-500 rounded-lg sm:rounded-xl flex items-center justify-center mb-3 sm:mb-4 mx-auto group-hover:scale-110 transition-transform duration-300">
                  <svg className="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
                <h4 className="font-bold text-sm sm:text-base text-neutral-800 mb-1">Về Chúng Tôi</h4>
                <p className="text-xs sm:text-sm text-neutral-600">Tìm hiểu về </p>
                <span className="font-bold text-red-600"> V_LOG </span>
                <span className="font-bold text-black">MEDIA</span>
              </div>
            </Link>

            {/* Dịch Vụ Link */}
            <Link href={ROUTES.PRICING}>
              <div className="p-4 sm:p-5 md:p-6 bg-white/80 backdrop-blur-sm rounded-xl sm:rounded-2xl border-2 border-orange-100 hover:border-orange-300 shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer group h-full">
                <div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-orange-500 to-yellow-500 rounded-lg sm:rounded-xl flex items-center justify-center mb-3 sm:mb-4 mx-auto group-hover:scale-110 transition-transform duration-300">
                  <Film className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
                </div>
                <h4 className="font-bold text-sm sm:text-base text-neutral-800 mb-1">Dịch Vụ</h4>
                <p className="text-xs sm:text-sm text-neutral-600">Xem bảng giá dịch vụ</p>
              </div>
            </Link>

            {/* Góc Kiến Thức Link */}
            <Link href={ROUTES.BLOG}>
              <div className="p-4 sm:p-5 md:p-6 bg-white/80 backdrop-blur-sm rounded-xl sm:rounded-2xl border-2 border-yellow-100 hover:border-yellow-300 shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer group h-full">
                <div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-blue-500 to-red-500 rounded-lg sm:rounded-xl flex items-center justify-center mb-3 sm:mb-4 mx-auto group-hover:scale-110 transition-transform duration-300">
                  <Search className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
                </div>
                <h4 className="font-bold text-sm sm:text-base text-neutral-800 mb-1">Góc Kiến Thức</h4>
                <p className="text-xs sm:text-sm text-neutral-600">Khám phá blog của chúng tôi</p>
              </div>
            </Link>

            {/* Liên Hệ Link */}
            <Link href={ROUTES.CONTACT}>
              <div className="p-4 sm:p-5 md:p-6 bg-white/80 backdrop-blur-sm rounded-xl sm:rounded-2xl border-2 border-red-100 hover:border-red-300 shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer group h-full">
                <div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-red-500 to-pink-500 rounded-lg sm:rounded-xl flex items-center justify-center mb-3 sm:mb-4 mx-auto group-hover:scale-110 transition-transform duration-300">
                  <Phone className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
                </div>
                <h4 className="font-bold text-sm sm:text-base text-neutral-800 mb-1">Liên Hệ</h4>
                <p className="text-xs sm:text-sm text-neutral-600">Liên hệ với chúng tôi</p>
              </div>
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
}
