'use client';

import React, { useState } from 'react';
import { motion } from 'framer-motion';
import {
  Terminal,
  Send,
  ShieldCheck,
  CheckCircle2,
  Server,
  Database,
  Cpu,
  Mail,
  Phone,
  MapPin,
  Clock,
  Layers,
  Sparkles
} from 'lucide-react';

// دسته‌بندی‌های فنی پروژه
const projectCategories = [
  { id: 'core-banking', label: 'سامانه‌ها و ماژول‌های بانکی', icon: Server },
  { id: 'db-optimization', label: 'پایگاه‌داده و مقیاس‌پذیری', icon: Database },
  { id: 'ai-engine', label: 'هوش مصنوعی و پردازش اسناد', icon: Cpu },
  { id: 'custom-platform', label: 'داشبوردها و سامانه‌های عملیاتی', icon: Layers }
];

// مراحل اجرای پروژه
const workflowSteps = [
  {
    step: '01',
    title: 'ارزیابی فنی اولیه (Discovery)',
    desc: 'بررسی ساختار، نیازمندی‌های مقیاس‌پذیری و مشخصات دامنه کسب‌وکار در جلسات فنی مشترک.'
  },
  {
    step: '02',
    title: 'طراحی معماری و قرارداد SLA',
    desc: 'تدوین بلوک‌های دیاگرام معماری، تعیین استک فنی، استانداردسازی امنیتی و شاخص‌های کیفی.'
  },
  {
    step: '03',
    title: 'توسعه اسپرینت‌محور و ایزوله',
    desc: 'پیاده‌سازی ماژول‌ها همراه با خطوط CI/CD خودکار، کانتینرسازی و تست‌های مداوم پوشش کد.'
  },
  {
    step: '04',
    title: 'تست بار، بازبینی و استقرار',
    desc: 'انجام بنچ‌مارک‌های زیر بار سنگین، بازرسی‌های امنیتی و لانچ نهایی بدون Downtime.'
  }
];

