import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useDevice } from "../../contexts/device";
import { useGetLang } from "../../hooks/locale";
import React from "react";
import Text from "../text";
import { Wrapper, Inner, NoBtn, Close, PrimaryCircle, SecondaryCircle, Circles, Action, RegisterCircle, EqCircles, } from "./styled";
import Icons from "../icons";
import { t } from "ttag";
const GrandBanner = ({ eq }) => {
    const { screen } = useDevice();
    const isMobile = screen !== "large";
    const lang = useGetLang();
    const [hide, setHide] = React.useState(false);
    const hideBanner = React.useCallback((e) => {
        e.preventDefault();
        e.stopPropagation();
        setHide(true);
        localStorage.setItem(`${eq ? "eq" : "gen"}-new-grand-banner-crowdloan-hide-2`, "true");
    }, []);
    const isHideBanner = !!localStorage.getItem(`${eq ? "eq" : "gen"}-new-grand-banner-crowdloan-hide-2`);
    const Desc = isMobile ? Text.F2 : Text.T4;
    if (isHideBanner || hide)
        return null;
    return (_jsxs(Wrapper, { href: eq
            ? `https://forms.gle/S3MevTi5Yk6HrxhL6`
            : `https://genshiro.equilibrium.io/${lang}/plo?utm_source=genshiro&utm_medium=banner&utm_campaign=KSM_crowdloan_2#participate`, eq: eq, children: [!eq ? (_jsxs(Inner, { children: [_jsx(Text.T1, { fontSize: isMobile ? 26 : 38, lineHeight: isMobile ? 30 : 38, textAlign: isMobile ? "center" : "left", fontFamily: "Fortnite", color: eq ? "#1792FF" : "#FFFFFF", style: { textTransform: "uppercase" }, children: t `Genshiro Crowdloan Is LIVE!` }), _jsxs(Circles, { children: [_jsx(PrimaryCircle, { children: _jsxs(Text.T1, { fontSize: isMobile ? 14 : 30, lineHeight: isMobile ? 14 : 35, fontFamily: "Fortnite", color: eq ? "#FFFFFF" : "#E8662D", textAlign: "center", style: { textTransform: "uppercase" }, children: [t `KSM downside`, " ", _jsx("br", {}), " ", t `protection`] }) }), _jsx(SecondaryCircle, { children: _jsxs(Desc, { color: eq ? "#FFFFFF" : "#E8662D", textAlign: "center", lineHeight: isMobile ? 16 : 20, fontFamily: "ExtraBold", children: [t `Up to`, " ", _jsx("br", {}), " ", t `4,800 GENS`, " ", _jsx("br", {}), " ", t `per 1 KSM`] }) })] }), _jsx(Action, { children: _jsx(NoBtn, { children: _jsx(Text.T4, { color: eq ? "#FFFFFF" : "#E8662D", fontFamily: "ExtraBold", children: t `Vote and get GENS` }) }) })] })) : (_jsxs(Inner, { children: [_jsxs("div", { children: [_jsx(Text.T1, { fontSize: isMobile ? 20 : 28, lineHeight: isMobile ? 22 : 30, textAlign: isMobile ? "center" : "left", fontFamily: "Heavy", color: "#FFFFFF", style: isMobile
                                    ? { margin: "0 36px 0", padding: "4px 0" }
                                    : { margin: "0 0 4px" }, children: !isMobile ? (t `Join Equilibrium’s crowdloan waitlist before October 31st!`) : (_jsxs(_Fragment, { children: [t `Join Equilibrium’s crowdloan`, _jsx("br", {}), t `waitlist before October 31st!`] })) }), _jsx(Text.T2, { fontSize: isMobile ? 10 : 16, lineHeight: isMobile ? 14 : 18, textAlign: isMobile ? "center" : "left", fontFamily: "Heavy", color: "#FFFFFF", style: { paddingBottom: "2px" }, children: t `Get a 10% bonus on your DOT contributions to the crowdloan` })] }), _jsx(EqCircles, { children: _jsx(RegisterCircle, { children: _jsx(Text.T1, { fontSize: isMobile ? 14 : 16, lineHeight: isMobile ? 14 : 28, fontFamily: "Heavy", color: !isMobile ? "#002445" : "#FFF", textAlign: "center", children: t `Register here` }) }) })] })), _jsx(Close, { onClick: hideBanner, children: _jsx(Icons.Cross, {}) })] }));
};
export default GrandBanner;
//# sourceMappingURL=index.js.map