import {
  Cloud,
  Lock,
  Network,
  Users2,
  PhoneCall,
  Settings2,
  DatabaseZap,
  Activity,
  ArrowRight,
} from "lucide-react";
import { Reveal, SectionHeading } from "./reveal";

const solutions = [
  { icon: Cloud, title: "Cloud Infrastructure", copy: "Hybrid and multi-cloud landing zones with governance built in from day one." },
  { icon: Lock, title: "Cybersecurity", copy: "Layered defense, identity control and continuous compliance monitoring." },
  { icon: Network, title: "Networking", copy: "SD-WAN, campus and edge networks engineered for performance at scale." },
  { icon: Users2, title: "Collaboration", copy: "Meeting rooms, workspaces and platforms that keep distributed teams in sync." },
  { icon: PhoneCall, title: "Voice Solutions", copy: "Enterprise telephony and SIP migration with carrier-grade reliability." },
  { icon: Settings2, title: "Managed IT", copy: "Fully managed operations, patching and lifecycle across your estate." },
  { icon: DatabaseZap, title: "Data Centers", copy: "Compute, storage and virtualization designed for density and efficiency." },
  { icon: Activity, title: "Business Continuity", copy: "Recovery objectives defined, engineered and proven through live testing." },
];

export function Solutions() {
  return (
    <section id="solutions" className="relative overflow-hidden bg-navy-deep py-24 sm:py-32">
      <div className="pointer-events-none absolute -top-40 left-1/2 size-[42rem] -translate-x-1/2 rounded-full bg-brand-gradient opacity-15 blur-[140px]" />
      <div className="relative mx-auto max-w-7xl px-5">
        <SectionHeading
          invert
          eyebrow="Enterprise Solutions"
          title="Capabilities engineered for scale, security and speed"
          description="Each solution is delivered as an outcome — architected, implemented and operated by the same accountable team."
        />

        <div className="mt-14 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
          {solutions.map((s, i) => (
            <Reveal key={s.title} delay={(i % 4) * 90}>
              <article className="glass group h-full rounded-[1.25rem] p-7 transition-all duration-500 hover:-translate-y-1.5 hover:shadow-[var(--glow-brand)]">
                <span className="grid size-14 place-items-center rounded-2xl bg-white/8 text-cyan transition-colors duration-300 group-hover:bg-brand-gradient group-hover:text-white">
                  <s.icon size={26} />
                </span>
                <h3 className="mt-6 text-lg font-semibold text-white">{s.title}</h3>
                <p className="mt-2.5 text-sm leading-relaxed text-white/60">{s.copy}</p>
                <a
                  href="#contact"
                  className="mt-6 inline-flex items-center gap-1.5 text-sm font-semibold text-cyan"
                >
                  Read More
                  <ArrowRight size={15} className="transition-transform group-hover:translate-x-1" />
                </a>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}