## Frontend notes: rendering chart JSON blocks

- Markdown now emits chart data as fenced code blocks with language tags like `json:seasonality`, `json:competitors`, `json:audienceSegmentation`, `json:channelsPotential`, and `json:funnel`.
- Each block is pretty-printed JSON; parse the string inside the fence to feed the relevant chart component.
- Headings stay the same; only tables were replaced by these code fences.

### Expected shapes

- `seasonality` – object map: `{ "Январь": 70, "Февраль": 60, ... }`.
- `competitors` – array of objects: `{ name, reach, activity, reviews, strengths, weaknesses }`.
- `audienceSegmentation` – object with optional arrays: `ageGroups[]`, `genders[]`, `segments[]`, each item `{ label, value }`.
- `channelsPotential` – array of objects: `{ name, potential, justification }`.
- `funnel` – array of objects: `{ stage, value, conversion }`.

### Rendering hook (React + react-markdown)

```javascript
components={{
  code({ node, inline, className, children, ...props }) {
    const match = /language-(\w+):([\w-]+)/.exec(className || "");
    if (!inline && match && match[1] === "json") {
      const chartType = match[2];
      const data = JSON.parse(String(children).replace(/\n$/, ""));
      switch (chartType) {
        case "seasonality": return <SeasonalityChart data={data} />;
        case "competitors": return <CompetitorsChart data={data} />;
        case "audienceSegmentation": return <AudienceSegmentationChart data={data} />;
        case "channelsPotential": return <ChannelsPotentialChart data={data} />;
        case "funnel": return <FunnelChart data={data} />;
        default: return <pre>{children}</pre>;
      }
    }
    return <code className={className} {...props}>{children}</code>;
  }
}}
```

### Tips

- Trim trailing newline before `JSON.parse` to avoid parse errors.
- Keep a safe fallback (`<pre>`) for unknown chart types.
- If using another markdown renderer, ensure it preserves the code fence language string in a similar `json:<chart>` format.