newsletter-split

const REPO: &str = "https://github.com/Fandhe-AI/fandhe-frontend";

use fandhe_frontend_core::{div, text, Node};
use fandhe_frontend_pre_styled_ui::button::{self, ButtonProps};
use fandhe_frontend_pre_styled_ui::card::{self, CardProps, CardVariant};
use fandhe_frontend_pre_styled_ui::field::{self, FieldOrientation, FieldRootProps};
use fandhe_frontend_pre_styled_ui::heading::{heading, HeadingLevel, HeadingProps, HeadingSize};
use fandhe_frontend_pre_styled_ui::input::{self, FieldIds, FieldProps, InputProps};
use fandhe_frontend_pre_styled_ui::link::{self, LinkProps, LinkVariant};
use fandhe_frontend_pre_styled_ui::recipe::ColorPalette;
use fandhe_frontend_pre_styled_ui::text::{self as styled_text, TextProps, TextVariant};
use fandhe_frontend_pre_styled_ui::visually_hidden;

/// メールアドレス入力 + 送信ボタン + プライバシー文（`signup` 領域）。
/// 可視ラベルは出さず `visually_hidden::root` で包んだ `field::label` が
/// `<label for>` の関連付けを担う（モジュール doc「可視ラベルの代わりに」
/// 節参照）。`tone` は `plain` 以外の面で説明文の配色を継承へ切り替える
/// ため（モジュール doc「tone 上書きの詳細度」節）に使う。
fn signup(tone: &'static str, email_field_id: &'static str) -> Node {
    let email_field = FieldProps {
        id: email_field_id,
        ids: FieldIds::default(),
        disabled: false,
        invalid: false,
        required: true,
        readonly: false,
        has_helper_text: false,
    };
    let orientation = FieldRootProps {
        orientation: FieldOrientation::Vertical,
    };
    let privacy_variant = if tone == "plain" {
        TextVariant::Muted
    } else {
        TextVariant::Plain
    };

    div(
        vec![("class", "blocks-newsletter-split-signup")],
        vec![
            div(
                vec![("class", "blocks-newsletter-split-controls")],
                vec![
                    field::root(
                        &orientation,
                        &email_field,
                        vec![],
                        vec![
                            visually_hidden::root(
                                vec![],
                                vec![field::label(
                                    &email_field,
                                    vec![],
                                    vec![text("メールアドレス")],
                                )],
                            ),
                            input::input(
                                &InputProps::default(),
                                &email_field,
                                vec![
                                    ("type", "email"),
                                    ("autocomplete", "email"),
                                    ("placeholder", "you@example.com"),
                                ],
                            ),
                        ],
                    ),
                    button::button(
                        &ButtonProps::default(),
                        vec![("data-blocks-newsletter-split-submit", "")],
                        vec![text("登録する")],
                    ),
                ],
            ),
            styled_text::text(
                &TextProps {
                    variant: privacy_variant,
                    ..TextProps::default()
                },
                vec![("data-blocks-newsletter-split-privacy", "")],
                vec![
                    text("登録に関する詳細は "),
                    link::root(
                        REPO,
                        &LinkProps {
                            variant: LinkVariant::Underline,
                            palette: ColorPalette::Neutral,
                            ..LinkProps::default()
                        },
                        vec![],
                        vec![text("プロジェクトリポジトリ")],
                    ),
                    text(" をご確認ください。"),
                ],
            ),
        ],
    )
}

/// 見出し + 説明（`copy` 領域）。`tone` に応じて説明文の配色を切り替える
/// （モジュール doc「tone 上書きの詳細度」節）。
fn copy(tone: &'static str, headline: &'static str, description: &'static str) -> Node {
    let description_variant = if tone == "plain" {
        TextVariant::Muted
    } else {
        TextVariant::Plain
    };
    div(
        vec![("class", "blocks-newsletter-split-copy")],
        vec![
            heading(
                HeadingLevel::H3,
                &HeadingProps {
                    size: HeadingSize::Xl2,
                    ..HeadingProps::default()
                },
                vec![],
                vec![text(headline)],
            ),
            styled_text::text(
                &TextProps {
                    variant: description_variant,
                    ..TextProps::default()
                },
                vec![],
                vec![text(description)],
            ),
        ],
    )
}

/// 見出し + 登録フォームの行 1 件（`tone`: `plain`/`accent`/`card`。
/// モジュール doc「3 インスタンスで tone 差分を表現する」節参照）。
fn split_row(tone: &'static str, email_field_id: &'static str) -> Node {
    div(
        vec![
            ("data-blocks-newsletter-split-row", ""),
            ("data-blocks-newsletter-split-tone", tone),
        ],
        vec![
            copy(
                tone,
                "毎月の更新情報をメールで受け取る",
                "新しい部品・block の追加を月 1 回まとめてお届けします。",
            ),
            signup(tone, email_field_id),
        ],
    )
}

/// `newsletter-split` の Demo 本体（`plain`/`accent`/`card` の 3 tone を
/// 縦積みで並記する。呼び出しごとに同一の `Node` を返す純関数）。
pub fn demo() -> Node {
    let card_row = split_row("card", "blocks-newsletter-split-email-card");
    div(
        vec![("class", "blocks-newsletter-split-layout")],
        vec![
            split_row("plain", "blocks-newsletter-split-email-plain"),
            split_row("accent", "blocks-newsletter-split-email-accent"),
            card::root(
                CardProps {
                    variant: CardVariant::Elevated,
                    ..CardProps::default()
                },
                vec![("data-blocks-newsletter-split-tone", "card")],
                vec![card::body(vec![], vec![card_row])],
            ),
        ],
    )
}