'use client'

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

export default function MashobaneContactSection() {
  const { items, loading } = useEmDashContent("business_hours")

  if (loading) {
    return (
      <div className="flex justify-center py-16">
        <div className="w-8 h-8 rounded-full border-2 border-[#000080] border-t-transparent animate-spin" />
      </div>
    )
  }

  if (items.length === 0) return null

  return (
    <section
      id="contact"
      data-vula-section="mashobanecontact"
      data-vula-cms="business_hours"
      className="bg-[#ffffff] py-20 px-6"
    >
      <div className="max-w-6xl mx-auto">
        <div className="grid md:grid-cols-2 gap-12">
          {/* Contact Details */}
          <div>
            <h2 className="text-3xl font-bold text-[#000080] mb-6">Contact Us</h2>
            <div className="space-y-6">
              <div className="flex items-start gap-4">
                <MapPin className="w-6 h-6 text-[#d4af37] mt-1 shrink-0" />
                <div>
                  <p className="font-semibold text-[#111827]">Mashobane & Associates</p>
                  <p className="text-[#36454F]">
                    123 Aliwal Street<br />
                    Durban Central<br />
                    KwaZulu-Natal, 4001
                  </p>
                </div>
              </div>
              <div className="flex items-center gap-4">
                <Phone className="w-6 h-6 text-[#d4af37]" />
                <a href="tel:+27311234567" className="text-[#000080] hover:underline">+27 31 123 4567</a>
              </div>
              <div className="flex items-center gap-4">
                <Mail className="w-6 h-6 text-[#d4af37]" />
                <a href="mailto:info@mashobanelaw.co.za" className="text-[#000080] hover:underline">info@mashobanelaw.co.za</a>
              </div>
              <div className="flex items-start gap-4">
                <Clock className="w-6 h-6 text-[#d4af37] mt-1 shrink-0" />
                <div>
                  <p className="font-semibold text-[#111827] mb-2">Office Hours</p>
                  <div className="space-y-1 text-[#36454F]">
                    {items.map((item) => {
                      const d = item.data as {
                        day_of_week?: string
                        open_time?: string
                        close_time?: string
                        is_closed?: boolean
                        note?: string
                      }
                      return (
                        <div key={item.id} className="flex justify-between gap-4">
                          <span className="font-medium">{d.day_of_week}</span>
                          {d.is_closed ? (
                            <span className="text-red-600">Closed</span>
                          ) : (
                            <span>
                              {d.open_time} – {d.close_time}
                              {d.note && <span className="text-sm text-[#d4af37] ml-1">({d.note})</span>}
                            </span>
                          )}
                        </div>
                      )
                    })}
                  </div>
                  <p className="text-sm mt-2 text-[#36454F]/70">Public holiday hours may vary.</p>
                </div>
              </div>
            </div>
            {/* Enquiry form */}
            <div className="mt-10">
              <h3 className="text-xl font-semibold text-[#000080] mb-4">Send a Quick Enquiry</h3>
              <form className="space-y-4">
                <Input type="text" placeholder="Your Name" className="border-[#36454F]/30 focus:border-[#000080]" />
                <Input type="email" placeholder="Email Address" className="border-[#36454F]/30 focus:border-[#000080]" />
                <textarea
                  rows={4}
                  placeholder="Your message..."
                  className="w-full rounded-lg border border-[#36454F]/30 px-4 py-3 focus:outline-none focus:border-[#000080] resize-none text-sm"
                />
                <Button
                  variant="default"
                  className="bg-[#000080] hover:bg-[#000080]/90 text-white px-6 py-3"
                >
                  Send Message
                </Button>
              </form>
            </div>
          </div>
          {/* Google Map */}
          <div className="rounded-xl overflow-hidden shadow-[var(--shadow-lifted)] h-[400px] md:h-auto min-h-[350px]">
            <iframe
              title="Mashobane & Associates Location"
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3459.283764550128!2d31.0219316154755!3d-29.858578681946!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1ef7a9c5e3e4c5df%3A0x5f5c5e5f5e5f5e5f!2sDurban+Central%2C+Durban!5e0!3m2!1sen!2sza!4v1"
              width="100%"
              height="100%"
              style={{ border: 0 }}
              allowFullScreen
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            />
          </div>
        </div>
      </div>
    </section>
  )
}