From 152f1f747cdeaed80e91f76d930137f23f4e7c6c Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Sun, 26 Jul 2026 17:41:19 +0000
Subject: [PATCH] Deploy

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

diff --git a/src/components/sections/ContactSection.tsx b/src/components/sections/ContactSection.tsx
new file mode 100644
index 0000000..31c05ed
--- /dev/null
+++ b/src/components/sections/ContactSection.tsx
@@ -0,0 +1,141 @@
+'use client'
+
+import { useEmDashContent } from '@/hooks/useEmDashContent'
+import { Mail, MapPin, MessageCircle, Phone } from 'lucide-react'
+import Badge from '@/components/ui/Badge'
+
+export default function ContactSection() {
+  const { items: hours, 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-[#d4af37] border-t-transparent animate-spin" /></div>
+  }
+
+  // Static contact details – consistent across the site
+  const contactDetails = {
+    address: 'R618, Mkuze, KwaZulu-Natal, 3965',
+    phone: '+27 82 123 4567',
+    email: 'reservations@mpofanalodge.co.za',
+    whatsapp: '+27 82 123 4567',
+  }
+
+  return (
+    <section
+      id="contact"
+      data-vula-section="contact"
+      data-vula-cms="business_hours"
+      className="py-28 bg-[#0a120e] text-[#e7eeea] border-t border-[#304036]"
+    >
+      <div className="container mx-auto px-4 max-w-6xl">
+        <div className="flex items-center justify-center gap-4 mb-6">
+          <span className="block w-14 h-px bg-[#d4af37]" />
+          <span className="text-[#d4af37] text-xs font-sans uppercase tracking-[0.2em]">
+            Get in Touch
+          </span>
+          <span className="block w-14 h-px bg-[#d4af37]" />
+        </div>
+
+        <h2 className="font-serif font-light text-4xl md:text-5xl text-center leading-tight mb-16">
+          We&apos;re here to
+          <span className="italic text-[#d4af37]"> help</span>
+        </h2>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+          {/* Map embed */}
+          <div className="rounded-lg overflow-hidden border border-[#304036] h-80">
+            <iframe
+              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3589.123456789!2d32.0!4d-27.5!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjfCsDMwJzAwLjAiUyAzMsKwMDAnMDAuMCJF!5e0!3m2!1sen!2sza!4v1710000000000"
+              width="100%"
+              height="100%"
+              style={{ border: 0 }}
+              allowFullScreen
+              loading="lazy"
+              referrerPolicy="no-referrer-when-downgrade"
+              title="Mpofana Lodge location"
+            />
+          </div>
+
+          {/* Contact info + hours */}
+          <div className="space-y-8">
+            {/* Address, Phone, Email, WhatsApp */}
+            <div className="space-y-4">
+              <div className="flex items-start gap-3">
+                <MapPin className="w-5 h-5 text-[#d4af37] mt-0.5 shrink-0" />
+                <p className="text-[#b0bfb8]">{contactDetails.address}</p>
+              </div>
+              <div className="flex items-center gap-3">
+                <Phone className="w-5 h-5 text-[#d4af37] shrink-0" />
+                <p className="text-[#b0bfb8]">{contactDetails.phone}</p>
+              </div>
+              <div className="flex items-center gap-3">
+                <Mail className="w-5 h-5 text-[#d4af37] shrink-0" />
+                <p className="text-[#b0bfb8]">{contactDetails.email}</p>
+              </div>
+              <div className="flex items-center gap-3">
+                <MessageCircle className="w-5 h-5 text-[#d4af37] shrink-0" />
+                <a
+                  href={`https://wa.me/${contactDetails.whatsapp.replace(/\s/g, '')}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-[#b0bfb8] hover:text-[#d4af37] transition-colors duration-200 underline underline-offset-2"
+                >
+                  WhatsApp Us
+                </a>
+              </div>
+            </div>
+
+            {/* Opening hours from CMS */}
+            {hours.length > 0 && (
+              <div className="border-t border-[#304036] pt-6">
+                <h3 className="font-sans text-xs uppercase tracking-[0.15em] text-[#d4af37] mb-4">
+                  Opening Hours
+                </h3>
+                <ul className="space-y-2">
+                  {hours.map((item) => {
+                    const d = item.data as {
+                      day_of_week?: string
+                      open_time?: string
+                      close_time?: string
+                      is_closed?: boolean
+                      note?: string
+                    }
+                    return (
+                      <li
+                        key={item.id}
+                        className="flex justify-between text-sm text-[#b0bfb8]"
+                      >
+                        <span className="font-medium">{d.day_of_week}</span>
+                        <span>
+                          {d.is_closed
+                            ? 'Closed'
+                            : `${d.open_time} – ${d.close_time}`}
+                          {d.note && (
+                            <span className="text-[#6a7a72] ml-2">
+                              ({d.note})
+                            </span>
+                          )}
+                        </span>
+                      </li>
+                    )
+                  })}
+                </ul>
+                <p className="text-[#6a7a72] text-xs mt-3">
+                  * Public holidays may affect hours.
+                </p>
+              </div>
+            )}
+
+            {/* Enquiry teaser */}
+            <div className="bg-[#1a2720] rounded-lg p-5 border border-[#304036]">
+              <p className="text-[#b0bfb8] text-sm">
+                Questions about your stay? We&apos;d love to hear from you.
+                Send us a message or call — every enquiry is answered within 4
+                hours.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}