'use client'

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

export default function ContactSection() {
  const { items, loading } = useVulaContent('business_hours')
  const [formData, setFormData] = useState({ name: '', email: '', message: '' })
  const [sent, setSent] = useState(false)

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

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

  const hours = items.map((item) => item.data as {
    day_of_week?: string
    open_time?: string
    close_time?: string
    is_closed?: boolean
    note?: string
  })

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // In production send to backend
    setSent(true)
    setFormData({ name: '', email: '', message: '' })
  }

  return (
    <section id="contact" data-vula-section="contact" data-vula-cms="business_hours" className="py-20 bg-[#f4f5f2]">
      <div className="max-w-5xl mx-auto px-4">
        <div className="text-center mb-14">
          <h2 className="text-3xl md:text-4xl font-bold text-[#2c331f]">We&apos;d Love to Hear from You</h2>
          <p className="text-[#8b5a3c] mt-3 max-w-lg mx-auto">
            From our studio in Pretoria to your skin — every enquiry is handwritten care.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
          {/* Contact details */}
          <div className="space-y-6">
            <div className="flex items-start gap-4">
              <MapPin className="w-5 h-5 text-[#6b8e23] mt-1 shrink-0" />
              <div>
                <h3 className="font-semibold text-[#2c331f]">Studio & Workshop</h3>
                <p className="text-[#8b5a3c]">42 Marula Lane, Hatfield, Pretoria, 0028</p>
              </div>
            </div>
            <div className="flex items-start gap-4">
              <Phone className="w-5 h-5 text-[#6b8e23] mt-1 shrink-0" />
              <div>
                <h3 className="font-semibold text-[#2c331f]">Phone</h3>
                <p className="text-[#8b5a3c]">+27 12 345 6789</p>
              </div>
            </div>
            <div className="flex items-start gap-4">
              <Mail className="w-5 h-5 text-[#6b8e23] mt-1 shrink-0" />
              <div>
                <h3 className="font-semibold text-[#2c331f]">Email</h3>
                <p className="text-[#8b5a3c]">hello@ngcobonaturals.co.za</p>
              </div>
            </div>
            <div className="flex items-start gap-4">
              <Clock className="w-5 h-5 text-[#6b8e23] mt-1 shrink-0" />
              <div>
                <h3 className="font-semibold text-[#2c331f]">Trading Hours</h3>
                <ul className="text-[#8b5a3c] space-y-1">
                  {hours.map((h, i) => (
                    <li key={i} className="flex justify-between gap-4">
                      <span>{h.day_of_week ?? '—'}</span>
                      {h.is_closed ? (
                        <span className="italic">Closed</span>
                      ) : (
                        <span>{h.open_time ?? '—'} – {h.close_time ?? '—'}</span>
                      )}
                    </li>
                  ))}
                </ul>
                <p className="text-xs text-[#8b5a3c]/70 mt-2">Closed on South African public holidays.</p>
              </div>
            </div>
          </div>

          {/* Enquiry form */}
          <div className="bg-white rounded-2xl p-8 shadow-lg shadow-[#6b8e23]/5 border border-[#daddd4]">
            <h3 className="text-xl font-bold text-[#2c331f] mb-6">Send an Enquiry</h3>
            {sent ? (
              <div className="text-center py-8">
                <div className="w-12 h-12 mx-auto bg-[#6b8e23]/10 rounded-full flex items-center justify-center mb-4">
                  <Mail className="w-6 h-6 text-[#6b8e23]" />
                </div>
                <p className="text-[#6b8e23] font-medium">Thank you! We&apos;ll be in touch soon.</p>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="space-y-4">
                <Input
                  type="text"
                  placeholder="Your name"
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  required
                  className="rounded-xl border-[#daddd4] bg-[#f4f5f2]"
                />
                <Input
                  type="email"
                  placeholder="your@email.com"
                  value={formData.email}
                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                  required
                  className="rounded-xl border-[#daddd4] bg-[#f4f5f2]"
                />
                <textarea
                  placeholder="Tell us about your skincare journey..."
                  rows={4}
                  value={formData.message}
                  onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                  required
                  className="w-full rounded-xl border border-[#daddd4] bg-[#f4f5f2] p-3 focus:outline-none focus:ring-2 focus:ring-[#6b8e23] resize-none"
                />
                <Button
                  type="submit"
                  variant="default"
                  size="md"
                  className="w-full bg-[#6b8e23] hover:bg-[#5a7a1d] text-white border-none rounded-xl"
                >
                  Send Message
                </Button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  )
}