class SignUp extends Shadow {
    render() {

        ZStack(() => {
            img("/_/icons/columnred.svg", window.isMobile() ? "5vmax" : "3vmax")
                .position("absolute")
                .top(2, em)
                .left(2, em)
                .onClick((done) => {
                    window.navigateTo("/")
                })

            VStack(() => {
                
                h2("$50 / Month Subscription")
                    .color("var(--quillred)")

                p(" - Access to Forum Online and Forum Desktop")
                p(" - Ability to Create Groups")
                p(" - Up to 5GB Storage Space")

                button("Buy")
                    .color("var(--quillred")
                    .border("1px solid var(--quillred)")
                    .marginLeft("auto")
                    .fontSize(1.1, em)
                    .onClick(async function() {
                        this.innerText = "Loading..."
                        const res = await fetch("/create-checkout-session", { method: "POST" });
                        const data = await res.json();
                        window.location = data.url;                        
                    })
                    .marginTop(2, em)
            })
            .x(50, vw).y(50, vh).center()
            .border("1px solid var(--red)")
            .padding(1, em)
            .width(isMobile() ? 70 : "auto", isMobile() ? vw :  "")
        })
    }
}

register(SignUp)