'use client';

import React from "react";
import { motion } from "framer-motion";
import Header from "@/components/shared/header";
import Footer from "@/components/shared/footer";
import { 
  ExternalLink, 
  CheckCircle2, 
  Terminal
} from "lucide-react";

interface ProjectItem {
  id: number;
  title: string;
  category: string;
  description: string;
  highlights: string[];
  techStack: string[];
  status: string;
  image?: string; // آدرس تصویر پروژه
}

const projectsData: ProjectItem[] = [
  {
    id: 1,
    title: "مرکز تماس هوشمند",
    category: "هوش مصنوعی و تحلیل داده‌های صوتی",
    description: "پلتفرم تحلیل مکالمات صوتی مرکز تماس مبتنی بر STT و LLM جهت ارزیابی خودکار عملکرد کارشناسان، سنجش احساسات مشتری و استخراج KPIهای سازمانی.",
    highlights: [
      "تبدیل خودکار و دقیق گفتار به متن (Speech-to-Text) با پشتیبانی تخصصی از زبان فارسی",
      "ارزیابی خودکار شاخص‌های عملکردی (KPI)، لحن، ادب و پایبندی به اسکریپت سازمانی",
      "تحلیل احساسات (Sentiment Analysis) و خلاصه‌سازی هوشمند مکالمات جهت ثبت در CRM",
      "یکپارچه‌سازی کامل با زیرساخت‌های VoIP / Asterisk و پایپ‌لاین‌های پردازش صوت"
    ],
    techStack: [
      "Python",
      "FastAPI",
      "Whisper / STT",
      "LLM / LangChain",
      "PostgreSQL",
      "Redis",
      "Docker"
    ],
    status: "Production / AI Solution",
    image: "/image/aicall2.png" // مسیر تصویر دلخواه خود را اینجا وارد کنید
  },
  {
    id: 2,
    title: "پلتفرم هوشمند تمرینات ورزشی نیوفیت",
    category: "سلامت، فیتنس و تحلیل داده‌های ورزشی",
    description: "سامانه جامع و هوشمند صدور برنامه‌های تمرینی اختصاصی مبتنی بر ارزیابی دقیق فاکتورهای بیومتریک و سبک زندگی کاربران، همراه با سیستم زمان‌بندی داینامیک و ارائه‌دهنده محتوای چندرسانه‌ای آموزشی.",
    highlights: [
      "موتور ارزیابی و پروفایلینگ پیشرفته کاربر (قد، وزن، سابقه تمرینی، سطح استرس، شاخص فعالیت روزانه و اهداف فردی)",
      "تولید خودکار و هوشمند برنامه‌های تمرینی شخصی‌سازی‌شده متناسب با محیط تمرین (خانه / باشگاه) و اهداف ورزشی",
      "سیستم زمان‌بندی منعطف و تقویم داینامیک جهت مدیریت روزها، ساعات و فازبندی جلسات تمرینی",
      "طراحی هوشمند متغیرهای تمرین شامل ساختار ست‌بندی، الگوهای بارگذاری و توصیه‌های تکنیکی و بیومکانیکی هر حرکت",
      "پایگاه داده چندرسانه‌ای بهینه‌سازی‌شده برای استریم روان ویدیوهای آموزشی اجرای صحیح حرکات و نکات کلیدی"
    ],
    techStack: [
      "Flutter / React Native",
      "FastAPI / Python",
      "PostgreSQL",
      "Redis",
      "Object Storage / CDN",
      "Docker"
    ],
    status: "Production / Mobile Application",
    image: "/image/neo.png" // مسیر تصویر دلخواه خود را اینجا وارد کنید
  },
  {
    id: 3,
    title: "دستیار هوشمند فروش و پشتیبانی",
    category: "هوش مصنوعی، RAG و عامل‌های هوشمند (AI Agents)",
    description: "سامانه دستیار هوشمند سازمانی مبتنی بر معماری RAG و عامل‌های گفتگومحور؛ مسلط به کل محتوای وب‌سایت، محصولات و مستندات جهت افزایش نرخ تبدیل فروش و کاهش ۷۰ درصدی تیکت‌های پشتیبانی.",
    highlights: [
      "پیاده‌سازی معماری پیشرفته RAG (Retrieval-Augmented Generation) با سینک خودکار کاتالوگ و صفحات",
      "عامل هوشمند فروش (Sales Agent) جهت هدایت رفتار کاربر به سبد خرید و افزایش Conversion Rate",
      "کاهش بیش از ۷۰ درصدی بار تیکت‌های پشتیبانی با پاسخ‌دهی بلادرنگ، بدون Hallucination و مستند به داده‌های سازمان",
      "یکپارچه‌سازی از طریق Webhook / API با سیستم‌های انبارداری و سفارشات (Live Stock / Order Status)",
      "نصب و تعبیه بسیار سریع در وب‌سایت‌ها تنها از طریق یک Script Tag سبک"
    ],
    techStack: [
      "Python",
      "FastAPI",
      "LangChain / LlamaIndex",
      "Qdrant / Vector DB",
      "OpenAI / Local LLMs",
      "Redis",
      "Docker"
    ],
    status: "Production / AI Solution",
    image: "/image/payai.png" // مسیر تصویر دلخواه خود را اینجا وارد کنید
  },
  {
    id: 4,
    title: "معلم و دستیار آموزشی هوشمند",
    category: "هوش مصنوعی، RAG و فناوری‌های آموزشی (EdTech)",
    description: "پلتفرم جامع آموزش تعاملی و یادگیری شخصی‌سازی‌شده مبتنی بر معماری RAG و پردازش صوت دوطرفه؛ مسلط بر کتب درسی رسمی جهت رفع توهم هوش مصنوعی (Zero Hallucination)، طراحی آزمون، تصحیح خودکار و تولید درسنامه.",
    highlights: [
      "پیاده‌سازی معماری RAG بر روی متون کتب درسی رسمی با ارجاع دقیق به سرفصل‌ها و پاراگراف‌ها جهت جلوگیری از Hallucination",
      "موتور هوشمند تولید آزمون‌های تستی و تشریحی در سه سطح دشواری با سناریوهای شب امتحان",
      "تصحیح تحلیلی پاسخ‌های تشریحی دانش‌آموز با تحلیل گام‌به‌گام و ارائه فیدبک مفهومی مبتنی بر رفرنس کتاب",
      "تعامل صوتی دوطرفه (Voice-Enabled) با موتورهای تبدیل متن به گفتار (TTS) و گفتار به متن فارسی (STT)",
      "ماژول خلاصه‌سازی خودکار فصول، تولید درسنامه‌های ساختاریافته و استخراج نکات کلیدی شب امتحان",
      "معماری مقیاس‌پذیر و ماژولار جهت مدیریت پیک ترافیک و درخواست‌های همزمان در ایام امتحانات"
    ],
    techStack: [
      "Python",
      "FastAPI",
      "LangChain / LlamaIndex",
      "Qdrant / Milvus (Vector DB)",
      "Whisper / STT & TTS",
      "OpenAI / Local LLMs",
      "PostgreSQL",
      "Redis",
      "Docker"
    ],
    status: "Production / AI Solution",
    image: "/image/student2.png" // مسیر تصویر دلخواه خود را اینجا وارد کنید
  }
];

