Hours Table With Map Slot

const ADDRESS = "Vicolo del Cinque 34, 00153 Roma, Italy"

const hours: { day: string; open: string }[] = [
  { day: "Monday", open: "Closed" },
  { day: "Tuesday", open: "5 PM – 11 PM" },
  { day: "Wednesday", open: "5 PM – 11 PM" },
  { day: "Thursday", open: "5 PM – 11 PM" },
  { day: "Friday", open: "12 PM – 11:30 PM" },
  { day: "Saturday", open: "12 PM – 11:30 PM" },
  { day: "Sunday", open: "12 PM – 10 PM" },
]

export default function LocationBlock() {
  return (
    <section className="w-full bg-background px-6 py-16 text-foreground sm:py-24">
      <div className="mx-auto grid w-full max-w-5xl grid-cols-1 items-start gap-10 md:grid-cols-2 md:gap-14">
        <div>
          <h2 className="font-heading text-3xl font-bold tracking-tight text-balance sm:text-4xl">
            Opening Hours
          </h2>
          <p className="mt-4 text-pretty text-muted-foreground">
            The kitchen closes half an hour before we do. The bar usually
            carries on a little longer.
          </p>

          <table className="mt-8 w-full text-sm">
            <caption className="sr-only">Opening hours by day</caption>
            <tbody>
              {hours.map((row) => (
                <tr key={row.day} className="border-b border-border">
                  <th
                    scope="row"
                    className="py-2.5 text-left font-normal text-muted-foreground"
                  >
                    {row.day}
                  </th>
                  <td className="py-2.5 text-right font-medium tabular-nums">
                    {row.open}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="flex flex-col gap-6">
          <div className="relative aspect-4/3 w-full overflow-hidden rounded-xl border border-border bg-card">
            <iframe
              title={`Map of ${ADDRESS}`}
              src={`https://www.google.com/maps?q=${encodeURIComponent(ADDRESS)}&z=16&output=embed`}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              allowFullScreen
              className="absolute inset-0 size-full border-0 dark:brightness-90 dark:contrast-90 dark:hue-rotate-180 dark:invert"
            />
          </div>

          <div className="flex flex-col gap-4">
            <div>
              <h3 className="font-heading text-sm font-semibold">Address</h3>
              <p className="mt-1 text-sm text-muted-foreground">
                Vicolo del Cinque 34
                <br />
                00153 Roma, Italy
              </p>
            </div>
            <div>
              <h3 className="font-heading text-sm font-semibold">
                Getting Here
              </h3>
              <p className="mt-1 text-sm text-muted-foreground">
                Tram to Belli, then four minutes on foot. Step-free from the
                street, with two accessible tables you can reserve by phone.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}