import ScrollReveal from "./ScrollReveal";
import { Ruler, Wrench, MonitorCheck, Headset } from "lucide-react";

const services = [
  {
    icon: Ruler,
    phase: "01",
    title: "Design",
    description:
      "Signal flow engineering, system architecture, and equipment specification. Every facility starts with documentation that defines how signals move, how operators interact, and how systems scale.",
  },
  {
    icon: Wrench,
    phase: "02",
    title: "Integrate",
    description:
      "Full system builds from rack fabrication and cable infrastructure through to final termination and labeling. Clean builds that technicians can troubleshoot and maintain for years.",
  },
  {
    icon: MonitorCheck,
    phase: "03",
    title: "Commission",
    description:
      "End-to-end system testing, calibration, and performance verification. Every signal path tested, every failover validated, every workflow documented before handoff.",
  },
  {
    icon: Headset,
    phase: "04",
    title: "Support",
    description:
      "Operator training, documentation packages, and ongoing technical support. Systems designed with the people who use them in mind — not just the engineers who build them.",
  },
];

export default function Services() {
  return (
    <section id="services" className="py-28 md:py-36 bg-surface-elevated noise-overlay">
      <div className="relative z-10 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">
              Process
            </p>
            <h2 className="text-3xl md:text-4xl font-semibold text-white leading-tight mb-5">
              From blueprint to <span className="text-gradient">broadcast.</span>
            </h2>
            <p className="text-white/55 leading-relaxed">
              A complete lifecycle approach to broadcast facility design and
              systems integration. Every project follows a disciplined process
              that ensures systems work flawlessly when the red light goes on.
            </p>
          </div>
        </ScrollReveal>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
          {services.map((service, i) => (
            <ScrollReveal key={service.title} delay={i * 100}>
              <div className="group relative bg-surface-card rounded-xl p-7 border border-border hover:border-border-hover transition-all duration-400 h-full border-glow">
                {/* Phase number */}
                <span className="font-mono text-[10px] text-accent/20 absolute top-5 right-5 group-hover:text-accent/40 transition-colors duration-300">
                  {service.phase}
                </span>

                <div className="w-11 h-11 rounded-lg bg-accent/10 border border-accent/20 flex items-center justify-center mb-5 group-hover:bg-accent/15 transition-all duration-300">
                  <service.icon
                    size={20}
                    className="text-accent transition-colors duration-300"
                    strokeWidth={1.5}
                  />
                </div>

                <h3 className="text-base font-semibold text-white mb-3">
                  {service.title}
                </h3>

                <p className="text-[13px] text-white/55 leading-relaxed">
                  {service.description}
                </p>
              </div>
            </ScrollReveal>
          ))}
        </div>
      </div>
    </section>
  );
}