'use client'

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

export default function KwaNtofontofoContactSection() {
  const [form, setForm] = useState({ name: "", email: "", enquiry: "" })
  const [sent, setSent] = useState(false)

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

  return (
    <section data-vula-section="kwantofontofocontact" id="contact" className="bg-[#FDF6EC] py-20 px-6">
      <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
        {/* Left column – Form */}
        <div>
          <h2 className="text-3xl font-bold text-[#2C1810] mb-6">Get in Touch</h2>
          <p className="text-[#2C1810]/70 mb-8">
            We&apos;d love to hear from you. Send us a message and we&apos;ll respond promptly.
          </p>
          {sent ? (
            <div className="bg-white rounded-xl p-6 shadow-md border border-[#e5e7eb]">
              <p className="text-lg font-semibold text-green-700">Thank you for your enquiry!</p>
              <p className="text-[#2C1810]/70 mt-1">We&apos;ll get back to you within 24 hours.</p>
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="space-y-5">
              <div>
                <label className="block text-sm font-medium text-[#2C1810] mb-1">Your Name</label>
                <Input
                  type="text"
                  placeholder="John Doe"
                  value={form.name}
                  onChange={(e) => setForm({ ...form, name: e.target.value })}
                  required
                  className="w-full"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-[#2C1810] mb-1">Email Address</label>
                <Input
                  type="email"
                  placeholder="john@example.com"
                  value={form.email}
                  onChange={(e) => setForm({ ...form, email: e.target.value })}
                  required
                  className="w-full"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-[#2C1810] mb-1">Your Enquiry</label>
                <textarea
                  placeholder="How can we help?"
                  value={form.enquiry}
                  onChange={(e) => setForm({ ...form, enquiry: e.target.value })}
                  required
                  className="w-full rounded-lg border border-[#e5e7eb] p-3 min-h-[120px] focus:outline-none focus:ring-2 focus:ring-[#E67E22]"
                />
              </div>
              <Button
                type="submit"
                variant="default"
                className="bg-[#E67E22] hover:bg-[#d4731e] text-white flex items-center gap-2"
              >
                <Send className="w-4 h-4" />
                Send Enquiry
              </Button>
            </form>
          )}
        </div>

        {/* Right column – Contact details & map */}
        <div className="space-y-6">
          <div className="bg-white rounded-xl p-6 shadow-md border border-[#e5e7eb]">
            <h3 className="text-xl font-semibold text-[#2C1810] mb-4">Our Address</h3>
            <div className="flex items-start gap-3 mb-4">
              <MapPin className="w-5 h-5 text-[#C0392B] mt-1 shrink-0" />
              <div>
                <p className="text-[#2C1810]">44 Rutherford Circle</p>
                <p className="text-[#2C1810]">Bisley, Pietermaritzburg</p>
                <p className="text-[#2C1810]">3201, KwaZulu-Natal</p>
              </div>
            </div>
            <div className="flex items-center gap-3 mb-3">
              <Phone className="w-5 h-5 text-[#C0392B] shrink-0" />
              <a href="tel:+27331234567" className="text-[#E67E22] hover:underline">
                +27 33 123 4567
              </a>
            </div>
            <div className="flex items-center gap-3">
              <Mail className="w-5 h-5 text-[#C0392B] shrink-0" />
              <a href="mailto:info@kwanontofonto.co.za" className="text-[#E67E22] hover:underline">
                info@kwanontofonto.co.za
              </a>
            </div>
          </div>

          {/* Embedded Map */}
          <div className="rounded-xl overflow-hidden shadow-md border border-[#e5e7eb]">
            <iframe
              title="Location of KwaNtofontofo Guest House"
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3310.7445!2d30.3833!3d-29.6167!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1ef2f3c4b5a6b789%3A0x1234567890abcdef!2s44%20Rutherford%20Circle%2C%20Bisley%2C%20Pietermaritzburg%2C%203201!5e0!3m2!1sen!2sza!4v1680000000000"
              width="100%"
              height="250"
              style={{ border: 0 }}
              allowFullScreen
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            />
          </div>
          <p className="text-sm text-[#2C1810]/60 text-center">
            1 km from Pietermaritzburg Airport · Across from the Nature Reserve
          </p>
        </div>
      </div>
    </section>
  )
}