'use client'
import { useState, type FormEvent } from 'react'
import { Mail, MapPin, MessageCircle, Phone } from 'lucide-react'

import Button from '@/components/ui/Button'
import Input from '@/components/ui/Input'
import { Card, CardContent } from '@/components/ui/Card'

const ADDRESS = 'Shop 12, Fourways Crossing, Witkoppen Road, Fourways, Johannesburg, 2191'
const PHONE = '+27 82 555 0199'
const PHONE_HREF = 'tel:+27825550199'
const EMAIL = 'bookings@zamasalon.co.za'
const WHATSAPP_HREF = 'https://wa.me/27825550199'

export default function LocationContactSection() {
  const [submitted, setSubmitted] = useState(false)

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setSubmitted(true)
  }

  return (
    <section data-vula-section="locationcontact" id="location-contact" className="bg-white py-20">
      <div className="mx-auto max-w-7xl px-4">
        <div className="mb-12 max-w-2xl">
          <p className="mb-2 text-sm font-semibold uppercase tracking-[0.2em] text-[#00A8CC]">Visit the salon</p>
          <h2 className="font-sora text-3xl font-bold text-[#1A2B3C] md:text-4xl">We're right here in Fourways - pull in and say hello.</h2>
        </div>
        <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
          <Card className="overflow-hidden rounded-xl shadow-md">
            <div className="h-64 w-full sm:h-72">
              <iframe
                title="Zama Salon location in Fourways, Johannesburg"
                src="https://www.google.com/maps?q=Zama+Salon+Fourways+Johannesburg&output=embed"
                className="h-full w-full border-0"
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                allowFullScreen
              />
            </div>
            <CardContent className="space-y-4 p-5">
              <div className="flex items-start gap-3">
                <span className="mt-1 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-[#00A8CC]/10 text-[#0077BE]"><MapPin className="h-5 w-5" /></span>
                <div>
                  <p className="text-sm font-semibold text-[#1A2B3C]/60">Address</p>
                  <p className="text-[#1A2B3C]">{ADDRESS}</p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <span className="mt-1 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-[#00A8CC]/10 text-[#0077BE]"><Phone className="h-5 w-5" /></span>
                <div>
                  <p className="text-sm font-semibold text-[#1A2B3C]/60">Call or WhatsApp</p>
                  <a href={PHONE_HREF} className="text-[#1A2B3C] hover:text-[#0077BE]">{PHONE}</a>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <span className="mt-1 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-[#00A8CC]/10 text-[#0077BE]"><Mail className="h-5 w-5" /></span>
                <div>
                  <p className="text-sm font-semibold text-[#1A2B3C]/60">Email</p>
                  <a href={`mailto:${EMAIL}`} className="text-[#1A2B3C] hover:text-[#0077BE]">{EMAIL}</a>
                </div>
              </div>
            </CardContent>
          </Card>

          <Card className="rounded-xl shadow-md">
            <CardContent className="p-5 md:p-8">
              <h3 className="text-xl font-bold text-[#1A2B3C]">Send us a message</h3>
              <p className="mt-1 text-sm text-[#1A2B3C]/60">Tell us what you need - we'll confirm your appointment.</p>
              {submitted ? (
                <div className="mt-6 rounded-xl bg-[#F0F8FF] p-6 text-center">
                  <p className="font-semibold text-[#0077BE]">Thank you! Your message has been received.</p>
                  <p className="mt-1 text-sm text-[#1A2B3C]/70">We'll get back to you within one business day.</p>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="mt-6 space-y-4">
                  <Input name="name" placeholder="Your name" required className="w-full rounded-xl border-[#d4dadd] bg-white px-4 py-3" />
                  <Input name="phone" type="tel" placeholder="Phone or WhatsApp number" required className="w-full rounded-xl border-[#d4dadd] bg-white px-4 py-3" />
                  <textarea name="message" placeholder="What are you booking? (cut, colour, keratin, braids, nails...)" required rows={4} className="w-full rounded-xl border border-[#d4dadd] bg-white px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-[#0077BE]/30" />
                  <Button type="submit" className="w-full !bg-[#0077BE] !text-white hover:!bg-[#0077BE]/90 rounded-full py-3">Send message</Button>
                  <div className="flex flex-col gap-3 pt-1 sm:flex-row">
                    <a href={PHONE_HREF} className="inline-flex items-center justify-center gap-2 rounded-full border border-[#00A8CC] px-5 py-3 text-sm font-semibold text-[#0077BE] transition-all duration-200 ease-out hover:bg-[#00A8CC]/10"><Phone className="h-4 w-4" /> Call now</a>
                    <a href={WHATSAPP_HREF} target="_blank" rel="noreferrer" className="inline-flex items-center justify-center gap-2 rounded-full bg-[#25D366] px-5 py-3 text-sm font-semibold text-white transition-all duration-200 ease-out hover:bg-[#25D366]/90"><MessageCircle className="h-4 w-4" /> WhatsApp us</a>
                  </div>
                </form>
              )}
            </CardContent>
          </Card>
        </div>
      </div>
    </section>
  )
}