var React = window.React;
var { Button } = window.NobleHealthDesignSystem_07bcfa;
var I = window.NobleIcons;

var track = function (event, params) {
  try { if (window.nhTrack) window.nhTrack(event, params); } catch (e) {}
};

/* Step 1 of the qualifying flow, lifted onto the home page.
 * Validates a US ZIP, stashes it plus the resolved city, then hands off to
 * RequestCarePage at step 2 so the visitor never types it twice. The remaining
 * questions (who / when / hours / payment / contact) live at /request-care.
 * Restored 2026-08-02 — the single-page form it replaces captured contact details
 * but none of the qualifying detail a coordinator needs before calling back. */
/* variant="hero" renders the compact card that sits directly under the headline — the
   placement the site used before the redesign: type a ZIP at the top of the page, land on
   question 2. variant="panel" (default) is the fuller card in the #consult section. */
function ConsultStart({ go, variant }) {
  var hero = variant === 'hero';
  var [zip, setZip] = React.useState('');
  var [error, setError] = React.useState('');
  var [loading, setLoading] = React.useState(false);

  var submit = async (e) => {
    e.preventDefault();
    var value = zip.trim();
    if (!/^\d{5}$/.test(value)) { setError('Please enter a valid 5-digit ZIP code.'); return; }
    setError('');
    setLoading(true);
    try {
      var res = await fetch('https://api.zippopotam.us/us/' + value);
      if (!res.ok) throw new Error('not found');
      var place = (await res.json()).places[0];
      // If storage is unavailable the ZIP can't travel, so start at step 1 rather than
      // landing on a step whose guard would bounce the visitor straight back.
      var carried = false;
      try {
        window.sessionStorage.setItem('nh_seed', JSON.stringify({
          zipcode: value,
          locationText: place['place name'] + ', ' + place['state abbreviation'],
        }));
        carried = true;
      } catch (storageErr) { /* private mode — fall back below */ }
      track('funnel_step', { step: 'zip_submitted', step_index: 1 });
      go(carried ? '/request-care/who' : '/request-care');
    } catch (err) {
      setError("We couldn't find that ZIP code. Please check and try again.");
    } finally {
      setLoading(false);
    }
  };

  var fieldId = hero ? 'nh-hero-zip' : 'nh-consult-zip';

  return (
    <div style={hero
      ? { background: 'var(--surface-card)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-subtle)', boxShadow: 'var(--shadow-md)', padding: 20, maxWidth: 470 }
      : { background: 'var(--surface-card)', borderRadius: 24, boxShadow: 'var(--shadow-xl)', padding: 40 }}>
      {!hero && (
        <div style={{ fontSize: 11.5, fontWeight: 800, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--green-700)', marginBottom: 12 }}>
          Step 1 of 6
        </div>
      )}
      {!hero && (
        <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 27, lineHeight: 1.15, color: 'var(--navy-900)', margin: '0 0 10px' }}>
          Where is care needed?
        </h3>
      )}
      {!hero && (
        <p style={{ margin: '0 0 24px', fontSize: 15, lineHeight: 1.6, color: 'var(--text-muted)' }}>
          Start with the ZIP code. We’ll ask a few short questions so a care coordinator has what
          they need before they call. It takes about a minute.
        </p>
      )}
      <form onSubmit={submit} noValidate>
        <label htmlFor={fieldId} style={{ display: 'block', fontSize: 'var(--text-sm)', fontWeight: 700, color: 'var(--navy-900)', marginBottom: hero ? 10 : 8 }}>
          {hero ? 'Enter your ZIP code to get started' : 'ZIP code'}
        </label>
        <div className="nh-zip-row" style={{ display: 'flex', gap: 10 }}>
          <input
            id={fieldId}
            inputMode="numeric"
            maxLength={5}
            autoComplete="postal-code"
            placeholder="77450"
            value={zip}
            onChange={(e) => { setZip(e.target.value.replace(/\D/g, '')); if (error) setError(''); }}
            aria-invalid={error ? 'true' : 'false'}
            aria-describedby={error ? fieldId + '-err' : undefined}
            style={{
              flex: 1, minWidth: 0, height: hero ? 50 : 52, padding: '0 14px',
              borderRadius: 'var(--radius-md)',
              border: '1px solid ' + (error ? 'var(--danger)' : 'var(--border-default)'),
              fontFamily: 'var(--font-body)', fontSize: 'var(--text-md)', color: 'var(--text-strong)',
              outline: 'none', background: 'var(--surface-card)',
            }}
          />
          <Button type="submit" size="lg" variant="secondary" disabled={loading}
            iconRight={loading ? null : <I.ArrowRight width={18} height={18} />}>
            {loading ? 'Checking…' : (hero ? 'Get started' : 'Continue')}
          </Button>
        </div>
        {error && <p id={fieldId + '-err'} role="alert" style={{ fontSize: 'var(--text-sm)', color: 'var(--danger-fg)', margin: '10px 0 0' }}>{error}</p>}
        <p style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)', margin: (hero ? '10px' : '14px') + ' 0 0' }}>
          {hero
            ? 'Free and no obligation. Takes about a minute.'
            : 'Free and no obligation. We’ll only use your details to reach you about care. Never shared, never sold.'}
        </p>
      </form>
    </div>
  );
}
window.ConsultStart = ConsultStart;