Insight card

v_flex()
    .id("insight-story-scroll")
    .debug_selector(|| "insight-story-scroll".into())
    // 256px clipped the sparkline charts mid-curve; 420px
    // shows the full card — metrics, charts, and footer.
    .h(px(420.))
    .max_h(px(420.))
    .flex_none()
    .gap_2()
    .track_scroll(&self.insight_scroll)
    .overflow_y_scrollbar()
    .child(
        InsightCard::new(
            "demand-insight",
            "Demand changed across top flavors",
        )
        .body(
            "Mint Chip softened this week while Vanilla and Strawberry gained. \
             The mix has shifted enough to review the next production run.",
        )
        .page(1, 3)
        .metrics([
            InsightMetric::new("mint", "Mint Chip", "$2,377.66")
                .change("down 4.41%", InsightTrend::Down),
            InsightMetric::new("vanilla", "Vanilla", "$3,104.20")
                .change("up 8.17%", InsightTrend::Up),
            InsightMetric::new("strawberry", "Strawberry", "$1,842.50")
                .change("flat 0.08%", InsightTrend::Flat),
        ])
        .series(
            "Weekly flavor demand",
            [
                InsightPoint::new("Mon", 18.0),
                InsightPoint::new("Tue", 22.0),
                InsightPoint::new("Wed", 20.0),
                InsightPoint::new("Thu", 27.0),
                InsightPoint::new("Fri", 25.0),
                InsightPoint::new("Sat", 31.0),
            ],
        )
        .chart_summary(
            "Weekly flavor demand rose overall from 18 orders on Monday to 31 on Saturday, with a midweek dip.",
        )
        .follow_up("Rebalance the next flavor run")
        .on_event(cx.listener(|_, event: &InsightEvent, _, _| {
            println!("insight event: {event:?}");
        })),
    )
    .child(
        div()
            .debug_selector(|| "insight-story-end".into())
            .h(px(1.)),
    )