"use client";

import { useState } from "react";
import { Phone, Mail, MapPin, Clock, MessageSquare, Send, Loader2 } from "lucide-react";
import toast from "react-hot-toast";

const contactInfo = [
  { icon: Phone, label: "Phone / WhatsApp", value: "0706 127 075", href: "tel:+254706127075" },
  { icon: Mail, label: "Email", value: "info@protouch.co.ke", href: "mailto:info@protouch.co.ke" },
  { icon: MapPin, label: "Location", value: "Moi Avenue, Nairobi CBD", href: "https://maps.google.com/?q=Moi+Avenue+Nairobi" },
  { icon: Clock, label: "Hours", value: "Mon–Sat: 8:30AM–7PM | Sun: 10AM–5PM", href: null },
];

export default function ContactPage() {
  const [form, setForm] = useState({ name: "", email: "", phone: "", subject: "", message: "" });
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    await new Promise((r) => setTimeout(r, 1000));
    toast.success("Message sent! We'll get back to you within 24 hours.");
    setForm({ name: "", email: "", phone: "", subject: "", message: "" });
    setLoading(false);
  };

  return (
    <div className="max-w-7xl mx-auto px-4 py-12">
      {/* Hero */}
      <div className="text-center mb-12">
        <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-sky-500 to-blue-600 flex items-center justify-center mx-auto mb-4 shadow-lg shadow-sky-200">
          <MessageSquare className="w-8 h-8 text-white" />
        </div>
        <h1 className="text-4xl font-black text-slate-900 mb-3">Get In Touch</h1>
        <p className="text-slate-500 max-w-lg mx-auto">Have a question about a product? Need help choosing the right laptop? Our team is here to help.</p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {/* Info cards */}
        <div className="space-y-4">
          {contactInfo.map(({ icon: Icon, label, value, href }) => (
            <div key={label} className="bg-white rounded-2xl border border-sky-100 p-5 hover:border-sky-300 hover:shadow-md transition-all">
              <div className="flex items-start gap-4">
                <div className="w-11 h-11 rounded-xl bg-sky-50 flex items-center justify-center shrink-0">
                  <Icon className="w-5 h-5 text-sky-600" />
                </div>
                <div>
                  <p className="text-xs font-bold text-slate-500 uppercase tracking-wider">{label}</p>
                  {href ? (
                    <a href={href} className="text-slate-800 font-semibold text-sm hover:text-sky-600 transition-colors mt-1 block">{value}</a>
                  ) : (
                    <p className="text-slate-800 font-semibold text-sm mt-1">{value}</p>
                  )}
                </div>
              </div>
            </div>
          ))}

          {/* WhatsApp */}
          <a href="https://wa.me/254706127075" target="_blank" rel="noopener noreferrer"
            className="flex items-center gap-4 bg-green-500 text-white rounded-2xl p-5 hover:bg-green-600 transition-colors">
            <div className="w-11 h-11 rounded-xl bg-white/20 flex items-center justify-center shrink-0">
              <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z M12 0C5.373 0 0 5.373 0 12c0 2.124.558 4.117 1.534 5.845L0 24l6.335-1.51C8.007 23.46 9.965 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22c-1.885 0-3.656-.491-5.198-1.351l-.372-.214-3.856.919.961-3.735-.237-.385A9.937 9.937 0 012 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z"/>
              </svg>
            </div>
            <div>
              <p className="font-bold text-sm">Chat on WhatsApp</p>
              <p className="text-green-100 text-xs">Usually replies in minutes</p>
            </div>
          </a>
        </div>

        {/* Contact Form */}
        <div className="lg:col-span-2 bg-white rounded-3xl border border-sky-100 p-8 shadow-sm">
          <h2 className="text-xl font-black text-slate-900 mb-6">Send us a Message</h2>
          <form onSubmit={handleSubmit} className="space-y-5">
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              {[
                { k: "name", label: "Full Name", placeholder: "John Mwangi", type: "text" },
                { k: "email", label: "Email Address", placeholder: "john@email.com", type: "email" },
                { k: "phone", label: "Phone Number", placeholder: "0712 345 678", type: "tel" },
                { k: "subject", label: "Subject", placeholder: "Product inquiry...", type: "text" },
              ].map(({ k, label, placeholder, type }) => (
                <div key={k}>
                  <label className="block text-sm font-bold text-slate-700 mb-2">{label}</label>
                  <input type={type} value={form[k as keyof typeof form]} onChange={(e) => setForm((f) => ({ ...f, [k]: e.target.value }))}
                    placeholder={placeholder} required={k !== "phone"}
                    className="w-full px-4 py-3 rounded-xl border-2 border-slate-200 focus:border-sky-400 focus:outline-none text-sm transition-colors" />
                </div>
              ))}
            </div>
            <div>
              <label className="block text-sm font-bold text-slate-700 mb-2">Message</label>
              <textarea value={form.message} onChange={(e) => setForm((f) => ({ ...f, message: e.target.value }))}
                placeholder="Tell us what you're looking for, your budget, or any questions you have..."
                rows={5} required
                className="w-full px-4 py-3 rounded-xl border-2 border-slate-200 focus:border-sky-400 focus:outline-none text-sm transition-colors resize-none" />
            </div>
            <button type="submit" disabled={loading}
              className="w-full flex items-center justify-center gap-2 bg-gradient-to-r from-sky-600 to-sky-500 text-white py-4 rounded-xl font-bold hover:from-sky-700 hover:to-sky-600 transition-all disabled:opacity-50 shadow-lg shadow-sky-200">
              {loading ? <Loader2 className="w-5 h-5 animate-spin" /> : <Send className="w-4 h-4" />}
              {loading ? "Sending..." : "Send Message"}
            </button>
          </form>
        </div>
      </div>

      {/* Map placeholder */}
      <div className="mt-10 rounded-3xl overflow-hidden border border-sky-100 shadow-sm h-64 bg-gradient-to-br from-sky-100 to-blue-100 flex items-center justify-center">
        <div className="text-center">
          <MapPin className="w-10 h-10 text-sky-500 mx-auto mb-2" />
          <p className="text-sky-700 font-bold">Moi Avenue, Nairobi CBD</p>
          <p className="text-sky-500 text-sm">Nairobi, Kenya</p>
          <a href="https://maps.google.com/?q=Moi+Avenue+Nairobi" target="_blank" rel="noopener noreferrer"
            className="mt-3 inline-block text-sky-600 border border-sky-400 px-4 py-2 rounded-lg text-sm font-medium hover:bg-sky-50 transition-colors">
            Open in Google Maps
          </a>
        </div>
      </div>
    </div>
  );
}