const HOURS = [
  { day: "Mon", h: "09:30 – 18:00" },
  { day: "Tue", h: "09:30 – 18:00" },
  { day: "Wed", h: "09:30 – 18:00" },
  { day: "Thu", h: "09:30 – 20:00" },
  { day: "Fri", h: "09:30 – 16:00" },
  { day: "Sat", h: "By appointment" },
  { day: "Sun", h: "Closed", closed: true },
];

export function MapWithHours() {
  return (
    <div className="bg-[#FAFAF8] text-[#111111] antialiased px-10 py-14">
      <div className="grid grid-cols-1 lg:grid-cols-[1.4fr_1fr] gap-0 border border-[#1111111A] bg-white">
        {/* Map — replace with Google Maps <iframe> embed */}
        <div
          className="relative min-h-[360px] lg:min-h-[440px] bg-[#F2F1EC]"
          aria-label="Map of the studio"
        >
          <div
            className="absolute inset-0"
            style={{
              backgroundImage:
                "linear-gradient(rgba(17,17,17,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(17,17,17,0.06) 1px, transparent 1px)",
              backgroundSize: "26px 26px",
            }}
            aria-hidden
          />
          <svg className="absolute inset-0 h-full w-full" viewBox="0 0 500 440" preserveAspectRatio="none" aria-hidden>
            <path d="M0 220 Q 140 180 260 230 T 500 200" stroke="#2A3D2F" strokeWidth="3" fill="none" opacity="0.45" />
            <path d="M0 320 L 500 310" stroke="#111111" strokeWidth="2" fill="none" opacity="0.3" />
            <path d="M220 0 L 240 440" stroke="#111111" strokeWidth="2" fill="none" opacity="0.3" />
            <path d="M380 0 L 360 440" stroke="#111111" strokeWidth="1.5" fill="none" opacity="0.2" />
          </svg>
          {/* district labels */}
          <span className="absolute top-4 left-5 font-mono text-[10px] uppercase tracking-[0.18em] text-[#111111]/45">Mitte</span>
          <span className="absolute bottom-5 right-6 font-mono text-[10px] uppercase tracking-[0.18em] text-[#111111]/45">Prenzlauer Berg</span>

          <span
            className="absolute"
            style={{ top: "48%", left: "47%", transform: "translate(-50%, -100%)" }}
          >
            <svg width="26" height="32" viewBox="0 0 22 28" aria-hidden>
              <path d="M11 0 C 4.9 0 0 4.9 0 11 c 0 8 11 17 11 17 s 11 -9 11 -17 C 22 4.9 17.1 0 11 0 z" fill="#2A3D2F" />
              <circle cx="11" cy="11" r="4" fill="#FAFAF8" />
            </svg>
          </span>
          <div className="absolute bottom-3 left-3 font-mono text-[10px] uppercase tracking-[0.18em] text-[#6B6B66] bg-white/80 backdrop-blur px-2 py-1">
            52.5295° N · 13.3925° E
          </div>
        </div>

        {/* Hours sidebar */}
        <div className="p-8 lg:p-10 border-t lg:border-t-0 lg:border-l border-[#1111111A]">
          <p className="font-mono text-[11px] uppercase tracking-[0.22em] text-[#6B6B66]">
            ◆ Studio · open hours
          </p>
          <h2
            className="mt-3 text-[34px] leading-[1.05]"
            style={{
              fontFamily: "var(--font-instrument-serif), Georgia, serif",
              letterSpacing: "-0.02em",
            }}
          >
            Come by when the door’s open.
          </h2>
          <p className="mt-3 text-[13px] text-[#6B6B66]">
            Linienstraße 142, 10115 Berlin — 4. OG, ring <span className="font-mono">VELYN/4F</span>.
          </p>

          <dl className="mt-6 divide-y divide-[#1111111A] border-t border-[#1111111A]">
            {HOURS.map((row) => (
              <div key={row.day} className="flex justify-between py-2.5">
                <dt className="font-mono text-[12px] uppercase tracking-[0.16em] text-[#111111]/80">
                  {row.day}
                </dt>
                <dd className={`text-[13px] ${row.closed ? "text-[#A8A39A]" : "text-[#111111]"}`}>
                  {row.h}
                </dd>
              </div>
            ))}
          </dl>

          <a
            href="#"
            className="mt-6 inline-flex items-center gap-2 text-[13px] underline underline-offset-4 decoration-[#2A3D2F]/40 hover:decoration-[#2A3D2F]"
          >
            Get directions <span aria-hidden>→</span>
          </a>
        </div>
      </div>
    </div>
  );
}
Map with Opening Hours

Come by when the door’s open.
