import { Radio, Tv, Cloud, Cable } from "lucide-react";
import ScrollReveal from "./ScrollReveal";

const capabilities = [
  {
    icon: Radio,
    title: "Systems Design",
    description:
      "End-to-end broadcast facility design including signal flow engineering, equipment specification, and architectural documentation.",
  },
  {
    icon: Cable,
    title: "Integration",
    description:
      "Full system integration from rack builds and wiring to commissioning, testing, and operator training.",
  },
  {
    icon: Cloud,
    title: "Cloud & IP",
    description:
      "Cloud-native production architectures, SMPTE ST 2110, NDI, SRT, and hybrid on-prem/cloud workflows.",
  },
  {
    icon: Tv,
    title: "Broadcast Engineering",
    description:
      "Live production engineering, RF systems, video routing, and real-time broadcast operations.",
  },
];

export default function About() {
  return (
    <section id="about" className="py-28 md:py-36 bg-surface noise-overlay">
      <div className="relative z-10 max-w-6xl mx-auto px-6">
        {/* Section header */}
        <ScrollReveal>
          <div className="max-w-3xl mb-20">
            <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">
              About
            </p>
            <h2 className="text-3xl md:text-4xl font-semibold text-white leading-tight mb-8">
              From live production to
              <br />
              <span className="text-gradient">systems architecture.</span>
            </h2>
            <div className="space-y-5 text-white/60 leading-[1.8]">
              <p>
                I&apos;m a broadcast engineer and systems integrator based in the
                Washington DC area. My career started in broadcast engineering for
                live sports, and over the years I&apos;ve worked across both sides of
                the industry&mdash;production and infrastructure.
              </p>
              <p>
                On the production side, I spent years as a 1st AC, DIT, Camera
                Operator, and Trinity Operator on commercials, corporate,
                narrative, and documentary projects. That hands-on experience
                shooting and operating gives me an operator&apos;s perspective when
                designing systems&mdash;I build facilities that work the way
                production teams actually need them to.
              </p>
              <p>
                Today, my focus is broadcast systems integration. As a principal
                systems designer with{" "}
                <a
                  href="https://broadcastmgmt.com"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-accent hover:text-accent-light transition-colors underline decoration-accent/30 underline-offset-4 hover:decoration-accent/60"
                >
                  Broadcast Management Group
                </a>
                , I design production facilities for organizations including the{" "}
                <strong className="font-medium text-white/90">Washington Commanders</strong>,{" "}
                <strong className="font-medium text-white/90">CVS/Aetna</strong>,{" "}
                <strong className="font-medium text-white/90">UBS</strong>,{" "}
                <strong className="font-medium text-white/90">BetMGM</strong>,{" "}
                <strong className="font-medium text-white/90">Intuit</strong>,{" "}
                <strong className="font-medium text-white/90">Monumental Sports</strong>, and{" "}
                <strong className="font-medium text-white/90">COSM</strong>&mdash;engineering everything from control
                rooms and studios to cloud production infrastructure, XR stages,
                and IP-based workflows.
              </p>
            </div>
          </div>
        </ScrollReveal>

        {/* Capabilities grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {capabilities.map((cap, i) => (
            <ScrollReveal key={cap.title} delay={i * 100}>
              <div className="group p-6 rounded-xl bg-surface-card border border-border hover:border-border-hover transition-all duration-300 border-glow">
                <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">
                  <cap.icon
                    size={20}
                    className="text-accent transition-colors duration-300"
                    strokeWidth={1.5}
                  />
                </div>
                <h3 className="text-sm font-semibold text-white mb-2.5">
                  {cap.title}
                </h3>
                <p className="text-[13px] text-white/55 leading-relaxed">
                  {cap.description}
                </p>
              </div>
            </ScrollReveal>
          ))}
        </div>
      </div>
    </section>
  );
}