import Link from 'next/link'
import Image from 'next/image'
import { Phone, CheckCircle2 } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { site } from '@/lib/site'

export function Hero() {
  return (
    <section className="relative overflow-hidden bg-secondary">
      <div className="mx-auto grid max-w-7xl items-center gap-10 px-4 py-16 md:py-24 lg:grid-cols-2">
        <div>
          <span className="inline-flex items-center rounded-full bg-primary/10 px-4 py-1.5 text-sm font-semibold text-primary">
            Trusted In-Home Care in Port Saint Lucie
          </span>
          <h1 className="mt-5 text-4xl font-bold leading-tight text-balance text-foreground md:text-5xl lg:text-6xl">
            Qualified <span className="text-primary">24/7 Caregivers</span>
          </h1>
          <p className="mt-5 max-w-xl text-lg leading-relaxed text-muted-foreground text-pretty">
            We are experienced, compassionate caregivers who are ready to provide the loving, qualified care your family
            deserves — day or night, around the clock.
          </p>
          <ul className="mt-6 grid gap-3 sm:grid-cols-2">
            {['Licensed & insured', 'Personalized care plans', 'Available 24/7', 'Free consultation'].map((item) => (
              <li key={item} className="flex items-center gap-2 text-foreground">
                <CheckCircle2 className="size-5 shrink-0 text-primary" aria-hidden />
                {item}
              </li>
            ))}
          </ul>
          <div className="mt-8 flex flex-col gap-3 sm:flex-row">
            <Button asChild size="lg">
              <Link href="/contact">Get in Touch</Link>
            </Button>
            <Button asChild size="lg" variant="outline">
              <a href={site.phoneHref} className="flex items-center gap-2">
                <Phone className="size-4" aria-hidden />
                {site.phoneDisplay}
              </a>
            </Button>
          </div>
        </div>

        <div className="relative">
          <div className="overflow-hidden rounded-2xl shadow-xl">
            <Image
              src="/images/hero-caregiver.png"
              alt="A caregiver smiling with an elderly woman at home"
              width={720}
              height={560}
              className="h-full w-full object-cover"
              priority
            />
          </div>
          <div className="absolute -bottom-6 left-6 hidden rounded-xl bg-background p-5 shadow-lg sm:block">
            <p className="text-3xl font-bold text-primary">24/7</p>
            <p className="text-sm text-muted-foreground">Care, every hour of every day</p>
          </div>
        </div>
      </div>
    </section>
  )
}