export default function ContactPage() {
  const [selectedCategory, setSelectedCategory] = useState('core-banking');
  const [formSubmitted, setFormSubmitted] = useState(false);
  const [ticketId, setTicketId] = useState('');
  const [formData, setFormData] = useState({
    fullName: '',
    organization: '',
    email: '',
    phone: '',
    description: ''
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // تولید شناسه تیکت در سمت کلاینت برای جلوگیری از خطای Hydration
    const generatedId = Math.floor(100000 + Math.random() * 900000).toString();
    setTicketId(generatedId);
    setFormSubmitted(true);
  };

  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 Ambient Gradients */}
      <div className="fixed inset-0 bg-[radial-gradient(ellipse_70%_60%_at_50%_-10%,rgba(99,102,241,0.09),rgba(255,255,255,0))] pointer-events-none" />
      <div className="fixed inset-0 bg-[linear-gradient(to_right,#1f293712_1px,transparent_1px),linear-gradient(to_bottom,#1f293712_1px,transparent_1px)] bg-[size:40px_40px] pointer-events-none" />

      <main className="relative max-w-6xl mx-auto px-6 py-16 w-full space-y-16">
        
        {/* ۱. Hero Section */}
        <section className="text-center max-w-3xl mx-auto space-y-5">
          <motion.div
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.4 }}
            className="inline-flex items-center gap-2 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"
          >
            <Terminal className="w-3.5 h-3.5 text-indigo-400" />
            <span>KICKOFF & COLLABORATION TERMINAL</span>
          </motion.div>

          <motion.h1
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.1 }}
            className="text-3xl sm:text-5xl font-black tracking-tight leading-[1.2] text-white"
          >
            آغاز یک همکاری مهندسی، <br />
            <span className="text-transparent bg-clip-text bg-gradient-to-l from-indigo-400 via-sky-300 to-white">
              پایدار و فراتر از مقیاس
            </span>
          </motion.h1>

          <motion.p
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="text-gray-400 text-sm sm:text-base leading-relaxed"
          >
            آماده هم‌افزایی فنی جهت طراحی و اجرای ماژول‌های با پرفورمنس بالا، بازطراحی زیرساخت‌های قدیمی و راهکارهای یکپارچه سازمانی.
          </motion.p>
        </section>

        {/* ۲. Main Form & Side Info Section */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
          
          {/* ستون فرم شروع پروژه (۸ ستون) */}
          <motion.div 
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.5, delay: 0.25 }}
            className="lg:col-span-8 p-6 sm:p-8 rounded-2xl bg-gray-900/40 border border-gray-800/80 backdrop-blur-md shadow-2xl relative"
          >
            {formSubmitted ? (
              <div className="text-center py-12 space-y-4">
                <div className="w-16 h-16 mx-auto rounded-2xl bg-emerald-500/10 border border-emerald-500/30 flex items-center justify-center text-emerald-400">
                  <CheckCircle2 className="w-8 h-8" />
                </div>
                <h3 className="text-xl font-bold text-white">درخواست با موفقیت ثبت شد</h3>
                <p className="text-sm text-gray-400 max-w-md mx-auto leading-relaxed">
                  مشخصات اولیه دریافت شد. تیم فنی حداکثر ظرف ۲۴ ساعت کاری جهت هماهنگی جلسه ارزیابی اولیه با شما تماس خواهند گرفت.
                </p>
                <div className="pt-3 font-mono text-xs text-indigo-400 bg-indigo-950/30 py-2 px-4 rounded-lg inline-block border border-indigo-500/20">
                  SYSTEM TICKET: #REQ-{ticketId}
                </div>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="space-y-6">
                
                {/* انتخاب نوع پروژه */}
                <div className="space-y-3">
                  <label className="block text-xs font-mono text-gray-400">
                    // ۰۱. نوع پروژه و قلمرو فنی:
                  </label>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    {projectCategories.map((cat) => {
                      const Icon = cat.icon;
                      const active = selectedCategory === cat.id;
                      return (
                        <button
                          type="button"
                          key={cat.id}
                          onClick={() => setSelectedCategory(cat.id)}
                          className={`flex items-center gap-3 p-3 rounded-xl border text-right transition-all duration-200 text-xs font-medium ${
                            active
                              ? 'border-indigo-500 bg-indigo-950/40 text-white shadow-sm ring-1 ring-indigo-500/40'
                              : 'border-gray-800 bg-gray-950/50 text-gray-400 hover:border-gray-700 hover:text-gray-300'
                          }`}
                        >
                          <Icon className={`w-4 h-4 shrink-0 ${active ? 'text-indigo-400' : 'text-gray-500'}`} />
                          <span>{cat.label}</span>
                        </button>
                      );
                    })}
                  </div>
                </div>

                {/* فیلدهای مشخصات اولیه */}
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <label className="block text-xs font-mono text-gray-400">نام و نام خانوادگی:</label>
                    <input
                      required
                      type="text"
                      placeholder="مثال: علی رضایی"
                      className="w-full px-4 py-2.5 rounded-xl bg-gray-950 border border-gray-800 text-sm text-gray-200 focus:outline-none focus:border-indigo-500 transition-colors"
                      value={formData.fullName}
                      onChange={(e) => setFormData({ ...formData, fullName: e.target.value })}
                    />
                  </div>
                  <div className="space-y-2">
                    <label className="block text-xs font-mono text-gray-400">سازمان / شرکت:</label>
                    <input
                      required
                      type="text"
                      placeholder="مثال: هلدینگ / بانک"
                      className="w-full px-4 py-2.5 rounded-xl bg-gray-950 border border-gray-800 text-sm text-gray-200 focus:outline-none focus:border-indigo-500 transition-colors"
                      value={formData.organization}
                      onChange={(e) => setFormData({ ...formData, organization: e.target.value })}
                    />
                  </div>
                  <div className="space-y-2">
                    <label className="block text-xs font-mono text-gray-400">ایمیل سازمانی:</label>
                    <input
                      required
                      type="email"
                      placeholder="name@domain.com"
                      className="w-full px-4 py-2.5 rounded-xl bg-gray-950 border border-gray-800 text-sm text-gray-200 focus:outline-none focus:border-indigo-500 transition-colors font-sans"
                      value={formData.email}
                      onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                    />
                  </div>
                  <div className="space-y-2">
                    <label className="block text-xs font-mono text-gray-400">شماره تماس مستقیم:</label>
                    <input
                      required
                      type="tel"
                      placeholder="09120000000"
                      className="w-full px-4 py-2.5 rounded-xl bg-gray-950 border border-gray-800 text-sm text-gray-200 focus:outline-none focus:border-indigo-500 transition-colors font-sans"
                      value={formData.phone}
                      onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                    />
                  </div>
                </div>

                {/* توضیحات نیازمندی‌ها */}
                <div className="space-y-2">
                  <label className="block text-xs font-mono text-gray-400">
                    توضیحات و خلاصه نیازمندی‌های فنی:
                  </label>
                  <textarea
                    rows={4}
                    placeholder="شرح مسئله، ماژول‌های مدنظر، ددلاین‌ها یا ویژگی‌های معماری..."
                    className="w-full px-4 py-3 rounded-xl bg-gray-950 border border-gray-800 text-sm text-gray-200 focus:outline-none focus:border-indigo-500 transition-colors resize-none leading-relaxed"
                    value={formData.description}
                    onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                  />
                </div>

                {/* دکمه ارسال و تضمین محرمانگی */}
                <div className="pt-2 flex flex-col sm:flex-row items-center justify-between gap-4">
                  <div className="flex items-center gap-2 text-[11px] text-gray-500">
                    <ShieldCheck className="w-4 h-4 text-emerald-400 shrink-0" />
                    <span>تضمین محرمانگی اطلاعات تحت توافق‌نامه سازمانی NDA.</span>
                  </div>

                  <button
                    type="submit"
                    className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-bold transition-all duration-200 shadow-lg shadow-indigo-600/20 active:scale-95 cursor-pointer"
                  >
                    <span>ارسال درخواست ارزیابی</span>
                    <Send className="w-3.5 h-3.5 rtl:-rotate-90" />
                  </button>
                </div>
              </form>
            )}
          </motion.div>

          {/* ستون اطلاعات ارتباطی و مستقیم (۴ ستون) */}
          <motion.div 
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.5, delay: 0.3 }}
            className="lg:col-span-4 space-y-4"
          >
            {/* کارت ارتباط مستقیم */}
            <div className="p-6 rounded-2xl bg-gray-900/40 border border-gray-800/80 space-y-5">
              <h3 className="text-sm font-bold text-white flex items-center gap-2">
                <Sparkles className="w-4 h-4 text-indigo-400" />
                <span>کانال‌های ارتباط مستقیم</span>
              </h3>

              <div className="space-y-4">
                <div className="flex items-start gap-3 text-xs">
                  <div className="p-2 rounded-lg bg-gray-950 border border-gray-800 text-indigo-400 shrink-0">
                    <Mail className="w-4 h-4" />
                  </div>
                  <div>
                    <span className="block text-[11px] text-gray-500 font-mono">DIRECT INBOX</span>
                    <span className="text-gray-300 font-mono select-all">engineering@domain.ir</span>
                  </div>
                </div>

                <div className="flex items-start gap-3 text-xs">
                  <div className="p-2 rounded-lg bg-gray-950 border border-gray-800 text-sky-400 shrink-0">
                    <Phone className="w-4 h-4" />
                  </div>
                  <div>
                    <span className="block text-[11px] text-gray-500 font-mono">TECHNICAL LINE</span>
                    <span className="text-gray-300 font-mono dir-ltr">+98 (21) 8800-0000</span>
                  </div>
                </div>

                <div className="flex items-start gap-3 text-xs">
                  <div className="p-2 rounded-lg bg-gray-950 border border-gray-800 text-emerald-400 shrink-0">
                    <MapPin className="w-4 h-4" />
                  </div>
                  <div>
                    <span className="block text-[11px] text-gray-500 font-mono">LOCATION</span>
                    <span className="text-gray-300 leading-relaxed">تهران، نارمک، پردیس نوآوری</span>
                  </div>
                </div>
              </div>
            </div>

            {/* کارت تعهد SLA */}
            <div className="p-5 rounded-2xl bg-gradient-to-br from-indigo-950/20 to-gray-900/40 border border-indigo-500/20 space-y-2">
              <div className="flex items-center gap-2 text-indigo-300 text-xs font-bold">
                <Clock className="w-3.5 h-3.5" />
                <span>تضمین پاسخ‌گویی فنی</span>
              </div>
              <p className="text-xs text-gray-400 leading-relaxed">
                تمام درخواست‌های پروژه‌ای ظرف حداکثر ۲۴ ساعت مورد بررسی معماری قرار گرفته و پروپوزال فازبندی آماده می‌گردد.
              </p>
            </div>
          </motion.div>

        </div>

        {/* ۳. نقشه راه و پایپ‌لاین همکاری (Workflow) */}
        <section className="space-y-6 pt-4">
          <div className="flex items-center gap-2 text-xs font-mono text-gray-400">
            <span className="w-2 h-2 rounded-full bg-indigo-500"></span>
            <span>// ۰۲. مراحل آغاز تا تحویل عملیاتی:</span>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {workflowSteps.map((item, idx) => (
              <div
                key={idx}
                className="p-5 rounded-2xl bg-gray-900/30 border border-gray-800/80 hover:border-gray-700 transition-all flex flex-col justify-between"
              >
                <div>
                  <span className="font-mono text-2xl font-black text-transparent bg-clip-text bg-gradient-to-l from-indigo-400 to-white block mb-3">
                    {item.step}
                  </span>
                  <h4 className="text-sm font-bold text-gray-200 mb-2">{item.title}</h4>
                  <p className="text-xs text-gray-400 leading-relaxed">{item.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </section>

      </main>

      {/* Footer ساده و هماهنگ */}
      <footer className="border-t border-gray-900 py-6 text-center text-xs text-gray-600 font-mono">
        SYSTEM ENGINEERING // ENTERPRISE ARCHITECTURE
      </footer>
    </div>
  );
}