export default function BookmarksPage() {
  const categories = [
    {
      label: "Productivity",
      emoji: "💼",
      links: [
        { name: "Pulse", url: "https://pulse.digital-home.site", desc: "Привычки и задачи", emoji: "💓" },
        { name: "Gitea", url: "https://git.digital-home.site", desc: "Git репозитории", emoji: "🐙" },
      ],
    },
    {
      label: "Storage",
      emoji: "💾",
      links: [
        { name: "Nextcloud", url: "https://cloud.digital-home.site", desc: "Облачное хранилище", emoji: "☁️" },
        { name: "Immich", url: "https://photo.digital-home.site", desc: "Фото галерея", emoji: "📸" },
      ],
    },
    {
      label: "Tools",
      emoji: "🔧",
      links: [
        { name: "Vaultwarden", url: "https://vault.digital-home.site", desc: "Менеджер паролей", emoji: "🔐" },
        { name: "IT-Tools", url: "https://tools.digital-home.site", desc: "Утилиты разработчика", emoji: "🛠️" },
        { name: "Uptime Kuma", url: "https://uptime.digital-home.site", desc: "Мониторинг", emoji: "📊" },
        { name: "VPN Configs", url: "https://vpn.digital-home.site/admin?key=mysecret2026", desc: "Конфиги VPN", emoji: "🔒" },
        { name: "Marzban", url: "https://daniilvds.duckdns.org:2083/dashboard", desc: "Marzban панель", emoji: "🌐" },
      ],
    },
    {
      label: "AI Subscribe",
      emoji: "🤖",
      links: [
        { name: "OpenAI Usage", url: "https://chatgpt.com/codex/cloud/settings/usage", desc: "Лимиты OpenAI", emoji: "🤖" },
        { name: "Claude Usage", url: "https://claude.ai/settings/usage", desc: "Лимиты Claude", emoji: "✨" },
        { name: "Moonshot AI", url: "https://platform.moonshot.ai/console/account", desc: "Баланс и API ключи", emoji: "🌙" },
        { name: "OpenAI API", url: "https://platform.openai.com/settings/organization/usage", desc: "OpenAI API статистика", emoji: "📈" },
        { name: "Claude API", url: "https://platform.claude.com/workspaces/default/cost", desc: "Claude API статистика", emoji: "💜" },
        { name: "ElevenLabs API", url: "https://elevenlabs.io/app/api", desc: "ElevenLabs API статистика", emoji: "🎙️" },
      ],
    },
    {
      label: "Dev & References",
      emoji: "💻",
      links: [
        { name: "GitHub", url: "https://github.com/", desc: "Репозитории", emoji: "🐱" },
        { name: "Go Playground", url: "https://go.dev/play/", desc: "Тест Go кода", emoji: "🐹" },
        { name: "pkg.go.dev", url: "https://pkg.go.dev/", desc: "Go пакеты", emoji: "📦" },
        { name: "Flutter Docs", url: "https://docs.flutter.dev/", desc: "Документация Flutter", emoji: "🐦" },
        { name: ".NET Docs", url: "https://learn.microsoft.com/ru-ru/dotnet/", desc: "Документация .NET", emoji: "🔵" },
        { name: "Docker Hub", url: "https://hub.docker.com/", desc: "Docker образы", emoji: "🐳" },
        { name: "OpenRouter", url: "https://openrouter.ai/", desc: "AI роутер", emoji: "🔀" },
        { name: "Hugging Face", url: "https://huggingface.co/", desc: "ML модели", emoji: "🤗" },
        { name: "Groq Console", url: "https://console.groq.com/", desc: "Groq API", emoji: "⚡" },
        { name: "Together AI", url: "https://api.together.ai/", desc: "Together AI", emoji: "🤝" },
        { name: "Proxmox", url: "http://192.168.31.100:8006", desc: "Виртуализация", emoji: "🖥️" },
        { name: "Tailscale", url: "https://login.tailscale.com/admin/machines", desc: "VPN сеть", emoji: "🔗" },
        { name: "Habr", url: "https://habr.com/ru/feed/", desc: "Технические статьи", emoji: "📰" },
        { name: "VC.ru", url: "https://vc.ru/", desc: "Бизнес и технологии", emoji: "📱" },
      ],
    },
  ];

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-white">Bookmarks</h1>
        <p className="text-slate-400 text-sm">Все ссылки в одном месте</p>
      </div>

      {categories.map((cat) => (
        <div key={cat.label}>
          <h3 className="flex items-center gap-2 text-sm font-semibold text-slate-400 uppercase tracking-wider mb-3">
            <span>{cat.emoji}</span>
            {cat.label}
          </h3>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
            {cat.links.map((link) => (
              <a
                key={link.url}
                href={link.url}
                target="_blank"
                rel="noopener noreferrer"
                className="glass-card p-4 hover:scale-[1.02] transition-transform group"
              >
                <div className="flex items-center gap-2 mb-1">
                  <span className="text-lg">{link.emoji}</span>
                  <div className="text-sm font-medium text-white group-hover:text-indigo-300 transition-colors truncate">
                    {link.name}
                  </div>
                </div>
                {link.desc && <div className="text-xs text-slate-500 mt-1 truncate">{link.desc}</div>}
                <div className="text-xs text-slate-700 mt-2 truncate text-right group-hover:text-slate-500 transition-colors">
                  {new URL(link.url).hostname}
                </div>
              </a>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}