Deploy

2026-07-14 19:12:52 +00:00
parent 452da206e3
commit 64b9e8f8c2
1 changed files with 102 additions and 0 deletions
@@ -0,0 +1,102 @@
 'use client'
 import { useState } from 'react'
 import { Mail, MessageCircle, Phone } from 'lucide-react'
 import Button from '@/components/ui/Button'
 import Input from '@/components/ui/Input'
 export default function ContactEnquirySection() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: '',
    travelDates: ''
  })
  const [submitted, setSubmitted] = useState(false)
  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData(prev => ({ ...prev, [e.target.name]: e.target.value }))
  }
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // Simulate sending – in a real site, wire to an email API or webhook
    console.log('Enquiry sent', formData)
    setSubmitted(true)
  }
  return (
    <section data-vula-section="contactenquiry" id="contact" className="py-20 bg-[#f5f5dc]">
      <div className="max-w-5xl mx-auto px-6 grid md:grid-cols-2 gap-10">
        <div>
          <h2 className="text-3xl font-bold text-[#1b210d] mb-4">Drop us a line</h2>
          <p className="text-[#8b5a3c] mb-8">
            Prefer to chat? We are easy to reach. While our hosts might be out on a game walk, they will reply as soon as they are back under the stoep.
          </p>
          <div className="space-y-4">
            <div className="flex items-center gap-3">
              <Phone className="w-5 h-5 text-[#6b8e23]" />
              <a href="tel:+27823456789" className="text-[#1b210d] hover:text-[#6b8e23] transition-colors">+27 82 345 6789</a>
            </div>
            <div className="flex items-center gap-3">
              <MessageCircle className="w-5 h-5 text-[#6b8e23]" />
              <a href="https://wa.me/27823456789" target="_blank" rel="noopener noreferrer" className="text-[#1b210d] hover:text-[#6b8e23] transition-colors">WhatsApp: +27 82 345 6789</a>
            </div>
            <div className="flex items-center gap-3">
              <Mail className="w-5 h-5 text-[#6b8e23]" />
              <a href="mailto:reservations@thornveld.co.za" className="text-[#1b210d] hover:text-[#6b8e23] transition-colors">reservations@thornveld.co.za</a>
            </div>
          </div>
        </div>
        <div className="bg-white rounded-xl p-6 shadow-md border border-[#dee2d4]">
          {submitted ? (
            <div className="text-center py-8">
              <p className="text-xl font-semibold text-[#6b8e23]">Sent with care!</p>
              <p className="text-[#8b5a3c] mt-2">We will answer as soon as the fire is lit.</p>
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="space-y-4">
              <Input
                name="name"
                placeholder="Your name"
                value={formData.name}
                onChange={handleChange}
                required
              />
              <Input
                name="email"
                type="email"
                placeholder="Your email"
                value={formData.email}
                onChange={handleChange}
                required
              />
              <div>
                <label className="block text-sm text-[#1b210d] mb-1">Preferred travel dates</label>
                <Input
                  name="travelDates"
                  type="date"
                  value={formData.travelDates}
                  onChange={handleChange}
                />
              </div>
              <textarea
                name="message"
                placeholder="Tell us about your stay – group size, interests, any special requests..."
                value={formData.message}
                onChange={handleChange}
                required
                className="w-full rounded-lg border border-[#dee2d4] bg-white p-3 text-sm text-[#1b210d] placeholder:text-[#8b5a3c]/50 focus:outline-none focus:ring-2 focus:ring-[#6b8e23] focus:border-transparent min-h-[100px]"
              />
              <Button type="submit" variant="default" className="w-full bg-[#6b8e23] hover:bg-[#5a7a1f] text-white">
                Send enquiry
              </Button>
            </form>
          )}
        </div>
      </div>
    </section>
  )
 }