hero-marquee-strip

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};
use fandhe_frontend_pre_styled_ui::image::{self, ImageFit, ImageProps};
use fandhe_frontend_pre_styled_ui::marquee::{self, MarqueeProps};
use fandhe_frontend_pre_styled_ui::text::{self as styled_text, TextProps, TextSize};

const STRIP_ATTR: &str = "data-blocks-hero-marquee-strip-strip";
const LOGO_ATTR: &str = "data-blocks-hero-marquee-strip-logo";
const CAPTION_ATTR: &str = "data-blocks-hero-marquee-strip-caption";
const LOGO_COUNT: usize = 8;

pub fn demo() -> Node {
    let eyebrow = badge::badge(&BadgeProps::default(), vec![], vec![text("New")]);

    let title = heading::heading(
        HeadingLevel::H3,
        &HeadingProps {
            size: HeadingSize::Xl4,
            ..HeadingProps::default()
        },
        vec![],
        vec![text("Build on a platform teams already trust")],
    );

    let lead = styled_text::text(
        &TextProps {
            size: TextSize::Lg,
            ..TextProps::default()
        },
        vec![],
        vec![text(
            "Ship faster with the workflows your team already knows.",
        )],
    );

    let actions = div(
        vec![("class", "blocks-hero-marquee-strip-actions")],
        vec![
            button::button(&ButtonProps::default(), vec![], vec![text("Get started")]),
            button::button(
                &ButtonProps {
                    variant: ButtonVariant::Outline,
                    ..ButtonProps::default()
                },
                vec![],
                vec![text("Talk to sales")],
            ),
        ],
    );

    let caption = styled_text::text(
        &TextProps {
            size: TextSize::Sm,
            ..TextProps::default()
        },
        vec![(CAPTION_ATTR, "")],
        vec![text("Trusted by teams of every size")],
    );

    let logos = (0..LOGO_COUNT)
        .map(|i| {
            let name = dummy_assets::COMPANY_NAMES[i % dummy_assets::COMPANY_NAMES.len()];
            marquee::item(
                vec![],
                vec![image::image(
                    &ImageProps {
                        fit: ImageFit::Contain,
                        ..ImageProps::new(dummy_assets::LOGO_SRC, name)
                    },
                    vec![(LOGO_ATTR, "")],
                )],
            )
        })
        .collect();
    let strip = marquee::marquee(
        &MarqueeProps {
            label: Some("Teams using the platform"),
            ..MarqueeProps::default()
        },
        vec![(STRIP_ATTR, "")],
        logos,
    );

    div(
        vec![("class", "blocks-hero-marquee-strip-inner")],
        vec![eyebrow, title, lead, actions, caption, strip],
    )
}