import Link from "next/link";
import { offices } from "@/lib/site-config";
import { Button } from "@/components/ui/button";

export function AppointmentCards() {
  return (
    <section className="bg-emerald-950 py-10 sm:py-12 md:py-16">
      <div className="mx-auto max-w-6xl px-4 text-emerald-50 md:px-6">
        <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
          <div className="max-w-xl">
            <h2 className="text-2xl font-semibold tracking-tight sm:text-3xl">
              Book an appointment in minutes
            </h2>
            <p className="mt-3 text-sm text-emerald-100/90 sm:text-base">
              Choose the office that is most convenient for you. We offer
              in‑person and virtual appointments for tax preparation,
              insurance, and bookkeeping.
            </p>
          </div>
          <p className="text-xs text-emerald-200/80">
            Serving Virginia &amp; Maryland clients year‑round.
          </p>
        </div>
              <div className="mt-6 grid gap-4 md:grid-cols-2">
          {offices.map((office) => (
            <article
              key={office.id}
              className="flex flex-col justify-between rounded-2xl border border-emerald-800 bg-emerald-900/70 p-5"
            >
              <div>
                <h3 className="text-lg font-semibold text-emerald-200">
                  {office.label}
                </h3>
                <div className="mt-2 text-sm text-emerald-50/90">
                  {office.addressLines.map((line) => (
                    <div key={line}>{line}</div>
                  ))}
                </div>
                <div className="mt-2 text-sm">
                  <a
                    href={office.phoneHref}
                    className="font-medium text-emerald-200 hover:underline"
                  >
                    {office.phone}
                  </a>
                </div>
                <div className="mt-1 text-xs text-emerald-100/80">
                  In‑person &amp; virtual appointments available
                </div>
              </div>
              <div className="mt-4 flex flex-wrap gap-2">
                <Button
                  className="rounded-full bg-emerald-400 px-5 text-xs font-semibold text-emerald-950 hover:bg-emerald-300"
                >
                  <Link href={`/appointment#${office.id}`}>
                    Book {office.label.split(" ")[0]} Appointment
                  </Link>
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  className="rounded-full border-emerald-600 bg-transparent text-xs text-emerald-50 hover:bg-emerald-900"
                >
                  <a href={office.mapUrl} target="_blank" rel="noreferrer">
                    View on map
                  </a>
                </Button>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

