import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { PLATFORM_CONFIGS } from "@/types/platform";

const QUICK_TOOLS = [
  {
    href:          "/storyboard",
    icon:          "🎬",
    label:         "Storyboard",
    desc:          "Ubah artikel/postingan → storyboard video",
    gradient:      "linear-gradient(135deg, rgba(124,58,237,0.15), rgba(37,99,235,0.08))",
    border:        "rgba(124,58,237,0.3)",
    textColor:     "text-violet-300",
    badge:         "NEW",
    badgeGradient: "from-violet-600 to-blue-600",
  },
  {
    href:          "/ugc-generator",
    icon:          "🎭",
    label:         "Generator UGC",
    desc:          "Script & package UGC dari link produk otomatis",
    gradient:      "linear-gradient(135deg, rgba(236,72,153,0.15), rgba(124,58,237,0.08))",
    border:        "rgba(236,72,153,0.3)",
    textColor:     "text-pink-300",
    badge:         "NEW",
    badgeGradient: "from-pink-600 to-violet-600",
  },
] as const;

export function QuickToolsGrid() {
  return (
    <div>
      <div className="flex items-center gap-3 mb-4">
        <h2 className="font-bold text-lg">Generator</h2>
        <div className="flex-1 gold-hr-soft" />
      </div>

      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
        {/* Feature tool cards */}
        {QUICK_TOOLS.map((tool) => (
          <Link
            key={tool.href}
            href={tool.href}
            className="group rounded-2xl p-4 transition-all duration-200 hover:-translate-y-0.5 relative overflow-hidden"
            style={{
              background:  tool.gradient,
              border:      `1px solid ${tool.border}`,
              boxShadow:   "0 2px 8px rgba(0,0,0,0.2)",
            }}
          >
            <div className="absolute top-2 right-2">
              <span className={`text-[9px] font-bold px-1.5 py-0.5 rounded-full bg-gradient-to-r ${tool.badgeGradient} text-white`}>
                {tool.badge}
              </span>
            </div>
            <div className="text-3xl mb-3">{tool.icon}</div>
            <div className={`font-medium text-sm ${tool.textColor}`}>{tool.label}</div>
            <div className="text-xs text-muted-foreground mt-1 line-clamp-2">{tool.desc}</div>
            <div className={`flex items-center gap-1 mt-3 text-xs opacity-0 group-hover:opacity-100 transition-opacity ${tool.textColor}`}>
              Buka <ArrowRight className="w-3 h-3" />
            </div>
          </Link>
        ))}

        {/* Platform cards */}
        {Object.values(PLATFORM_CONFIGS).map((platform) => (
          <Link
            key={platform.id}
            href={`/generator/${platform.id}`}
            className="group rounded-2xl bg-card p-4 transition-all duration-200 hover:-translate-y-0.5 hover:border-gold/35 hover:shadow-[0_4px_20px_rgba(212,175,55,0.1),0_2px_8px_rgba(0,0,0,0.3)]"
            style={{
              border:    "1px solid rgba(212,175,55,0.1)",
              boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
            }}
          >
            <div className="text-3xl mb-3">{platform.icon}</div>
            <div className="font-medium text-sm">{platform.name}</div>
            <div className="text-xs text-muted-foreground mt-1 line-clamp-2">{platform.description}</div>
            <div
              className="flex items-center gap-1 mt-3 text-xs opacity-0 group-hover:opacity-100 transition-opacity"
              style={{ color: "#d4af37" }}
            >
              Buka <ArrowRight className="w-3 h-3" />
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}
