From 4b17d52b116552730a3ea32b6a177cdbdf6078b1 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Sun, 26 Jul 2026 16:56:17 +0000
Subject: [PATCH] Deploy

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

diff --git a/src/components/sections/VendaLodgeEnquirySection.tsx b/src/components/sections/VendaLodgeEnquirySection.tsx
new file mode 100644
index 0000000..09c58e7
--- /dev/null
+++ b/src/components/sections/VendaLodgeEnquirySection.tsx
@@ -0,0 +1,164 @@
+'use client'
+
+import { useState } from "react"
+import { useEmDashContent } from "@/hooks/useEmDashContent"
+import { Card, CardContent } from "@/components/ui/Card"
+import Button from "@/components/ui/Button"
+import Input from "@/components/ui/Input"
+import { Badge, Clock, Mail, MapPin, MessageCircle, Moon, Phone, Sun } from 'lucide-react'
+import Image from "next/image"
+
+export default function VendaLodgeEnquirySection() {
+  const { items, loading } = useEmDashContent("business_hours")
+  const [formData, setFormData] = useState({ name: "", email: "", message: "" })
+  const [submitted, setSubmitted] = useState(false)
+
+  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 handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    setSubmitted(true)
+    setFormData({ name: "", email: "", message: "" })
+  }
+
+  const getIcon = (day: string) => {
+    const d = day.toLowerCase()
+    if (d.includes("saturday") || d.includes("sunday")) return <Sun className="w-5 h-5 text-[#8b5a3c]" />
+    return <Moon className="w-5 h-5 text-[#8b5a3c]" />
+  }
+
+  return (
+    <section
+      id="contact"
+      data-vula-section="vendalodgeenquiry"
+      data-vula-cms="business_hours"
+      className="py-20 bg-[#f4f9f5]"
+    >
+      <div className="container mx-auto px-4 max-w-7xl">
+        <div className="grid md:grid-cols-2 gap-12 items-start">
+          {/* Left Column: Contact Info + Hours */}
+          <div>
+            <h2 className="text-3xl font-bold text-[#0d2114] mb-2 font-heading">
+              We already know the stars by name, and we&apos;ll be waiting to show them to you.
+            </h2>
+            <p className="text-[#16a34a] font-semibold text-lg mb-8 font-body italic">
+              Reach out – we&apos;re family-run, warm, and ready.
+            </p>
+
+            <div className="space-y-4 mb-8">
+              <div className="flex items-center gap-3">
+                <MapPin className="w-5 h-5 text-[#8b5a3c]" />
+                <span className="text-[#0d2114]">Nzhelele Valley, Limpopo, South Africa</span>
+              </div>
+              <div className="flex items-center gap-3">
+                <Phone className="w-5 h-5 text-[#8b5a3c]" />
+                <span className="text-[#0d2114]">+27 12 345 6789</span>
+              </div>
+              <div className="flex items-center gap-3">
+                <Mail className="w-5 h-5 text-[#8b5a3c]" />
+                <span className="text-[#0d2114]">info@vavendalodge.co.za</span>
+              </div>
+              <div className="flex items-center gap-3">
+                <MessageCircle className="w-5 h-5 text-[#8b5a3c]" />
+                <span className="text-[#0d2114]">WhatsApp: +27 82 123 4567</span>
+              </div>
+            </div>
+
+            <div className="bg-white rounded-2xl p-6 shadow-soft border border-[#d4e2d9]">
+              <h3 className="text-xl font-semibold text-[#0d2114] mb-4 font-heading">Reception &amp; Check-in Hours</h3>
+              <ul 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 (
+                    <li key={item.id} className="flex items-center gap-3 border-b border-[#d4e2d9] pb-2 last:border-0">
+                      <span className="shrink-0">{getIcon(d.day_of_week || "")}</span>
+                      <span className="font-medium text-[#0d2114] flex-1">{d.day_of_week}</span>
+                      {d.is_closed ? (
+                        <Badge variant="outline" className="text-xs">Closed</Badge>
+                      ) : (
+                        <span className="text-[#16a34a] text-sm">
+                          {d.open_time} – {d.close_time}
+                        </span>
+                      )}
+                      {d.note && <span className="text-xs text-[#8b5a3c] italic">{d.note}</span>}
+                    </li>
+                  )
+                })}
+              </ul>
+              <p className="text-xs text-muted-foreground mt-3">Public holidays may vary – please enquire.</p>
+            </div>
+          </div>
+
+          {/* Right Column: Enquiry Form + Map */}
+          <div className="space-y-8">
+            <Card className="bg-white border-[#d4e2d9] shadow-soft">
+              <CardContent className="p-6">
+                {submitted ? (
+                  <div className="text-center py-8">
+                    <div className="text-[#16a34a] text-4xl mb-2">✓</div>
+                    <h3 className="text-xl font-bold text-[#0d2114] mb-2">Thank You!</h3>
+                    <p className="text-muted-foreground">We&apos;ll respond within 24 hours – straight from the lodge.</p>
+                  </div>
+                ) : (
+                  <form onSubmit={handleSubmit} className="space-y-4">
+                    <h3 className="text-xl font-semibold text-[#0d2114] mb-2 font-heading">Send us an enquiry</h3>
+                    <Input
+                      placeholder="Your name"
+                      value={formData.name}
+                      onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                      required
+                    />
+                    <Input
+                      type="email"
+                      placeholder="Email address"
+                      value={formData.email}
+                      onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                      required
+                    />
+                    <textarea
+                      placeholder="Your message..."
+                      value={formData.message}
+                      onChange={(e) => setFormData({ ...formData, message: e.target.value })}
+                      rows={4}
+                      required
+                      className="w-full rounded-xl border border-[#d4e2d9] bg-white px-4 py-3 text-sm text-[#0d2114] placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-[#16a34a] transition-all duration-200"
+                    />
+                    <Button type="submit" variant="default" size="lg" className="w-full">
+                      Send Enquiry
+                    </Button>
+                  </form>
+                )}
+              </CardContent>
+            </Card>
+
+            <div className="rounded-2xl overflow-hidden border border-[#d4e2d9] shadow-soft h-64 relative">
+              <iframe
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d28748.999999999996!2d29.9999999!3d-22.9999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1ec6d8a1a1a1a1a1%3A0x1a1a1a1a1a1a1a1a!2sNzhelele%2C%20Limpopo!5e0!3m2!1sen!2sza!4v1700000000000"
+                width="100%"
+                height="100%"
+                style={{ border: 0 }}
+                allowFullScreen
+                loading="lazy"
+                referrerPolicy="no-referrer-when-downgrade"
+                title="Location of vaVenda Lodge"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}