export default function ProjectsPage() {
  return (
    <div dir="rtl" className="flex min-h-screen flex-col bg-gray-950 text-gray-200 font-sans selection:bg-indigo-500/30 selection:text-indigo-200">
      <Header />

      <main className="flex-1 overflow-hidden relative">
        {/* پترن گرید ۲۴ پیکسلی */}
        <div className="absolute inset-0 bg-[linear-gradient(to_right,#1f29371f_1px,transparent_1px),linear-gradient(to_bottom,#1f29371f_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none" />

        {/* بخش هدر صفحه */}
        <section className="relative px-6 pt-32 pb-16 text-center">
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="mx-auto max-w-3xl"
          >
            <h1 className="mb-5 text-3xl font-extrabold tracking-tight text-white md:text-5xl pt-20">
              معماری نرم‌افزار <span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 via-cyan-400 to-emerald-400">سامانه‌های سازمانی</span>  
            </h1>
            <p className="text-sm md:text-base text-gray-400 leading-relaxed max-w-2xl mx-auto">
             نمونه‌ای از سیستم‌های تحت وب، میکروسرویس‌ها و پایپ‌لاین‌های مقیاس‌پذیر با تمرکز بر امنیت      
            </p>
          </motion.div>
        </section>

        {/* تایم‌لاین پروژه‌ها */}
        <section className="relative mx-auto max-w-7xl px-6 py-10 mb-20">
          <div className="absolute left-1/2 top-0 hidden h-full w-[1px] -translate-x-1/2 bg-gradient-to-b from-transparent via-gray-800 to-transparent lg:block" />

          <div className="flex flex-col gap-20 lg:gap-28">
            {projectsData.map((project, index) => {
              const isEven = index % 2 === 0;

              return (
                <div
                  key={project.id}
                  className={`relative flex flex-col items-center gap-10 lg:flex-row lg:justify-between ${
                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
                  }`}
                >
                  {/* نشانگر تایم‌لاین وسط صفحه */}
                  <div className="absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 lg:flex">
                    <div className="relative flex h-11 w-11 items-center justify-center rounded-full border border-gray-700 bg-gray-900 shadow-xl shadow-black/80">
                      <span className="text-xs font-mono font-bold text-indigo-300">0{project.id}</span>
                      <div className="absolute inset-0 -z-10 animate-ping rounded-full bg-indigo-500/20" />
                    </div>
                  </div>

                  {/* ستون متن و توضیحات */}
                  <motion.div
                    initial={{ opacity: 0, x: isEven ? 40 : -40 }}
                    whileInView={{ opacity: 1, x: 0 }}
                    viewport={{ once: true, margin: "-80px" }}
                    transition={{ duration: 0.6 }}
                    className="w-full lg:w-[46%]"
                  >
                    <div className="space-y-4 text-right">
                      <div className="flex items-center gap-2">
                        <span className="text-xs font-mono font-medium text-indigo-400 bg-indigo-950/60 border border-indigo-800/40 px-2.5 py-0.5 rounded-md">
                          {project.category}
                        </span>
                        <span className="text-xs font-mono text-gray-500">
                          {project.status}
                        </span>
                      </div>

                      <h2 className="text-2xl font-bold text-gray-100 md:text-3xl">
                        {project.title}
                      </h2>

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

                      <div className="space-y-2 pt-2">
                        {project.highlights.map((highlight, idx) => (
                          <div key={idx} className="flex items-start gap-2 text-xs text-gray-300">
                            <CheckCircle2 className="w-4 h-4 text-indigo-400 shrink-0 mt-0.5" />
                            <span>{highlight}</span>
                          </div>
                        ))}
                      </div>

                      <div className="flex flex-wrap gap-2 pt-3">
                        {project.techStack.map((tech, idx) => (
                          <span
                            key={idx}
                            className="text-[11px] font-mono px-2.5 py-1 rounded bg-gray-900/90 border border-gray-800 text-gray-300 hover:border-gray-700 transition-colors"
                          >
                            {tech}
                          </span>
                        ))}
                      </div>
                    </div>
                  </motion.div>

                  {/* ستون تصویر سیستم */}
                  <motion.div
                    initial={{ opacity: 0, x: isEven ? -40 : 40 }}
                    whileInView={{ opacity: 1, x: 0 }}
                    viewport={{ once: true, margin: "-80px" }}
                    transition={{ duration: 0.6 }}
                    className="w-full lg:w-[46%]"
                  >
                    <div className="relative rounded-2xl border border-gray-800 bg-gray-900/50 p-6 backdrop-blur-md shadow-2xl hover:border-gray-700 transition-colors">
                      {/* هدر پنجره */}
                      <div className="flex items-center justify-between border-b border-gray-800/80 pb-3 mb-4">
                        <div className="flex items-center gap-1.5">
                          <div className="w-2.5 h-2.5 rounded-full bg-rose-500/80" />
                          <div className="w-2.5 h-2.5 rounded-full bg-amber-500/80" />
                          <div className="w-2.5 h-2.5 rounded-full bg-emerald-500/80" />
                        </div>
                        <div className="text-[11px] font-mono text-gray-500 flex items-center gap-1">
                          <Terminal className="w-3.5 h-3.5 text-indigo-400" />
                          <span>preview://node.svc_0{project.id}</span>
                        </div>
                      </div>

                      {/* قاب تصویر پروژه */}
                      <div className="relative w-full aspect-[16/10] overflow-hidden rounded-xl border border-gray-800/60 bg-gray-950/80 group">
                        {project.image ? (
                          <img
                            src={project.image}
                            alt={project.title}
                            className="w-full h-full object-cover object-center transition-transform duration-500 group-hover:scale-105"
                          />
                        ) : (
                          <div className="w-full h-full flex flex-col items-center justify-center text-gray-600 font-mono text-xs gap-2">
                            <Terminal className="w-6 h-6 text-gray-700" />
                            <span>No Preview Available</span>
                          </div>
                        )}
                      </div>
                    </div>
                  </motion.div>
                </div>
              );
            })}
          </div>
        </section>

        {/* بنر فراخوان نهایی */}
        <section className="relative px-6 pb-20">
          <div className="mx-auto max-w-5xl rounded-2xl border border-gray-800 bg-gradient-to-b from-gray-900/80 to-gray-950 p-8 md:p-12 text-center relative overflow-hidden shadow-2xl">
            <div className="absolute top-0 right-0 w-64 h-64 bg-indigo-500/10 rounded-full blur-3xl pointer-events-none" />
            <div className="relative z-10 max-w-2xl mx-auto space-y-4">
              <h3 className="text-2xl md:text-3xl font-bold text-white">
                آماده پیاده‌سازی و توسعه سیستم‌های پیچیده
              </h3>
              <p className="text-xs md:text-sm text-gray-400 leading-relaxed">
                اگر نیاز به مشاوره معماری نرم‌افزار، مقیاس‌پذیری سرویس‌ها یا پیاده‌سازی ماژول‌های اینترانت و سازمانی دارید   
              </p>
              <div className="pt-2">
                <a
                  href="/contact"
                  className="inline-flex items-center gap-2 px-6 py-2.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-semibold shadow-lg shadow-indigo-600/30 transition-all hover:scale-105"
                >
                  <span>شروع همکاری فنی</span>
                  <ExternalLink className="w-3.5 h-3.5" />
                </a>
              </div>
            </div>
          </div>
        </section>
      </main>

      <Footer />
    </div>
  );
}