hero-image-tiles

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 as styled_heading, HeadingLevel, HeadingProps, HeadingSize,
};
use fandhe_frontend_pre_styled_ui::image::{self, AspectRatio, ImageProps};
use fandhe_frontend_pre_styled_ui::text::{self as styled_text, TextProps, TextSize, TextVariant};

/// 列ごとのタイル枚数配分（左から 1・2・2 枚、合計 5 枚固定）。
const COLUMNS: [usize; 3] = [1, 2, 2];

/// テキスト列（告知バッジ → 見出し → リード文 → CTA 2 個）。
fn copy() -> Node {
    let eyebrow = badge::badge(&BadgeProps::default(), vec![], vec![text("Now in preview")]);
    let title = styled_heading::heading(
        HeadingLevel::H3,
        &HeadingProps {
            size: HeadingSize::Xl4,
            ..HeadingProps::default()
        },
        vec![],
        vec![text("チームの制作物を、届くところまで速く")],
    );
    let lead = styled_text::text(
        &TextProps {
            size: TextSize::Lg,
            variant: TextVariant::Muted,
            ..TextProps::default()
        },
        vec![],
        vec![text(
            "撮影から公開までの制作フローを一つの場所にまとめ、チーム全員が同じ進捗を見ながら進められます。",
        )],
    );
    let actions = div(
        vec![("class", "blocks-hero-image-tiles-actions")],
        vec![
            button::button(&ButtonProps::default(), vec![], vec![text("Get started")]),
            button::button(
                &ButtonProps {
                    variant: ButtonVariant::Outline,
                    ..ButtonProps::default()
                },
                vec![],
                vec![text("See how it works")],
            ),
        ],
    );
    div(
        vec![("class", "blocks-hero-image-tiles-copy")],
        vec![eyebrow, title, lead, actions],
    )
}

/// タイル 1 枚分。角丸・影はラッパ `div` 側で付け、`image` 自体は既定
/// shape のまま使う（モジュール doc「タイルの角丸・影」節）。
fn tile() -> Node {
    div(
        vec![("class", "blocks-hero-image-tiles-tile")],
        vec![image::image(
            &ImageProps {
                aspect_ratio: AspectRatio::Portrait,
                ..ImageProps::new(dummy_assets::PRODUCT_SRC, "")
            },
            vec![("data-blocks-hero-image-tiles-image", "")],
        )],
    )
}

/// 列 1 本分（`count` 枚のタイルを縦に並べる）。
fn column(index: usize, count: usize) -> Node {
    let column_number = (index + 1).to_string();
    div(
        vec![
            ("class", "blocks-hero-image-tiles-column"),
            (
                "data-blocks-hero-image-tiles-column",
                column_number.as_str(),
            ),
        ],
        (0..count).map(|_| tile()).collect(),
    )
}

/// 右側のコラージュ（3 列、枚数配分は [`COLUMNS`]）。
fn collage() -> Node {
    div(
        vec![("class", "blocks-hero-image-tiles-collage")],
        COLUMNS
            .iter()
            .enumerate()
            .map(|(i, &count)| column(i, count))
            .collect(),
    )
}

/// `hero-image-tiles` の Demo 本体。呼び出しごとに同一の `Node` を返す
/// 純関数。
pub fn demo() -> Node {
    div(
        vec![("class", "blocks-hero-image-tiles-grid")],
        vec![copy(), collage()],
    )
}