// components/software/Projects.tsx
"use client";

import { useState } from "react";

const projects = [
  {
    type: "وب اپلیکیشن",
    company: "شرکت آتی‌ساز",
    title: "پلتفرم مدیریت پروژه",
    description: "سیستم جامع مدیریت پروژه با قابلیت ردیابی وظایف و گزارش‌گیری Real-time",
    tech: ["⚛ Next.js + TypeScript", "🐘 PostgreSQL + Prisma"],
    stat: "👤 +۵۰۰ کاربر",
    year: "۲۰۲۶",
  },
  {
    type: "داشبورد تحلیلی",
    company: "گروه مالی پارسیان",
    title: "داشبورد تحلیل داده",
    description: "پنل تحلیلی با نمودارهای تعاملی و گزارش‌های لحظه‌ای برای تیم مدیریت",
    tech: ["⚛ React + Chart.js", "🟢 Node.js + WebSocket"],
    stat: "📈 Real-time",
    year: "۲۰۲۶",
  },
  {
    type: "Backend API",
    company: "استارتاپ دیجی‌مارکت",
    title: "API فروشگاه آنلاین",
    description: "RESTful API مقیاس‌پذیر با معماری Microservices برای پلتفرم تجارت الکترونیک",
    tech: ["⚙ NestJS + TypeScript", "🐳 Docker + Kubernetes"],
    stat: "🚀 Microservices",
    year: "۲۰۲۵",
  },
  {
    type: "وب اپلیکیشن",
    company: "موسسه آموزشی نوین",
    title: "پلتفرم آموزشی",
    description: "سیستم LMS پیشرفته با قابلیت برگزاری کلاس آنلاین و ارزیابی خودکار",
    tech: ["🟢 Vue.js + Nuxt", "🍃 MongoDB + Redis"],
    stat: "📚 +۱۰۰۰ دوره",
    year: "۲۰۲۵",
  },
];

const filters = ["همه", "وب اپ", "API", "داشبورد"];

export default function Projects() {
  const [activeFilter, setActiveFilter] = useState("همه");

  return (
    <section className="px-6 py-16">
      <div className="mx-auto mb-12 text-right max-w-7xl">
        <h2 className="mb-2 text-3xl font-bold">پروژه‌های نرم‌افزاری</h2>
        <p className="text-muted">منتخب پروژه‌های نرم‌افزاری با تمرکز بر کیفیت کد و معماری تمیز</p>
      </div>

      <div className="flex flex-wrap items-center justify-between gap-4 px-6 mx-auto mb-8 max-w-7xl">
        <div className="flex gap-2">
          {filters.map((filter) => (
            <button
              key={filter}
              onClick={() => setActiveFilter(filter)}
              className={`px-4 py-2 text-sm border rounded-lg transition ${
                activeFilter === filter ? "bg-accent text-white border-accent" : "bg-transparent text-muted border-border hover:border-accent/50"
              }`}
            >
              {filter}
            </button>
          ))}
        </div>

        <div className="flex items-center gap-4">
          <button className="px-4 py-2 text-sm transition border rounded-lg border-border hover:bg-card">مشاهده همه پروژه‌ها</button>
          <div className="flex gap-2">
            <button className="flex items-center justify-center transition border rounded-lg w-9 h-9 border-border hover:bg-card">&gt;</button>
            <button className="flex items-center justify-center transition border rounded-lg w-9 h-9 border-border hover:bg-card">&lt;</button>
          </div>
        </div>
      </div>

      <div className="flex gap-6 px-6 pb-4 mx-auto overflow-x-auto max-w-7xl scrollbar-hide">
        {projects.map((project, i) => (
          <div
            key={i}
            className="min-w-[320px] bg-gradient-to-b from-card to-bg border border-border rounded-2xl p-6 flex flex-col relative overflow-hidden"
          >
            <div className="absolute top-0 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-white/10 to-transparent" />

            <div className="flex items-center justify-between mb-6">
              <span className="px-3 py-1 text-xs border rounded bg-accent/10 border-accent/20 text-accent">{project.type}</span>
              <span className="text-xs text-muted">{project.company}</span>
            </div>

            <div className="mb-6">
              <h3 className="mb-2 text-xl font-bold">{project.title}</h3>
              <p className="text-sm leading-relaxed text-muted">{project.description}</p>
            </div>

            <div className="mb-6">
              {project.tech.map((tech, j) => (
                <div key={j} className="flex items-center gap-2 mb-2 text-sm text-muted">
                  {tech}
                </div>
              ))}
            </div>

            <div className="flex items-center justify-between pt-4 mt-auto border-t border-border">
              <div className="text-sm text-muted">{project.stat}</div>
              <div className="px-3 py-1 text-xs rounded bg-white/5 text-muted">{project.year}</div>
            </div>
          </div>
        ))}
      </div>

      <style jsx>{`
        .scrollbar-hide::-webkit-scrollbar {
          display: none;
        }
        .scrollbar-hide {
          -ms-overflow-style: none;
          scrollbar-width: none;
        }
      `}</style>
    </section>
  );
}