import type { Metadata } from "next";
import { Mail, Phone, MapPin, Clock, Send } from "lucide-react";

export const metadata: Metadata = {
  title: "تماس با ما",
  description: "راه‌های ارتباطی با نمایندگی رسمی مکمل‌های دامپزشکی کانینا در ایران.",
};

export default function ContactPage() {
  return (
    <div className="bg-medical-gray-50 py-16 px-4 sm:px-6 lg:px-8 font-vazir" dir="rtl">
      <div className="max-w-6xl mx-auto space-y-16">
        
        {/* Title */}
        <div className="text-center space-y-4">
          <span className="inline-flex items-center gap-2 px-4 py-2 bg-canina-blue/5 border border-canina-blue/10 rounded-full text-canina-blue text-xs font-black uppercase tracking-widest">
            پاسخگوی شما هستیم
          </span>
          <h1 className="text-4xl lg:text-5xl font-black text-medical-gray-900 leading-tight">
            تماس با <span className="text-canina-blue italic">کانینا ایران</span>
          </h1>
          <p className="text-lg text-medical-gray-500 max-w-2xl mx-auto leading-relaxed">
            جهت مشاوره تخصصی، خرید عمده و پیگیری سفارشات با ما در ارتباط باشید.
          </p>
        </div>

        <div className="grid lg:grid-cols-12 gap-12 items-start">
          {/* Contact Details */}
          <div className="lg:col-span-5 space-y-8">
            <h3 className="text-2xl font-black text-medical-gray-900">اطلاعات نمایندگی</h3>
            
            <div className="space-y-6">
              <div className="flex gap-4 p-6 bg-white border border-medical-gray-200 rounded-[2rem] shadow-sm">
                <div className="w-12 h-12 bg-canina-blue/5 text-canina-blue rounded-2xl flex items-center justify-center shrink-0">
                  <Phone className="w-6 h-6" />
                </div>
                <div>
                  <h4 className="text-xs font-black text-medical-gray-400 uppercase tracking-wider mb-1">تلفن‌های تماس</h4>
                  <p className="text-lg font-black text-medical-gray-900 tracking-wider">۰۲۱-۸۸۸۸ ۴۴۴۴</p>
                  <p className="text-sm text-medical-gray-500 font-bold">شنبه تا چهارشنبه ۹:۰۰ الی ۱۸:۰۰</p>
                </div>
              </div>

              <div className="flex gap-4 p-6 bg-white border border-medical-gray-200 rounded-[2rem] shadow-sm">
                <div className="w-12 h-12 bg-canina-blue/5 text-canina-blue rounded-2xl flex items-center justify-center shrink-0">
                  <Mail className="w-6 h-6" />
                </div>
                <div>
                  <h4 className="text-xs font-black text-medical-gray-400 uppercase tracking-wider mb-1">پست الکترونیک</h4>
                  <p className="text-sm font-black text-medical-gray-900">info@canino-iran.com</p>
                  <p className="text-xs text-medical-gray-500 font-bold">پاسخگویی در کمتر از ۲۴ ساعت کاری</p>
                </div>
              </div>

              <div className="flex gap-4 p-6 bg-white border border-medical-gray-200 rounded-[2rem] shadow-sm">
                <div className="w-12 h-12 bg-canina-blue/5 text-canina-blue rounded-2xl flex items-center justify-center shrink-0">
                  <MapPin className="w-6 h-6" />
                </div>
                <div>
                  <h4 className="text-xs font-black text-medical-gray-400 uppercase tracking-wider mb-1">نشانی دفتر مرکزی</h4>
                  <p className="text-sm font-bold text-medical-gray-900 leading-relaxed">
                    تهران، جردن، خیابان سعیدی، ساختمان کانینا، طبقه ۵، واحد ۱۹
                  </p>
                </div>
              </div>
            </div>
          </div>

          {/* Contact Form */}
          <div className="lg:col-span-7 bg-white border border-medical-gray-200 rounded-[3rem] p-10 shadow-xl">
            <h3 className="text-2xl font-black text-medical-gray-900 mb-8">ارسال پیام مستقیم</h3>
            
            <form className="space-y-6">
              <div className="grid md:grid-cols-2 gap-6">
                <div className="space-y-2">
                  <label className="text-xs font-black text-medical-gray-500">نام و نام خانوادگی</label>
                  <input type="text" className="w-full bg-medical-gray-50 border border-medical-gray-200 rounded-2xl p-4 text-sm font-bold focus:outline-none focus:ring-2 focus:ring-canina-blue/20" />
                </div>
                <div className="space-y-2">
                  <label className="text-xs font-black text-medical-gray-500">شماره موبایل</label>
                  <input type="text" className="w-full bg-medical-gray-50 border border-medical-gray-200 rounded-2xl p-4 text-sm font-bold text-left focus:outline-none focus:ring-2 focus:ring-canina-blue/20" dir="ltr" />
                </div>
              </div>

              <div className="space-y-2">
                <label className="text-xs font-black text-medical-gray-500">موضوع پیام</label>
                <input type="text" className="w-full bg-medical-gray-50 border border-medical-gray-200 rounded-2xl p-4 text-sm font-bold focus:outline-none focus:ring-2 focus:ring-canina-blue/20" />
              </div>

              <div className="space-y-2">
                <label className="text-xs font-black text-medical-gray-500">متن پیام</label>
                <textarea rows={4} className="w-full bg-medical-gray-50 border border-medical-gray-200 rounded-2xl p-4 text-sm font-bold focus:outline-none focus:ring-2 focus:ring-canina-blue/20"></textarea>
              </div>

              <button type="button" className="w-full bg-canina-blue text-white py-4 rounded-2xl font-black flex items-center justify-center gap-2 hover:shadow-xl hover:shadow-canina-blue/20 transition-all">
                <Send className="w-5 h-5 rotate-180" />
                ارسال پیام
              </button>
            </form>
          </div>
        </div>

      </div>
    </div>
  );
}