'use client';

import React from 'react';
import Image from 'next/image';
import { motion } from 'framer-motion';
import { 
  Terminal, 
  Mail, 
  Cpu, 
  ShieldCheck, 
  Layers, 
  Activity, 
  CheckCircle2, 
  Server
} from 'lucide-react';
import Footer from '@/components/shared/footer';

// آیکون اختصاصی لینکدین
function LinkedInIcon({ className = 'w-4 h-4' }: { className?: string }) {
  return (
    <svg
      role="img"
      viewBox="0 0 24 24"
      fill="currentColor"
      className={className}
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.28 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.75M6.46 8.76c-.97 0-1.75-.79-1.75-1.76s.78-1.75 1.75-1.75c.97 0 1.76.78 1.76 1.75s-.79 1.76-1.76 1.76m1.37 9.74v-8.37H5.1v8.37h2.73z" />
    </svg>
  );
}

interface BoardMember {
  name: string;
  role: string;
  title: string;
  image: string;
  linkedin?: string;
  email?: string;
}

const boardMembers: BoardMember[] = [
  {
    name: 'نام و نام‌خانوادگی عضو ۱',
    role: 'رئیس هیئت مدیره',
    title: 'دکتری مدیریت فناوری اطلاعات',
    image: '/images/team/member-1.jpg',
    linkedin: 'https://linkedin.com',
    email: 'board1@company.ir'
  },
  {
    name: 'نام و نام‌خانوادگی عضو ۲',
    role: 'مدیرعامل و عضو هیئت مدیره',
    title: 'کارشناس ارشد مهندسی نرم‌افزار',
    image: '/images/team/member-2.jpg',
    linkedin: 'https://linkedin.com',
    email: 'board2@company.ir'
  },
  {
    name: 'نام و نام‌خانوادگی عضو ۳',
    role: 'نایب‌رئیس هیئت مدیره',
    title: 'کارشناس ارشد مدیریت سیستم‌ها',
    image: '/images/team/member-3.jpg',
    linkedin: 'https://linkedin.com',
    email: 'board3@company.ir'
  }
];

