import React from "react";
import {
  Shield,
  Server,
  Lock,
  MonitorCheck,
  CloudCog,
  HeadphonesIcon,
} from "lucide-react";

const services: {
  icon: React.ComponentType<{ className?: string }>;
  title: string;
  description?: string;
  bullets?: string[];
}[] = [
  {
    icon: Shield,
    title: "HIPAA Compliance Audits",
    description:
      "Comprehensive risk assessments and gap analyses to ensure your organization meets all HIPAA Security Rule requirements.",
  },
  {
    icon: Server,
    title: "IT Support Services",
    bullets: [
      "Remote & on\u2011site IT support",
      "Practice technology management",
      "Network & device maintenance",
    ],
  },
  {
    icon: Lock,
    title: "Cybersecurity Solutions",
    bullets: [
      "Ransomware & phishing protection",
      "24/7 monitoring & alerting",
      "Backup & disaster recovery",
      "HIPAA security support",
    ],
  },
  {
    icon: MonitorCheck,
    title: "EHR/EMR Support",
    description:
      "Integration, optimization, and ongoing support for Electronic Health Record systems to maximize uptime and workflow efficiency.",
  },
  {
    icon: CloudCog,
    title: "Cloud & Backup Services",
    description:
      "HIPAA-compliant cloud hosting, disaster recovery planning, and automated encrypted backups for patient data.",
  },
  {
    icon: HeadphonesIcon,
    title: "24/7 Help Desk",
    description:
      "Round-the-clock support from healthcare IT specialists who understand the urgency of medical environments.",
  },
];

export function ServicesSection() {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-7xl px-6">
        <div className="max-w-2xl">
          <p className="text-[32px] font-semibold uppercase tracking-wider text-[hsl(var(--accent))] leading-tight">
            When Your Systems Go Down, Your Practice Stops
          </p>
          <h2 className="mt-3 text-balance text-3xl font-bold tracking-tight text-foreground md:text-4xl font-serif">
            Our collection of IT services spans every aspect of healthcare
            compliance and security.
          </h2>
        </div>

        <div className="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
          {services.map((service) => (
            <div
              key={service.title}
              className="group rounded-xl border border-border bg-card p-8 transition-colors hover:border-primary/30 hover:bg-card/80"
            >
              <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                <service.icon className="h-6 w-6 text-primary" />
              </div>
              <h3 className="text-lg font-semibold text-card-foreground">
                {service.title}
              </h3>
              {service.description && (
                <p className="mt-3 leading-relaxed text-muted-foreground">
                  {service.description}
                </p>
              )}
              {service.bullets && (
                <ul className="mt-3 flex flex-col gap-2 text-muted-foreground">
                  {service.bullets.map((item) => (
                    <li key={item} className="flex items-start gap-2">
                      <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-primary" />
                      <span className="leading-relaxed">{item}</span>
                    </li>
                  ))}
                </ul>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}