import MainLayout from "../layouts/MainLayout"

export default function ContactPage() {
  return (
    <MainLayout>
      <div className="max-w-6xl mx-auto px-4 py-16">
        {/* Header */}
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold text-gray-900">
            Bizimle İletişime Geç
          </h1>
          <p className="mt-4 text-gray-600 max-w-xl mx-auto">
            Görüşlerin, önerilerin veya iş birliği taleplerin için bize yazabilirsin.
          </p>
        </div>

        {/* Content */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
          {/* Left - Info */}
          <div className="space-y-6">
            <div>
              <h2 className="text-xl font-semibold text-gray-900">
                İletişim Bilgileri
              </h2>
              <p className="mt-2 text-gray-600">
                Sana en kısa sürede dönüş yapabilmemiz için doğru bilgileri doldurduğundan emin ol.
              </p>
            </div>

            <div className="space-y-4">
              <div className="flex items-start gap-3">
                <div className="text-primary text-xl">📧</div>
                <div>
                  <p className="font-medium text-gray-900">E-posta</p>
                  <p className="text-gray-600">support@hotdeals.com</p>
                </div>
              </div>

              <div className="flex items-start gap-3">
                <div className="text-primary text-xl">🌐</div>
                <div>
                  <p className="font-medium text-gray-900">Website</p>
                  <p className="text-gray-600">www.hotdeals.com</p>
                </div>
              </div>

              <div className="flex items-start gap-3">
                <div className="text-primary text-xl">📍</div>
                <div>
                  <p className="font-medium text-gray-900">Konum</p>
                  <p className="text-gray-600">Türkiye</p>
                </div>
              </div>
            </div>
          </div>

          {/* Right - Form */}
          <div className="bg-white rounded-xl shadow-sm border p-8">
            <form className="space-y-6">
              <div>
                <label className="block text-sm font-medium text-gray-700">
                  Ad Soyad
                </label>
                <input
                  type="text"
                  placeholder="Adınızı girin"
                  className="mt-1 w-full rounded-md border-gray-300 focus:border-primary focus:ring-primary"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700">
                  E-posta
                </label>
                <input
                  type="email"
                  placeholder="email@example.com"
                  className="mt-1 w-full rounded-md border-gray-300 focus:border-primary focus:ring-primary"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700">
                  Mesaj
                </label>
                <textarea
                  rows={4}
                  placeholder="Mesajını buraya yaz..."
                  className="mt-1 w-full rounded-md border-gray-300 focus:border-primary focus:ring-primary"
                />
              </div>

              <button
                type="submit"
                className="w-full bg-primary text-white py-3 rounded-md font-medium hover:opacity-90 transition"
              >
                Mesajı Gönder
              </button>
            </form>
          </div>
        </div>
      </div>
    </MainLayout>
  )
}
