// Contact.jsx: Orbital Aerial Solutions
const OASContact = () => {
  const [form, setForm] = React.useState({ name:'', company:'', service:'', location:'', message:'' });
  const [submitted, setSubmitted] = React.useState(false);

  const handleChange = e => setForm(f => ({ ...f, [e.target.name]: e.target.value }));
  const handleSubmit = e => { e.preventDefault(); setSubmitted(true); };

  const inputStyle = { background:'var(--bg-input)', border:'1px solid var(--border)', borderRadius:4, color:'var(--fg-1)', fontFamily:'var(--font-body)', fontSize:14, padding:'11px 14px', outline:'none', width:'100%', transition:'border-color 150ms' };
  const labelStyle = { fontFamily:'var(--font-body)', fontSize:11, fontWeight:600, color:'var(--fg-3)', letterSpacing:'0.04em', display:'block', marginBottom:5 };

  return (
    <section id="contact" style={{ padding:'96px 32px', background:'var(--bg-page)', borderTop:'1px solid var(--border)' }}>
      <div className="contact-grid" style={{ maxWidth:1100, margin:'0 auto', alignItems:'start' }}>
        <div className="scroll-reveal reveal-contact-left">
          <div style={{ fontFamily:'var(--font-body)', fontSize:11, fontWeight:600, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--cyan)', marginBottom:14, display:'flex', alignItems:'center', gap:8 }}>
            <span style={{ display:'inline-block', width:20, height:1, background:'var(--cyan)', opacity:0.6 }}></span>
            Contact
          </div>
          <h2 style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:'clamp(26px,3.5vw,40px)', letterSpacing:'-0.025em', color:'var(--fg-1)', lineHeight:1.1, marginBottom:16 }}>
            Let's talk about your site.
          </h2>
          <p style={{ fontFamily:'var(--font-body)', fontSize:15, color:'var(--fg-2)', lineHeight:1.7, marginBottom:40 }}>
            Share your project details and we'll respond within one business day with pricing and availability.
          </p>

          <div style={{ display:'flex', flexDirection:'column', gap:20 }}>
            {[
              { icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#00B8E6" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>, label:'Email', val:'ops@orbitalaerial.com' },
              { icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#00B8E6" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>, label:'Coverage', val:'Strategic Nationwide Deployment' },
            ].map(({ icon, label, val }) => (
              <div key={label} style={{ display:'flex', gap:14, alignItems:'flex-start' }}>
                <div style={{ width:36, height:36, background:'rgba(0,184,230,0.07)', border:'1px solid rgba(0,184,230,0.12)', borderRadius:5, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, marginTop:2 }}>{icon}</div>
                <div>
                  <div style={{ fontFamily:'var(--font-body)', fontSize:11, fontWeight:600, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--fg-3)', marginBottom:2 }}>{label}</div>
                  <div style={{ fontFamily:'var(--font-body)', fontSize:14, color:'var(--fg-1)' }}>{val}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {submitted ? (
          <div className="scroll-reveal reveal-contact-right" style={{ background:'var(--bg-surface)', border:'1px solid rgba(0,184,230,0.3)', borderRadius:6, padding:'48px 40px', textAlign:'center' }}>
            <div style={{ width:52, height:52, background:'rgba(0,184,230,0.1)', border:'1px solid rgba(0,184,230,0.3)', borderRadius:'50%', display:'flex', alignItems:'center', justifyContent:'center', margin:'0 auto 20px' }}>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#00B8E6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
            <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:22, color:'var(--fg-1)', marginBottom:10 }}>Request received.</div>
            <div style={{ fontFamily:'var(--font-body)', fontSize:14, color:'var(--fg-2)', lineHeight:1.65 }}>We'll review your project details and respond within one business day with availability and pricing.</div>
          </div>
        ) : (
          <form className="scroll-reveal reveal-contact-right" onSubmit={handleSubmit} style={{ background:'var(--bg-surface)', border:'1px solid var(--border)', borderRadius:6, padding:'32px 32px', display:'flex', flexDirection:'column', gap:16 }}>
            <div className="form-row">
              <div><label htmlFor="contact-name" style={labelStyle}>Full Name</label><input id="contact-name" required name="name" value={form.name} onChange={handleChange} placeholder="Jane Smith" style={inputStyle} onFocus={e => e.target.style.borderColor='var(--cyan)'} onBlur={e => e.target.style.borderColor='var(--border)'}/></div>
              <div><label htmlFor="contact-company" style={labelStyle}>Company</label><input id="contact-company" name="company" value={form.company} onChange={handleChange} placeholder="Granite Ridge Quarry" style={inputStyle} onFocus={e => e.target.style.borderColor='var(--cyan)'} onBlur={e => e.target.style.borderColor='var(--border)'}/></div>
            </div>
            <div className="form-row">
              <div>
                <label htmlFor="contact-service" style={labelStyle}>Service Type</label>
                <select id="contact-service" required name="service" aria-label="Service Type" value={form.service} onChange={handleChange} style={{ ...inputStyle, cursor:'pointer', WebkitAppearance:'none' }} onFocus={e => e.target.style.borderColor='var(--cyan)'} onBlur={e => e.target.style.borderColor='var(--border)'}>
                  <option value="">Select a service…</option>
                  <option>Stockpile Volumetric Reporting</option>
                  <option>Roof & Infrastructure Inspections</option>
                  <option>Autonomous 3D Reality Capture</option>
                  <option>High Resolution Thermography</option>
                  <option>Not sure, I need guidance</option>
                </select>
              </div>
              <div><label htmlFor="contact-location" style={labelStyle}>Site Location</label><input id="contact-location" required name="location" value={form.location} onChange={handleChange} placeholder="Austin, TX" style={inputStyle} onFocus={e => e.target.style.borderColor='var(--cyan)'} onBlur={e => e.target.style.borderColor='var(--border)'}/></div>
            </div>
            <div>
              <label htmlFor="contact-message" style={labelStyle}>Project Details</label>
              <textarea id="contact-message" name="message" value={form.message} onChange={handleChange} placeholder="Tell us about your site, size, timeline, and what deliverables you need." rows={5} style={{ ...inputStyle, resize:'vertical', minHeight:120 }} onFocus={e => e.target.style.borderColor='var(--cyan)'} onBlur={e => e.target.style.borderColor='var(--border)'}/>
              <div style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--fg-3)', marginTop:5 }}>We respond within one business day.</div>
            </div>
            <button type="submit" style={{ background:'var(--cyan)', color:'var(--fg-on-accent)', fontFamily:'var(--font-body)', fontSize:15, fontWeight:600, padding:'13px 28px', borderRadius:4, border:'none', cursor:'pointer', transition:'all 200ms var(--ease)', width:'100%', letterSpacing:'-0.01em' }}
              onMouseEnter={e => { e.currentTarget.style.background='var(--cyan-400)'; e.currentTarget.style.boxShadow='0 0 24px rgba(0,184,230,0.3)'; }}
              onMouseLeave={e => { e.currentTarget.style.background='var(--cyan)'; e.currentTarget.style.boxShadow='none'; }}>
              Send Request
            </button>
          </form>
        )}
      </div>
    </section>
  );
};
Object.assign(window, { OASContact });