
import React, { useState } from 'react';
import { Phone, Mail, MapPin, Send, MessageCircle } from 'lucide-react';
import { SiteSettings } from '../types';

interface ContactPageProps {
  theme?: string;
  settings?: SiteSettings;
}

const ContactPage: React.FC<ContactPageProps> = ({ theme = '01', settings }) => {
  const [submitted, setSubmitted] = useState(false);

  const contactEmail = settings?.email || 'hello@shophyfast.com';
  const contactPhone = settings?.phone || '+৮৮০ ১২৩৪-৫৬৭৮৯০';
  const contactAddress = settings?.address || 'মতিঝিল বা/এ, ঢাকা-১০০০';

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitted(true);
  };

  return (
    <div className="min-h-screen bg-white dark:bg-slate-900 pb-24 animate-fade-in-up">

      {/* Hero — compact on mobile */}
      <div className="bg-themePrimary py-10 md:py-20 mb-8 md:mb-16 text-white text-center md:rounded-b-[40px] shadow-lg relative overflow-hidden">
        <div className="absolute inset-0 bg-black/10 z-0" />
        <div className="container mx-auto px-4 relative z-10">
          <h1 className="text-3xl md:text-5xl font-black mb-3 font-bangla drop-shadow-md">যোগাযোগ করুন</h1>
          <p className="text-white/90 font-bangla text-sm md:text-lg max-w-md mx-auto hidden md:block">
            আপনার যেকোনো জিজ্ঞাসা বা মতামতের জন্য আমরা সবসময় প্রস্তুত।
          </p>
        </div>
      </div>

      <div className="container mx-auto px-4 max-w-5xl">

        {/* Mobile: Quick action buttons */}
        <div className="md:hidden flex gap-3 mb-6">
          <a
            href={`tel:${contactPhone}`}
            className="flex-1 flex flex-col items-center gap-1.5 p-4 bg-themePrimary/10 rounded-2xl active:scale-95 transition-all"
          >
            <div className="w-10 h-10 bg-themePrimary rounded-xl flex items-center justify-center">
              <Phone size={20} className="text-white" />
            </div>
            <span className="text-xs font-bold text-themePrimary font-bangla">ফোন করুন</span>
            <span className="text-[10px] text-slate-500 text-center leading-tight">{contactPhone}</span>
          </a>
          <a
            href={`https://wa.me/${contactPhone.replace(/[^0-9]/g, '')}`}
            target="_blank"
            rel="noopener noreferrer"
            className="flex-1 flex flex-col items-center gap-1.5 p-4 bg-green-50 rounded-2xl active:scale-95 transition-all"
          >
            <div className="w-10 h-10 bg-green-500 rounded-xl flex items-center justify-center">
              <MessageCircle size={20} className="text-white" />
            </div>
            <span className="text-xs font-bold text-green-600 font-bangla">WhatsApp</span>
            <span className="text-[10px] text-slate-500">মেসেজ করুন</span>
          </a>
          <a
            href={`mailto:${contactEmail}`}
            className="flex-1 flex flex-col items-center gap-1.5 p-4 bg-blue-50 rounded-2xl active:scale-95 transition-all"
          >
            <div className="w-10 h-10 bg-blue-500 rounded-xl flex items-center justify-center">
              <Mail size={20} className="text-white" />
            </div>
            <span className="text-xs font-bold text-blue-600 font-bangla">ইমেইল</span>
            <span className="text-[10px] text-slate-500 text-center leading-tight truncate max-w-full">{contactEmail}</span>
          </a>
        </div>

        {/* Address card mobile */}
        <div className="md:hidden mb-6 flex items-center gap-3 p-4 bg-slate-50 rounded-2xl">
          <div className="w-10 h-10 bg-themePrimary/10 rounded-xl flex items-center justify-center flex-shrink-0">
            <MapPin size={20} className="text-themePrimary" />
          </div>
          <div>
            <p className="text-xs font-black text-slate-800 font-bangla">ঠিকানা</p>
            <p className="text-xs text-slate-500 font-bangla mt-0.5">{contactAddress}</p>
          </div>
        </div>

        <div className="flex flex-col lg:flex-row gap-8 lg:gap-16">
          {/* Contact Info — desktop only */}
          <div className="hidden lg:block lg:w-1/3 space-y-6">
            <h2 className="text-3xl font-black font-bangla text-black dark:text-white">আমাদের সাথে <br />জুড়ে থাকুন</h2>
            {[
              { icon: Phone, label: 'ফোন করুন', value: contactPhone },
              { icon: Mail, label: 'ইমেইল', value: contactEmail },
              { icon: MapPin, label: 'ঠিকানা', value: contactAddress },
            ].map(({ icon: Icon, label, value }) => (
              <div key={label} className="flex gap-5 p-6 bg-slate-50 dark:bg-slate-800 rounded-[28px] border border-slate-100">
                <div className="w-12 h-12 bg-white dark:bg-slate-700 rounded-2xl flex items-center justify-center shrink-0 text-themePrimary shadow-sm">
                  <Icon size={22} />
                </div>
                <div>
                  <h4 className="font-black text-black dark:text-white font-bangla">{label}</h4>
                  <p className="text-slate-500 font-medium text-sm mt-0.5">{value}</p>
                </div>
              </div>
            ))}
            <a
              href={`https://wa.me/${contactPhone.replace(/[^0-9]/g, '')}`}
              target="_blank"
              rel="noopener noreferrer"
              className="w-full py-4 bg-green-600 text-white rounded-[20px] font-black font-bangla text-lg flex items-center justify-center gap-3 shadow-xl shadow-green-600/20 active:scale-95 transition-transform"
            >
              <MessageCircle size={22} /> WhatsApp-এ কথা বলুন
            </a>
          </div>

          {/* Form */}
          <div className="lg:w-2/3">
            {submitted ? (
              <div className="p-8 md:p-12 rounded-[28px] text-center bg-themePrimary/5 border-2 border-themePrimary/20">
                <div className="w-16 h-16 bg-themePrimary text-white rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg">
                  <Send size={32} />
                </div>
                <h3 className="text-2xl font-black font-bangla text-themePrimary mb-3">বার্তাটি পাঠানো হয়েছে!</h3>
                <p className="text-slate-500 font-bangla">আমাদের প্রতিনিধি শীঘ্রই যোগাযোগ করবেন।</p>
                <button
                  onClick={() => setSubmitted(false)}
                  className="mt-6 px-6 py-3 bg-themePrimary text-white rounded-full font-black font-bangla"
                >
                  আরেকটি বার্তা পাঠান
                </button>
              </div>
            ) : (
              <div className="bg-white dark:bg-slate-800 p-6 md:p-10 lg:p-14 rounded-[28px] shadow-xl border border-slate-100 dark:border-slate-700">
                <h3 className="text-xl md:text-2xl font-black font-bangla text-black dark:text-white mb-6">সরাসরি বার্তা পাঠান</h3>
                <form onSubmit={handleSubmit} className="space-y-4 md:space-y-6">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-1">
                      <label className="text-[10px] font-black uppercase tracking-widest text-slate-400 ml-1">আপনার নাম</label>
                      <input required type="text" className="w-full px-5 py-3.5 bg-slate-50 dark:bg-slate-900 border-none rounded-2xl focus:ring-2 focus:ring-themePrimary font-bangla text-sm" placeholder="নাম লিখুন" />
                    </div>
                    <div className="space-y-1">
                      <label className="text-[10px] font-black uppercase tracking-widest text-slate-400 ml-1">ইমেইল / ফোন</label>
                      <input required type="text" className="w-full px-5 py-3.5 bg-slate-50 dark:bg-slate-900 border-none rounded-2xl focus:ring-2 focus:ring-themePrimary font-bangla text-sm" placeholder="মোবাইল বা ইমেইল" />
                    </div>
                  </div>
                  <div className="space-y-1">
                    <label className="text-[10px] font-black uppercase tracking-widest text-slate-400 ml-1">বিষয়</label>
                    <input required type="text" className="w-full px-5 py-3.5 bg-slate-50 dark:bg-slate-900 border-none rounded-2xl focus:ring-2 focus:ring-themePrimary font-bangla text-sm" placeholder="বার্তার বিষয়" />
                  </div>
                  <div className="space-y-1">
                    <label className="text-[10px] font-black uppercase tracking-widest text-slate-400 ml-1">আপনার বার্তা</label>
                    <textarea required className="w-full px-5 py-3.5 bg-slate-50 dark:bg-slate-900 border-none rounded-2xl focus:ring-2 focus:ring-themePrimary font-bangla min-h-[120px] text-sm" placeholder="বিস্তারিত লিখুন..." />
                  </div>
                  <button type="submit" className="w-full py-4 bg-themePrimary hover:bg-opacity-90 text-white rounded-2xl font-black font-bangla text-lg shadow-lg transition-all active:scale-95">
                    বার্তা পাঠান ✉️
                  </button>
                </form>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default ContactPage;