<?php
/**
 * Template Name: CHIMKA Home Page
 * @package chimka
 */
defined('ABSPATH') || exit;
get_header();

/* ── shorthand helpers ── */
if ( ! function_exists('h') ) {
    function h( $key, $fb = '' ) { return esc_html( chimka_mod( $key, $fb ) ); }
}
if ( ! function_exists('u') ) {
    function u( $key, $fb = '/' ) { return esc_url( home_url( chimka_mod( $key, $fb ) ) ); }
}
if ( ! function_exists('k') ) {
    function k( $key, $fb = '' ) { return wp_kses_post( chimka_mod( $key, $fb ) ); }
}

/* ══════════════════════════════════════════════════════════
   ELEMENTOR OVERRIDE
   If this page has been built/edited with Elementor,
   run the standard WP loop so Elementor can output its
   canvas. The custom CHIMKA sections below are skipped.
══════════════════════════════════════════════════════════ */
if ( chimka_has_elementor() ) :
    while ( have_posts() ) : the_post();
        the_content();
    endwhile;
    get_footer();
    exit;
endif;
?>

<!-- ═══════════════════════════════════════════════════════
     HERO
═══════════════════════════════════════════════════════ -->
<section class="hero">
  <img class="hero-img"
    src="<?php echo esc_url( chimka_mod('chimka_hero_image',
      'https://chimkareseachpartners.chimka-group-of-companies.com/wp-content/uploads/2026/03/drink-more-water-hub-1024x683.jpg'
    ) ); ?>"
    alt="<?php bloginfo('name'); ?> hero" loading="eager" fetchpriority="high">
  <div class="hero-bg"></div>
  <div class="hero-pattern"></div>

  <div class="hero-content">
    <div class="hero-eyebrow"><?php echo h('chimka_hero_eyebrow','Research. Empower. Transform.'); ?></div>
    <h1 class="hero-h1">
      <?php echo h('chimka_hero_heading','Empowering Communities Through'); ?><br>
      <span class="accent"><?php echo h('chimka_hero_heading_accent','Research &amp; Innovation'); ?></span>
    </h1>
    <p class="hero-desc"><?php echo k('chimka_hero_desc',
      'CHIMKA Research Partners is a youth-led organization dedicated to sustainable rural development through evidence-based solutions in the Water&ndash;Energy&ndash;Food Nexus, research, innovation, and youth empowerment.'
    ); ?></p>
    <div class="hero-actions">
      <a class="btn-primary" href="<?php echo u('chimka_hero_btn1_url','/projects/'); ?>">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><circle cx="12" cy="12" r="10"/><polyline points="12 8 16 12 12 16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
        <?php echo h('chimka_hero_btn1_text','Our Work'); ?>
      </a>
      <a class="btn-outline" href="<?php echo u('chimka_hero_btn2_url','/about/'); ?>">
        <?php echo h('chimka_hero_btn2_text','Learn More About Us'); ?>
      </a>
    </div>
  </div>
</section>

<!-- ═══════════════════════════════════════════════════════
     FOCUS AREAS INTRO
