error-page-split-links

use fandhe_frontend_core::{div, el, text, Node};
use fandhe_frontend_pre_styled_ui::empty_state::{self, EmptyStateProps};
use fandhe_frontend_pre_styled_ui::heading::{heading, HeadingLevel, HeadingProps, HeadingSize};
use fandhe_frontend_pre_styled_ui::icon::{icon, IconProps};
use fandhe_frontend_pre_styled_ui::item::{self, ItemMediaVariant, ItemRootProps, ItemVariant};
use fandhe_frontend_pre_styled_ui::text::{
    self as styled_text, TextProps, TextVariant, TextWeight,
};

/// 自作の幾何アイコン（線画。モジュール doc「アイコンは自作の単純図形」
/// 節参照）。`path` へ `fill="none"` + `stroke="currentColor"` を明示し、
/// `icon` の `<svg>` 側が固定で持つ `fill="currentColor"`（塗り面）を
/// 上書きして線画（ストローク）として描画する（`contact_image_info.rs` の
/// `geo_icon` と同型の私有ヘルパ、private のため共有できず本ファイル内へ
/// 複製する）。
fn geo_icon(path_d: &'static str) -> Node {
    icon(
        &IconProps::default(),
        vec![],
        vec![el(
            "path",
            vec![
                ("d", path_d),
                ("fill", "none"),
                ("stroke", "currentColor"),
                ("stroke-width", "2"),
                ("stroke-linecap", "round"),
                ("stroke-linejoin", "round"),
            ],
            vec![],
        )],
    )
}

/// ホームアイコン（三角の屋根 + 台形の家）。
fn home_icon() -> Node {
    geo_icon("M3 11l9-8 9 8 M5 10v10h5v-6h4v6h5V10")
}

/// ガイド（ドキュメント）アイコン（角の折れた紙 + 本文の横線 2 本）。
fn guides_icon() -> Node {
    geo_icon("M6 3h8l4 4v14H6z M14 3v4h4 M9 12h6 M9 16h6")
}

/// examples アイコン（並んだ 4 枠、サンプル一覧のイメージ）。
fn examples_icon() -> Node {
    geo_icon("M4 4h6v6H4z M14 4h6v6h-6z M4 14h6v6H4z M14 14h6v6h-6z")
}

/// 行末の右向きシェブロン（装飾。`icon` は既定で `aria-hidden="true"` を
/// 付与するため追加の `aria-hidden` 指定は不要）。
fn chevron_icon() -> Node {
    geo_icon("M9 5l7 7-7 7")
}

/// 案内リンク 1 行（アイコン + ラベル + 説明文。行全体が [`item::root`] の
/// `href` によりクリック対象になる。モジュール doc「使用部品」節参照）。
fn help_link(
    glyph: Node,
    label: &'static str,
    description: &'static str,
    href: &'static str,
) -> Node {
    item::root(
        ItemRootProps {
            href: Some(href),
            variant: ItemVariant::Outline,
            ..ItemRootProps::default()
        },
        vec![("data-blocks-error-page-split-links-link", "")],
        vec![
            item::media(ItemMediaVariant::Icon, vec![], vec![glyph]),
            item::content(
                vec![],
                vec![
                    item::title(vec![], vec![text(label)]),
                    item::description(vec![], vec![text(description)]),
                ],
            ),
            item::actions(vec![], vec![chevron_icon()]),
        ],
    )
}

/// `error-page-split-links` の Demo 本体（左: タグライン → 大見出し →
/// 説明文、右: 案内リンク 3 行）。呼び出しごとに同一の `Node` を返す純関数。
pub fn demo() -> Node {
    let message = empty_state::root(
        &EmptyStateProps::default(),
        vec![("data-blocks-error-page-split-links-message", "")],
        vec![empty_state::content(
            vec![("class", "blocks-error-page-split-links-content")],
            vec![
                styled_text::text(
                    &TextProps {
                        weight: TextWeight::Semibold,
                        ..TextProps::default()
                    },
                    vec![("data-blocks-error-page-split-links-tagline", "")],
                    vec![text("404 error")],
                ),
                empty_state::title(
                    vec![],
                    vec![heading(
                        HeadingLevel::H3,
                        &HeadingProps {
                            size: HeadingSize::Xl3,
                            ..HeadingProps::default()
                        },
                        vec![("data-blocks-error-page-split-links-title", "")],
                        vec![text("We couldn't find that page")],
                    )],
                ),
                empty_state::description(
                    vec![],
                    vec![styled_text::text(
                        &TextProps {
                            variant: TextVariant::Muted,
                            ..TextProps::default()
                        },
                        vec![("data-blocks-error-page-split-links-description", "")],
                        vec![text(
                            "The page you're looking for may have been moved, renamed, or is temporarily unavailable.",
                        )],
                    )],
                ),
            ],
        )],
    );

    let links = item::group(
        "Helpful links",
        vec![("data-blocks-error-page-split-links-links", "")],
        vec![
            help_link(
                home_icon(),
                "Back to home",
                "Start again from the documentation home page.",
                "../../",
            ),
            help_link(
                guides_icon(),
                "Read the guides",
                "Step-by-step guides for building with the framework.",
                "../../guides/",
            ),
            help_link(
                examples_icon(),
                "Browse examples",
                "See complete sample projects you can adapt.",
                "../../examples/",
            ),
        ],
    );

    div(
        vec![("class", "blocks-error-page-split-links-root")],
        vec![message, links],
    )
}