import type { Metadata } from 'next'
import { CheckCircle2 } from 'lucide-react'
import { PageHero } from '@/components/page-hero'
import { CtaBand } from '@/components/cta-band'
import { services } from '@/lib/site'

export const metadata: Metadata = {
  title: 'Services',
  description:
    'Explore our full range of in-home care services: personal care, meal preparation, medication management, transportation, companionship, private nursing, and more.',
}

export default function ServicesPage() {
  return (
    <>
      <PageHero
        breadcrumb="Services"
        title="Our Care Services"
        subtitle="A complete range of in-home care, thoughtfully tailored to your loved one’s needs — from everyday assistance to skilled private nursing."
      />

      <section className="bg-background">
        <div className="mx-auto max-w-7xl px-4 py-16 md:py-20">
          <div className="grid gap-8">
            {services.map((service, index) => {
              const Icon = service.icon
              return (
                <article
                  key={service.slug}
                  id={service.slug}
                  className="scroll-mt-28 grid gap-6 rounded-2xl border border-border bg-card p-6 md:grid-cols-[auto_1fr] md:p-8"
                >
                  <div className="flex md:block">
                    <span className="flex size-16 items-center justify-center rounded-xl bg-primary/10 text-primary">
                      <Icon className="size-8" aria-hidden />
                    </span>
                  </div>
                  <div>
                    <div className="flex flex-wrap items-center gap-3">
                      <span className="text-sm font-semibold text-primary">
                        {String(index + 1).padStart(2, '0')}
                      </span>
                      <h2 className="text-2xl font-bold">{service.title}</h2>
                    </div>
                    <p className="mt-3 leading-relaxed text-muted-foreground text-pretty">{service.description}</p>
                    <ul className="mt-5 grid gap-2 sm:grid-cols-2">
                      {service.features.map((feature) => (
                        <li key={feature} className="flex items-center gap-2 text-foreground">
                          <CheckCircle2 className="size-5 shrink-0 text-primary" aria-hidden />
                          <span className="text-sm">{feature}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </article>
              )
            })}
          </div>
        </div>
      </section>

      <CtaBand />
    </>
  )
}