"use client"

import type React from "react"

import { useState } from "react"
import { Mail, Phone, MapPin, Send, CheckCircle } from "lucide-react"

export function ContactSection() {
  const [formState, setFormState] = useState({
    name: "",
    email: "",
    subject: "",
    message: "",
  })
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSubmitted, setIsSubmitted] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)

    // Simulate form submission
    await new Promise((resolve) => setTimeout(resolve, 1500))

    setIsSubmitting(false)
    setIsSubmitted(true)
    setFormState({ name: "", email: "", subject: "", message: "" })

    // Reset success message after 5 seconds
    setTimeout(() => setIsSubmitted(false), 5000)
  }

  return (
    <section id="contact" className="py-10 lg:py-10">
      <div className="container mx-auto px-4 lg:px-8">
        <div className="grid lg:grid-cols-2 gap-12 items-start">
          {/* Contact Info */}
          <div>
            <span className="inline-block text-bcc-orange font-semibold mb-4">Get In Touch</span>
            <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-bcc-blue mb-6 text-balance">
              Let's Start a Conversation
            </h2>
            <p className="text-bcc-gray text-lg leading-relaxed mb-8">
              Whether you're a school looking to implement coding programs, or a business needing digital services,
              we're here to help. Reach out and let's discuss how we can work together.
            </p>

            {/* Contact Details */}
            <div className="space-y-6">
              <div className="flex items-start gap-4">
                <div className="w-12 h-12 bg-bcc-orange/10 rounded-xl flex items-center justify-center flex-shrink-0">
                  <Mail className="w-6 h-6 text-bcc-orange" />
                </div>
                <div>
                  <h4 className="font-semibold text-bcc-blue mb-1">Email Us</h4>
                  <p className="text-bcc-gray">info@beyondclassroomcoding.co.za</p>
                </div>
              </div>

              <div className="flex items-start gap-4">
                <div className="w-12 h-12 bg-bcc-teal/10 rounded-xl flex items-center justify-center flex-shrink-0">
                  <Phone className="w-6 h-6 text-bcc-teal" />
                </div>
                <div>
                  <h4 className="font-semibold text-bcc-blue mb-1">Call Us</h4>
                  <p className="text-bcc-gray">+27 83 274 9647 / +266 5603 0672</p>
                </div>
              </div>

              <div className="flex items-start gap-4">
                <div className="w-12 h-12 bg-bcc-gold/10 rounded-xl flex items-center justify-center flex-shrink-0">
                  <MapPin className="w-6 h-6 text-bcc-gold" />
                </div>
                <div>
                  <h4 className="font-semibold text-bcc-blue mb-1">Visit Us</h4>
                  <p className="text-bcc-gray">
                    South Africa: Umhlanga, KwaZulu Natal
                    <br />
                    Lesotho: Maseru CBD, Maseru
                  </p>
                </div>
              </div>
            </div>
          </div>

          {/* Contact Form */}
          <div className="bg-white rounded-2xl shadow-xl p-8">
            {isSubmitted ? (
              <div className="text-center py-12">
                <CheckCircle className="w-16 h-16 text-green-500 mx-auto mb-4" />
                <h3 className="text-2xl font-bold text-bcc-blue mb-2">Thank You!</h3>
                <p className="text-bcc-gray">Your message has been sent successfully. We'll get back to you soon.</p>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="space-y-6">
                <div className="grid sm:grid-cols-2 gap-6">
                  <div>
                    <label htmlFor="name" className="block text-sm font-medium text-bcc-blue mb-2">
                      Your Name
                    </label>
                    <input
                      type="text"
                      id="name"
                      required
                      value={formState.name}
                      onChange={(e) => setFormState((prev) => ({ ...prev, name: e.target.value }))}
                      className="w-full px-4 py-3 border border-border rounded-xl focus:ring-2 focus:ring-bcc-orange focus:border-transparent outline-none transition-all"
                      placeholder="e.g Thatohatsi Sebilo"
                    />
                  </div>
                  <div>
                    <label htmlFor="email" className="block text-sm font-medium text-bcc-blue mb-2">
                      Email Address
                    </label>
                    <input
                      type="email"
                      id="email"
                      required
                      value={formState.email}
                      onChange={(e) => setFormState((prev) => ({ ...prev, email: e.target.value }))}
                      className="w-full px-4 py-3 border border-border rounded-xl focus:ring-2 focus:ring-bcc-orange focus:border-transparent outline-none transition-all"
                      placeholder="beyond@example.com"
                    />
                  </div>
                </div>

                <div>
                  <label htmlFor="subject" className="block text-sm font-medium text-bcc-blue mb-2">
                    Subject
                  </label>
                  <input
                    type="text"
                    id="subject"
                    required
                    value={formState.subject}
                    onChange={(e) => setFormState((prev) => ({ ...prev, subject: e.target.value }))}
                    className="w-full px-4 py-3 border border-border rounded-xl focus:ring-2 focus:ring-bcc-orange focus:border-transparent outline-none transition-all"
                    placeholder="How can we help?"
                  />
                </div>

                <div>
                  <label htmlFor="message" className="block text-sm font-medium text-bcc-blue mb-2">
                    Message
                  </label>
                  <textarea
                    id="message"
                    required
                    rows={5}
                    value={formState.message}
                    onChange={(e) => setFormState((prev) => ({ ...prev, message: e.target.value }))}
                    className="w-full px-4 py-3 border border-border rounded-xl focus:ring-2 focus:ring-bcc-orange focus:border-transparent outline-none transition-all resize-none"
                    placeholder="Tell us about your project or inquiry..."
                  />
                </div>

                <button
                  type="submit"
                  disabled={isSubmitting}
                  className="w-full inline-flex items-center justify-center gap-2 bg-bcc-orange hover:bg-bcc-orange/90 disabled:opacity-50 text-white px-8 py-4 rounded-xl font-semibold transition-all hover:shadow-lg"
                >
                  {isSubmitting ? (
                    <>
                      <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                      Sending...
                    </>
                  ) : (
                    <>
                      Send Message
                      <Send className="w-5 h-5" />
                    </>
                  )}
                </button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  )
}