'use client';

import React from "react";
import { 
  Mail, 
  ArrowUp, 
  Terminal, 
  Layers, 
  Cpu, 
  Share2 
} from "lucide-react";

// آیکون‌های SVG استاندارد شبکه‌های اجتماعی
const GithubIcon = ({ className = "w-4 h-4" }) => (
  <svg className={className} fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
    <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
  </svg>
);

const LinkedinIcon = ({ className = "w-4 h-4" }) => (
  <svg className={className} fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
    <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
  </svg>
);

export function Footer() {
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  };

  return (
    <footer dir="rtl" className="relative bg-gray-950 text-gray-400 border-t border-gray-800/80 overflow-hidden font-sans">
      {/* پترن پس‌زمینه گرید ۲۴ پیکسلی */}
      <div 
        className="absolute inset-0 bg-[linear-gradient(to_right,#1f29370f_1px,transparent_1px),linear-gradient(to_bottom,#1f29370f_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none" 
      />

      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
          
          {/* وضعیت سرویس‌ها */}
          <div className="space-y-4">
            <div className="flex items-center gap-2">
              <Terminal className="w-4 h-4 text-indigo-400" />
              <span className="text-xs font-mono font-semibold text-gray-200 uppercase tracking-wider">وضعیت سرویس‌ها</span>
            </div>
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-950/40 border border-emerald-500/30 text-emerald-400 text-xs font-mono">
              <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>پایداری شبکه: ۹۹.۹۹٪</span>
            </div>
            <p className="text-xs text-gray-500 leading-relaxed">
              تمامی میکروسرویس‌ها و پایپ‌لاین‌های پردازش داده در وضعیت عملیاتی پایدار قرار دارند.
            </p>
          </div>

          {/* حوزه‌های تمرکز فنی */}
          <div className="space-y-3">
            <div className="flex items-center gap-2">
              <Layers className="w-4 h-4 text-indigo-400" />
              <h4 className="text-xs font-semibold text-gray-300 uppercase tracking-wider">حوزه‌های تخصصی</h4>
            </div>
            <ul className="space-y-2 text-xs text-gray-400">
              <li className="hover:text-indigo-400 transition-colors">معماری سیستم‌های توزیع‌شده</li>
              <li className="hover:text-indigo-400 transition-colors">سرویس‌های پرترافیک و مقیاس‌پذیر</li>
              <li className="hover:text-indigo-400 transition-colors">پایپ‌لاین‌های رویدادمحور (EDA)</li>
              <li className="hover:text-indigo-400 transition-colors">سیستم‌های برداری و RAG</li>
            </ul>
          </div>

          {/* استک اصلی */}
          <div className="space-y-3">
            <div className="flex items-center gap-2">
              <Cpu className="w-4 h-4 text-indigo-400" />
              <h4 className="text-xs font-semibold text-gray-300 uppercase tracking-wider">فناوری‌های کلیدی</h4>
            </div>
            <ul className="space-y-2 text-xs font-mono text-gray-400 dir-ltr text-right">
              <li>Laravel / FastAPI / Python</li>
              <li>PostgreSQL / Redis / Qdrant</li>
              <li>Kafka / RabbitMQ / Docker</li>
              <li>Next.js / React / Tailwind</li>
            </ul>
          </div>

          {/* راه‌های ارتباطی */}
          <div className="space-y-3">
            <div className="flex items-center gap-2">
              <Share2 className="w-4 h-4 text-indigo-400" />
              <h4 className="text-xs font-semibold text-gray-300 uppercase tracking-wider">ارتباط و شبکه‌ها</h4>
            </div>
            <div className="flex gap-2.5 pt-1">
              <a 
                href="https://github.com" 
                target="_blank" 
                rel="noreferrer" 
                aria-label="GitHub"
                className="p-2.5 bg-gray-900/80 border border-gray-800 rounded-lg text-gray-400 hover:text-white hover:border-gray-700 transition-all hover:scale-105"
              >
                <GithubIcon className="w-4 h-4" />
              </a>
              <a 
                href="https://linkedin.com" 
                target="_blank" 
                rel="noreferrer" 
                aria-label="LinkedIn"
                className="p-2.5 bg-gray-900/80 border border-gray-800 rounded-lg text-gray-400 hover:text-white hover:border-gray-700 transition-all hover:scale-105"
              >
                <LinkedinIcon className="w-4 h-4" />
              </a>
              <a 
                href="mailto:contact@example.com" 
                aria-label="Email"
                className="p-2.5 bg-gray-900/80 border border-gray-800 rounded-lg text-gray-400 hover:text-white hover:border-gray-700 transition-all hover:scale-105"
              >
                <Mail className="w-4 h-4" />
              </a>
            </div>
          </div>
        </div>

        {/* نوار پایینی */}
        <div className="pt-8 border-t border-gray-900/80 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-gray-500">
          <div className="flex items-center gap-2">
           
            <span></span>
            <span>طراحی و توسعه برای دسترس‌پذیری بالا و مقیاس‌پذیری</span>
          </div>

          <button
            onClick={scrollToTop}
            className="flex items-center gap-1.5 px-3.5 py-1.5 rounded-lg bg-gray-900 border border-gray-800 text-gray-400 hover:text-gray-200 hover:border-gray-700 transition-all group"
          >
            <span>بازگشت به بالا</span>
            <ArrowUp className="w-3.5 h-3.5 transition-transform group-hover:-translate-y-0.5" />
          </button>
        </div>
      </div>
    </footer>
  );
}

export default Footer;