var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import Hero from '../Hero';
import SideFeature from '../SideFeature';
import CenterFeature from '../CenterFeature';
import KeyHighlights from '../KeyHighlights';
import TrumpetSvg from '../../Icons/TrumpetSvg';
import ScrollSvg from '../../Icons/ScrollSvg';
import SwordsSvg from '../../Icons/SwordsSvg';
import './CharacterSheetLandingPage.scss';
var StyledHero = styled(Hero)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .hero__text-wrapper {\n        max-width: 605px;\n    }\n"], ["\n    .hero__text-wrapper {\n        max-width: 605px;\n    }\n"])));
var StyledSideFeature = styled(SideFeature)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    .side-feature__content {\n        max-width: 1460px;\n    }\n    .side-feature__header-text span {\n        white-space: nowrap;\n    }\n"], ["\n    .side-feature__content {\n        max-width: 1460px;\n    }\n    .side-feature__header-text span {\n        white-space: nowrap;\n    }\n"])));
var StyledCenterFeature = styled(CenterFeature)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    .center-feature__content {\n        max-width: 590px;\n    }\n"], ["\n    .center-feature__content {\n        max-width: 590px;\n    }\n"])));
var CharacterSheetLandingPage = function (_a) {
    var returnUrl = _a.returnUrl;
    return (React.createElement(React.Fragment, null,
        React.createElement(StyledHero, { backgroundImage: {
                large: '/content/images/landing-pages/cs/character-sheet-hero-background-desktop.jpg',
                medium: '/content/images/landing-pages/cs/character-sheet-hero-background-tablet.jpg',
                small: '/content/images/landing-pages/cs/character-sheet-hero-background-mobile.jpg',
            }, fromText: "Your D&D Characters Anywhere, Anytime, Any Device", bookTitle: "D&D Beyond Character Sheet", titleFollow: "The World's most intelligent Dungeons and Dragons Character Sheet.", buttonText: "Sign in Now", href: "/sign-in?returnUrl=" + returnUrl }),
        React.createElement(StyledSideFeature, { backgroundImage: {
                large: '/content/images/landing-pages/cs/character-sheet-feature-background-1-desktop.jpg',
                medium: '/content/images/landing-pages/cs/character-sheet-feature-background-1-tablet.jpg',
                small: '/content/images/landing-pages/cs/character-sheet-feature-background-1-mobile.jpg',
            }, featureImage: {
                source: '/content/images/landing-pages/cs/character-sheet-screenshot-1.png',
                alt: 'Example of a D&D Beyond Character Sheet - Level 8 female Protector Aasimar Cleric named Nima showing automatically calculated ability scores, initiative, skills, actions, and more with built-in tracking for HP, conditions, equipment, and spells as well as integrated dice rolling',
            }, featureHeaderText: React.createElement(React.Fragment, null,
                React.createElement("span", null, "Keep track of"),
                " ",
                React.createElement("span", null, "\u201CAll the Things\u201D")), featureBodyText: "Ability Scores, Armor Class, Hit Points, Saving Throws, Actions, Spells, Equipment and more are automatically calculated and displayed for easy reference at the table." }),
        React.createElement(StyledCenterFeature, { backgroundImage: {
                large: '/content/images/landing-pages/cs/character-sheet-feature-background-2-desktop.jpg',
                medium: '/content/images/landing-pages/cs/character-sheet-feature-background-2-tablet.jpg',
                small: '/content/images/landing-pages/cs/character-sheet-feature-background-2-mobile.jpg',
            }, featureHeaderText: "Quick and Customizable", featureBodyText: "Everything is at your finger tips on any device. Need to know how long \u201CSleet Storm\u201D lasts? Its here. How many Arrows you have left? You got it. Manage all of your resources in real time." }),
        React.createElement(KeyHighlights, { headerText: "Play with Advantage", highlights: [
                {
                    icon: React.createElement(TrumpetSvg, null),
                    header: 'Digital Dice Integrated',
                    text: 'Forget your dice? Click or tap on any rollable ability or check and watch the dice roll across your screen.',
                },
                {
                    icon: React.createElement(ScrollSvg, null),
                    header: 'Manage Equipment, Inventory and Resources',
                    text: 'Add/Subtract HP, Short/Long Rest, Death Saves, You will know the status of everything on one screen.',
                },
                {
                    icon: React.createElement(SwordsSvg, null),
                    header: 'Custom Frames and Backgrounds',
                    text: 'Make it personal with magical D&D art and splash of color or animation.',
                },
            ], buttonText: "Start Adventuring", href: "/sign-in?returnUrl=" + returnUrl })));
};
CharacterSheetLandingPage.propTypes = {
    returnUrl: PropTypes.string.isRequired,
};
export default CharacterSheetLandingPage;
var templateObject_1, templateObject_2, templateObject_3;
//# sourceMappingURL=CharacterSheetLandingPage.js.map