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

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

diff --git a/src/components/sections/ContactEnquirySection.tsx b/src/components/sections/ContactEnquirySection.tsx
new file mode 100644
index 0000000..8b9cac1
--- /dev/null
+++ b/src/components/sections/ContactEnquirySection.tsx
@@ -0,0 +1,122 @@
+'use client'
+
+import { useState } from "react"
+import Button from "@/components/ui/Button"
+import Input from "@/components/ui/Input"
+import { Mail, MessageCircle, Phone } from 'lucide-react'
+
+export default function ContactEnquirySection() {
+  const [name, setName] = useState("")
+  const [email, setEmail] = useState("")
+  const [phone, setPhone] = useState("")
+  const [message, setMessage] = useState("")
+  const [submitted, setSubmitted] = useState(false)
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    setSubmitted(true)
+    // Actual submission handled by backend
+  }
+
+  return (
+    <section data-vula-section="contactenquiry" id="contact-enquiry" className="py-20 bg-[#f9f7f4]">
+      <div className="container mx-auto px-4">
+        <div className="max-w-4xl mx-auto">
+          <span className="text-sm uppercase tracking-widest text-[#d4af37] font-semibold">Get in Touch</span>
+          <h2 className="text-3xl md:text-4xl font-bold text-[#8b5a3c] mt-2 mb-6">
+            Let Us Tailor Your Stay
+          </h2>
+          <p className="text-[#111827]/70 mb-12 max-w-2xl">
+            Whether you need an early check-in, a special dinner arrangement, or a private 
+            tour of the Midlands Meander — we are here to make it happen. Reach out directly 
+            or use the form below and we will respond within the hour.
+          </p>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+            <div>
+              <div className="space-y-6">
+                <div className="flex items-center gap-4">
+                  <div className="p-3 bg-[#d4af37]/10 rounded-full">
+                    <Phone className="w-5 h-5 text-[#d4af37]" />
+                  </div>
+                  <div>
+                    <p className="font-semibold text-[#111827]">Phone</p>
+                    <p className="text-sm text-[#111827]/70">+27 63 363 1797</p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-4">
+                  <div className="p-3 bg-[#8b5a3c]/10 rounded-full">
+                    <Mail className="w-5 h-5 text-[#8b5a3c]" />
+                  </div>
+                  <div>
+                    <p className="font-semibold text-[#111827]">Email</p>
+                    <p className="text-sm text-[#111827]/70">bookings@kwantofontofo.co.za</p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-4">
+                  <div className="p-3 bg-[#16a34a]/10 rounded-full">
+                    <MessageCircle className="w-5 h-5 text-[#16a34a]" />
+                  </div>
+                  <div>
+                    <p className="font-semibold text-[#111827]">WhatsApp</p>
+                    <p className="text-sm text-[#111827]/70">+27 63 363 1797</p>
+                  </div>
+                </div>
+                <div className="mt-8 p-4 bg-[#d4af37]/5 border border-[#d4af37]/20 rounded-lg">
+                  <p className="text-sm text-[#111827]/80">
+                    <span className="font-semibold">Trading hours:</span> 07:00 – 22:00 daily, 
+                    including public holidays (South Africa has many — we stay open).
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div>
+              {submitted ? (
+                <div className="p-8 bg-white rounded-xl shadow-[var(--shadow-card)] text-center">
+                  <h3 className="text-xl font-bold text-[#16a34a] mb-2">Thank you!</h3>
+                  <p className="text-[#111827]/70">
+                    Your enquiry has been received. We will respond within the hour.
+                  </p>
+                </div>
+              ) : (
+                <form onSubmit={handleSubmit} className="space-y-4">
+                  <Input
+                    type="text"
+                    placeholder="Your name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    required
+                  />
+                  <Input
+                    type="email"
+                    placeholder="Email address"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    required
+                  />
+                  <Input
+                    type="tel"
+                    placeholder="Phone number (optional)"
+                    value={phone}
+                    onChange={(e) => setPhone(e.target.value)}
+                  />
+                  <textarea
+                    placeholder="How can we help? (e.g. dinner request, special occasion, late arrival)"
+                    value={message}
+                    onChange={(e) => setMessage(e.target.value)}
+                    required
+                    className="w-full border border-[#e5e7eb] rounded-lg p-3 min-h-[120px] focus:outline-none focus:ring-2 focus:ring-[#d4af37]"
+                  />
+                  <Button type="submit" variant="default" className="w-full bg-[#d4af37] text-[#111827] hover:bg-[#c49f2e]">
+                    Send Enquiry
+                  </Button>
+                </form>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file