Deploy

src/components/sections/LocationSection.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import { useEmDashContent } from '@/hooks/useEmDashContent'
+import { Clock, Leaf, MapPin } from 'lucide-react'
+
+export default function LocationSection() {
+  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 text-[#2E7D32]" />
+      </div>
+    )
+  }
+
+  if (items.length === 0) return null
+
+  // Map over hours items (expected fields: day_of_week, open_time, close_time, is_closed, note)
+  const hours = items.map((item: any) => item.data as {
+    day_of_week?: string
+    open_time?: string
+    close_time?: string
+    is_closed?: boolean
+    note?: string
+  })
+
+  const address = {
+    line1: 'Via della Scrofa 65',
+    line2: '00186 Rome, Italy',
+    mapEmbed: 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2969.598534118071!2d12.472589315467225!3d41.898585379221504!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x132f609a1baf0f8b%3A0x2b1c5433b7e2b9f0!2sVia+della+Scrofa%2C+65%2C+00186+Roma+RM%2C+Italy!5e0!3m2!1sen!2sza!4v1690000000000',
+  }
+
+  return (
+    <section id="location" data-vula-section="location" data-vula-cms="business_hours" className="py-24 bg-white">
+      <div className="max-w-6xl mx-auto px-6">
+        <div className="grid md:grid-cols-2 gap-12 items-start">
+          {/* Map */}
+          <div className="rounded-xl overflow-hidden shadow-[var(--shadow-card)]">
+            <iframe
+              src={address.mapEmbed}
+              width="100%"
+              height="320"
+              style={{ border: 0 }}
+              allowFullScreen
+              loading="lazy"
+              className="w-full"
+              title="Bona Vista location map"
+            />
+          </div>
+
+          {/* Address & Hours */}
+          <div>
+            {/* Address block */}
+            <div className="flex items-start gap-3 mb-8">
+              <MapPin className="w-6 h-6 text-[#2E7D32] mt-1 shrink-0" />
+              <div>
+                <h3 className="text-xl font-semibold text-[#1B3A1F]">Find Us</h3>
+                <p className="text-gray-600 mt-1">{address.line1}, {address.line2}</p>
+              </div>
+            </div>
+
+            {/* Business hours timeline */}
+            <div className="relative pl-8 border-l-2 border-[#8BC34A]">
+              <Clock className="absolute -left-3 top-0 w-6 h-6 text-[#2E7D32] bg-white p-0.5" />
+              <h3 className="text-xl font-semibold text-[#1B3A1F] mb-6">Opening Hours</h3>
+              <ul className="space-y-4">
+                {hours.map((h, idx) => (
+                  <li key={idx} className="flex items-start gap-3">
+                    <Leaf className="w-4 h-4 text-[#4CAF50] mt-1 shrink-0" />
+                    <div className="flex-1">
+                      <span className="font-medium text-[#1B3A1F]">{h.day_of_week}</span>
+                      {h.is_closed ? (
+                        <span className="ml-2 text-sm text-red-500">Closed</span>
+                      ) : (
+                        <span className="ml-2 text-sm text-gray-600">
+                          {h.open_time} &ndash; {h.close_time}
+                        </span>
+                      )}
+                      {h.note && (
+                        <p className="text-xs text-gray-400 mt-0.5">{h.note}</p>
+                      )}
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}