const Contact = () => {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', email: '', company: '', service: '', message: '' });
  const [status, setStatus] = React.useState('idle');
  const [errorMsg, setErrorMsg] = React.useState('');
  const site = (window.zData && window.zData('site')) || {};

  React.useEffect(() => {
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setVisible(true); }, { threshold: 0.1 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    setErrorMsg('');
    try {
      await window.zSubmitContact(form);
      setStatus('sent');
    } catch (err) {
      setStatus('idle');
      setErrorMsg(err && err.message ? err.message : 'Submission failed. Please try again.');
    }
  };

  const inputStyle = {
    width: '100%', padding: '11px 14px', borderRadius: 8,
    background: '#fff', border: '1.5px solid rgba(0,0,0,0.1)',
    color: '#0f172a', fontFamily: "'DM Sans', sans-serif", fontSize: 15,
    outline: 'none', boxSizing: 'border-box', transition: 'border-color 0.2s',
  };
  const labelStyle = { fontFamily: "'DM Sans', sans-serif", fontSize: 12, fontWeight: 600, color: '#64748b', letterSpacing: '0.05em', display: 'block', marginBottom: 7, textTransform: 'uppercase' };

  return (
    <section id="contact" data-screen-label="05 Contact" ref={ref} style={{ padding: '100px 0', background: '#e8edf5', position: 'relative' }}>
      <div className="inner-wrap" style={{ maxWidth: 1200, margin: '0 auto', padding: '0 32px' }}>
        <div className="contact-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 72, alignItems: 'start' }}>

          {/* Left */}
          <div style={{ opacity: visible ? 1 : 0, transform: visible ? 'translateX(0)' : 'translateX(-24px)', transition: 'all 0.7s ease' }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '5px 14px', borderRadius: 100, background: 'rgba(37,99,235,0.08)', border: '1px solid rgba(37,99,235,0.2)', marginBottom: 20 }}>
              <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, fontWeight: 600, color: '#1d4ed8', letterSpacing: '0.07em' }}>GET IN TOUCH</span>
            </div>
            <h2 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 'clamp(26px, 3vw, 40px)', fontWeight: 700, color: '#0f172a', letterSpacing: '-0.03em', lineHeight: 1.12, margin: '0 0 18px' }}>
              Let's build something remarkable together
            </h2>
            <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 16, color: '#64748b', lineHeight: 1.72, margin: '0 0 40px' }}>
              Tell us about your project and we'll get back within 24 hours with a tailored assessment and proposed approach.
            </p>

            {[
              { label: 'Email', val: site.email || 'hello@ziverse.tech', icon: <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3.5" width="14" height="9" rx="1.5" stroke="#2563eb" strokeWidth="1.4"/><path d="M1 5.5L8 10L15 5.5" stroke="#2563eb" strokeWidth="1.4"/></svg> },
              { label: 'Phone', val: site.phone || '+1 (555) 000-0000', icon: <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 2.5C3 2.5 3.2 2 4 2H5.5L7 5L5.5 6C5.5 6 6.5 8.5 10 10L11 8.5L14 10V11.5C14 12.3 13.5 12.5 13.5 12.5C13.5 12.5 8 13.5 3 2.5Z" stroke="#2563eb" strokeWidth="1.4" strokeLinejoin="round"/></svg> },
              { label: 'Location', val: site.address || 'Remote-first · Global Delivery', icon: <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 14S3 10 3 6.5A5 5 0 0 1 13 6.5C13 10 8 14 8 14Z" stroke="#2563eb" strokeWidth="1.4" strokeLinejoin="round"/><circle cx="8" cy="6.5" r="1.8" stroke="#2563eb" strokeWidth="1.4"/></svg> },
            ].map((item, i) => (
              <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start', marginBottom: 20 }}>
                <div style={{ width: 38, height: 38, borderRadius: 10, background: 'rgba(37,99,235,0.08)', border: '1px solid rgba(37,99,235,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{item.icon}</div>
                <div>
                  <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 600, color: '#94a3b8', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 3 }}>{item.label}</div>
                  <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 15, color: '#1e293b', fontWeight: 500 }}>{item.val}</div>
                </div>
              </div>
            ))}
          </div>

          {/* Right: form */}
          <div style={{ opacity: visible ? 1 : 0, transform: visible ? 'translateX(0)' : 'translateX(24px)', transition: 'all 0.7s ease 0.12s' }}>
            <div style={{ padding: '36px', borderRadius: 18, background: '#fff', border: '1.5px solid rgba(0,0,0,0.07)', boxShadow: '0 8px 32px rgba(0,0,0,0.07)' }}>
              {status === 'sent' ? (
                <div style={{ textAlign: 'center', padding: '40px 20px' }}>
                  <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'rgba(37,99,235,0.1)', border: '1.5px solid rgba(37,99,235,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px' }}>
                    <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M4 11.5L9 16.5L18 6" stroke="#1d4ed8" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  </div>
                  <h3 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 21, fontWeight: 700, color: '#0f172a', margin: '0 0 10px' }}>Message Sent!</h3>
                  <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 15, color: '#64748b', lineHeight: 1.65 }}>Our team will review your project and respond within 24 hours.</p>
                </div>
              ) : (
                <form onSubmit={handleSubmit}>
                  <div className="form-name-row" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14 }}>
                    {[{ id: 'name', label: 'Full Name', placeholder: 'Jane Smith', type: 'text' }, { id: 'email', label: 'Email', placeholder: 'jane@company.com', type: 'email' }].map(f => (
                      <div key={f.id}>
                        <label style={labelStyle}>{f.label}</label>
                        <input required type={f.type} placeholder={f.placeholder} value={form[f.id]}
                          onChange={e => setForm(p => ({ ...p, [f.id]: e.target.value }))}
                          style={inputStyle}
                          onFocus={e => e.target.style.borderColor = '#2563eb'}
                          onBlur={e => e.target.style.borderColor = 'rgba(0,0,0,0.1)'}
                        />
                      </div>
                    ))}
                  </div>
                  <div style={{ marginBottom: 14 }}>
                    <label style={labelStyle}>Company (Optional)</label>
                    <input type="text" placeholder="Your company name" value={form.company}
                      onChange={e => setForm(p => ({ ...p, company: e.target.value }))}
                      style={inputStyle}
                      onFocus={e => e.target.style.borderColor = '#2563eb'}
                      onBlur={e => e.target.style.borderColor = 'rgba(0,0,0,0.1)'}
                    />
                  </div>
                  <div style={{ marginBottom: 14 }}>
                    <label style={labelStyle}>Service Needed</label>
                    <select value={form.service} onChange={e => setForm(p => ({ ...p, service: e.target.value }))}
                      style={{ ...inputStyle, appearance: 'none', cursor: 'pointer' }}
                      onFocus={e => e.target.style.borderColor = '#2563eb'}
                      onBlur={e => e.target.style.borderColor = 'rgba(0,0,0,0.1)'}>
                      <option value="">Select a service...</option>
                      {['Custom Software Development', 'AI & Machine Learning', 'SaaS Platform', 'Blockchain Integration', 'Predictive Analytics', 'Cloud Infrastructure', 'Not sure yet'].map(s => (
                        <option key={s} value={s}>{s}</option>
                      ))}
                    </select>
                  </div>
                  <div style={{ marginBottom: 24 }}>
                    <label style={labelStyle}>Project Brief</label>
                    <textarea required rows={4} placeholder="Tell us about your project, goals, and timeline..." value={form.message}
                      onChange={e => setForm(p => ({ ...p, message: e.target.value }))}
                      style={{ ...inputStyle, resize: 'vertical', minHeight: 96 }}
                      onFocus={e => e.target.style.borderColor = '#2563eb'}
                      onBlur={e => e.target.style.borderColor = 'rgba(0,0,0,0.1)'}
                    />
                  </div>
                  {errorMsg && (
                    <div style={{ marginBottom: 14, padding: '10px 14px', borderRadius: 8, background: 'rgba(220,38,38,0.08)', border: '1px solid rgba(220,38,38,0.25)', color: '#b91c1c', fontFamily: "'DM Sans', sans-serif", fontSize: 13 }}>
                      {errorMsg}
                    </div>
                  )}
                  <button type="submit" disabled={status === 'sending'} style={{
                    width: '100%', padding: '13px', borderRadius: 9,
                    background: 'linear-gradient(135deg, #1d4ed8, #2563eb)',
                    border: 'none', cursor: 'pointer',
                    fontFamily: "'DM Sans', sans-serif", fontSize: 15, fontWeight: 600, color: '#fff',
                    boxShadow: '0 6px 20px rgba(29,78,216,0.3)',
                    transition: 'all 0.2s', opacity: status === 'sending' ? 0.7 : 1,
                  }}
                  onMouseEnter={e => { if (status !== 'sending') { e.currentTarget.style.boxShadow = '0 8px 28px rgba(29,78,216,0.45)'; e.currentTarget.style.transform = 'translateY(-1px)'; }}}
                  onMouseLeave={e => { e.currentTarget.style.boxShadow = '0 6px 20px rgba(29,78,216,0.3)'; e.currentTarget.style.transform = 'translateY(0)'; }}>
                    {status === 'sending' ? 'Sending...' : 'Send Message →'}
                  </button>
                </form>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Contact });