From 69ab6f1c9e1ac101999d2b2052788a7ffc741dcb Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Sun, 26 Jul 2026 17:04:57 +0000
Subject: [PATCH] Deploy

---
 src/components/sections/ContactSection.tsx | 88 ++++++++++++++++++++++
 1 file changed, 88 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..4aee944
--- /dev/null
+++ b/src/components/sections/ContactSection.tsx
@@ -0,0 +1,88 @@
+'use client'
+import { useState } from 'react'
+import Link from 'next/link'
+import Button from '@/components/ui/Button'
+import Input from '@/components/ui/Input'
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card'
+import { Mail, MapPin, MessageCircle, Phone } from 'lucide-react'
+
+export default function ContactSection() {
+  const [formData, setFormData] = useState({ name: '', email: '', phone: '', message: '' })
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    alert('Thank you! Your enquiry has been sent to our reservations team.')
+    setFormData({ name: '', email: '', phone: '', message: '' })
+  }
+  const contactDetails = [
+    { icon: Phone, label: 'Phone', value: "+27 35 562 0123", href: "tel:+27355620123" },
+    { icon: MessageCircle, label: 'WhatsApp', value: "+27 35 562 0123", href: "https://wa.me/27355620123" },
+    { icon: Mail, label: "Email", value: "reservations@zulwinilodge.co.za", href: 'mailto:reservations@zulwinilodge.co.za' },
+    { icon: MapPin, label: 'Address', value: 'R22, Hluhluwe, KwaZulu-Natal, 3960' },
+  ]
+  return (
+    <section data-vula-section="contact" id="contact" className="py-16 md:py-24 bg-[#f9f5f4]">
+      <div className="container mx-auto px-4">
+        <h2 className="text-3xl md:text-4xl font-bold text-[#21140d] text-center mb-12">Get in Touch</h2>
+        <div className="grid md:grid-cols-2 gap-8">
+          <div>
+            <Card className="mb-6 border-[#e2d9d4]">
+              <CardContent className="space-y-4 p-6">
+                {contactDetails.map((item, i) => {
+                  const Icon = item.icon
+                  return (
+                    <div key={i} className="flex items-start gap-3">
+                      <Icon className="w-5 h-5 mt-1 text-[#ea580c] flex-shrink-0" />
+                      <div>
+                        <p className="font-semibold text-[#21140d]">{item.label}</p>
+                        {item.href ? (
+                          <Link href={item.href} className="text-[#ea580c] hover:underline">{item.value}</Link>
+                        ) : (
+                          <p className="text-gray-600">{item.value}</p>
+                        )}
+                      </div>
+                    </div>
+                  )
+                })}
+              </CardContent>
+            </Card>
+            <div className="rounded-2xl overflow-hidden shadow-md border border-[#e2d9d4]">
+              <iframe
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3572.123!2d32.123!3d-28.123!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjjCsDA3JzI0LjAiUyAzMsKwMDcnMjQuMCJF!5e0!3m2!1sen!2sza!4v1612345678"
+                width="100%"
+                height="250"
+                style={{ border: 0 }}
+                allowFullScreen
+                loading="lazy"
+                referrerPolicy="no-referrer-when-downgrade"
+                title="Zulwini Lodge location"
+              ></iframe>
+            </div>
+          </div>
+          <div>
+            <Card className="border-[#e2d9d4]">
+              <CardHeader>
+                <CardTitle className="text-[#21140d]">Send us an Enquiry</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <form onSubmit={handleSubmit} className="space-y-4">
+                  <Input placeholder="Your name" value={formData.name} onChange={(e) => setFormData({...formData, name: e.target.value})} required />
+                  <Input type="email" placeholder="Your email" value={formData.email} onChange={(e) => setFormData({...formData, email: e.target.value})} required />
+                  <Input type="tel" placeholder="Phone number" value={formData.phone} onChange={(e) => setFormData({...formData, phone: e.target.value})} />
+                  <textarea
+                    className="w-full rounded-xl border border-[#e2d9d4] bg-background p-3 focus:outline-none focus:ring-2 focus:ring-[#ea580c]"
+                    rows={4}
+                    placeholder="Your message..."
+                    value={formData.message}
+                    onChange={(e) => setFormData({...formData, message: e.target.value})}
+                    required
+                  ></textarea>
+                  <Button type="submit" variant="default" className="w-full bg-[#ea580c] text-white">Send Message</Button>
+                </form>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file