{/* HERO — editorial display */}

TMJD is complicated.
Finding help
shouldn't be.

A note

Temporomandibular disorders sit at the seam of dentistry, neurology, and musculoskeletal medicine. Most patients see four or five providers before finding one who treats the whole picture.

What we do

We index vetted TMJ-trained clinicians across eleven disciplines so you can find them in a single search — wherever you live, whatever insurance you carry.

Not sure who to see first?{' '} Take the 2-minute "where should I start?" quiz →

{/* MARQUEE strip */}

Directory contains 4,851 specialists in 11 disciplines, verified weekly.

001 / 04Disciplines

Eleven specialties — one condition.

{SPECIALTIES.map((s,i)=>(

onSearch({spec:s.key})}> {String(i+1).padStart(2,'0')} {s.label} Specialists{s.count.toLocaleString()}

))}

{/* QUOTE */}

I saw seven providers across three states before I found a clinician who actually understood what was happening to my jaw.

— Anonymous patient · Survey, 2025

{/* FEATURED — editorial cards */}

002 / 04Featured

Recently joined the directory.

{PROVIDERS .filter(p => (p.status === 'premium' || p.premium || p.status === 'claimed') && p.rating != null && p.bio) .sort((a,b) => (Number(b.rating)||0) - (Number(a.rating)||0)) .slice(0,3) .map((p,i)=>(

onSearch({focus:p.id})}>

{p.specialty} {String(i+1).padStart(2,'0')}

{p.name}

{p.credentials}

{p.city}{p.state?`, ${p.state}`:''} · {p.country}

"{p.bio}"

{p.rating != null ? ( ★ {Number(p.rating).toFixed(1)} ({p.reviews ?? '—'}) ) : New listing} →

))}

{/* UNDERSTAND — info cards */}

003 / 04Layers

TMJD isn't one thing.

{[ { t:'Joint dysfunction', c:'var(--accent)', d:'Disc displacement, clicking, locking, arthritic change. Treated by orofacial pain specialists, oral surgeons, TMJ-trained dentists.' }, { t:'Muscle pain', c:'var(--gold)', d:'Masseter, temporalis, pterygoid, SCM trigger points referring pain to teeth, ears, scalp. Treated by physical therapists, massage and myofascial therapists.' }, { t:'Nerve & headache', c:'var(--plum)', d:'Trigeminal involvement, migraine overlap, central sensitization. Treated by neurologists, headache specialists, ENTs.' }, { t:'Behavior & sleep', c:'var(--accent-ink)', d:'Bruxism, posture, sleep architecture, stress. Treated by sleep dentists, behavioral psychologists, osteopaths.' }, { t:'Airway & breathing', c:'var(--plum)', d:'Mouth breathing, narrow airway, tongue posture, and sleep-disordered breathing that drive jaw tension and clenching. Treated by myofunctional therapists, airway-focused dentists, and ENTs.' }, { t:'Cervical & postural', c:'var(--accent-ink)', d:'Neck and upper-cervical tension, forward-head posture, and old whiplash that refer pain into the jaw and feed clenching. Treated by physical therapists, chiropractors, and upper-cervical specialists.' }, { t:'Bite & alignment', c:'var(--accent)', d:'Malocclusion, worn or missing teeth, and orthodontic factors that load the joint unevenly. Treated by neuromuscular dentists, orthodontists, and TMJ-trained dentists.' }, { t:'Psychological & emotional', c:'var(--gold)', d:'Stress, anxiety, trauma, and central sensitization that amplify clenching and how pain is felt. Treated by behavioral psychologists, pain-reprocessing therapists, and biofeedback specialists.' }, ].map((x,i)=>(

{x.t}

{x.d}

))}

{/* MAP TEASER */}

004 / 04Geography

Find specialists near you.

See TMJD specialists within driving distance — or search any city worldwide. Many TMJD patients travel for the right specialist.

{/* FOOTER */}

No analytics yet — once your listing is claimed and patients start viewing it, numbers show up here.

Claim your listing

Find your practice in the directory.

We don't have {session?.user?.email} on a listing yet — that's normal for listings we sourced automatically. Search for your practice below and claim it. If we can't verify it instantly, you'll send a quick proof and we'll confirm within a few business days.

