Create component/ActivityPack.jsx

component/ActivityPack.jsx

@@ -0,0 +1,39 @@
+export default function ActivityPack({ data }) {
+  if (!data) return null;
+  return (
+    <div className="card mt-4">
+      <h3 className="text-lg font-semibold">{data.activity_name}</h3>
+      <p className="text-sm text-slate-600">{data.objective}</p>
+
+      <details className="mt-3">
+        <summary className="font-medium">Scenario & Characters</summary>
+        <p className="mt-2 text-sm">{data.scenario}</p>
+        {data.character_sketches?.map((c,i)=>(
+          <div key={i} className="mt-2">
+            <div className="font-semibold">{c.role}</div>
+            <div className="text-sm text-slate-600">{c.description}</div>
+          </div>
+        ))}
+      </details>
+
+      <details className="mt-3">
+        <summary className="font-medium">Trainer Notes (Run-sheet)</summary>
+        <ol className="mt-2 list-decimal pl-5">
+          {data.trainer_notes?.map((n,i)=>(<li key={i} className="text-sm">{n}</li>))}
+        </ol>
+      </details>
+
+      <details className="mt-3">
+        <summary className="font-medium">Debrief Questions</summary>
+        <ul className="mt-2 list-disc pl-5">
+          {data.debrief_questions?.map((q,i)=>(<li key={i} className="text-sm">{q}</li>))}
+        </ul>
+      </details>
+
+      <div className="mt-4 flex gap-2">
+        <button className="flex-1 border p-2 rounded">Export PDF</button>
+        <button className="flex-1 border p-2 rounded">Copy Text</button>
+      </div>
+    </div>
+  );
+}