category-split-panels

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

/// 買い物導線リンクの固定外部 URL（モジュール doc「link の `href` を
/// 固定の外部絶対 URL にする・可視テキストとの整合」節参照）。
const REPO: &str = "https://github.com/Fandhe-AI/fandhe-frontend";
const RELEASES: &str = "https://github.com/Fandhe-AI/fandhe-frontend/releases";

/// 1 パネル分のデータ（見出し・説明・背景画像・買い物導線リンク）。
struct Panel {
    title: &'static str,
    body: &'static str,
    image_src: &'static str,
    href: &'static str,
    link_label: &'static str,
}

const PANELS: [Panel; 2] = [
    Panel {
        title: "アウトドア用品",
        body: "軽量テントから調理器具まで、週末の遠出に必要な一式を集めました。",
        image_src: dummy_assets::BACKGROUND_SRC,
        href: REPO,
        link_label: "GitHub で見る",
    },
    Panel {
        title: "キッチン家電",
        body: "毎日の調理をすこし楽にする定番アイテムを集めました。",
        image_src: dummy_assets::PRODUCT_SRC,
        href: RELEASES,
        link_label: "リリースを見る",
    },
];

/// 1 パネル分の構成（背景画像 + 淡い面に重ねた見出し・説明・リンク）。
/// 画像と面を同じ `grid-area: 1 / 1` で重ねる（モジュール doc「重ね合わせ
/// は `grid-area` の共有で行う」節）。
fn panel(p: &Panel) -> Node {
    div(
        vec![("class", "blocks-category-split-panels-panel")],
        vec![
            image::image(
                &ImageProps {
                    fit: ImageFit::Cover,
                    ..ImageProps::new(p.image_src, "")
                },
                vec![("data-blocks-category-split-panels-image", "")],
            ),
            div(
                vec![("class", "blocks-category-split-panels-surface")],
                vec![
                    heading(
                        HeadingLevel::H3,
                        &HeadingProps {
                            size: HeadingSize::Xl,
                            ..HeadingProps::default()
                        },
                        vec![],
                        vec![text(p.title)],
                    ),
                    styled_text::text(&TextProps::default(), vec![], vec![text(p.body)]),
                    link::root(
                        p.href,
                        &LinkProps {
                            external: true,
                            ..LinkProps::default()
                        },
                        vec![],
                        vec![text(p.link_label)],
                    ),
                ],
            ),
        ],
    )
}

/// `category-split-panels` の Demo 本体。呼び出しごとに同一の `Node` を
/// 返す純関数。
pub fn demo() -> Node {
    div(
        vec![("class", "blocks-category-split-panels-layout")],
        vec![div(
            vec![("class", "blocks-category-split-panels-split")],
            PANELS.iter().map(panel).collect(),
        )],
    )
}