novalon-website/src/app/error.tsx

'use client';

import { useEffect } from 'react';
import { StaticLink } from '@/components/ui/static-link';
import { Button } from '@/components/ui/button';
import { Home, RefreshCw, AlertTriangle } from 'lucide-react';

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error('Application error:', error);
  }, [error]);

  return (
    <div className="min-h-screen bg-[var(--color-bg-primary)] 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">
            <div className="w-24 h-24 bg-[var(--color-brand-bg)] rounded-full flex items-center justify-center mx-auto mb-6">
              <AlertTriangle className="w-12 h-12 text-[var(--color-brand)]" />
            </div>
            <div className="w-32 h-1 bg-[var(--color-brand)] mx-auto" />
          </div>

          <h1 className="text-3xl font-bold text-[var(--color-text-primary)] mb-4">
            出现了一些问题
          </h1>

          <p className="text-lg text-[var(--color-text-placeholder)] mb-6 leading-relaxed">
            很抱歉，我们遇到了一个意外错误。
            请尝试刷新页面，或返回首页继续浏览。
          </p>

          {error.message && (
            <div className="bg-[var(--color-bg-section)] border border-[var(--color-border-primary)] rounded-lg p-4 mb-8 text-left">
              <p className="text-sm text-[var(--color-text-placeholder)] font-mono">
                错误信息: {error.message}
              </p>
              {error.digest && (
                <p className="text-xs text-[var(--color-text-placeholder)] mt-2 font-mono">
                  错误ID: {error.digest}
                </p>
              )}
            </div>
          )}

          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
            <Button
              size="lg"
              onClick={reset}
              className="bg-[var(--color-brand)] hover:bg-[var(--color-brand-hover)] text-white"
            >
              <RefreshCw className="w-5 h-5 mr-2" />
              重试
            </Button>

            <Button
              size="lg"
              variant="outline"
              asChild
            >
              <StaticLink href="/">
                <Home className="w-5 h-5 mr-2" />
                返回首页
              </StaticLink>
            </Button>
          </div>

          <div className="bg-[var(--color-bg-section)] rounded-lg p-8">
            <h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-6">
              需要帮助？
            </h3>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <StaticLink
                href="/contact"
                className="flex items-center p-4 bg-[var(--color-bg-primary)] rounded-lg hover:shadow-md transition-shadow group"
              >
                <div className="w-10 h-10 bg-[var(--color-brand-bg)] rounded-lg flex items-center justify-center mr-4 group-hover:bg-[var(--color-challenge-isolation-hover)] transition-colors">
                  <AlertTriangle className="w-5 h-5 text-[var(--color-brand)]" />
                </div>
                <div className="text-left">
                  <div className="font-semibold text-[var(--color-text-primary)]">联系我们</div>
                  <div className="text-sm text-[var(--color-text-placeholder)]">获取技术支持</div>
                </div>
              </StaticLink>

              <StaticLink
                href="/services"
                className="flex items-center p-4 bg-[var(--color-bg-primary)] rounded-lg hover:shadow-md transition-shadow group"
              >
                <div className="w-10 h-10 bg-[var(--color-brand-bg)] rounded-lg flex items-center justify-center mr-4 group-hover:bg-[var(--color-challenge-isolation-hover)] transition-colors">
                  <RefreshCw className="w-5 h-5 text-[var(--color-brand)]" />
                </div>
                <div className="text-left">
                  <div className="font-semibold text-[var(--color-text-primary)]">服务</div>
                  <div className="text-sm text-[var(--color-text-placeholder)]">了解我们的服务</div>
                </div>
              </StaticLink>
            </div>
          </div>

          <div className="mt-8 text-sm text-[var(--color-text-placeholder)]">
            如果问题持续存在，请{' '}
            <StaticLink href="/contact" className="text-[var(--color-brand)] hover:underline">
              联系我们的技术团队
            </StaticLink>
          </div>
        </div>
      </div>
    </div>
  );
}