import { useState } from 'react';
import { Phone, Mail, MapPin, Clock, ArrowRight, Loader2, CheckCircle } from 'lucide-react';
import Reveal from '../components/ui/Reveal';

type Form = { name: string; email: string; phone: string; message: string };
const init: Form = { name: '', email: '', phone: '', message: '' };

export default function Contact() {
  const [form, setForm] = useState<Form>(init);
  const [loading, setLoading] = useState(false);
  const [sent, setSent] = useState(false);
  const change = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
    setForm((p) => ({ ...p, [e.target.name]: e.target.value }));

  const submit = (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setTimeout(() => { setLoading(false); setSent(true); setForm(init); }, 1200);
  };

  const info = [
    { icon: Phone, label: 'Phone', lines: ['+974 4441 2853'] },
    { icon: Mail, label: 'Email', lines: ['info@panamaintlco.net'] },
    { icon: MapPin, label: 'Office', lines: ['Industrial Area, Zone 57, St 531', 'Building 11, Doha, Qatar'] },
    { icon: Clock, label: 'Hours', lines: ['Sat–Thu: 9:00 AM – 5:00 PM', 'Friday: Closed'] },
  ];

  return (
    <div className="pt-24">
      {/* Header */}
      <section
        className="relative py-28 bg-cover bg-center"
        style={{ backgroundImage: 'url(https://images.pexels.com/photos/1216589/pexels-photo-1216589.jpeg?auto=compress&cs=tinysrgb&w=1920)' }}
      >
        <div className="absolute inset-0 bg-navy/82" />
        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-12">
          <span className="section-label">Get in Touch</span>
          <h1 className="section-title-light max-w-xl">Contact<br /><span className="text-gold italic">Our Team</span></h1>
        </div>
      </section>

      <section className="py-24 bg-cream-200">
        <div className="max-w-7xl mx-auto px-6 lg:px-12 grid lg:grid-cols-5 gap-16">
          {/* Info */}
          <Reveal direction="left" className="lg:col-span-2">
            <h2 className="font-serif text-2xl text-navy mb-10">Contact Information</h2>
            <div className="space-y-7">
              {info.map(({ icon: Icon, label, lines }) => (
                <div key={label} className="flex gap-4">
                  <div className="w-10 h-10 border border-gold/30 flex items-center justify-center flex-shrink-0">
                    <Icon size={15} className="text-gold" />
                  </div>
                  <div>
                    <p className="font-sans text-[10px] tracking-[0.15em] uppercase text-navy/40 mb-1">{label}</p>
                    {lines.map((l) => <p key={l} className="font-sans text-sm text-navy">{l}</p>)}
                  </div>
                </div>
              ))}
            </div>
          </Reveal>

          {/* Form */}
          <Reveal direction="right" className="lg:col-span-3">
            {sent ? (
              <div className="bg-white border border-sand-200 p-12 text-center">
                <div className="w-14 h-14 bg-gold/10 border border-gold/30 flex items-center justify-center mx-auto mb-6">
                  <CheckCircle size={28} className="text-gold" />
                </div>
                <h3 className="font-serif text-2xl text-navy mb-4">Message Sent</h3>
                <p className="font-sans text-navy/55 text-sm mb-8">We'll respond within a few business hours.</p>
                <button onClick={() => setSent(false)} className="btn-outline-dark">Send Another</button>
              </div>
            ) : (
              <form onSubmit={submit} className="bg-white border border-sand-200 p-8 md:p-12">
                <h3 className="font-serif text-2xl text-navy mb-8">Send a Message</h3>
                <div className="grid md:grid-cols-2 gap-5 mb-5">
                  <div>
                    <label className="input-label">Name *</label>
                    <input name="name" value={form.name} onChange={change} required placeholder="Your name" className="input-field" />
                  </div>
                  <div>
                    <label className="input-label">Phone</label>
                    <input name="phone" value={form.phone} onChange={change} placeholder="+974 xxxx xxxx" className="input-field" />
                  </div>
                </div>
                <div className="mb-5">
                  <label className="input-label">Email *</label>
                  <input name="email" type="email" value={form.email} onChange={change} required placeholder="you@example.com" className="input-field" />
                </div>
                <div className="mb-8">
                  <label className="input-label">Message *</label>
                  <textarea name="message" value={form.message} onChange={change} required rows={5} placeholder="How can we help?" className="input-field resize-none" />
                </div>
                <button type="submit" disabled={loading} className="btn-primary w-full justify-center disabled:opacity-70">
                  {loading ? <><Loader2 size={14} className="animate-spin" /> Sending...</> : <>Send Message <ArrowRight size={13} /></>}
                </button>
              </form>
            )}
          </Reveal>
        </div>
      </section>

      {/* Map */}
      <div className="h-72 relative">
        <iframe
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d96708.34!2d-74.0060!3d40.7128!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY!5e0!3m2!1sen!2sus!4v1234567890"
          width="100%" height="100%"
          style={{ border: 0, filter: 'grayscale(100%) contrast(1.05)' }}
          allowFullScreen loading="lazy" referrerPolicy="no-referrer-when-downgrade"
          title="Panama International Contracting Company Office Location"
        />
      </div>
    </div>
  );
}