═══════════════════════════════════════════════════════ -->
<section class="section bg-off" style="padding-top:7rem">
  <div class="section-inner">
    <div class="focus-grid">
      <div>
        <div class="section-eyebrow reveal"><?php echo h('chimka_focus_eyebrow','Our Focus Areas'); ?></div>
        <h2 class="section-title reveal"><?php echo h('chimka_focus_title','Building Sustainable Communities'); ?></h2>
        <div style="width:40px;height:3px;background:var(--green-lime);margin-bottom:1.2rem" class="reveal"></div>
        <p class="section-desc reveal"><?php echo k('chimka_focus_desc','We work at the intersection of research, innovation and community development to create lasting impact across Malawi and beyond.'); ?></p>
      </div>

      <div class="focus-cards">
        <?php
        $focus_icons = [
          1 => '<path d="M12 2C12 2 5 9.5 5 14a7 7 0 0014 0C19 9.5 12 2 12 2z"/>',
          2 => '<circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>',
          3 => '<path d="M17 8C8 10 5.9 16.17 3.82 21.34L5.71 22l1-2.3A4.49 4.49 0 008 20C19 20 22 3 22 3c-1 2-8 2-8 2"/><path d="M3.82 21.34C5.9 16.17 8 10 17 8"/>',
          4 => '<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/>',
        ];
        $focus_defaults = [
          1 => ['Water Access &amp; Sanitation','Improving access to clean water and promoting hygiene for healthier communities.'],
          2 => ['Renewable Energy Solutions','Expanding clean energy access for homes, schools and health facilities.'],
          3 => ['Sustainable Agriculture &amp; Food Security','Promoting climate-smart agriculture for improved productivity and nutrition.'],
          4 => ['Youth Empowerment &amp; Leadership','Building skills and capacity of young people to lead community transformation.'],
        ];
        foreach ( $focus_defaults as $n => $d ) :
          $delay = $n > 1 ? ' reveal-delay-' . ($n-1) : '';
        ?>
        <div class="focus-card reveal<?php echo $delay; ?>">
          <div class="focus-card-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><?php echo $focus_icons[$n]; ?></svg>
          </div>
          <h4><?php echo k("chimka_focus_card{$n}_title", $d[0]); ?></h4>
          <p><?php echo k("chimka_focus_card{$n}_desc", $d[1]); ?></p>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
  </div>
</section>


<!-- ═══════════════════════════════════════════════════════
     ABOUT BRIEF
═══════════════════════════════════════════════════════ -->
<section class="section">
  <div class="section-inner">
    <div class="focus-grid">

      <div class="who-img-wrap reveal" style="position:relative">
        <?php
        $about_img = chimka_mod('chimka_about_image',
          'https://chimkareseachpartners.chimka-group-of-companies.com/wp-content/uploads/2026/03/DSC1698.jpg');
        ?>
        <img src="<?php echo esc_url($about_img); ?>" alt="CHIMKA team in the field" loading="lazy"
             style="border-radius:8px;object-fit:cover;height:440px;width:100%">
        <div style="position:absolute;bottom:1rem;right:1rem;background:var(--green-lime);color:var(--green-dark);padding:1rem 1.3rem;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.18)">
          <div style="font-family:var(--font-display);font-size:2rem;font-weight:700;line-height:1"><?php echo h('chimka_about_badge_year','2018'); ?></div>
          <div style="font-size:0.75rem;font-weight:600;margin-top:2px"><?php echo h('chimka_about_badge_label','Operational Since'); ?></div>
        </div>
      </div>

      <div>
        <div class="section-eyebrow reveal"><?php echo h('chimka_about_eyebrow','Connecting Water, Energy &amp; Food'); ?></div>
        <h2 class="section-title reveal"><?php echo k('chimka_about_title','Youth-Led Research<br>Transforming Rural Malawi'); ?></h2>
        <p class="section-desc reveal" style="max-width:none;margin-bottom:1.2rem"><?php echo k('chimka_about_para1',
          'CHIMKA Research Institution is a youth-led, registered research and development organization based in Malawi.'
        ); ?></p>
        <p class="section-desc reveal" style="max-width:none;margin-bottom:1.8rem"><?php echo k('chimka_about_para2',
          'Although CHIMKA has been actively operational since 2018, it was formally registered in 2024 under the Government of Malawi.'
        ); ?></p>

        <?php
        $hl_icons = [
          1 => '<path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>',
          2 => '<circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/>',
          3 => '<path d="M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z"/><path d="M12.56 6.6A10.97 10.97 0 0014 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 01-11.91 4.97"/>',
          4 => '<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>',
        ];
        $hl_defaults = [
          1 => ['Formally Registered','Registered in 2024 under the Government of Malawi after 6 years of impactful operations.'],
          2 => ['Award-Winning Impact','Recognized by the Centre for Agricultural Transformation and Malawi University of Science &amp; Technology.'],
          3 => ['Marmont Foundation','Successfully secured funding to drill 4 new boreholes and rehabilitate 1 non-functional borehole in Chiradzulu.'],
          4 => ['Global Change Makers','Funded the Energy for Education Initiative, electrifying a rural primary school serving 200+ students.'],
        ];
        ?>
        <div class="focus-cards reveal" style="grid-template-columns:1fr 1fr;margin-bottom:2rem">
          <?php foreach ($hl_defaults as $n => $d) : ?>
          <div class="focus-card">
            <div class="focus-card-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><?php echo $hl_icons[$n]; ?></svg>
            </div>
            <h4><?php echo k("chimka_about_hl{$n}_title", $d[0]); ?></h4>
            <p><?php echo k("chimka_about_hl{$n}_desc", $d[1]); ?></p>
          </div>
          <?php endforeach; ?>
        </div>

        <a class="btn-primary" href="<?php echo u('chimka_about_btn_url','/about/'); ?>" style="display:inline-flex">
          <?php echo h('chimka_about_btn_text','Learn More About CHIMKA →'); ?>
        </a>
      </div>

    </div>
  </div>
