import React, { useState } from 'react';
import { X, Phone, Mail, CheckCircle2 } from 'lucide-react';

interface ContactModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export const ContactModal: React.FC<ContactModalProps> = ({ isOpen, onClose }) => {
  const [submitted, setSubmitted] = useState(false);
  const [formData, setFormData] = useState({
    name: '',
    phone: '',
    email: '',
    town: '',
    service: 'Computers & Laptops',
    message: ''
  });

  if (!isOpen) return null;

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

  const handleReset = () => {
    setSubmitted(false);
    onClose();
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-fadeIn">
      <div className="bg-white rounded-2xl max-w-lg w-full p-6 sm:p-8 relative shadow-2xl border border-stone-200">
        <button
          onClick={onClose}
          className="absolute top-4 right-4 text-stone-400 hover:text-stone-700 p-2 rounded-full hover:bg-stone-100 transition-colors"
          aria-label="Close modal"
        >
          <X className="w-5 h-5" />
        </button>

        {!submitted ? (
          <div>
            <div className="text-center mb-6">
              <div className="w-12 h-12 bg-[#56a0ab]/10 text-[#56a0ab] rounded-full flex items-center justify-center mx-auto mb-3">
                <Mail className="w-6 h-6" />
              </div>
              <h3 className="font-montserrat font-black text-xl text-[#333333] uppercase">
                Get In Touch Today
              </h3>
              <p className="font-inter font-light text-xs text-stone-500 mt-1">
                Serving all of Southwest Cornwall. Call directly or leave a message!
              </p>
            </div>

            {/* Direct Action Bar */}
            <div className="flex flex-col sm:flex-row gap-3 mb-6">
              <a
                href="tel:+447424244145"
                className="flex-1 inline-flex items-center justify-center gap-2 py-3 px-4 bg-[#56a0ab] text-white rounded-xl font-inter font-normal text-sm hover:bg-[#448490] transition-colors shadow-sm"
              >
                <Phone className="w-4 h-4" />
                <span>Call 07424 244145</span>
              </a>
              <a
                href="mailto:hello@simplysortedtech.com"
                className="flex-1 inline-flex items-center justify-center gap-2 py-3 px-4 bg-[#8b5e3c]/10 text-[#8b5e3c] rounded-xl font-inter font-normal text-sm hover:bg-[#8b5e3c]/20 transition-colors"
              >
                <Mail className="w-4 h-4" />
                <span>Email Directly</span>
              </a>
            </div>

            <div className="relative flex py-2 items-center mb-6">
              <div className="flex-grow border-t border-stone-200"></div>
              <span className="flex-shrink mx-4 font-inter text-xs text-stone-400">or send a callback request</span>
              <div className="flex-grow border-t border-stone-200"></div>
            </div>

            {/* Request Form */}
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label className="block font-inter text-xs font-normal text-stone-600 mb-1">Your Name</label>
                <input
                  type="text"
                  required
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  placeholder="e.g. John Smith"
                  className="w-full px-3.5 py-2.5 rounded-lg border border-stone-200 text-sm font-inter focus:outline-none focus:ring-2 focus:ring-[#56a0ab]/50"
                />
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block font-inter text-xs font-normal text-stone-600 mb-1">Phone Number</label>
                  <input
                    type="tel"
                    required
                    value={formData.phone}
                    onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                    placeholder="07123 456789"
                    className="w-full px-3.5 py-2.5 rounded-lg border border-stone-200 text-sm font-inter focus:outline-none focus:ring-2 focus:ring-[#56a0ab]/50"
                  />
                </div>
                <div>
                  <label className="block font-inter text-xs font-normal text-stone-600 mb-1">Town in Cornwall</label>
                  <input
                    type="text"
                    required
                    value={formData.town}
                    onChange={(e) => setFormData({ ...formData, town: e.target.value })}
                    placeholder="e.g. Penzance, Truro"
                    className="w-full px-3.5 py-2.5 rounded-lg border border-stone-200 text-sm font-inter focus:outline-none focus:ring-2 focus:ring-[#56a0ab]/50"
                  />
                </div>
              </div>

              <div>
                <label className="block font-inter text-xs font-normal text-stone-600 mb-1">Service Needed</label>
                <select
                  value={formData.service}
                  onChange={(e) => setFormData({ ...formData, service: e.target.value })}
                  className="w-full px-3.5 py-2.5 rounded-lg border border-stone-200 text-sm font-inter focus:outline-none focus:ring-2 focus:ring-[#56a0ab]/50 bg-white"
                >
                  <option value="Computers & Laptops">Computers & Laptops</option>
                  <option value="Wi-Fi & Networking">Wi-Fi & Networking</option>
                  <option value="Websites">Websites & Domains</option>
                  <option value="TV & Streaming">TV & Streaming</option>
                  <option value="Printers & Gadgets">Printers & Gadgets</option>
                  <option value="1-to-1 Tech Lesson">1-to-1 Tech Lesson</option>
                  <option value="Other">Other Tech Support</option>
                </select>
              </div>

              <div>
                <label className="block font-inter text-xs font-normal text-stone-600 mb-1">Brief Details</label>
                <textarea
                  rows={3}
                  value={formData.message}
                  onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                  placeholder="Describe what you'd like help with..."
                  className="w-full px-3.5 py-2.5 rounded-lg border border-stone-200 text-sm font-inter focus:outline-none focus:ring-2 focus:ring-[#56a0ab]/50"
                ></textarea>
              </div>

              <button
                type="submit"
                className="w-full py-3 bg-[#56a0ab] hover:bg-[#8b5e3c] text-white rounded-xl font-montserrat font-black text-sm uppercase tracking-wider transition-colors shadow-md cursor-pointer"
              >
                Submit Callback Request
              </button>
            </form>
          </div>
        ) : (
          <div className="text-center py-8 space-y-4">
            <CheckCircle2 className="w-16 h-16 text-emerald-500 mx-auto animate-bounce" />
            <h3 className="font-montserrat font-black text-xl text-[#333333] uppercase">
              Thank You, {formData.name || 'Friend'}!
            </h3>
            <p className="font-inter font-light text-sm text-stone-600 max-w-xs mx-auto">
              Your message has been received. I will call you back shortly on{' '}
              <strong className="font-semibold text-[#333333]">{formData.phone}</strong>.
            </p>
            <button
              onClick={handleReset}
              className="mt-4 px-6 py-2.5 bg-[#56a0ab] text-white rounded-lg font-inter text-xs tracking-wider uppercase"
            >
              Close
            </button>
          </div>
        )}
      </div>
    </div>
  );
};