// Contact.jsx — Contact page with enquiry form

const { useState } = React;
const { Link } = window.ReactRouterDOM;

function ContactPage() {
  const [form, setForm] = useState({ name: '', company: '', phone: '', product: '', state: '', message: '' });
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [focused, setFocused] = useState(null);

  const handleChange = (e) => setForm({ ...form, [e.target.name]: e.target.value });
  const handleSubmit = (e) => {
    e.preventDefault();
    setSubmitting(true);
    setTimeout(() => {setSubmitting(false);setSubmitted(true);}, 1400);
  };

  const inputStyle = (name) => ({
    width: '100%', padding: '13px 16px', borderRadius: 10,
    background: 'rgba(255,255,255,0.06)',
    border: `1.5px solid ${focused === name ? '#264A31' : 'rgba(240,237,232,0.12)'}`,
    color: '#F0EDE8', fontFamily: 'Inter, sans-serif', fontSize: 14,
    outline: 'none', transition: 'border-color 0.2s ease',
    boxSizing: 'border-box'
  });

  const labelStyle = { color: 'rgba(240,237,232,0.6)', fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 600, letterSpacing: '0.08em', marginBottom: 7, display: 'block' };

  return (
    <div style={{ minHeight: '100vh', background: '#1A1A1A', position: 'relative', overflow: 'hidden' }}>
      <window.MolecularCanvas style={{ opacity: 0.35 }} />

      {/* Gradient overlays */}
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(135deg, rgba(51,51,51,0.6) 0%, transparent 60%)', zIndex: 1, pointerEvents: 'none' }} />

      <div style={{ position: 'relative', zIndex: 2, maxWidth: 1200, margin: '0 auto', padding: '120px 2rem 80px' }}>
        {/* Breadcrumb */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 48 }}>
          <Link to="/" style={{ color: 'rgba(240,237,232,0.35)', fontFamily: 'Inter, sans-serif', fontSize: 13, textDecoration: 'none' }}>Home</Link>
          <span style={{ color: 'rgba(240,237,232,0.25)' }}>›</span>
          <span style={{ color: 'rgba(240,237,232,0.6)', fontFamily: 'Inter, sans-serif', fontSize: 13 }}>Contact</span>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(320px,1fr))', gap: 64, alignItems: 'start' }}>
          {/* Left: Contact Info */}
          <div>
            <h1 style={{ color: '#F0EDE8', fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 'clamp(2rem,4vw,3rem)', margin: '0 0 12px', lineHeight: 1.1 }}>Get in Touch</h1>
            <p style={{ color: 'rgba(240,237,232,0.55)', fontFamily: 'Inter, sans-serif', fontSize: 16, lineHeight: 1.75, margin: '0 0 40px', maxWidth: 400 }}>
              Our agronomist team is ready to help you choose the right products for your crops and conditions.
            </p>

            {/* Contact items */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 20, marginBottom: 36 }}>
              {[
              { icon: 'mail', label: 'Email', value: 'info@crovistaagro.com', href: 'mailto:info@crovistaagro.com' },
              { icon: 'phone', label: 'Phone', value: '+91 86998 60146', href: 'tel:+918699860146' },
              { icon: 'clock', label: 'Business Hours', value: 'Mon–Sat, 9:00 AM – 6:00 PM IST', href: null },
              { icon: 'map', label: 'Location', value: 'SCO-2, Rehari Complex, Jammu, J&K 180005, India', href: null }].
              map((item) =>
              <div key={item.label} style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
                  <div style={{ width: 38, height: 38, borderRadius: '50%', background: 'rgba(38,74,49,0.15)', border: '1px solid #EEF5F14D', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <ContactIcon type={item.icon} />
                  </div>
                  <div>
                    <div style={{ color: 'rgba(240,237,232,0.4)', fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: '0.1em', marginBottom: 3 }}>{item.label.toUpperCase()}</div>
                    {item.href ?
                  <a href={item.href} style={{ color: '#F0EDE8', fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500, textDecoration: 'none' }}>{item.value}</a> :
                  <span style={{ color: '#F0EDE8', fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500 }}>{item.value}</span>
                  }
                  </div>
                </div>
              )}
            </div>

            {/* WhatsApp CTA */}
            <a href="https://wa.me/918699860146" target="_blank" rel="noopener noreferrer" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              background: '#264A31', color: '#fff', padding: '14px 28px',
              borderRadius: 999, fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 15,
              textDecoration: 'none', boxShadow: '0 4px 20px rgba(38,74,49,0.35)',
              transition: 'all 0.25s ease'
            }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
              </svg>
              WhatsApp Us Now
            </a>
          </div>

          {/* Right: Form */}
          <div style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(38,74,49,0.2)', borderRadius: 20, padding: '40px 36px', backdropFilter: 'blur(12px)' }}>
            {!submitted ?
            <>
                <h3 style={{ color: '#F0EDE8', fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 22, margin: '0 0 28px' }}>
                  Send an Enquiry
                </h3>
                <form onSubmit={handleSubmit}>
                  <div className="cv-form-row-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 16 }}>
                    <div>
                      <label style={labelStyle}>Full Name *</label>
                      <input name="name" required value={form.name} onChange={handleChange}
                    onFocus={() => setFocused('name')} onBlur={() => setFocused(null)}
                    placeholder="Your name" style={inputStyle('name')} />
                    </div>
                    <div>
                      <label style={labelStyle}>Company / Farm</label>
                      <input name="company" value={form.company} onChange={handleChange}
                    onFocus={() => setFocused('company')} onBlur={() => setFocused(null)}
                    placeholder="Optional" style={inputStyle('company')} />
                    </div>
                  </div>

                  <div style={{ marginBottom: 16 }}>
                    <label style={labelStyle}>Phone Number *</label>
                    <input name="phone" required type="tel" value={form.phone} onChange={handleChange}
                  onFocus={() => setFocused('phone')} onBlur={() => setFocused(null)}
                  placeholder="+91 XXXXX XXXXX" style={inputStyle('phone')} />
                  </div>

                  <div className="cv-form-row-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 16 }}>
                    <div>
                      <label style={labelStyle}>Product of Interest</label>
                      <select name="product" value={form.product} onChange={handleChange}
                    onFocus={() => setFocused('product')} onBlur={() => setFocused(null)}
                    style={{ ...inputStyle('product'), appearance: 'none' }}>
                        <option value="" style={{ background: '#333333' }}>Select product</option>
                        {window.PRODUCTS.map((p) => <option key={p.id} value={p.id} style={{ background: '#333333' }}>{p.name}</option>)}
                        <option value="other" style={{ background: '#333333' }}>Other</option>
                      </select>
                    </div>
                    <div>
                      <label style={labelStyle}>State / Region *</label>
                      <select name="state" required value={form.state} onChange={handleChange}
                    onFocus={() => setFocused('state')} onBlur={() => setFocused(null)}
                    style={{ ...inputStyle('state'), appearance: 'none' }}>
                        <option value="" style={{ background: '#333333' }}>Select state</option>
                        {window.INDIAN_STATES.map((s) => <option key={s} value={s} style={{ background: '#333333' }}>{s}</option>)}
                      </select>
                    </div>
                  </div>

                  <div style={{ marginBottom: 24 }}>
                    <label style={labelStyle}>Message</label>
                    <textarea name="message" rows={4} value={form.message} onChange={handleChange}
                  onFocus={() => setFocused('message')} onBlur={() => setFocused(null)}
                  placeholder="Tell us about your crops and what you're looking for…"
                  style={{ ...inputStyle('message'), resize: 'vertical', minHeight: 100 }} />
                  </div>

                  <button type="submit" disabled={submitting} style={{
                  width: '100%', padding: '15px', borderRadius: 10, border: 'none', cursor: submitting ? 'wait' : 'pointer',
                  background: submitting ? 'rgba(38,74,49,0.6)' : '#264A31',
                  color: '#fff', fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 15,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
                  transition: 'all 0.25s ease',
                  transform: submitting ? 'scale(0.99)' : 'scale(1)'
                }}>
                    {submitting ?
                  <>
                        <span style={{ width: 18, height: 18, border: '2.5px solid rgba(255,255,255,0.3)', borderTopColor: '#fff', borderRadius: '50%', animation: 'spin 0.8s linear infinite', display: 'inline-block' }} />
                        Sending…
                      </> :

                  <>
                        Send Enquiry
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
                      </>
                  }
                  </button>
                </form>
              </> : (

            /* Success state */
            <div style={{ textAlign: 'center', padding: '32px 16px', animation: 'fadeIn 0.5s ease' }}>
                <div style={{ width: 72, height: 72, borderRadius: '50%', background: 'rgba(38,74,49,0.15)', border: '2px solid #264A31', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 24px', animation: 'successPop 0.5s cubic-bezier(0.34,1.56,0.64,1)' }}>
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
                    <path d="M8 16l6 6 10-10" stroke="#264A31" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="24" strokeDashoffset="0" style={{ animation: 'drawCheck 0.5s ease 0.3s both' }} />
                  </svg>
                </div>
                <h3 style={{ color: '#F0EDE8', fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 22, margin: '0 0 12px' }}>Enquiry Received!</h3>
                <p style={{ color: 'rgba(240,237,232,0.6)', fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.7, margin: '0 0 28px' }}>
                  We'll contact you within 24 hours with product recommendations tailored to your needs.
                </p>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(38,74,49,0.1)', border: '1px solid rgba(38,74,49,0.25)', borderRadius: 999, padding: '8px 20px' }}>
                  <span style={{ color: '#264A31', fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 600 }}>Expected response: within 24 hours</span>
                </div>
              </div>)
            }
          </div>
        </div>
      </div>
    </div>);

}

function ContactIcon({ type }) {
  const s = { width: 16, height: 16, color: '#EEF5F1' };
  if (type === 'mail') return <svg style={s} viewBox="0 0 24 24" fill="none"><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" stroke="currentColor" strokeWidth="1.8" /><polyline points="22,6 12,13 2,6" stroke="currentColor" strokeWidth="1.8" /></svg>;
  if (type === 'phone') return <svg style={s} viewBox="0 0 24 24" fill="none"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.25 9.5a19.79 19.79 0 01-3.07-8.67A2 2 0 012.18 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.91 9.1a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>;
  if (type === 'clock') return <svg style={s} viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="1.8" /><path d="M12 6v6l4 2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /></svg>;
  return <svg style={s} viewBox="0 0 24 24" fill="none"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" stroke="currentColor" strokeWidth="1.8" /><circle cx="12" cy="10" r="3" stroke="currentColor" strokeWidth="1.8" /></svg>;
}

Object.assign(window, { ContactPage });