import Container from "@/components/ui/Container";
import Hero from "@/components/sections/Hero";
import CTASection from "@/components/sections/CTASection";
import { ButtonLink } from "@/components/ui/Button";
import { getJobOpenings, getSiteSettings } from "@/lib/api";

export const metadata = { title: "Careers | LarCare Services" };
export const revalidate = 300;

export default async function CareersPage() {
  const [jobs, site] = await Promise.all([getJobOpenings(), getSiteSettings()]);

  return (
    <>
      <Hero
        title="Careers: In-Home Care Nursing & Caregiver Jobs"
        description="Working in in-home care is more than just a job – it's a chance to make a real difference in someone's daily life."
        imageUrl="/images/hero/careers-hero.jpg"
      />

      <section className="py-16">
        <Container>
          <h2 className="font-display text-2xl text-neutral-900 text-center">
            Types of Home Health Care Jobs
          </h2>
          <div className="mt-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {jobs.map((job) => (
              <div key={job.slug} className="rounded-xl2 border border-neutral-200 bg-neutral-100 p-6">
                <h3 className="font-medium text-neutral-900">{job.title}</h3>
                <p className="mt-1 text-xs uppercase tracking-wide text-neutral-500">{job.type}</p>
                <p className="mt-3 text-sm text-neutral-600">{job.summary}</p>
              </div>
            ))}
          </div>
          <div className="mt-10 text-center">
            <p className="text-sm text-neutral-500 mb-4">Apply now!</p>
            <ButtonLink href="/forms">Employment Application</ButtonLink>
          </div>
        </Container>
      </section>

      <CTASection phone={site.phone} />
    </>
  );
}