'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import { SITE_DATA, Project } from '@/data/site-data';
import { Code2, ArrowRight, ExternalLink } from 'lucide-react';

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

  const categories = [
    { id: 'all', label: `Tümü (${SITE_DATA.projects.length})` },
    { id: 'Girişim', label: 'Girişim & Strateji' },
    { id: 'Yapay Zeka', label: 'Yapay Zeka' },
    { id: 'Growth', label: 'Growth & CRO' },
    { id: 'Yazılım', label: 'Yazılım & Next.js' }
  ];

  const filteredProjects = activeCategory === 'all'
    ? SITE_DATA.projects
    : SITE_DATA.projects.filter(p => p.category.includes(activeCategory));

  return (
    <main className="relative z-10 py-16">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* Header */}
        <div className="max-w-3xl mb-12 space-y-4">
          <div className="inline-flex items-center gap-2 text-cyan-400 text-xs font-mono uppercase tracking-wider">
            <Code2 className="w-4 h-4" />
            <span>Portfolyo & Ürünler</span>
          </div>
          <h1 className="text-4xl sm:text-5xl font-extrabold text-white">
            Geliştirilen Projeler & Girişimler
          </h1>
          <p className="text-slate-400 text-base leading-relaxed">
            Full-stack Next.js web geliştirme, yapay zeka entegrasyonu, veri odaklı büyüme kurguları ve teknik SEO alanlarında ürettiğim projeleri keşfedin.
          </p>
        </div>

        {/* Filter Buttons */}
        <div className="flex flex-wrap gap-2.5 mb-10">
          {categories.map(c => (
            <button
              key={c.id}
              onClick={() => setActiveCategory(c.id)}
              className={`px-4 py-2 rounded-xl text-xs font-mono font-medium transition-all ${
                activeCategory === c.id
                  ? 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/40'
                  : 'bg-slate-800/60 text-slate-400 border border-slate-700/60 hover:text-white'
              }`}
            >
              {c.label}
            </button>
          ))}
        </div>

        {/* Projects Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {filteredProjects.map((project: Project) => (
            <div
              key={project.id}
              className="glass-card rounded-2xl p-8 flex flex-col justify-between border border-slate-800 hover:border-cyan-500/40 transition-all"
            >
              <div className="space-y-5">
                <div className="flex items-center justify-between gap-4">
                  <span className="text-xs font-mono px-3 py-1 rounded-full bg-slate-800 text-cyan-400 border border-slate-700">
                    {project.category}
                  </span>
                  <span className="text-xs font-mono font-bold text-emerald-400 bg-emerald-500/10 px-2.5 py-1 rounded-md border border-emerald-500/20">
                    {project.stats}
                  </span>
                </div>

                <h2 className="text-2xl font-bold text-white hover:text-cyan-400 transition-colors">
                  {project.title}
                </h2>

                <p className="text-slate-400 text-sm leading-relaxed">
                  {project.description}
                </p>

                <div className="flex flex-wrap gap-2 pt-2">
                  {project.tags.map(tag => (
                    <span key={tag} className="text-xs font-mono px-2.5 py-1 rounded bg-slate-900 border border-slate-800 text-slate-300">
                      #{tag}
                    </span>
                  ))}
                </div>
              </div>

              <div className="pt-6 mt-6 border-t border-slate-800/80 flex items-center justify-between">
                <span className="text-xs text-slate-500 font-mono">Çalışma Durumu: Yayında</span>
                {project.link !== '#' ? (
                  <a
                    href={project.link}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-sm font-semibold text-cyan-400 hover:text-cyan-300 flex items-center gap-1.5"
                  >
                    <span>Canlı İncele</span>
                    <ExternalLink className="w-3.5 h-3.5" />
                  </a>
                ) : (
                  <Link
                    href="/#iletisim"
                    className="text-sm font-semibold text-slate-400 hover:text-cyan-400 flex items-center gap-1.5"
                  >
                    <span>İletişime Geç</span>
                    <ArrowRight className="w-3.5 h-3.5" />
                  </Link>
                )}
              </div>
            </div>
          ))}
        </div>

      </div>
    </main>
  );
}