import type { Metadata } from 'next'
import { Phone, Mail, MapPin, Clock } from 'lucide-react'
import { PageHero } from '@/components/page-hero'
import { ContactForm } from '@/components/contact-form'
import { site } from '@/lib/site'

export const metadata: Metadata = {
  title: 'Contact Us',
  description:
    'Get in touch with 24-7 Care Givers in Port Saint Lucie, Florida. Call +1 772 252 5270 or send us a message for a free, no-obligation care consultation.',
}

export default function ContactPage() {
  const details = [
    { icon: Phone, label: 'Phone', value: site.phoneDisplay, href: site.phoneHref },
    { icon: Mail, label: 'Email', value: site.email, href: `mailto:${site.email}` },
    { icon: MapPin, label: 'Address', value: site.address },
    { icon: Clock, label: 'Hours', value: 'Available 24 hours a day, 7 days a week' },
  ]

  return (
    <>
      <PageHero
        breadcrumb="Contact"
        title="Get in Touch"
        subtitle="We’re here to answer your questions and help you find the right care. Reach out today for a free, no-obligation consultation."
      />

      <section className="bg-background">
        <div className="mx-auto grid max-w-7xl gap-10 px-4 py-16 md:py-20 lg:grid-cols-[360px_1fr]">
          <div>
            <h2 className="text-2xl font-bold">Contact Information</h2>
            <p className="mt-2 leading-relaxed text-muted-foreground">
              Prefer to talk? Call us anytime — day or night. Our care team is always ready to help.
            </p>
            <ul className="mt-8 space-y-6">
              {details.map((d) => {
                const Icon = d.icon
                const content = (
                  <div className="flex items-start gap-4">
                    <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>
                      <p className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">{d.label}</p>
                      <p className="mt-1 font-medium text-foreground">{d.value}</p>
                    </div>
                  </div>
                )
                return (
                  <li key={d.label}>
                    {d.href ? (
                      <a href={d.href} className="block transition-opacity hover:opacity-80">
                        {content}
                      </a>
                    ) : (
                      content
                    )}
                  </li>
                )
              })}
            </ul>
          </div>

          <ContactForm />
        </div>
      </section>

      <section className="bg-secondary">
        <div className="mx-auto max-w-7xl px-4 pb-16 md:pb-20">
          <div className="overflow-hidden rounded-2xl border border-border shadow-sm">
            <iframe
              title={`Map showing ${site.name} location`}
              src={`https://www.google.com/maps?q=${encodeURIComponent(site.mapQuery)}&output=embed`}
              width="100%"
              height="420"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              className="block w-full"
            />
          </div>
        </div>
      </section>
    </>
  )
}