From 3d6bb031e4dcf3020990ab58caeef792c121a4a4 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Tue, 23 Jun 2026 08:47:31 +0000
Subject: [PATCH] Deploy

---
 .../sections/LocationHoursSection.tsx         | 86 +++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 src/components/sections/LocationHoursSection.tsx

diff --git a/src/components/sections/LocationHoursSection.tsx b/src/components/sections/LocationHoursSection.tsx
new file mode 100644
index 0000000..e1b3bb2
--- /dev/null
+++ b/src/components/sections/LocationHoursSection.tsx
@@ -0,0 +1,86 @@
+'use client'
+
+import { useEmDashContent } from '@/hooks/useEmDashContent'
+
+export default function LocationHoursSection() {
+  const { items, loading } = useEmDashContent('business_hours')
+
+  if (loading) {
+    return (
+      <div className="flex justify-center py-16">
+        <div className="w-8 h-8 rounded-full border-2 border-current border-t-transparent animate-spin" />
+      </div>
+    )
+  }
+
+  if (items.length === 0) return null
+
+  const hours = items.map((item) => {
+    const d = item.data as {
+      day_of_week?: string
+      open_time?: string
+      close_time?: string
+      is_closed?: boolean
+      note?: string
+    }
+    return d
+  })
+
+  return (
+    <section
+      id="location-hours"
+      data-vula-section="locationhours"
+      data-vula-cms="business_hours"
+      className="py-24 bg-[#FAFAFA]"
+    >
+      <div className="max-w-6xl mx-auto px-4">
+        <h2 className="text-4xl font-bold text-[#212121] mb-2">Find Us</h2>
+        <div className="grid md:grid-cols-2 gap-12 items-start">
+          {/* Map */}
+          <div className="rounded-xl overflow-hidden shadow-[var(--shadow-card)]">
+            <iframe
+              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2970.123456789!2d-87.629798!3d41.878113!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x880e2ca111111111%3A0x1111111111111111!2s1000%20W%20Washington%20Blvd%2C%20Chicago%2C%20IL%2060607!5e0!3m2!1sen!2sus!4v1234567890"
+              width="100%"
+              height="350"
+              style={{ border: 0 }}
+              allowFullScreen
+              loading="lazy"
+              referrerPolicy="no-referrer-when-downgrade"
+              title="Pino's Italian Restaurant Location"
+              className="rounded-xl"
+            />
+          </div>
+
+          {/* Hours & Info */}
+          <div>
+            <p className="text-lg text-[#FF5722] font-semibold mb-1">Pino's Italian Restaurant</p>
+            <p className="text-[#212121] mb-2">1000 W Washington Blvd, Chicago, IL 60607</p>
+            <p className="text-sm text-gray-500 mb-6">⚡ Steps from the L train</p>
+
+            <h3 className="text-xl font-bold text-[#212121] mb-4">Business Hours</h3>
+            <ul className="space-y-2">
+              {hours.map((h, i) => (
+                <li key={i} className="flex items-center gap-3 text-[#212121]">
+                  <span
+                    className={`w-3 h-3 rounded-full flex-shrink-0 ${
+                      h.is_closed ? 'bg-red-500' : 'bg-green-500'
+                    }`}
+                  />
+                  <span className="font-medium w-28">{h.day_of_week}</span>
+                  <span>
+                    {h.is_closed
+                      ? 'Closed'
+                      : `${h.open_time} – ${h.close_time}`}
+                  </span>
+                  {h.note && (
+                    <span className="text-sm text-gray-400 italic">({h.note})</span>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}