import type { Metadata } from 'next'
import Image from 'next/image'
import { Award, ShieldCheck, GraduationCap, HeartHandshake } from 'lucide-react'
import { PageHero } from '@/components/page-hero'
import { CtaBand } from '@/components/cta-band'
import { caregivers } from '@/lib/site'

export const metadata: Metadata = {
  title: 'Care Givers',
  description:
    'Meet the qualified, compassionate caregivers and nurses of 24-7 Care Givers. Every team member is screened, trained, and dedicated to exceptional in-home care.',
}

const standards = [
  { icon: ShieldCheck, title: 'Background Checked', text: 'Thorough screening and background checks for every caregiver.' },
  { icon: GraduationCap, title: 'Professionally Trained', text: 'Ongoing training in the latest care techniques and safety.' },
  { icon: Award, title: 'Licensed & Certified', text: 'Credentialed professionals, including licensed nurses.' },
  { icon: HeartHandshake, title: 'Carefully Matched', text: 'Paired with clients by personality, needs, and preferences.' },
]

function initials(name: string) {
  return name
    .split(' ')
    .map((n) => n[0])
    .join('')
    .slice(0, 2)
}

export default function CareGiversPage() {
  return (
    <>
      <PageHero
        breadcrumb="Care Givers"
        title="Meet Our Care Givers"
        subtitle="Qualified, compassionate professionals who treat your loved ones like their own family — carefully screened, trained, and matched to your needs."
      />

      <section className="bg-background">
        <div className="mx-auto grid max-w-7xl items-center gap-10 px-4 py-16 md:py-20 lg:grid-cols-2">
          <div className="overflow-hidden rounded-2xl shadow-xl">
            <Image
              src="/images/team.png"
              alt="The 24-7 Care Givers team of caregivers and nurses"
              width={720}
              height={540}
              className="h-full w-full object-cover"
            />
          </div>
          <div>
            <p className="text-sm font-semibold uppercase tracking-widest text-primary">Our Team</p>
            <h2 className="mt-2 text-3xl font-bold text-balance md:text-4xl">The people who make care personal</h2>
            <p className="mt-4 leading-relaxed text-muted-foreground text-pretty">
              Our caregivers are the heart of everything we do. Each one is chosen not only for their skills and
              qualifications, but for their genuine compassion and commitment to the people they serve. When you welcome
              one of our caregivers into your home, you welcome a trusted partner in your family’s well-being.
            </p>
          </div>
        </div>
      </section>

      <section className="bg-secondary">
        <div className="mx-auto max-w-7xl px-4 py-16 md:py-20">
          <div className="mx-auto max-w-2xl text-center">
            <p className="text-sm font-semibold uppercase tracking-widest text-primary">Our Standards</p>
            <h2 className="mt-2 text-3xl font-bold text-balance md:text-4xl">How we choose our caregivers</h2>
          </div>
          <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {standards.map((s) => {
              const Icon = s.icon
              return (
                <div key={s.title} className="rounded-xl border border-border bg-card p-6 text-center">
                  <span className="mx-auto flex size-14 items-center justify-center rounded-full bg-primary/10 text-primary">
                    <Icon className="size-7" aria-hidden />
                  </span>
                  <h3 className="mt-4 text-lg font-semibold">{s.title}</h3>
                  <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{s.text}</p>
                </div>
              )
            })}
          </div>
        </div>
      </section>

      <section className="bg-background">
        <div className="mx-auto max-w-7xl px-4 py-16 md:py-20">
          <div className="mx-auto max-w-2xl text-center">
            <p className="text-sm font-semibold uppercase tracking-widest text-primary">Get to Know Us</p>
            <h2 className="mt-2 text-3xl font-bold text-balance md:text-4xl">Some of our caregivers</h2>
          </div>
          <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {caregivers.map((c) => (
              <article key={c.name} className="flex flex-col rounded-xl border border-border bg-card p-6 shadow-sm">
                <div className="flex items-center gap-4">
                  <span className="flex size-16 items-center justify-center rounded-full bg-primary text-xl font-bold text-primary-foreground">
                    {initials(c.name)}
                  </span>
                  <div>
                    <h3 className="text-lg font-semibold">{c.name}</h3>
                    <p className="text-sm text-primary">{c.role}</p>
                    <p className="text-xs text-muted-foreground">{c.experience} experience</p>
                  </div>
                </div>
                <p className="mt-4 flex-1 text-sm leading-relaxed text-muted-foreground">{c.bio}</p>
                <div className="mt-4 flex flex-wrap gap-2">
                  {c.specialties.map((s) => (
                    <span key={s} className="rounded-full bg-secondary px-3 py-1 text-xs font-medium text-secondary-foreground">
                      {s}
                    </span>
                  ))}
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <CtaBand />
    </>
  )
}