</section>


<!-- ═══════════════════════════════════════════════════════
     FEATURED PROJECTS
═══════════════════════════════════════════════════════ -->
<section class="section">
  <div class="section-inner">
    <div class="section-header-flex">
      <div>
        <div class="section-eyebrow reveal"><?php echo h('chimka_fp_eyebrow','Featured Projects'); ?></div>
        <h2 class="section-title reveal"><?php echo h('chimka_fp_title','Real Projects. Real Impact.'); ?></h2>
      </div>
      <a class="link-arrow reveal" href="<?php echo u('chimka_fp_viewall_url','/projects/'); ?>">
        <?php echo h('chimka_fp_viewall_text','View All Projects →'); ?>
      </a>
    </div>

    <div class="projects-grid">
      <?php
      $fp_defaults = [
        1 => [
          'Water Access Intervention &ndash; Chiradzulu District',
          'CHIMKA conducted a field-based needs assessment in Chiradzulu District, uncovering a severe water crisis. After engaging development partners, CHIMKA secured funding from the <strong>Marmont Foundation</strong> to drill 4 new boreholes and rehabilitate 1 non-functional borehole.',
          'Water',
          'https://chimkareseachpartners.chimka-group-of-companies.com/wp-content/uploads/2026/03/drink-more-water-hub-1024x683.jpg',
        ],
        2 => [
          'Energy for Education Initiative',
          'With funding from <strong>Global Change Makers</strong>, CHIMKA designed and implemented a solar&ndash;wind hybrid renewable energy system to electrify a rural primary school serving over 200 students.',
          'Energy',
          'https://chimkareseachpartners.chimka-group-of-companies.com/wp-content/uploads/2026/03/panels-electricity-order-sunlight-1536x1024.jpg',
        ],
        3 => [
          'Building the Next Generation of Changemakers',
          'This mentorship program raises academic aspirations by helping students envision pathways to university, professional careers, and entrepreneurship.',
          'Youth',
          'https://chimkareseachpartners.chimka-group-of-companies.com/wp-content/uploads/2026/03/b646389cd1965a168d466116f7310c13.jpg',
        ],
      ];
      foreach ($fp_defaults as $n => $d) :
        $delay = $n > 1 ? ' reveal-delay-' . ($n-1) : '';
        $img   = chimka_mod("chimka_fp{$n}_image", $d[3]);
        $link  = esc_url( home_url( chimka_mod("chimka_fp{$n}_url",'/projects/') ) );
      ?>
      <div class="project-card reveal<?php echo $delay; ?>">
        <div class="project-card-img">
          <img src="<?php echo esc_url($img); ?>" alt="<?php echo esc_attr( wp_strip_all_tags( chimka_mod("chimka_fp{$n}_title",$d[0]) ) ); ?>" loading="lazy">
          <span class="project-tag"><?php echo h("chimka_fp{$n}_tag", $d[2]); ?></span>
        </div>
        <div class="project-card-body">
          <h3><?php echo k("chimka_fp{$n}_title", $d[0]); ?></h3>
          <p><?php echo k("chimka_fp{$n}_desc", $d[1]); ?></p>
          <a class="link-arrow" href="<?php echo $link; ?>">Read More &#x2192;</a>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>


