Three Up Visit Cards

import type { ReactNode } from "react"

import { IconPlaceholder } from "@/components/icons/icon-placeholder"

type Panel = { icon: ReactNode; label: string; lead: string; lines: string[] }

const panels: Panel[] = [
  {
    icon: (
      <IconPlaceholder
        lucide="MapPin"
        tabler="IconMapPin"
        hugeicons="Location01Icon"
        phosphor="MapPin"
        remixicon="RiMapPinLine"
        className="size-4"
        aria-hidden="true"
      />
    ),
    label: "Where We Are",
    lead: "Vicolo del Cinque 34",
    lines: [
      "00153 Roma, Italy",
      "Under the green awning, two streets back from the river",
    ],
  },
  {
    icon: (
      <IconPlaceholder
        lucide="Clock"
        tabler="IconClock"
        hugeicons="Clock01Icon"
        phosphor="Clock"
        remixicon="RiTimeLine"
        className="size-4"
        aria-hidden="true"
      />
    ),
    label: "When We Are Open",
    lead: "Six Nights A Week",
    lines: [
      "Tuesday to Thursday, 5 PM – 11 PM",
      "Friday and Saturday, 12 PM – 11:30 PM",
      "Sunday, 12 PM – 10 PM, closed Mondays",
    ],
  },
  {
    icon: (
      <IconPlaceholder
        lucide="TramFront"
        tabler="IconTrain"
        hugeicons="TrainIcon"
        phosphor="Train"
        remixicon="RiTrainLine"
        className="size-4"
        aria-hidden="true"
      />
    ),
    label: "Getting Here",
    lead: "Four Minutes From Belli",
    lines: [
      "Resident parking only after 6 PM",
      "Step-free entrance, two accessible tables",
    ],
  },
]

export default function LocationBlock() {
  return (
    <section className="w-full bg-background px-6 py-16 text-foreground sm:py-24">
      <div className="mx-auto w-full max-w-5xl">
        <div className="max-w-2xl">
          <h2 className="font-heading text-3xl font-bold tracking-tight text-balance sm:text-4xl">
            Find Us
          </h2>
          <p className="mt-4 text-pretty text-muted-foreground">
            Everything you need before you set off, on one card each.
          </p>
        </div>

        <ul className="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {panels.map((panel) => (
            <li
              key={panel.label}
              className="flex flex-col rounded-xl border border-border bg-card p-6"
            >
              <div className="flex items-center gap-2.5">
                <span className="text-primary">{panel.icon}</span>
                <span className="text-[0.7rem] tracking-[0.14em] text-muted-foreground uppercase">
                  {panel.label}
                </span>
                <span aria-hidden="true" className="h-px flex-1 bg-border" />
              </div>

              <h3 className="mt-5 font-heading text-xl leading-snug font-bold tracking-tight text-balance">
                {panel.lead}
              </h3>

              <ul className="mt-3 flex flex-col gap-1.5 border-t border-border pt-3">
                {panel.lines.map((line) => (
                  <li
                    key={line}
                    className="text-sm text-pretty text-muted-foreground"
                  >
                    {line}
                  </li>
                ))}
              </ul>
            </li>
          ))}
        </ul>
      </div>
    </section>
  )
}