// PatientRouter — post-teaser handoff (#patient-router?role=patient|pro|…).
// Does not replace classic landing; routes by role into existing hash screens.

const ROUTER_ROLES = new Set(['patient', 'pro', 'practice', 'industry', 'other']);

function parseRouterRole() {
  const hash = window.location.hash || '';
  const q = hash.indexOf('?');
  if (q < 0) return null;
  const role = new URLSearchParams(hash.slice(q + 1)).get('role');
  const norm = String(role || '').trim().toLowerCase();
  return ROUTER_ROLES.has(norm) ? norm : null;
}

function PatientRouter({ go }) {
  const role = parseRouterRole();

  React.useEffect(() => {
    if (!go || !role) {
      if (go) go('landing');
      return;
    }
    if (role === 'patient') go('triage');
    else if (role === 'pro' || role === 'practice') {
      try { localStorage.setItem('td_role', 'dentist'); } catch (_) {}
      go('professional-dashboard');
    } else if (role === 'industry') go('industry');
    else if (role === 'other') go('other');
    else go('landing');
  }, [go, role]);

  if (!role) return null;

  const label = {
    patient: 'Patient',
    pro: 'Dental professional',
    practice: 'Practice',
    industry: 'Industry',
    other: 'Other',
  }[role];

  return (
    <div className="screen-container gap-screen animate-fade-in-up">
      <p className="t-eyebrow">Stakeholder router</p>
      <h1 className="section-title" style={{ marginTop: 8 }}>Welcome, {label}.</h1>
      <p className="section-subtitle" style={{ marginTop: 12 }}>
        Routing you to the right starting point…
      </p>
      <div className="disclaimer-banner" style={{ marginTop: 16 }}>
        Information, not diagnosis — confirm with a licensed dentist.
      </div>
      <p className="section-subtitle" style={{ marginTop: 24 }}>
        <a href="/methodology/" className="methodology-link">How we measure recognition →</a>
      </p>
    </div>
  );
}

window.PatientRouter = PatientRouter;