import { setRequestLocale } from 'next-intl/server';
import { siteInfo } from '@/lib/data';
import { MapPin, Phone, Mail } from 'lucide-react';

export default async function ContactPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params;
  setRequestLocale(locale);

  return (
    <div className="py-20 bg-sandwhite-100 flex-1">
      <div className="container mx-auto px-4 max-w-5xl">
        <h1 className="text-4xl md:text-5xl font-bold text-deepblue-900 mb-4 text-center">İletişim</h1>
        <p className="text-center text-gray-600 max-w-2xl mx-auto mb-12">
          Rezervasyon ve sorularınız için bize ulaşın.
        </p>
        
        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 bg-white p-8 rounded-3xl shadow-sm border border-gray-100">
          <div>
            <h2 className="text-2xl font-bold text-deepblue-900 mb-6">İletişim Bilgileri</h2>
            <div className="space-y-6">
              <div className="flex items-start gap-4">
                <div className="w-12 h-12 bg-turquoise-500/10 rounded-full flex items-center justify-center shrink-0">
                  <MapPin className="w-6 h-6 text-turquoise-500" />
                </div>
                <div>
                  <h3 className="font-semibold text-lg text-deepblue-900">Adres</h3>
                  <p className="text-gray-600 mt-1">{siteInfo.address}</p>
                </div>
              </div>
              
              <div className="flex items-start gap-4">
                <div className="w-12 h-12 bg-turquoise-500/10 rounded-full flex items-center justify-center shrink-0">
                  <Phone className="w-6 h-6 text-turquoise-500" />
                </div>
                <div>
                  <h3 className="font-semibold text-lg text-deepblue-900">Telefon</h3>
                  <a href={siteInfo.phoneLink} className="text-gray-600 mt-1 hover:text-turquoise-500 block">{siteInfo.phone}</a>
                </div>
              </div>

              <div className="flex items-start gap-4">
                <div className="w-12 h-12 bg-turquoise-500/10 rounded-full flex items-center justify-center shrink-0">
                  <Mail className="w-6 h-6 text-turquoise-500" />
                </div>
                <div>
                  <h3 className="font-semibold text-lg text-deepblue-900">E-Posta</h3>
                  <a href={`mailto:${siteInfo.email}`} className="text-gray-600 mt-1 hover:text-turquoise-500 block">{siteInfo.email}</a>
                </div>
              </div>
            </div>
            
            <div className="mt-8">
              <a href={siteInfo.whatsappLink} target="_blank" rel="noreferrer" className="inline-flex items-center justify-center w-full py-4 bg-[#25D366] hover:bg-[#20bd5a] text-white rounded-xl font-bold text-lg transition-colors">
                WhatsApp'tan Bize Yazın
              </a>
            </div>
          </div>
          
          <div>
            <h2 className="text-2xl font-bold text-deepblue-900 mb-6">Bize Mesaj Gönderin</h2>
            <form className="space-y-4">
              <div>
                <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">Adınız Soyadınız</label>
                <input type="text" id="name" className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-turquoise-500 focus:ring-2 focus:ring-turquoise-500/20 outline-none transition-all" placeholder="Adınız Soyadınız" />
              </div>
              <div>
                <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">E-Posta Adresiniz</label>
                <input type="email" id="email" className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-turquoise-500 focus:ring-2 focus:ring-turquoise-500/20 outline-none transition-all" placeholder="ornek@email.com" />
              </div>
              <div>
                <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">Mesajınız</label>
                <textarea id="message" rows={4} className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-turquoise-500 focus:ring-2 focus:ring-turquoise-500/20 outline-none transition-all resize-none" placeholder="Mesajınızı buraya yazın..."></textarea>
              </div>
              <button type="button" className="w-full py-4 bg-deepblue-900 hover:bg-deepblue-900/90 text-white rounded-xl font-bold text-lg transition-colors">
                Gönder
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
}