section-heading-stats

const REPO: &str = "https://github.com/Fandhe-AI/fandhe-frontend";

use fandhe_frontend_core::{div, el, text, Node};
use fandhe_frontend_pre_styled_ui::heading::{
    heading, HeadingLevel, HeadingProps, HeadingSize, HeadingWeight,
};
use fandhe_frontend_pre_styled_ui::link::{self, LinkProps};
use fandhe_frontend_pre_styled_ui::recipe::ColorPalette;
use fandhe_frontend_pre_styled_ui::stat;
use fandhe_frontend_pre_styled_ui::text::{self as styled_text, TextProps, TextSize, TextVariant};
use fandhe_frontend_pre_styled_ui::Size;

/// リンク列 1 件分のダミーデータ（実在する本リポジトリ配下の URL のみを
/// 使う。架空の遷移先は用意しない）。
struct LinkItem {
    label: &'static str,
    href: &'static str,
}

/// リンク列（4 件、可視テキストが相異なるため `aria-label` は付与しない）。
const LINKS: [LinkItem; 4] = [
    LinkItem {
        label: "リポジトリを見る",
        href: REPO,
    },
    LinkItem {
        label: "Issue 一覧",
        href: "https://github.com/Fandhe-AI/fandhe-frontend/issues",
    },
    LinkItem {
        label: "Pull Requests",
        href: "https://github.com/Fandhe-AI/fandhe-frontend/pulls",
    },
    LinkItem {
        label: "リリース履歴",
        href: "https://github.com/Fandhe-AI/fandhe-frontend/releases",
    },
];

/// 数値指標 1 件分のダミーデータ（架空、実データ・実企業とは無関係）。
struct StatItem {
    label: &'static str,
    value: &'static str,
}

/// 数値指標一覧（架空、4 件）。
const STATS: [StatItem; 4] = [
    StatItem {
        label: "稼働率",
        value: "99.9%",
    },
    StatItem {
        label: "平均対応時間",
        value: "12 分",
    },
    StatItem {
        label: "導入チーム数",
        value: "480",
    },
    StatItem {
        label: "満足度",
        value: "4.8 / 5",
    },
];

/// 矢印付きリンク 1 件（可視テキスト + `aria-hidden` の矢印文字）。
fn arrow_link(item: &LinkItem) -> Node {
    el(
        "li",
        vec![],
        vec![link::root(
            item.href,
            &LinkProps {
                external: true,
                palette: ColorPalette::Accent,
                ..LinkProps::default()
            },
            vec![("data-blocks-section-heading-stats-link", "")],
            vec![
                text(item.label),
                el("span", vec![("aria-hidden", "true")], vec![text(" →")]),
            ],
        )],
    )
}

/// 数値指標 1 件（`stat::root` + `label`/`value_text`）。
fn stat_item(item: &StatItem) -> Node {
    stat::root(
        Size::Lg,
        vec![("data-blocks-section-heading-stats-stat", "")],
        vec![
            stat::label(vec![], vec![text(item.label)]),
            stat::value_text(vec![], vec![text(item.value)]),
        ],
    )
}

/// `section-heading-stats` の Demo 本体（大見出し + リード文 + 矢印付き
/// リンク 4 点 + 数値指標 4 件）。呼び出しごとに同一の `Node` を返す純関数。
pub fn demo() -> Node {
    let intro = div(
        vec![("class", "blocks-section-heading-stats-intro")],
        vec![
            heading(
                HeadingLevel::H3,
                &HeadingProps {
                    size: HeadingSize::Xl3,
                    weight: HeadingWeight::Bold,
                },
                vec![],
                vec![text("開発の歩みを数字で見る")],
            ),
            styled_text::text(
                &TextProps {
                    size: TextSize::Lg,
                    variant: TextVariant::Muted,
                    ..TextProps::default()
                },
                vec![],
                vec![text(
                    "リポジトリの活動状況と主要な導線をまとめました。数値はすべて説明用の架空値です。",
                )],
            ),
        ],
    );

    let links = el(
        "ul",
        vec![("class", "blocks-section-heading-stats-links")],
        LINKS.iter().map(arrow_link).collect(),
    );

    let stats = div(
        vec![("class", "blocks-section-heading-stats-stats")],
        STATS.iter().map(stat_item).collect(),
    );

    div(
        vec![("class", "blocks-section-heading-stats-layout")],
        vec![intro, links, stats],
    )
}