'use client'

import { Mail, Phone } from 'lucide-react'
import { useState } from 'react'
import { useLanguage } from '@/lib/LanguageContext'
import { getTranslation } from '@/lib/i18n'
import { submitForm } from '@/lib/formSubmit'

export default function Contact() {
  const { language } = useLanguage()
  const [status, setStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle')

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setStatus('sending')
    const form = e.currentTarget
    const formData = new FormData(form)
    const name = (formData.get('name') as string) || ''
    const email = (formData.get('email') as string) || ''
    const phone = (formData.get('phone') as string) || ''
    const message = (formData.get('message') as string) || ''
    const result = await submitForm({
      type: 'contact',
      name,
      email,
      phone,
      message,
      language,
    })
    if (result.ok) {
      setStatus('sent')
      form.reset()
      setTimeout(() => setStatus('idle'), 5000)
    } else {
      setStatus('error')
      setTimeout(() => setStatus('idle'), 3000)
    }
  }

  return (
    <section id="contact" className="py-16 sm:py-20 px-4 sm:px-6 bg-brand-light">
      {/* This component is for the home page inline contact section */}
      {/* Full contact page is at /contact */}
      <div className="container mx-auto max-w-6xl">
        <div className="grid md:grid-cols-2 gap-8 sm:gap-12 bg-white rounded-xl sm:rounded-2xl overflow-hidden shadow-xl border-2 border-brand-accent">
          {/* Left: Text */}
          <div className="bg-white p-6 sm:p-8 md:p-10 lg:p-14 fade-in">
            <h2 className="font-semibold text-2xl sm:text-3xl text-brand-text mb-4">
              {getTranslation(language, 'contact.title')}
            </h2>
            <p className="text-sm sm:text-base text-gray-700 mb-6 sm:mb-8 font-normal leading-relaxed">
              {getTranslation(language, 'contact.description')}
            </p>

            <div className="space-y-6">
              <div className="flex items-start">
                <Mail className="mt-1 text-brand-primary mr-4" size={20} />
                <div>
                  <h4 className="font-semibold text-brand-text">{getTranslation(language, 'contact.email')}</h4>
                  <a
                    href="mailto:kevin@hogarrealtors.com"
                    className="text-gray-600 hover:text-brand-primary font-normal"
                  >
                    kevin@hogarrealtors.com
                  </a>
                </div>
              </div>
              <div className="flex items-start">
                <Phone className="mt-1 text-brand-primary mr-4" size={20} />
                <div>
                  <h4 className="font-semibold text-brand-text">{getTranslation(language, 'contact.phone')}</h4>
                  <a
                    href="tel:+523222311415"
                    className="text-gray-600 hover:text-brand-primary font-normal"
                  >
                    +52 (322) 231 1415
                  </a>
                </div>
              </div>
            </div>
          </div>

          {/* Right: Contact Form */}
          <div className="p-6 sm:p-8 md:p-10 bg-gray-50 fade-in border-t-2 md:border-t-0 md:border-l-2 border-brand-accent">
            <form
              className="space-y-5"
              onSubmit={handleSubmit}
            >
              <div>
                    <label className="block text-sm font-semibold uppercase tracking-wide text-brand-text mb-2">
                      {getTranslation(language, 'contact.fullName')} <span className="text-red-500">*</span>
                    </label>
                <input
                  required
                  name="name"
                  className="w-full px-4 py-3 rounded-xl border border-brand-accent bg-white focus:outline-none focus:ring-4 focus:ring-brand-primary/15 focus:border-brand-primary transition"
                  placeholder={getTranslation(language, 'contact.fullName')}
                />
              </div>

              <div>
                    <label className="block text-sm font-semibold uppercase tracking-wide text-brand-text mb-2">
                      {getTranslation(language, 'contact.email')} <span className="text-red-500">*</span>
                    </label>
                <input
                  required
                  type="email"
                  name="email"
                  className="w-full px-4 py-3 rounded-xl border border-brand-accent bg-white focus:outline-none focus:ring-4 focus:ring-brand-primary/15 focus:border-brand-primary transition"
                  placeholder="you@email.com"
                />
              </div>

              <div>
                    <label className="block text-sm font-semibold uppercase tracking-wide text-brand-text mb-2">
                      {getTranslation(language, 'contact.phone')}
                    </label>
                <input
                  name="phone"
                  className="w-full px-4 py-3 rounded-xl border border-brand-accent bg-white focus:outline-none focus:ring-4 focus:ring-brand-primary/15 focus:border-brand-primary transition"
                  placeholder="+1 (555) 000-0000"
                />
              </div>

              <div>
                    <label className="block text-sm font-semibold uppercase tracking-wide text-brand-text mb-2">
                      {getTranslation(language, 'contact.message')}
                    </label>
                <textarea
                  name="message"
                  rows={4}
                  className="w-full px-4 py-3 rounded-xl border border-brand-accent bg-white focus:outline-none focus:ring-4 focus:ring-brand-primary/15 focus:border-brand-primary transition resize-none"
                  placeholder={getTranslation(language, 'contact.messagePlaceholder')}
                />
              </div>

              <div className="flex flex-col sm:flex-row gap-3 sm:items-center">
                <button
                  type="submit"
                      className="bg-brand-primary text-white px-6 py-3 rounded-xl text-sm font-semibold uppercase tracking-wide hover:bg-black transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                  disabled={status === 'sending'}
                >
                  {status === 'sending' 
                    ? getTranslation(language, 'contact.sending')
                    : status === 'sent' 
                    ? getTranslation(language, 'contact.sent')
                    : status === 'error'
                    ? getTranslation(language, 'contact.error')
                    : getTranslation(language, 'contact.send')}
                </button>
                <a
                  href="https://wa.me/523222311415"
                  target="_blank"
                  rel="noopener noreferrer"
                      className="text-sm font-semibold uppercase tracking-wide text-brand-primary hover:text-black transition-colors"
                >
                  {getTranslation(language, 'contact.preferWhatsApp')}
                </a>
              </div>
              <p className="text-[11px] text-gray-500 leading-relaxed">
                {getTranslation(language, 'contact.privacy')}
              </p>
            </form>
          </div>
        </div>
      </div>
    </section>
  )
}