company-site/components/features/services/services-bento-grid.tsx

"use client";

import React from "react";
import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
import { 
  Server, 
  Terminal, 
  Database, 
  ShieldCheck, 
  Cpu, 
  Layers,
  ArrowUpLeft,
  Zap,
  Lock
} from "lucide-react";

// ==========================================
// 1. کامپوننت کارت با افکت ردیابی نور موس
// ==========================================
interface SpotlightCardProps {
  children: React.ReactNode;
  className?: string;
}

function SpotlightCard({ children, className = "" }: SpotlightCardProps) {
  const mouseX = useMotionValue(0);
  const mouseY = useMotionValue(0);

  function handleMouseMove({ currentTarget, clientX, clientY }: React.MouseEvent) {
    const { left, top } = currentTarget.getBoundingClientRect();
    mouseX.set(clientX - left);
    mouseY.set(clientY - top);
  }

  return (
    <div
      onMouseMove={handleMouseMove}
      className={`group relative overflow-hidden rounded-2xl border border-white/10 bg-neutral-900/50 p-6 md:p-8 backdrop-blur-xl transition-all duration-300 hover:border-white/20 hover:shadow-2xl hover:shadow-black/40 ${className}`}
    >
      {/* بازتاب نور داخلی موس در سطح هر کارت */}
      <motion.div
        className="pointer-events-none absolute -inset-px rounded-2xl opacity-0 transition-opacity duration-300 group-hover:opacity-100"
        style={{
          background: useMotionTemplate`
            radial-gradient(
              450px circle at ${mouseX}px ${mouseY}px,
              rgba(255, 255, 255, 0.06),
              transparent 80%
            )
          `,
        }}
      />
      <div className="relative z-10 flex h-full flex-col justify-between">
        {children}
      </div>
    </div>
  );
}

