// BookDemoModal.jsx — Full working "Book a Demo" modal form
const BookDemoModal = ({ isOpen, onClose }) => {
  const [form, setForm] = React.useState({ name: '', phone: '', email: '', company: '' });
  const [countryCode, setCountryCode] = React.useState('+91');
  const [status, setStatus] = React.useState('idle'); // idle | submitting | success | error
  const [errors, setErrors] = React.useState({});
  const overlayRef = React.useRef(null);

  // Country codes list
  const countryCodes = [
    { code: '+91', flag: '🇮🇳', label: 'India' },
    { code: '+1', flag: '🇺🇸', label: 'US' },
    { code: '+44', flag: '🇬🇧', label: 'UK' },
    { code: '+971', flag: '🇦🇪', label: 'UAE' },
    { code: '+65', flag: '🇸🇬', label: 'Singapore' },
    { code: '+61', flag: '🇦🇺', label: 'Australia' },
    { code: '+49', flag: '🇩🇪', label: 'Germany' },
    { code: '+33', flag: '🇫🇷', label: 'France' },
  ];

  const validate = () => {
    const errs = {};
    if (!form.name.trim()) errs.name = 'Name is required';
    if (!form.phone.trim()) errs.phone = 'Phone number is required';
    else if (!/^\d{7,15}$/.test(form.phone.replace(/[\s-]/g, ''))) errs.phone = 'Enter a valid phone number';
    if (!form.email.trim()) errs.email = 'Email is required';
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) errs.email = 'Enter a valid email';
    if (!form.company.trim()) errs.company = 'Company name is required';
    return errs;
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const errs = validate();
    setErrors(errs);
    if (Object.keys(errs).length > 0) return;

    setStatus('submitting');
    
    try {
      const response = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          access_key: '5a8b0384-eafb-49d9-8569-8fc1a8d2d115',
          subject: '🎯 New Demo Request — intervieHire',
          from_name: 'intervieHire Website',
          name: form.name,
          email: form.email,
          phone: `${countryCode} ${form.phone}`,
          company: form.company,
          message: `New demo booking request:\n\nName: ${form.name}\nEmail: ${form.email}\nPhone: ${countryCode} ${form.phone}\nCompany: ${form.company}\nSubmitted: ${new Date().toLocaleString()}`,
        }),
      });
      const data = await response.json();
      
      if (data.success) {
        setStatus('success');
        setTimeout(() => {
          setStatus('idle');
          setForm({ name: '', phone: '', email: '', company: '' });
          onClose();
        }, 2500);
      } else {
        setStatus('error');
        setTimeout(() => setStatus('idle'), 3000);
      }
    } catch (err) {
      setStatus('error');
      setTimeout(() => setStatus('idle'), 3000);
    }
  };

  // Close on overlay click
  const handleOverlayClick = (e) => {
    if (e.target === overlayRef.current) onClose();
  };

  // Close on Escape
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    if (isOpen) window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [isOpen]);

  // Prevent body scroll
  React.useEffect(() => {
    if (isOpen) document.body.style.overflow = 'hidden';
    else document.body.style.overflow = '';
    return () => { document.body.style.overflow = ''; };
  }, [isOpen]);

  if (!isOpen) return null;

  const inputStyle = (field) => ({
    fontFamily: 'Outfit, sans-serif', fontSize: 14,
    background: 'rgba(255,255,255,0.05)',
    border: `1px solid ${errors[field] ? '#ff4444' : 'rgba(201,168,76,0.2)'}`,
    borderRadius: 10, padding: '14px 18px', color: '#F5F0E8', outline: 'none',
    width: '100%', transition: 'border-color 0.2s, box-shadow 0.2s',
  });

  const labelStyle = {
    fontFamily: 'Outfit, sans-serif', fontSize: 13, fontWeight: 500,
    color: '#888880', marginBottom: 8, display: 'block',
  };

  return (
    <div
      ref={overlayRef}
      onClick={handleOverlayClick}
      style={{
        position: 'fixed', inset: 0, zIndex: 9999,
        background: 'rgba(0,0,0,0.75)', backdropFilter: 'blur(8px)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 20,
        animation: 'fadeIn 0.3s ease',
      }}
    >
      <div style={{
        background: '#111111', border: '1px solid rgba(201,168,76,0.15)',
        borderRadius: 20, padding: '40px 36px', maxWidth: 440, width: '100%',
        position: 'relative', maxHeight: '90vh', overflowY: 'auto',
        animation: 'slideUp 0.4s ease',
      }}>
        {/* Close button */}
        <button
          onClick={onClose}
          style={{
            position: 'absolute', top: 16, right: 16,
            background: 'none', border: 'none', color: '#888880',
            fontSize: 24, cursor: 'pointer', lineHeight: 1,
            transition: 'color 0.2s',
          }}
          onMouseEnter={e => e.currentTarget.style.color = '#F5F0E8'}
          onMouseLeave={e => e.currentTarget.style.color = '#888880'}
          aria-label="Close"
        >×</button>

        {/* Header */}
        <h2 style={{
          fontFamily: 'Space Grotesk, sans-serif', fontSize: 28, fontWeight: 700,
          color: '#F5F0E8', letterSpacing: '-0.02em', marginBottom: 8,
        }}>Book a Demo</h2>
        <p style={{
          fontFamily: 'Outfit, sans-serif', fontSize: 14, color: '#888880',
          lineHeight: 1.5, marginBottom: 32,
        }}>Fill your details here</p>

        {status === 'success' ? (
          <div style={{ textAlign: 'center', padding: '40px 0' }}>
            <div style={{ fontSize: 48, marginBottom: 16 }}>✓</div>
            <p style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 20, fontWeight: 700, color: '#C9A84C', marginBottom: 8 }}>
              Demo Booked!
            </p>
            <p style={{ fontFamily: 'Outfit, sans-serif', fontSize: 14, color: '#888880' }}>
              We'll reach out to you within 24 hours.
            </p>
          </div>
        ) : status === 'error' ? (
          <div style={{ textAlign: 'center', padding: '40px 0' }}>
            <div style={{ fontSize: 48, marginBottom: 16 }}>⚠️</div>
            <p style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 20, fontWeight: 700, color: '#ff4444', marginBottom: 8 }}>
              Something went wrong
            </p>
            <p style={{ fontFamily: 'Outfit, sans-serif', fontSize: 14, color: '#888880', marginBottom: 20 }}>
              Please try again or email us at interviehire@gmail.com
            </p>
            <button onClick={() => setStatus('idle')} style={{
              fontFamily: 'Outfit, sans-serif', fontSize: 14, fontWeight: 500,
              background: '#C9A84C', color: '#0A0A0A', border: 'none',
              borderRadius: 8, padding: '10px 24px', cursor: 'pointer',
            }}>Try Again</button>
          </div>
        ) : (
          <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            {/* Name */}
            <div>
              <input
                type="text"
                placeholder="Your Name"
                value={form.name}
                onChange={e => { setForm({...form, name: e.target.value}); setErrors({...errors, name: ''}); }}
                onFocus={e => { e.target.style.borderColor = 'rgba(201,168,76,0.5)'; e.target.style.boxShadow = '0 0 0 3px rgba(201,168,76,0.08)'; }}
                onBlur={e => { e.target.style.borderColor = errors.name ? '#ff4444' : 'rgba(201,168,76,0.2)'; e.target.style.boxShadow = 'none'; }}
                style={inputStyle('name')}
              />
              {errors.name && <span style={{ fontFamily: 'Outfit, sans-serif', fontSize: 12, color: '#ff4444', marginTop: 4, display: 'block' }}>{errors.name}</span>}
            </div>

            {/* Phone with country code */}
            <div>
              <div style={{ display: 'flex', gap: 8 }}>
                <select
                  value={countryCode}
                  onChange={e => setCountryCode(e.target.value)}
                  style={{
                    fontFamily: 'Outfit, sans-serif', fontSize: 14,
                    background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(201,168,76,0.2)',
                    borderRadius: 10, padding: '14px 8px', color: '#F5F0E8', outline: 'none',
                    width: 100, cursor: 'pointer', appearance: 'none',
                    backgroundImage: 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'12\' height=\'12\' viewBox=\'0 0 12 12\'%3E%3Cpath d=\'M3 5l3 3 3-3\' stroke=\'%23888880\' fill=\'none\' stroke-width=\'1.5\'/%3E%3C/svg%3E")',
                    backgroundRepeat: 'no-repeat', backgroundPosition: 'right 8px center',
                  }}
                >
                  {countryCodes.map(c => (
                    <option key={c.code} value={c.code}>{c.flag} {c.code}</option>
                  ))}
                </select>
                <input
                  type="tel"
                  placeholder="Phone number"
                  value={form.phone}
                  onChange={e => { setForm({...form, phone: e.target.value.replace(/[^\d\s-]/g, '')}); setErrors({...errors, phone: ''}); }}
                  onFocus={e => { e.target.style.borderColor = 'rgba(201,168,76,0.5)'; e.target.style.boxShadow = '0 0 0 3px rgba(201,168,76,0.08)'; }}
                  onBlur={e => { e.target.style.borderColor = errors.phone ? '#ff4444' : 'rgba(201,168,76,0.2)'; e.target.style.boxShadow = 'none'; }}
                  style={{ ...inputStyle('phone'), flex: 1 }}
                />
              </div>
              {errors.phone && <span style={{ fontFamily: 'Outfit, sans-serif', fontSize: 12, color: '#ff4444', marginTop: 4, display: 'block' }}>{errors.phone}</span>}
            </div>

            {/* Email */}
            <div>
              <input
                type="email"
                placeholder="Email address"
                value={form.email}
                onChange={e => { setForm({...form, email: e.target.value}); setErrors({...errors, email: ''}); }}
                onFocus={e => { e.target.style.borderColor = 'rgba(201,168,76,0.5)'; e.target.style.boxShadow = '0 0 0 3px rgba(201,168,76,0.08)'; }}
                onBlur={e => { e.target.style.borderColor = errors.email ? '#ff4444' : 'rgba(201,168,76,0.2)'; e.target.style.boxShadow = 'none'; }}
                style={inputStyle('email')}
              />
              {errors.email && <span style={{ fontFamily: 'Outfit, sans-serif', fontSize: 12, color: '#ff4444', marginTop: 4, display: 'block' }}>{errors.email}</span>}
            </div>

            {/* Company */}
            <div>
              <input
                type="text"
                placeholder="Your Company Name"
                value={form.company}
                onChange={e => { setForm({...form, company: e.target.value}); setErrors({...errors, company: ''}); }}
                onFocus={e => { e.target.style.borderColor = 'rgba(201,168,76,0.5)'; e.target.style.boxShadow = '0 0 0 3px rgba(201,168,76,0.08)'; }}
                onBlur={e => { e.target.style.borderColor = errors.company ? '#ff4444' : 'rgba(201,168,76,0.2)'; e.target.style.boxShadow = 'none'; }}
                style={inputStyle('company')}
              />
              {errors.company && <span style={{ fontFamily: 'Outfit, sans-serif', fontSize: 12, color: '#ff4444', marginTop: 4, display: 'block' }}>{errors.company}</span>}
            </div>

            {/* Submit */}
            <button
              type="submit"
              disabled={status === 'submitting'}
              style={{
                fontFamily: 'Outfit, sans-serif', fontSize: 16, fontWeight: 600,
                background: '#C9A84C', color: '#0A0A0A', border: 'none',
                borderRadius: 10, padding: '16px 28px', cursor: status === 'submitting' ? 'wait' : 'pointer',
                transition: 'filter 0.2s, transform 0.15s',
                opacity: status === 'submitting' ? 0.7 : 1,
                marginTop: 4,
              }}
              onMouseEnter={e => { if (status !== 'submitting') { e.currentTarget.style.filter = 'brightness(1.12)'; e.currentTarget.style.transform = 'translateY(-1px)'; }}}
              onMouseLeave={e => { e.currentTarget.style.filter = 'none'; e.currentTarget.style.transform = 'translateY(0)'; }}
            >
              {status === 'submitting' ? 'Submitting...' : 'Submit'}
            </button>
          </form>
        )}
      </div>

      <style>{`
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
      `}</style>
    </div>
  );
};

Object.assign(window, { BookDemoModal });