banner-email-signup

use fandhe_frontend_core::{div, text, Node};
use fandhe_frontend_pre_styled_ui::button::{self, ButtonProps, ButtonVariant};
use fandhe_frontend_pre_styled_ui::callout::{self, CalloutProps};
use fandhe_frontend_pre_styled_ui::field::{self, FieldOrientation, FieldRootProps};
use fandhe_frontend_pre_styled_ui::heading::{self, HeadingLevel, HeadingProps, HeadingSize};
use fandhe_frontend_pre_styled_ui::input::{self, FieldIds, FieldProps, InputProps};
use fandhe_frontend_pre_styled_ui::text::{self as styled_text, TextProps, TextVariant};
use fandhe_frontend_pre_styled_ui::visually_hidden;
use fandhe_frontend_pre_styled_ui::Size;

/// タイトル・説明（`copy` 領域）。
fn copy() -> Node {
    div(
        vec![("class", "blocks-banner-email-signup-copy")],
        vec![
            heading::heading(
                HeadingLevel::H3,
                &HeadingProps {
                    size: HeadingSize::Sm,
                    ..HeadingProps::default()
                },
                vec![("data-blocks-banner-email-signup-title", "")],
                vec![text("Get release notes in your inbox")],
            ),
            styled_text::text(
                &TextProps {
                    variant: TextVariant::Muted,
                    ..TextProps::default()
                },
                vec![("data-blocks-banner-email-signup-description", "")],
                vec![text("New blocks and components, once a month. No spam.")],
            ),
        ],
    )
}

/// メールアドレス入力 + 送信ボタン（`signup` 領域）。可視ラベルは出さず
/// `visually_hidden::root` で包んだ `field::label` が `<label for>` の
/// 関連付けを担う（モジュール doc「可視ラベルの代わりに」節参照）。
fn signup() -> Node {
    const EMAIL_FIELD_ID: &str = "blocks-banner-email-signup-email";
    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,
    };

    div(
        vec![("class", "blocks-banner-email-signup-signup")],
        vec![
            field::root(
                &orientation,
                &email_field,
                vec![("data-blocks-banner-email-signup-field", "")],
                vec![
                    visually_hidden::root(
                        vec![],
                        vec![field::label(
                            &email_field,
                            vec![],
                            vec![text("Email address")],
                        )],
                    ),
                    input::input(
                        &InputProps::default(),
                        &email_field,
                        vec![
                            ("type", "email"),
                            ("autocomplete", "email"),
                            ("placeholder", "you@example.com"),
                        ],
                    ),
                ],
            ),
            button::button(
                &ButtonProps::default(),
                vec![("data-blocks-banner-email-signup-submit", "")],
                vec![text("Notify me")],
            ),
        ],
    )
}

/// `banner-email-signup` の Demo 本体（全幅の帯。`copy`/`signup`/`close`
/// の 3 領域を [`LAYOUT_CSS`] の `grid-template-areas` で配置する）。
pub fn demo() -> Node {
    callout::root(
        &CalloutProps::default(),
        vec![("data-blocks-banner-email-signup-root", "")],
        vec![div(
            vec![("class", "blocks-banner-email-signup-bar")],
            vec![
                copy(),
                signup(),
                button::close_button(
                    &ButtonProps {
                        variant: ButtonVariant::Ghost,
                        size: Size::Sm,
                        ..ButtonProps::default()
                    },
                    "Dismiss banner",
                    vec![("data-blocks-banner-email-signup-close", "")],
                ),
            ],
        )],
    )
}