'use client'

import { useEmDashContent } from '@/hooks/useEmDashContent'
import { Clock, Mail, MapPin, Phone } from 'lucide-react'

interface BusinessHour {
  day_of_week: string
  open_time?: string
  close_time?: string
  is_closed?: boolean
  note?: string
}

export default function ContactSection() {
  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-current border-t-transparent animate-spin" />
      </div>
    )
  }

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

  const hours = items.map((item) => item.data as BusinessHour)

  // Static contact info (these could also come from CMS but are hardcoded per brief)
  const address = '23 Mary Fitzgerald Street, Newtown, Johannesburg, 2001'
  const phone = '+27 11 832 4500'
  const email = 'info@mashobanefirm.co.za'

  return (
    <section
      id="contact"
      data-vula-section="contact"
      data-vula-cms="business_hours"
      className="py-20 bg-white"
    >
      <div className="container mx-auto px-4 max-w-7xl">
        <div className="text-center mb-14">
          <h2 className="text-4xl font-bold text-[#111827] mb-4">Get in Touch</h2>
          <p className="text-lg text-[#36454F] max-w-2xl mx-auto">
            We&apos;re here for you. Call, email, or visit our offices in Newtown.
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
          {/* Left — Contact details */}
          <div className="space-y-8">
            <div className="flex items-start gap-4">
              <div className="p-3 rounded-full bg-[#000080]/10 shrink-0">
                <MapPin className="w-6 h-6 text-[#000080]" />
              </div>
              <div>
                <h3 className="font-semibold text-[#111827]">Office Address</h3>
                <p className="text-[#36454F]">{address}</p>
                <p className="text-sm text-[#16a34a] mt-1">
                  <a
                    href="https://maps.google.com/?q=23+Mary+Fitzgerald+Street+Newtown+Johannesburg"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="underline underline-offset-2 hover:no-underline"
                  >
                    View on Google Maps
                  </a>
                </p>
              </div>
            </div>

            <div className="flex items-start gap-4">
              <div className="p-3 rounded-full bg-[#000080]/10 shrink-0">
                <Phone className="w-6 h-6 text-[#000080]" />
              </div>
              <div>
                <h3 className="font-semibold text-[#111827]">Phone</h3>
                <p className="text-[#36454F]">
                  <a href={`tel:${phone}`} className="hover:text-[#16a34a] transition-colors duration-200">{phone}</a>
                </p>
                <p className="text-sm text-[#16a34a] mt-1">
                  <a
                    href="https://wa.me/27118324500"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="underline underline-offset-2 hover:no-underline"
                  >
                    WhatsApp Us
                  </a>
                </p>
              </div>
            </div>

            <div className="flex items-start gap-4">
              <div className="p-3 rounded-full bg-[#000080]/10 shrink-0">
                <Mail className="w-6 h-6 text-[#000080]" />
              </div>
              <div>
                <h3 className="font-semibold text-[#111827]">Email</h3>
                <p className="text-[#36454F]">
                  <a href={`mailto:${email}`} className="hover:text-[#16a34a] transition-colors duration-200">{email}</a>
                </p>
              </div>
            </div>

            <div className="flex items-start gap-4">
              <div className="p-3 rounded-full bg-[#000080]/10 shrink-0">
                <Clock className="w-6 h-6 text-[#000080]" />
              </div>
              <div>
                <h3 className="font-semibold text-[#111827]">Office Hours</h3>
                <div className="space-y-1">
                  {hours.map((h, i) => (
                    <div key={i} className="flex justify-between text-[#36454F] text-sm">
                      <span className="font-medium">{h.day_of_week}</span>
                      {h.is_closed ? (
                        <span className="text-[#16a34a]">Closed</span>
                      ) : (
                        <span>{h.open_time} – {h.close_time}</span>
                      )}
                      {h.note && <span className="text-xs italic ml-2">({h.note})</span>}
                    </div>
                  ))}
                </div>
                <p className="text-xs text-[#36454F] mt-2">Closed on South African public holidays.</p>
              </div>
            </div>
          </div>

          {/* Right — Map placeholder */}
          <div className="rounded-xl overflow-hidden shadow-[var(--shadow-lifted)] border border-[#e5e7eb]">
            <div className="aspect-[4/3] bg-[#f3f4f6] flex items-center justify-center">
              <div className="text-center p-8">
                <MapPin className="w-12 h-12 text-[#000080] mx-auto mb-2" />
                <p className="text-[#36454F] font-medium">Map loaded here</p>
                <p className="text-sm text-[#6b7280]">23 Mary Fitzgerald Street, Newtown, Johannesburg</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}