/* ============================================================
   COURSEDY — Public CMS page view (/p/<slug>)
   ============================================================ */
function PublicPageView({ go, params }) {
  const slug = params?.slug;
  const [page, setPage] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!slug) return;
    let cancelled = false;
    window.API.getPublicPage(slug).then(d => {
      if (!cancelled) setPage(d.page);
    }).catch(e => {
      if (!cancelled) setError(e?.message || 'Not found');
    });
    return () => { cancelled = true; };
  }, [slug]);

  if (error) {
    return (
      <div className="center" style={{ minHeight: '100vh', background: 'var(--paper)', flexDirection: 'column', padding: 32 }}>
        <div className="card" style={{ padding: 24, maxWidth: 420, textAlign: 'center' }}>
          <div style={{ fontSize: 18, fontWeight: 700, marginBottom: 8 }}>Page not found</div>
          <div className="muted" style={{ fontSize: 14, marginBottom: 14 }}>{error}</div>
          <Btn variant="outline" size="sm" onClick={() => go('landing')}>Back to home</Btn>
        </div>
      </div>
    );
  }
  if (!page) {
    return (
      <div className="center" style={{ minHeight: '100vh', background: 'var(--paper)' }}>
        <span className="spinner dark" style={{ width: 16, height: 16 }} />
      </div>
    );
  }

  return (
    <div style={{ minHeight: '100vh', background: 'var(--paper)' }} data-screen-label="Public page">
      <div style={{ borderBottom: '1px solid var(--line)', background: 'var(--surface)' }}>
        <div className="row" style={{ maxWidth: 1080, margin: '0 auto', padding: '14px 32px' }}>
          <Logo onClick={() => go('landing')} />
          <div className="grow" />
          <Btn variant="ghost" size="sm" onClick={() => go('signin')}>Sign in</Btn>
        </div>
      </div>
      <div style={{ maxWidth: 760, margin: '0 auto', padding: '56px 32px 96px' }}>
        <h1 style={{ fontSize: 'clamp(28px, 4vw, 40px)', letterSpacing: '-0.03em', lineHeight: 1.15 }}>{page.title}</h1>
        <div style={{ marginTop: 28 }}>
          <MarkdownViewer value={page.body || ''} />
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { PublicPageView });