logo-cloud-marquee

use crate::blocks::dummy_assets;
use fandhe_frontend_core::{div, text, Node};
use fandhe_frontend_pre_styled_ui::card::{self, CardVariant};
use fandhe_frontend_pre_styled_ui::heading::{
    self as styled_heading, HeadingLevel, HeadingProps, HeadingSize,
};
use fandhe_frontend_pre_styled_ui::image::{self, ImageProps};
use fandhe_frontend_pre_styled_ui::marquee::{self, MarqueeDirection, MarqueeProps};
use fandhe_frontend_pre_styled_ui::text::{self as styled_text, TextProps, TextSize, TextVariant};

/// 見出しエリア（見出し → リード文）。
fn header() -> Node {
    let title = styled_heading::heading(
        HeadingLevel::H3,
        &HeadingProps {
            size: HeadingSize::Xl3,
            ..HeadingProps::default()
        },
        vec![],
        vec![text("多くのチームに使われています")],
    );
    let lead = styled_text::text(
        &TextProps {
            variant: TextVariant::Muted,
            ..TextProps::default()
        },
        vec![],
        vec![text(
            "様々な規模のチームが日々のワークフローに組み込んでいます。",
        )],
    );
    div(
        vec![("class", "blocks-logo-cloud-marquee-header")],
        vec![title, lead],
    )
}

/// ロゴ + 社名のロックアップ 1 件（[`marquee::item`] 1 個）。
fn logo(name: &'static str) -> Node {
    let mark = image::image(
        &ImageProps::new(dummy_assets::LOGO_SRC, ""),
        vec![("data-blocks-logo-cloud-marquee-logo", "")],
    );
    let label = styled_text::text(
        &TextProps {
            variant: TextVariant::Muted,
            size: TextSize::Sm,
            ..TextProps::default()
        },
        vec![],
        vec![text(name)],
    );
    marquee::item(
        vec![],
        vec![div(
            vec![("class", "blocks-logo-cloud-marquee-lockup")],
            vec![mark, label],
        )],
    )
}

/// marquee 1 段分。`decorative` が `true` のときは同一 6 社の逆方向再掲
/// （二重読み上げ防止のため装飾扱い）、`false` のときはアクセシブル
/// ネームを付与する。`attr` は [`LAYOUT_CSS`] 側のトークン上書きに使う
/// data 属性名。
fn row(direction: MarqueeDirection, decorative: bool, attr: &'static str) -> Node {
    marquee::marquee(
        &MarqueeProps {
            direction,
            decorative,
            label: (!decorative).then_some("導入企業のロゴ"),
        },
        vec![(attr, "")],
        dummy_assets::COMPANY_NAMES
            .iter()
            .map(|n| logo(n))
            .collect(),
    )
}

/// `logo-cloud-marquee` の Demo 本体。呼び出しごとに同一の `Node` を返す
/// 純関数。
pub fn demo() -> Node {
    let band_caption = styled_text::text(
        &TextProps {
            variant: TextVariant::Muted,
            size: TextSize::Sm,
            ..TextProps::default()
        },
        vec![],
        vec![text("1 段・両端フェード")],
    );
    let band = row(
        MarqueeDirection::Start,
        false,
        "data-blocks-logo-cloud-marquee-band",
    );

    let card_caption = styled_text::text(
        &TextProps {
            variant: TextVariant::Muted,
            size: TextSize::Sm,
            ..TextProps::default()
        },
        vec![],
        vec![text("カード内・逆方向 2 段")],
    );
    let card = card::root(
        CardVariant::default(),
        vec![("data-blocks-logo-cloud-marquee-card", "")],
        vec![card::body(
            vec![("class", "blocks-logo-cloud-marquee-card-body")],
            vec![
                row(
                    MarqueeDirection::Start,
                    false,
                    "data-blocks-logo-cloud-marquee-card-row",
                ),
                row(
                    MarqueeDirection::End,
                    true,
                    "data-blocks-logo-cloud-marquee-card-row",
                ),
            ],
        )],
    );

    div(
        vec![("class", "blocks-logo-cloud-marquee-stack")],
        vec![header(), band_caption, band, card_caption, card],
    )
}