'use client';
import { useState } from 'react';

export default function ContactSection({ onSave }: { onSave?: () => void }) {
  const [data, setData] = useState({
    title: 'تواصل معنا',
    subtitle: 'نحن هنا لمساعدتك في أي وقت، تواصل معنا وسنرد عليك في أقرب وقت ممكن',
    phone: '+966 50 000 0000',
    email: 'info@bustrack.sa',
    address: 'الرياض، المملكة العربية السعودية',
    workingHours: 'الأحد - الخميس: 8 صباحاً - 5 مساءً',
  });

  const handleChange = (field: string, value: string) => {
    setData(prev => ({ ...prev, [field]: value }));
  };

  return (
    <div className="bg-white rounded-2xl p-6 space-y-5" style={{ border: '1px solid #E2E8F0', boxShadow: '0 1px 6px rgba(0,0,0,0.05)' }}>
      <div className="flex items-center gap-3 mb-2">
        <div className="w-9 h-9 rounded-xl flex items-center justify-center" style={{ background: '#EFF6FF' }}>
          <i className="ri-phone-line text-lg" style={{ color: '#3B82F6' }}></i>
        </div>
        <h3 className="font-black text-slate-700 text-base" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>قسم التواصل</h3>
      </div>

      <div className="grid grid-cols-2 gap-4">
        <div className="col-span-2">
          <label className="block text-xs font-bold text-slate-500 mb-1" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>العنوان الرئيسي</label>
          <input value={data.title} onChange={e => handleChange('title', e.target.value)} className="w-full px-3 py-2 rounded-lg text-sm text-right" style={{ border: '1px solid #E2E8F0', fontFamily: '"IBM Plex Sans Arabic", sans-serif', outline: 'none' }} />
        </div>
        <div className="col-span-2">
          <label className="block text-xs font-bold text-slate-500 mb-1" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>النص التوضيحي</label>
          <textarea value={data.subtitle} onChange={e => handleChange('subtitle', e.target.value)} rows={2} className="w-full px-3 py-2 rounded-lg text-sm text-right resize-none" style={{ border: '1px solid #E2E8F0', fontFamily: '"IBM Plex Sans Arabic", sans-serif', outline: 'none' }} />
        </div>
        <div>
          <label className="block text-xs font-bold text-slate-500 mb-1" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>رقم الهاتف</label>
          <input value={data.phone} onChange={e => handleChange('phone', e.target.value)} className="w-full px-3 py-2 rounded-lg text-sm text-right" style={{ border: '1px solid #E2E8F0', fontFamily: '"IBM Plex Sans Arabic", sans-serif', outline: 'none' }} />
        </div>
        <div>
          <label className="block text-xs font-bold text-slate-500 mb-1" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>البريد الإلكتروني</label>
          <input value={data.email} onChange={e => handleChange('email', e.target.value)} className="w-full px-3 py-2 rounded-lg text-sm text-right" style={{ border: '1px solid #E2E8F0', fontFamily: '"IBM Plex Sans Arabic", sans-serif', outline: 'none' }} />
        </div>
        <div>
          <label className="block text-xs font-bold text-slate-500 mb-1" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>العنوان</label>
          <input value={data.address} onChange={e => handleChange('address', e.target.value)} className="w-full px-3 py-2 rounded-lg text-sm text-right" style={{ border: '1px solid #E2E8F0', fontFamily: '"IBM Plex Sans Arabic", sans-serif', outline: 'none' }} />
        </div>
        <div>
          <label className="block text-xs font-bold text-slate-500 mb-1" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>ساعات العمل</label>
          <input value={data.workingHours} onChange={e => handleChange('workingHours', e.target.value)} className="w-full px-3 py-2 rounded-lg text-sm text-right" style={{ border: '1px solid #E2E8F0', fontFamily: '"IBM Plex Sans Arabic", sans-serif', outline: 'none' }} />
        </div>
      </div>

      <div className="pt-2">
        <button onClick={onSave} className="flex items-center gap-2 px-5 py-2 rounded-xl text-sm font-bold cursor-pointer whitespace-nowrap text-white" style={{ background: '#3B82F6', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
          <i className="ri-save-line"></i> حفظ التغييرات
        </button>
      </div>
    </div>
  );
}