import * as React from 'react';
import Link from 'next/link';
import { Button } from '@/components/ui/button';

export default function CategoryNotFound() {
  return (
    <main className="min-h-screen bg-white flex items-center justify-center">
      <div className="container mx-auto px-4 py-16 max-w-2xl text-center">
        <div className="mb-8">
          <span className="text-8xl">🔍</span>
        </div>
        
        <h1 className="text-3xl md:text-4xl font-semibold text-[#222222] mb-4">
          カテゴリーが見つかりません
        </h1>
        
        <p className="text-lg text-[#666666] mb-8 leading-relaxed">
          お探しのカテゴリーは存在しないか、削除された可能性があります。
        </p>

        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <Button
            asChild
            className="bg-gradient-to-r from-[#F4C7CF] to-[#E9AAB5] hover:from-[#E9AAB5] hover:to-[#F4C7CF] text-white rounded-full px-8 py-6 text-base shadow-md transition-all hover:scale-105"
          >
            <Link href="/">
              ホームに戻る
            </Link>
          </Button>
          
          <Button
            asChild
            variant="outline"
            className="border-[#F4C7CF] text-[#E38A9B] hover:bg-[#F4C7CF]/10 rounded-full px-8 py-6 text-base"
          >
            <Link href="/blogs">
              記事一覧を見る
            </Link>
          </Button>
        </div>

        <div className="mt-12 pt-8 border-t border-[#EAEAEA]">
          <p className="text-sm text-[#999999] mb-4">
            利用可能なカテゴリー：
          </p>
          <div className="flex flex-wrap gap-3 justify-center">
            {['スポーツクラブ運営', '社会人', 'ジュニア', '女子チーム', 'モチベーション管理'].map((category) => (
              <Link
                key={category}
                href={`/category/${encodeURIComponent(category)}`}
                className="px-4 py-2 bg-[#F4C7CF]/20 hover:bg-[#F4C7CF]/40 text-[#E38A9B] rounded-full text-sm transition-colors"
              >
                {category}
              </Link>
            ))}
          </div>
        </div>
      </div>
    </main>
  );
}
