<script setup lang="ts">
import { modalController } from "@ionic/vue";

const { t } = useI18n();

function dismiss() {
  modalController.dismiss();
}
</script>

<template>
  <IonPage>
    <IonHeader>
      <IonToolbar>
        <IonTitle>{{ t('pwa.install.howToInstall') }}</IonTitle>
        <IonButtons slot="end">
          <IonButton @click="dismiss">
            关闭
          </IonButton>
        </IonButtons>
      </IonToolbar>
    </IonHeader>
    <IonContent class="ion-padding">
      <div class="space-y-4">
        <div class="text-center">
          <IIcBaselineIosShare class="text-6xl text-primary mx-auto mb-4" />
          <h2 class="text-lg font-semibold mb-2">
            {{ t('pwa.install.iosTitle') }}
          </h2>
        </div>

        <IonCard>
          <IonCardContent>
            <div class="space-y-3">
              <p>{{ t('pwa.install.iosStep1') }}</p>
              <p>{{ t('pwa.install.iosStep2') }}</p>
              <p>{{ t('pwa.install.iosStep3') }}</p>
            </div>
          </IonCardContent>
        </IonCard>

        <div class="text-center text-sm text-gray-500">
          {{ t('pwa.install.iosNote') }}
        </div>
      </div>
    </IonContent>
  </IonPage>
</template>
