// OtherLanding.jsx — 9B: Stakeholder hub routed by td_role_sub
// Route: #other · Links to #press, #investor, #educator, #researcher, #industry
// Compliance: AB 3030, no PHI

const { useState, useEffect } = React;

const AB3030 =
  'AI-assisted content is disclosed under California AB 3030. Information only — not clinical advice. Confirm with a licensed dentist when care decisions are involved.';

const SUB_ROLE_PANELS = {
  researcher: {
    title: 'Researchers & public health',
    desc: 'De-identified cost and outcomes data, methodology access, and IRB-reviewed academic collaboration.',
    ctas: [
      { label: 'Request data access', screen: 'researcher' },
      { label: 'Read methodology', href: '/methodology/' },
    ],
  },
  'public-health': {
    title: 'Public health & non-profit',
    desc: 'Population-level access indices, equity reporting, and de-identified ZIP3 benchmarks.',
    ctas: [
      { label: 'Request data access', screen: 'researcher' },
      { label: 'Read methodology', href: '/methodology/' },
    ],
  },
  educator: {
    title: 'Educators & training programs',
    desc: 'Curriculum modules, CE catalog licensing, and dental school integrations.',
    ctas: [
      { label: 'Educator portal', screen: 'educator' },
      { label: 'CE catalog', screen: 'ce-hub' },
    ],
  },
  journalist: {
    title: 'Journalists & media',
    desc: 'Brand assets, founder bio, fact sheet, and embargo-ready updates.',
    ctas: [
      { label: 'Press room & media kit', screen: 'press' },
      { label: 'Media inquiry form', screen: 'press' },
    ],
  },
  investor: {
    title: 'Investors & analysts',
    desc: 'Public traction overview, three-layer model, and deck request — platform metrics only.',
    ctas: [{ label: 'Investor overview', screen: 'investor' }],
  },
  regulator: {
    title: 'Regulators & policy',
    desc: 'Compliance contact, AB 3030 / SB 1120 disclosure docs, and HITL governance overview.',
    ctas: [
      { label: 'Compliance & methodology', href: '/methodology/' },
      { label: 'Press / policy contact', screen: 'press' },
    ],
  },
  'patient-adv': {
    title: 'Patient advocacy',
    desc: 'Verified information for caregivers and advocates — no star ratings, positive-only recognition.',
    ctas: [
      { label: 'Start patient triage', screen: 'chooser' },
      { label: 'Read methodology', href: '/methodology/' },
    ],
  },
  curious: {
    title: 'Exploring the domain',
    desc: 'Learn how verified dental information works — then jump into patient triage when ready.',
    ctas: [
      { label: 'Choose your path', screen: 'chooser' },
      { label: 'About the platform', screen: 'landing' },
    ],
  },
};

const ALL_SECTIONS = [
  { slug: 'researcher', emoji: '🔬', title: 'Researchers & Public Health', desc: 'De-identified data access and methodology.', screen: 'researcher' },
  { slug: 'educator', emoji: '🎓', title: 'Educators & Training', desc: 'Curriculum, CE licensing, school partnerships.', screen: 'educator' },
  { slug: 'press', emoji: '📰', title: 'Press & Media', desc: 'Media kit, founder bio, inquiry form.', screen: 'press' },
  { slug: 'investor', emoji: '📈', title: 'Investors', desc: 'Traction teaser and deck request.', screen: 'investor' },
  { slug: 'industry', emoji: '🏢', title: 'Industry Partners', desc: 'Suppliers, software, insurers, and integrations.', screen: 'industry' },
];

function readSubRole() {
  if (window.TDRoleSub?.read) return window.TDRoleSub.read();
  try {
    return (localStorage.getItem('td_role_sub') || '').trim().toLowerCase();
  } catch {
    return '';
  }
}

function writeSubRole(slug) {
  if (window.TDRoleSub?.set) window.TDRoleSub.set(slug);
  else {
    try {
      localStorage.setItem('td_role_sub', slug);
    } catch (_) {}
  }
}

