content-image-tiles

use crate::blocks::dummy_assets;
use fandhe_frontend_core::{div, text, Node};
use fandhe_frontend_pre_styled_ui::heading::{
    heading, HeadingLevel, HeadingProps, HeadingSize, HeadingWeight,
};
use fandhe_frontend_pre_styled_ui::image::{self, AspectRatio, ImageProps, ImageShape};
use fandhe_frontend_pre_styled_ui::stat;
use fandhe_frontend_pre_styled_ui::text::{self as styled_text, TextProps, TextVariant};
use fandhe_frontend_pre_styled_ui::Size;

/// 本文の段落群（架空文言、1〜2 文程度に短くして検索インデックスの
/// サイズを抑える）。
const PARAGRAPHS: [&str; 2] = [
    "画像タイルは既存の image パーツを並べるだけで組み立てており、独自の画像コンポーネントは追加していません。",
    "下段の数値指標は stat パーツをそのまま並べた合成であり、送信処理やデータ取得は行いません。",
];

/// 下段の数値指標（架空値、`(ラベル, 値)` の組）。
const STATS: [(&str, &str); 4] = [
    ("導入チーム", "1,200+"),
    ("平均応答", "120ms"),
    ("稼働継続", "99.9%"),
    ("対応言語", "18"),
];

/// タイル 1 枚（正方形・角丸の商品プレースホルダー画像）。偶数番目
/// （2・4 枚目）は `data-blocks-content-image-tiles-offset` を付与して
/// 下へずらす（モジュール doc「タイルの配置」節）。
fn tile(offset: bool) -> Node {
    let mut attrs = vec![("class", "blocks-content-image-tiles-tile")];
    if offset {
        attrs.push(("data-blocks-content-image-tiles-offset", ""));
    }
    div(
        attrs,
        vec![image::image(
            &ImageProps {
                aspect_ratio: AspectRatio::Square,
                shape: ImageShape::Rounded,
                ..ImageProps::new(dummy_assets::PRODUCT_SRC, "")
            },
            vec![("data-blocks-content-image-tiles-image", "")],
        )],
    )
}

/// 数値指標 1 件分（`stat::root` + `label`/`value_text`）。
fn stat_item(label: &str, value: &str) -> Node {
    stat::root(
        Size::Md,
        vec![("data-blocks-content-image-tiles-stat", "")],
        vec![
            stat::label(vec![], vec![text(label)]),
            stat::value_text(vec![], vec![text(value)]),
        ],
    )
}

/// `content-image-tiles` の Demo 本体。呼び出しごとに同一の `Node` を
/// 返す純関数（モジュール doc「レイアウトとブレークポイント」節）。
pub fn demo() -> Node {
    let header = heading(
        HeadingLevel::H3,
        &HeadingProps {
            size: HeadingSize::Xl3,
            weight: HeadingWeight::Bold,
        },
        vec![],
        vec![text("既存部品だけで画像タイルと指標を組み立てる")],
    );

    let body = div(
        vec![("class", "blocks-content-image-tiles-body")],
        PARAGRAPHS
            .iter()
            .map(|paragraph| {
                styled_text::text(
                    &TextProps {
                        variant: TextVariant::Muted,
                        ..TextProps::default()
                    },
                    vec![("data-blocks-content-image-tiles-paragraph", "")],
                    vec![text(*paragraph)],
                )
            })
            .collect(),
    );

    let tiles = div(
        vec![("class", "blocks-content-image-tiles-tiles")],
        vec![tile(false), tile(true), tile(false), tile(true)],
    );

    let columns = div(
        vec![("class", "blocks-content-image-tiles-columns")],
        vec![body, tiles],
    );

    let stats = div(
        vec![("class", "blocks-content-image-tiles-stats")],
        STATS
            .iter()
            .map(|(label, value)| stat_item(label, value))
            .collect(),
    );

    div(
        vec![("class", "blocks-content-image-tiles-layout")],
        vec![header, columns, stats],
    )
}