import React, { useEffect } from 'react';
import { motion } from 'framer-motion';
import { Link, useLocation } from 'react-router-dom';
import SEO from '../../components/SEO';

const routeCards = [
  {
    title: 'Business Email Services',
    description: 'Enterprise cloud email, migration, DNS setup and local support for Corpus Christi businesses.',
    to: '/services/business-email-services',
    icon: 'mail',
  },
  {
    title: 'Service Areas',
    description: 'Browse all Coastal Bend locations we support, from Corpus Christi to surrounding cities.',
    to: '/locations',
    icon: 'location_on',
  },
  {
    title: 'Contact Bay Area IT',
    description: 'Talk to the team directly if you were expecting a live page or need help now.',
    to: '/contact',
    icon: 'support_agent',
  },
];

const quickLinks = [
  { label: 'Home', to: '/' },
  { label: 'Services', to: '/services' },
  { label: 'Locations', to: '/locations' },
  { label: 'Blog', to: '/blog' },
];

const diagnostics = [
  'Check whether an old bookmark or outdated link was used.',
  'Some content has been moved to new service or location URLs.',
  'If you still need this URL, contact the team directly.',
];

const NotFoundPage: React.FC = () => {
  const location = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  const canonicalUrl =
    typeof window !== 'undefined'
      ? `${window.location.origin}${location.pathname}`
      : 'https://bayareait.services/404';

  return (
    <>
      <SEO
        title="404 | Bay Area IT"
        description="The page you requested could not be found. Return to Bay Area IT to browse services, locations, or contact support."
        canonicalUrl={canonicalUrl}
        keywords={['404', 'Bay Area IT', 'Corpus Christi IT support']}
      />

      <div className="pt-20 min-h-screen bg-[#0a0a0a] relative overflow-hidden">
        <div className="absolute inset-0 pointer-events-none">
          <div className="absolute top-0 left-0 right-0 h-[720px] bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.18),rgba(255,255,255,0))]" />
          <div className="absolute top-24 left-1/2 -translate-x-1/2 w-[40rem] h-[40rem] rounded-full bg-white/[0.06] blur-[140px]" />
          <div className="absolute bottom-0 right-0 w-[28rem] h-[28rem] rounded-full bg-white/[0.04] blur-[120px]" />
        </div>

        <section className="relative px-6 py-20 md:py-28 border-b border-white/5">
          <div className="max-w-7xl mx-auto grid lg:grid-cols-[1.1fr_0.9fr] gap-10 items-start">
            <motion.div
              initial={{ opacity: 0, y: 24 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.45 }}
            >
              <span className="inline-flex items-center gap-3 px-4 py-2 rounded-full border border-white/10 bg-white/5 text-white/70 text-xs font-bold tracking-[0.24em] uppercase mb-8">
                <span className="w-2 h-2 rounded-full bg-white shadow-[0_0_16px_rgba(255,255,255,0.85)]" />
                Route Offline
              </span>

              <p className="font-display text-7xl md:text-8xl lg:text-[8rem] leading-none tracking-[-0.08em] text-white mb-5">
                404
              </p>

              <h1 className="font-display text-4xl md:text-6xl font-bold tracking-tight text-white mb-6">
                This page is no longer on the network.
              </h1>

              <p className="text-lg md:text-xl text-gray-400 max-w-2xl leading-relaxed mb-10">
                The requested path does not exist, has been moved, or is now live under a new URL.
                Use the direct links below to quickly get back to services, locations, or the contact page.
              </p>

              <div className="flex flex-col sm:flex-row gap-4 mb-8">
                <Link
                  to="/"
                  className="px-8 py-4 rounded-full border border-white/20 bg-white/10 text-white font-bold backdrop-blur-sm transition-colors hover:border-white/40 hover:bg-white/15 text-center"
                >
                  Back to Home
                </Link>
                <Link
                  to="/services/business-email-services"
                  className="px-8 py-4 rounded-full border border-white/15 bg-white/5 text-white font-medium backdrop-blur-sm transition-colors hover:border-white/35 hover:bg-white/10 text-center"
                >
                  View Email Service
                </Link>
              </div>

              <div className="flex flex-wrap gap-3">
                {quickLinks.map((item) => (
                  <Link
                    key={item.to}
                    to={item.to}
                    className="px-4 py-2 rounded-full border border-white/10 bg-black/30 text-sm text-gray-300 transition-colors hover:border-white/30 hover:text-white"
                  >
                    {item.label}
                  </Link>
                ))}
              </div>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 24 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.45, delay: 0.08 }}
              className="rounded-[2rem] border border-white/10 bg-white/5 backdrop-blur-md p-8 md:p-10 shadow-[0_40px_100px_rgba(0,0,0,0.35)]"
            >
              <div className="flex items-center justify-between gap-4 mb-8">
                <div>
                  <p className="text-xs uppercase tracking-[0.24em] text-white/50 mb-2">Diagnostic</p>
                  <h2 className="font-display text-2xl font-bold text-white">Requested Path</h2>
                </div>
                <div className="w-12 h-12 rounded-2xl bg-white text-black flex items-center justify-center p-2">
                  <img
                    src="/logo.svg"
                    alt="Bay Area IT logo"
                    className="h-full w-full object-contain"
                  />
                </div>
              </div>

              <div className="rounded-2xl border border-white/10 bg-black/30 px-5 py-4 mb-6">
                <p className="text-xs uppercase tracking-[0.2em] text-white/45 mb-2">Path</p>
                <p className="text-sm md:text-base text-white break-all">{location.pathname}</p>
              </div>

              <div className="space-y-4 mb-8">
                {diagnostics.map((item) => (
                  <div
                    key={item}
                    className="flex items-start gap-3 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-4"
                  >
                    <span className="material-symbols-outlined text-white">check_circle</span>
                    <p className="text-sm text-gray-300 leading-relaxed">{item}</p>
                  </div>
                ))}
              </div>

              <div className="rounded-2xl border border-white/10 bg-white text-black px-5 py-5 selection:bg-black selection:text-white">
                <p className="text-sm font-bold mb-1 text-black">Direct Help</p>
                <p className="text-sm text-black/75 mb-4">
                  Call (361) 765-8400 or open the contact page if you need support.
                </p>
                <Link
                  to="/contact"
                  className="inline-flex items-center gap-2 text-sm font-semibold text-black hover:text-black/70 transition-colors"
                >
                  Open Contact Page
                  <span className="material-symbols-outlined text-base text-black">arrow_outward</span>
                </Link>
              </div>
            </motion.div>
          </div>
        </section>

        <section className="relative px-6 py-20">
          <div className="max-w-7xl mx-auto">
            <div className="flex items-center gap-3 mb-8">
              <span className="h-px w-10 bg-white/20" />
              <p className="text-xs uppercase tracking-[0.24em] text-white/55">Recommended Entry Points</p>
            </div>

            <div className="grid md:grid-cols-3 gap-6">
              {routeCards.map((card, index) => (
                <motion.div
                  key={card.to}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.4, delay: 0.12 + index * 0.08 }}
                >
                  <Link
                    to={card.to}
                    className="group h-full block rounded-[1.75rem] border border-white/10 bg-white/5 backdrop-blur-sm p-7 transition-all hover:-translate-y-1 hover:border-white/30 hover:bg-white/[0.08]"
                  >
                    <div className="w-12 h-12 rounded-2xl bg-white/10 border border-white/10 flex items-center justify-center text-white mb-6">
                      <span className="material-symbols-outlined">{card.icon}</span>
                    </div>
                    <h3 className="text-xl font-bold text-white mb-3">{card.title}</h3>
                    <p className="text-sm leading-relaxed text-gray-400 mb-6">{card.description}</p>
                    <span className="inline-flex items-center gap-2 text-sm font-semibold text-white">
                      Open Page
                      <span className="material-symbols-outlined text-base transition-transform group-hover:translate-x-1">
                        arrow_forward
                      </span>
                    </span>
                  </Link>
                </motion.div>
              ))}
            </div>
          </div>
        </section>
      </div>
    </>
  );
};

export default NotFoundPage;
