'use client'

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

export default function ContactEnquirySection() {
  const [name, setName] = useState("")
  const [email, setEmail] = useState("")
  const [phone, setPhone] = useState("")
  const [message, setMessage] = useState("")
  const [submitted, setSubmitted] = useState(false)

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    setSubmitted(true)
  }

  return (
    <section data-vula-section="contactenquiry" id="enquire" className="py-28 bg-[#17120f]">
      <div className="container mx-auto px-4 max-w-7xl">
        <div className="text-center mb-14">
          <div className="flex items-center justify-center gap-4 mb-5">
            <span className="h-px w-14 bg-[#d4af37]" />
            <span className="text-xs uppercase tracking-[0.2em] text-[#d4af37]">Get in touch</span>
            <span className="h-px w-14 bg-[#d4af37]" />
          </div>
          <h2 className="text-4xl md:text-5xl font-light text-[#eeeae7] mb-4">
            Let us craft your{" "}
            <span className="italic text-[#d4af37] font-serif">stay</span>
          </h2>
          <p className="text-[#c4b8ae] max-w-lg mx-auto">
            Bespoke arrangements, group stays, or any special request – we are here to listen.
          </p>
        </div>

        <div className="grid md:grid-cols-2 gap-12 items-start max-w-4xl mx-auto">
          {/* Form */}
          <form onSubmit={handleSubmit} className="space-y-5">
            <Input
              placeholder="Your name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              required
              className="bg-[#1a1511] border-[#403630] text-[#eeeae7] placeholder:text-[#6b5f55] rounded-sm"
            />
            <Input
              type="email"
              placeholder="Email address"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              className="bg-[#1a1511] border-[#403630] text-[#eeeae7] placeholder:text-[#6b5f55] rounded-sm"
            />
            <Input
              type="tel"
              placeholder="Phone (optional)"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
              className="bg-[#1a1511] border-[#403630] text-[#eeeae7] placeholder:text-[#6b5f55] rounded-sm"
            />
            <textarea
              placeholder="Tell us about your plans..."
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              required
              rows={4}
              className="w-full bg-[#1a1511] border border-[#403630] text-[#eeeae7] placeholder:text-[#6b5f55] rounded-sm px-4 py-3 text-sm focus:outline-none focus:ring-1 focus:ring-[#d4af37] resize-none"
            />
            {submitted && (
              <p className="text-sm text-[#6b8e23]">Enquiry sent – we will respond within 24 hours.</p>
            )}
            <Button
              type="submit"
              variant="default"
              size="lg"
              className="w-full bg-[#8b5a3c] hover:bg-[#7a4e34] text-white rounded-sm"
            >
              <Send className="w-4 h-4 mr-2" />
              Send Enquiry
            </Button>
          </form>

          {/* Contact details */}
          <div className="space-y-8 pt-2">
            <div className="flex items-start gap-4">
              <Phone className="w-5 h-5 mt-0.5 text-[#d4af37] shrink-0" />
              <div>
                <p className="text-sm uppercase tracking-wider text-[#6b5f55] mb-1">Call us</p>
                <p className="text-[#eeeae7]">+254 712 345 678</p>
              </div>
            </div>
            <div className="flex items-start gap-4">
              <Mail className="w-5 h-5 mt-0.5 text-[#d4af37] shrink-0" />
              <div>
                <p className="text-sm uppercase tracking-wider text-[#6b5f55] mb-1">Email</p>
                <p className="text-[#eeeae7]">info@masaisuites.com</p>
              </div>
            </div>
            <div className="border-t border-[#403630] pt-6">
              <p className="text-sm text-[#c4b8ae] leading-relaxed">
                Prefer WhatsApp? Send a message to the same number.
                We aim to reply within 30 minutes during reception hours.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}