'use client'

import { useState } from 'react'
import Link from 'next/link'
import { ArrowLeft, Mail, Phone, MapPin, Clock, Loader2, CheckCircle, AlertCircle } from 'lucide-react'
import { Button } from '@/components/ui/button'

export default function ContactPage() {
  const [form, setForm] = useState({ name: '', email: '', subject: '', message: '' })
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')
  const [success, setSuccess] = useState(false)

  const update = (f: string, v: string) => setForm(p => ({ ...p, [f]: v }))

  const submit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    setError('')
    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      })
      const data = await res.json()
      if (!res.ok) { setError(data.error || 'حدث خطأ'); return }
      setSuccess(true)
    } catch { setError('خطأ في الاتصال') }
    finally { setLoading(false) }
  }

  if (success) return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4" dir="rtl">
      <div className="bg-white rounded-3xl shadow-xl p-10 max-w-md text-center">
        <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-5"><CheckCircle className="w-8 h-8 text-green-600" /></div>
        <h2 className="text-2xl font-bold mb-3">تم الإرسال بنجاح!</h2>
        <p className="text-gray-500 mb-6">سيتم التواصل معك في أقرب وقت ممكن. شكراً لتواصلك.</p>
        <Button asChild><Link href="/">العودة للرئيسية</Link></Button>
      </div>
    </div>
  )

  return (
    <div className="min-h-screen bg-gray-50" dir="rtl">
      <div className="bg-gradient-to-br from-blue-600 to-blue-800 text-white">
        <div className="container mx-auto px-4 py-16">
          <Link href="/" className="inline-flex items-center gap-2 text-blue-200 hover:text-white mb-6 transition-colors">
            <ArrowLeft className="w-4 h-4 rotate-180" /> العودة للرئيسية
          </Link>
          <h1 className="text-3xl sm:text-4xl font-bold mb-4">اتصل بنا</h1>
          <p className="text-blue-100 text-lg max-w-2xl">نحن هنا للإجابة عن استفساراتك — تواصل معنا بأي وقت</p>
        </div>
      </div>

      <div className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
          <div className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 text-center">
            <div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mx-auto mb-4">
              <Phone className="w-6 h-6 text-blue-600" />
            </div>
            <h3 className="font-bold text-gray-900 mb-2">الهاتف</h3>
            <a href="tel:+212520123456" className="text-blue-600 hover:underline">+212 5 20 12 34 56</a>
          </div>
          <div className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 text-center">
            <div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mx-auto mb-4">
              <Mail className="w-6 h-6 text-blue-600" />
            </div>
            <h3 className="font-bold text-gray-900 mb-2">البريد الإلكتروني</h3>
            <a href="mailto:info@aqardesign.ma" className="text-blue-600 hover:underline">info@aqardesign.ma</a>
          </div>
          <div className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 text-center">
            <div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mx-auto mb-4">
              <Clock className="w-6 h-6 text-blue-600" />
            </div>
            <h3 className="font-bold text-gray-900 mb-2">ساعات العمل</h3>
            <p className="text-gray-600 text-sm">الإثنين — الجمعة: 9:00 صباحاً — 6:00 مساءً</p>
            <p className="text-gray-600 text-sm">السبت: 10:00 صباحاً — 2:00 مساءً</p>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
          <div className="bg-white rounded-2xl p-8 shadow-sm border border-gray-100">
            <h2 className="text-2xl font-bold text-gray-900 mb-6">أرسل لنا رسالة</h2>
            {error && <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-xl text-red-700 text-sm flex items-center gap-2"><AlertCircle className="w-4 h-4 shrink-0" />{error}</div>}
            <form onSubmit={submit} className="space-y-4">
              <input value={form.name} onChange={e => update('name', e.target.value)} required placeholder="الاسم الكامل" className="w-full border border-gray-200 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500" />
              <input value={form.email} onChange={e => update('email', e.target.value)} required type="email" placeholder="البريد الإلكتروني" className="w-full border border-gray-200 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500" />
              <input value={form.subject} onChange={e => update('subject', e.target.value)} required placeholder="الموضوع" className="w-full border border-gray-200 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500" />
              <textarea value={form.message} onChange={e => update('message', e.target.value)} required rows={5} className="w-full border border-gray-200 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="اكتب رسالتك هنا" />
              <Button type="submit" disabled={loading} className="w-full py-3 gap-2">
                {loading ? <Loader2 className="w-5 h-5 animate-spin" /> : null}إرسال
              </Button>
            </form>
          </div>
          <div className="bg-white rounded-2xl p-8 shadow-sm border border-gray-100">
            <h2 className="text-2xl font-bold text-gray-900 mb-6">معلومات الاتصال</h2>
            <div className="space-y-6">
              <div className="flex items-start gap-4">
                <div className="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center shrink-0"><MapPin className="w-5 h-5 text-blue-600" /></div>
                <div><h4 className="font-semibold text-gray-900">العنوان</h4><p className="text-gray-600 text-sm">الدار البيضاء، المغرب</p></div>
              </div>
              <div className="flex items-start gap-4">
                <div className="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center shrink-0"><Mail className="w-5 h-5 text-blue-600" /></div>
                <div><h4 className="font-semibold text-gray-900">البريد الإلكتروني</h4><a href="mailto:info@aqardesign.ma" className="text-blue-600 text-sm hover:underline">info@aqardesign.ma</a></div>
              </div>
              <div className="flex items-start gap-4">
                <div className="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center shrink-0"><Phone className="w-5 h-5 text-blue-600" /></div>
                <div><h4 className="font-semibold text-gray-900">رقم الهاتف</h4><a href="tel:+212520123456" className="text-blue-600 text-sm hover:underline">+212 5 20 12 34 56</a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}