import { MapPin, Phone, Mail, Clock } from "lucide-react";
import ScrollReveal from "@/components/ScrollReveal";
import { buildMeta } from "@/lib/metadata";
import type { Metadata } from "next";

export const revalidate = 3600;

export async function generateMetadata({ params }: { params: Promise<{ lang: string }> }): Promise<Metadata> {
  const { lang } = await params;
  return buildMeta(lang, "/iletisim", {
    title: "İletişim | Kite Beach Akyaka",
    description: "Kite Beach Akyaka ile iletişime geçin. Muğla Akyaka'da kitesurf dersi, konaklama ve etkinlikler için bize yazın.",
  }, {
    title: "Contact | Kite Beach Akyaka",
    description: "Contact Kite Beach Akyaka. Write to us for kitesurf lessons, accommodation and events in Akyaka, Muğla.",
  });
}

export default async function IletisimPage({ params }: { params: Promise<{ lang: string }> }) {
  const { lang } = await params;
  const isEn = lang === "en";

  const contactItems = isEn ? [
    {
      icon: MapPin,
      label: "Address",
      value: "Akyaka District, Akcapinar Location, Mugla, Turkey",
      href: undefined,
    },
    {
      icon: Phone,
      label: "Phone / WhatsApp",
      value: "+90 533 081 6181",
      href: "tel:+905330816181",
    },
    {
      icon: Mail,
      label: "Email",
      value: "info@kitebeachakyaka.com.tr",
      href: "mailto:info@kitebeachakyaka.com.tr",
    },
    {
      icon: Clock,
      label: "Reception",
      value: "Every day 08:00 – 22:00",
      href: undefined,
    },
  ] : [
    {
      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,
    },
  ];

  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">
            {isEn ? "Contact Us" : "Bize Ulaşın"}
          </span>
          <h1 className="font-serif text-5xl font-bold text-dark mb-4">
            {isEn ? "Contact" : "İletişim"}
          </h1>
          <p className="text-muted max-w-lg mx-auto text-sm leading-relaxed">
            {isEn ? (
              "Get in touch with us for your questions or requests. Our team will get back to you as soon as possible."
            ) : (
              "Sorularınız veya 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">
                {isEn ? "Send a Message" : "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">
                      {isEn ? "Full Name" : "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={isEn ? "Your Full Name" : "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">
                      {isEn ? "Phone" : "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">
                    {isEn ? "Email" : "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">
                    {isEn ? "Subject" : "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>{isEn ? "Room Information" : "Oda Bilgisi"}</option>
                    <option>{isEn ? "Kitesurf Lesson / Rental" : "Kitesurf Dersi / Kiralama"}</option>
                    <option>{isEn ? "Restaurant Information" : "Restoran Bilgisi"}</option>
                    <option>{isEn ? "Activity Information" : "Aktivite Bilgisi"}</option>
                    <option>{isEn ? "Other" : "Diğer"}</option>
                  </select>
                </div>

                <div>
                  <label htmlFor="message" className="block text-[12px] font-semibold text-foreground/60 mb-2 tracking-wider uppercase">
                    {isEn ? "Your Message" : "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={isEn ? "You can write your request here..." : "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"
                >
                  {isEn ? "Send Message" : "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">
                {isEn ? "Contact Information" : "İletişim Bilgileri"}
              </h3>
              <ul className="space-y-6">
                {contactItems.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>
  );
}