import { HeroSection } from "@/components/hero-section";
import { ServicesSection } from "@/components/services-section";
import { WhyUsSection } from "@/components/why-us-section";
import { CtaBanner } from "@/components/cta-banner";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { ArrowRight, Shield, Monitor, Stethoscope } from "lucide-react";

const offerings = [
  {
    icon: Shield,
    title: "Cybersecurity Packages",
    description:
      "Multi-layered defense strategies tailored for healthcare organizations to protect patient data and ensure compliance.",
    href: "/cybersecurity-packages",
  },
  {
    icon: Monitor,
    title: "IT Support Packages",
    description:
      "Comprehensive managed IT services including help desk, infrastructure management, and EHR/EMR system support.",
    href: "/it-support-packages",
  },
  {
    icon: Stethoscope,
    title: "Dental Cyber Risk Checkup",
    description:
      "Specialized assessment designed for dental practices to identify vulnerabilities and meet HIPAA requirements.",
    href: "/dental-cyber-risk-checkup",
  },
];

export default function Page() {
  return (
    <>
      <HeroSection />
      <ServicesSection />

      {/* Offerings Navigation Section */}
      <section className="bg-muted py-24">
        <div className="mx-auto max-w-7xl px-6">
          <div className="text-center">
            <p className="text-sm font-semibold uppercase tracking-wider text-[hsl(var(--accent))]">
              Our Solutions
            </p>
            <h2 className="mx-auto mt-3 max-w-2xl text-balance text-3xl font-bold tracking-tight text-foreground md:text-4xl font-serif">
              Explore our specialized healthcare IT packages
            </h2>
          </div>
          <div className="mt-16 grid gap-8 lg:grid-cols-3">
            {offerings.map((offering) => (
              <Link
                key={offering.title}
                href={offering.href}
                className="group flex flex-col rounded-xl border border-border bg-card p-8 transition-all hover:border-primary/30 hover:shadow-lg"
              >
                <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                  <offering.icon className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-lg font-semibold text-card-foreground">
                  {offering.title}
                </h3>
                <p className="mt-3 flex-1 leading-relaxed text-muted-foreground">
                  {offering.description}
                </p>
                <div className="mt-6 flex items-center gap-2 text-sm font-medium text-primary">
                  Learn more
                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      <WhyUsSection />

      <CtaBanner
        heading="Ready to secure your healthcare organization?"
        description="Get a free HIPAA readiness assessment from our team of healthcare IT specialists."
        buttonText="Contact Us Today"
        buttonHref="/contact"
      />
    </>
  );
}