/* global React */

function SectionDownload() {
  const i18n = window.__i18n;
  return (
    <section id="download" className="download-v2 section">
      <div className="download-v2__inner">
        <div className="download-v2__panel">
          <div className="download-v2__bookmark">
            <svg viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M8 4 L8 28 L16 22 L24 28 L24 4 Z"/>
            </svg>
          </div>
          <h3 className="download-v2__title">{i18n.t("dl.title")}</h3>
          <p className="download-v2__lede">{i18n.t("dl.lede")}</p>
          <div className="download-v2__stores">
            <a href="#" className="dl-pill" aria-label="App Store">
              <div className="dl-pill__icon">
                <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>
              </div>
              <div className="dl-pill__txt">
                <small>{i18n.t("dl.from")}</small>
                <b>{i18n.t("dl.appstore")}</b>
              </div>
            </a>
            <a href="#" className="dl-pill" aria-label="Google Play">
              <div className="dl-pill__icon">
                <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M3.6 2.4c-.4.3-.6.7-.6 1.3v16.6c0 .6.2 1 .6 1.3l9.4-9.4-9.4-9.8zM14.7 12.6l2.6 2.7-11 6.4 8.4-9.1zm5.5-3.2c.7.4 1.1 1 1.1 1.6 0 .6-.4 1.2-1.1 1.6l-2.9 1.7-3-2.9 3-2.9 2.9.9zM14.7 11.4l-8.4-9.1 11 6.4-2.6 2.7z"/></svg>
              </div>
              <div className="dl-pill__txt">
                <small>{i18n.t("dl.from")}</small>
                <b>{i18n.t("dl.gplay")}</b>
              </div>
            </a>
            <a href="#" className="dl-pill" aria-label="AppGallery">
              <div className="dl-pill__icon">
                <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor">
                  <path d="M12 2C7 2 3 6 3 11c0 4 2.5 7.4 6 8.6V22h6v-2.4c3.5-1.2 6-4.6 6-8.6 0-5-4-9-9-9zm0 14c-2.8 0-5-2.2-5-5s2.2-5 5-5 5 2.2 5 5-2.2 5-5 5z"/>
                </svg>
              </div>
              <div className="dl-pill__txt">
                <small>{i18n.t("dl.from")}</small>
                <b>{i18n.t("dl.huawei")}</b>
              </div>
            </a>
          </div>
        </div>
        <div className="download-v2__visual">
          <div className="download-v2__phone-stack">
            <img src="assets/hand.png" alt="" aria-hidden="true" className="download-v2__hand"/>
            <div className="download-v2__phone">
              <PhoneFrame screen="splash"/>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.SectionDownload = SectionDownload;