From 8e9bc8f7af7c254296f61d41db50c754a6868ae6 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Tue, 23 Jun 2026 08:38:49 +0000
Subject: [PATCH] Deploy

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

diff --git a/src/components/sections/ContactAndHoursSection.tsx b/src/components/sections/ContactAndHoursSection.tsx
new file mode 100644
index 0000000..d9669a0
--- /dev/null
+++ b/src/components/sections/ContactAndHoursSection.tsx
@@ -0,0 +1,122 @@
+'use client'
+
+import { useEmDashContent } from '@/hooks/useEmDashContent'
+import { Clock, Mail, MapPin, Phone } from 'lucide-react'
+
+export default function ContactAndHoursSection() {
+  const { items, loading } = useEmDashContent('business_hours')
+
+  if (loading) {
+    return (
+      <div className="flex justify-center py-16">
+        <div className="h-8 w-8 animate-spin rounded-full border-2 border-current border-t-transparent" />
+      </div>
+    )
+  }
+
+  if (items.length === 0) return null
+
+  return (
+    <section
+      id="contact"
+      data-vula-section="contact"
+      data-vula-cms="business_hours"
+      className="bg-neutral-50 py-20"
+    >
+      <div className="container mx-auto px-4">
+        <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
+          {/* Left: Contact details + Map */}
+          <div>
+            <h2 className="text-3xl font-bold text-[#111827] mb-6">Contact Us</h2>
+            <div className="space-y-4 mb-8">
+              <div className="flex items-start gap-3">
+                <MapPin className="mt-1 h-5 w-5 text-[#d4af37] shrink-0" />
+                <div>
+                  <p className="font-semibold text-[#111827]">Office Address</p>
+                  <p className="text-neutral-600">
+                    1st Floor, Sandton Office Tower<br />
+                    123 Maude Street, Sandton<br />
+                    Johannesburg, 2196<br />
+                    Gauteng, South Africa
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <Phone className="mt-1 h-5 w-5 text-[#d4af37] shrink-0" />
+                <div>
+                  <p className="font-semibold text-[#111827]">Phone</p>
+                  <p className="text-neutral-600">+27 11 234 5678</p>
+                  <p className="text-neutral-600">Emergency: 0800 123 456</p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <Mail className="mt-1 h-5 w-5 text-[#d4af37] shrink-0" />
+                <div>
+                  <p className="font-semibold text-[#111827]">Email</p>
+                  <p className="text-neutral-600">info@mashobanelaw.co.za</p>
+                </div>
+              </div>
+            </div>
+            {/* Embedded map placeholder */}
+            <div className="h-64 w-full overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-[var(--shadow-card)]">
+              <iframe
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3580.123456!2d28.058056!3d-26.107778!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1e9566c123456789%3A0x123456789abcdef!2sSandton%2C+Johannesburg!5e0!3m2!1sen!2sza!4v1700000000000"
+                width="100%"
+                height="100%"
+                style={{ border: 0 }}
+                allowFullScreen
+                loading="lazy"
+                referrerPolicy="no-referrer-when-downgrade"
+                title="Mashobane &amp; Associate Office Location"
+                className="rounded-xl"
+              />
+            </div>
+          </div>
+          {/* Right: Office Hours from CMS */}
+          <div>
+            <h2 className="text-3xl font-bold text-[#111827] mb-6">Office Hours</h2>
+            <div className="space-y-3">
+              {items.map((item) => {
+                const d = item.data as {
+                  day_of_week?: string
+                  open_time?: string
+                  close_time?: string
+                  is_closed?: boolean
+                  note?: string
+                }
+                return (
+                  <div
+                    key={item.id}
+                    className="flex items-center justify-between rounded-lg border border-neutral-200 bg-white px-4 py-3 shadow-[var(--shadow-surface)]"
+                  >
+                    <div className="flex items-center gap-3">
+                      <Clock className="h-4 w-4 text-[#36454F]" />
+                      <span className="font-medium text-[#111827]">{d.day_of_week}</span>
+                    </div>
+                    <div className="text-right">
+                      {d.is_closed ? (
+                        <span className="rounded-full bg-red-100 px-3 py-1 text-xs font-semibold text-red-700">
+                          Closed
+                        </span>
+                      ) : (
+                        <span className="text-sm text-neutral-600">
+                          {d.open_time} – {d.close_time}
+                        </span>
+                      )}
+                      {d.note && (
+                        <p className="mt-1 text-xs text-neutral-400">{d.note}</p>
+                      )}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+            <p className="mt-6 text-sm text-neutral-500">
+              Closed on South African public holidays.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}