// ContactSection.jsx — Working "Didn't find your Question?" contact form
const ContactSection = () => {
  const [form, setForm] = React.useState({ email: '', name: '', phone: '', question: '' });
  const [countryCode, setCountryCode] = React.useState('+91');
  const [status, setStatus] = React.useState('idle'); // idle | submitting | success
  const [errors, setErrors] = React.useState({});

  const countryCodes = [
    { code: '+91', flag: '🇮🇳' }, { code: '+1', flag: '🇺🇸' },
    { code: '+44', flag: '🇬🇧' }, { code: '+971', flag: '🇦🇪' },
    { code: '+65', flag: '🇸🇬' }, { code: '+61', flag: '🇦🇺' },
  ];

  const validate = () => {
    const errs = {};
    if (!form.email.trim()) errs.email = 'Required';
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) errs.email = 'Invalid email';
    if (!form.name.trim()) errs.name = 'Required';
    if (!form.question.trim()) errs.question = 'Required';
    return errs;
  };

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

    setStatus('submitting');
    await new Promise(r => setTimeout(r, 1200));

    // Store the inquiry
    const inquiries = JSON.parse(localStorage.getItem('intervieHire_inquiries') || '[]');
    inquiries.push({
      ...form,
      phone: form.phone ? `${countryCode} ${form.phone}` : '',
      timestamp: new Date().toISOString(),
      type: 'contact_inquiry',
    });
    localStorage.setItem('intervieHire_inquiries', JSON.stringify(inquiries));

    setStatus('success');
    setTimeout(() => {
      setStatus('idle');
      setForm({ email: '', name: '', phone: '', question: '' });
    }, 3000);
  };

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

  return (
    <section id="contact-section" style={{ background: '#0A0A0A', padding: '100px 48px', position: 'relative' }}>
      <div style={{ maxWidth: 560, margin: '0 auto' }}>
        <RevealCard delay={0}>
          <h2 style={{
            fontFamily: 'Space Grotesk, sans-serif', fontSize: 'clamp(1.8rem, 4vw, 2.5rem)',
            fontWeight: 700, color: '#F5F0E8', letterSpacing: '-0.02em', lineHeight: 1.15, marginBottom: 16,
          }}>
            Didn't find your Question?
          </h2>
          <p style={{
            fontFamily: 'Outfit, sans-serif', fontSize: 15, color: '#888880',
            lineHeight: 1.6, marginBottom: 40,
          }}>
            We're here to help. Drop your question below and our team will get back to you as soon as possible.
          </p>
        </RevealCard>

        {status === 'success' ? (
          <RevealCard delay={0}>
            <div style={{
              textAlign: 'center', padding: '48px 24px',
              background: 'rgba(201,168,76,0.05)', border: '1px solid rgba(201,168,76,0.15)',
              borderRadius: 16,
            }}>
              <div style={{ fontSize: 48, marginBottom: 16 }}>✨</div>
              <p style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 20, fontWeight: 700, color: '#C9A84C', marginBottom: 8 }}>
                Question Sent!
              </p>
              <p style={{ fontFamily: 'Outfit, sans-serif', fontSize: 14, color: '#888880' }}>
                We'll get back to you shortly.
              </p>
            </div>
          </RevealCard>
        ) : (
          <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <RevealCard delay={0.05}>
              <div>
                <label style={{ fontFamily: 'Outfit, sans-serif', fontSize: 14, fontWeight: 600, color: '#F5F0E8', marginBottom: 8, display: 'block' }}>
                  Drop your email below, Let's Connect!
                </label>
                <input
                  type="email"
                  placeholder="Type your mail here"
                  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.06)'; }}
                  onBlur={e => { e.target.style.borderColor = errors.email ? '#ff4444' : 'rgba(201,168,76,0.15)'; e.target.style.boxShadow = 'none'; }}
                  style={inputStyle('email')}
                />
                {errors.email && <span style={{ fontFamily: 'Outfit', fontSize: 11, color: '#ff4444', marginTop: 3, display: 'block' }}>{errors.email}</span>}
              </div>
            </RevealCard>

            <RevealCard delay={0.1}>
              <div>
                <label style={{ fontFamily: 'Outfit, sans-serif', fontSize: 14, fontWeight: 600, color: '#F5F0E8', marginBottom: 8, display: 'block' }}>
                  First Name
                </label>
                <input
                  type="text"
                  placeholder="Type your name here"
                  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.06)'; }}
                  onBlur={e => { e.target.style.borderColor = errors.name ? '#ff4444' : 'rgba(201,168,76,0.15)'; e.target.style.boxShadow = 'none'; }}
                  style={inputStyle('name')}
                />
                {errors.name && <span style={{ fontFamily: 'Outfit', fontSize: 11, color: '#ff4444', marginTop: 3, display: 'block' }}>{errors.name}</span>}
              </div>
            </RevealCard>

            <RevealCard delay={0.15}>
              <div>
                <label style={{ fontFamily: 'Outfit, sans-serif', fontSize: 14, fontWeight: 600, color: '#F5F0E8', marginBottom: 8, display: 'block' }}>
                  Phone Number
                </label>
                <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.04)', border: '1px solid rgba(201,168,76,0.15)',
                      borderRadius: 10, padding: '14px 8px', color: '#F5F0E8', outline: 'none',
                      width: 95, cursor: 'pointer', appearance: 'none',
                      backgroundImage: 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'10\' height=\'10\' viewBox=\'0 0 10 10\'%3E%3Cpath d=\'M2.5 4l2.5 2.5 2.5-2.5\' stroke=\'%23888880\' fill=\'none\' stroke-width=\'1.2\'/%3E%3C/svg%3E")',
                      backgroundRepeat: 'no-repeat', backgroundPosition: 'right 6px 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, '')})}
                    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.06)'; }}
                    onBlur={e => { e.target.style.borderColor = 'rgba(201,168,76,0.15)'; e.target.style.boxShadow = 'none'; }}
                    style={{ ...inputStyle('phone'), flex: 1 }}
                  />
                </div>
              </div>
            </RevealCard>

            <RevealCard delay={0.2}>
              <div>
                <label style={{ fontFamily: 'Outfit, sans-serif', fontSize: 14, fontWeight: 600, color: '#F5F0E8', marginBottom: 8, display: 'block' }}>
                  Your Question
                </label>
                <textarea
                  placeholder="Type your question here"
                  value={form.question}
                  onChange={e => { setForm({...form, question: e.target.value}); setErrors({...errors, question: ''}); }}
                  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.06)'; }}
                  onBlur={e => { e.target.style.borderColor = errors.question ? '#ff4444' : 'rgba(201,168,76,0.15)'; e.target.style.boxShadow = 'none'; }}
                  rows={3}
                  style={{ ...inputStyle('question'), resize: 'vertical', minHeight: 80 }}
                />
                {errors.question && <span style={{ fontFamily: 'Outfit', fontSize: 11, color: '#ff4444', marginTop: 3, display: 'block' }}>{errors.question}</span>}
              </div>
            </RevealCard>

            <RevealCard delay={0.25}>
              <button
                type="submit"
                disabled={status === 'submitting'}
                style={{
                  fontFamily: 'Outfit, sans-serif', fontSize: 15, fontWeight: 600,
                  background: '#C9A84C', color: '#0A0A0A', border: 'none',
                  borderRadius: 10, padding: '14px 32px', cursor: status === 'submitting' ? 'wait' : 'pointer',
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  transition: 'filter 0.2s, transform 0.15s',
                  opacity: status === 'submitting' ? 0.7 : 1,
                }}
                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' ? 'Sending...' : 'Ask Away'}
                {status !== 'submitting' && <span style={{ fontSize: 16 }}>→</span>}
              </button>
            </RevealCard>
          </form>
        )}
      </div>
    </section>
  );
};

Object.assign(window, { ContactSection });