import { EmbeddedScheduler } from "@/components/embedded-scheduler";
import { ContactForm } from "@/components/contact-form";
import { offices } from "@/lib/site-config";

export default function AppointmentPage() {
  return (
    <div className="bg-slate-50 py-10 sm:py-12 md:py-16">
      <div className="mx-auto max-w-5xl px-4 md:px-6">
        <header className="mb-8 space-y-3">
          <p className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">
            Appointments
          </p>
          <h1 className="text-2xl font-semibold tracking-tight text-slate-900 sm:text-3xl">
            Book your tax, insurance, or bookkeeping appointment
          </h1>
          <p className="max-w-2xl text-sm text-slate-600 sm:text-base">
            Choose a convenient time for an in‑person or virtual appointment.
            Use the form below to tell us what you need and which office you
            prefer, and we&apos;ll follow up to confirm the details.
          </p>
        </header>
        <div className="grid gap-6 md:grid-cols-[3fr,2fr]">
          <div className="space-y-4">
            <EmbeddedScheduler />
            <ContactForm mode="appointment" />
          </div>
          <aside className="space-y-4 rounded-2xl border border-slate-200 bg-white p-5 text-sm text-slate-800">
            <h2 className="text-base font-semibold text-slate-900">
              Office details
            </h2>
            {offices.map((office) => (
              <div key={office.id} id={office.id} className="space-y-1">
                <div className="font-semibold">{office.label}</div>
                <div className="text-slate-700">
                  {office.addressLines.map((line) => (
                    <div key={line}>{line}</div>
                  ))}
                </div>
                <div>
                  <a
                    href={office.phoneHref}
                    className="text-slate-900 hover:text-sky-700"
                  >
                    {office.phone}
                  </a>
                </div>
                <div>
                  <a
                    href={office.emailHref}
                    className="text-slate-700 hover:text-sky-700"
                  >
                    {office.email}
                  </a>
                </div>
              </div>
            ))}
            <p className="pt-2 text-xs text-slate-600">
              Please bring any recent tax documents, identification, and
              financial records that may help us serve you better.
            </p>
          </aside>
        </div>
      </div>
    </div>
  );
}

