// Generated by purs version 0.13.6
"use strict";
var Control_Applicative = require("../Control.Applicative/index.js");
var Control_Bind = require("../Control.Bind/index.js");
var Data_Foldable = require("../Data.Foldable/index.js");
var Data_Functor = require("../Data.Functor/index.js");
var Data_Maybe = require("../Data.Maybe/index.js");
var Data_Nullable = require("../Data.Nullable/index.js");
var Data_Symbol = require("../Data.Symbol/index.js");
var Effect = require("../Effect/index.js");
var JSS = require("../JSS/index.js");
var React_Basic = require("../React.Basic/index.js");
var React_Basic_DOM = require("../React.Basic.DOM/index.js");
var React_Basic_DOM_Generated = require("../React.Basic.DOM.Generated/index.js");
var React_Basic_Events = require("../React.Basic.Events/index.js");
var React_Basic_Hooks = require("../React.Basic.Hooks/index.js");
var React_Basic_Hooks_Internal = require("../React.Basic.Hooks.Internal/index.js");
var Record_Extra = require("../Record.Extra/index.js");
var Type_Equality = require("../Type.Equality/index.js");
var Web_HTML = require("../Web.HTML/index.js");
var Web_HTML_HTMLElement = require("../Web.HTML.HTMLElement/index.js");
var Yoga_Button_Component = require("../Yoga.Button.Component/index.js");
var Yoga_SVG_Icon = require("../Yoga.SVG.Icon/index.js");
var Yoga_SVG_Image = require("../Yoga.SVG.Image/index.js");
var Yoga_Scroll_Hook = require("../Yoga.Scroll.Hook/index.js");
var Yoga_Theme_Styles = require("../Yoga.Theme.Styles/index.js");
var Yoga_Typography_Header = require("../Yoga.Typography.Header/index.js");
var welcomeText = "Enter the college of Kleisli";
var copyText = "Learn how to tame and harness the compiler, whether you're a \u03bb or a \u039b";
var buttonText = "I can't wait, let's go!";
var mkLandingPage = function __do() {
    var useStyles = Yoga_Theme_Styles.makeStylesJSS()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "actionButton";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "actualActionButton";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "landing";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "landingImage";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "logo";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "textLayer";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "topBar";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "welcomeCopy";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "welcomeText";
    }))()(Record_Extra.mapRecordNil)()())()())()())()())()())()())()())()())()())(JSS.jssClasses()(function (v) {
        return {
            landing: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "gridArea";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "height";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "width";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))))()())({
                width: "100vw",
                height: "100vh",
                gridArea: "landing"
            }),
            textLayer: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "height";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "position";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "width";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "zIndex";
            }))(JSS.jssAbleInt)()()()(JSS.jssAbleFieldsNil)))))()())({
                position: "absolute",
                width: "100%",
                height: "100%",
                zIndex: 2
            }),
            topBar: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "alignItems";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "display";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "flexDirection";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "height";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "justifyContent";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "width";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))))))()())({
                width: "100%",
                display: "flex",
                flexDirection: "row",
                height: "90px",
                justifyContent: "center",
                alignItems: "space-around"
            }),
            logo: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "fill";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "height";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "marginTop";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "width";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))))()())({
                fill: v.textColour,
                width: "50px",
                height: "50px",
                marginTop: "33px"
            }),
            welcomeText: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "fontSize";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "marginLeft";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "marginTop";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))))()())({
                fontSize: "36pt",
                marginTop: "33px",
                marginLeft: "5vw"
            }),
            welcomeCopy: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "fontSize";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "marginLeft";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "marginTop";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "maxWidth";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))))()())({
                fontSize: "22pt",
                marginTop: "20px",
                marginLeft: "5vw",
                maxWidth: "400px"
            }),
            actionButton: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "display";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "marginLeft";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))()())({
                marginLeft: "5vw",
                display: "flex"
            }),
            actualActionButton: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "paddingLeft";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "paddingRight";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))()())({
                paddingLeft: "10px",
                paddingRight: "10px"
            }),
            landingImage: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "height";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "position";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "width";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))))()())({
                position: "absolute",
                width: "100%",
                height: "100%"
            })
        };
    }))();
    var h = Yoga_Typography_Header.mkH();
    var button = Yoga_Button_Component.mkButton()()()()();
    var backgroundImage = Yoga_SVG_Image.mkLandingPageBackground();
    return React_Basic_Hooks.component()()()("LandingPage")(function (v) {
        return React_Basic_Hooks_Internal.bind(React_Basic_Hooks_Internal.ixBindRender)(useStyles({}))(function (classes) {
            return React_Basic_Hooks_Internal.bind(React_Basic_Hooks_Internal.ixBindRender)(Yoga_Theme_Styles.useTheme)(function (theme) {
                return React_Basic_Hooks_Internal.bind(React_Basic_Hooks_Internal.ixBindRender)(React_Basic_Hooks.useRef(Data_Nullable["null"]))(function (ref) {
                    return React_Basic_Hooks_Internal.bind(React_Basic_Hooks_Internal.ixBindRender)(Yoga_Scroll_Hook.useScrollYPosition)(function (scrollY) {
                        return Control_Applicative.pure(React_Basic_Hooks_Internal.applicativeRender(Type_Equality.refl))(React_Basic_DOM_Generated.div()({
                            ref: ref,
                            className: classes.landing,
                            children: [ React_Basic.element(backgroundImage)({
                                className: classes.landingImage
                            }), React_Basic_DOM_Generated.div()({
                                className: classes.textLayer,
                                children: [ React_Basic_DOM_Generated.div()({
                                    className: classes.topBar,
                                    children: [ React_Basic.element(Yoga_SVG_Icon.trianglelogoIcon())({
                                        className: classes.logo
                                    }) ]
                                }), React_Basic_DOM_Generated.div()({
                                    className: classes.welcomeText,
                                    children: [ React_Basic_DOM.text(welcomeText) ]
                                }), React_Basic_DOM_Generated.div()({
                                    className: classes.welcomeCopy,
                                    children: [ React_Basic_DOM.text(copyText) ]
                                }), React_Basic_DOM_Generated.div()({
                                    className: classes.actionButton,
                                    children: [ React_Basic.element(button)({
                                        buttonProps: {
                                            onClick: React_Basic_Events.handler_(function __do() {
                                                var maybeNode = React_Basic_Hooks.readRefMaybe(ref)();
                                                return Data_Foldable.for_(Effect.applicativeEffect)(Data_Foldable.foldableMaybe)(Control_Bind.bind(Data_Maybe.bindMaybe)(maybeNode)(Web_HTML_HTMLElement.fromNode))(function (n) {
                                                    return function __do() {
                                                        var height = Data_Functor.mapFlipped(Effect.functorEffect)(Web_HTML_HTMLElement.getBoundingClientRect(n))(function (v1) {
                                                            return v1.height;
                                                        })();
                                                        var win = Web_HTML.window();
                                                        return win.scrollTo({
                                                            top: height,
                                                            left: 0,
                                                            behavior: "smooth"
                                                        });
                                                    };
                                                })();
                                            })
                                        },
                                        buttonType: Yoga_Button_Component.HighlightedButton.value,
                                        kids: [ React_Basic_DOM.text(buttonText) ],
                                        className: classes.actualActionButton
                                    }) ]
                                }) ]
                            }) ]
                        }));
                    });
                });
            });
        });
    })();
};
module.exports = {
    mkLandingPage: mkLandingPage,
    welcomeText: welcomeText,
    copyText: copyText,
    buttonText: buttonText
};