/* ============================================
   SQUISHY SKIN — CONTACT PAGE
   ============================================ */

function ContactPage() {
  const [form, setForm] = React.useState({ name: '', phone: '', email: '', service: '', message: '' });
  const [submitted, setSubmitted] = React.useState(false);
  const [errors, setErrors] = React.useState({});

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = 'Name is required';
    if (!form.email.trim()) e.email = 'Email is required';
    else if (!/\S+@\S+\.\S+/.test(form.email)) e.email = 'Please enter a valid email';
    if (!form.phone.trim()) e.phone = 'Phone is required';
    return e;
  };

  const handleSubmit = () => {
    const e = validate();
    if (Object.keys(e).length > 0) { setErrors(e); return; }
    setSubmitted(true);
  };

  const update = (field, value) => {
    setForm(prev => ({ ...prev, [field]: value }));
    if (errors[field]) setErrors(prev => { const n = { ...prev }; delete n[field]; return n; });
  };

  return (
    <div>
      {/* Hero */}
      <div className="section bg-white" style={{ paddingTop: 60, paddingBottom: 60, textAlign: 'center' }}>
        <div className="container">
          <span className="label">GET IN TOUCH</span>
          <h1 style={{ fontSize: 56, marginBottom: 16 }}>Let's Talk Skin</h1>
          <p style={{ fontSize: 18, color: '#666', maxWidth: 480, margin: '0 auto' }}>
            Book online, call us, or drop by the studio.
          </p>
        </div>
      </div>

      {/* Form + Info */}
      <div className="section bg-cream" style={{ paddingTop: 0 }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 0.8fr', gap: 60, alignItems: 'start' }} className="contact-grid">
            {/* Form */}
            <AnimatedSection>
              <div style={{ background: '#fff', borderRadius: 'var(--radius-lg)', padding: '40px 36px' }}>
                {submitted ? (
                  <div style={{ textAlign: 'center', padding: '40px 0' }}>
                    <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'var(--pink-light)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px' }}>
                      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--pink)" strokeWidth="2.5" strokeLinecap="round">
                        <path d="M20 6L9 17l-5-5"/>
                      </svg>
                    </div>
                    <h3 style={{ fontSize: 26, marginBottom: 12 }}>Message Sent!</h3>
                    <p style={{ color: '#666', fontSize: 16, marginBottom: 24 }}>Thanks, {form.name}! We will get back to you shortly.</p>
                    <button className="btn btn-pink" onClick={() => { setSubmitted(false); setForm({ name:'', phone:'', email:'', service:'', message:'' }); }}>
                      Send Another
                    </button>
                  </div>
                ) : (
                  <>
                    <h3 style={{ fontSize: 24, marginBottom: 28 }}>Send Us a Message</h3>
                    <div className="form-group">
                      <label>Full Name *</label>
                      <input className="form-input" placeholder="Your name" value={form.name}
                        onChange={e => update('name', e.target.value)}
                        style={errors.name ? { borderColor: '#e55' } : {}} />
                      {errors.name && <span style={{ color: '#e55', fontSize: 13, marginTop: 4, display: 'block' }}>{errors.name}</span>}
                    </div>
                    <div className="form-group">
                      <label>Phone *</label>
                      <input className="form-input" placeholder="+1 (___) ___-____" value={form.phone}
                        onChange={e => update('phone', e.target.value)}
                        style={errors.phone ? { borderColor: '#e55' } : {}} />
                      {errors.phone && <span style={{ color: '#e55', fontSize: 13, marginTop: 4, display: 'block' }}>{errors.phone}</span>}
                    </div>
                    <div className="form-group">
                      <label>Email *</label>
                      <input className="form-input" type="email" placeholder="you@example.com" value={form.email}
                        onChange={e => update('email', e.target.value)}
                        style={errors.email ? { borderColor: '#e55' } : {}} />
                      {errors.email && <span style={{ color: '#e55', fontSize: 13, marginTop: 4, display: 'block' }}>{errors.email}</span>}
                    </div>
                    <div className="form-group">
                      <label>Service of Interest</label>
                      <select className="form-input" value={form.service} onChange={e => update('service', e.target.value)}>
                        <option value="">Select a service</option>
                        <option>Women's Laser Hair Removal</option>
                        <option>Men's Laser Hair Removal</option>
                        <option>Facials & Skin Treatments</option>
                        <option>Peels (Zena Algae)</option>
                        <option>Brows & Lashes</option>
                        <option>Body & Wellness</option>
                        <option>Extras</option>
                      </select>
                    </div>
                    <div className="form-group">
                      <label>Message</label>
                      <textarea className="form-input" placeholder="Tell us what you are looking for..." value={form.message}
                        onChange={e => update('message', e.target.value)} />
                    </div>
                    <button className="btn btn-pink" style={{ width: '100%' }} onClick={handleSubmit}>
                      Send Message
                    </button>
                  </>
                )}
              </div>
            </AnimatedSection>

            {/* Contact Info */}
            <AnimatedSection delay={1}>
              <div style={{ padding: '20px 0' }}>
                {/* Address */}
                <div style={{ marginBottom: 32 }}>
                  <h4 style={{ fontSize: 14, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--pink)', marginBottom: 12 }}>Address</h4>
                  <p style={{ fontSize: 16, lineHeight: 1.7, color: '#555' }}>
                    7404 King George Blvd, Suite 200<br/>
                    Surrey, BC V3W 1N6, Canada
                  </p>
                </div>
                {/* Phone */}
                <div style={{ marginBottom: 32 }}>
                  <h4 style={{ fontSize: 14, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--pink)', marginBottom: 12 }}>Phone</h4>
                  <a href="tel:+16046217783" style={{ fontSize: 18, fontWeight: 600, color: 'var(--black)' }}>+1 604 621 7783</a>
                </div>
                {/* Instagram */}
                <div style={{ marginBottom: 32 }}>
                  <h4 style={{ fontSize: 14, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--pink)', marginBottom: 12 }}>Instagram</h4>
                  <a href="https://www.instagram.com/squishyskinwellness" target="_blank" rel="noopener noreferrer"
                    style={{ fontSize: 16, fontWeight: 600, color: 'var(--pink)' }}>@squishyskinwellness</a>
                </div>
                {/* Booking */}
                <div style={{ marginBottom: 32 }}>
                  <h4 style={{ fontSize: 14, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--pink)', marginBottom: 12 }}>Book Online</h4>
                  <a href="https://squishyskin.setmore.com/" target="_blank" rel="noopener noreferrer"
                    className="btn btn-pink" style={{ padding: '12px 28px', fontSize: 14 }}>Book on Setmore</a>
                </div>
                {/* Hours */}
                <div style={{ marginBottom: 32 }}>
                  <h4 style={{ fontSize: 14, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--pink)', marginBottom: 12 }}>Hours</h4>
                  <p style={{ fontSize: 15, lineHeight: 1.8, color: '#555' }}>
                    Monday - Friday: 10am - 7pm<br/>
                    Saturday: 10am - 5pm<br/>
                    Sunday: Closed
                  </p>
                </div>
                {/* Cancellation */}
                <div style={{ background: 'var(--pink-light)', borderRadius: 14, padding: '16px 20px' }}>
                  <p style={{ fontSize: 13, color: '#888', lineHeight: 1.6 }}>
                    $40 cancellation fee applies to appointments cancelled without 24 hours notice.
                  </p>
                </div>
              </div>
            </AnimatedSection>
          </div>
        </div>
      </div>

      {/* Google Maps */}
      <div style={{ width: '100%', height: 400, background: 'var(--gray)' }}>
        <iframe
          src="https://maps.google.com/maps?q=7404+King+George+Blvd+%23200%2C+Surrey%2C+BC+V3W+1N6&output=embed"
          width="100%" height="400" style={{ border: 0, display: 'block' }}
          allowFullScreen="" loading="lazy" referrerPolicy="no-referrer-when-downgrade"
          title="Squishy Skin Location"
        ></iframe>
      </div>

      {/* Book CTA */}
      <div className="section bg-pink-light" style={{ padding: '60px 0', textAlign: 'center' }}>
        <div className="container">
          <h3 style={{ fontSize: 28, marginBottom: 24 }}>The Easiest Way to Book?</h3>
          <div style={{ display: 'flex', gap: 16, justifyContent: 'center', alignItems: 'center', flexWrap: 'wrap' }}>
            <a href="https://squishyskin.setmore.com/" target="_blank" rel="noopener noreferrer"
              className="btn btn-pink">Book on Setmore</a>
            <a href="tel:+16046217783" style={{ fontSize: 16, fontWeight: 600, color: 'var(--black)' }}>+1 604 621 7783</a>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .contact-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
        @media (max-width: 600px) {
          .contact-grid > div > div { padding: 28px 20px !important; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { ContactPage });