'use client';

import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Home, ArrowLeft, Search } from 'lucide-react';

export default function NotFound() {
  return (
    <div className="min-h-screen bg-white flex items-center justify-center">
      <div className="container-wide px-4 py-20">
        <div className="max-w-2xl mx-auto text-center">
          <div className="mb-8">
            <h1 className="text-[120px] font-bold text-[#C41E3A] leading-none mb-4">
              404
            </h1>
            <div className="w-32 h-1 bg-[#C41E3A] mx-auto mb-6"></div>
          </div>

          <h2 className="text-3xl font-bold text-[#1C1C1C] mb-4">
            页面未找到
          </h2>

          <p className="text-lg text-[#5C5C5C] mb-8 leading-relaxed">
            很抱歉，您访问的页面不存在或已被移动。
            请检查网址是否正确，或使用以下导航继续浏览。
          </p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
            <Button
              size="lg"
              asChild
              className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
            >
              <Link href="/">
                <Home className="w-5 h-5 mr-2" />
                返回首页
              </Link>
            </Button>

            <Button
              size="lg"
              variant="outline"
              onClick={() => window.history.back()}
            >
              <ArrowLeft className="w-5 h-5 mr-2" />
              返回上一页
            </Button>
          </div>

          <div className="bg-[#FAFAFA] rounded-lg p-8">
            <h3 className="text-xl font-semibold text-[#1C1C1C] mb-6">
              您可能在寻找
            </h3>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <Link
                href="/about"
                className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
              >
                <div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
                  <Search className="w-5 h-5 text-[#C41E3A]" />
                </div>
                <div className="text-left">
                  <div className="font-semibold text-[#1C1C1C]">关于我们</div>
                  <div className="text-sm text-[#5C5C5C]">了解睿新致远</div>
                </div>
              </Link>

              <Link
                href="/services"
                className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
              >
                <div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
                  <Search className="w-5 h-5 text-[#C41E3A]" />
                </div>
                <div className="text-left">
                  <div className="font-semibold text-[#1C1C1C]">核心业务</div>
                  <div className="text-sm text-[#5C5C5C]">我们的服务</div>
                </div>
              </Link>

              <Link
                href="/products"
                className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
              >
                <div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
                  <Search className="w-5 h-5 text-[#C41E3A]" />
                </div>
                <div className="text-left">
                  <div className="font-semibold text-[#1C1C1C]">产品服务</div>
                  <div className="text-sm text-[#5C5C5C]">企业级产品</div>
                </div>
              </Link>

              <Link
                href="/cases"
                className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
              >
                <div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
                  <Search className="w-5 h-5 text-[#C41E3A]" />
                </div>
                <div className="text-left">
                  <div className="font-semibold text-[#1C1C1C]">成功案例</div>
                  <div className="text-sm text-[#5C5C5C]">客户故事</div>
                </div>
              </Link>
            </div>
          </div>

          <div className="mt-8 text-sm text-[#5C5C5C]">
            如果您认为这是一个错误，请{' '}
            <Link href="/contact" className="text-[#C41E3A] hover:underline">
              联系我们
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}