{claimsLoading ? (

Loading…

) : submittedFor ? (

Claim submitted.

We've received your request to claim {submittedFor.name || submittedFor.business}. We'll verify your evidence and email {session?.user?.email} once it's approved — usually within a few business days.

) : pending ? (

Claim pending review.

You have a pending claim for listing {pending.provider_id}, submitted {new Date(pending.created_at).toLocaleDateString()}. We'll email you once it's reviewed.

) : selected ? (

Verify you're {selected.name || selected.business}

We couldn't match your email automatically. Send us proof you're affiliated with this practice and we'll approve your claim.

Your full name setFullName(e.target.value)} placeholder="Dr. Jane Smith" /> Evidence (required)

setEvidence(e.target.value)}
                placeholder="State license #, NPI number, or a practice email/website that proves you're affiliated with this listing." />
              {error && <div className="provider-error" role="alert">{error}</div>}
              <div className="provider-cta" style={{display:'flex',gap:10}}>
                <button className="btn btn-dark" type="submit" disabled={busy}>{busy ? 'Submitting…' : 'Submit claim'}</button>
                <button className="btn btn-ghost" type="button" onClick={()=>{setSelected(null);setError('');}}>Pick a different listing</button>
              </div>
            </form>
          ) : (
            <div className="provider-form">
              <div className="provider-card-head">
                <h2>Search for your practice</h2>
                <p>Type your name or clinic name. Don't see it? <a href="contact.html" style={{textDecoration:'underline'}}>Request a new listing</a>.</p>
              </div>
              <input
                type="search"
                value={query}
                onChange={e=>setQuery(e.target.value)}
                placeholder="e.g. Relief Massage Method, or Amber Ellen"
                autoFocus
              />
              {error && <div className="provider-error" role="alert" style={{marginTop:12}}>{error}</div>}
              <div style={{marginTop:14, display:'flex', flexDirection:'column', gap:8}}>
                {query.trim().length >= 2 && results.length === 0 && (
                  <p style={{color:'var(--muted)',fontSize:14}}>No matches. Try a different spelling, or <a href="contact.html" style={{textDecoration:'underline'}}>request a new listing</a>.</p>
                )}
                {results.map(p => (
                  <div key={p.id} style={{
                    display:'flex', alignItems:'center', justifyContent:'space-between', gap:12,
                    padding:'12px 14px', border:'1px solid var(--line)', borderRadius:8, background:'var(--bg)',
                  }}>
                    <div>
                      <div style={{fontWeight:600}}>{p.name || p.business}</div>
                      <div style={{fontSize:13,color:'var(--muted)'}}>
                        {p.specialty}{(p.city||p.state)?` · ${p.city||''}${p.state?', '+p.state:''}`:''}
                        {p.status !== 'sourceOnly' ? ' · already claimed' : ''}
                      </div>
                    </div>
                    <button
                      className="btn btn-dark"
                      type="button"
                      disabled={busy || p.status !== 'sourceOnly'}
                      onClick={()=>tryClaim(p)}
                    >
                      {p.status !== 'sourceOnly' ? 'Claimed' : 'This is me'}
                    </button>
                  </div>
                ))}
              </div>
              <div style={{marginTop:20}}>
                <button className="btn btn-ghost" type="button" onClick={onLogout}>Sign out</button>
              </div>
            </div>
          )}
        </section>

<aside className="provider-info">
          <div className="provider-note">
            <h3>How verification works</h3>
            <p>If your email or your practice's website domain is already on the listing, you're in instantly. Otherwise we manually check the license # or NPI you provide against public records. Either way, your contact details on the listing stay private until you choose to publish them.</p>
          </div>
        </aside>
      </div>
    </main>
  );
};

