import React, { useState } from 'react';
import { ChevronRight, Filter } from 'lucide-react';

export default function ToolsWebsite() {
  const [activeCategory, setActiveCategory] = useState('All');

  const tools = [
    {
      id: 1,
      title: "Link Generator",
      description: "Buat short url whatsapp dengan cepat",
      category: "Sosmed",
      icon: "💬"
    },
    {
      id: 2,
      title: "Bulk Image Converter",
      description: "Konversi banyak gambar sekaligus dengan cepat",
      category: "Tools",
      icon: "🖼️"
    },
    {
      id: 3,
      title: "Gradient Color",
      description: "Buat gradasi background ke css dengan mudah",
      category: "Tools",
      icon: "🎨"
    },
    {
      id: 4,
      title: "YouTube Description",
      description: "Buat deskripsi SEO video Youtube dengan mudah",
      category: "SEO",
      icon: "🎬"
    },
    {
      id: 5,
      title: "Keyword Generator",
      description: "Buat kata kunci turunan dengan mudah dan cepat",
      category: "SEO",
      icon: "🔍"
    },
    {
      id: 6,
      title: "Artikel Generator",
      description: "Buat artikel SEO dengan mudah dan cepat",
      category: "SEO",
      icon: "📝"
    },
    {
      id: 7,
      title: "Ad Copy Generator",
      description: "Buat ad copy Meta Ads dengan mudah",
      category: "Sosmed",
      icon: "📢"
    },
    {
      id: 8,
      title: "Headline Generator",
      description: "Buat headline menarik untuk produk Anda!",
      category: "Sosmed",
      icon: "⚡"
    },
    {
      id: 9,
      title: "Content Calendar",
      description: "Buat konten kalender dalam sekejap",
      category: "Tools",
      icon: "📅"
    },
    {
      id: 10,
      title: "Idea Generator",
      description: "Buat ide konten TikTok dengan mudah!",
      category: "Sosmed",
      icon: "💡"
    },
    {
      id: 11,
      title: "Content Generator",
      description: "Buat script konten TikTok dalam hitungan detik",
      category: "Sosmed",
      icon: "🎥"
    },
    {
      id: 12,
      title: "Caption Generator",
      description: "Buat caption sosmed dengan cepat dan mudah",
      category: "Sosmed",
      icon: "✍️"
    }
  ];

  const categories = ['All', 'Sosmed', 'SEO', 'Tools'];

  const filteredTools = activeCategory === 'All' 
    ? tools 
    : tools.filter(tool => tool.category === activeCategory);

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
      {/* Header */}
      <div className="bg-white border-b border-slate-200">
        <div className="max-w-6xl mx-auto px-4 py-8 sm:py-12">
          <h1 className="text-4xl sm:text-5xl font-bold text-slate-900 mb-3">Tools</h1>
          <p className="text-lg text-slate-600">Semua tools aplikasi website ini di buat hanya menggunakan AI.</p>
        </div>
      </div>

      {/* Categories Filter */}
      <div className="max-w-6xl mx-auto px-4 py-8">
        <div className="flex gap-3 flex-wrap mb-12">
          {categories.map(category => (
            <button
              key={category}
              onClick={() => setActiveCategory(category)}
              className={`px-6 py-2 rounded-lg font-medium transition-all duration-300 ${
                activeCategory === category
                  ? 'bg-blue-600 text-white shadow-lg'
                  : 'bg-white text-slate-700 border border-slate-300 hover:border-blue-600 hover:text-blue-600'
              }`}
            >
              {category}
            </button>
          ))}
        </div>

        {/* Tools Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-16">
          {filteredTools.map(tool => (
            <div
              key={tool.id}
              className="bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1 overflow-hidden group cursor-pointer"
            >
              <div className="h-48 bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center text-6xl">
                {tool.icon}
              </div>
              <div className="p-6">
                <h3 className="text-xl font-bold text-slate-900 mb-2 group-hover:text-blue-600 transition-colors">
                  {tool.title}
                </h3>
                <p className="text-slate-600 text-sm mb-4 line-clamp-2">
                  {tool.description}
                </p>
                <button className="flex items-center gap-2 text-blue-600 font-semibold hover:text-blue-700 group-hover:gap-3 transition-all duration-300">
                  Lihat Detail
                  <ChevronRight size={18} />
                </button>
              </div>
              <span className="block bg-slate-100 px-6 py-2 text-xs font-medium text-slate-600">
                {tool.category}
              </span>
            </div>
          ))}
        </div>

        {/* CTA Section */}
        <div className="bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl p-8 sm:p-12 text-white text-center mb-8">
          <p className="text-2xl sm:text-3xl font-bold mb-4">
            Bikin Aplikasi Web Cuma Pake AI 😍
          </p>
          <p className="text-lg mb-6 opacity-90">
            Tanpa perlu jago coding. Pemula sekalipun bisa buat aplikasi atau tools website dengan AI ✨
          </p>
          <button className="bg-white text-blue-600 px-8 py-3 rounded-lg font-bold hover:bg-slate-50 transition-colors">
            👉 Klik Detail
          </button>
        </div>
      </div>

      {/* Footer */}
      <footer className="bg-slate-900 text-white py-8 border-t border-slate-800">
        <div className="max-w-6xl mx-auto px-4 text-center">
          <p className="text-sm opacity-80">© 2024 ❤️ Produk Digital. Semua Hak Dilindungi.</p>
        </div>
      </footer>
    </div>
  );
}