function OtherLanding({ go }) {
  const [subRole, setSubRole] = useState('');

  useEffect(() => {
    setSubRole(readSubRole());
  }, []);

  const panel = subRole ? SUB_ROLE_PANELS[subRole] : null;

  const runCta = (cta) => {
    if (cta.screen && go) go(cta.screen);
    else if (cta.href) window.location.href = cta.href;
  };

  return (
    <div className="session-screen gap-screen animate-fade-in-up">
      <button type="button" className="btn btn-ghost btn-sm session-back" onClick={() => go?.('landing')} aria-label="Back to home">
        ← Home
      </button>

      <p className="session-eyebrow">STAKEHOLDERS</p>
      <h1 className="session-title">Beyond Patients &amp; Dentists</h1>
      <p className="section-subtitle session-subtitle">
        Researchers, educators, press, investors, regulators, and industry — routed by how you said you&apos;d use the platform.
      </p>

      <div className="card session-panel--highlight session-row" style={{ marginBottom: 24 }}>
        <div style={{ fontSize: 32 }}>🦷</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 600, fontSize: 15, marginBottom: 4 }}>Looking for dental care?</div>
          <p className="session-text-sm" style={{ margin: 0 }}>
            Patient and caregiver triage starts here — not in the stakeholder hub.
          </p>
        </div>
        <button type="button" className="btn btn-primary btn-sm" onClick={() => go?.('chooser')}>
          Patient triage →
        </button>
      </div>

      {!panel && (
        <>
          <p className="session-label" style={{ marginBottom: 12 }}>
            Which of these is closest?
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: 12, marginBottom: 24 }}>
            {Object.entries(SUB_ROLE_PANELS).map(([slug, p]) => (
              <button
                key={slug}
                type="button"
                className="card chooser-card-b5"
                style={{ cursor: 'pointer', textAlign: 'left', width: '100%' }}
                onClick={() => {
                  writeSubRole(slug);
                  setSubRole(slug);
                }}
              >
                <div style={{ fontWeight: 600, fontSize: 14 }}>{p.title}</div>
                <div className="session-text-xs" style={{ marginTop: 4 }}>{p.desc}</div>
              </button>
            ))}
          </div>
        </>
      )}

      {panel && (
        <div className="card session-panel--accent-left" style={{ marginBottom: 24 }}>
          <p className="session-label" style={{ marginBottom: 6 }}>
            Tailored for your role{subRole ? ` · ${subRole.replace(/-/g, ' ')}` : ''}
          </p>
          <h2 style={{ fontSize: 17, fontWeight: 700, margin: '0 0 6px', color: 'var(--txt)' }}>{panel.title}</h2>
          <p className="session-muted" style={{ fontSize: 14, marginBottom: 14 }}>{panel.desc}</p>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {panel.ctas.map((cta) => (
              <button key={cta.label} type="button" className="btn btn-primary btn-sm" onClick={() => runCta(cta)}>
                {cta.label} →
              </button>
            ))}
          </div>
        </div>
      )}

      <h2 style={{ fontSize: 14, fontWeight: 700, marginBottom: 12, color: 'var(--txt)' }}>All stakeholder paths</h2>
      <div className="session-stack">
        {ALL_SECTIONS.map((s) => (
          <div key={s.slug} className="card session-row">
            <div className="session-chooser-emoji" aria-hidden="true">{s.emoji}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 3, color: 'var(--txt)' }}>{s.title}</div>
              <p className="session-muted" style={{ fontSize: 13, margin: 0 }}>{s.desc}</p>
            </div>
            <button type="button" className="btn btn-secondary btn-sm" style={{ flexShrink: 0 }} onClick={() => go?.(s.screen)} aria-label={`Open ${s.title}`}>
              Open →
            </button>
          </div>
        ))}
      </div>

      <div className="disclaimer-banner" style={{ marginTop: 24 }}>
        {AB3030}
      </div>
      <p className="session-footnote">
        TheDentist<em>.ai</em> · Smile Mentors Inc. ·{' '}
        <a href="/methodology/" className="methodology-link">Methodology →</a>
      </p>
    </div>
  );
}

window.OtherLanding = OtherLanding;