import type { Metadata } from 'next'
import Image from 'next/image'
import { Heart, Eye, Target, HeartHandshake, ShieldCheck, Clock, UserCheck, Sparkles, HandHeart } from 'lucide-react'
import { PageHero } from '@/components/page-hero'
import { CtaBand } from '@/components/cta-band'

export const metadata: Metadata = {
  title: 'About Us',
  description:
    'Learn about 24-7 Care Givers — our mission, values, and the compassionate team providing trusted in-home care across Port Saint Lucie, Florida.',
}

const values = [
  { icon: HeartHandshake, title: 'Compassion', text: 'We lead with empathy, treating every client with the warmth we would want for our own family.' },
  { icon: ShieldCheck, title: 'Integrity', text: 'Honesty, transparency, and trust guide every decision and every interaction.' },
  { icon: Clock, title: 'Reliability', text: 'Care that shows up — dependable support 24 hours a day, 7 days a week.' },
  { icon: UserCheck, title: 'Respect', text: 'We honor the dignity, independence, and preferences of every person we serve.' },
  { icon: Sparkles, title: 'Excellence', text: 'We hold ourselves to the highest standards of professional, quality care.' },
  { icon: HandHeart, title: 'Family', text: 'We become an extension of your family, supporting you every step of the way.' },
]

export default function AboutPage() {
  return (
    <>
      <PageHero
        breadcrumb="About Us"
        title="About 24-7 Care Givers"
        subtitle="Compassionate, qualified caregivers dedicated to helping your loved ones live safely, comfortably, and with dignity at home."
      />

      <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/about-care.png"
              alt="A caregiver assisting an elderly man at home"
              width={720}
              height={560}
              className="h-full w-full object-cover"
            />
          </div>
          <div>
            <p className="text-sm font-semibold uppercase tracking-widest text-primary">Who We Are</p>
            <h2 className="mt-2 text-3xl font-bold text-balance md:text-4xl">Care that feels like family</h2>
            <div className="mt-4 space-y-4 leading-relaxed text-muted-foreground">
              <p>
                24-7 Care Givers was founded on a simple belief: everyone deserves to age with dignity, comfort, and
                companionship in the place they love most — home. Based in Port Saint Lucie, Florida, we bring qualified,
                round-the-clock care to families throughout the Treasure Coast.
              </p>
              <p>
                Our caregivers are more than skilled professionals; they are compassionate people who genuinely care.
                From everyday personal assistance to skilled private nursing, we tailor every care plan to the unique
                needs and preferences of the individuals we serve.
              </p>
              <p>
                Whether your loved one needs a few hours of help each day or continuous 24/7 support, our team is here
                to provide peace of mind for the whole family.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="bg-secondary">
        <div className="mx-auto grid max-w-7xl gap-6 px-4 py-16 md:py-20 md:grid-cols-3">
          <div className="rounded-xl border border-border bg-card p-8">
            <span className="flex size-12 items-center justify-center rounded-lg bg-primary/10 text-primary">
              <Target className="size-6" aria-hidden />
            </span>
            <h3 className="mt-4 text-xl font-semibold">Our Mission</h3>
            <p className="mt-2 leading-relaxed text-muted-foreground">
              To enrich the lives of our clients with compassionate, personalized care that promotes independence,
              dignity, and well-being at home.
            </p>
          </div>
          <div className="rounded-xl border border-border bg-card p-8">
            <span className="flex size-12 items-center justify-center rounded-lg bg-primary/10 text-primary">
              <Eye className="size-6" aria-hidden />
            </span>
            <h3 className="mt-4 text-xl font-semibold">Our Vision</h3>
            <p className="mt-2 leading-relaxed text-muted-foreground">
              To be the most trusted name in home care across the Treasure Coast, known for kindness, quality, and
              unwavering reliability.
            </p>
          </div>
          <div className="rounded-xl border border-border bg-card p-8">
            <span className="flex size-12 items-center justify-center rounded-lg bg-primary/10 text-primary">
              <Heart className="size-6" aria-hidden />
            </span>
            <h3 className="mt-4 text-xl font-semibold">Our Promise</h3>
            <p className="mt-2 leading-relaxed text-muted-foreground">
              To treat your loved ones as our own — with respect, patience, and genuine care, every hour of every day.
            </p>
          </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">Our Values</p>
            <h2 className="mt-2 text-3xl font-bold text-balance md:text-4xl">The principles behind our care</h2>
          </div>
          <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {values.map((v) => {
              const Icon = v.icon
              return (
                <div key={v.title} className="flex gap-4 rounded-xl border border-border bg-card p-6">
                  <span className="flex size-12 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
                    <Icon className="size-6" aria-hidden />
                  </span>
                  <div>
                    <h3 className="text-lg font-semibold">{v.title}</h3>
                    <p className="mt-1 text-sm leading-relaxed text-muted-foreground">{v.text}</p>
                  </div>
                </div>
              )
            })}
          </div>
        </div>
      </section>

      <CtaBand />
    </>
  )
}