Contact — map with offices

import { ArrowRight, Clock, MapPin, Phone } from "lucide-react";

const offices = [
  { name: "Harbour · HQ", address: ["Pier 4, 2nd floor", "18 Quay Street"], hours: "Mon–Fri 9–6", phone: "+1 555 0110", directions: "https://maps.example.com/?q=harbour" },
  { name: "Old Town", address: ["The Corn Exchange", "7 Market Lane"], hours: "Tue–Sat 10–5", phone: "+1 555 0122", directions: "https://maps.example.com/?q=old-town" },
  { name: "Riverside", address: ["Unit 12, Mill Yard", "40 Weir Road"], hours: "Mon–Fri 9–5", phone: "+1 555 0134", directions: "https://maps.example.com/?q=riverside" },
];

export function ContactMapOffices() {
  return (
    <section aria-labelledby="offices-title" className="bg-bg px-5 py-16 font-sans sm:px-10 sm:py-20">
      <div className="mx-auto max-w-6xl">
        <div className="flex flex-wrap items-end justify-between gap-4">
          <div className="max-w-xl">
            <h2 id="offices-title" className="text-3xl font-semibold tracking-tight text-fg sm:text-4xl">Come and say hello</h2>
            <p className="mt-4 text-base text-fg-muted sm:text-lg">Three Slotwise studios where you can book a walkthrough in person, coffee included.</p>
          </div>
          <a href="/visit" className="inline-flex h-9 items-center rounded border border-border-strong bg-bg px-3.5 text-sm font-medium text-fg transition hover:bg-surface">Book a visit</a>
        </div>

        {/* Replace with your map embed (an iframe or a static map image). */}
        <div
          role="img"
          aria-label="Map showing the Harbour, Old Town and Riverside studios"
          className="mt-10 aspect-[4/3] overflow-hidden rounded-xl border border-border bg-surface bg-[linear-gradient(var(--tst-border)_1px,transparent_1px),linear-gradient(90deg,var(--tst-border)_1px,transparent_1px)] bg-[size:28px_28px] md:aspect-[21/8]"
        />

        <ul className="mt-6 grid gap-4 md:grid-cols-3">
          {offices.map((o) => (
            <li key={o.name} className="grid content-start gap-2.5 rounded-lg border border-border bg-bg p-[22px] text-[13.5px]">
              <div className="flex items-center justify-between">
                <h3 className="text-base font-semibold text-fg">{o.name}</h3>
                <MapPin className="size-4 text-fg-subtle" aria-hidden />
              </div>
              <address className="not-italic leading-relaxed text-fg-muted">{o.address.map((line) => <span key={line} className="block">{line}</span>)}</address>
              <div className="flex flex-wrap gap-x-3.5 gap-y-1.5 text-[13px] text-fg-muted">
                <span className="inline-flex items-center gap-1.5"><Clock className="size-3.5" aria-hidden />{o.hours}</span>
                <a href={"tel:" + o.phone.replace(/ /g, "")} className="inline-flex items-center gap-1.5 hover:text-fg"><Phone className="size-3.5" aria-hidden />{o.phone}</a>
              </div>
              <a href={o.directions} className="inline-flex items-center gap-1 font-medium text-primary hover:underline">
                Get directions <ArrowRight className="size-3.5" aria-hidden />
              </a>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}