"use client";

import { AnimatedSection } from "@/shared/components/animated-section";
import { SectionHeading } from "@/shared/components/section-heading";
import {
  Database,
  Server,
  Smartphone,
  Globe,
  Container,
  Shield,
  Cpu,
  Layers,
  GitBranch,
  MonitorSmartphone,
  Cloud,
  Workflow,
} from "lucide-react";

interface TechItem {
  name: string;
  icon: React.ReactNode;
}

interface TechCategory {
  title: string;
  description: string;
  items: TechItem[];
  accent: string;
}

const techCategories: TechCategory[] = [
  {
    title: "Enterprise Backend",
    description: "Core systems & microservices",
    accent: "from-blue-500 to-cyan-500",
    items: [
      { name: "Java", icon: <Cpu size={22} /> },
      { name: "Spring Boot", icon: <Layers size={22} /> },
      { name: "Apache Kafka", icon: <Workflow size={22} /> },
      { name: "REST API", icon: <Server size={22} /> },
      { name: "gRPC", icon: <GitBranch size={22} /> },
      { name: "Spring Security", icon: <Shield size={22} /> },
    ],
  },
  {
    title: "Database & Infrastructure",
    description: "Data management & DevOps",
    accent: "from-emerald-500 to-teal-500",
    items: [
      { name: "PostgreSQL", icon: <Database size={22} /> },
      { name: "Redis", icon: <Database size={22} /> },
      { name: "Docker", icon: <Container size={22} /> },
      { name: "Kubernetes", icon: <Cloud size={22} /> },
      { name: "Jenkins CI/CD", icon: <GitBranch size={22} /> },
      { name: "Nginx", icon: <Server size={22} /> },
    ],
  },
  {
    title: "Frontend Development",
    description: "Modern web interfaces",
    accent: "from-violet-500 to-purple-500",
    items: [
      { name: "React / Next.js", icon: <Globe size={22} /> },
      { name: "TypeScript", icon: <Cpu size={22} /> },
      { name: "Tailwind CSS", icon: <Layers size={22} /> },
      { name: "Framer Motion", icon: <Workflow size={22} /> },
    ],
  },
  {
    title: "Mobile Development",
    description: "Cross-platform apps",
    accent: "from-orange-500 to-rose-500",
    items: [
      { name: "React Native", icon: <Smartphone size={22} /> },
      { name: "Flutter", icon: <MonitorSmartphone size={22} /> },
    ],
  },
];

export function TechStackSection() {
  return (
    <section
      id="tech-stack"
      className="section-padding relative bg-muted/30"
    >
      {/* Subtle background */}
      <div className="absolute inset-0 grid-pattern opacity-20" />

      <div className="relative max-w-6xl mx-auto px-6">
        <AnimatedSection>
          <SectionHeading
            badge="Tech Arsenal"
            title="Technology Stack"
            subtitle="A comprehensive toolkit forged through years of enterprise development, from backend infrastructure to mobile interfaces."
          />
        </AnimatedSection>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {techCategories.map((category, catIndex) => (
            <AnimatedSection key={category.title} delay={catIndex * 0.1}>
              <div className="group relative h-full p-6 rounded-2xl bg-card border border-border/50 hover:border-accent/30 transition-all duration-500 hover:shadow-lg">
                {/* Category header */}
                <div className="flex items-center gap-3 mb-4">
                  <div
                    className={`w-10 h-10 rounded-xl bg-gradient-to-br ${category.accent} flex items-center justify-center text-white shadow-lg`}
                  >
                    <Layers size={18} />
                  </div>
                  <div>
                    <h3 className="font-bold text-sm">{category.title}</h3>
                    <p className="text-xs text-muted-foreground">
                      {category.description}
                    </p>
                  </div>
                </div>

                {/* Tech items grid */}
                <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
                  {category.items.map((tech) => (
                    <div
                      key={tech.name}
                      className="flex items-center gap-2.5 px-3 py-2.5 rounded-xl bg-muted/50 border border-border/30 hover:border-accent/30 hover:bg-accent/5 transition-all duration-300 group/item"
                    >
                      <span className="text-muted-foreground group-hover/item:text-accent transition-colors">
                        {tech.icon}
                      </span>
                      <span className="text-xs font-mono font-medium truncate">
                        {tech.name}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            </AnimatedSection>
          ))}
        </div>
      </div>
    </section>
  );
}