import PageBanner from "@/components/PageBanner";
import { motion } from "framer-motion";
import { useState } from "react";
import { Mail, Phone, MapPin, Send } from "lucide-react";
import heroEthical from "@/assets/hero-ethical.jpg";

const Contact = () => {
  const [form, setForm] = useState({ name: "", email: "", subject: "", message: "" });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const mailtoLink = `mailto:info@primeragoldafrica.com?subject=${encodeURIComponent(form.subject)}&body=${encodeURIComponent(`Name: ${form.name}\nEmail: ${form.email}\n\n${form.message}`)}`;
    window.open(mailtoLink);
  };

  return (
    <div>
      <PageBanner title="Contact Us" subtitle="Get in touch to discuss your gold trading requirements" image={heroEthical} />

      <section className="section-padding bg-background">
        <div className="container mx-auto">
          <div className="grid md:grid-cols-2 gap-12">
            <motion.div initial={{ opacity: 0, x: -30 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }}>
              <h2 className="font-heading text-2xl md:text-3xl font-bold text-foreground mb-4">Get In Touch</h2>
              <div className="gold-divider !mx-0 mb-6" />
              <p className="text-muted-foreground mb-8">Whether you're an international buyer, refinery, or investor, we're ready to discuss your gold requirements and provide a transparent, professional trading experience.</p>

              <div className="space-y-8">
                {/* DRC Office */}
                <div>
                  <h3 className="font-heading font-semibold text-primary text-lg mb-4">🇨🇩 DRC Office</h3>
                  <div className="space-y-4">
                    <div className="flex items-start gap-4">
                      <div className="w-10 h-10 rounded-full gold-gradient flex items-center justify-center shrink-0">
                        <MapPin size={18} className="text-secondary" />
                      </div>
                      <div>
                        <p className="font-medium text-foreground text-sm">Location</p>
                        <p className="text-muted-foreground text-sm">Lubumbashi, Democratic Republic of Congo</p>
                      </div>
                    </div>
                    <div className="flex items-start gap-4">
                      <div className="w-10 h-10 rounded-full gold-gradient flex items-center justify-center shrink-0">
                        <Mail size={18} className="text-secondary" />
                      </div>
                      <div>
                        <p className="font-medium text-foreground text-sm">Email</p>
                        <p className="text-muted-foreground text-sm">info@primeragoldafrica.com</p>
                      </div>
                    </div>
                    <div className="flex items-start gap-4">
                      <div className="w-10 h-10 rounded-full gold-gradient flex items-center justify-center shrink-0">
                        <Phone size={18} className="text-secondary" />
                      </div>
                      <div>
                        <p className="font-medium text-foreground text-sm">WhatsApp</p>
                        <p className="text-muted-foreground text-sm">+243 XXX XXX XXX</p>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Kenya Office */}
                <div>
                  <h3 className="font-heading font-semibold text-primary text-lg mb-4">🇰🇪 Kenya Office</h3>
                  <div className="space-y-4">
                    <div className="flex items-start gap-4">
                      <div className="w-10 h-10 rounded-full gold-gradient flex items-center justify-center shrink-0">
                        <MapPin size={18} className="text-secondary" />
                      </div>
                      <div>
                        <p className="font-medium text-foreground text-sm">Location</p>
                        <p className="text-muted-foreground text-sm">Nairobi, Kenya</p>
                      </div>
                    </div>
                    <div className="flex items-start gap-4">
                      <div className="w-10 h-10 rounded-full gold-gradient flex items-center justify-center shrink-0">
                        <Phone size={18} className="text-secondary" />
                      </div>
                      <div>
                        <p className="font-medium text-foreground text-sm">WhatsApp</p>
                        <p className="text-muted-foreground text-sm">+254 XXX XXX XXX</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </motion.div>

            <motion.div initial={{ opacity: 0, x: 30 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }}>
              <form onSubmit={handleSubmit} className="bg-card rounded-xl p-6 md:p-8 border border-border space-y-5">
                <div>
                  <label className="block text-sm font-medium text-foreground mb-1.5">Full Name</label>
                  <input type="text" required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} className="w-full px-4 py-3 rounded-lg bg-muted border border-border text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Your full name" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-foreground mb-1.5">Email</label>
                  <input type="email" required value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} className="w-full px-4 py-3 rounded-lg bg-muted border border-border text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary" placeholder="your@email.com" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-foreground mb-1.5">Subject</label>
                  <input type="text" required value={form.subject} onChange={(e) => setForm({ ...form, subject: e.target.value })} className="w-full px-4 py-3 rounded-lg bg-muted border border-border text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary" placeholder="e.g., Gold Doré Bar Inquiry" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-foreground mb-1.5">Message</label>
                  <textarea required rows={5} value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })} className="w-full px-4 py-3 rounded-lg bg-muted border border-border text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary resize-none" placeholder="Tell us about your requirements..." />
                </div>
                <button type="submit" className="w-full gold-gradient px-6 py-3 rounded-lg font-semibold text-secondary hover:opacity-90 transition-opacity flex items-center justify-center gap-2">
                  <Send size={18} /> Send Message
                </button>
              </form>
            </motion.div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Contact;
