promo-background-image

use crate::blocks::dummy_assets;
use fandhe_frontend_core::{div, text, Node};
use fandhe_frontend_pre_styled_ui::card::{self, CardProps};
use fandhe_frontend_pre_styled_ui::heading::{self, HeadingLevel, HeadingProps, HeadingSize};
use fandhe_frontend_pre_styled_ui::image::{self, ImageProps};
use fandhe_frontend_pre_styled_ui::link::{self, LinkProps};
use fandhe_frontend_pre_styled_ui::text::{self as styled_text, TextProps, TextSize, TextVariant};

/// CTA のリンク先（モジュール冒頭「`id` を使わない・`<form>` を使わない・
/// 実データを持たない」節参照）。サイト内に実在するコレクション訴求
/// ページ（`promo-collection-cards` block のページ）への相対リンクで、
/// `store_nav_mega_menu` の「セール」導線と同じ形。ビルド時に
/// `linkcheck::check_links` が実在を検証する。
const COLLECTION_HREF: &str = "../../blocks/promo-collection-cards/";

/// 各形の直前に置く短い形ラベル（`hero_background_media::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)],
    )
}

/// 背景画像 + 暗幕の 2 層（`aria-hidden` で装飾扱い、3 形で共通）。
fn backdrop() -> Node {
    div(
        vec![
            ("class", "blocks-promo-background-image-backdrop"),
            ("aria-hidden", "true"),
        ],
        vec![
            image::image(
                &ImageProps::new(dummy_assets::BACKGROUND_SRC, ""),
                vec![("data-blocks-promo-background-image-image", "")],
            ),
            div(
                vec![("class", "blocks-promo-background-image-scrim")],
                vec![],
            ),
        ],
    )
}

/// 中央寄せの見出し・説明・反転色 CTA（`heading_size` のみ形ごとに変える）。
fn content(heading_size: HeadingSize) -> Node {
    div(
        vec![("class", "blocks-promo-background-image-content")],
        vec![
            heading::heading(
                HeadingLevel::H3,
                &HeadingProps {
                    size: heading_size,
                    ..HeadingProps::default()
                },
                vec![("data-blocks-promo-background-image-title", "")],
                vec![text("新しい季節のコレクション")],
            ),
            styled_text::text(
                &TextProps {
                    size: TextSize::Lg,
                    ..TextProps::default()
                },
                vec![("data-blocks-promo-background-image-lead", "")],
                vec![text(
                    "定番から限定まで、今季のコレクションをまとめてご紹介します。",
                )],
            ),
            link::root(
                COLLECTION_HREF,
                &LinkProps::default(),
                vec![("data-blocks-promo-background-image-cta", "")],
                vec![text("コレクションを見る")],
            ),
        ],
    )
}

/// 形 A（R1196 基準形）: 全面背景画像 + 暗幕 + 中央寄せコンテンツ。
fn variant_basic() -> Node {
    div(
        vec![("class", "blocks-promo-background-image-basic")],
        vec![backdrop(), content(HeadingSize::Xl3)],
    )
}

/// 形 B（R1198）: 角丸カードの内側全面へ背景画像・暗幕・コンテンツを敷く。
fn variant_card() -> Node {
    card::root(
        CardProps::default(),
        vec![("data-blocks-promo-background-image-card", "")],
        vec![backdrop(), content(HeadingSize::Xl3)],
    )
}

/// 形 C（R1202）: トップページ向け。h1 相当の大見出し・大きめの余白
/// （Demo では `HeadingLevel::H3` のまま、サイズと余白だけを再現する。
/// モジュール冒頭「3 形を 1 つの Demo に並記する」節参照）。
fn variant_top_page() -> Node {
    div(
        vec![("class", "blocks-promo-background-image-top-page")],
        vec![backdrop(), content(HeadingSize::Xl4)],
    )
}

/// `promo-background-image` の Demo 本体。呼び出しごとに同一の `Node` を
/// 返す純関数。
pub fn demo() -> Node {
    div(
        vec![("class", "blocks-promo-background-image-layout")],
        vec![
            variant_label("基準形（R1196）"),
            variant_basic(),
            variant_label("カード形（R1198）"),
            variant_card(),
            variant_label("トップページ形（R1202、大見出し・大きめの余白）"),
            variant_top_page(),
        ],
    )
}