const { useState } = React;

const ContactPage = ({ navigate }) => {
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setSubmitting(true);
    setError(false);
    try {
      const res = await fetch('https://formspree.io/f/xwpkvgkd', {
        method: 'POST',
        body: new FormData(e.target),
        headers: { Accept: 'application/json' },
      });
      if (res.ok) setSubmitted(true);
      else setError(true);
    } catch {
      setError(true);
    }
    setSubmitting(false);
  };

  const SELECT_STYLE = {
    backgroundImage: "url(\"data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238B88A4'/%3E%3C/svg%3E\")",
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'right 16px center',
    cursor: 'pointer',
  };

  return (
    <>
      <section className="section" style={{ paddingBottom: 56 }}>
        <div className="container">
          <span className="label">Start a Project</span>
          <h1 className="display-lg reveal" style={{ marginBottom: 20 }}>
            Tell us what<br /><em style={{ fontStyle: 'italic' }}>you're building.</em>
          </h1>
          <p className="body-lg reveal d1" style={{ maxWidth: 500 }}>
            Tell us about your business. We'll respond within 24 hours with ideas
            and a clear, itemised proposal.
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 120 }}>
        <div className="container">
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
            gap: 60, alignItems: 'start',
          }}>
            {/* Info column */}
            <div className="reveal">
              {[
                { icon: '✉', label: 'Email',
                  val: 'velawebdesign@gmail.com',
                  href: 'mailto:velawebdesign@gmail.com' },
                { icon: '✆', label: 'Call',
                  val: '+971 58 593 0425',
                  href: 'tel:+971585930425' },
                { icon: '◎', label: 'WhatsApp',
                  val: 'Message us directly',
                  href: 'https://wa.me/971585930425?text=Hi%2C%20I\'m%20interested%20in%20a%20project%20with%20VELA',
                  color: '#25D366' },
                { icon: '⊕', label: 'Location',
                  val: 'Dubai, UAE · Global' },
              ].map(({ icon, label, val, href, color }) => (
                <div key={label} style={{ display: 'flex', gap: 18, alignItems: 'flex-start', marginBottom: 32 }}>
                  <div style={{
                    width: 46, height: 46, borderRadius: 12,
                    background: 'var(--accent-dim)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 18, color: 'var(--accent)', flexShrink: 0,
                  }}>{icon}</div>
                  <div>
                    <div style={{
                      fontFamily: 'var(--mono)', fontSize: 9,
                      letterSpacing: 2.5, color: 'var(--muted)', marginBottom: 7,
                    }}>{label.toUpperCase()}</div>
                    {href ? (
                      <a href={href}
                        target={href.startsWith('http') ? '_blank' : ''}
                        rel="noopener"
                        style={{
                          fontSize: 15, color: color || 'var(--text)',
                          borderBottom: '1px solid var(--border)',
                          paddingBottom: 1,
                          transition: 'border-color 0.2s',
                        }}>
                        {val}
                      </a>
                    ) : (
                      <div style={{ fontSize: 15, color: 'var(--muted)' }}>{val}</div>
                    )}
                  </div>
                </div>
              ))}

              {/* Response time card */}
              <div style={{
                marginTop: 16, padding: '24px',
                background: 'var(--card)',
                border: '1px solid var(--border)',
                borderRadius: 'var(--radius)',
              }}>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: 2, color: 'var(--accent)', marginBottom: 12 }}>
                  RESPONSE TIME
                </div>
                <div style={{ fontFamily: 'var(--display)', fontSize: 28, fontWeight: 500, marginBottom: 6 }}>
                  Within 24 hours.
                </div>
                <div style={{ fontSize: 13, color: 'var(--muted)', lineHeight: 1.7 }}>
                  Usually much faster. We're a small, focused team and we prioritise replies.
                </div>
              </div>
            </div>

            {/* Form column */}
            <div className="reveal d2">
              {submitted ? (
                <div style={{
                  textAlign: 'center', padding: '80px 40px',
                  background: 'var(--card)',
                  border: '1px solid var(--border)',
                  borderRadius: 'var(--radius-lg)',
                }}>
                  <div style={{
                    fontFamily: 'var(--display)', fontSize: 72,
                    color: 'var(--mint)', marginBottom: 20, lineHeight: 1,
                  }}>✓</div>
                  <h3 style={{ fontFamily: 'var(--display)', fontSize: 36, fontWeight: 500, marginBottom: 12 }}>
                    Message received.
                  </h3>
                  <p style={{ color: 'var(--muted)', lineHeight: 1.7 }}>
                    We'll be in touch within 24 hours with ideas and next steps.
                  </p>
                </div>
              ) : (
                <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                    <input className="field" type="text" name="name"
                      placeholder="Your name" required />
                    <input className="field" type="email" name="email"
                      placeholder="Email address" required />
                  </div>

                  <select className="field" name="project_type" defaultValue="" required style={SELECT_STYLE}>
                    <option value="" disabled>What type of project?</option>
                    <option>Restaurant / Hospitality</option>
                    <option>Retail / E-Commerce</option>
                    <option>Professional Services</option>
                    <option>Institution / Education</option>
                    <option>SaaS / Startup</option>
                    <option>Mobile App</option>
                    <option>Other</option>
                  </select>

                  <select className="field" name="budget" defaultValue="" style={SELECT_STYLE}>
                    <option value="" disabled>Budget range</option>
                    <option>Under $1,500</option>
                    <option>$1,500 – $3,500</option>
                    <option>$3,500 – $8,000</option>
                    <option>$8,000 – $20,000</option>
                    <option>$20,000+</option>
                    <option>Not sure yet</option>
                  </select>

                  <textarea className="field" name="message"
                    placeholder="Tell us about your project — what you need, who it's for, and any details that matter to you."
                    rows={5} style={{ resize: 'vertical' }} />

                  {error && (
                    <p style={{ fontSize: 13, color: '#ff6b6b' }}>
                      Something went wrong. Please try emailing us directly.
                    </p>
                  )}

                  <button type="submit" className="btn btn-primary"
                    disabled={submitting}
                    style={{ justifyContent: 'center', padding: '15px', fontSize: 15 }}>
                    {submitting ? 'Sending…' : 'Send Message →'}
                  </button>

                  <p style={{ fontSize: 12, color: 'var(--muted)', textAlign: 'center', lineHeight: 1.7 }}>
                    Or reach us on{' '}
                    <a href="https://wa.me/971585930425" target="_blank" rel="noopener"
                      style={{ color: '#25D366' }}>WhatsApp</a>
                    {' '}— usually instant.
                  </p>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

window.ContactPage = ContactPage;