import { Phone, Mail, MapPin, Clock, Send } from "lucide-react";
import HeroSection from "@/components/ui/hero-section";

export default async function ContactPage({ params }: { params: Promise<{ lang: string }> }) {
  const { lang } = await params;
  const isArabic = lang === "ar";
  const dir = isArabic ? "rtl" : "ltr";

  const contactInfo = [
    { icon: Phone, title: isArabic ? "الهاتف" : "Phone", value: "+249 11 421 0853", link: "tel:+249114210853" },
    { icon: Mail, title: isArabic ? "البريد الإلكتروني" : "Email", value: "aiuagho@gmail.com", link: "mailto:aiuagho@gmail.com" },
    { icon: MapPin, title: isArabic ? "العنوان" : "Address", value: isArabic ? "الخرطوم - السودان" : "Khartoum - Sudan", link: "#" },
    { icon: Clock, title: isArabic ? "ساعات العمل" : "Working Hours", value: isArabic ? "الأحد - الخميس: 8 ص - 4 م" : "Sun - Thu: 8 AM - 4 PM", link: "#" },
  ];

  return (
    <div dir={dir}>
      <HeroSection
        pageSlug="contact"
        lang={lang}
        defaultTitle={isArabic ? "اتصل بنا" : "Contact Us"}
        defaultSubtitle={isArabic ? "نحن هنا لمساعدتك. تواصل معنا لأي استفسار أو دعم" : "We are here to help you. Contact us for any inquiry or support"}
      />

      {/* Contact Info Cards */}
      <section className="py-16 bg-background">
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {contactInfo.map((info, i) => (
              <a key={i} href={info.link} className="bg-surface rounded-2xl p-6 text-center shadow-sm hover:shadow-md transition-all hover:border-primary/30 border border-border">
                <div className="w-14 h-14 mx-auto mb-4 bg-primary/10 rounded-full flex items-center justify-center">
                  <info.icon className="w-7 h-7 text-primary" />
                </div>
                <h3 className="font-bold text-text mb-2">{info.title}</h3>
                <p className="text-text-secondary text-sm">{info.value}</p>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Form + Map */}
      <section className="py-20 bg-surface">
        <div className="container mx-auto px-4">
          <div className="grid lg:grid-cols-2 gap-12">
            {/* Form */}
            <div>
              <h2 className="text-2xl font-bold text-text mb-6">{isArabic ? "أرسل لنا رسالة" : "Send Us a Message"}</h2>
              <div className="space-y-5">
                <div className="grid md:grid-cols-2 gap-5">
                  <div>
                    <label className="block text-sm font-medium text-text mb-1.5">{isArabic ? "الاسم" : "Name"}</label>
                    <input className="w-full h-10 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary" dir={dir} />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-text mb-1.5">{isArabic ? "البريد الإلكتروني" : "Email"}</label>
                    <input type="email" className="w-full h-10 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary" dir={dir} />
                  </div>
                </div>
                <div className="grid md:grid-cols-2 gap-5">
                  <div>
                    <label className="block text-sm font-medium text-text mb-1.5">{isArabic ? "الهاتف" : "Phone"}</label>
                    <input className="w-full h-10 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary" dir={dir} />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-text mb-1.5">{isArabic ? "الموضوع" : "Subject"}</label>
                    <input className="w-full h-10 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary" dir={dir} />
                  </div>
                </div>
                <div>
                  <label className="block text-sm font-medium text-text mb-1.5">{isArabic ? "الرسالة" : "Message"}</label>
                  <textarea className="w-full min-h-[120px] rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary resize-none" dir={dir} />
                </div>
                <button className="flex items-center gap-2 px-8 py-3 bg-primary text-white rounded-xl font-bold hover:bg-primary/90 transition-all">
                  <Send className="w-4 h-4" />
                  {isArabic ? "إرسال" : "Send"}
                </button>
              </div>
            </div>

            {/* Map Placeholder */}
            <div>
              <h2 className="text-2xl font-bold text-text mb-6">{isArabic ? "موقعنا" : "Our Location"}</h2>
              <div className="bg-gray-100 rounded-2xl h-[400px] flex items-center justify-center border border-border">
                <div className="text-center">
                  <MapPin className="w-12 h-12 text-text-light mx-auto mb-3" />
                  <p className="text-text-secondary">{isArabic ? "الخرطوم - السودان" : "Khartoum - Sudan"}</p>
                </div>
              </div>
              <div className="mt-6 bg-background rounded-xl p-5">
                <h3 className="font-bold text-text mb-3 flex items-center gap-2">
                  <Clock className="w-5 h-5 text-primary" />
                  {isArabic ? "ساعات العمل" : "Working Hours"}
                </h3>
                <div className="space-y-2 text-sm text-text-secondary">
                  <div className="flex justify-between">
                    <span>{isArabic ? "الأحد - الخميس" : "Sunday - Thursday"}</span>
                    <span className="font-medium text-text">{isArabic ? "8:00 ص - 4:00 م" : "8:00 AM - 4:00 PM"}</span>
                  </div>
                  <div className="flex justify-between">
                    <span>{isArabic ? "الجمعة - السبت" : "Friday - Saturday"}</span>
                    <span className="font-medium text-error">{isArabic ? "عطلة" : "Closed"}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}