import {
  IonButton,
  IonButtons,
  IonContent,
  IonHeader,
  IonIcon,
  IonPage,
  IonTitle,
  IonToolbar,
  useIonRouter,
} from '@ionic/react';
import { chevronBackOutline, settingsOutline } from 'ionicons/icons';
import React from 'react';
import { createRoot } from 'react-dom/client';
import Markdown from 'react-markdown';

const markdown = `
# 服務協議及社區規範

歡迎使用香港單身派對！本服務協議及社區規範（以下簡稱“協議”）旨在規範您使用香港單身派對（以下簡稱“平台”）的行為，確保平台的健康運營和用戶的良好體驗。請在使用平台前仔細閱讀並遵守本協議。

1. 服務內容
   香港單身派對提供以下服務：
   (a) 附近的人交友：使用地理定位功能幫助您認識附近的用戶。
   (b) 線上活動參與：平台不定期舉辦各類線上活動，包括但不限於遊戲配對、主題討論和社交聚會。

2. 用戶權利與義務
   (a) 用戶有權使用平台提供的服務，並參與平台組織的活動。
   (b) 用戶應確保其在平台上發布的個人照片及資料真實且屬於本人，不得使用他人的照片或虛假信息。
   (c) 用戶應遵守相關法律法規，不得利用平台進行任何非法活動。
   (d) 用戶應尊重其他用戶的隱私權和個人信息安全，不得收集、使用或披露其他用戶的信息。
   (e) 用戶應維護良好的社區環境，不得發布任何違背公序良俗、含有歧視、騷擾、暴力或色情等內容的信息。
   (f) 用戶不得抄襲、模仿或以其他方式侵犯平台的知識產權，包括但不限於應用程序的界面設計、功能實現和內容創作。
   (g) 本平台僅限於 18 歲以上的用戶使用。未滿 18 歲的用戶不得使用平台，一旦發現，其帳號將被終止。

3. 社區規範
   (a) 禁止發布任何形式的廣告、垃圾信息或欺詐信息。
   (b) 用戶應保持友好互動，避免使用侮辱性、攻擊性的語言。
   (c) 用戶不得發布、傳播任何侵犯他人知識產權或其他合法權益的信息。
   (d) 用戶應遵守平台的操作規範，不得進行任何破壞平台正常運行的行為。

4. 隱私保護
   平台將採取合理措施保護用戶的個人信息，並遵守相關隱私保護法律法規。用戶同意平台在提供服務過程中收集和使用其個人信息。

5. 違規處理
   用戶違反本協議時，平台將視情節輕重給予警告或終止其帳號的使用權。嚴重違反者將被永久禁止使用平台服務。

6. 協議的變更與終止
   (a) 平台有權根據需要對本協議進行修改，並在平台上公佈最新版本。
   (b) 如用戶違反本協議，平台有權限制或終止其使用平台的權利。

7. 爭議解決
   因本協議引起的任何爭議，雙方應首先嘗試友好協商解決；協商不成時，任何一方可直接提出訴訟。

8. 其他
   (a) 本平台保留對所有情況的最終決定權和解釋權。
   (b) 本協議的附件是協議不可分割的一部分，與協議具有同等法律效力。

用戶在使用平台服務時，即表示已閱讀、理解並同意遵守本協議。
`;

function ServiceAgreement() {
  const router = useIonRouter();

  function handleBackButtonClick() {
    router.goBack();
  }

  return (
    <IonPage id="speaker-list">
      <IonHeader translucent={true} className="ion-no-border">
        <IonToolbar>
          <IonButtons slot="start">
            {/* <IonMenuButton /> */}
            <IonButton shape="round" onClick={() => handleBackButtonClick()}>
              <IonIcon slot="icon-only" icon={chevronBackOutline}></IonIcon>
            </IonButton>
          </IonButtons>

          <IonTitle>Service Agreement</IonTitle>
        </IonToolbar>
      </IonHeader>

      <IonContent fullscreen={true}>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Service Agreement</IonTitle>
          </IonToolbar>
        </IonHeader>

        <div style={{ paddingLeft: '10px', paddingRight: '10px' }}>
          <Markdown>{markdown}</Markdown>
          <div
            style={{
              height: '7rem',
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <div>end</div>
          </div>
        </div>
      </IonContent>
    </IonPage>
  );
}

export default ServiceAgreement;
