rebuild the app on a typed, modular structure wired to the real API

The whole app lived in one 3,071-line App.tsx on a Figma scaffold (60 unused
packages, 45 unused UI components, no type-check). The live site could not
reach the backend, Persian-keyboard digits were erased from the phone field,
guests were signed out after an hour, "mark read" hit a method the server
does not accept (405), and iOS Safari blocked the payment window.

What changed:
- src/ split into api/ (one typed client: timeouts, GET retry, single-flight
  refresh, SSE), screens/ (one file each), components/, state/, nav/, lib/.
- The API address is configuration only: public/config.js at runtime, then
  VITE_API_BASE_URL at build time, then same-origin /api. No domain in code.
- Responsive shell instead of a fixed 390x844 phone frame; self-hosted
  Vazirmatn instead of Google Fonts; strict TypeScript, `npm run build`
  type-checks first.
- Everything on the handoff list: tutor answers keep their line breaks, have
  thumbs up/down, follow-ups, "from the book" badge, retry, history that
  survives tab switches and reloads, "why was I wrong" from a wrong answer
  with questionId; question reports; hearts with maxHearts/unlimited and a
  no-hearts screen with the refill time; result screen and a visible error
  when lesson completion fails; subscription status, badge, discount code
  before the gateway and the payment-return message; guest refresh token;
  6-digit OTP with resend timer; age saved as a Jalali birthYear; PATCH
  read-all; leaderboard refetched on open with "you" highlighted; selected
  companion shown across the app; logout that revokes the refresh token.
- New screens for endpoints that had none: profile, streak calendar,
  support tickets and bug reports, parents, invite-a-friend (with ?ref=
  tracking), guest-to-phone upgrade.
- Browser/phone back button walks the screen stack.

Checked with a headless-Chrome walkthrough against a local backend at
390x844 and 360x740 (fresh guest: onboarding, setup, a full lesson, map,
island sheet, every tab and sub-screen, one real tutor question, reload,
logout): no console errors, no failed API calls. Real SMS login and a real
Zarinpal payment were not exercised.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/screens/LessonScreen.tsx

@@ -0,0 +1,102 @@
+import { Brain, Play, Zap } from 'lucide-react';
+import { api } from '@/api';
+import { useAppData } from '@/state/AppData';
+import { findNode, findNodeOfLesson, unitColor } from '@/state/curriculum';
+import { useNav } from '@/nav/Navigator';
+import { useAsync } from '@/lib/useAsync';
+import { SeyarMascot } from '@/mascots/SeyarMascot';
+import { moodFromServer } from '@/mascots/seyar';
+import { ErrorState, LoadingState, PrimaryButton, Screen, ScreenBody, ScreenHeader } from '@/components/ui';
+import { toFa } from '@/lib/format';
+
+/** معرفیِ درس، پیش از تمرین. */
+export function LessonScreen({ lessonId, nodeId }: { lessonId: number; nodeId?: string }) {
+  const { home, companion } = useAppData();
+  const nav = useNav();
+  const intro = useAsync(() => api.lesson.intro(lessonId), [lessonId]);
+  const ref = findNode(home, nodeId) ?? findNodeOfLesson(home, lessonId);
+  const color = ref ? unitColor(ref.unitIndex) : '#ED6956';
+  const data = intro.data;
+
+  return (
+    <Screen>
+      <ScreenHeader
+        title={data?.title ?? '…'}
+        color={color}
+        back
+        mascot={{ char: companion, mood: moodFromServer(data?.mascotAnimation), size: 72 }}
+        subtitle={
+          ref && (
+            <span className="inline-flex items-center gap-1.5 rounded-full bg-white/15 px-3 py-1">
+              {/* ترتیبِ lessonIds «درسِ بعدی اول» است، نه ترتیبِ کتاب؛ پس شماره‌ی درس از آن درنمی‌آید. */}
+              <Zap size={11} fill="white" /> {ref.node.title} · {toFa(ref.node.lessonIds.length)} درس
+            </span>
+          )
+        }
+      />
+
+      <ScreenBody className="flex flex-col gap-4">
+        {intro.loading ? (
+          <LoadingState text="دارم درس رو میارم…" />
+        ) : intro.error || !data ? (
+          <ErrorState error={intro.error} onRetry={intro.reload} />
+        ) : (
+          <>
+            <div className="flex items-start gap-3">
+              <SeyarMascot char="sigma" mood="idle" size={56} />
+              <div className="flex-1 rounded-3xl rounded-tr-sm border border-line bg-white p-4 shadow-sm">
+                <p className="whitespace-pre-line text-sm leading-[1.95] text-body">{data.introText}</p>
+              </div>
+            </div>
+
+            {data.kind === 'video' && data.videoUrl && (
+              <video src={data.videoUrl} controls playsInline preload="metadata" className="w-full rounded-3xl bg-black" />
+            )}
+
+            {data.example && (
+              <section className="rounded-3xl border border-line bg-white p-4">
+                <h2 className="mb-2 text-xs font-black text-muted">مثال</h2>
+                <p className="whitespace-pre-line text-sm leading-[1.95] text-ink">{data.example}</p>
+              </section>
+            )}
+
+            {data.steps.length > 0 && (
+              <section className="rounded-3xl border border-line bg-white p-4">
+                <h2 className="mb-3 text-xs font-black text-muted">قدم‌به‌قدم</h2>
+                <ol className="flex flex-col gap-2.5">
+                  {data.steps.map((step, i) => (
+                    <li key={i} className="flex gap-3 text-sm leading-7 text-ink">
+                      <span className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full text-xs font-black text-white" style={{ backgroundColor: color }}>
+                        {toFa(i + 1)}
+                      </span>
+                      <span className="flex-1 whitespace-pre-line">{step}</span>
+                    </li>
+                  ))}
+                </ol>
+              </section>
+            )}
+
+            <div className="mt-auto flex flex-col gap-3 pt-2">
+              {data.questionCount === 0 ? (
+                <div className="rounded-2xl border-2 border-dashed border-[#dedced] bg-white py-4 text-center text-sm font-bold text-muted">
+                  تمرینِ این درس به‌زودی اضافه می‌شه
+                </div>
+              ) : (
+                <PrimaryButton color={color} onClick={() => nav.replace({ name: 'quiz', lessonId, nodeId: ref?.node.id ?? nodeId })}>
+                  <Play size={18} fill="white" /> شروعِ تمرین ({toFa(data.questionCount)} سوال)
+                </PrimaryButton>
+              )}
+              <button
+                type="button"
+                onClick={() => nav.push({ name: 'ask', lessonId })}
+                className="flex items-center justify-center gap-2 rounded-2xl bg-[#F5F1FF] py-3 text-sm font-bold text-[#7857E0]"
+              >
+                <Brain size={16} /> درباره‌ی این درس از پی بپرس
+              </button>
+            </div>
+          </>
+        )}
+      </ScreenBody>
+    </Screen>
+  );
+}