bento-staggered

use fandhe_frontend_core::{div, el, text, Node};
use fandhe_frontend_pre_styled_ui::card::{self, CardProps, CardVariant};
use fandhe_frontend_pre_styled_ui::icon::{icon, IconProps};
use fandhe_frontend_pre_styled_ui::recipe::stagger_index_style;
use fandhe_frontend_pre_styled_ui::Size;

/// 装飾用の自作幾何アイコン（lucide 等の著作物を複製しないための単純図形、
/// `sidebar_07::geo_icon` と同型の判断）。`children` は呼び出し側が組み立てる
/// `path`/`circle`/`rect` 等の SVG 子ノード。
fn geo_icon(children: Vec<Node>) -> Node {
    icon(&IconProps::default(), vec![], children)
}

/// 1 枚分のセルデータ（架空の SaaS 機能名 + 1 行説明 + アイコン子ノード）。
struct BentoItem {
    title: &'static str,
    description: &'static str,
    icon_children: fn() -> Vec<Node>,
}

const ITEMS: [BentoItem; 6] = [
    BentoItem {
        title: "Realtime Sync",
        description: "複数デバイス間の状態を数百ミリ秒以内に同期します。",
        icon_children: || {
            vec![el(
                "path",
                vec![("d", "M12 3v6l4-3-4-3zM12 21v-6l-4 3 4 3z")],
                vec![],
            )]
        },
    },
    BentoItem {
        title: "Smart Search",
        description: "自然文クエリからインデックス済みデータを検索します。",
        icon_children: || {
            vec![
                el(
                    "circle",
                    vec![
                        ("cx", "10"),
                        ("cy", "10"),
                        ("r", "6"),
                        ("fill", "none"),
                        ("stroke", "currentColor"),
                        ("stroke-width", "2"),
                    ],
                    vec![],
                ),
                el(
                    "path",
                    vec![
                        ("d", "M15 15l6 6"),
                        ("stroke", "currentColor"),
                        ("stroke-width", "2"),
                    ],
                    vec![],
                ),
            ]
        },
    },
    BentoItem {
        title: "Access Control",
        description: "ロールベースの権限管理で機密データを保護します。",
        icon_children: || {
            vec![el(
                "path",
                vec![("d", "M12 2l8 4v6c0 5-3.5 8-8 10-4.5-2-8-5-8-10V6z")],
                vec![],
            )]
        },
    },
    BentoItem {
        title: "Automation Rules",
        description: "トリガーと条件を組み合わせた業務フローを自動化します。",
        icon_children: || vec![el("path", vec![("d", "M4 12h6l2-4 4 8 2-4h2")], vec![])],
    },
    BentoItem {
        title: "Usage Insights",
        description: "利用状況を可視化し、傾向を素早く把握できます。",
        icon_children: || {
            vec![
                el(
                    "rect",
                    vec![("x", "4"), ("y", "12"), ("width", "3"), ("height", "8")],
                    vec![],
                ),
                el(
                    "rect",
                    vec![("x", "10"), ("y", "8"), ("width", "3"), ("height", "12")],
                    vec![],
                ),
                el(
                    "rect",
                    vec![("x", "16"), ("y", "4"), ("width", "3"), ("height", "16")],
                    vec![],
                ),
            ]
        },
    },
    BentoItem {
        title: "Global CDN",
        description: "世界各地のエッジノードから低遅延で配信します。",
        icon_children: || {
            vec![el(
                "path",
                vec![("d", "M12 2a10 10 0 100 20 10 10 0 000-20zM2 12h20M12 2c2.5 2.5 4 6.2 4 10s-1.5 7.5-4 10c-2.5-2.5-4-6.2-4-10s1.5-7.5 4-10z")],
                vec![],
            )]
        },
    },
];

/// 1 枚分の bento セル（`card`）を組み立てる。`index` は 0 始まりの
/// 表示順であり、`--fandhe-motion-stagger-index` へそのまま渡す
/// （モジュール doc「scroll-driven stagger の実体」節参照）。`is_hero`
/// は最初のセルのみ `true` で、`data-blocks-bento-staggered-hero` を付与し
/// [`LAYOUT_CSS`] 側の `grid-column`/`grid-row` span へつなげる。
fn bento_card(item: &BentoItem, index: usize, is_hero: bool) -> Node {
    let style = stagger_index_style(index);
    let mut attrs: Vec<(&str, &str)> = vec![
        ("data-blocks-bento-staggered-item", ""),
        ("style", style.as_str()),
    ];
    if is_hero {
        attrs.push(("data-blocks-bento-staggered-hero", ""));
    }
    card::root(
        CardProps {
            variant: CardVariant::Outline,
            size: Size::Md,
        },
        attrs,
        vec![
            card::header(
                vec![],
                vec![
                    div(
                        vec![("data-blocks-bento-staggered-icon-wrap", "")],
                        vec![geo_icon((item.icon_children)())],
                    ),
                    card::title(vec![], vec![text(item.title)]),
                ],
            ),
            card::body(
                vec![],
                vec![card::description(vec![], vec![text(item.description)])],
            ),
        ],
    )
}

/// `bento-staggered` の Demo 本体。呼び出しごとに同一の `Node` を返す
/// 純関数。1 枚目（`Realtime Sync`）を hero（2x2 span）として配置し、
/// 残り 5 枚を通常サイズで並べる。
pub fn demo() -> Node {
    let cells: Vec<Node> = ITEMS
        .iter()
        .enumerate()
        .map(|(i, item)| bento_card(item, i, i == 0))
        .collect();
    div(vec![("class", "blocks-bento-staggered-grid")], cells)
}