<!-- ═══════════════════════════════════════════════════════
     QUOTE BANNER
═══════════════════════════════════════════════════════ -->
<div class="quote-banner">
  <div class="quote-banner-inner">
    <div class="quote-text reveal">
      <blockquote><?php echo k('chimka_quote_text',
        '&#x201C;We believe that when rural communities are empowered with knowledge, resources and opportunities, they become the architects of their own future.&#x201D;'
      ); ?></blockquote>
    </div>
    <div class="quote-values reveal">
      <?php
      $qv_icons = [
        1 => '<path d="M10 2v6.5L5.52 18A2 2 0 007.28 21h9.44a2 2 0 001.76-2.96L14 8.5V2"/><line x1="8.5" y1="2" x2="15.5" y2="2"/><path d="M6.3 15h11.4"/>',
        2 => '<path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/>',
        3 => '<path d="M17 8C8 10 5.9 16.17 3.82 21.34L5.71 22l1-2.3A4.49 4.49 0 008 20C19 20 22 3 22 3c-1 2-8 2-8 2"/><path d="M3.82 21.34C5.9 16.17 8 10 17 8"/>',
        4 => '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/>',
      ];
      $qv_defaults = [
        1 => ['Evidence-Based Research','Driving decisions with data and local insights.'],
        2 => ['Community-Centered','Working hand-in-hand with communities.'],
        3 => ['Sustainable Solutions','Focus on long-term impact and resilience.'],
        4 => ['Integrity &amp; Accountability','Transparent, ethical and impact-driven.'],
      ];
      foreach ($qv_defaults as $n => $d) :
      ?>
      <div class="quote-value">
        <div class="quote-value-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><?php echo $qv_icons[$n]; ?></svg>
        </div>
        <div>
          <h5><?php echo k("chimka_qv{$n}_title", $d[0]); ?></h5>
          <p><?php echo k("chimka_qv{$n}_desc", $d[1]); ?></p>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</div>


<!-- ═══════════════════════════════════════════════════════
     MISSION / VISION / VALUES
═══════════════════════════════════════════════════════ -->
<section class="section">
  <div class="section-inner">
    <div class="mv-cards">

      <div class="mv-card reveal">
        <div class="mv-card-top">
          <div class="mv-card-icon"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg></div>
          <h3>Our Mission</h3>
        </div>
        <p><?php echo k('chimka_mission_text','To empower communities through research, innovation, and collaboration.'); ?></p>
      </div>

      <div class="mv-card reveal reveal-delay-1">
        <div class="mv-card-top">
          <div class="mv-card-icon"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></div>
          <h3>Our Vision</h3>
        </div>
        <p><?php echo k('chimka_vision_text','To build resilient and self-sustaining rural communities in Malawi.'); ?></p>
      </div>

      <div class="mv-card reveal reveal-delay-2">
        <div class="mv-card-top">
          <div class="mv-card-icon"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"/></svg></div>
          <h3>Our Values</h3>
        </div>
        <ul>
          <?php
          $values_raw = chimka_mod('chimka_values_list', "Integrity\nEvidence-Based\nInnovation\nCollaboration\nAccountability\nCommunity-Centered\nYouth Empowerment\nSustainability");
          $values = array_filter( array_map('trim', explode("\n", $values_raw)) );
          foreach ($values as $v) echo '<li>' . esc_html($v) . '</li>';
          ?>
        </ul>
      </div>

    </div>
  </div>