const ProviderDashboard = ({ session, claimTarget, onBack, onLogout }) => {
  const [loading, setLoading] = React.useState(true);
  const [loadError, setLoadError] = React.useState('');
  const [noListing, setNoListing] = React.useState(false);
  const [reloadKey, setReloadKey] = React.useState(0);
  const [listingId, setListingId] = React.useState(null);
  const [photoFile, setPhotoFile] = React.useState(null);
  const [photoPreview, setPhotoPreview] = React.useState('');
  const [profile, setProfile] = React.useState(EMPTY_PROFILE);
  const [saved, setSaved] = React.useState(false);
  const [saving, setSaving] = React.useState(false);
  const [saveError, setSaveError] = React.useState('');
  const [premium, setPremium] = React.useState(false);
  const [insuranceSearch, setInsuranceSearch] = React.useState('');

// On mount: resolve listing for the signed-in user, claim if needed, fetch full row.
  React.useEffect(() => {
    let cancelled = false;
    (async () => {
      setLoading(true);
      setLoadError('');
      setNoListing(false);
      try {
        // 1) Find the user's listing (by owner_id or exact-email match)
        let found = typeof findMyListing === 'function' ? await findMyListing() : null;

// 2) If user navigated here from a "Claim free" card and doesn't own it yet,
        //    attempt the claim (exact email or website-domain match).
        if (!found && claimTarget && typeof claimListing === 'function') {
          try {
            const claimed = await claimListing(claimTarget);
            if (claimed) found = { id: claimed.id, owner_id: claimed.id };
          } catch (e) {
            // No auto-match → fall through to the manual claim flow below.
            if (!String(e?.message || '').includes('AUTOCLAIM_NO_MATCH')) throw e;
          }
        }

// 3) If owner_id is null on the matched row, claim it now (auto-claim by email).
        if (found && !found.owner_id && typeof claimListing === 'function') {
          try { await claimListing(found.id); }
          catch (e) { if (!String(e?.message || '').includes('AUTOCLAIM_NO_MATCH')) throw e; }
        }

if (!found) {
          if (!cancelled) { setNoListing(true); setLoading(false); }
          return;
        }

// 4) Fetch the full row (PII included, RLS allows owner)
        const row = await fetchMyProviderRow(found.id);
        if (cancelled) return;
        setListingId(row.id);
        setProfile(dbRowToProfile(row));
        setPhotoPreview(row.photo || '');
        setPremium(row.status === 'premium');
      } catch (err) {
        console.error('[dashboard] load failed', err);
        if (!cancelled) setLoadError(err?.message || 'Could not load your listing.');
      } finally {
        if (!cancelled) setLoading(false);
      }
    })();
    return () => { cancelled = true; };
  }, [session?.user?.id, claimTarget, reloadKey]);

React.useEffect(() => {
    if (!photoFile) return;
    const reader = new FileReader();
    reader.onload = () => setPhotoPreview(reader.result);
    reader.readAsDataURL(photoFile);
  }, [photoFile]);

const updateField = key => event => {
    setProfile(prev => ({ ...prev, [key]: event.target.value }));
    setSaved(false);
  };

const toggleTag = (tag) => {
    setProfile(prev => ({
      ...prev,
      tags: prev.tags.includes(tag)
        ? prev.tags.filter(t => t !== tag)
        : [...prev.tags, tag],
    }));
    setSaved(false);
  };

const handlePhoto = event => {
    const file = event.target.files?.[0];
    setPhotoFile(file || null);
    setSaved(false);
  };

// Premium upgrade is a future flow (Stripe etc). For now this just flips local state
  // so the preview shows the premium look — the actual status change to 'premium' is
  // service-role only and will be done at billing time.
  const activatePremium = () => {
    setPremium(true);
    setSaved(false);
  };

// Loading / no-listing / error early returns
  if (loading) {
    return (
      <main className="provider-shell">
        <p style={{textAlign:'center',padding:80,color:'var(--muted)'}}>Loading your listing…</p>
      </main>
    );
  }
  if (noListing) {
    return (
      <ClaimRequestFlow
        session={session}
        onBack={onBack}
        onLogout={onLogout}
        onClaimed={() => setReloadKey(k => k + 1)}
      />
    );
  }
  if (loadError) {
    return (
      <main className="provider-shell">
        <button className="provider-back" onClick={onBack}>← Back to directory</button>
        <section className="provider-hero">
          <p className="ed-sub-eyebrow">Something went wrong</p>
          <h1>We couldn't load your listing.</h1>
          <p>{loadError}</p>
          <div style={{display:'flex',gap:12,marginTop:24,justifyContent:'center'}}>
            <button className="btn btn-dark" onClick={() => setReloadKey(k => k + 1)}>Try again</button>
            <button className="btn btn-ghost" onClick={onLogout}>Sign out</button>
          </div>
        </section>
      </main>
    );
  }

return (
    <main className="provider-shell">
      <button className="provider-back" onClick={onBack}>← Back to directory</button>
      <section className="provider-hero">
        <p className="ed-sub-eyebrow">Provider dashboard</p>
        <h1>Manage your TMJDirectory listing.</h1>
        <p>
          Review your clinic profile, update your contact details and specialties, and submit edits for approval. This dashboard is a preview of the provider experience.
        </p>
      </section>

<div className="provider-grid">
        <section className="provider-card">
          <div className="provider-card-head">
            <h2>Profile details</h2>
            <p>Update the information patients see in search results and on your listing page.</p>
          </div>

<div className="provider-form provider-dashboard-form">
            <label htmlFor="dashboard-name">Provider name</label>
            <input id="dashboard-name" value={profile.name} onChange={updateField('name')} />

<label htmlFor="dashboard-creds">Credentials</label>
            <input id="dashboard-creds" value={profile.credentials} onChange={updateField('credentials')} />

<label htmlFor="dashboard-business">Business / clinic name</label>
            <input id="dashboard-business" value={profile.business} onChange={updateField('business')} placeholder="Your clinic or practice name" />

<label htmlFor="dashboard-specialty">Specialty</label>
            <input id="dashboard-specialty" value={profile.specialty} onChange={updateField('specialty')} />

<label htmlFor="dashboard-bio">Practice summary</label>
            <textarea id="dashboard-bio" rows="5" value={profile.bio} onChange={updateField('bio')} />

<label htmlFor="dashboard-photo">Profile photo</label>
            <input id="dashboard-photo" type="file" accept="image/*" onChange={handlePhoto} />
            {photoPreview && (
              <div className="photo-preview" aria-label="Photo preview">
                <img src={photoPreview} alt="Profile preview" />
              </div>
            )}

<label>Tags / highlights</label>
            <p className="field-hint">Select the tags that describe your practice. Patients filter the directory by these — you can't add custom tags so listings stay consistent.</p>
            <div className="tag-picker">
              {(typeof TAG_CATEGORIES !== 'undefined' ? TAG_CATEGORIES : []).map(category => (
                <div key={category.label} className="tag-group">
                  <span className="tag-group-label">{category.label}</span>
                  <div className="tag-group-chips">
                    {category.tags.map(tag => {
                      const selected = profile.tags.includes(tag);
                      return (
                        <button
                          key={tag}
                          type="button"
                          className={`tag-chip ${selected ? 'tag-chip-selected' : ''}`}
                          onClick={() => toggleTag(tag)}
                          aria-pressed={selected}
                        >
                          {tag}
                        </button>
                      );
                    })}
                  </div>
                </div>
              ))}
            </div>

<label htmlFor="dashboard-insurance">Insurance accepted</label>
            <p className="field-hint">Select all insurances you accept. Patients filter the directory by these — <strong>not shown publicly on your card</strong>, only used for matching searches in your area.</p>
            <div className="insurance-picker">
              {profile.insurances.length > 0 && (
                <div className="insurance-selected">
                  {profile.insurances.map(name => (
                    <span key={name} className="insurance-chip">
                      {name}
                      <button type="button" onClick={() => removeInsurance(name)} aria-label={`Remove ${name}`}>×</button>
                    </span>
                  ))}
                </div>
              )}
              <input
                id="dashboard-insurance"
                type="text"
                className="insurance-search"
                placeholder="Search insurances (e.g. Aetna, BCBS, Medicare)..."
                value={insuranceSearch}
                onChange={e => setInsuranceSearch(e.target.value)}
              />
              {(filteredInsurances.length > 0 || customInsuranceCandidate) && (
                <div className="insurance-options">
                  {filteredInsurances.map(name => (
                    <button
                      key={name}
                      type="button"
                      className="insurance-option"
                      onClick={() => addInsurance(name)}
                    >+ {name}</button>
                  ))}
                  {customInsuranceCandidate && (
                    <button
                      type="button"
                      className="insurance-option insurance-option-custom"
                      onClick={() => addInsurance(customInsuranceCandidate)}
                    >+ Add "{customInsuranceCandidate}" as custom</button>
                  )}
                </div>
              )}
            </div>

<div className="social-grid">
              <div>
                <label htmlFor="dashboard-instagram">Instagram</label>
                <input id="dashboard-instagram" value={profile.instagram} onChange={updateField('instagram')} placeholder="@yourhandle" />
              </div>
              <div>
                <label htmlFor="dashboard-tiktok">TikTok</label>
                <input id="dashboard-tiktok" value={profile.tiktok} onChange={updateField('tiktok')} placeholder="@yourhandle" />
              </div>
              <div>
                <label htmlFor="dashboard-x">X</label>
                <input id="dashboard-x" value={profile.x} onChange={updateField('x')} placeholder="@yourhandle" />
              </div>
              <div>
                <label htmlFor="dashboard-facebook">Facebook</label>
                <input id="dashboard-facebook" value={profile.facebook} onChange={updateField('facebook')} placeholder="https://facebook.com/yourpage" />
              </div>
              <div>
                <label htmlFor="dashboard-linkedin">LinkedIn</label>
                <input id="dashboard-linkedin" value={profile.linkedin} onChange={updateField('linkedin')} placeholder="https://linkedin.com/in/yourname" />
              </div>
            </div>

<label htmlFor="dashboard-google-rating">Google business URL</label>
            <input id="dashboard-google-rating" value={profile.googleRating} onChange={updateField('googleRating')} placeholder="https://g.page/yourbusiness" />
            <p className="field-hint">Link to your Google business page where reviews are visible — not the <code>/review</code> link.</p>

<div className="social-grid">
              <div>
                <label htmlFor="dashboard-rating">Star rating</label>
                <input id="dashboard-rating" type="number" step="0.1" min="0" max="5" value={profile.rating} onChange={updateField('rating')} placeholder="4.9" />
              </div>
              <div>
                <label htmlFor="dashboard-reviews">Review count</label>
                <input id="dashboard-reviews" type="number" min="0" value={profile.reviews} onChange={updateField('reviews')} placeholder="142" />
              </div>
            </div>

<label htmlFor="dashboard-address">Street address</label>
            <input id="dashboard-address" value={profile.addr} onChange={updateField('addr')} placeholder="123 Main St, Suite 4" />

<div className="social-grid">
              <div>
                <label htmlFor="dashboard-city">City</label>
                <input id="dashboard-city" value={profile.city} onChange={updateField('city')} placeholder="Portland" />
              </div>
              <div>
                <label htmlFor="dashboard-state">State / region</label>
                <input id="dashboard-state" value={profile.state} onChange={updateField('state')} placeholder="OR" />
              </div>
              <div>
                <label htmlFor="dashboard-zip">ZIP / postal code</label>
                <input id="dashboard-zip" value={profile.zip} onChange={updateField('zip')} placeholder="97214" />
              </div>
              <div>
                <label htmlFor="dashboard-country">Country</label>
                <input id="dashboard-country" value={profile.country} onChange={updateField('country')} placeholder="USA" />
              </div>
            </div>

<label htmlFor="dashboard-phone">Phone</label>
            <input id="dashboard-phone" value={profile.phone} onChange={updateField('phone')} />

<label htmlFor="dashboard-email">Email</label>
            <input id="dashboard-email" value={profile.email} onChange={updateField('email')} />

<label htmlFor="dashboard-web">Website</label>
            <input id="dashboard-web" value={profile.web} onChange={updateField('web')} placeholder="reliefmassagemethod.com" />

<label htmlFor="dashboard-schedule">Scheduling link</label>
            <input id="dashboard-schedule" value={profile.scheduleUrl} onChange={updateField('scheduleUrl')} placeholder="https://calendly.com/yourname or your booking page URL" />
            <p className="field-hint">Where the <strong>Schedule</strong> button on your card sends patients. Use your Calendly, Acuity, Jane, or other booking link.</p>

{/* Peer-contact opt-in */}
            <div style={{margin:'18px 0 6px',padding:'14px 16px',border:'1px solid var(--line)',borderRadius:8,background:'var(--bg)'}}>
              <label style={{display:'flex',alignItems:'flex-start',gap:10,cursor:'pointer'}}>
                <input
                  type="checkbox"
                  checked={!!profile.peerContactOptin}
                  onChange={e=>{ setProfile(prev=>({...prev,peerContactOptin:e.target.checked})); setSaved(false); }}
                  style={{marginTop:3,accentColor:'var(--accent-ink)'}}
                />
                <span>
                  <strong>Let other providers contact me directly.</strong>
                  <span style={{display:'block',fontSize:13,color:'var(--muted)',marginTop:2}}>
                    When another provider saves you to their network, your preferred contact method below is shown to them only — never on your public card.
                  </span>
                </span>
              </label>
              {profile.peerContactOptin && (
                <div style={{marginTop:10,display:'flex',alignItems:'center',gap:10}}>
                  <label htmlFor="dashboard-preferred" style={{fontSize:13,color:'var(--ink-2)'}}>Preferred contact:</label>
                  <select
                    id="dashboard-preferred"
                    value={profile.preferredContact || 'email'}
                    onChange={e=>{ setProfile(prev=>({...prev,preferredContact:e.target.value})); setSaved(false); }}
                    style={{padding:'6px 10px',borderRadius:6,border:'1px solid var(--line)',background:'var(--paper)',font:'inherit',fontSize:14}}
                  >
                    <option value="email">Email</option>
                    <option value="phone">Phone</option>
                    <option value="web">Website</option>
                  </select>
                </div>
              )}
              <p className="field-hint" style={{marginTop:8}}>Saved with your other changes when you click "Save changes".</p>
            </div>

{/* Peer network management (immediate — not part of the save) */}
            {listingId && <PeerNetworkPanel listingId={listingId} />}

{/* Card analytics */}
            {listingId && <CardAnalyticsPanel />}

{/* What's included with a claimed (free) listing */}
            <div className="provider-subscription provider-subscription-active" style={{borderColor:'var(--accent-ink)'}}>
              <div className="provider-subscription-head">
                <span className="premium-badge" style={{background:'var(--accent-ink)',color:'var(--paper)'}}>✓ Claimed</span>
                <h3>What's included with your free claim</h3>
              </div>
              <ul className="premium-perks">
                <li><strong>Live editing of your listing</strong> — name, credentials, photo, bio, address, phone, website, social links, scheduling URL. Edits queue for a quick review, then go live.</li>
                <li><strong>Insurance, tag, and treatment filters</strong> — pick exactly which patient searches you appear in.</li>
                <li><strong>Verified badge</strong> on your card — replaces the "claim it free" prompt so patients see a real practitioner.</li>

<li style={{marginTop:14}}><strong>Provider network search</strong> — find other vetted TMJD providers in your area (orofacial dentists, PTs, sleep specialists, myofunctional therapists, somatic practitioners) and save them to your support web for patient referrals.</li>
                <li><strong>Be discoverable to peers (opt-in)</strong> — toggle on and other providers can save you to their network. Your preferred contact method is revealed only to providers who save you — never publicly.</li>
                <li><strong>"Saved by X providers" badge</strong> on your card — show patients you're trusted by other TMJD specialists in their area.</li>

<li style={{marginTop:14}}><strong>Engagement analytics</strong> — weekly breakdown of card views, plus exactly which contact path each patient took: phone, email, website, social, schedule link.</li>
                <li><strong>Favorites count</strong> — see how many patients hearted your card and how many providers added you to their support network.</li>
                <li><strong>Specialty-filter insight</strong> — know which searches drove your traffic so you can sharpen your tags.</li>
              </ul>
            </div>

<div className={`provider-subscription ${premium ? 'provider-subscription-active' : ''}`}>
              <div className="provider-subscription-head">
                <span className="premium-badge">★ Premium</span>
                <h3>{premium ? 'Premium active' : 'Upgrade to Premium — $7.99 / month'}</h3>
              </div>
              <p>
                {premium
                  ? 'Your listing has Premium perks active — top-of-search placement, the verified badge, dedicated page, and more.'
                  : 'Premium adds discovery and presentation perks that drive more referrals on top of your free claim:'}
              </p>
              {!premium && (
                <ul className="premium-perks">
                  <li><strong>Top-of-search placement</strong> — your listing surfaces above unclaimed ones in patient searches.</li>
                  <li><strong>"★ Premium" gold badge</strong> on your card — strongest trust signal.</li>
                  <li><strong>Dedicated provider page</strong> — full-page profile with photo gallery, treatments offered, and FAQ.</li>
                  <li><strong>Multiple photos</strong> — show your office, team, and treatment rooms (basic listings get one photo).</li>
                  <li><strong>"Leave a Google review" CTA</strong> — patients can leave reviews from your listing in one tap.</li>
                  <li><strong>Priority support</strong> — direct email to the directory team for listing edits and disputes.</li>
                </ul>
              )}
              {!premium && (
                <button className="btn btn-dark" type="button" onClick={activatePremium}>
                  Upgrade to Premium
                </button>
              )}
            </div>

{saveError && (
              <div className="provider-error" role="alert" style={{marginTop:16}}>{saveError}</div>
            )}
            <div className="provider-dashboard-actions">
              <button className="btn btn-dark" type="button" onClick={submitChanges} disabled={saving}>
                {saving ? 'Saving…' : (saved ? 'Saved ✓' : 'Save changes')}
              </button>
              <button className="btn btn-ghost" type="button" onClick={onLogout}>Sign out</button>
            </div>
          </div>
        </section>

<aside className="provider-info">
          <ProviderPreview profile={profile} photoPreview={photoPreview} premium={premium} />
          <div className="provider-summary">
            <h2>What changes you can send</h2>
            <div className="provider-benefits">
              {[
                'Contact details and clinic address.',
                'Treatment approach, specialties, and insurance accepted.',
                'Scheduling notes and telehealth availability.',
                'Professional credentials and verified profile details.',
              ].map(text=>(
                <div key={text} className="provider-benefit">
                  <span className="benefit-dot" aria-hidden="true" />
                  <span>{text}</span>
                </div>
              ))}
            </div>
          </div>

{saved ? (
            <div className="provider-success" role="status">
              <h3>Saved.</h3>
              <p>Your changes are live. Patients will see the updated listing on their next page load.</p>
            </div>
          ) : (
            <div className="provider-note">
              <h3>Edit your live listing.</h3>
              <p>Changes save directly to your listing — no review queue. Email, phone, social, and scheduling URLs are shown to patients exactly as you enter them.</p>
            </div>
          )}
        </aside>
      </div>
    </main>
  );
};

