export component MainWindow inherits Window {
    always-on-top: true;
    no-frame: true;
    width: 320px;
    height: 110px;
    background: transparent;

    weather_popup := Rectangle {
        width: 100%;
        height: 100%;
        padding: 10px;                  // keep content inset from edges
        border-radius: 14px;
        border-color: #ffffff22;
        border-width: 1px;
        background: @linear-gradient(135deg, #ffffff18, #7e7e7e24);
        drop-shadow-blur: 10px;
        drop-shadow-color: #00000066;

        VerticalLayout {
            spacing: 6px;
            horizontal-stretch: 1.0;
            padding: 10px;

            /* Top: City */
            Text {
                text: "Los Angeles";
                font-size: 14px;
                color: #fff;
                font-family: "IosevkaTermSlab Nerd Font Mono";
                horizontal-alignment: TextHorizontalAlignment.left;
            }

            /* Middle: icon on left, temp on right */
            HorizontalLayout {
                spacing: 8px;
                horizontal-stretch: 1.0;

                /* Icon (fixed size) */
                Text {
                    text: "";
                    font-family: "IosevkaTermSlab Nerd Font Mono";
                    font-size: 40px;
                    color: #fff;
                    vertical-alignment: TextVerticalAlignment.center;
                }

                /* flexible spacer pushes the temperature group to the right */
                Rectangle {
                    horizontal-stretch: 1.0;
                    background: transparent;
                }

                /* Temperature group (numeric + degree/unit) */
                HorizontalLayout {
                    spacing: 6px;
                    //vertical-alignment: TextVerticalAlignment.center;

                    Text {
                        text: "124.4";
                        font-family: "IosevkaTermSlab Nerd Font Mono";
                        font-size: 40px;
                        color: #fff;
                        vertical-alignment: TextVerticalAlignment.center;
                    }

                    VerticalLayout {
                        spacing: -6px; // bring degree and unit closer to the number
                        // keep the combined height near the numeric height
                        Text {
                            text: "°";
                            font-size: 20px;
                            color: #fff;
                            horizontal-alignment: TextHorizontalAlignment.center;
                            vertical-alignment: TextVerticalAlignment.bottom;
                        }
                        Text {
                            text: "F";
                            font-size: 18px;
                            color: #fff;
                            horizontal-alignment: TextHorizontalAlignment.center;
                            vertical-alignment: TextVerticalAlignment.top;
                        }
                    }
                }
            }

            // Bottom: summary (left) + description (right).
            HorizontalLayout {
                spacing: 10px;
                horizontal-stretch: 1.0;
                height: 28px;                 

                // Summary (left) — single prominent line, vertically centered
                Text {
                    text: "Thunderstorm";
                    font-size: 22px;
                    color: #fff;
                    font-family: "IosevkaTermSlab Nerd Font Mono";
                    vertical-alignment: TextVerticalAlignment.center;
                    horizontal-alignment: TextHorizontalAlignment.left;
                    // width can be fixed or let text size itself
                }

                // Description (right) — can take remaining width and occupy same height
                Text {
                    text: "Thunderstorm with heavy drizzle";
                    font-size: 13px;
                    color: #ffffffcc;
                    font-family: "IosevkaTermSlab Nerd Font Mono";
                    horizontal-alignment: TextHorizontalAlignment.left;
                    vertical-alignment: TextVerticalAlignment.center;
                    horizontal-stretch: 1.0;
                    wrap: word-wrap;               
                }
            }
        }
    }
}