// Shared lead-capture form — free assessment / coverage check.
// Demo only: client-side validation + success state, no real submission.
function LeadForm({ compact = false }) {
  const [sent, setSent] = React.useState(false);
  const [data, setData] = React.useState({ name: '', phone: '', who: 'Myself', plan: '' });
  const [focus, setFocus] = React.useState('');
  const valid = data.name.trim() && data.phone.trim().replace(/\D/g, '').length >= 10;

  const inputStyle = key => ({
    width: '100%', font: '400 15px var(--font-body)', color: 'var(--fg1)',
    background: 'var(--white)', border: '1.5px solid ' + (focus === key ? 'var(--forest)' : 'var(--line)'),
    borderRadius: 'var(--r-sm)', padding: '12px 14px', outline: 'none',
    boxShadow: focus === key ? '0 0 0 3px rgba(26,64,53,.12)' : 'none', transition: 'all .18s'
  });
  const labelStyle = { display: 'block', font: '600 13px var(--font-body)', color: 'var(--forest)', marginBottom: 6 };

  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });

  if (sent) {
    return (
      <div style={{ textAlign: 'center', padding: '18px 6px' }}>
        <div style={{ width: 60, height: 60, borderRadius: 999, background: 'var(--mint)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}>
          <i data-lucide="check" style={{ width: 30, height: 30, color: 'var(--forest)', strokeWidth: 2.5 }}></i>
        </div>
        <div style={{ font: '600 28px var(--font-display)', color: 'var(--forest)' }}>We&rsquo;re here.</div>
        <p style={{ font: '400 15px/1.55 var(--font-body)', color: 'var(--fg2)', margin: '10px auto 0', maxWidth: 320 }}>
          Thank you &mdash; a Burleson care advocate will reach out shortly, usually within one business day. Need to talk now? Call <a href="tel:8176626179" style={{ color: 'var(--accent)', fontWeight: 700 }}>817-662-6179</a>.
        </p>
      </div>
    );
  }

  return (
    <form onSubmit={e => { e.preventDefault(); if (valid) setSent(true); }} style={{ display: 'grid', gap: 13 }}>
      <div>
        <label style={labelStyle}>Full name</label>
        <input value={data.name} placeholder="Your name" style={inputStyle('name')}
          onFocus={() => setFocus('name')} onBlur={() => setFocus('')}
          onChange={e => setData({ ...data, name: e.target.value })} />
      </div>
      <div>
        <label style={labelStyle}>Phone number</label>
        <input value={data.phone} placeholder="(817) 000-0000" inputMode="tel" style={inputStyle('phone')}
          onFocus={() => setFocus('phone')} onBlur={() => setFocus('')}
          onChange={e => setData({ ...data, phone: e.target.value })} />
      </div>
      {!compact && (
        <div className="form-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 13 }}>
          <div>
            <label style={labelStyle}>This is for</label>
            <select value={data.who} style={inputStyle('who')}
              onFocus={() => setFocus('who')} onBlur={() => setFocus('')}
              onChange={e => setData({ ...data, who: e.target.value })}>
              <option>Myself</option><option>My child / teen</option><option>A loved one</option>
            </select>
          </div>
          <div>
            <label style={labelStyle}>Insurance <span style={{ fontWeight: 400, color: 'var(--fg3)' }}>(optional)</span></label>
            <input value={data.plan} placeholder="Plan or Medicaid" style={inputStyle('plan')}
              onFocus={() => setFocus('plan')} onBlur={() => setFocus('')}
              onChange={e => setData({ ...data, plan: e.target.value })} />
          </div>
        </div>
      )}
      <button type="submit" className="btn btn-accent btn-caps btn-block" style={{ marginTop: 5, padding: '15px 26px' }}>
        Check my coverage
      </button>
      <p style={{ font: '400 12px/1.45 var(--font-body)', color: 'var(--fg3)', margin: '1px 0 0', textAlign: 'center' }}>
        Confidential &amp; no obligation. We&rsquo;ll verify your benefits for free.
      </p>
    </form>
  );
}
window.LeadForm = LeadForm;