class Events extends Shadow {

    events = [
        {
            date: `January 2, 2025`,
            title: `Hyperia Winter Ball`,
            description: `Join us in Austin, Texas for a dance. Live music and drinks will be included. <br>Admission for men is $50, women are free. Open to the public.`,
            location: `Austin, TX`
        }
    ]

    render() {
        VStack(() => {

            p("Public Events")
            .fontSize(1.2, em)
            .marginBottom(2, em)

            const Stack = window.isMobile() ? VStack : HStack
            Stack(() => {
    
                VStack(() => {
                    p(`January 2, 2025`)
    
                    p(`Hyperia Winter Ball`)
                    .fontSize(1.2, em)
    
                    p(`Austin, TX`)

                })

                p(`Join us in Austin, Texas for a great dance, with free drinks and live music by Boerne's own Noah Kurtis. <br><br>Admission: $50 for men, women are free.`)
                    .marginRight(4, em)

                button("Buy Ticket")
                    .color("var(--darkbrown")
                    .border("1px solid #ab2f007d")
                    .background('var(--green)')
                    .marginLeft("auto")
            })
            .gap(3, em)
            .color("var(--darkbrown)")
            .background(`var(--accent)`)
            .padding(1, em)
            .borderRadius(12, px)
            .border("2px solid #ab2f007d")
        })
        .marginLeft(window.isMobile() ? 0 : 15, vmax)
        .marginRight(window.isMobile() ? 0 : 15, vmax)
        .marginTop(15, vmax)
    }
}

register(Events)