hero-image-top

use crate::blocks::dummy_assets;
use fandhe_frontend_core::{div, text, Node};
use fandhe_frontend_pre_styled_ui::badge::{self, BadgeProps};
use fandhe_frontend_pre_styled_ui::button::{self, ButtonProps, ButtonVariant};
use fandhe_frontend_pre_styled_ui::heading::{
    self, HeadingLevel, HeadingProps, HeadingSize, HeadingWeight,
};
use fandhe_frontend_pre_styled_ui::image::{self, AspectRatio, ImageProps, ImageShape};
use fandhe_frontend_pre_styled_ui::text::{self as styled_text, TextProps, TextSize, TextVariant};

/// `hero-image-top` の Demo 本体（横長画像 + 「見出し / 本文+CTA」の
/// 2 カラム）。呼び出しごとに同一の `Node` を返す純関数。
pub fn demo() -> Node {
    let hero_image = image::image(
        &ImageProps {
            aspect_ratio: AspectRatio::Video,
            shape: ImageShape::Rounded,
            ..ImageProps::new(dummy_assets::BACKGROUND_SRC, "")
        },
        vec![("data-blocks-hero-image-top-image", "")],
    );

    let left = div(
        vec![("class", "blocks-hero-image-top-left")],
        vec![
            badge::badge(&BadgeProps::default(), vec![], vec![text("New release")]),
            heading::heading(
                HeadingLevel::H3,
                &HeadingProps {
                    size: HeadingSize::Xl4,
                    weight: HeadingWeight::Bold,
                },
                vec![],
                vec![text("Launch faster with a workspace built for teams")],
            ),
        ],
    );

    let actions = div(
        vec![("class", "blocks-hero-image-top-actions")],
        vec![
            button::button(&ButtonProps::default(), vec![], vec![text("Get started")]),
            button::button(
                &ButtonProps {
                    variant: ButtonVariant::Outline,
                    ..ButtonProps::default()
                },
                vec![],
                vec![text("View docs")],
            ),
        ],
    );

    let right = div(
        vec![("class", "blocks-hero-image-top-right")],
        vec![
            styled_text::text(
                &TextProps {
                    size: TextSize::Lg,
                    variant: TextVariant::Muted,
                    ..TextProps::default()
                },
                vec![],
                vec![text(
                    "計画から公開までをひとつのワークスペースにまとめ、チーム全員が同じ状況を見ながら進められます。",
                )],
            ),
            actions,
        ],
    );

    let columns = div(
        vec![("class", "blocks-hero-image-top-columns")],
        vec![left, right],
    );

    div(
        vec![("class", "blocks-hero-image-top-layout")],
        vec![hero_image, columns],
    )
}