/* Contact / enquiry screen */
function ContactScreen({ onNavigate }) {
  const { Input, Select, Button, Checkbox } = window.BursonLtdDesignSystem_53a781;
  const [sent, setSent] = React.useState(false);
  return (
    <div>
      <div className="brs-pagehead">
        <div className="brs-pagehead__inner">
          <div className="brs-breadcrumb">
            <a onClick={() => onNavigate('home')}>Home</a><i data-lucide="chevron-right"></i><span>Contact</span>
          </div>
          <p className="brs-eyebrow">Make an enquiry</p>
          <h1>Let's talk about your home.</h1>
          <p>Whether you're looking for somewhere to live or somewhere to let, we read every enquiry and reply within one working day.</p>
        </div>
      </div>

      <section className="brs-section" style={{ paddingTop: 56 }}>
        <div className="brs-wrap">
          <div className="brs-contact">
            <div>
              {sent ? (
                <div style={{ background: 'var(--green-50)', border: '1px solid var(--green-100)',
                  borderRadius: 'var(--radius-lg)', padding: 32, display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                  <div style={{ color: 'var(--green-700)' }}><i data-lucide="check"></i></div>
                  <div>
                    <h3 style={{ fontFamily: 'var(--font-display)', margin: '0 0 6px', color: 'var(--text-strong)' }}>
                      Thank you — we've got it.</h3>
                    <p style={{ margin: 0, color: 'var(--text-muted)' }}>
                      A member of the team will be in touch within one working day.</p>
                  </div>
                </div>
              ) : (
                <form className="brs-contact__form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                  <Input label="First name" placeholder="Jane" />
                  <Input label="Last name" placeholder="Smith" />
                  <div className="brs-field--full"><Input label="Email" type="email" placeholder="jane@example.com" /></div>
                  <Input label="Phone" placeholder="07700 900000" />
                  <Select label="I'm enquiring about" options={[
                    { value: 'rent', label: 'Renting a home' },
                    { value: 'holiday', label: 'Booking a holiday let' },
                    { value: 'let', label: 'Letting my property' },
                    { value: 'sell', label: 'Selling my property' },
                  ]} />
                  <div className="brs-field--full brs-field" style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                    <label className="brs-field__label" style={{ fontSize: 'var(--text-sm)', fontWeight: 600, color: 'var(--text-strong)' }}>Message</label>
                    <textarea className="brs-input" placeholder="Tell us a little about what you're looking for…"></textarea>
                  </div>
                  <div className="brs-field--full">
                    <Checkbox label="Keep me updated about new homes that match what I'm looking for." />
                  </div>
                  <div className="brs-field--full">
                    <Button type="submit" size="lg">Send enquiry</Button>
                  </div>
                </form>
              )}
            </div>

            <div className="brs-contact__info">
              <div className="brs-contact__info-item">
                <div className="ico"><i data-lucide="phone"></i></div>
                <div><h4>Call the team</h4><p>+44 7939 557 991</p></div>
              </div>
              <div className="brs-contact__info-item">
                <div className="ico"><i data-lucide="mail"></i></div>
                <div><h4>Email</h4><p>bursonproperty@gmail.com</p></div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ContactScreen });