section-heading-stacked

use fandhe_frontend_core::{div, text, Node};
use fandhe_frontend_pre_styled_ui::badge::{badge, BadgeProps};
use fandhe_frontend_pre_styled_ui::breadcrumb::{self, BreadcrumbVariant};
use fandhe_frontend_pre_styled_ui::heading::{
    heading, HeadingLevel, HeadingProps, HeadingSize, HeadingWeight,
};
use fandhe_frontend_pre_styled_ui::recipe::Size;
use fandhe_frontend_pre_styled_ui::text::{
    self as styled_text, TextProps, TextSize, TextVariant, TextWeight,
};

/// Demo 内の各形の上に付ける区別ラベル（`cta_split_image::variant_label`
/// と同型）。
fn variant_label(label: &'static str) -> Node {
    styled_text::text(
        &TextProps {
            size: TextSize::Sm,
            variant: TextVariant::Muted,
            ..TextProps::default()
        },
        vec![],
        vec![text(label)],
    )
}

/// eyebrow（アクセント色の強調テキスト、C/E で使用）。
fn eyebrow(label: &'static str) -> Node {
    styled_text::text(
        &TextProps {
            size: TextSize::Sm,
            weight: TextWeight::Semibold,
            ..TextProps::default()
        },
        vec![("data-blocks-section-heading-stacked-eyebrow", "")],
        vec![text(label)],
    )
}

/// D/F で使うパンくず（Home → Blocks → 現在ページ）。`aria_label` は
/// D/F の 2 インスタンスを区別する値を渡す。
fn breadcrumb_nav(aria_label: &'static str) -> Node {
    breadcrumb::root(
        Size::Md,
        BreadcrumbVariant::default(),
        Some(aria_label),
        vec![],
        vec![breadcrumb::list(
            vec![],
            vec![
                breadcrumb::item(
                    vec![],
                    vec![breadcrumb::link("../../", vec![], vec![text("Home")])],
                ),
                breadcrumb::separator(vec![], vec![text("/")]),
                breadcrumb::item(
                    vec![],
                    vec![breadcrumb::link("../", vec![], vec![text("Blocks")])],
                ),
                breadcrumb::separator(vec![], vec![text("/")]),
                breadcrumb::item(
                    vec![],
                    vec![breadcrumb::current_link(
                        vec![],
                        vec![text("Section Heading")],
                    )],
                ),
            ],
        )],
    )
}

/// 縦積みのセクション見出し 1 件を組み立てる（本 block の中核ヘルパ）。
///
/// - `align`: `"center"`（既定）/`"responsive"`（48rem 未満は中央、以上は
///   左寄せ）/`"start"`（常に左寄せ）。
/// - `tone`: `None`（通常面）/`Some("dark")`（暗色固定背景）。
/// - `lead`: 見出しの直前に置く先頭要素（badge/eyebrow/breadcrumb）。
///   `None` は B（最小形）用。
fn stacked(
    align: &'static str,
    tone: Option<&'static str>,
    lead: Option<Node>,
    title: &'static str,
    description: &'static str,
) -> Node {
    let mut attrs = vec![("data-blocks-section-heading-stacked-align", align)];
    if let Some(tone) = tone {
        attrs.push(("data-blocks-section-heading-stacked-tone", tone));
    }

    let mut children: Vec<Node> = vec![];
    if let Some(lead) = lead {
        children.push(lead);
    }
    children.push(heading(
        HeadingLevel::H3,
        &HeadingProps {
            size: HeadingSize::Xl2,
            weight: HeadingWeight::Bold,
        },
        vec![],
        vec![text(title)],
    ));
    children.push(styled_text::text(
        &TextProps {
            variant: TextVariant::Muted,
            ..TextProps::default()
        },
        vec![("data-blocks-section-heading-stacked-desc", "")],
        vec![text(description)],
    ));

    div(attrs, children)
}

/// `section-heading-stacked` の Demo 本体（6 形を縦に並べる）。呼び出し
/// ごとに同一の `Node` を返す純関数。
pub fn demo() -> Node {
    let a = stacked(
        "center",
        None,
        Some(badge(
            &BadgeProps::default(),
            vec![("data-blocks-section-heading-stacked-badge", "")],
            vec![text("お知らせ")],
        )),
        "見出しの縦積みレイアウト",
        "タグライン・大見出し・説明文を中央に積む、最も基本的なセクション見出しの形です。",
    );

    let b = stacked(
        "center",
        None,
        None,
        "シンプルな見出しだけの形",
        "先頭要素を持たず、見出しと説明文だけを中央に積む最小構成です。",
    );

    let c = stacked(
        "responsive",
        None,
        Some(eyebrow("特集")),
        "eyebrow 付きの見出し",
        "48rem 未満では中央寄せ、48rem 以上では左寄せに切り替わります。",
    );

    let d = stacked(
        "start",
        None,
        Some(breadcrumb_nav("Breadcrumb example")),
        "パンくず付きの見出し",
        "現在地を示すパンくずを先頭に置き、常に左寄せで表示します。",
    );

    let e = stacked(
        "center",
        Some("dark"),
        Some(eyebrow("特集")),
        "暗色背景の見出し",
        "固定の暗色背景の上に、eyebrow・見出し・説明文を中央に積みます。",
    );

    let f = stacked(
        "start",
        Some("dark"),
        Some(breadcrumb_nav("Breadcrumb example (dark)")),
        "暗色背景・パンくず付きの見出し",
        "暗色背景とパンくずを組み合わせ、常に左寄せで表示します。",
    );

    div(
        vec![("class", "blocks-section-heading-stacked-layout")],
        vec![
            div(
                vec![],
                vec![variant_label("A. 基準形（badge・中央寄せ）"), a],
            ),
            div(vec![], vec![variant_label("B. 最小形（中央寄せ）"), b]),
            div(
                vec![],
                vec![variant_label("C. eyebrow 付き（48rem 以上で左寄せ）"), c],
            ),
            div(vec![], vec![variant_label("D. パンくず付き（左寄せ）"), d]),
            div(
                vec![],
                vec![variant_label("E. 暗色固定背景（中央寄せ）"), e],
            ),
            div(
                vec![],
                vec![variant_label("F. 暗色固定背景・パンくず付き（左寄せ）"), f],
            ),
        ],
    )
}