const bindAll = require('lodash.bindall');
const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
const FormattedMessage = require('react-intl').FormattedMessage;
const injectIntl = require('react-intl').injectIntl;
const intlShape = require('react-intl').intlShape;
const React = require('react');

const Button = require('../../components/forms/button.jsx');
const FlexRow = require('../../components/flex-row/flex-row.jsx');
const MasonryGrid = require('../../components/masonrygrid/masonrygrid.jsx');
const TitleBanner = require('../../components/title-banner/title-banner.jsx');
const NavigationBox = require('../../components/navigation/base/navigation.jsx');

const Page = require('../../components/page/www/page.jsx');
const render = require('../../lib/render.jsx');

require('./annual-report.scss');

const AnnualReport = () => (
    <div>
        <div className="subnavigation">
            <FlexRow className="inner">
                 <a
                            className="link"
                            href="/annual-report#message"
                        >
                            <FormattedMessage id="annualReport.subnavMessage" />
                        </a>
                        <a
                            className="link"
                            href="/annual-report#mission"
                        >
                            <FormattedMessage id="annualReport.subnavMission" />
                        </a>
                        <a
                            className="link"
                            href="/annual-report#reach"
                        >
                            <FormattedMessage id="annualReport.subnavReach" />
                        </a>
                        <a
                            className="link"
                            href="/annual-report#timeline"
                        >
                            <FormattedMessage id="annualReport.subnavTimeline" />
                        </a>
                        <a
                            className="link"
                            href="/annual-report#work"
                        >
                            <FormattedMessage id="annualReport.subnavWork" />
                        </a>
                        <a
                            className="link"
                            href="/annual-report#financials"
                        >
                            <FormattedMessage id="annualReport.subnavFinancials" />
                        </a>
                        <a
                            className="link"
                            href="/annual-report#supporters"
                        >
                            <FormattedMessage id="annualReport.subnavSupporters" />
                        </a>
                        <a
                            className="link"
                            href="/annual-report#leadership"
                        >
                            <FormattedMessage id="annualReport.subnavLeadership" />
                        </a>
                        <a
                            className="link"
                            href="/annual-report#donate"
                        >
                            <FormattedMessage id="annualReport.subnavDonate" />
                        </a>
            </FlexRow>
        </div>
        <div className="banner-wrapper">
            <TitleBanner className="masthead masthead">
                <div className="title-banner-p">
                    <img src="/images/ideas/masthead-illustration.svg" />
                    <h1 className="title-banner-h1">
                        <FormattedMessage id="ideas.headerMessage" />
                    </h1>
                    <a href="/projects/editor/?tutorial=all">
                        <Button className="ideas-button">
                            <img src="/images/ideas/bulb-icon.svg" />
                            <FormattedMessage id="ideas.headerButtonMessage" />
                        </Button>
                    </a>
                </div>
            </TitleBanner>
        </div>
        <div className="mission" id="mission">
            <div className="inner">
                <FlexRow
                    as="section"
                    className="tips-info-section tips-left"
                >
                    <div className="ideas-image">
                        <img src="/images/ideas/getting-started-illustration.svg" />
                    </div>
                    <div>
                        <h2>
                            <FormattedMessage id="ideas.gettingStartedTitle" />
                        </h2>
                        <p>
                            <FormattedHTMLMessage id="ideas.gettingStartedText" />
                        </p>
                        <a href="/projects/editor/?tutorial=getStarted">
                            <Button className="ideas-button">
                                <img src="/images/ideas/try-it-icon.svg" />
                                <FormattedMessage id="ideas.tryIt" />
                            </Button>
                        </a>
                    </div>
                </FlexRow>
            </div>
        </div>
        <div className="our-reach" id="reach">
            <div className="inner">
                <section className="ttt-section">
                    <div className="ttt-head">
                        <h2>
                            <FormattedMessage id="ideas.activityGuidesTitle" />
                        </h2>
                        <p>
                            <FormattedHTMLMessage id="ideas.activityGuidesText" />
                        </p>
                    </div>
                    <a
                        className="wide-button"
                        href="/projects/editor/?tutorial=all"
                    >
                        <Button className="ideas-button wide-button">
                            <FormattedMessage id="ideas.seeAllTutorials" />
                        </Button>
                    </a>
                </section>
            </div>
        </div>
        <div className="history" id="history">
            <div className="inner">
                <section className="ttt-section">
                    <div className="ttt-head">
                        <h2>
                            <FormattedMessage id="ideas.activityGuidesTitle" />
                        </h2>
                        <p>
                            <FormattedHTMLMessage id="ideas.activityGuidesText" />
                        </p>
                    </div>
                    <a
                        className="wide-button"
                        href="/projects/editor/?tutorial=all"
                    >
                        <Button className="ideas-button wide-button">
                            <FormattedMessage id="ideas.seeAllTutorials" />
                        </Button>
                    </a>
                </section>
            </div>
        </div>
        <div className="our-work" id="work">
            <div className="inner">
                <section className="ttt-section">
                    <div className="ttt-head">
                        <h2>
                            <FormattedMessage id="ideas.activityGuidesTitle" />
                        </h2>
                        <p>
                            <FormattedHTMLMessage id="ideas.activityGuidesText" />
                        </p>
                    </div>
                    <a
                        className="wide-button"
                        href="/projects/editor/?tutorial=all"
                    >
                        <Button className="ideas-button wide-button">
                            <FormattedMessage id="ideas.seeAllTutorials" />
                        </Button>
                    </a>
                </section>
            </div>
        </div>
        <div className="financials-section" id="financials">
            <div className="inner">
                <h1 className="financials-h1">
                    <FormattedMessage id="annualReport.financialsTitle" />
                </h1>
                <h2>
                    <FormattedMessage id="annualReport.financialsRevenue" />
                </h2>
                <hr />
                <div className="financials-content">
                    <div className="financials-table">
                        <div className="circle-and-words">
                            <img src="/images/annual-report/blue-circle.svg" />
                            <div className="key-and-money">
                                <p className="key">
                                    <FormattedMessage id="annualReport.financialsGrants" />
                                </p>
                                <p>
                                    $3,898,078
                                    <span className="percentage"> (82.7%)</span>
                                </p>
                            </div>
                        </div>
                        <div className="circle-and-words">
                            <img src="/images/annual-report/yellow-circle.svg" />
                            <div className="key-and-money">
                                <p className="key">
                                    <FormattedMessage id="annualReport.financialsEvents" />
                                </p>
                                <p>
                                    $700,000
                                    <span className="percentage"> (14.8%)</span>
                                </p>
                            </div>
                        </div>
                        <div className="circle-and-words">
                            <img src="/images/annual-report/green-circle.svg" />
                            <div className="key-and-money">
                                <p className="key">
                                    <FormattedMessage id="annualReport.financialsOther" />
                                </p>
                                <p>
                                    $114,982
                                    <span className="percentage"> (2.4%)</span>
                                </p>
                            </div>
                        </div>
                        <div className="circle-and-words">
                            <div className="key-and-money total">
                                <p className="key">
                                    <FormattedMessage id="annualReport.financialsTotal" />
                                </p>
                                <p>
                                    $4,713,060
                                </p>
                            </div>
                        </div>
                    </div>
                    <img  className="graph" src="/images/annual-report/revenue-graph.svg" />
                </div>
                <h2>
                    <FormattedMessage id="annualReport.financialsExpenses" />
                </h2>
                <hr/>
                <div className="financials-content">
                    <div className="financials-table">
                        <div className="circle-and-words">
                            <img src="/images/annual-report/blue-circle.svg" />
                            <div className="key-and-money">
                                <p className="key">
                                    <FormattedMessage id="annualReport.financialsProgram" />
                                </p>
                                <p>
                                    $1,135,767
                                    <span className="percentage"> (48.8%)</span>
                                </p>
                            </div>
                        </div>
                        <div className="circle-and-words">
                            <img src="/images/annual-report/yellow-circle.svg" />
                            <div className="key-and-money">
                                <p className="key">
                                    <FormattedMessage id="annualReport.financialsGeneral" />
                                </p>
                                <p>
                                    $224,104
                                    <span className="percentage"> (9.6%)</span>
                                </p>
                            </div>
                        </div>
                        <div className="circle-and-words">
                            <img src="/images/annual-report/green-circle.svg" />
                            <div className="key-and-money">
                                <p className="key">
                                    <FormattedMessage id="annualReport.financialsFundraising" />
                                </p>
                                <p>
                                    $962,958
                                    <span className="percentage"> (41.4%)</span>
                                </p>
                            </div>
                        </div>
                        <div className="circle-and-words">
                            <div className="key-and-money total">
                                <p className="key">
                                    <FormattedMessage id="annualReport.financialsTotal" />
                                </p>
                                <p>
                                    $2,322,829
                                </p>
                            </div>
                        </div>
                    </div>
                    <img  className="graph" src="/images/annual-report/expenses-graph.svg" />
                </div>
                <div className="financials-button-wrapper">
                    <a href="https://secure.donationpay.org/scratchfoundation/">
                        <Button className="financials-button">
                            <FormattedMessage id="annualReport.financialsButton" />
                            <img
                                className="download-icon"
                                src="/images/annual-report/download-icon.svg"
                            />
                        </Button>
                    </a>
                </div>
            </div>
        </div>
        <div className="supporters-section" id="supporters">
            <div className="inner">
                <div className="supporters-heading">
                    <h1>
                        <FormattedMessage id="annualReport.supportersTitle" />
                    </h1>
                    <p>
                        <FormattedHTMLMessage id="annualReport.supportersIntro" />
                    </p>
                </div>
                <div className="donor-spotlight">
                    <div className="subsection-tag">
                        <FormattedHTMLMessage id="annualReport.supportersSpotlightTitle" />
                    </div>
                    <div className="sfe-info">
                        <h2>
                            <FormattedMessage id="annualReport.supportersSFETitle" />
                        </h2>
                        <p>
                            <FormattedMessage id="annualReport.supportersSFEDescription" />
                        </p>
                    </div>
                    <div className="david-siegel">
                        <div className="ds-info">
                            <img src="/images/annual-report/david-siegel-photo.svg" />
                            <h3>David Siegel</h3>
                            <div>Co-Founder and Co-Chairman Two Sigma</div>
                        </div>
                        <div className="ds-quote">
                            Making sure that Scratch remains free and accessible for kids everywhere is one of the most impactful ways we can help young learners engage and thrive in an increasingly digital world. Supporting Scratch is more important today than ever before.
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div className="donate-section" id="donate">
            <FlexRow className="donate-info">
                <img src="/images/annual-report/donate-illustration.svg" />
                <div className="donate-content">
                    <h1 className="donate-h1">
                        <FormattedMessage id="annualReport.donateTitle" />
                    </h1>
                    <p className="donate-p">
                        <FormattedMessage id="annualReport.donateMessage" />
                    </p>
                    <a href="https://secure.donationpay.org/scratchfoundation/">
                        <Button className="donate-button">
                            <FormattedMessage id="annualReport.donateButton" />
                        </Button>
                    </a>
                </div>
            </FlexRow>
        </div>
    </div>
);

render(
    <Page><AnnualReport /></Page>, document.getElementById('app'));