Deploy

2026-07-15 09:25:26 +00:00
parent 7bf9348e4b
commit b72c8d81fb
1 changed files with 108 additions and 0 deletions
@@ -0,0 +1,108 @@
+'use client'
+import { useState } from 'react'
+import { Mail, MapPin, MessageCircle, Phone } from 'lucide-react'
+
+import { Card, CardContent } from '@/components/ui/Card'
+import Input from '@/components/ui/Input'
+import Button from '@/components/ui/Button'
+
+export default function ImbizoContactSection() {
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [message, setMessage] = useState('')
+  const [submitted, setSubmitted] = useState(false)
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    setSubmitted(true)
+    // In production, send to backend
+  }
+
+  const contactMethods = [
+    { icon: MapPin, label: 'R612, Hluhluwe, KwaZulu-Natal, 3960' },
+    { icon: Phone, label: '+27 35 562 1000' },
+    { icon: Mail, label: 'bookings@zululodge.co.za' },
+    { icon: MessageCircle, label: '+27 76 123 4567' },
+  ]
+
+  return (
+    <section data-vula-section="imbizocontact" id="imbizo-contact" className="py-20 bg-[#f9f7f4]">
+      <div className="container mx-auto px-4">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl md:text-4xl font-bold text-[#211c0d] mb-4">
+            We&apos;re here to welcome you
+          </h2>
+          <p className="text-[#211c0d]/70 max-w-xl mx-auto">
+            Whether you need help choosing a suite or planning your safari,
+            our team answers every enquiry personally — it&apos;s the Zulu Lodge way.
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-10 max-w-5xl mx-auto">
+          {/* Contact details */}
+          <Card className="bg-white border-[#e2dfd4]">
+            <CardContent className="p-6 space-y-6">
+              {contactMethods.map((item) => {
+                const Icon = item.icon
+                return (
+                  <div key={item.label} className="flex items-start gap-3">
+                    <Icon className="w-5 h-5 text-[#d4af37] mt-0.5 shrink-0" />
+                    <span className="text-[#211c0d]/80">{item.label}</span>
+                  </div>
+                )
+              })}
+              <div className="pt-4 border-t border-[#e2dfd4]">
+                <p className="text-sm text-[#211c0d]/60">
+                  Office hours: Mon–Sat 08:00–18:00 · Sunday &amp; public holidays 09:00–15:00
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Contact form */}
+          <Card className="bg-white border-[#e2dfd4]">
+            <CardContent className="p-6">
+              {submitted ? (
+                <div className="text-center py-8">
+                  <MessageCircle className="w-12 h-12 text-[#d4af37] mx-auto mb-3" />
+                  <p className="text-lg font-semibold text-[#211c0d]">Thank you!</p>
+                  <p className="text-[#211c0d]/70">We&apos;ll reply within 24 hours.</p>
+                </div>
+              ) : (
+                <form onSubmit={handleSubmit} className="space-y-4">
+                  <Input
+                    type="text"
+                    placeholder="Your name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    required
+                    className="border-[#e2dfd4] focus:border-[#d4af37]"
+                  />
+                  <Input
+                    type="email"
+                    placeholder="Your email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    required
+                    className="border-[#e2dfd4] focus:border-[#d4af37]"
+                  />
+                  <textarea
+                    placeholder="Tell us about your dream stay..."
+                    value={message}
+                    onChange={(e) => setMessage(e.target.value)}
+                    required
+                    rows={4}
+                    className="w-full p-3 border border-[#e2dfd4] rounded-lg focus:ring-2 focus:ring-[#d4af37] focus:border-transparent outline-none resize-none bg-[#f9f7f4]"
+                  />
+                  <Button type="submit" variant="default" className="w-full">
+                    Send Enquiry
+                  </Button>
+                </form>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+  )
+}