</section>


<!-- ═══════════════════════════════════════════════════════
     WHY CHIMKA EXISTS
═══════════════════════════════════════════════════════ -->
<section class="section bg-off">
  <div class="section-inner">
    <div class="section-eyebrow reveal">Our Story</div>
    <h2 class="section-title reveal" style="margin-bottom:2.5rem">Why CHIMKA Exists</h2>
    <div class="who-grid">

      <div class="who-text reveal">
        <p><?php echo k('chimka_who_para1','CHIMKA Research Institution is a youth-led research and development organization based in Malawi.'); ?></p>
        <p><?php echo k('chimka_who_para2','Although CHIMKA has been actively operational since 2018, the organization was formally registered in 2024 under the Government of Malawi.'); ?></p>
        <p><?php echo k('chimka_who_para3','CHIMKA operates at the intersection of scientific research and community action.'); ?></p>
        <p><?php echo k('chimka_who_para4','Our core belief is that youth are key agents of change.'); ?></p>

        <div class="who-stats">
          <?php
          $who_stat_defaults = [
            1 => ['824+','Projects Completed'],
            2 => ['70K+','Lives Changed'],
            3 => ['10+','Districts Reached'],
            4 => ['500+','Youth Trained'],
          ];
          foreach ($who_stat_defaults as $n => $d) :
          ?>
          <div class="who-stat">
            <div class="num"><?php echo h("chimka_who_stat{$n}_num",$d[0]); ?></div>
            <div class="lbl"><?php echo h("chimka_who_stat{$n}_lbl",$d[1]); ?></div>
          </div>
          <?php endforeach; ?>
        </div>
        <br>
        <a class="btn-primary" href="<?php echo u('chimka_who_btn_url','/contact/'); ?>" style="display:inline-flex">
          <?php echo h('chimka_who_btn_text','Learn More About Our Journey →'); ?>
        </a>
      </div>

      <div class="who-img-wrap reveal reveal-delay-2" style="position:relative">
        <?php $who_img = chimka_mod('chimka_who_image','https://chimkareseachpartners.chimka-group-of-companies.com/wp-content/uploads/2026/03/DSC1698.jpg'); ?>
        <img src="<?php echo esc_url($who_img); ?>" alt="CHIMKA team in the field" loading="lazy">
        <div class="who-img-badge" style="bottom:1rem;left:1rem">
          <div class="num"><?php echo h('chimka_who_badge_num','2018'); ?></div>
          <div class="lbl"><?php echo h('chimka_who_badge_label','Founded &amp; Operational'); ?></div>
        </div>
      </div>

    </div>
  </div>
</section>


<!-- ═══════════════════════════════════════════════════════
     WHAT WE DO — FULL AREAS OF FOCUS
