import ScrollReveal from "./ScrollReveal";

const categories = [
  {
    name: "Routing & Switching",
    items: ["Ross Ultrix", "Blackmagic ATEM", "Evertz EQX", "Grass Valley Kahuna", "Panasonic Kairos"],
  },
  {
    name: "All In One Production",
    items: ["vMix", "Vizrt", "AMPP"],
  },
  {
    name: "Signal Transport",
    items: ["SMPTE 2110", "NDI", "SRT", "SDI", "Dante", "MADI", "JPEG XS"],
  },
  {
    name: "Infrastructure",
    items: ["IP Networking", "Fiber Infrastructure", "KVM Systems", "UPS & Power", "Cooling & Ventilation"],
  },
  {
    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-white border-t border-neutral-100">
      <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" />
            <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-primary leading-tight mb-5">
              Tools of the trade.
            </h2>
            <p className="text-muted 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-primary 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-neutral-50 border border-neutral-100 text-muted rounded-md hover:bg-accent/5 hover:border-accent/20 hover:text-accent transition-all duration-200"
                    >
                      {item}
                    </span>
                  ))}
                </div>
              </div>
            </ScrollReveal>
          ))}
        </div>
      </div>
    </section>
  );
}