"""The dashboard page."""
from blurme.templates import template

import reflex as rx

ICON_EMAIL = "assets/email-icon.png"
ICON_PHONE = "assets/phone-icon.png"

@template(route="/dashboard", title="Kontakt", image="/contact-icon.png")
# def dashboard() -> rx.Component:
#     """The dashboard page.
#
#     Returns:
#         The UI for the dashboard page.
#     """
#     section_style = {"background-color": "#f5f5f5", "padding": "10px", "margin-bottom": "20px"}
#     icon_style = {"width": "20px", "height": "20px", "margin-right": "10px"}
#     heading_style = {"font-weight": "bold", "font-family": "Arial, sans-serif"}
#
#     return rx.fragment(
#         rx.heading("Kontakt", font_size="3em"),
#         rx.text("Witaj na stronie Kontaktowej w aplikacji BlurMe!"),
#         rx.text(
#             "Jesteśmy dostępni dla Ciebie na różnych platformach. "
#             "Skontaktuj się z nami, gdy tylko masz pytania, sugestie lub "
#             "po prostu chcesz porozmawiać o naszej aplikacji."
#         ),
#         rx.image(src=ICON_EMAIL, alt="Email icon", style=icon_style),
#         rx.heading("E-mail", level=2, style=heading_style),
#         rx.text("Zapraszamy do napisania do nas na adres: contact@blurme.com", style=section_style),
#         rx.image(src=ICON_PHONE, alt="Phone icon", style=icon_style),
#         rx.heading("Telefon", level=2, style=heading_style),
#         rx.text("Możesz także zadzwonić pod numer: +48 123 456 789", style=section_style),
#     )

def dashboard() -> rx.Component:
    """The dashboard page.

    Returns:
        The UI for the dashboard page.
    """
    container_style = {"background-color": "#f5f5f5", "padding": "10px", "margin-bottom": "20px", "display": "flex", "align-items": "center"}
    icon_style = {"width": "20px", "height": "20px", "margin-right": "10px"}
    heading_style = {"font-weight": "bold", "font-family": "Arial, sans-serif"}

    return rx.fragment(
        rx.heading("Kontakt", font_size="3em"),
        rx.text("Witaj na stronie Kontaktowej w aplikacji BlurMe!"),
        rx.text(
            "Jesteśmy dostępni dla Ciebie na różnych platformach. "
            "Skontaktuj się z nami, gdy tylko masz pytania, sugestie lub "
            "po prostu chcesz porozmawiać o naszej aplikacji."
        ),
        rx.fragment(
            rx.fragment(
                rx.image(src=ICON_EMAIL, alt="Email icon", style=icon_style),
                rx.heading("E-mail", level=3, style=heading_style),
                rx.text("Zapraszamy do napisania do nas na adres: contact@blurme.com"),
                style=container_style
            )
        ),
        rx.fragment(
            rx.fragment(
                rx.image(src=ICON_PHONE, alt="Phone icon", style=icon_style),
                rx.heading("Telefon", level=3, style=heading_style),
                rx.text("Możesz także zadzwonić pod numer: +48 123 456 789"),
                style=container_style
            )
        )
    )