"use client";

import { useState } from "react";

const resources = [
  {
    id: 1,
    icon: "📄",
    category: "Guide",
    title: "Estate Planning Basics",
    description: "A comprehensive guide to getting started with estate planning",
    type: "PDF",
    downloads: 1240,
  },
  {
    id: 2,
    icon: "📋",
    category: "Template",
    title: "Will Template",
    description: "Customizable template to help you create your will",
    type: "Document",
    downloads: 892,
  },
  {
    id: 3,
    icon: "💰",
    category: "Guide",
    title: "Tax Planning Guide",
    description: "Strategies to minimize estate taxes and maximize inheritance",
    type: "PDF",
    downloads: 567,
  },
  {
    id: 4,
    icon: "🏥",
    category: "Guide",
    title: "Healthcare Directives",
    description: "Learn about living wills and healthcare proxies",
    type: "Checklist",
    downloads: 734,
  },
  {
    id: 5,
    icon: "👨‍👩‍👧‍👦",
    category: "Template",
    title: "Trust Planning Guide",
    description: "Understanding different types of trusts and their benefits",
    type: "Guide",
    downloads: 856,
  },
  {
    id: 6,
    icon: "🎓",
    category: "Video",
    title: "Video Library",
    description: "Access our collection of educational videos",
    type: "Video",
    downloads: 1450,
  },
];

const categories = ["All", "Guide", "Template", "Video"];

export default function ResourcesPage() {
  const [selectedCategory, setSelectedCategory] = useState("All");

  const filteredResources =
    selectedCategory === "All"
      ? resources
      : resources.filter((r) => r.category === selectedCategory);

  return (
    <main className="min-h-screen bg-gradient-to-b from-slate-50 to-white dark:from-slate-900 dark:to-slate-800">
      {/* Hero Section */}
      <section className="relative overflow-hidden px-6 py-20 sm:py-28">
        {/* Animated background blobs */}
        <div className="absolute inset-0 -z-10 overflow-hidden">
          <div className="absolute -top-40 -right-40 h-80 w-80 rounded-full bg-primary/20 mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
          <div className="absolute -bottom-40 -left-40 h-80 w-80 rounded-full bg-secondary/20 mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
          <div className="absolute top-1/2 left-1/2 h-80 w-80 rounded-full bg-blue-500/20 mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
        </div>

        <div className="max-w-6xl mx-auto text-center relative z-10">
          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary/10 text-primary text-xs font-semibold mb-6">
            📚 Learning Center
          </div>

          <h1 className="text-5xl sm:text-6xl font-bold text-slate-900 dark:text-white mb-6 leading-tight">
            Knowledge<span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent"> Resources</span>
          </h1>

          <p className="text-xl sm:text-2xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto mb-8 leading-relaxed">
            Access essential guides, templates, and tools to master estate planning
          </p>

          {/* Stats */}
          <div className="grid grid-cols-3 gap-4 max-w-2xl mx-auto mt-12">
            <div className="card p-4 backdrop-blur-xl bg-white/50 dark:bg-slate-800/50 border border-white/20 dark:border-slate-700/20">
              <div className="text-2xl font-bold text-primary">{resources.length}</div>
              <div className="text-sm text-gray-600 dark:text-gray-400">Resources</div>
            </div>
            <div className="card p-4 backdrop-blur-xl bg-white/50 dark:bg-slate-800/50 border border-white/20 dark:border-slate-700/20">
              <div className="text-2xl font-bold text-primary">{resources.reduce((a, b) => a + b.downloads, 0).toLocaleString()}</div>
              <div className="text-sm text-gray-600 dark:text-gray-400">Downloads</div>
            </div>
            <div className="card p-4 backdrop-blur-xl bg-white/50 dark:bg-slate-800/50 border border-white/20 dark:border-slate-700/20">
              <div className="text-2xl font-bold text-primary">{categories.length - 1}</div>
              <div className="text-sm text-gray-600 dark:text-gray-400">Categories</div>
            </div>
          </div>
        </div>
      </section>

      {/* Filter Section */}
      <section className="max-w-6xl mx-auto px-6 py-8">
        <div className="flex flex-wrap gap-3 justify-center">
          {categories.map((cat) => (
            <button
              key={cat}
              onClick={() => setSelectedCategory(cat)}
              className={`px-6 py-2.5 rounded-full font-semibold text-sm transition-all duration-300 ${
                selectedCategory === cat
                  ? "bg-primary text-white shadow-lg shadow-primary/30"
                  : "bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white hover:bg-slate-200 dark:hover:bg-slate-700"
              }`}
            >
              {cat === "All" ? "📋 All" : cat === "Guide" ? "📖 Guides" : cat === "Template" ? "📝 Templates" : "🎬 Videos"}
            </button>
          ))}
        </div>
      </section>

      {/* Resources Grid */}
      <section className="max-w-6xl mx-auto px-6 pb-20">
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredResources.map((resource) => (
            <div
              key={resource.id}
              className="group card p-6 border border-slate-200/60 dark:border-slate-700/60 hover:border-primary/50 hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 flex flex-col"
            >
              {/* Icon and Badge */}
              <div className="flex items-start justify-between mb-4">
                <div className="text-6xl">{resource.icon}</div>
                <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-bold rounded-full">
                  {resource.type}
                </span>
              </div>

              {/* Content */}
              <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2 group-hover:text-primary transition-colors">
                {resource.title}
              </h3>

              <p className="text-sm text-gray-600 dark:text-gray-400 mb-4 flex-grow">
                {resource.description}
              </p>

              {/* Stats */}
              <div className="flex items-center gap-4 py-3 border-t border-slate-200 dark:border-slate-700 mb-4">
                <div className="flex-1">
                  <div className="text-sm text-gray-500 dark:text-gray-400">Downloads</div>
                  <div className="text-lg font-bold text-slate-900 dark:text-white">
                    {(resource.downloads / 1000).toFixed(1)}K
                  </div>
                </div>
                <div className="w-1 h-10 bg-gradient-to-b from-primary to-secondary rounded-full"></div>
                <div className="flex-1 text-right">
                  <div className="text-sm text-gray-500 dark:text-gray-400">Category</div>
                  <div className="text-lg font-bold text-slate-900 dark:text-white">{resource.category}</div>
                </div>
              </div>

              {/* Button */}
              <button
                className="w-full py-3 px-4 rounded-lg font-semibold text-sm transition-all duration-300 bg-gradient-to-r from-primary to-secondary text-white hover:shadow-lg hover:shadow-primary/30 active:scale-95"
              >
                ⬇️ Access Resource
              </button>
            </div>
          ))}
        </div>

        {filteredResources.length === 0 && (
          <div className="text-center py-16">
            <div className="text-6xl mb-4">📭</div>
            <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">No resources found</h3>
            <p className="text-gray-600 dark:text-gray-400">Try selecting a different category</p>
          </div>
        )}
      </section>
    </main>
  );
}