"use client";

import Image from "next/image";
import { motion } from "motion/react";
import { Server } from "lucide-react";
import { cn } from "@/lib/utils";
import { Marquee } from "@/components/ui/marquee";

const hardwareStack = [
  {
    name: "AMD EPYC™",
    type: "Processor",
    icon: "/asset/images/icons/amd.svg",
    description: "High performance multi-core processing.",
    textColor: "text-red-400",
    color: "bg-red-500/10 border-red-500/20",
  },
  {
    name: "Intel® Xeon®",
    type: "Processor",
    icon: "/asset/images/icons/intel.svg",
    description: "Reliable enterprise grade computing.",
    textColor: "text-indigo-400",
    color: "bg-indigo-500/10 border-indigo-500/20",
  },
  {
    name: "Samsung NVMe",
    type: "Storage",
    icon: "/asset/images/icons/samsung.svg",
    description: "Ultra-fast Gen 4 SSD storage.",
    textColor: "text-blue-400",
    color: "bg-blue-500/10 border-blue-500/20",
  },
  {
    name: "OVHcloud",
    type: "Infrastructure",
    icon: "/asset/images/icons/ovh.svg",
    description: "Global anti-DDoS infrastructure.",
    textColor: "text-accent-text",
    color: "bg-accent-hover/10 border-accent-hover/20",
  },
  {
    name: "Terabix",
    type: "Datacenter",
    icon: "/asset/images/icons/terabix.svg",
    description: "Premium data center facilities.",
    textColor: "text-violet-400",
    color: "bg-violet-500/10 border-violet-500/20",
  },
  {
    name: "HostHatch",
    type: "Network",
    icon: <Server className="w-6 h-6 text-content-dim" />,
    description: "High capacity storage network.",
    textColor: "text-content-dim",
    color: "bg-zinc-500/10 border-zinc-500/20",
  },
];

const softwareStack = [
  {
    name: "Ubuntu Server",
    type: "OS",
    icon: "/asset/images/icons/ubuntu.svg",
    description: "Stable and secure Linux environment.",
    textColor: "text-orange-400",
    color: "bg-orange-500/10 border-orange-500/20",
  },
  {
    name: "Debian",
    type: "OS",
    icon: "/asset/images/icons/debian.svg",
    description: "Robust operating system foundation.",
    textColor: "text-rose-400",
    color: "bg-rose-500/10 border-rose-500/20",
  },
  {
    name: "Pterodactyl",
    type: "Panel",
    icon: "/asset/images/icons/pterodactyl.svg",
    description: "Next-generation game server management.",
    textColor: "text-indigo-400",
    color: "bg-indigo-500/10 border-indigo-500/20",
  },
  {
    name: "Paymenter",
    type: "Billing",
    icon: "/asset/images/icons/paymenter.svg",
    description: "Seamless automated billing gateway.",
    textColor: "text-sky-400",
    color: "bg-sky-500/10 border-sky-500/20",
  },
  {
    name: "Cloudflare",
    type: "Security",
    icon: "/asset/images/icons/cloudflare.svg",
    description: "Global edge network protection.",
    textColor: "text-amber-400",
    color: "bg-amber-500/10 border-amber-500/20",
  },
  {
    name: "Docker",
    type: "Container",
    icon: "/asset/images/icons/docker.svg",
    description: "Isolated resource environments.",
    textColor: "text-cyan-400",
    color: "bg-cyan-500/10 border-cyan-500/20",
  },
];

const TechIcon = ({ icon, textColor }: { icon: string | React.ReactNode; textColor: string }) => {
  if (typeof icon === "string") {
    return (
      <div className={cn("relative w-6 h-6 opacity-80 group-hover:opacity-100 transition-opacity", textColor)}>
        <Image
          src={icon}
          alt="icon"
          fill
          className="object-contain tech-icon-filter"
        />
      </div>
    );
  }
  return (
    <div className="opacity-80 group-hover:opacity-100 transition-opacity">{icon}</div>
  );
};

