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

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

diff --git a/src/components/sections/BookingSection.tsx b/src/components/sections/BookingSection.tsx
new file mode 100644
index 0000000..d299fe9
--- /dev/null
+++ b/src/components/sections/BookingSection.tsx
@@ -0,0 +1,162 @@
+'use client'
+
+import { useState } from 'react'
+import { Calendar, MessageSquare, Users } from 'lucide-react'
+import Button from '@/components/ui/Button'
+import Input from '@/components/ui/Input'
+
+export default function BookingSection() {
+  const [form, setForm] = useState({
+    name: '',
+    email: '',
+    phone: '',
+    checkIn: '',
+    checkOut: '',
+    guests: 2,
+    notes: ''
+  })
+  const [submitted, setSubmitted] = useState(false)
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target
+    setForm(prev => ({ ...prev, [name]: value }))
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    // Simulate booking submission
+    setSubmitted(true)
+    setTimeout(() => setSubmitted(false), 3000)
+  }
+
+  return (
+    <section data-vula-section="booking" id="booking" className="py-20 lg:py-28 bg-white">
+      <div className="container mx-auto px-4 max-w-4xl">
+        <div className="text-center mb-12">
+          <p className="text-sm font-semibold tracking-widest uppercase text-[#d4af37] mb-2">Reserve Your Stay</p>
+          <h2 className="text-3xl lg:text-4xl font-semibold tracking-tight text-[#36454F]">
+            Book Your Nguni Lodge Experience
+          </h2>
+          <p className="mt-4 text-lg leading-relaxed text-neutral-600 max-w-2xl mx-auto">
+            Secure your exclusive bush retreat in KwaZulu-Natal. Complete the form below and our team will confirm your reservation within 24 hours.
+          </p>
+        </div>
+
+        {submitted ? (
+          <div className="rounded-xl border border-[#6b8e23]/30 bg-[#6b8e23]/10 p-8 text-center">
+            <div className="inline-flex items-center justify-center w-14 h-14 rounded-full bg-[#6b8e23] text-white mb-4">
+              <MessageSquare className="w-7 h-7" />
+            </div>
+            <h3 className="text-xl font-semibold text-[#36454F]">Request Received</h3>
+            <p className="mt-2 text-neutral-600">We will be in touch within 24 hours to confirm your dates. Thank you for choosing Nguni Lodge.</p>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit} className="rounded-xl border border-neutral-100 bg-white shadow-[var(--shadow-card)] p-8">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div className="space-y-2">
+                <label className="text-sm font-medium text-neutral-700">Full Name</label>
+                <Input
+                  name="name"
+                  value={form.name}
+                  onChange={handleChange}
+                  placeholder="e.g. Thandi Mokoena"
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium text-neutral-700">Email Address</label>
+                <Input
+                  type="email"
+                  name="email"
+                  value={form.email}
+                  onChange={handleChange}
+                  placeholder="guest@example.com"
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium text-neutral-700">Phone Number</label>
+                <Input
+                  type="tel"
+                  name="phone"
+                  value={form.phone}
+                  onChange={handleChange}
+                  placeholder="+27 XX XXX XXXX"
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium text-neutral-700">Number of Guests</label>
+                <div className="relative">
+                  <Users className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400" />
+                  <Input
+                    type="number"
+                    name="guests"
+                    value={form.guests}
+                    onChange={handleChange}
+                    min={1}
+                    max={12}
+                    className="pl-10"
+                  />
+                </div>
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium text-neutral-700">Check-in Date</label>
+                <div className="relative">
+                  <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400" />
+                  <Input
+                    type="date"
+                    name="checkIn"
+                    value={form.checkIn}
+                    onChange={handleChange}
+                    className="pl-10"
+                    required
+                  />
+                </div>
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium text-neutral-700">Check-out Date</label>
+                <div className="relative">
+                  <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400" />
+                  <Input
+                    type="date"
+                    name="checkOut"
+                    value={form.checkOut}
+                    onChange={handleChange}
+                    className="pl-10"
+                    required
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-6 space-y-2">
+              <label className="text-sm font-medium text-neutral-700">Special Requests</label>
+              <textarea
+                name="notes"
+                value={form.notes}
+                onChange={handleChange}
+                rows={3}
+                placeholder="Dietary requirements, room preferences, celebration plans…"
+                className="w-full rounded-lg border border-neutral-200 bg-white px-4 py-3 text-sm placeholder-neutral-400 focus:border-[#d4af37] focus:ring-1 focus:ring-[#d4af37] transition-colors"
+              />
+            </div>
+
+            <div className="mt-8 flex justify-center">
+              <Button
+                type="submit"
+                className="bg-[#d4af37] text-white px-10 py-3 rounded-lg font-semibold hover:opacity-90 transition-all duration-200 text-base"
+              >
+                Send Booking Request
+              </Button>
+            </div>
+
+            <p className="mt-4 text-center text-xs text-neutral-400">
+              We respect your privacy. Your information will only be used to process your booking.
+            </p>
+          </form>
+        )}
+      </div>
+    </section>
+  )
+}
\ No newline at end of file