/* Contact.jsx */

function Contact({ onNav }) {
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({
    name: '', firm: '', email: '', phone: '',
    stage: 'Pre-suit · screening',
    summary: '', hipaa: false,
  });
  const onChange = (k) => (e) => setForm({ ...form, [k]: e.target.type === 'checkbox' ? e.target.checked : e.target.value });

  return (
    <main data-screen-label="Contact">
      <section className="svc-hero">
        <Container>
          <div className="hero-eyebrow">
            <span className="rule"></span>
            <span>Request a case review</span>
          </div>
          <h1>Send what you have.</h1>
          <p className="lede">Most engagements begin here. A short summary, the basic timeline, and a HIPAA authorization. We respond within five business days with a merit memo, a request for more, or a decline letter explaining why.</p>
        </Container>
      </section>

      <Container>
        <div className="contact-grid">
          {submitted ? (
            <div style={{padding: '40px 32px', background: 'var(--paper)', border: '1px solid var(--border-hairline)', borderRadius: 4, boxShadow: 'var(--shadow-sm)'}}>
              <div className="hero-eyebrow"><span className="rule"></span><span>Received</span></div>
              <h2 style={{fontFamily: 'var(--font-display)', fontSize: 32, lineHeight: 1.15, color: 'var(--navy-900)', margin: '0 0 12px'}}>Thank you, {form.name.split(' ')[0] || 'counselor'}.</h2>
              <p style={{fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.65, color: 'var(--fg-secondary)', margin: '0 0 20px'}}>We have your note. A reply will arrive within five business days from this address: <strong>review@carolinaonc.legal</strong>. If you need to send records ahead of that, reply to the confirmation email with the HIPAA authorization attached.</p>
              <Button variant="ghost" onClick={() => { setSubmitted(false); setForm({...form, summary: ''}); }}>Send another</Button>
            </div>
          ) : (
            <form className="contact-form" onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}>
              <div className="field-grid-2">
                <div className="field-row">
                  <div className="label">Your name</div>
                  <input value={form.name} onChange={onChange('name')} required />
                </div>
                <div className="field-row">
                  <div className="label">Firm</div>
                  <input value={form.firm} onChange={onChange('firm')} />
                </div>
              </div>
              <div className="field-grid-2">
                <div className="field-row">
                  <div className="label">Email</div>
                  <input type="email" value={form.email} onChange={onChange('email')} required placeholder="you@firm.com" />
                </div>
                <div className="field-row">
                  <div className="label">Phone</div>
                  <input value={form.phone} onChange={onChange('phone')} placeholder="(843) 555-0100" />
                </div>
              </div>
              <div className="field-row">
                <div className="label">Case stage</div>
                <select value={form.stage} onChange={onChange('stage')}>
                  <option>Pre-suit · screening</option>
                  <option>In suit · discovery</option>
                  <option>Trial preparation</option>
                  <option>Already retained an expert — second opinion</option>
                </select>
              </div>
              <div className="field-row">
                <div className="label">Brief summary</div>
                <textarea
                  value={form.summary}
                  onChange={onChange('summary')}
                  placeholder="A short description so we can route the records. Patient demographics, the suspected delayed diagnosis, and the rough timeline are enough."
                  required
                />
                <div className="help">No PHI in this field, please — we'll send a HIPAA-secure intake link by reply.</div>
              </div>
              <div className="field-row">
                <label style={{display: 'flex', gap: 12, alignItems: 'flex-start', fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--fg-secondary)', lineHeight: 1.5}}>
                  <input type="checkbox" style={{marginTop: 4, accentColor: 'var(--navy-800)'}} checked={form.hipaa} onChange={onChange('hipaa')} />
                  <span>I have HIPAA authorization for the records, or will obtain it before sending them.</span>
                </label>
              </div>
              <div style={{display: 'flex', gap: 12, marginTop: 8}}>
                <Button variant="primary">Send</Button>
                <Button variant="ghost" onClick={(e) => { e.preventDefault(); onNav('home'); }}>Cancel</Button>
              </div>
            </form>
          )}
          <aside className="contact-meta">
            <div className="block">
              <div className="label">By email</div>
              <address>review@carolinaonc.legal</address>
            </div>
            <div className="block">
              <div className="label">By phone</div>
              <p>(843) 555-0142<br/><span style={{fontSize: 13, color: 'var(--fg-muted)', fontFamily: 'var(--font-body)'}}>Mon–Thu, 9 to 4 ET</span></p>
            </div>
            <div className="block">
              <div className="label">By mail</div>
              <address>
                Carolina Oncology Review, LLC<br/>
                171 Church Street, Suite 3<br/>
                Charleston, SC 29401
              </address>
            </div>
            <div className="block">
              <div className="label">Response time</div>
              <p>Five business days from a complete intake.</p>
            </div>
            <div className="block">
              <div className="label">A note on declines</div>
              <p style={{fontFamily: 'var(--font-body)', fontSize: 14.5, color: 'var(--fg-secondary)', lineHeight: 1.6}}>We decline more cases than we accept, and we send a short memo explaining why. The decline letter is yours — use it however helps.</p>
            </div>
          </aside>
        </div>
      </Container>
    </main>
  );
}

Object.assign(window, { Contact });