const ProviderLogin = ({ onBack, claimTarget }) => {
  const [email, setEmail] = React.useState('');
  const [phase, setPhase] = React.useState('loading'); // loading | login | sent | dashboard
  const [session, setSession] = React.useState(null);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState('');

const claimingProvider = React.useMemo(() => {
    if (!claimTarget) return null;
    const source = typeof getMergedProviders === 'function' ? getMergedProviders() : (typeof PROVIDERS !== 'undefined' ? PROVIDERS : []);
    return source.find(p => p.id === claimTarget) || null;
  }, [claimTarget]);

// Detect existing session on mount + subscribe to auth changes (magic-link callback)
  React.useEffect(() => {
    let mounted = true;
    (async () => {
      const existing = typeof getSession === 'function' ? await getSession() : null;
      if (!mounted) return;
      if (existing) {
        setSession(existing);
        setPhase('dashboard');
      } else {
        setPhase('login');
      }
    })();
    const unsub = typeof onAuthChange === 'function' ? onAuthChange((s) => {
      if (!mounted) return;
      setSession(s);
      setPhase(s ? 'dashboard' : 'login');
    }) : () => {};
    return () => { mounted = false; unsub(); };
  }, []);

const handleLogout = async () => {
    if (typeof signOut === 'function') await signOut();
    setSession(null);
    setEmail('');
    setPhase('login');
  };

if (phase === 'dashboard' && session) {
    return <ProviderDashboard session={session} claimTarget={claimTarget} onBack={onBack} onLogout={handleLogout} />;
  }

if (phase === 'loading') {
    return (
      <main className="provider-shell">
        <p style={{textAlign:'center',padding:80,color:'var(--muted)'}}>Loading…</p>
      </main>
    );
  }

return (
    <main className="provider-shell">
      <button className="provider-back" onClick={onBack}>← Back to directory</button>
      <section className="provider-hero">
        <p className="ed-sub-eyebrow">{claimingProvider ? 'Claim listing' : 'Provider login'}</p>
        <h1>
          {claimingProvider
            ? <>Claim {claimingProvider.name}'s listing.</>
            : 'Claim your listing and keep your profile current.'}
        </h1>
        <p>
          {claimingProvider
            ? 'Confirm this is your practice, sign in with your work email, and we’ll route you to your dashboard to fill in the rest.'
            : 'Providers listed on TMJDirectory can sign in to verify credentials, claim their profile, and submit edits for review. This portal is the first step toward owning your listing and maintaining accurate information for patients.'}
        </p>
      </section>

{claimingProvider && (
        <section className="claim-confirm">
          <div className="claim-confirm-row">
            <div className="claim-confirm-mark" aria-hidden="true">{claimingProvider.specialty?.[0] || '•'}</div>
            <div>
              <div className="claim-confirm-label">You're claiming</div>
              <div className="claim-confirm-name">{claimingProvider.name}</div>
              <div className="claim-confirm-meta">
                {claimingProvider.specialty}
                {claimingProvider.business ? <> · {claimingProvider.business}</> : null}
              </div>
            </div>
          </div>
          <p className="claim-confirm-note">
            Only the public-facing fields (name, specialty, business) are visible right now. Sign in to add address, phone, website, photo and more.
          </p>
        </section>
      )}

<div className="provider-grid">
        <section className="provider-card">
          <div className="provider-card-head">
            <h2>
              {phase === 'sent'
                ? 'Check your inbox'
                : (claimingProvider ? 'Sign in to continue' : 'Sign in or claim your listing')}
            </h2>
            <p>
              {phase === 'sent'
                ? <>We sent a sign-in link to <strong>{email}</strong>. Click it from any device — you'll land back here, signed in.</>
                : (claimingProvider
                    ? 'Use the email on file for this practice. We\'ll send a one-time sign-in link — no password to remember.'
                    : <>Enter the email on your listing and we'll send you a one-time sign-in link. <strong>Not in the directory yet?</strong> Use the contact form to request a listing first.</>)
              }
            </p>
          </div>

{phase === 'sent' ? (
            <div className="provider-form">
              <div style={{
                padding:'24px 20px', borderRadius:8,
                background:'var(--bg)', border:'1px solid var(--line)',
                textAlign:'center', marginBottom:16,
              }}>
                <div style={{fontSize:32, marginBottom:8}}>✉️</div>
                <p style={{margin:0, color:'var(--ink-2)'}}>
                  The link expires in 1 hour. Didn't see it? Check your spam folder, or{' '}
                  <button type="button" onClick={()=>setPhase('login')} style={{color:'var(--accent-ink)',textDecoration:'underline',background:'none',border:0,padding:0,cursor:'pointer'}}>send to a different email</button>.
                </p>
              </div>
            </div>
          ) : (
            <form className="provider-form" onSubmit={handleSendLink}>
              <label htmlFor="provider-email">Work email</label>
              <input
                id="provider-email"
                type="email"
                value={email}
                onChange={e=>setEmail(e.target.value)}
                placeholder="you@clinic.com"
                required
                autoComplete="email"
              />

{error && (
                <div className="provider-error" role="alert">{error}</div>
              )}

<div className="provider-cta">
                <button className="btn btn-dark" type="submit" disabled={sending}>
                  {sending ? 'Sending link…' : 'Email me a sign-in link →'}
                </button>
              </div>
              <p className="field-hint" style={{marginTop:12,fontSize:13,color:'var(--muted)'}}>
                We don't store passwords. Each sign-in uses a fresh link from Supabase Auth.
              </p>
            </form>
          )}

<div className="provider-support">
            <p>Sign-in only works for the email on a listing. To add a new practice, use the <a href="contact.html" style={{textDecoration:'underline'}}>contact form</a> and we'll get you set up.</p>
            <p><strong>Need help?</strong> Email provider-support@tmjdirectory.example</p>
          </div>
        </section>

<aside className="provider-info">
          <div className="provider-summary">
            <h2>What you get when you claim</h2>

<h3 style={{margin:'18px 0 6px',fontSize:14,letterSpacing:'.08em',textTransform:'uppercase',color:'var(--accent-ink)'}}>Own your listing</h3>
            <div className="provider-benefits">
              {[
                'Edit your name, credentials, photo, bio, address, phone, website, social links, and scheduling URL — changes go live after a quick review.',
                'Add your accepted insurances, treatment tags, and telehealth availability so patients filter directly to you.',
                'Replace the "claim it free" prompt on your card with a verified ★ badge.',
              ].map(text=>(
                <div key={text} className="provider-benefit">
                  <span className="benefit-dot" aria-hidden="true" />
                  <span>{text}</span>
                </div>
              ))}
            </div>

<h3 style={{margin:'24px 0 6px',fontSize:14,letterSpacing:'.08em',textTransform:'uppercase',color:'var(--accent-ink)'}}>Build a TMJD provider network</h3>
            <div className="provider-benefits">
              {[
                'Search and save other vetted providers in your area — orofacial dentists, PTs, sleep specialists, myofunctional therapists — to build a support web around each patient.',
                'Opt in to be reachable by other providers. Your preferred contact method is revealed only to providers who save you to their network — never publicly.',
                'See how many other providers have saved you as a referral partner. Wear it as a trust signal on your card.',
              ].map(text=>(
                <div key={text} className="provider-benefit">
                  <span className="benefit-dot" aria-hidden="true" />
                  <span>{text}</span>
                </div>
              ))}
            </div>

<h3 style={{margin:'24px 0 6px',fontSize:14,letterSpacing:'.08em',textTransform:'uppercase',color:'var(--accent-ink)'}}>See real patient engagement</h3>
            <div className="provider-benefits">
              {[
                'Weekly analytics: how many patients viewed your card, and exactly what they clicked — phone, email, website, social, schedule link.',
                'Track how many patients saved you to their favorites, and how many providers saved you to their support network.',
                'Spot which specialty filters drove the most views so you can sharpen your tags.',
              ].map(text=>(
                <div key={text} className="provider-benefit">
                  <span className="benefit-dot" aria-hidden="true" />
                  <span>{text}</span>
                </div>
              ))}
            </div>

<h3 style={{margin:'24px 0 6px',fontSize:14,letterSpacing:'.08em',textTransform:'uppercase',color:'var(--accent-ink)'}}>Premium add-ons</h3>
            <div className="provider-benefits">
              {[
                'Top-of-search placement above unclaimed listings.',
                'Dedicated full-page provider profile with photo gallery and FAQ.',
                'Priority support direct to the directory team.',
              ].map(text=>(
                <div key={text} className="provider-benefit">
                  <span className="benefit-dot" aria-hidden="true" />
                  <span>{text}</span>
                </div>
              ))}
            </div>
          </div>

<div className="provider-note">
            <h3>New to TMJDirectory?</h3>
            <p>Claiming a listing is free and takes about 2 minutes. If your practice isn't in the directory yet, sign in with a new email and we'll start a fresh listing for you.</p>
          </div>
        </aside>
      </div>
    </main>
  );
};

if (typeof window !== 'undefined') Object.assign(window, { Landing, ProviderLogin });

TMJD is complicated.
Finding help
shouldn't be.

Eleven specialties — one condition.

Recently joined the directory.

{p.name}

TMJD isn't one thing.

{x.t}

Find specialists near you.

{profile.name}

{profile.name}

How patients are finding you

What patients clicked

Views — last 7 days

Your TMJD provider network

In your network ({network.length})

{savedBy.length} provider{savedBy.length===1?'':'s'} saved you

Find your practice in the directory.

Claim submitted.

Claim pending review.

Verify you're {selected.name || selected.business}