export default function AboutPage() {
  return (
    <div dir="rtl" className="min-h-screen bg-gray-950 text-gray-100 flex flex-col justify-between selection:bg-indigo-500/30 selection:text-indigo-200">
      
      {/* Background Subtle Ambient Glow & Grid */}
      <div className="fixed inset-0 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(99,102,241,0.08),rgba(255,255,255,0))] pointer-events-none" />
      <div className="fixed inset-0 bg-[linear-gradient(to_right,#1f293715_1px,transparent_1px),linear-gradient(to_bottom,#1f293715_1px,transparent_1px)] bg-[size:40px_40px] pointer-events-none" />

      <main className="relative max-w-6xl mx-auto px-6 py-20 w-full space-y-28">
        
        {/* ۱. بخش معرفی مدرن و جذاب شرکت (Company Overview) */}
        <section className="space-y-12">
          
          {/* ردیف اصلی Hero */}
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
            
            {/* سمت راست: بیانیه مأموریت و توضیحات */}
            <motion.div 
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.5 }}
              className="lg:col-span-7 space-y-6"
            >
              {/* تگ وضعیت سیستم */}
              <div className="inline-flex items-center gap-2.5 px-3.5 py-1.5 rounded-full bg-indigo-950/40 border border-indigo-500/30 text-indigo-300 font-mono text-xs shadow-inner">
                <span className="relative flex h-2 w-2">
                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                  <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
                </span>
                <span className="tracking-wide">Enterprise FinTech & System Engineering</span>
              </div>

              {/* تیتر با افکت گرادیان نوری */}
              <h1 className="text-3xl sm:text-5xl font-black tracking-tight leading-[1.2] text-white">
                توسعه زیرساخت‌های نرم‌افزاری مقیاس‌پذیر و <span className="text-transparent bg-clip-text bg-gradient-to-l from-indigo-400 via-sky-300 to-white">امنیت‌محور بانکی</span>
              </h1>

              {/* متن معرفی */}
              <p className="text-gray-300 text-base sm:text-lg leading-relaxed text-justify">
                ما به عنوان بازوی تخصصی فناوری، با تکیه بر معماری‌های توزیع‌شده و استانداردهای روز نرم‌افزاری، سامانه‌های حیاتی بانکی را بازطراحی و پشتیبانی می‌کنیم. مأموریت ما تضمین تاب‌آوری بالا، پردازش بدون تأخیر داده‌ها و ارائه تجربه‌ای روان و پایدار در بسترهای بزرگ‌مقیاس سازمانی است.
              </p>

              {/* بج‌های ویژگی‌ها */}
              <div className="flex flex-wrap gap-3 pt-2">
                {['High-Availability', 'Event-Driven', 'Modular Architecture', 'Zero-Trust Security'].map((item) => (
                  <span 
                    key={item} 
                    className="text-xs font-mono px-3 py-1 rounded-md bg-gray-900 border border-gray-800 text-gray-400 hover:border-indigo-500/40 hover:text-indigo-300 transition-colors"
                  >
                    #{item}
                  </span>
                ))}
              </div>
            </motion.div>

            {/* سمت چپ: کارت وضعیت زنده و تله‌متری مهندسی */}
            <motion.div 
              initial={{ opacity: 0, scale: 0.96 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.5, delay: 0.15 }}
              className="lg:col-span-5"
            >
              <div className="relative rounded-2xl p-6 bg-gradient-to-b from-gray-900/90 to-gray-950 border border-indigo-500/20 shadow-2xl backdrop-blur-xl overflow-hidden group">
                
                {/* نور پس‌زمینه کارت */}
                <div className="absolute -top-16 -left-16 w-36 h-36 bg-indigo-500/10 rounded-full blur-2xl group-hover:bg-indigo-500/20 transition-all duration-500" />
                
                {/* هدر مینی ترمینال */}
                <div className="flex items-center justify-between pb-4 border-b border-gray-800/80 mb-5">
                  <div className="flex items-center gap-2">
                    <Terminal className="w-4 h-4 text-indigo-400" />
                    <span className="font-mono text-xs text-gray-300">system.metrics.live</span>
                  </div>
                  <div className="flex gap-1.5">
                    <div className="w-2.5 h-2.5 rounded-full bg-gray-700"></div>
                    <div className="w-2.5 h-2.5 rounded-full bg-gray-700"></div>
                    <div className="w-2.5 h-2.5 rounded-full bg-emerald-500"></div>
                  </div>
                </div>

                {/* آمارهای تله‌متری در قالب شبکه تمیز */}
                <div className="space-y-4">
                  <div className="p-3.5 rounded-xl bg-gray-950/60 border border-gray-800/60 flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <Activity className="w-4 h-4 text-indigo-400" />
                      <span className="text-xs text-gray-400 font-medium">آپ‌تایم و پایداری شبکه</span>
                    </div>
                    <span className="font-mono text-sm font-bold text-emerald-400">99.98% SLA</span>
                  </div>

                  <div className="p-3.5 rounded-xl bg-gray-950/60 border border-gray-800/60 flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <Server className="w-4 h-4 text-sky-400" />
                      <span className="text-xs text-gray-400 font-medium">پردازش تراکنش‌ها</span>
                    </div>
                    <span className="font-mono text-sm font-bold text-white">+10M / Daily</span>
                  </div>

                  <div className="p-3.5 rounded-xl bg-gray-950/60 border border-gray-800/60 flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <CheckCircle2 className="w-4 h-4 text-purple-400" />
                      <span className="text-xs text-gray-400 font-medium">زمان پاسخ‌دهی (Latency)</span>
                    </div>
                    <span className="font-mono text-sm font-bold text-indigo-300">&lt; 25 ms</span>
                  </div>
                </div>

                <div className="mt-5 pt-4 border-t border-gray-800/60 flex justify-between items-center text-[11px] font-mono text-gray-500">
                  <span>Architecture: Distributed CQRS</span>
                  <span className="text-emerald-500 font-semibold">ALL SYSTEMS NOMINAL</span>
                </div>
              </div>
            </motion.div>

          </div>

          {/* ۳ ستون کارت‌های تفکیک مأموریت مهندسی */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-5 pt-4">
            
            <div className="p-5 rounded-xl bg-gray-900/40 border border-gray-800/80 hover:border-indigo-500/30 transition-all group">
              <div className="w-10 h-10 rounded-lg bg-indigo-950/60 border border-indigo-500/20 flex items-center justify-center mb-4 text-indigo-400 group-hover:text-white group-hover:bg-indigo-600/30 transition-colors">
                <Layers className="w-5 h-5" />
              </div>
              <h3 className="text-sm font-bold text-white mb-2">معماری مقیاس‌پذیر و ماژولار</h3>
              <p className="text-xs text-gray-400 leading-relaxed">
                استفاده از الگوهای توزیع‌شده، Message Brokerها و مدیریت بار سنگین برای تضمین انعطاف و توسعه‌پذیری مستمر.
              </p>
            </div>

            <div className="p-5 rounded-xl bg-gray-900/40 border border-gray-800/80 hover:border-indigo-500/30 transition-all group">
              <div className="w-10 h-10 rounded-lg bg-sky-950/60 border border-sky-500/20 flex items-center justify-center mb-4 text-sky-400 group-hover:text-white group-hover:bg-sky-600/30 transition-colors">
                <ShieldCheck className="w-5 h-5" />
              </div>
              <h3 className="text-sm font-bold text-white mb-2">امنیت و استانداردهای بانکی</h3>
              <p className="text-xs text-gray-400 leading-relaxed">
                انطباق با بالاترین شاخص‌های امنیتی مالی، ایزولاسیون سرویس‌ها و احراز هویت یکپارچه سازمانی.
              </p>
            </div>

            <div className="p-5 rounded-xl bg-gray-900/40 border border-gray-800/80 hover:border-indigo-500/30 transition-all group">
              <div className="w-10 h-10 rounded-lg bg-purple-950/60 border border-purple-500/20 flex items-center justify-center mb-4 text-purple-400 group-hover:text-white group-hover:bg-purple-600/30 transition-colors">
                <Activity className="w-5 h-5" />
              </div>
              <h3 className="text-sm font-bold text-white mb-2">پایش و تاب‌آوری بلادرنگ</h3>
              <p className="text-xs text-gray-400 leading-relaxed">
                تله‌متری مداوم، سیستم‌های Failover خودکار و بهینه‌سازی مداوم کوئری‌ها جهت حداقل‌سازی Down-time.
              </p>
            </div>

          </div>

        </section>

        {/* ۲. اعضای هیئت مدیره */}
        <section className="space-y-10">
          <div className="space-y-1 border-b border-gray-800/80 pb-4">
            <h2 className="text-2xl font-bold text-white tracking-tight">ارکان راهبری و هیئت مدیره</h2>
            <p className="text-xs text-gray-500 font-mono uppercase tracking-wider">Leadership & Governance</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {boardMembers.map((member, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 12 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.3, delay: index * 0.08 }}
                className="group relative bg-gray-900/30 border border-gray-800/80 hover:border-indigo-500/30 rounded-xl p-6 flex flex-col items-center text-center transition-all duration-200"
              >
                {/* تصویر پرسنلی / آواتار */}
                <div className="relative w-24 h-24 mb-4 rounded-full p-1 bg-gray-800 group-hover:bg-indigo-900/30 transition-colors">
                  <div className="relative w-full h-full rounded-full overflow-hidden bg-gray-900 flex items-center justify-center">
                    <Cpu className="w-8 h-8 text-gray-600 group-hover:text-indigo-400 transition-colors" />
                    {member.image && (
                      <Image
                        src={member.image}
                        alt={member.name}
                        fill
                        className="object-cover grayscale group-hover:grayscale-0 transition-all duration-300"
                        onError={(e) => {
                          const target = e.target as HTMLElement;
                          target.style.display = 'none';
                        }}
                      />
                    )}
                  </div>
                </div>

                {/* اطلاعات */}
                <h3 className="text-base font-semibold text-white group-hover:text-indigo-200 transition-colors">
                  {member.name}
                </h3>
                
                <span className="text-xs font-medium text-indigo-400 mt-1">
                  {member.role}
                </span>

                <p className="text-[12px] text-gray-500 mt-1.5 font-mono">
                  {member.title}
                </p>

                {/* لینک‌های ارتباطی */}
                <div className="flex items-center gap-2 mt-4 pt-3 border-t border-gray-800/60 w-full justify-center text-gray-400">
                  {member.linkedin && (
                    <a
                      href={member.linkedin}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="p-1.5 rounded-lg hover:text-white hover:bg-gray-800/80 transition-colors"
                      title="پروفایل لینکدین"
                    >
                      <LinkedInIcon className="w-4 h-4" />
                    </a>
                  )}
                  {member.email && (
                    <a
                      href={`mailto:${member.email}`}
                      className="p-1.5 rounded-lg hover:text-white hover:bg-gray-800/80 transition-colors"
                      title="ارسال ایمیل"
                    >
                      <Mail className="w-4 h-4" />
                    </a>
                  )}
                </div>
              </motion.div>
            ))}
          </div>
        </section>

      </main>

      <Footer />
    </div>
  );
}