<?php

$statesOfWellness = [
  [
    'title' => 'Physical Wellness',
    'color' => [
      'text' => 'black',
      'bg' => 'yellow-500'
    ],
    'content' => [
      'Being fit, exercising',
      'Taking care of your body',
      'Treating your illness, helping your immune system',
      'Healthy environment',
      'A clean home, mould free',
      'Exercising, healthy eating habits'
    ]
  ],
  [
    'title' => 'Emotional Wellness',
    'color' => [
      'text' => 'white',
      'bg' => 'red-500'
    ],
    'content' => [
      'Dealing with issues, coping with trauma',
      'Accepting things you cannot change',
      'Being at peace with yourself',
      'Talking with others, communicating feelings'
    ]
  ],
  [
    'title' => 'Mental Wellness',
    'color' => [
      'text' => 'white',
      'bg' => 'black'
    ],
    'content' => [
      'Being content, doing things that make you happy',
      'Positive environment, surrounding yourself with good energy',
      'Learning to deal with stress, coping skills',
      'Meditating',
      'Abstain from substances',
      'Thinking positive thoughts',
      'Get help with mental issues'
    ]
  ],
  [
    'title' => 'Spiritual Wellness',
    'color' => [
      'text' => 'black',
      'bg' => 'white'
    ],
    'content' => [
      'Learning medicines',
      'Ceremonies – practicing and bringing them back',
      'Keeping in touch with Elders',
      'Praying',
      'Connecting with the land and animals'
    ]
  ]
];

?>

<article>

  <div class="bg-white">
    <h2 class="text-l p-4 text-red-500 font-bold">BALANCE</h2>

    <p class="px-4 mb-4">
      During the Nishnawbe Aski Nation Youth & Elders Gathering on Health Transformation
      held in 2018, the youth delegates were asked about the concept of wellness and being
      balanced. The chart below breaks it down into the 4 states of wellness and explains:
    </p>

    <!-- States of Wellness -->
    <div class="flex flex-col bg-white mb-4">

      <div class="py-4 bg-green-600 px-6">
        <p class="font-bold text-white">States Of Wellness</p>
      </div>

      <div class="flex flex-1 flex-col">
        <div class="flex flex-1 flex-col gap-y-7">

          <div>
            <ul role="list" class="text-blue-900">

              <!-- States Loop -->
              <?php

              foreach ($statesOfWellness as $state) {

              ?>

                <li class="accordion bg-<?= $state['color']['bg'] ?> text-<?= $state['color']['text'] ?>">
                  <div class="flex px-2 rounded-md justify-between">
                    <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
                      <p><?php echo $state['title'] ?></p>
                    </div>

                    <button class="accordion-toggle">
                      <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                      <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
                    </button>

                  </div>
                  <div class="accordion-content space-y-4">

                    <!-- State Content  -->
                    <div>
                      <ul class="px-4 <?php
                                      if (count($state['content']) > 1) {
                                        echo (count($state['content']) > 1) ? 'list-disc' : '';
                                      } ?>">
                        <?php
                        foreach ($state['content'] as $info) { ?>
                          <li class="mb-2">
                            <?php echo $info ?>
                          </li>
                        <?php } ?>
                      </ul>
                    </div>
                  </div>
                </li>


              <?php } ?>

            </ul>
          </div>

        </div>
      </div>

    </div>

    <div class="px-4">

      <div class="px-4 mt-4 space-y-2 py-4 bg-cadet-300">

        <p class="font-bold">Learning to manage your new independence and responsibilities can be challenging.</p>

        <ul class="space-y-2 list-disc list-inside">
          <li>You are responsible for your own safety.</li>
          <li>Take part in group activities at your school or in the community. You can benefit from taking part in activities outside of the classroom. This can help you meet new people and be part of the community. There are many opportunities to join sports teams, clubs, and cultural activities. These can all contribute to your physical, spiritual, emotional, and mental well-being. To find these opportunities, you can visit the school’s website and social media outlets.</li>
          <li>Many colleges and universities hold special events through Indigenous Student Services. Visit them for information and dates. (They can often use volunteers.)</li>
          <li>Universities Canada has information about supports and services specifically for Indigenous students. <a class="font-medium underline" href="http://www.universitystudy.ca/indigenous-programs-and-services-directory">Indigenous Programs and Services Directory</a></li>
        </ul>

      </div>
    </div>

  </div>

  <div class="">
    <div class="p-4 bg-cadet-800 text-white">

      <p>Rutgers University has 101 Health and Wellness Tips for College Students. These include suggestions for Diet, Exercise and Sleep, as well as Sexual Health, Illness, Stress, Mental Health and a few other ideas to keep you active and well. Visit their website at: <br> <a class="font-medium underline" href="https://wellnesscenter.camden.rutgers.edu/wellness-self-care/">Rutgers University Student Wellness Center</a></p>
    </div>
  </div>

  <!-- Quote -->
  <div class="italic py-8 px-8 bg-cadet-500 text-cadet-900 space-y-4">
    <div class="max-w-7xl mx-auto lg:flex flex-col items-center">
      <i class="bi-quote text-7xl inline text-cadet-300"></i>
      <p class="font-medium inline text-xl">Wholistic well-being to me is when I strive for balance in all aspects of myself. For myself, the most influential factor that ensured my own well-being when transitioning to post-secondary was finding community within my college and building support systems that would help in my overall success throughout my time in my program.</p>
      <img class="inline h-56 aspect-video object-cover mt-4" src="<?= get_template_directory_uri() ?>/assets/images/people/student_image.png" alt="">
      <p class="mt-4 mb-2 font-medium">Mackenzie Young, Mattagami First Nation</p>
      <p>Northern College Graduate – Social Services Program</p>
    </div>
  </div>

</article>