import {
  IonContent,
  IonHeader,
  IonImg,
  IonItem,
  IonLabel,
  IonList,
  IonListHeader,
  IonPage,
  IonTitle,
  IonToolbar,
} from "@ionic/react";

const AboutListPage: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>About</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">About</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent className="ion-padding">
          <div className="video">
            <iframe
              src="https://www.youtube.com/embed/MRo8FR2l6VM"
              title="YouTube video player"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            ></iframe>
          </div>

          <IonItem routerLink={`/services/info`}>
            <p className="ListItemText">Nuestras Misiones </p>
          </IonItem>

          <h5>Bienvenidos</h5>
          <p>
            Renacer Social ha iniciado una campaña de orientación a la comunidad
            para que los niños y niñas puedan denunciar su situación de
            maltrato. Con una seña discreta que consta de una “X” formada frente
            al torso con los dedos índice, el menor puede dar alerta de su
            situación de maltrato. Es responsabilidad de todos denunciar la
            posible situación de maltrato si vemos a un menor realizar dicha
            seña.
          </p>
          <IonList>
            <IonListHeader>
              <IonLabel>Servicios Disponibles</IonLabel>
            </IonListHeader>

            <IonItem routerLink={`/services/casita`}>
              <p className="ListItemText">Casita de Paz</p>
            </IonItem>

            <IonItem routerLink={`/services/educacion`}>
              <p className="ListItemText">Educacion</p>
            </IonItem>

            <IonItem routerLink={`/services/Lazos`}>
              <p className="ListItemText">Proyecto Lazos</p>
            </IonItem>

            <IonItem routerLink={`/services/Supervisadas`}>
              <p className="ListItemText">Visitas Supervisadas</p>
            </IonItem>
            <IonItem routerLink={`/services/terapeuticas`}>
              <p className="ListItemText">
                Servicios de Visitas Supervisadas Terapéuticas
              </p>
            </IonItem>

            <IonItem routerLink={`/services/consejos`}>
              <p className="ListItemText">Consejería</p>
            </IonItem>

            <IonItem routerLink={`/services/talleres`}>
              <p className="ListItemText">Talleres educativos</p>
            </IonItem>

            <IonItem routerLink={`/services/apoyo`}>
              <p className="ListItemText">Seguridad y Apoyo</p>
            </IonItem>
          </IonList>
        </IonContent>
      </IonContent>
    </IonPage>
  );
};

export default AboutListPage;