---
import family1 from '../../assets/images/family/family_1.png';
import family2 from '../../assets/images/family/family_2.png';
import family3 from '../../assets/images/family/family_3.png';
---

<section class="family-section" id="people">
  <h2>UP IECEP Family</h2>
  <div class="members-panel">
    
    <!-- Mobile Popup 1 (Retains arrow) -->
    <div class="image-panel">
      <img src={family1.src} alt="" />
      <div class="image-panel-popup">
        <a href="/current-members" style="color: inherit; text-decoration: none;">
          <h3>Current Members &rarr;</h3>
        </a>
        <p>A short list of all the current members of UP IECEP</p>
      </div>
    </div>
    
    <!-- Desktop Panel 1: Executive Committee -->
    <div class="text-panel">
      <a href="/executive-committee" class="cover" style="color: inherit; text-decoration: none;">
        <div class="title-group">
          <h3>Executive Committee</h3>
          <span class="action-hint">View roster</span>
        </div>
      </a>
      <a href="/executive-committee" class="under" style="color: inherit; text-decoration: none;">
        <h3>Executive Committee</h3>
        <strong>A bit information about the current heads of each committee</strong>
      </a>
    </div>
    
    <!-- Mobile Popup 2 (Retains arrow) -->
    <div class="image-panel">
      <img src={family2.src} alt="" />
      <div class="image-panel-popup">
        <h3>Notable Members &rarr;</h3>
        <p>
          Some of UP IECEP's most well respected and accomplished individuals
        </p>
      </div>
    </div>
    
    <!-- Desktop Panel 2: Current Members -->
    <div class="text-panel">
      <a href="/current-members" class="cover" style="color: inherit; text-decoration: none;">
        <div class="title-group">
          <h3>Current Members</h3>
          <span class="action-hint">View list</span>
        </div>
      </a>
      <a href="/current-members" class="under" style="color: inherit; text-decoration: none;">
        <h3>Current Members</h3>
        <strong>A short list of all the current members of UP IECEP</strong>
      </a>
    </div>
    
    <!-- Mobile Popup 3 (Retains arrow) -->
    <div class="image-panel">
      <img src={family3.src} alt="" />
      <div class="image-panel-popup">
        <a href="/executive-committee" style="color: inherit; text-decoration: none;">
          <h3>Executive Committee &rarr;</h3>
        </a>
        <p>A bit information about the current heads of each committee</p>
      </div>
    </div>
    
    <!-- Desktop Panel 3: Notable Members -->
    <div class="text-panel">
      <a href="#people" class="cover" style="color: inherit; text-decoration: none;">
        <div class="title-group">
          <h3>Notable Members</h3>
          <span class="action-hint">View profiles</span>
        </div>
      </a>
      <a href="#people" class="under" style="color: inherit; text-decoration: none;">
        <h3>Notable Members</h3>
        <strong>Some of UP IECEP's most well respected and accomplished individuals</strong>
      </a>
    </div>
    
  </div>
</section>