'use client'

import { useState } from "react"
import Button from "@/components/ui/Button"
import Input from "@/components/ui/Input"
import { Mail, MapPin, Phone } from 'lucide-react'

export default function KwaNtofontofoEnquirySection() {
  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)
  }

  if (submitted) {
    return (
      <section id="contact" className="bg-white py-16 px-4">
        <div className="max-w-lg mx-auto text-center">
          <h2 className="text-3xl font-bold text-[#d4af37] mb-4">Thank You</h2>
          <p className="text-gray-600">
            Your enquiry has been received. We will get back to you personally and promptly.
          </p>
        </div>
      </section>
    )
  }

  return (
    <section id="contact" data-vula-section="kwantofontofoenquirysection" className="bg-neutral-50 py-16 px-4">
      <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-10 items-start">
        {/* Contact Information */}
        <div>
          <h2 className="text-3xl font-bold text-gray-900 mb-6">Get in Touch</h2>
          <p className="text-gray-600 mb-8">
            Have a question or want to book? Drop us a message and we will respond personally.
          </p>
          <div className="space-y-4 text-gray-700">
            <div className="flex items-start gap-3">
              <Phone className="w-5 h-5 text-[#d4af37] mt-1" />
              <div>
                <p className="font-semibold">Phone / WhatsApp</p>
                <p>+27 33 940 1234</p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <Mail className="w-5 h-5 text-[#d4af37] mt-1" />
              <div>
                <p className="font-semibold">Email</p>
                <p>info@kwantofontofo.co.za</p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <MapPin className="w-5 h-5 text-[#d4af37] mt-1" />
              <div>
                <p className="font-semibold">Address</p>
                <p>44 Rutherford Circle, Bisley, Pietermaritzburg, 3201, KwaZulu-Natal</p>
              </div>
            </div>
          </div>
        </div>

        {/* Enquiry Form */}
        <form onSubmit={handleSubmit} className="bg-white rounded-xl p-6 shadow-[var(--shadow-card)] space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Your Name</label>
            <Input
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="e.g. Thandi Mokoena"
              required
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
            <Input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="you@example.com"
              required
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Your Message</label>
            <textarea
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              rows={4}
              className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#d4af37] focus:border-transparent"
              placeholder="Tell us how we can help..."
              required
            />
          </div>
          <Button
            type="submit"
            variant="default"
            size="lg"
            className="w-full bg-[#d4af37] hover:bg-[#b8962e] text-white"
          >
            Send Enquiry
          </Button>
        </form>
      </div>
    </section>
  )
}