cta-feature-links

use fandhe_frontend_core::{div, el, text, Node};
use fandhe_frontend_pre_styled_ui::button::{self, ButtonProps};
use fandhe_frontend_pre_styled_ui::heading::{heading, HeadingLevel, HeadingProps, HeadingSize};
use fandhe_frontend_pre_styled_ui::icon::{icon, IconProps};
use fandhe_frontend_pre_styled_ui::link_overlay::{self, overlay};
use fandhe_frontend_pre_styled_ui::separator::{separator, SeparatorProps};
use fandhe_frontend_pre_styled_ui::text::{self as styled_text, TextProps, TextVariant};
use fandhe_frontend_pre_styled_ui::Size;

/// リンク先の固定外部 URL（モジュール doc「`href="#"` を使わない」節参照）。
const REPO: &str = "https://github.com/Fandhe-AI/fandhe-frontend";

/// 自作の幾何アイコン（線画。モジュール doc「アイコンは自作の抽象幾何
/// 図形」節参照）。`path` へ `fill="none"` + `stroke="currentColor"` を
/// 明示し、`icon` の `<svg>` 側が固定で持つ `fill="currentColor"`
/// （塗り面）を上書きして線画（ストローク）として描画する。
fn geo_icon(path_d: &'static str) -> Node {
    icon(
        &IconProps::default(),
        vec![],
        vec![el(
            "path",
            vec![
                ("d", path_d),
                ("fill", "none"),
                ("stroke", "currentColor"),
                ("stroke-width", "2"),
                ("stroke-linecap", "round"),
                ("stroke-linejoin", "round"),
            ],
            vec![],
        )],
    )
}

/// 右端に置く矢印アイコン（全項目共通）。
fn arrow_icon() -> Node {
    geo_icon("M5 12h14M13 6l6 6-6 6")
}

/// リンク項目 1 件分（全面リンク、モジュール doc「全面リンク項目の構造」
/// 節）。`icon_path_d` は項目ごとの幾何アイコンの `d` 属性値。
fn feature_item(icon_path_d: &'static str, title: &str, description: &str) -> Node {
    link_overlay::root(
        vec![("data-blocks-cta-feature-links-item", "")],
        vec![
            div(
                vec![("class", "blocks-cta-feature-links-item-icon")],
                vec![geo_icon(icon_path_d)],
            ),
            div(
                vec![("class", "blocks-cta-feature-links-item-copy")],
                vec![
                    heading(
                        HeadingLevel::H4,
                        &HeadingProps::default(),
                        vec![],
                        vec![text(title)],
                    ),
                    styled_text::text(
                        &TextProps {
                            variant: TextVariant::Muted,
                            ..TextProps::default()
                        },
                        vec![],
                        vec![text(description)],
                    ),
                ],
            ),
            div(
                vec![("class", "blocks-cta-feature-links-item-arrow")],
                vec![arrow_icon()],
            ),
            overlay(REPO, vec![("aria-label", title)], vec![]),
        ],
    )
}

/// 左列（見出し + 説明文 + CTA ボタン）。
fn content_column() -> Node {
    div(
        vec![("class", "blocks-cta-feature-links-content")],
        vec![
            heading(
                HeadingLevel::H3,
                &HeadingProps {
                    size: HeadingSize::Xl2,
                    ..HeadingProps::default()
                },
                vec![],
                vec![text("チームの成果を、そのまま次の意思決定へ")],
            ),
            styled_text::text(
                &TextProps {
                    variant: TextVariant::Muted,
                    ..TextProps::default()
                },
                vec![],
                vec![text(
                    "計測・共有・振り返りを 1 つの導線にまとめ、\
                     散らばった記録を集める手間をなくします。",
                )],
            ),
            button::button(
                &ButtonProps {
                    size: Size::Lg,
                    ..ButtonProps::default()
                },
                vec![],
                vec![text("今すぐ始める")],
            ),
        ],
    )
}

/// 右列（リンク項目 2 件 + 区切り線 1 本、モジュール doc「全面リンク項目の
/// 構造」節）。
fn links_column() -> Node {
    div(
        vec![("class", "blocks-cta-feature-links-links")],
        vec![
            feature_item(
                "M4 4h16v4H4zM4 12h10v8H4z",
                "レポートを共有する",
                "作成した記録をチームへワンクリックで届けます。",
            ),
            separator(&SeparatorProps::default(), vec![]),
            feature_item(
                "M12 3v18M3 12h18",
                "指標を組み合わせる",
                "複数の計測項目を並べて、変化の理由を追いやすくします。",
            ),
        ],
    )
}

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