/* global React */ // ── Report card (individual student) ─────────────────────────────────────── function ReportCard({ report, onBack }) { const rootRef = React.useRef(null); useReveal(rootRef); const r = report; const isLeanFix = r.bucket === "lean_fixes"; return (
{/* ── Hero — true black gallery ─────────────────────────────────── */}
Individual Report · {r.window.weeks}-week window

{r.student.name}

{r.window.start} — {r.window.end} · {r.geography.join(" · ")}

{r.campaign}.

{/* Hero stats — non-comparative */}
{isLeanFix && ( <>
Coaching session in progress

Holding the report until lean fixes land.

{r.student.name} is in a coaching pass on LinkedIn presence and messaging. The full report — funnel, conversations, projections — will publish after the session.

{r.caveats && r.caveats.length > 0 && (
About these numbers

A floor, not a ceiling.

    {r.caveats.map((c, i) => (
  • · {c}
    • ))}
)} )} {!isLeanFix && (<> {/* Funnel + cadence — parchment */}
{/* Pipeline — black */}
Opportunity

Active conversations, valued.

At $1K–$2K monthly over a 3-month minimum, each conversation near closing represents $3K–$6K in potential US engagement.

At current pace · extrapolation, not prediction
{/* Reply intelligence — white */}
{/* Insights — parchment */}
{r.caveats && r.caveats.length > 0 && (
About these numbers

A floor, not a ceiling.

    {r.caveats.map((c, i) => (
  • · {c}
    • ))}
)} )}
); } function CaveatBadge({ caveats }) { const [open, setOpen] = React.useState(false); if (!caveats || caveats.length === 0) return null; return (
{open && (
About these numbers
)}
); } function HeroFact({ label, val, sub, highlight, last, border }) { return (
{label}
{val}
{sub}
); } function SectionHead({ eyebrow, title, sub }) { return (
{eyebrow}

{title}

{sub &&

{sub}

}
); } // ── Funnel ───────────────────────────────────────────────────────────────── function Funnel({ funnel }) { const stages = [ { label: "Leads targeted", value: funnel.leads_targeted }, { label: "Requests sent", value: funnel.requests_sent }, { label: "Connections accepted", value: funnel.accepted }, { label: "Inbound replies", value: funnel.replied }, { label: "Conversations opened", value: funnel.positive }, ]; const max = stages[0].value; return (
{stages.map((s, i) => { const pct = (s.value / max) * 100; return (
{s.label}
{s.value.toLocaleString()}
{i === 0 ? "—" : `${((s.value / stages[i-1].value) * 100).toFixed(1)}% step`}
); })}
); } // ── Timeline ──────────────────────────────────────────────────────────────── function Timeline({ weekly }) { const ref = React.useRef(null); const W = 1180, H = 280, PL = 50, PR = 30, PT = 30, PB = 50; const innerW = W - PL - PR, innerH = H - PT - PB; const maxR = Math.max(...weekly.map(w => w.replies)) || 1; const maxA = Math.max(...weekly.map(w => w.ai)) || 1; const x = i => PL + (i / (weekly.length - 1)) * innerW; const yR = v => PT + innerH - (v / maxR) * innerH; const yA = v => PT + innerH - (v / maxA) * innerH; const repliesPath = weekly.map((w, i) => `${i === 0 ? "M" : "L"}${x(i)},${yR(w.replies)}`).join(" "); const aiPath = weekly.map((w, i) => `${i === 0 ? "M" : "L"}${x(i)},${yA(w.ai)}`).join(" "); React.useEffect(() => { const svg = ref.current; if (!svg) return; const io = new IntersectionObserver(es => es.forEach(e => { if (e.isIntersecting) { svg.querySelectorAll(".draw").forEach(p => { const len = p.getTotalLength(); p.style.strokeDasharray = len; p.style.strokeDashoffset = len; p.getBoundingClientRect(); p.style.transition = "stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1)"; p.style.strokeDashoffset = 0; }); io.disconnect(); } }), { threshold: 0.3 }); io.observe(svg); return () => io.disconnect(); }, []); return (
Outbound AI messages
Inbound replies
{[0,0.25,0.5,0.75,1].map(t => )} {weekly.map((w, i) => {w.week})} {weekly.map((w, i) => )} {weekly.map((w, i) => ( {w.replies} ))}
); } // ── Pipeline ──────────────────────────────────────────────────────────────── function Pipeline({ pipeline }) { const fmt = n => n >= 1e6 ? `$${(n/1e6).toFixed(2)}M` : `$${(n/1000).toFixed(n >= 100000 ? 0 : 1)}K`; return (
Opportunity in active conversation
{fmt(pipeline.currentLow)} — {fmt(pipeline.currentHigh)}
{pipeline.basis || "—"}
If conversation pace holds
{pipeline.projections.map(p => (
{p.label}
{fmt(p.low)}–{fmt(p.high)}
+{p.positive} new conversations
))}
); } // ── Reply intelligence ───────────────────────────────────────────────────── function ReplyIntel({ report }) { const sentTotal = report.sentiment.reduce((a, b) => a + b.count, 0); return (

Sentiment

{report.sentiment.map(s => (
{s.label} {s.count} {((s.count / sentTotal) * 100).toFixed(0)}%
))}

Intent

); } function toneColor(t) { return t === "positive" ? "var(--positive)" : t === "negative" ? "var(--negative)" : "var(--neutral)"; } function Donut({ data, total }) { const size = 200, stroke = 28, r = (size - stroke) / 2, c = 2 * Math.PI * r; let off = 0; return ( {data.map((d, i) => { const len = (d.count / total) * c; const seg = ; off += len; return seg; })} ); } function BarList({ items }) { const max = Math.max(...items.map(i => i.count)); return (
{items.map(i => (
{i.label}
{i.count}
))}
); } function PersonaCard({ title, items }) { const known = items.filter(i => i.label !== "Unknown"); const unknown = items.find(i => i.label === "Unknown")?.count || 0; return (

{title}

{unknown > 0 && {unknown} unknown}
); } // ── Insights ──────────────────────────────────────────────────────────────── function Insights({ report }) { return (
); } function InsightCard({ title, items, tone }) { const color = tone === "positive" ? "var(--positive)" : "var(--negative)"; const empty = !items || items.length === 0; return (
{title}
{empty && (
No clear patterns surfaced from this student's threads.
)}
    {(items || []).map((t, i) => (
  1. {String(i+1).padStart(2,"0")} {t}
    2. ))}
); } window.ReportCard = ReportCard;