═══════════════════════════════════════════════════════ -->
<section class="section">
  <div class="section-inner">
    <div class="section-eyebrow reveal" style="justify-content:center;text-align:center"><?php echo h('chimka_wwd_eyebrow','What We Do'); ?></div>
    <h2 class="section-title reveal" style="text-align:center;margin-bottom:3rem"><?php echo h('chimka_wwd_title','Our Areas of Focus'); ?></h2>
    <div class="focus-cards" style="grid-template-columns:repeat(auto-fit,minmax(220px,1fr))">
      <?php
      $wwd_icons = [
        1 => '<path d="M12 2C12 2 5 9.5 5 14a7 7 0 0014 0C19 9.5 12 2 12 2z"/>',
        2 => '<circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>',
        3 => '<path d="M17 8C8 10 5.9 16.17 3.82 21.34L5.71 22l1-2.3A4.49 4.49 0 008 20C19 20 22 3 22 3c-1 2-8 2-8 2"/><path d="M3.82 21.34C5.9 16.17 8 10 17 8"/>',
        4 => '<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/>',
        5 => '<rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/>',
      ];
      $wwd_defaults = [
        1 => ['Water, Sanitation &amp; Hygiene','Improving access to clean water and promoting hygiene for healthier communities.'],
        2 => ['Renewable Energy Solutions','Expanding clean energy access for homes, schools and health facilities.'],
        3 => ['Sustainable Agriculture','Promoting climate-smart agriculture for improved productivity and nutrition.'],
        4 => ['Youth Empowerment','Building skills and capacity of young people to lead community transformation.'],
        5 => ['Research, Data &amp; Evidence','Conducting rigorous research and analysis to inform policy and drive impact.'],
      ];
      foreach ($wwd_defaults as $n => $d) :
        $delay = $n > 1 ? ' reveal-delay-' . min($n-1,4) : '';
      ?>
      <div class="focus-card reveal<?php echo $delay; ?>">
        <div class="focus-card-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><?php echo $wwd_icons[$n]; ?></svg>
        </div>
        <h4><?php echo k("chimka_wwd{$n}_title",$d[0]); ?></h4>
        <p><?php echo k("chimka_wwd{$n}_desc",$d[1]); ?></p>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>


<!-- ═══════════════════════════════════════════════════════
     HOW WE DELIVER — APPROACH
═══════════════════════════════════════════════════════ -->
<section class="section bg-off">
  <div class="section-inner">
    <div class="section-eyebrow reveal"><?php echo h('chimka_approach_eyebrow','Our Approach to Impact'); ?></div>
    <h2 class="section-title reveal" style="margin-bottom:2.5rem"><?php echo h('chimka_approach_title','How We Deliver'); ?></h2>
    <div class="approach-grid">
      <?php
      $ap_defaults = [
        1 => ['Community Assessment','We begin by engaging communities to understand their challenges, needs, and priorities through field research and consultation.'],
        2 => ['Research &amp; Analysis','Our team conducts rigorous research and data analysis to identify sustainable and evidence-based solutions.'],
        3 => ['Solution Design','We design innovative and practical interventions that address challenges in water, energy, food security, and education.'],
        4 => ['Project Implementation','We implement projects in collaboration with communities and partners to ensure effective and inclusive delivery.'],
        5 => ['Capacity Building','We train community members, students, and professionals to sustain and expand the impact of our initiatives.'],
        6 => ['Impact &amp; Sustainability','We monitor results, evaluate outcomes, and ensure long-term sustainability of the solutions implemented.'],
      ];
      foreach ($ap_defaults as $n => $d) :
        $col = (($n - 1) % 3);
        $delay = $col > 0 ? ' reveal-delay-' . $col : '';
      ?>
      <div class="approach-card reveal<?php echo $delay; ?>">
        <div class="approach-num"><?php echo str_pad($n,2,'0',STR_PAD_LEFT); ?></div>
        <h4><?php echo k("chimka_ap{$n}_title",$d[0]); ?></h4>
        <p><?php echo k("chimka_ap{$n}_desc",$d[1]); ?></p>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>


<!-- ═══════════════════════════════════════════════════════
     KEY MILESTONES
