import { useState } from "react";
import { MessageSquare } from "lucide-react";

export function QuickContact() {
  const [open, setOpen] = useState(false);
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const subject = encodeURIComponent(`Quick Contact from ${name}`);
    const body = encodeURIComponent(`${message}\n\nFrom: ${name}\nEmail: ${email}`);
    window.open(`mailto:sales@promistcool.com?subject=${subject}&body=${body}`, "_blank");
    setOpen(false);
    setName("");
    setEmail("");
    setMessage("");
  };

  return (
    <>
      <button
        onClick={() => setOpen(!open)}
        className="fixed bottom-6 left-6 z-50 bg-brand-blue text-white h-12 w-12 rounded-full shadow-lg flex items-center justify-center hover:opacity-90 transition-opacity"
        aria-label="Quick contact"
      >
        <MessageSquare className="h-5 w-5" />
      </button>

      {open && (
        <div className="fixed bottom-20 left-6 z-50 w-80 bg-white rounded-xl shadow-2xl border p-5">
          <h3 className="font-display text-lg font-bold mb-3">Quick Contact</h3>
          <form onSubmit={handleSubmit} className="space-y-3">
            <input
              type="text"
              placeholder="Name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              required
              className="border rounded-lg px-3 py-2 w-full text-sm"
            />
            <input
              type="email"
              placeholder="Email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              className="border rounded-lg px-3 py-2 w-full text-sm"
            />
            <textarea
              placeholder="Message"
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              required
              rows={3}
              className="border rounded-lg px-3 py-2 w-full text-sm resize-none"
            />
            <button
              type="submit"
              className="bg-brand-red text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90 w-full"
            >
              Send Message
            </button>
          </form>
        </div>
      )}
    </>
  );
}
