import { MapPin, Phone, Mail, Clock } from "lucide-react";
import ScrollReveal from "@/components/ScrollReveal";

export default function IletisimPage() {
  return (
    <div className="min-h-screen bg-background pt-28 pb-20">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        {/* Heading */}
        <div className="text-center mb-16">
          <span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
            Bize Ulaşın
          </span>
          <h1 className="font-serif text-5xl font-bold text-dark mb-4">
            İletişim & Rezervasyon
          </h1>
          <p className="text-muted max-w-lg mx-auto text-sm leading-relaxed">
            Sorularınız veya rezervasyon talepleriniz için bizimle iletişime geçin.
            Ekibimiz en kısa sürede dönüş yapacaktır.
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-5 gap-10">

          {/* Form — takes 3 cols */}
          <ScrollReveal className="lg:col-span-3">
            <div className="bg-white rounded-3xl p-10 md:p-12 border border-sand shadow-sm">
              <h2 className="font-serif text-2xl font-bold text-dark mb-8">Mesaj Gönderin</h2>
              <form className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                  <div>
                    <label htmlFor="name" className="block text-[12px] font-semibold text-foreground/60 mb-2 tracking-wider uppercase">
                      Ad Soyad
                    </label>
                    <input
                      type="text"
                      id="name"
                      className="w-full px-4 py-3 rounded-xl border border-sand focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all bg-background text-[14px]"
                      placeholder="Adınız Soyadınız"
                    />
                  </div>
                  <div>
                    <label htmlFor="phone" className="block text-[12px] font-semibold text-foreground/60 mb-2 tracking-wider uppercase">
                      Telefon
                    </label>
                    <input
                      type="tel"
                      id="phone"
                      className="w-full px-4 py-3 rounded-xl border border-sand focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all bg-background text-[14px]"
                      placeholder="+90 (5XX) XXX XX XX"
                    />
                  </div>
                </div>

                <div>
                  <label htmlFor="email" className="block text-[12px] font-semibold text-foreground/60 mb-2 tracking-wider uppercase">
                    E-posta
                  </label>
                  <input
                    type="email"
                    id="email"
                    className="w-full px-4 py-3 rounded-xl border border-sand focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all bg-background text-[14px]"
                    placeholder="ornek@email.com"
                  />
                </div>

                <div>
                  <label htmlFor="subject" className="block text-[12px] font-semibold text-foreground/60 mb-2 tracking-wider uppercase">
                    Konu
                  </label>
                  <select
                    id="subject"
                    className="w-full px-4 py-3 rounded-xl border border-sand focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all bg-background text-[14px] text-foreground"
                  >
                    <option>Oda Rezervasyonu</option>
                    <option>Kitesurf Dersi / Kiralama</option>
                    <option>Restoran Rezervasyonu</option>
                    <option>Aktivite Bilgisi</option>
                    <option>Diğer</option>
                  </select>
                </div>

                <div>
                  <label htmlFor="message" className="block text-[12px] font-semibold text-foreground/60 mb-2 tracking-wider uppercase">
                    Mesajınız
                  </label>
                  <textarea
                    id="message"
                    rows={5}
                    className="w-full px-4 py-3 rounded-xl border border-sand focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all bg-background text-[14px] resize-none"
                    placeholder="Talebinizi buraya yazabilirsiniz..."
                  />
                </div>

                <button
                  type="button"
                  className="btn-shimmer w-full bg-accent text-white py-4 rounded-xl text-[12px] font-bold tracking-[0.15em] uppercase hover:bg-accent/90 transition-colors shadow-lg"
                >
                  Mesaj Gönder
                </button>
              </form>
            </div>
          </ScrollReveal>

          {/* Sidebar — takes 2 cols */}
          <ScrollReveal delay={200} className="lg:col-span-2 flex flex-col gap-6">

            {/* Contact info card */}
            <div className="bg-primary rounded-3xl p-8 text-white">
              <h3 className="font-serif text-xl font-bold mb-7">İletişim Bilgileri</h3>
              <ul className="space-y-6">
                {[
                  {
                    icon: MapPin,
                    label: "Adres",
                    value: "Akyaka Mahallesi, Akçapınar Mevkii, Muğla",
                    href: undefined,
                  },
                  {
                    icon: Phone,
                    label: "Telefon / WhatsApp",
                    value: "+90 533 081 6181",
                    href: "tel:+905330816181",
                  },
                  {
                    icon: Mail,
                    label: "E-posta",
                    value: "info@kitebeachakyaka.com.tr",
                    href: "mailto:info@kitebeachakyaka.com.tr",
                  },
                  {
                    icon: Clock,
                    label: "Resepsiyon",
                    value: "Her gün 08:00 – 22:00",
                    href: undefined,
                  },
                ].map(({ icon: Icon, label, value, href }) => (
                  <li key={label} className="flex items-start gap-4">
                    <div className="w-9 h-9 bg-white/10 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                      <Icon size={15} className="text-accent" />
                    </div>
                    <div>
                      <span className="block text-[10px] font-bold tracking-[0.2em] uppercase text-white/40 mb-1">
                        {label}
                      </span>
                      {href ? (
                        <a href={href} className="text-white/80 hover:text-white transition-colors text-[13px]">
                          {value}
                        </a>
                      ) : (
                        <span className="text-white/80 text-[13px]">{value}</span>
                      )}
                    </div>
                  </li>
                ))}
              </ul>
            </div>

            {/* Map */}
            <div className="rounded-3xl overflow-hidden border border-sand flex-grow min-h-[220px] relative">
              <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12759.395175968393!2d28.3245!3d37.0564!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14bf76cd1f1f1d1f%3A0x1d1f1f1f1f1f1f1f!2sAkyaka%2C%20Ula%2FMuğla!5e0!3m2!1str!2str!4v1650000000000!5m2!1str!2str"
                width="100%"
                height="100%"
                style={{ border: 0 }}
                allowFullScreen
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                className="absolute inset-0"
              />
            </div>

          </ScrollReveal>
        </div>
      </div>
    </div>
  );
}