// ==========================================
// 2. بخش اصلی Bento Grid خدمات
// ==========================================
export function ServicesBentoGrid() {
  return (
    <section 
      className="relative overflow-hidden py-24 md:py-32 bg-gray-950 text-white"
      onMouseMove={(e) => {
        const { currentTarget, clientX, clientY } = e;
        const { left, top } = currentTarget.getBoundingClientRect();
        currentTarget.style.setProperty("--mouse-x", `${clientX - left}px`);
        currentTarget.style.setProperty("--mouse-y", `${clientY - top}px`);
      }}
    >
      {/* ۱. الگوی گرید پس‌زمینه کاملاً یکدست و بدون سایه/محوشدگی بالا و پایین */}
      <div
        className="pointer-events-none absolute inset-0 opacity-70"
        style={{
          backgroundImage: `linear-gradient(to right, #80808012 1px, transparent 1px), linear-gradient(to bottom, #80808012 1px, transparent 1px)`,
          backgroundSize: "24px 24px",
        }}
      />

      {/* ۲. افکت نوری موس (Global Spotlight) در سطح سکشن */}
      <div
        className="pointer-events-none absolute inset-0 transition-opacity duration-300 opacity-60"
        style={{
          background: `radial-gradient(750px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.04), transparent 40%)`,
        }}
      />

      {/* ۳. محتوای گرید */}
      <div className="container relative z-10 mx-auto max-w-7xl px-4 md:px-6">
        
        {/* Section Header */}
        <div className="flex flex-col items-start md:items-end justify-between gap-6 pb-16 md:flex-row border-b border-white/10">
          <div className="max-w-2xl space-y-3">
            <div className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-3.5 py-1 text-xs font-mono text-neutral-300 backdrop-blur-md">
              <Zap className="h-3.5 w-3.5 text-amber-400" />
              <span>CAPABILITIES & ARCHITECTURE</span>
            </div>
            <h2 className="text-3xl font-extrabold tracking-tight md:text-4xl lg:text-5xl text-white">
              توسعه زیرساخت و معماری مقیاس‌پذیر
            </h2>
            <p className="text-sm md:text-base text-neutral-400 leading-relaxed font-light">
              طراحی، استقرار و بهینه‌سازی سرویس‌های توزیع‌شده سازمانی با حداکثر پایداری و امنیت تراکنش‌ها.
            </p>
          </div>

          <div className="flex items-center gap-3 text-xs font-mono text-neutral-400 bg-neutral-900/70 px-4 py-2 rounded-xl border border-white/10 backdrop-blur-md">
            <span className="flex h-2 w-2 rounded-full bg-emerald-500 animate-pulse" />
            <span>SYSTEM STATUS: OPERATIONAL</span>
          </div>
        </div>

        {/* Bento Grid (6 Cards) */}
        <div className="mt-12 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
          
          {/* Card 1: Distributed Core Systems */}
          <SpotlightCard>
            <div>
              <div className="flex items-center justify-between">
                <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-blue-500/10 text-blue-400 border border-blue-500/20 shadow-inner">
                  <Server className="h-5 w-5" />
                </div>
                <ArrowUpLeft className="h-5 w-5 text-neutral-500 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-white" />
              </div>
              <h3 className="mt-5 text-lg font-bold text-white">سامانه‌های توزیع‌شده و Core</h3>
              <p className="mt-2 text-xs md:text-sm text-neutral-400 leading-relaxed">
                معماری میکروسرویس با پرفورمنس بالا، مدیریت همزمانی (Concurrency) و پردازش بی‌درنگ داده‌ها.
              </p>
            </div>

            <div className="mt-6 rounded-xl border border-white/5 bg-neutral-950/60 p-3.5 font-mono text-xs">
              <div className="flex items-center justify-between text-neutral-400 pb-2 border-b border-white/5">
                <span>TPS / Throughput</span>
                <span className="text-emerald-400 font-semibold">12,450 req/s</span>
              </div>
              <div className="mt-2 flex items-center justify-between text-[11px] text-neutral-400">
                <span>Avg Latency:</span>
                <span className="text-neutral-200">~8.2ms</span>
              </div>
            </div>

            <div className="mt-6 flex flex-wrap gap-1.5">
              {["Go", "Laravel 11", "FastAPI", "gRPC"].map((tag) => (
                <span key={tag} className="rounded-md bg-white/[0.05] border border-white/5 px-2 py-0.5 font-mono text-[11px] text-neutral-300">
                  {tag}
                </span>
              ))}
            </div>
          </SpotlightCard>

          {/* Card 2: DevOps & Cloud Infrastructure */}
          <SpotlightCard>
            <div>
              <div className="flex items-center justify-between">
                <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-cyan-500/10 text-cyan-400 border border-cyan-500/20 shadow-inner">
                  <Terminal className="h-5 w-5" />
                </div>
                <ArrowUpLeft className="h-5 w-5 text-neutral-500 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-cyan-400" />
              </div>
              <h3 className="mt-5 text-lg font-bold text-white">اتوماسیون زیرساخت و CI/CD</h3>
              <p className="mt-2 text-xs md:text-sm text-neutral-400 leading-relaxed">
                استقرار پیوسته، کانتینرسازی و مانیتورینگ سلامت سرویس‌ها بدون وقفه عملیاتی (Zero-Downtime).
              </p>
            </div>

            <div className="mt-6 rounded-xl border border-white/5 bg-neutral-950/60 p-3 font-mono text-[11px] space-y-1">
              <div className="text-emerald-400 flex items-center justify-between">
                <span>Deployment Status:</span>
                <span>Automated</span>
              </div>
              <div className="text-neutral-400 flex items-center justify-between text-[10px]">
                <span>Pipeline Stage:</span>
                <span>Success (CI/CD)</span>
              </div>
            </div>

            <div className="mt-6 flex flex-wrap gap-1.5">
              {["Docker", "CI/CD", "Kubernetes", "Linux"].map((tag) => (
                <span key={tag} className="rounded-md bg-white/[0.05] border border-white/5 px-2 py-0.5 font-mono text-[11px] text-neutral-300">
                  {tag}
                </span>
              ))}
            </div>
          </SpotlightCard>

          {/* Card 3: Data Engineering & Messaging */}
          <SpotlightCard>
            <div>
              <div className="flex items-center justify-between">
                <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-purple-500/10 text-purple-400 border border-purple-500/20 shadow-inner">
                  <Database className="h-5 w-5" />
                </div>
                <ArrowUpLeft className="h-5 w-5 text-neutral-500 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-purple-400" />
              </div>
              <h3 className="mt-5 text-lg font-bold text-white">مهندسی داده و Event-Driven</h3>
              <p className="mt-2 text-xs md:text-sm text-neutral-400 leading-relaxed">
                پیاده‌سازی پایگاه‌های داده رابطه‌ای و NoSQL، کشینگ هوشمند و معماری پیام‌محور نامتقارن.
              </p>
            </div>

            <div className="mt-6 rounded-xl border border-white/5 bg-neutral-950/60 p-3 font-mono text-xs flex justify-between items-center">
              <span className="text-neutral-400">Queue Ingestion:</span>
              <span className="text-purple-400 font-semibold">Kafka / RabbitMQ</span>
            </div>

            <div className="mt-6 flex flex-wrap gap-1.5">
              {["PostgreSQL", "Redis", "Kafka", "RabbitMQ"].map((tag) => (
                <span key={tag} className="rounded-md bg-white/[0.05] border border-white/5 px-2 py-0.5 font-mono text-[11px] text-neutral-300">
                  {tag}
                </span>
              ))}
            </div>
          </SpotlightCard>

          {/* Card 4: AI & Vector Databases */}
          <SpotlightCard>
            <div>
              <div className="flex items-center justify-between">
                <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-amber-500/10 text-amber-400 border border-amber-500/20 shadow-inner">
                  <Cpu className="h-5 w-5" />
                </div>
                <ArrowUpLeft className="h-5 w-5 text-neutral-500 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-amber-400" />
              </div>
              <h3 className="mt-5 text-lg font-bold text-white">جستجوی معنایی و هوش مصنوعی</h3>
              <p className="mt-2 text-xs md:text-sm text-neutral-400 leading-relaxed">
                استخراج اطلاعات، تعبیه‌سازی وکتورها و بازیابی فوق‌سریع در پایگاه‌های داده معنایی.
              </p>
            </div>

            <div className="mt-6 rounded-xl border border-white/5 bg-neutral-950/60 p-3 font-mono text-xs flex justify-between items-center">
              <span className="text-neutral-400">Vector Dimension:</span>
              <span className="text-amber-400 font-semibold">1536d (HNSW)</span>
            </div>

            <div className="mt-6 flex flex-wrap gap-1.5">
              {["Qdrant", "RAG", "Embeddings", "FastAPI"].map((tag) => (
                <span key={tag} className="rounded-md bg-white/[0.05] border border-white/5 px-2 py-0.5 font-mono text-[11px] text-neutral-300">
                  {tag}
                </span>
              ))}
            </div>
          </SpotlightCard>

          {/* Card 5: Enterprise Portals & Workflows */}
          <SpotlightCard>
            <div>
              <div className="flex items-center justify-between">
                <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 shadow-inner">
                  <Layers className="h-5 w-5" />
                </div>
                <ArrowUpLeft className="h-5 w-5 text-neutral-500 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-emerald-400" />
              </div>
              <h3 className="mt-5 text-lg font-bold text-white">پرتال‌های سازمانی و کارتابل</h3>
              <p className="mt-2 text-xs md:text-sm text-neutral-400 leading-relaxed">
                طراحی پنل‌های مدیریت فرآیندها (BPMS)، فرم‌سازهای پویا و ماژول‌های سازمانی یکپارچه.
              </p>
            </div>

            <div className="mt-6 rounded-xl border border-white/5 bg-neutral-950/60 p-3 font-mono text-xs flex justify-between items-center">
              <span className="text-neutral-400">Workflow Engine:</span>
              <span className="text-emerald-400 font-semibold">Active State</span>
            </div>

            <div className="mt-6 flex flex-wrap gap-1.5">
              {["Filament 3", "Next.js", "TypeScript", "Tailwind"].map((tag) => (
                <span key={tag} className="rounded-md bg-white/[0.05] border border-white/5 px-2 py-0.5 font-mono text-[11px] text-neutral-300">
                  {tag}
                </span>
              ))}
            </div>
          </SpotlightCard>

          {/* Card 6: Enterprise Security & Auth */}
          <SpotlightCard>
            <div>
              <div className="flex items-center justify-between">
                <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-rose-500/10 text-rose-400 border border-rose-500/20 shadow-inner">
                  <ShieldCheck className="h-5 w-5" />
                </div>
                <ArrowUpLeft className="h-5 w-5 text-neutral-500 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-rose-400" />
              </div>
              <h3 className="mt-5 text-lg font-bold text-white">امنیت، هویت و دسترسی سازمانی</h3>
              <p className="mt-2 text-xs md:text-sm text-neutral-400 leading-relaxed">
                پیاده‌سازی احراز هویت متمرکز (SSO)، پروتکل‌های OAuth2/OpenID و سیستم‌های RBAC پیشرفته.
              </p>
            </div>

            <div className="mt-6 rounded-xl border border-white/5 bg-neutral-950/60 p-3 font-mono text-xs flex justify-between items-center">
              <span className="text-neutral-400 flex items-center gap-1.5">
                <Lock className="h-3 w-3 text-rose-400" />
                Audit Logging:
              </span>
              <span className="text-rose-400 font-semibold">Encrypted (AES-256)</span>
            </div>

            <div className="mt-6 flex flex-wrap gap-1.5">
              {["OAuth2", "SSO", "RBAC", "JWT"].map((tag) => (
                <span key={tag} className="rounded-md bg-white/[0.05] border border-white/5 px-2 py-0.5 font-mono text-[11px] text-neutral-300">
                  {tag}
                </span>
              ))}
            </div>
          </SpotlightCard>

        </div>
      </div>
    </section>
  );
}

export default ServicesBentoGrid;