/* eslint-disable @next/next/no-img-element */
import Script from "next/script";

export default function FiFooter() {
  return (
    <footer className="global-footer">
      <div className="global-footer__content">
        <h2 className="global-footer__content__heading">
          <img
            src="/Static/img/scandic-logotype-white.svg"
            data-js="scandiclogoimg"
            alt="Scandic hotels logo"
            height="22"
            data-nosvgsrc="/Static/img/scandic-logotype-white.png"
          />
          <span className="hidden--accessible">Scandic</span>
        </h2>
        <ul className="l-footer-sections">
          <li className="global-footer-section">
            <div className="link-list-top-header">Scandicista</div>
          </li>
          <li className="global-footer-section">
            <div className="link-list-top-header">Asiakaspalvelu</div>
          </li>
          <li className="global-footer-section">
            <div className="link-list-top-header">Pikalinkit</div>
          </li>
        </ul>
        <div
          data-js-collapsible="global-footer"
          className="collapsible-global-footer"
        >
          <ul className="l-footer-sections global-footer__content__sections">
            <li className="global-footer-section">
              <div className="link-list">
                <h3 className="link-list-header">Scandicista</h3>
                <ul className="list-footer-pages">
                  <li>
                    <a href="https://www.scandichotelsgroup.com/our-company/">
                      Yrityksemme | Scandic Hotels Group AB
                    </a>
                  </li>
                  <li>
                    <a href="https://www.scandichotelsgroup.com/investors/">
                      Sijoittajat | Scandic Hotels Group AB
                    </a>
                  </li>
                  <li>
                    <a href="http://www.scandichotelsgroup.com/fi/media/local-pressroom/finland/">
                      Mediapankki
                    </a>
                  </li>
                  <li>
                    <a href="https://www.scandichotels.fi/tyo">
                      Työ Scandicissa
                    </a>
                  </li>
                  <li>
                    <a href="https://www.scandichotels.fi/koe-scandic/kestava-kehitys-ja-vastuullisuus">
                      Vastuullisuus ja kestävä kehitys
                    </a>
                  </li>
                  <li>
                    <a href="https://www.scandichotels.fi/yhteistyokumppanit">
                      Yhteistyö
                    </a>
                  </li>
                  <li>
                    <a href="https://www.scandichotels.fi/sponsorointi">
                      Sponsorointi
                    </a>
                  </li>
                </ul>
              </div>
            </li>
            <li className="global-footer-section">
              <div className="link-list">
                <h3 className="link-list-header">Asiakaspalvelu</h3>
                <ul className="list-footer-pages">
                  <li>
                    <a href="https://www.scandichotels.fi/asiakaspalvelu">
                      Ota yhteyttö
                    </a>
                  </li>
                  <li>
                    <a href="https://www.scandichotels.fi/asiakaspalvelu/usein-kysytyt-kysymykset">
                      Usein kysytyt kysymykset
                    </a>
                  </li>
                  <li>
                    <a href="https://www.scandichotels.fi/asiakaspalvelu/hinnat-ja-varausehdot/evasteita-koskevat-ehdot">
                      Evösteitö koskevat ehdot
                    </a>
                  </li>
                  <li>
                    <a href="https://www.scandichotels.fi/asiakaspalvelu/hinnat-ja-varausehdot/tietosuojaseloste">
                      Tietosuojaseloste
                    </a>
                  </li>
                  <li>
                    <a href="https://www.scandichotels.fi/asiakaspalvelu/hinnat-ja-varausehdot/sivujen-kayttoehdot">
                      Verkkosivun ehdot ja söönnöt
                    </a>
                  </li>
                  <li>
                    <a href="https://www.scandichotels.fi/asiakaspalvelu/hinnat-ja-varausehdot">
                      Hinnat ja varausehdot
                    </a>
                  </li>
                </ul>
              </div>
            </li>
            <li className="global-footer-section">
              <div className="link-list">
                <h3 className="link-list-header">Pikalinkit</h3>
                <ul className="list-footer-pages">
                  <li>
                    <a href="https://www.scandichotels.fi/hotellit">
                      Hotellit ja kohteet
                    </a>
                  </li>
                  <li>
                    <a href="https://www.scandichotels.fi/koe-scandic">
                      Koe Scandic
                    </a>
                  </li>
                  <li>
                    <a href="https://www.scandichotels.fi/scandic-friends">
                      Scandic Friends
                    </a>
                  </li>
                  <li>
                    <a href="https://www.scandichotels.fi/koe-scandic/sports">
                      Scandic Sports
                    </a>
                  </li>
                  <li>
                    <a href="https://www.tripadvisor.fi/UserReview-p2178">
                      Arvioi meitö TripAdvisorissa
                    </a>
                  </li>
                  <li>
                    <a href="https://www.scandichotels.fi/koe-scandic/parhaan-hinnan-takuu">
                      Parhaan hinnan takuu
                    </a>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
          <div className="global-footer__content__bottom">
            <p>
              <strong>MEISTÄ</strong>
            </p>
            <p>
              Scandic on Pohjoismaiden suurin hotelliketju, jolla on noin 280
              hotellia ja 58 000 huonetta toiminnassa ja kehitteillä kuudessa
              maassa. Joka päivä yli 15 000 tiimiläistämme luovat upeita
              hotellielämyksiä, jotta hotellivieraamme haluaisivat tulla meille
              aina uudestaan.
            </p>
            <p>
              <strong>LATAA SCANDIC-SOVELLUS</strong>
            </p>
            <table
              style={{
                width: "100%",
                borderCollapse: "collapse",
                height: "38px",
              }}
            >
              <tbody>
                <tr style={{ height: "38px" }}>
                  <td
                    style={{ width: "50%", textAlign: "right", height: "38px" }}
                  >
                    <a
                      title="App storesta"
                      href="https://apps.apple.com/fi/app/scandic-hotels/id1267218985"
                      target="_blank"
                      rel="noopener"
                    >
                      <img
                        src="/imageVault/publishedmedia/3x8q0spg79rpnf6tkhl2/app_store_finnish.png"
                        alt=""
                      />
                    </a>
                  </td>
                  <td
                    style={{ width: "50%", textAlign: "left", height: "38px" }}
                  >
                    <a
                      title="Google Play"
                      href="https://play.google.com/store/apps/details?id=com.scandichotels.app"
                      target="_blank"
                      rel="noopener"
                    >
                      <img
                        src="/imageVault/publishedmedia/hmfwx856co5s5rmd2vu1/Android-finnish.png"
                        alt=""
                      />
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <style
            dangerouslySetInnerHTML={{
              __html: `#map-destinations-list .hotel-teaser .hotel-teaser__body + .special-alerts.special-alerts--inline-block {
display: none;
}`,
            }}
          />
          <p>
            <Script
              id="inline-script"
              dangerouslySetInnerHTML={{
                __html: `const isNetsHotel = location.href.match(/hotel=((389)|(365)|(374)|(888)|(891)|(340))/g) != null;
                    let removeSavedCardElem = function () {
                    if (!isNetsHotel) {
                        return;
                    }
                    if (document.querySelector(".credit-card-form__saved-select")) {
                        if (!document.querySelector(".credit-card-form__new")) {
                            document.querySelector(".credit-card-form").classNameList.add("hidden");
                        }
                        document.querySelector(".credit-card-form__saved-select").remove();
                        document.querySelector(".credit-card-form__select input[type=radio]").checked = "checked";
                    }
                    setTimeout( function() {
                        if (document.querySelector(".credit-card-form__select")) {
                            document.querySelector(".credit-card-form__select input[type=radio]").checked = "checked";
                            document.querySelector(".credit-card-form__select").classNameList.add("hidden");
                        }
                        if (document.querySelector(".credit-card-form__new")) {
                            document.querySelector(".credit-card-form__new").classNameList.remove("ng-hide");
                        }
                    }, 300);
                    }
                    removeSavedCardElem();
                    setTimeout(removeSavedCardElem, 500);
                    const confirmPgHotelId = document.getElementById("adm-hotelOperaId") && document.getElementById("adm-hotelOperaId").value;
                    const isNetsHotelConfnPg = ["389","365","374","888","891","340"].indexOf(confirmPgHotelId) != -1;
                    if (isNetsHotelConfnPg && document.querySelector(".save-credit-card__form")) {
                    document.querySelector(".save-credit-card__form").style.display = "none";
                    document.querySelector(".save-credit-card__form").remove();
                    }`,
              }}
            />
          </p>
        </div>

        <div className="global-footer__social-media" id="social-icons">
          <h3 className="heading-5 u-uppercase">
            Seuraa meitö sosiaalisessa mediassa
          </h3>
          <a
            href="https://www.facebook.com/scandicsuomi"
            rel="noopener"
            target="_blank"
            className="social-media-icon"
            title="Scandic on Facebook"
          >
            <svg
              focusable="false"
              className="icon icon--facebook icon--white"
              viewBox="0 0 150 150"
              role="img"
              aria-labelledby="social-icons facebook-icon"
            >
              <title id="facebook-icon">Facebook</title>
              <use xlinkHref="/Static/img/icons/sprites.svg#icon-facebook"></use>
            </svg>
          </a>
          <a
            href="https://twitter.com/scandicglobal"
            rel="noopener"
            target="_blank"
            className="social-media-icon"
          >
            <span className="hidden--accessible">{`Model.SafeGet(m => m.FooterHeader) on Twitter`}</span>
            <svg
              focusable="false"
              className="icon icon--twitter icon--white"
              viewBox="0 0 150 150"
              role="img"
              aria-labelledby="social-icons twitter-icon"
            >
              <title id="twitter-icon">Twitter</title>
              <use xlinkHref="/Static/img/icons/sprites.svg#icon-twitter"></use>
            </svg>
          </a>
          <a
            href="https://www.instagram.com/scandichotels/"
            rel="noopener"
            target="_blank"
            className="social-media-icon"
            title="Scandic on Instagram"
          >
            <svg
              focusable="false"
              className="icon icon--instagram icon--white"
              viewBox="0 0 150 150"
              role="img"
              aria-labelledby="social-icons instagram-icon"
            >
              <title id="instagram-icon">Instagram</title>
              <use xlinkHref="/Static/img/icons/sprites.svg#icon-instagram"></use>
            </svg>
          </a>
        </div>
        <div className="global-footer__trip-advisor">
          <h3 className="heading-5 u-uppercase">Arviot</h3>
          <img
            src="/Static/img/tripadvisor_logo_white_160x24.png"
            alt="Trip Advisor logotype"
          />
        </div>
      </div>
    </footer>
  );
}