(function() {
  const { useState } = React;

  function ContactPage() {
    const brand = window.BRAND_CONFIG;
    const properties = (window.SITE_DATA || {properties:[]}).properties;
    const [form, setForm] = useState({name:'', company:'', email:'', phone:'', property:'', message:''});
    const [submitted, setSubmitted] = useState(false);
    const [errors, setErrors] = 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 = 'Enter a valid email';
      if (!form.message.trim()) e.message = 'Message is required';
      return e;
    };

    const handleChange = (field, value) => {
      setForm(f => ({...f, [field]: value}));
      if (errors[field]) setErrors(e => ({...e, [field]: ''}));
    };

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

    if (submitted) {
      return (
        <div className="contact-page">
          <div className="contact-success">
            <h2 style={{color:'var(--nm-success)', marginBottom:'var(--space-sm)'}}>Message Sent</h2>
            <p>Thanks, {form.name.split(' ')[0]}! Our leasing team will be in touch within one business day.</p>
          </div>
        </div>
      );
    }

    return (
      <div className="contact-page">
        <h1>Get in Touch</h1>
        <p className="sub">
          Interested in a space? Have a question? Our leasing team responds within one business day.
        </p>

        <form className="contact-form" onSubmit={handleSubmit} noValidate>
          <div className="form-row">
            <div className="form-group">
              <label>Name *</label>
              <input type="text" value={form.name} onChange={e => handleChange('name', e.target.value)} placeholder="Your name" />
              {errors.name && <span style={{color:'var(--nm-error)', fontSize:'var(--text-xs)', marginTop:'4px'}}>{errors.name}</span>}
            </div>
            <div className="form-group">
              <label>Company</label>
              <input type="text" value={form.company} onChange={e => handleChange('company', e.target.value)} placeholder="Business or brokerage" />
            </div>
          </div>
          <div className="form-row">
            <div className="form-group">
              <label>Email *</label>
              <input type="email" value={form.email} onChange={e => handleChange('email', e.target.value)} placeholder="you@example.com" />
              {errors.email && <span style={{color:'var(--nm-error)', fontSize:'var(--text-xs)', marginTop:'4px'}}>{errors.email}</span>}
            </div>
            <div className="form-group">
              <label>Phone</label>
              <input type="tel" value={form.phone} onChange={e => handleChange('phone', e.target.value)} placeholder="(303) 555-0100" />
            </div>
          </div>
          <div className="form-group">
            <label>Property of Interest</label>
            <select value={form.property} onChange={e => handleChange('property', e.target.value)}>
              <option value="">Select a property (optional)</option>
              {properties.map(p => <option key={p.slug} value={p.slug}>{p.name}</option>)}
            </select>
          </div>
          <div className="form-group">
            <label>Message *</label>
            <textarea value={form.message} onChange={e => handleChange('message', e.target.value)} placeholder="Tell us about your concept, target SF, timeline, and any questions..." />
            {errors.message && <span style={{color:'var(--nm-error)', fontSize:'var(--text-xs)', marginTop:'4px'}}>{errors.message}</span>}
          </div>
          <button type="submit" className="btn-primary" style={{alignSelf:'flex-start'}}>Send Message</button>
          <p className="contact-note">
            Looking to apply for a specific space? <a href="#/">Browse properties</a> and use the Apply button on the unit page.
          </p>
        </form>

        <div className="contact-aside">
          <h3>Leasing Team</h3>
          <p>Email: <a href={`mailto:${brand.contactEmail}`}>{brand.contactEmail}</a></p>
          <p>Phone: <a href={`tel:${brand.contactPhone.replace(/\D/g,'')}`}>{brand.contactPhone}</a></p>
          <p>Hours: Monday – Friday, 9am – 5pm PT</p>
        </div>
      </div>
    );
  }

  window.ContactPage = ContactPage;
})();