"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-blue-600 hover:shadow-2xl hover:shadow-black/40 hover:scale-[1.02] ${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(59, 130, 246, 0.1),
                            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 bg-gray-950 py-24 text-white md:py-32"
            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`);
            }}
        >
            {/* Grid background */}
            <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",
                }}
            />
            {/* Mouse light background */}
            <div
                className="pointer-events-none absolute inset-0 opacity-60 transition-opacity duration-300"
                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">
                
                {/* بخش عنوان که به وسط چین منتقل شده است */}
                <div className="flex flex-col items-center justify-center gap-8 pb-16 text-center">
                    <div className="flex flex-col items-center gap-3">
                        <span className="inline-block rounded-full bg-blue-600/10 px-3 py-1 text-sm font-semibold text-blue-400">
                            خدمات تخصصی
                        </span>
                        <h2 className="text-3xl font-bold tracking-tight md:text-5xl lg:text-6xl">
                            معماری نرم‌افزار مدرن
                        </h2>
                    </div>
                    <p className="max-w-3xl text-lg text-neutral-400 md:text-xl">
                        ارائه راهکارهای جامع بک‌اند، از طراحی میکروسرویس‌ها و پیاده‌سازی CI/CD تا ساخت سیستم‌های هوشمند و مقیاس‌پذیر.
                    </p>
                </div>

                {/* گرید اصلی کارت‌ها */}
                <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
                    
                    {/* Card 1 */}
                    <SpotlightCard>
                        <div>
                            <div className="flex items-center justify-between">
                                <div className="flex h-11 w-11 items-center justify-center rounded-xl border border-blue-600/20 bg-blue-600/10 text-blue-500 shadow-inner">
                                    <Zap 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-blue-400" />
                            </div>
                            <h3 className="mt-5 text-lg font-bold text-white">معماری و توسعه Back-End</h3>
                            <p className="mt-2 text-xs leading-relaxed text-neutral-400 md:text-sm">
                                طراحی و پیاده‌سازی سیستم‌های مقیاس‌پذیر و ماژولار با PHP (Laravel) و Python (FastAPI/Django).
                            </p>
                        </div>
                        <div className="mt-6 rounded-xl border border-white/5 bg-neutral-950/60 p-3 font-mono text-xs space-y-2">
                            <div className="flex items-center justify-between">
                                <span className="text-neutral-400">API Latency:</span>
                                <span className="font-semibold text-emerald-400">{"<40ms"}</span>
                            </div>
                            <div className="flex items-center justify-between">
                                <span className="text-neutral-400">Uptime:</span>
                                <span className="font-semibold text-emerald-400">{"99.99%"}</span>
                            </div>
                        </div>
                    </SpotlightCard>

                    {/* Card 2 */}
                    <SpotlightCard>
                        <div>
                            <div className="flex items-center justify-between">
                                <div className="flex h-11 w-11 items-center justify-center rounded-xl border border-blue-600/20 bg-blue-600/10 text-blue-500 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-blue-400" />
                            </div>
                            <h3 className="mt-5 text-lg font-bold text-white">DevOps و زیرساخت ابری</h3>
                            <p className="mt-2 text-xs leading-relaxed text-neutral-400 md:text-sm">
                                استقرار و مدیریت کانتینرها، اتوماسیون فرآیند CI/CD و انتشار بدون وقفه عملیاتی (Zero-Downtime).
                            </p>
                        </div>
                        <div className="mt-6 flex flex-wrap gap-1.5">
                            {["Docker", "CI/CD", "Kubernetes", "Linux"].map((tag) => (
                                <span key={tag} className="rounded-md border border-white/5 bg-white/[0.05] px-2 py-0.5 font-mono text-[11px] text-neutral-300">
                                    {tag}
                                </span>
                            ))}
                        </div>
                    </SpotlightCard>

                    {/* Card 3 */}
                    <SpotlightCard>
                        <div>
                            <div className="flex items-center justify-between">
                                <div className="flex h-11 w-11 items-center justify-center rounded-xl border border-blue-600/20 bg-blue-600/10 text-blue-500 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-blue-400" />
                            </div>
                            <h3 className="mt-5 text-lg font-bold text-white">مهندسی داده و Event-Driven</h3>
                            <p className="mt-2 text-xs leading-relaxed text-neutral-400 md:text-sm">
                                پیاده‌سازی پایگاه‌های داده رابطه‌ای و NoSQL، کشینگ هوشمند و معماری پیام‌محور نامتقارن.
                            </p>
                        </div>
                        <div className="mt-6 flex flex-wrap gap-1.5">
                            {["PostgreSQL", "Redis", "Kafka", "RabbitMQ"].map((tag) => (
                                <span key={tag} className="rounded-md border border-white/5 bg-white/[0.05] px-2 py-0.5 font-mono text-[11px] text-neutral-300">
                                    {tag}
                                </span>
                            ))}
                        </div>
                    </SpotlightCard>

                    {/* Card 4 */}
                    <SpotlightCard>
                        <div>
                            <div className="flex items-center justify-between">
                                <div className="flex h-11 w-11 items-center justify-center rounded-xl border border-blue-600/20 bg-blue-600/10 text-blue-500 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-blue-400" />
                            </div>
                            <h3 className="mt-5 text-lg font-bold text-white">جستجوی معنایی و هوش مصنوعی</h3>
                            <p className="mt-2 text-xs leading-relaxed text-neutral-400 md:text-sm">
                                استخراج اطلاعات، تعبیه‌سازی وکتورها و بازیابی فوق‌سریع در پایگاه‌های داده معنایی.
                            </p>
                        </div>
                        <div className="mt-6 flex flex-wrap gap-1.5">
                            {["Qdrant", "RAG", "Embeddings", "FastAPI"].map((tag) => (
                                <span key={tag} className="rounded-md border border-white/5 bg-white/[0.05] px-2 py-0.5 font-mono text-[11px] text-neutral-300">
                                    {tag}
                                </span>
                            ))}
                        </div>
                    </SpotlightCard>
                    
                    {/* Card 5 */}
                    <SpotlightCard>
                        <div>
                            <div className="flex items-center justify-between">
                                <div className="flex h-11 w-11 items-center justify-center rounded-xl border border-blue-600/20 bg-blue-600/10 text-blue-500 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-blue-400" />
                            </div>
                            <h3 className="mt-5 text-lg font-bold text-white">پرتال‌های سازمانی و کارتابل</h3>
                            <p className="mt-2 text-xs leading-relaxed text-neutral-400 md:text-sm">
                                طراحی پنل‌های مدیریت فرآیندها (BPMS)، فرم‌سازهای پویا و ماژول‌های سازمانی یکپارچه.
                            </p>
                        </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 border border-white/5 bg-white/[0.05] px-2 py-0.5 font-mono text-[11px] text-neutral-300">
                                    {tag}
                                </span>
                            ))}
                        </div>
                    </SpotlightCard>
                    
                    {/* Card 6 */}
                    <SpotlightCard>
                        <div>
                            <div className="flex items-center justify-between">
                                <div className="flex h-11 w-11 items-center justify-center rounded-xl border border-blue-600/20 bg-blue-600/10 text-blue-500 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-blue-400" />
                            </div>
                            <h3 className="mt-5 text-lg font-bold text-white">امنیت، هویت و دسترسی</h3>
                            <p className="mt-2 text-xs leading-relaxed text-neutral-400 md:text-sm">
                                پیاده‌سازی احراز هویت متمرکز (SSO)، پروتکل‌های OAuth2/OpenID و سیستم‌های RBAC پیشرفته.
                            </p>
                        </div>
                        <div className="mt-6 flex flex-wrap gap-1.5">
                            {["OAuth2", "SSO", "RBAC", "JWT"].map((tag) => (
                                <span key={tag} className="rounded-md border border-white/5 bg-white/[0.05] px-2 py-0.5 font-mono text-[11px] text-neutral-300">
                                    {tag}
                                </span>
                            ))}
                        </div>
                    </SpotlightCard>
                </div>
            </div>
        </section>
    );
}

export default ServicesBentoGrid;