promo-with-testimonials

use crate::blocks::dummy_assets;
use fandhe_frontend_core::{div, el, text, Node};
use fandhe_frontend_pre_styled_ui::blockquote::{self, BlockquoteVariant};
use fandhe_frontend_pre_styled_ui::button::{self, ButtonProps};
use fandhe_frontend_pre_styled_ui::heading::{self, HeadingLevel, HeadingProps, HeadingSize};
use fandhe_frontend_pre_styled_ui::icon::{icon, IconProps};
use fandhe_frontend_pre_styled_ui::image::{self, ImageProps};
use fandhe_frontend_pre_styled_ui::text::{self as styled_text, TextProps, TextSize, TextVariant};
use fandhe_frontend_pre_styled_ui::ColorPalette;

const ROOT_CLASS: &str = "blocks-promo-with-testimonials-layout";
const BACKDROP_CLASS: &str = "blocks-promo-with-testimonials-backdrop";
const VEIL_CLASS: &str = "blocks-promo-with-testimonials-veil";
const PROMO_CLASS: &str = "blocks-promo-with-testimonials-promo";
const QUOTES_CLASS: &str = "blocks-promo-with-testimonials-quotes";

const IMAGE_ATTR: &str = "data-blocks-promo-with-testimonials-image";
const CTA_ATTR: &str = "data-blocks-promo-with-testimonials-cta";
const QUOTE_ATTR: &str = "data-blocks-promo-with-testimonials-quote";
const NAME_ATTR: &str = "data-blocks-promo-with-testimonials-name";
const ROLE_ATTR: &str = "data-blocks-promo-with-testimonials-role";

/// 引用カードの先頭に置く装飾アイコン（抽象的な引用符の図形。実在ブランド
/// の図形は使わない）。`label: None`（既定）のため `aria-hidden="true"` が
/// 付く装飾アイコンになる。
fn quote_icon() -> Node {
    icon(
        &IconProps::default(),
        vec![],
        vec![el(
            "path",
            vec![("d", "M7 7h4v6l-3 5H5l2-5H7V7Zm8 0h4v6l-3 5h-3l2-5h-0V7Z")],
            vec![],
        )],
    )
}

/// 引用カード 1 件（装飾アイコン + 引用文 + 発言者名・役職）。
fn testimonial(quote: &'static str, name: &'static str, role: &'static str) -> Node {
    blockquote::root(
        BlockquoteVariant::Plain,
        ColorPalette::default(),
        vec![(QUOTE_ATTR, "")],
        vec![
            quote_icon(),
            blockquote::content(vec![], vec![text(quote)]),
            blockquote::caption(
                vec![],
                vec![div(
                    vec![],
                    vec![
                        styled_text::text(
                            &TextProps {
                                weight: fandhe_frontend_pre_styled_ui::text::TextWeight::Semibold,
                                ..TextProps::default()
                            },
                            vec![(NAME_ATTR, "")],
                            vec![text(name)],
                        ),
                        styled_text::text(
                            &TextProps {
                                size: TextSize::Sm,
                                variant: TextVariant::Muted,
                                ..TextProps::default()
                            },
                            vec![(ROLE_ATTR, "")],
                            vec![text(role)],
                        ),
                    ],
                )],
            ),
        ],
    )
}

/// 上段（見出し・説明・CTA）。
fn promo() -> Node {
    div(
        vec![("class", PROMO_CLASS)],
        vec![
            heading::heading(
                HeadingLevel::H3,
                &HeadingProps {
                    size: HeadingSize::Xl3,
                    ..HeadingProps::default()
                },
                vec![],
                vec![text("秋の感謝キャンペーン開催中")],
            ),
            styled_text::text(
                &TextProps {
                    size: TextSize::Lg,
                    ..TextProps::default()
                },
                vec![],
                vec![text(
                    "対象商品が期間限定で特別価格に。お客様の声とともにご案内します。",
                )],
            ),
            button::button(
                &ButtonProps::default(),
                vec![(CTA_ATTR, "")],
                vec![text("キャンペーンを見る")],
            ),
        ],
    )
}

/// `promo-with-testimonials` の Demo 本体。呼び出しごとに同一の `Node` を
/// 返す純関数（他 block と同じ契約）。
pub fn demo() -> Node {
    let backdrop = div(
        vec![("class", BACKDROP_CLASS), ("aria-hidden", "true")],
        vec![
            image::image(
                &ImageProps::new(dummy_assets::BACKGROUND_SRC, ""),
                vec![(IMAGE_ATTR, "")],
            ),
            div(vec![("class", VEIL_CLASS)], vec![]),
        ],
    );

    let quotes = div(
        vec![("class", QUOTES_CLASS)],
        (0..3)
            .map(|index| {
                testimonial(
                    dummy_assets::TESTIMONIAL_QUOTES[index],
                    dummy_assets::PERSON_NAMES[index],
                    dummy_assets::JOB_TITLES[index],
                )
            })
            .collect(),
    );

    div(vec![("class", ROOT_CLASS)], vec![backdrop, promo(), quotes])
}