═══════════════════════════════════════════════════════ -->
<section class="section bg-off">
  <div class="section-inner">
    <div class="section-eyebrow reveal"><?php echo h('chimka_ms_eyebrow','Our Journey'); ?></div>
    <h2 class="section-title reveal" style="margin-bottom:2.5rem"><?php echo h('chimka_ms_title','Key Milestones'); ?></h2>
    <div class="timeline reveal">
      <div class="timeline-list">
        <?php
        $ms_defaults = [
          1 => ['2018','CHIMKA founded with a vision to drive research and community development.'],
          2 => ['2020','Launched first community projects in water and sanitation.'],
          3 => ['2021','Expanded into renewable energy and youth empowerment programs.'],
          4 => ['2022','Strengthened research capacity and launched data &amp; evidence initiatives.'],
          5 => ['2024','Formally registered under the Government of Malawi and scaled partnerships.'],
          6 => ['2025+','Continuing to innovate, collaborate and transform more communities.'],
        ];
        $total = count($ms_defaults);
        foreach ($ms_defaults as $n => $d) :
          $is_last = ($n === $total);
          $active_class = $is_last ? '' : ' active';
        ?>
        <div class="timeline-item">
          <div class="timeline-dot<?php echo $active_class; ?>">
            <?php if (!$is_last) : ?>
              <svg viewBox="0 0 24 24" fill="white"><circle cx="12" cy="12" r="4"/></svg>
            <?php else : ?>
              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l1.41 1.41L7.83 11H20v2H7.83l5.58 5.59L12 20l-8-8z"/></svg>
            <?php endif; ?>
          </div>
          <div class="timeline-year"><?php echo h("chimka_ms{$n}_year",$d[0]); ?></div>
          <div class="timeline-desc"><?php echo k("chimka_ms{$n}_desc",$d[1]); ?></div>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
  </div>
</section>


<!-- ═══════════════════════════════════════════════════════
     PARTNERS
═══════════════════════════════════════════════════════ -->
<section class="section">
  <div class="section-inner">
    <div class="section-eyebrow reveal"><?php echo h('chimka_partners_eyebrow','Our Partners'); ?></div>
    <h2 class="section-title reveal" style="margin-bottom:0.5rem"><?php echo h('chimka_partners_title','Trusted Collaborators'); ?></h2>
    <p class="section-desc reveal"><?php echo k('chimka_partners_desc','We collaborate with trusted partners to deliver impactful, sustainable solutions in our communities.'); ?></p>
    <div class="partners-row reveal" style="margin-top:2rem">
      <?php
      $partners_raw = chimka_mod('chimka_partners_list', "UNICEF\nWorld Health Organization\nMLW – Malawi Liverpool Wellcome\nLSTM\nNMCP\nGates Foundation\nIMAJI");
      $partners = array_filter( array_map('trim', explode("\n", $partners_raw)) );
      foreach ($partners as $p) echo '<div class="partner-badge">' . esc_html($p) . '</div>';
      ?>
    </div>
  </div>
</section>


<!-- ═══════════════════════════════════════════════════════
     VISION FORWARD
