import { offices } from "@/lib/site-config";

export function LocationsSection() {
  return (
    <section
      id="locations"
      className="bg-white py-10 sm:py-12 md:py-16 border-t border-emerald-100"
    >
      <div className="mx-auto max-w-6xl px-4 md:px-6">
        <div className="mb-6 grid gap-6 md:grid-cols-[minmax(0,2fr),minmax(0,3fr)] md:items-start">
          <div className="max-w-2xl">
            <h2 className="text-2xl font-semibold tracking-tight text-emerald-950 sm:text-3xl">
              Visit one of our offices
            </h2>
            <p className="mt-3 text-sm text-emerald-900/80 sm:text-base">
              Convenient locations in Virginia and Maryland, with options for
              virtual appointments if you prefer to meet online.
            </p>
          </div>
          <div className="hidden overflow-hidden rounded-3xl border border-emerald-100 bg-emerald-50 shadow-sm md:block">
            <iframe
              title="Sample map showing Ghion Financial locations"
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6209.810247424868!2d-77.135!3d38.848!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzjCsDUwJzUxLjAiTiA3N8KwMDgnMDYuMCJX!5e0!3m2!1sen!2sus!4v1700000000000"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              className="h-64 w-full border-0"
            />
          </div>
        </div>
        <div className="grid gap-4 md:grid-cols-2">
          {offices.map((office) => (
            <article
              key={office.id}
              className="rounded-2xl border border-emerald-100 bg-emerald-50/60 p-5 shadow-sm"
            >
              <h3 className="text-lg font-semibold text-emerald-950">
                {office.label}
              </h3>
              <div className="mt-2 text-sm text-emerald-900/80">
                {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-950 hover:text-emerald-700"
                >
                  {office.phone}
                </a>
              </div>
              <div className="mt-1 text-sm">
                <a
                  href={office.emailHref}
                  className="text-emerald-900/80 hover:text-emerald-700"
                >
                  {office.email}
                </a>
              </div>
              <div className="mt-3 text-xs">
                <a
                  href={office.mapUrl}
                  target="_blank"
                  rel="noreferrer"
                  className="font-medium text-emerald-700 hover:underline"
                >
                  View on map
                </a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

