import React from "react";
import Header from "components/header";
import { useTranslation } from "react-i18next";
import { getTranslationID } from "translation";
import styles from "styles/app.module.scss";
import Footer from "components/footer";

const SupportPage: React.FC = () => {
  const { t } = useTranslation();
  // OMDS_IS-381 Support画面で表示する内容を充実したいの対応 2024年8月7日
  const userGuideDivStyles: React.CSSProperties = {
    padding: "2rem 2rem 4rem 2rem",
  };
  const appDLDivStyles: React.CSSProperties = {
    padding: "2rem 2rem 0rem 2rem",
  };
  const customUlStyles: React.CSSProperties = { marginBottom: "1rem" };

  return (
    <div className={styles.wrap}>
      <Header />
      <main className={styles.main}>
        <div>
          <div className={styles.pageHeader}>
            <h1 className={styles.pageTitle}>
              {t(getTranslationID("supportPage.label.title"))}
            </h1>
          </div>

          <section className={styles.support}>
            <div>
              <h2>{t(getTranslationID("supportPage.label.howToUse"))}</h2>

              <div className={styles.txContents} style={userGuideDivStyles}>
                <ul className={styles.listDocument} style={customUlStyles}>
                  <li>
                    <a
                      href="https://download.omsystem.com/pages/odms_download/manual/odms_cloud/"
                      target="_blank"
                      className={styles.linkTx}
                      rel="noreferrer"
                    >
                      {t(getTranslationID("supportPage.label.supportPageLink"))}
                    </a>
                  </li>
                </ul>
                <p className={styles.txNormal}>
                  {t(getTranslationID("supportPage.text.notResolved"))}
                </p>
              </div>
              <h2>
                {t(getTranslationID("supportPage.label.programDownload"))}
              </h2>
              <div className={styles.txContents} style={appDLDivStyles}>
                <ul className={styles.listDocument} style={customUlStyles}>
                  <li>
                    <a
                      href="https://download.omsystem.com/pages/odms_download/odms_cloud_desktop/en/"
                      target="_blank"
                      className={styles.linkTx}
                      rel="noreferrer"
                    >
                      {t(
                        getTranslationID(
                          "supportPage.label.omdsDesktopAppDownloadLink"
                        )
                      )}
                    </a>
                  </li>
                </ul>
                <p className={styles.txNormal}>
                  {t(
                    getTranslationID(
                      "supportPage.label.omdsDesktopAppDownloadLinkDescription"
                    )
                  )}
                </p>
              </div>
              <div className={styles.txContents} style={appDLDivStyles}>
                <ul className={styles.listDocument} style={customUlStyles}>
                  <li>
                    <a
                      href="https://download.omsystem.com/pages/odms_download/device_customization_program/en/"
                      target="_blank"
                      className={styles.linkTx}
                      rel="noreferrer"
                    >
                      {t(getTranslationID("supportPage.label.dcpDownloadLink"))}
                    </a>
                  </li>
                </ul>
                <p className={styles.txNormal}>
                  {t(
                    getTranslationID(
                      "supportPage.label.dcpDownloadLinkDescription"
                    )
                  )}
                </p>
              </div>
              <div className={styles.txContents} style={appDLDivStyles}>
                <ul className={styles.listDocument} style={customUlStyles}>
                  <li>
                    <a
                      href="https://download.omsystem.com/pages/odms_download/odms_cloud_backup_extraction_tool/en/"
                      target="_blank"
                      className={styles.linkTx}
                      rel="noreferrer"
                    >
                      {t(
                        getTranslationID(
                          "supportPage.label.backupExtractionToolDownloadLink"
                        )
                      )}
                    </a>
                  </li>
                </ul>
                <p className={styles.txNormal}>
                  {t(
                    getTranslationID(
                      "supportPage.label.backupExtractionToolDownloadLinkDescription"
                    )
                  )}
                </p>
              </div>
              <div className={styles.txContents} style={appDLDivStyles}>
                <ul className={styles.listDocument} style={customUlStyles}>
                  <li>
                    <a
                      href="https://download.omsystem.com/pages/odms_download/odms_client_virtual_driver/en/"
                      target="_blank"
                      className={styles.linkTx}
                      rel="noreferrer"
                    >
                      {t(
                        getTranslationID(
                          "supportPage.label.virtualDriverDownloadLink"
                        )
                      )}
                    </a>
                  </li>
                </ul>
                <p className={styles.txNormal}>
                  {t(
                    getTranslationID(
                      "supportPage.label.virtualDriverDownloadLinkDescription"
                    )
                  )}
                </p>
              </div>
            </div>
          </section>
        </div>
      </main>
      <Footer />
    </div>
  );
};
export default SupportPage;