═══════════════════════════════════════════════════════ -->
<section class="section">
  <div class="section-inner">
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center" class="responsive-grid">
      <div>
        <div class="section-eyebrow reveal"><?php echo h('chimka_vision_eyebrow','Our Vision Forward'); ?></div>
        <h2 class="section-title reveal"><?php echo k('chimka_vision_title','Research Beyond<br>Academic Spaces'); ?></h2>
        <p class="section-desc reveal" style="max-width:none;margin-bottom:1.2rem"><?php echo k('chimka_vision_para1','CHIMKA Research Institution envisions a future where research is not confined to academic spaces.'); ?></p>
        <p class="section-desc reveal" style="max-width:none;margin-bottom:2rem"><?php echo k('chimka_vision_para2','CHIMKA is driven by the strong belief that youth are key agents of change.'); ?></p>
        <div style="display:flex;gap:1rem;flex-wrap:wrap" class="reveal">
          <a class="btn-primary" href="<?php echo u('chimka_vision_btn1_url','/contact/'); ?>" style="display:inline-flex">
            <?php echo h('chimka_vision_btn1_text','Partner With Us →'); ?>
          </a>
          <a href="<?php echo u('chimka_vision_btn2_url','/projects/'); ?>"
             style="display:inline-flex;padding:0.85rem 2rem;border:2px solid var(--green-dark);color:var(--green-dark);font-weight:600;font-size:0.92rem;border-radius:4px;transition:all 0.35s ease;text-decoration:none"
             onmouseover="this.style.background='#1a3a2a';this.style.color='#fff'"
             onmouseout="this.style.background='';this.style.color='var(--green-dark)'">
            <?php echo h('chimka_vision_btn2_text','View Our Projects →'); ?>
          </a>
        </div>
      </div>

      <div class="vision-4grid reveal" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
        <?php
        $vs_defaults = [
          1 => ['6+','Years of Active Operations','dark'],
          2 => ['2024','Formally Registered Under Govt. of Malawi','light'],
          3 => ['WEF','Water&ndash;Energy&ndash;Food Nexus Focus','light'],
          4 => ['5','Award-Winning Projects Delivered','lime'],
        ];
        $vs_styles = [
          'dark'  => 'background:var(--green-dark);border-radius:8px;padding:1.8rem;color:white',
          'light' => 'background:var(--off-white);border:1px solid var(--border);border-radius:8px;padding:1.8rem',
          'lime'  => 'background:var(--green-lime);border-radius:8px;padding:1.8rem',
        ];
        $vs_num_colors = [
          'dark'  => 'color:var(--green-lime)',
          'light' => 'color:var(--green-dark)',
          'lime'  => 'color:var(--green-dark)',
        ];
        $vs_lbl_colors = [
          'dark'  => 'opacity:0.8',
          'light' => 'color:var(--text-muted)',
          'lime'  => 'color:var(--green-dark);font-weight:600',
        ];
        foreach ($vs_defaults as $n => $d) :
          $style = $vs_styles[$d[2]];
          $nc    = $vs_num_colors[$d[2]];
          $lc    = $vs_lbl_colors[$d[2]];
          $num   = k("chimka_vs{$n}_number", $d[0]);
          $desc  = k("chimka_vs{$n}_desc",   $d[1]);
        ?>
        <div style="<?php echo $style; ?>">
          <div style="font-family:var(--font-display);font-size:2.5rem;font-weight:700;line-height:1;<?php echo $nc; ?>"><?php echo $num; ?></div>
          <div style="font-size:0.78rem;margin-top:0.3rem;<?php echo $lc; ?>"><?php echo $desc; ?></div>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
  </div>
</section>


<!-- ═══════════════════════════════════════════════════════
     CTA BANNER 1 — LET'S WORK TOGETHER
═══════════════════════════════════════════════════════ -->
<div class="cta-banner">
  <div class="cta-banner-inner">
    <div>
      <h2><?php echo h('chimka_cta1_title',"Let's Work Together"); ?></h2>
      <p><?php echo k('chimka_cta1_desc','We collaborate with communities, government, academia, NGOs and development partners to create sustainable impact.'); ?></p>
    </div>
    <div class="cta-banner-actions">
      <a class="btn-cta-white" href="<?php echo u('chimka_cta1_btn_url','/contact/'); ?>">
        <?php echo h('chimka_cta1_btn_text','Partner With Us →'); ?>
      </a>
    </div>
  </div>
</div>


<!-- ═══════════════════════════════════════════════════════
     CTA BANNER 2 — READY TO COLLABORATE
═══════════════════════════════════════════════════════ -->
<div class="cta-banner">
  <div class="cta-banner-inner">
    <div>
      <h2><?php echo h('chimka_cta2_title','Ready to Collaborate?'); ?></h2>
      <p><?php echo k('chimka_cta2_desc','Whether you need research support, programme evaluation, GIS mapping, or community engagement expertise, our team is ready to help.'); ?></p>
    </div>
    <div class="cta-banner-actions">
      <a class="btn-cta-white" href="<?php echo u('chimka_cta2_btn1_url','/contact/'); ?>">
        <?php echo h('chimka_cta2_btn1_text','Request a Consultation →'); ?>
      </a>
      <a class="btn-cta-outline" href="<?php echo u('chimka_cta2_btn2_url','/contact/'); ?>">
        <?php echo h('chimka_cta2_btn2_text','Become a Partner →'); ?>
      </a>
    </div>
  </div>
</div>

<?php get_footer(); ?>