const TechCard = ({ item }: { item: (typeof hardwareStack)[0] }) => (
  <div
    className="group relative flex items-center gap-3.5 w-64 cursor-pointer overflow-hidden rounded-2xl border border-border/80 bg-surface p-4 mx-3 transition-colors duration-300 hover:border-border-hover hover:bg-elevated"
  >
    <div className={cn("shrink-0 p-2.5 rounded-xl border transition-colors duration-300", item.color)}>
      <TechIcon icon={item.icon} textColor={item.textColor} />
    </div>

    <div className="flex flex-col min-w-0">
      <span className={cn("text-[10px] font-bold uppercase tracking-widest mb-0.5", item.textColor)}>
        {item.type}
      </span>
      <span className="text-sm font-semibold text-white leading-tight truncate">
        {item.name}
      </span>
      <span className="text-[11px] text-content-muted mt-0.5 line-clamp-1 leading-snug">
        {item.description}
      </span>
    </div>
  </div>
);

export default function TechStack() {
  return (
    <section className="relative w-full py-24 md:py-32 overflow-hidden font-sans border-t border-border/80">
      
      <div
        className="absolute inset-0 pointer-events-none z-0 opacity-[0.03]"
        style={{
          backgroundImage:
            "linear-gradient(to right, #ffffff 1px, transparent 1px), linear-gradient(to bottom, #ffffff 1px, transparent 1px)",
          backgroundSize: "40px 40px",
          maskImage:
            "radial-gradient(ellipse 70% 60% at 50% 50%, black 40%, transparent 100%)",
        }}
      />
      
      <div
        className="absolute inset-0 opacity-[0.025] pointer-events-none z-0"
        style={{
          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
          backgroundSize: "128px 128px",
        }}
      />

      <div className="relative z-10 flex flex-col items-center">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.55 }}
          className="text-center mb-16 px-6"
        >
          <div className="flex items-center justify-center gap-3 mb-6">
            <span className="block h-0.5 w-6 bg-accent-hover rounded-full" />
            <p className="text-xs font-bold text-accent-text uppercase tracking-widest">Powered by Giants</p>
          </div>
          
          <h2 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white mb-6 leading-tight tracking-tight">
            World-Class <br />
            <span className="text-accent-text">
              Infrastructure.
            </span>
          </h2>
          
          <p className="text-content-dim max-w-lg mx-auto text-[1rem] md:text-lg leading-relaxed">
            We don't compromise on hardware. Only the best technology runs under the hood to ensure maximum stability.
          </p>
        </motion.div>

        <div className="relative w-full flex flex-col gap-5">
          <div className="relative flex items-center w-full">
            <Marquee pauseOnHover className="[--duration:45s]">
              {hardwareStack.map((item) => (
                <TechCard key={item.name} item={item} />
              ))}
            </Marquee>
          </div>
          
          <div className="relative flex items-center w-full">
            <Marquee reverse pauseOnHover className="[--duration:45s]">
              {softwareStack.map((item) => (
                <TechCard key={item.name} item={item} />
              ))}
            </Marquee>
          </div>
          
          <div className="pointer-events-none absolute inset-y-0 left-0 w-24 md:w-40 z-20 bg-linear-to-r from-base to-transparent" />
          <div className="pointer-events-none absolute inset-y-0 right-0 w-24 md:w-40 z-20 bg-linear-to-l from-base to-transparent" />
        </div>

        <motion.div
          initial={{ opacity: 0, y: 16 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5, delay: 0.2 }}
          className="mt-20 flex flex-wrap items-center justify-center gap-6 md:gap-10 lg:gap-16 px-6"
        >
          {[
            { value: "12+", label: "Tech Partners" },
            { value: "99.9%", label: "Uptime SLA" },
            { value: "Gen 4", label: "NVMe Storage" },
            { value: "10Tbps", label: "DDoS Protection" },
          ].map((stat, i) => (
            <div key={i} className="flex flex-col items-center gap-1.5 text-center">
              <span className="text-2xl md:text-3xl font-semibold text-white tracking-tight">
                {stat.value}
              </span>
              <span className="text-[11px] text-content-muted uppercase tracking-widest font-medium">
                {stat.label}
              </span>
            </div>
          ))}
        </motion.div>
      </div>
    </section>
  );
}