import type { Metadata } from "next";
import StaticPageLayout from "@/components/layout/StaticPageLayout";
import { Mail, MapPin, MessageSquare, Clock } from "lucide-react";

export const metadata: Metadata = {
  title: "İletişim | yakınımda.tr",
  description: "yakınımda.tr ile iletişime geçin. Soru, öneri ve iş birliği talepleri.",
};

export default function IletisimPage() {
  return (
    <StaticPageLayout
      badge="İletişim"
      title="Bize Ulaşın"
      subtitle="Sorularınız, önerileriniz veya iş birliği teklifleriniz için formu doldurun veya e-posta gönderin."
      breadcrumbs={[{ label: "İletişim" }]}
    >
      <div className="grid gap-8 lg:grid-cols-5">
        <div className="lg:col-span-3">
          <form className="space-y-4">
            <div>
              <label htmlFor="name" className="mb-1.5 block text-sm font-medium text-slate-300">
                Ad Soyad
              </label>
              <input
                id="name"
                type="text"
                placeholder="Adınız Soyadınız"
                className="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white placeholder:text-slate-600 outline-none focus:border-emerald-500/40"
              />
            </div>
            <div>
              <label htmlFor="email" className="mb-1.5 block text-sm font-medium text-slate-300">
                E-posta
              </label>
              <input
                id="email"
                type="email"
                placeholder="ornek@email.com"
                className="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white placeholder:text-slate-600 outline-none focus:border-emerald-500/40"
              />
            </div>
            <div>
              <label htmlFor="subject" className="mb-1.5 block text-sm font-medium text-slate-300">
                Konu
              </label>
              <select
                id="subject"
                className="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white outline-none focus:border-emerald-500/40"
              >
                <option value="genel">Genel Soru</option>
                <option value="hata">Hatalı Bilgi Bildirimi</option>
                <option value="isletme">İşletme Ekleme</option>
                <option value="isbirligi">İş Birliği</option>
                <option value="diger">Diğer</option>
              </select>
            </div>
            <div>
              <label htmlFor="message" className="mb-1.5 block text-sm font-medium text-slate-300">
                Mesaj
              </label>
              <textarea
                id="message"
                rows={5}
                placeholder="Mesajınızı yazın..."
                className="w-full resize-none rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white placeholder:text-slate-600 outline-none focus:border-emerald-500/40"
              />
            </div>
            <button
              type="button"
              className="w-full rounded-xl bg-gradient-to-r from-emerald-500 to-emerald-600 py-3.5 text-sm font-bold text-white shadow-lg shadow-emerald-500/25 transition-all hover:from-emerald-400 hover:to-emerald-500 sm:w-auto sm:px-8"
            >
              Gönder (Statik — yakında aktif)
            </button>
          </form>
        </div>

        <div className="space-y-4 lg:col-span-2">
          {[
            {
              icon: Mail,
              title: "E-posta",
              value: "info@yakinimda.tr",
              href: "mailto:info@yakinimda.tr",
            },
            {
              icon: MapPin,
              title: "Konum",
              value: "İstanbul, Türkiye",
            },
            {
              icon: Clock,
              title: "Yanıt Süresi",
              value: "1-2 iş günü",
            },
            {
              icon: MessageSquare,
              title: "SSS",
              value: "Hızlı cevaplar için",
              href: "/sss",
            },
          ].map((item) => {
            const Icon = item.icon;
            const content = (
              <div className="content-card flex gap-4">
                <Icon className="h-6 w-6 shrink-0 text-emerald-400" />
                <div>
                  <p className="text-sm font-semibold text-white">{item.title}</p>
                  <p className="mt-1 text-sm text-slate-400">{item.value}</p>
                </div>
              </div>
            );
            return item.href ? (
              <a key={item.title} href={item.href} className="block transition-opacity hover:opacity-80">
                {content}
              </a>
            ) : (
              <div key={item.title}>{content}</div>
            );
          })}
        </div>
      </div>
    </StaticPageLayout>
  );
}