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,
  Activity,
  Zap,
  CheckCircle2,
  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-border/50 bg-gradient-to-b from-card/80 to-card/30 p-6 md:p-8 backdrop-blur-xl transition-all duration-300 hover:border-primary/50 hover:shadow-2xl hover:shadow-primary/5 ${className}`}
    >
      {/* Dynamic Cursor Light */}
      <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,
              hsl(var(--primary) / 0.12),
              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-background">
      {/* Ambient Background Grid & Glows */}
      <div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:28px_28px]" />
      <div className="absolute -top-40 right-1/4 h-96 w-96 rounded-full bg-primary/10 blur-[120px] pointer-events-none" />
      <div className="absolute -bottom-40 left-1/4 h-96 w-96 rounded-full bg-blue-500/10 blur-[120px] pointer-events-none" />

      <div className="container relative 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-border/40">
          <div className="max-w-2xl space-y-3">
            <div className="inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-3 py-1 text-xs font-mono text-primary">
              <Zap className="h-3.5 w-3.5" />
              <span>CAPABILITIES & ARCHITECTURE</span>
            </div>
            <h2 className="text-3xl font-extrabold tracking-tight md:text-4xl lg:text-5xl text-foreground">
              توسعه زیرساخت و معماری مقیاس‌پذیر
            </h2>
            <p className="text-sm md:text-base text-muted-foreground leading-relaxed">
              طراحی، استقرار و بهینه‌سازی سرویس‌های توزیع‌شده سازمانی با حداکثر پایداری و امنیت تراکنش‌ها.
            </p>
          </div>

          <div className="flex items-center gap-4 text-xs font-mono text-muted-foreground bg-muted/40 px-4 py-2 rounded-lg border border-border/40">
            <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-primary/10 text-primary border border-primary/20 shadow-inner">
                  <Server className="h-5 w-5" />
                </div>
                <ArrowUpLeft className="h-5 w-5 text-muted-foreground/40 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-primary" />
              </div>
              <h3 className="mt-5 text-lg font-bold text-foreground">سامانه‌های توزیع‌شده و Core</h3>
              <p className="mt-2 text-xs md:text-sm text-muted-foreground leading-relaxed">
                معماری میکروسرویس با پرفورمنس بالا، مدیریت همزمانی (Concurrency) و پردازش بی‌درنگ داده‌ها.
              </p>
            </div>

            <div className="mt-6 rounded-xl border border-border/40 bg-background/60 p-3.5 font-mono text-xs">
              <div className="flex items-center justify-between text-muted-foreground pb-2 border-b border-border/30">
                <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-muted-foreground">
                <span>Avg Latency:</span>
                <span className="text-foreground">~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-secondary/80 px-2 py-0.5 font-mono text-[11px] text-secondary-foreground">
                  {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-blue-500/10 text-blue-400 border border-blue-500/20 shadow-inner">
                  <Terminal className="h-5 w-5" />
                </div>
                <ArrowUpLeft className="h-5 w-5 text-muted-foreground/40 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-blue-400" />
              </div>
              <h3 className="mt-5 text-lg font-bold text-foreground">اتوماسیون زیرساخت و CI/CD</h3>
              <p className="mt-2 text-xs md:text-sm text-muted-foreground leading-relaxed">
                استقرار پیوسته، کانتینرسازی و مانیتورینگ سلامت سرویس‌ها بدون وقفه عملیاتی (Zero-Downtime).
              </p>
            </div>

            <div className="mt-6 rounded-xl border border-border/40 bg-background/80 p-3 font-mono text-[11px] space-y-1">
              <div className="text-muted-foreground flex items-center gap-1.5">
                <CheckCircle2 className="h-3 w-3 text-emerald-400" />
                <span>Cluster Node Health: 100%</span>
              </div>
              <div className="text-primary flex items-center gap-1.5">
                <Activity className="h-3 w-3" />
                <span>Rolling deployment synced</span>
              </div>
            </div>

            <div className="mt-6 flex flex-wrap gap-1.5">
              {["Docker", "Kubernetes", "CI/CD", "Prometheus"].map((tag) => (
                <span key={tag} className="rounded-md bg-secondary/80 px-2 py-0.5 font-mono text-[11px] text-secondary-foreground">
                  {tag}
                </span>
              ))}
            </div>
          </SpotlightCard>

          {/* Card 3: Data Engineering & Queues */}
          <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-muted-foreground/40 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-foreground">مهندسی داده و Event-Driven</h3>
              <p className="mt-2 text-xs md:text-sm text-muted-foreground leading-relaxed">
                پیاده‌سازی پایگاه‌های داده رابطه‌ای و NoSQL، کشینگ هوشمند و معماری پیام‌محور نامتقارن.
              </p>
            </div>

            <div className="mt-6 rounded-xl border border-border/40 bg-background/60 p-3 font-mono text-xs flex justify-between items-center">
              <span className="text-muted-foreground">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-secondary/80 px-2 py-0.5 font-mono text-[11px] text-secondary-foreground">
                  {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-muted-foreground/40 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-foreground">جستجوی معنایی و هوش مصنوعی</h3>
              <p className="mt-2 text-xs md:text-sm text-muted-foreground leading-relaxed">
                استخراج اطلاعات، تعبیه‌سازی وکتورها و بازیابی فوق‌سریع در پایگاه‌های داده معنایی.
              </p>
            </div>

            <div className="mt-6 rounded-xl border border-border/40 bg-background/60 p-3 font-mono text-xs flex justify-between items-center">
              <span className="text-muted-foreground">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-secondary/80 px-2 py-0.5 font-mono text-[11px] text-secondary-foreground">
                  {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-muted-foreground/40 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-foreground">پرتال‌های سازمانی و کارتابل</h3>
              <p className="mt-2 text-xs md:text-sm text-muted-foreground leading-relaxed">
                طراحی پنل‌های مدیریت فرآیندها (BPMS)، فرم‌سازهای پویا و ماژول‌های سازمانی یکپارچه.
              </p>
            </div>

            <div className="mt-6 rounded-xl border border-border/40 bg-background/60 p-3 font-mono text-xs flex justify-between items-center">
              <span className="text-muted-foreground">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-secondary/80 px-2 py-0.5 font-mono text-[11px] text-secondary-foreground">
                  {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-muted-foreground/40 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-foreground">امنیت، هویت و دسترسی سازمانی</h3>
              <p className="mt-2 text-xs md:text-sm text-muted-foreground leading-relaxed">
                پیاده‌سازی احراز هویت متمرکز (SSO)، پروتکل‌های OAuth2/OpenID و سیستم‌های RBAC پیشرفته.
              </p>
            </div>

            <div className="mt-6 rounded-xl border border-border/40 bg-background/60 p-3 font-mono text-xs flex justify-between items-center">
              <span className="text-muted-foreground 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-secondary/80 px-2 py-0.5 font-mono text-[11px] text-secondary-foreground">
                  {tag}
                </span>
              ))}
            </div>
          </SpotlightCard>

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

export default ServicesBentoGrid;