import ScrollReveal from "./ScrollReveal";

const categories = [
  {
    name: "Routing & Switching",
    items: ["Ross Ultrix", "Ross Carbonite", "Blackmagic ATEM", "Grass Valley Kahuna", "Evertz EQX"],
  },
  {
    name: "Production",
    items: ["Ross XPression", "vMix", "Vizrt", "NewTek TriCaster", "OBS / Custom RTMP"],
  },
  {
    name: "Signal Transport",
    items: ["SMPTE ST 2110", "NDI", "SRT", "SDI (12G/3G)", "Dante Audio"],
  },
  {
    name: "Infrastructure",
    items: ["IP Networking", "Fiber Infrastructure", "KVM Systems", "UPS & Power", "Cooling & Ventilation"],
  },
  {
    name: "Cloud & Remote",
    items: ["AWS Media", "Remote Production", "Bonded Cellular", "SaaS Playout", "CDN Distribution"],
  },
  {
    name: "Display & XR",
    items: ["LED Processing", "Unreal Engine", "Camera Tracking", "Projection", "Color Management"],
  },
];

export default function TechStack() {
  return (
    <section className="py-24 md:py-32 bg-surface border-t border-border">
      <div className="max-w-6xl mx-auto px-6">
        <ScrollReveal>
          <div className="max-w-3xl mb-16">
            <div className="w-10 h-px bg-accent mb-6 glow-accent-sm" />
            <p className="font-mono text-[10px] tracking-[0.3em] uppercase text-accent mb-4">
              Technology
            </p>
            <h2 className="text-3xl md:text-4xl font-semibold text-white leading-tight mb-5">
              Tools of the <span className="text-gradient">trade.</span>
            </h2>
            <p className="text-white/55 leading-relaxed">
              Deep experience across the full broadcast technology stack, from
              traditional SDI infrastructure to modern IP and cloud-native
              production platforms.
            </p>
          </div>
        </ScrollReveal>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10">
          {categories.map((cat, i) => (
            <ScrollReveal key={cat.name} delay={i * 80}>
              <div>
                <h3 className="text-sm font-semibold text-white/90 mb-4">
                  {cat.name}
                </h3>
                <div className="flex flex-wrap gap-2">
                  {cat.items.map((item) => (
                    <span
                      key={item}
                      className="px-3 py-1.5 text-[12px] font-medium bg-surface-card border border-border text-white/55 rounded-md hover:bg-accent/10 hover:border-accent/20 hover:text-accent transition-all duration-200"
                    >
                      {item}
                    </span>
                  ))}
                </div>
              </div>
            </ScrollReveal>
          ))}
        </div>
      </div>
    </section>
  );
}
