import React from 'react';
import { Link } from 'react-router-dom';
import { Home, Hotel, AlertCircle } from 'lucide-react';
import { useCompanySettings } from '../contexts/CompanySettingsContext';

const NotFoundPage: React.FC = () => {
  const { settings } = useCompanySettings();

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-gray-100 to-gray-50 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
      {/* Background Pattern */}
      <div 
        className="absolute inset-0 opacity-5" 
        style={{
          backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0h2v20H9zM25 0h2v20h-2zM41 0h2v20h-2zM57 0h2v20h-2zM0 9h20v2H0zM0 25h20v2H0zM0 41h20v2H0zM0 57h20v2H0zM40 9h20v2H40zM40 25h20v2H40zM40 41h20v2H40zM40 57h20v2H40zM9 40h2v20H9zM25 40h2v20h-2zM41 40h2v20h-2zM57 40h2v20h-2z' fill='%23d4af37' opacity='0.05'/%3E%3C/svg%3E")`
        }}
      />

      <div className="max-w-2xl w-full text-center relative z-10">
        {/* Logo */}
        <div className="flex justify-center mb-6 sm:mb-8">
          {settings.company_logo_url ? (
            <img 
              src={settings.company_logo_url.startsWith('http') 
                ? settings.company_logo_url 
                : `${import.meta.env.VITE_API_URL || 'http://localhost:8000'}${settings.company_logo_url}`}
              alt={settings.company_name || 'Logo'}
              className="h-16 sm:h-20 lg:h-24 w-auto max-w-[200px] sm:max-w-[250px] object-contain"
              style={{ filter: 'drop-shadow(0 4px 6px rgba(0,0,0,0.1))' }}
            />
          ) : (
            <div className="relative p-4 sm:p-5 bg-gradient-to-br from-[var(--luxury-gold)] to-[var(--luxury-gold-dark)] rounded-full shadow-lg shadow-[var(--luxury-gold)]/30">
              <Hotel className="w-12 h-12 sm:w-16 sm:h-16 lg:w-20 lg:h-20 text-[#0f0f0f] relative z-10" />
              <div className="absolute inset-0 bg-gradient-to-br from-[var(--luxury-gold-light)] to-[var(--luxury-gold)] rounded-full blur-xl opacity-50"></div>
            </div>
          )}
        </div>

        {/* Tagline */}
        {settings.company_tagline && (
          <p className="text-xs sm:text-sm text-[var(--luxury-gold)] uppercase tracking-[2px] sm:tracking-[3px] mb-3 sm:mb-4 font-light">
            {settings.company_tagline}
          </p>
        )}

        {/* 404 Number */}
        <div className="mb-6 sm:mb-8">
          <h1 className="text-8xl sm:text-9xl lg:text-[12rem] font-display font-bold text-transparent bg-clip-text bg-gradient-to-r from-[var(--luxury-gold)] via-[var(--luxury-gold-light)] to-[var(--luxury-gold)] leading-none tracking-tight">
            404
          </h1>
        </div>

        {/* Error Icon */}
        <div className="flex justify-center mb-6 sm:mb-8">
          <div className="relative p-4 sm:p-5 bg-red-50 rounded-full border-2 border-red-200">
            <AlertCircle className="w-8 h-8 sm:w-10 sm:h-10 text-red-500" />
          </div>
        </div>

        {/* Main Message */}
        <div className="mb-6 sm:mb-8">
          <h2 className="text-2xl sm:text-3xl lg:text-4xl font-elegant font-semibold text-gray-900 mb-3 sm:mb-4 tracking-tight">
            Page Not Found
          </h2>
          <p className="text-base sm:text-lg text-gray-600 font-light tracking-wide max-w-md mx-auto leading-relaxed">
            We're sorry, but the page you're looking for doesn't exist or has been moved.
          </p>
        </div>

        {/* Additional Info */}
        <div className="mb-8 sm:mb-10">
          <p className="text-sm sm:text-base text-gray-500 font-light">
            The page you requested could not be found on our server.
          </p>
        </div>

        {/* Home Button */}
        <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
          <Link
            to="/"
            className="inline-flex items-center justify-center gap-2 px-8 py-3.5 sm:px-10 sm:py-4 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-dark)] text-[#0f0f0f] font-semibold text-sm sm:text-base rounded-lg shadow-lg shadow-[var(--luxury-gold)]/30 hover:from-[var(--luxury-gold-light)] hover:to-[var(--luxury-gold)] hover:shadow-xl hover:shadow-[var(--luxury-gold)]/40 transition-all duration-300 ease-out hover:-translate-y-0.5 active:translate-y-0 relative overflow-hidden group"
          >
            <span className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/20 to-white/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700"></span>
            <Home className="w-5 h-5 sm:w-6 sm:h-6 relative z-10" />
            <span className="relative z-10 tracking-wide">Back to Homepage</span>
          </Link>
        </div>

        {/* Decorative Elements */}
        <div className="mt-12 sm:mt-16 flex justify-center gap-2">
          <div className="w-2 h-2 rounded-full bg-[var(--luxury-gold)]/30"></div>
          <div className="w-2 h-2 rounded-full bg-[var(--luxury-gold)]/50"></div>
          <div className="w-2 h-2 rounded-full bg-[var(--luxury-gold)]/30"></div>
        </div>
      </div>
    </div>
  );
};

export default NotFoundPage;

