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>
  )
 }