<?php
// ===============================
// Hunger Halt Initiative Landing Page (FULL)
// Save as: index.php (NOT .html) so PHP + DB works
// ===============================
require_once __DIR__ . "/db.php";

// Fetch collection centers (adjust column names if yours differ)
$centers = [];
$sql = "SELECT center_name, phone, address FROM collection_centers ORDER BY id DESC";
$cs = $conn->query($sql);

// If your table doesn't have address/state columns, fallback query
if(!$cs){
  $cs = $conn->query("SELECT center_name, phone FROM collection_centers ORDER BY id DESC");
}

if($cs){
  while($row = $cs->fetch_assoc()){
    $centers[] = $row;
  }
}

// ===============================
// Fetch partners
// ===============================
$partners = [];
$ps = $conn->query("SELECT partner_name, logo, website FROM partners WHERE status='active' ORDER BY id DESC");
if($ps){
  while($row = $ps->fetch_assoc()){
    $partners[] = $row;
  }
}

// ===============================
// Fetch upcoming events
// ===============================
$events = [];
$es = $conn->query("SELECT title, event_date, venue, description, image FROM upcoming_events WHERE status='active' ORDER BY event_date ASC, id DESC");
if($es){
  while($row = $es->fetch_assoc()){
    $events[] = $row;
  }
}
// ===============================
// Card Lookup
// ===============================
$cardLookup = null;
$cardLookupError = "";
$cardLookupPhone = "";

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['card_lookup_submit'])) {
  $cardLookupPhone = trim($_POST['lookup_phone'] ?? '');

  if ($cardLookupPhone === '') {
    $cardLookupError = "Please enter your phone number.";
  } else {
    $stmt = $conn->prepare("
      SELECT 
        u.fullname,
        u.phone,
        c.card_number,
        c.balance,
        c.status
      FROM users u
      LEFT JOIN cards c ON c.user_id = u.id
      WHERE u.phone = ?
      ORDER BY c.id DESC
      LIMIT 1
    ");
    $stmt->bind_param("s", $cardLookupPhone);
    $stmt->execute();
    $res = $stmt->get_result();
    $cardLookup = $res->fetch_assoc();

    if (!$cardLookup) {
      $cardLookupError = "No card details found for this phone number.";
    }
  }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hunger Halt Initiative | Zero Hunger NGO</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap" rel="stylesheet">

<style>
:root{
    --primary:#0f766e;
    --secondary:#22c55e;
    --dark:#020617;
    --light:#f8fafc;
}

*{box-sizing:border-box}

body{
    margin:0;
    font-family:'Poppins',sans-serif;
    background:var(--light);
    color:#0f172a;
}

/* ================= NAV ================= */
header{
    position:fixed;
    width:100%;
    top:0;
    z-index:1000;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(10px);
    box-shadow:0 4px 15px rgba(0,0,0,.05);
}

.nav{
    max-width:1200px;
    margin:auto;
    padding:15px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    font-size:22px;
    color:var(--primary);
}

.logo img{width:40px}

.nav a{
    text-decoration:none;
    color:#020617;
    margin-left:24px;
    font-weight:600;
}

.nav a:hover{color:var(--primary)}

/* ================= HERO SLIDER ================= */
.hero-slider{
    position:relative;
    height:100vh;
    overflow:hidden;
}

.slide{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    padding:0 20px;
    color:#fff;
    opacity:0;
    transform:scale(1.05);
    transition:opacity 1.2s ease, transform 1.2s ease;
    background-size:cover;
    background-position:center;
}
.slide.active{
    opacity:1;
    transform:scale(1);
    z-index:1;
}
.slide::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(2,6,23,.22);
}
.hero-content{
    position:relative;
    max-width:750px;
    animation:fadeUp 1.2s ease;
}
.hero h1{font-size:clamp(36px,5vw,60px)}
.hero p{font-size:18px;margin:25px 0 35px;opacity:.95}

/* ================= HERO BUTTONS ================= */
.hero-buttons{
    display:flex;
    gap:12px;
    margin-top:22px;
    flex-wrap:nowrap;
}
.btn{
    padding:10px 22px;
    border-radius:30px;
    font-weight:600;
    font-size:14px;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:6px;
    transition:.3s ease;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
}
.btn-primary{background:var(--secondary);color:#000}
.btn-outline{border:1.8px solid #fff;color:#fff;background:transparent}
.btn:hover{transform:translateY(-2px)}
@media(max-width:600px){
    .hero-buttons{flex-direction:column;align-items:flex-start}
}

/* ================= SLIDER DOTS ================= */
.slider-dots{
    position:absolute;
    bottom:30px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
    z-index:5;
}
.dot{
    width:10px;height:10px;border-radius:50%;
    background:rgba(255,255,255,.4);
    cursor:pointer;
    transition:.3s ease;
}
.dot.active{
    background:#22c55e;
    width:22px;
    border-radius:20px;
}

/* ================= SECTION ================= */
.section{
    max-width:1200px;
    margin:auto;
    padding:100px 20px;
}
.section h2{
    text-align:center;
    font-size:38px;
    margin-bottom:18px;
}
.section .desc{
    text-align:center;
    max-width:900px;
    margin:0 auto 60px;
    color:#475569;
}

/* ================= ABOUT ================= */
.about{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:60px;
    align-items:center;
}
.about img{
    width:100%;
    border-radius:30px;
    box-shadow:0 30px 70px rgba(0,0,0,.2);
}

/* ================= SDG ================= */
.sdg{
    background:linear-gradient(135deg,#ecfeff,#f0fdfa);
    border-radius:40px;
    padding:70px;
    text-align:center;
}
.sdg span{
    background:var(--primary);
    color:#fff;
    padding:8px 20px;
    border-radius:30px;
    font-weight:600;
}

/* ================= FEATURES ================= */
.features{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:30px;
}
.feature{
    background:#fff;
    padding:35px;
    border-radius:28px;
    box-shadow:0 20px 45px rgba(0,0,0,.1);
    transition:.4s;
}
.feature:hover{
    transform:translateY(-12px);
    box-shadow:0 40px 80px rgba(0,0,0,.18);
}
.feature h4{color:var(--primary)}

/* ================= SCROLLABLE GALLERY ================= */
.gallery-scroll{
    display:flex;
    gap:20px;
    overflow-x:auto;
    padding:10px 5px 25px;
    scroll-snap-type:x mandatory;
}
.gallery-scroll::-webkit-scrollbar{height:8px}
.gallery-scroll::-webkit-scrollbar-thumb{
    background:#22c55e;border-radius:10px;
}
.gallery-scroll img{
    width:320px;height:210px;
    object-fit:cover;
    border-radius:22px;
    cursor:pointer;
    scroll-snap-align:center;
    box-shadow:0 15px 35px rgba(0,0,0,.25);
    transition:.35s ease;
}
.gallery-scroll img:hover{transform:scale(1.05)}

/* ================= LIGHTBOX ================= */
.lightbox{
    position:fixed;
    inset:0;
    background:rgba(2,6,23,.85);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:.4s ease;
    z-index:2000;
}
.lightbox.show{opacity:1;visibility:visible}
.lightbox img{
    max-width:90%;
    max-height:85%;
    border-radius:25px;
    box-shadow:0 30px 70px rgba(0,0,0,.6);
    animation:zoomIn .4s ease;
}
@keyframes zoomIn{
    from{transform:scale(.8); opacity:0}
    to{transform:scale(1); opacity:1}
}

/* ================= TEAM SECTION ================= */
.team-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:40px;
    text-align:center;
}
.team-card{
    background:#fff;
    padding:35px 20px;
    border-radius:30px;
    box-shadow:0 20px 45px rgba(0,0,0,.12);
    transition:.4s ease;
}
.team-card:hover{
    transform:translateY(-10px);
    box-shadow:0 40px 80px rgba(0,0,0,.18);
}
.team-card img{
    width:140px;height:140px;
    object-fit:cover;
    border-radius:50%;
    border:6px solid var(--secondary);
    margin-bottom:18px;
}
.team-card h4{margin:10px 0 4px;font-size:18px;font-weight:700}
.team-card span{font-size:14px;color:#64748b}
@media(max-width:600px){
    .team-grid{grid-template-columns:repeat(3, 1fr);gap:18px}
    .team-card{padding:18px 10px}
    .team-card img{width:90px;height:90px;border-width:4px}
    .team-card h4{font-size:13px}
    .team-card span{font-size:11px}
}

/* ================= IMPACT (SINGLE CARD) ================= */
.impact-card{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:30px;
    background:linear-gradient(135deg, var(--primary), var(--dark));
    padding:60px 40px;
    border-radius:40px;
    box-shadow:0 40px 90px rgba(0,0,0,.25);
    animation:impactFloat 6s ease-in-out infinite;
}
.impact-item{text-align:center;color:#fff;position:relative}
.impact-item h3{
    font-size:42px;margin:0;
    color:var(--secondary);
    animation:countPulse 2.5s infinite;
}
.impact-item span{display:block;margin-top:6px;font-size:15px;opacity:.95}
@keyframes impactFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes countPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@media(max-width:600px){
    .impact-card{padding:45px 25px;gap:22px}
    .impact-item h3{font-size:30px}
    .impact-item span{font-size:13px}
}

/* ================= CTA ================= */
.cta{
    background:linear-gradient(135deg,var(--primary),var(--dark));
    color:#fff;
    border-radius:45px;
    padding:80px 40px;
    text-align:center;
}
.cta a{
    display:inline-block;
    margin-top:25px;
    background:var(--secondary);
    padding:16px 40px;
    border-radius:40px;
    color:#000;
    font-weight:800;
    text-decoration:none;
}

/* ================= FOOTER ================= */
footer{
    padding:40px 20px;
    text-align:center;
    color:#64748b;
}

/* ================= ANIMATION ================= */
@keyframes fadeUp{
    from{opacity:0;transform:translateY(30px)}
    to{opacity:1;transform:none}
}

/* ================= MOBILE ================= */
@media(max-width:768px){
    .nav a{display:none}
    .hero-slider{height:85vh}
    .sdg{padding:45px}
}

/* ================= MEMBER BENEFITS ================= */
.benefitsWrap{
  background:linear-gradient(135deg,#ecfeff,#f0fdfa);
  border-radius:45px;
  padding:70px 40px;
  box-shadow:0 40px 90px rgba(0,0,0,.12);
}
.benefitsGrid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:35px;
  align-items:stretch;
}
@media(max-width:900px){
  .benefitsGrid{grid-template-columns:1fr}
  .benefitsWrap{padding:45px 22px}
}
.benefitCards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;
}
@media(max-width:600px){
  .benefitCards{grid-template-columns:1fr}
}
.bCard{
  background:#fff;
  border-radius:26px;
  padding:22px 20px;
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 16px 35px rgba(2,6,23,.08);
  transition:.35s ease;
  position:relative;
  overflow:hidden;
}
.bCard:hover{transform:translateY(-8px); box-shadow:0 30px 70px rgba(2,6,23,.14)}
.bCard h4{margin:0 0 10px;color:var(--primary)}
.bCard p{margin:0;color:#475569;line-height:1.55;font-size:14px}
.bIcon{
  width:46px;height:46px;border-radius:16px;
  display:grid;place-items:center;
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.25);
  margin-bottom:12px;
  font-size:20px;
}
.benefitAside{
  background:linear-gradient(135deg,var(--primary),var(--dark));
  border-radius:30px;
  padding:26px 22px;
  color:#fff;
  box-shadow:0 20px 55px rgba(2,6,23,.18);
  position:relative;
  overflow:hidden;
}
.benefitAside:before{
  content:"";
  position:absolute; inset:-70px -70px auto auto;
  width:220px;height:220px;border-radius:50%;
  background:rgba(255,255,255,.12);
}
.asideInner{position:relative}
.asideTitle{font-size:20px;font-weight:800;margin:0 0 12px}
.asideText{opacity:.95;line-height:1.6;margin:0 0 16px;font-size:14px}
.asideBadges{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.badgePill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  font-weight:700;font-size:12px;
  border:1px solid rgba(226,232,240,.25);
  background:rgba(255,255,255,.08);
}

/* ================= CENTERS ================= */
.centersWrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:35px;
  align-items:start;
}
@media(max-width:900px){
  .centersWrap{grid-template-columns:1fr}
}
.centerPhoto{
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.22);
  border:1px solid rgba(226,232,240,.7);
}
.centerPhoto img{
  width:100%;
  height:420px;
  object-fit:cover;
  display:block;
  transform:scale(1.02);
  transition:.5s ease;
}
.centerPhoto:hover img{transform:scale(1.08)}
.centerList{
  background:#fff;
  border-radius:30px;
  padding:18px;
  box-shadow:0 20px 50px rgba(2,6,23,.10);
  border:1px solid rgba(226,232,240,.9);
}
.centerItem{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:14px 12px;
  border-bottom:1px dashed #e2e8f0;
}
.centerItem:last-child{border-bottom:none}
.centerName{font-weight:800;color:#0f172a}
.centerMeta{color:#64748b;font-size:13px;line-height:1.35;margin-top:4px}
.centerRight{min-width:120px;text-align:right}
.centerTag{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background:#ecfdf5;
  border:1px solid #bbf7d0;
  color:#047857;
  margin-bottom:8px;
}
.centerLink{
  display:inline-block;
  margin-top:6px;
  font-size:12px;
  font-weight:800;
  color:var(--primary);
  text-decoration:none;
}
.centerLink:hover{text-decoration:underline}

/* ================= CARD SECTION ================= */
.cardBenefit{
  background:linear-gradient(135deg,#ffffff,#f8fafc);
  border-radius:40px;
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 25px 60px rgba(2,6,23,.10);
  padding:55px 35px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  align-items:center;
}
@media(max-width:900px){
  .cardBenefit{grid-template-columns:1fr;padding:40px 22px}
}
.cardMock{
  background:linear-gradient(135deg,var(--dark),#0f766e);
  border-radius:28px;
  padding:26px;
  color:#fff;
  position:relative;
  overflow:hidden;
  box-shadow:0 30px 70px rgba(2,6,23,.22);
}
.cardMock:before{
  content:"";
  position:absolute; inset:-90px auto auto -90px;
  width:240px;height:240px;border-radius:50%;
  background:rgba(255,255,255,.10);
}
.cardMock .row{
  position:relative;
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
  align-items:center;
}
.cardMock .brand{font-weight:900;letter-spacing:.3px}
.cardMock .chip{
  width:48px;height:34px;border-radius:10px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.25);
}
.cardMock .num{
  position:relative;
  font-family:monospace;
  font-size:18px;
  letter-spacing:2px;
  margin:14px 0 8px;
}
.cardMock .foot{
  position:relative;
  display:flex;
  justify-content:space-between;
  font-size:12px;
  opacity:.92;
}
.cardText h3{margin:0 0 10px}
.cardText p{margin:0;color:#475569;line-height:1.65}
.cardText ul{margin:14px 0 0;padding-left:18px;color:#475569;line-height:1.75}
/* ================= PARTNERS ================= */
.partnersWrap{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#ffffff,#f8fafc);
  border:1px solid rgba(226,232,240,.9);
  border-radius:40px;
  box-shadow:0 25px 60px rgba(2,6,23,.10);
  padding:28px 0;
}
.partnersTrack{
  display:flex;
  gap:20px;
  width:max-content;
  animation:partnerScroll 35s linear infinite;
}
.partnersWrap:hover .partnersTrack{
  animation-play-state:paused;
}
.partnerCard{
  min-width:220px;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:24px;
  padding:18px 16px;
  text-align:center;
  box-shadow:0 14px 35px rgba(2,6,23,.08);
  transition:.3s ease;
}
.partnerCard:hover{
  transform:translateY(-8px);
  box-shadow:0 24px 50px rgba(2,6,23,.14);
}
.partnerLogo{
  width:84px;
  height:84px;
  margin:0 auto 12px;
  border-radius:20px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.partnerLogo img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.partnerName{
  font-size:15px;
  font-weight:800;
  color:#0f172a;
  line-height:1.35;
}
.partnerLink{
  display:inline-block;
  margin-top:8px;
  font-size:12px;
  font-weight:800;
  color:var(--primary);
  text-decoration:none;
}
.partnerLink:hover{text-decoration:underline}

@keyframes partnerScroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* ================= UPCOMING EVENTS ================= */
.eventsGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
}
.eventCard{
  background:#fff;
  border-radius:30px;
  overflow:hidden;
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 20px 45px rgba(2,6,23,.10);
  transition:.35s ease;
}
.eventCard:hover{
  transform:translateY(-10px);
  box-shadow:0 35px 75px rgba(2,6,23,.16);
}
.eventCard img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}
.eventBody{
  padding:18px;
}
.eventDate{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:#ecfdf5;
  border:1px solid #bbf7d0;
  color:#047857;
  font-size:12px;
  font-weight:800;
  margin-bottom:12px;
}
.eventTitle{
  margin:0 0 10px;
  font-size:20px;
  color:#0f172a;
  font-weight:800;
}
.eventMeta{
  color:#475569;
  font-size:14px;
  line-height:1.65;
}
.eventVenue{
  margin-top:10px;
  font-weight:700;
  color:var(--primary);
}

/* ================= CARD LOOKUP ================= */
.lookupWrap{
  max-width:980px;
  margin:0 auto;
  background:linear-gradient(135deg,#ffffff,#f8fafc);
  border:1px solid rgba(226,232,240,.9);
  border-radius:40px;
  padding:50px 30px;
  box-shadow:0 25px 60px rgba(2,6,23,.10);
}
.lookupGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:start;
}
@media(max-width:900px){
  .lookupGrid{grid-template-columns:1fr}
  .lookupWrap{padding:35px 18px}
}
.lookupIntro{
  background:linear-gradient(135deg,var(--primary),var(--dark));
  color:#fff;
  border-radius:28px;
  padding:28px 24px;
  box-shadow:0 20px 55px rgba(2,6,23,.18);
  position:relative;
  overflow:hidden;
}
.lookupIntro:before{
  content:"";
  position:absolute;
  width:180px;height:180px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  right:-40px;top:-40px;
}
.lookupIntro h3{
  position:relative;
  margin:0 0 10px;
  font-size:28px;
}
.lookupIntro p{
  position:relative;
  margin:0;
  line-height:1.7;
  font-size:14px;
  opacity:.95;
}
.lookupCard{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:28px;
  padding:24px 20px;
  box-shadow:0 18px 45px rgba(2,6,23,.08);
}
.lookupCard h3{
  margin:0 0 10px;
  color:#0f172a;
}
.lookupSub{
  margin:0 0 18px;
  color:#64748b;
  font-size:14px;
}
.lookupForm label{
  display:block;
  margin-bottom:8px;
  font-weight:700;
  font-size:13px;
  color:#334155;
}
.lookupForm input{
  width:100%;
  padding:14px 15px;
  border:1px solid #cbd5e1;
  border-radius:14px;
  outline:none;
  font-size:15px;
  transition:.2s ease;
}
.lookupForm input:focus{
  border-color:#14b8a6;
  box-shadow:0 0 0 4px rgba(20,184,166,.12);
}
.lookupBtn{
  margin-top:14px;
  width:100%;
  border:none;
  border-radius:14px;
  padding:14px 16px;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff;
  box-shadow:0 16px 30px rgba(15,118,110,.18);
}
.lookupBtn:disabled{
  opacity:.7;
  cursor:not-allowed;
}
.lookupAlert{
  margin-top:14px;
  padding:12px 14px;
  border-radius:14px;
  font-size:14px;
  font-weight:600;
}
.lookupAlert.error{
  background:#fef2f2;
  color:#b91c1c;
  border:1px solid #fecaca;
}
.lookupResultGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media(max-width:600px){
  .lookupResultGrid{grid-template-columns:1fr}
}
.lookupBox{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:14px;
}
.lookupBox small{
  display:block;
  color:#64748b;
  font-size:12px;
  font-weight:700;
  margin-bottom:5px;
}
.lookupBox strong{
  font-size:15px;
  color:#0f172a;
  word-break:break-word;
}
.lookupStatus{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  text-transform:capitalize;
}
.lookupStatus.active{
  background:#dcfce7;
  color:#166534;
}
.lookupStatus.inactive{
  background:#fee2e2;
  color:#991b1b;
}
.lookupStatus.other{
  background:#e2e8f0;
  color:#334155;
}

/* ================= LOOKUP MODAL ================= */
.lookupModalOverlay{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.75);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:5000;
}
.lookupModalOverlay.show{
  display:flex;
}
.lookupModal{
  width:min(620px,100%);
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  animation:lookupPop .28s ease;
}
@keyframes lookupPop{
  from{opacity:0;transform:scale(.92) translateY(10px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
.lookupModalHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:16px 18px;
  background:linear-gradient(135deg,var(--primary),var(--dark));
  color:#fff;
}
.lookupModalHead h3{
  margin:0;
  font-size:20px;
}
.lookupCloseBtn{
  width:40px;
  height:40px;
  border:none;
  border-radius:12px;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:24px;
  cursor:pointer;
  font-weight:800;
}
.lookupModalBody{
  padding:20px;
}
.lookupFull{
  grid-column:span 2;
}
@media(max-width:600px){
  .lookupFull{
    grid-column:span 1;
  }
}

.copyCardBtn{
  margin-top:10px;
  border:none;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff;
  padding:9px 12px;
  border-radius:10px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  display:inline-block;
}

.copyMsg{
  margin-top:8px;
  font-size:12px;
  font-weight:700;
  color:#0f766e;
}

/* ================= DOWNLOAD APP ================= */
.downloadAppWrap{
  background:linear-gradient(135deg,#0f766e,#022c22);
  color:#fff;
  border-radius:42px;
  padding:60px 35px;
  box-shadow:0 30px 80px rgba(2,6,23,.22);
  overflow:hidden;
  position:relative;
}
.downloadAppWrap:before{
  content:"";
  position:absolute;
  right:-70px;
  top:-70px;
  width:240px;
  height:240px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
}
.downloadAppGrid{
  position:relative;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:30px;
  align-items:center;
}
@media(max-width:900px){
  .downloadAppGrid{
    grid-template-columns:1fr;
  }
  .downloadAppWrap{
    padding:40px 22px;
  }
}
.downloadText h3{
  margin:0 0 12px;
  font-size:34px;
  line-height:1.2;
}
.downloadText p{
  margin:0 0 18px;
  color:rgba(255,255,255,.92);
  line-height:1.75;
  font-size:15px;
}
.downloadBadges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:20px 0;
}
.downloadBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  font-size:13px;
  font-weight:700;
}
.downloadBtns{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:20px;
}
.downloadBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  border-radius:16px;
  padding:15px 22px;
  font-weight:800;
  font-size:15px;
  transition:.3s ease;
}
.downloadBtnPrimary{
  background:#22c55e;
  color:#052e16;
  box-shadow:0 14px 30px rgba(34,197,94,.30);
}
.downloadBtnPrimary:hover{
  transform:translateY(-3px);
}
.downloadBtnSecondary{
  background:rgba(255,255,255,.10);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
}
.downloadBtnSecondary:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.14);
}
.phoneMockWrap{
  display:flex;
  justify-content:center;
}
.phoneMock{
  width:290px;
  max-width:100%;
  background:linear-gradient(180deg,#111827,#020617);
  border-radius:34px;
  padding:14px;
  box-shadow:0 35px 80px rgba(0,0,0,.30);
  border:1px solid rgba(255,255,255,.08);
}
.phoneScreen{
  background:linear-gradient(180deg,#f8fafc,#ecfeff);
  border-radius:26px;
  min-height:520px;
  padding:18px;
  position:relative;
  overflow:hidden;
}
.phoneTop{
  width:110px;
  height:8px;
  border-radius:20px;
  background:#cbd5e1;
  margin:0 auto 18px;
}
.appMiniLogo{
  width:58px;
  height:58px;
  border-radius:18px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 24px rgba(2,6,23,.10);
  margin-bottom:14px;
}
.appMiniLogo img{
  width:36px;
  height:36px;
  object-fit:contain;
}
.screenTitle{
  margin:0;
  color:#0f172a;
  font-size:22px;
  font-weight:800;
}
.screenSub{
  color:#64748b;
  font-size:13px;
  margin-top:6px;
  line-height:1.5;
}
.screenCards{
  display:grid;
  gap:12px;
  margin-top:18px;
}
.screenCard{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:18px;
  padding:14px;
  box-shadow:0 10px 25px rgba(2,6,23,.06);
}
.screenCard strong{
  display:block;
  color:#0f766e;
  margin-bottom:5px;
  font-size:14px;
}
.screenCard span{
  color:#64748b;
  font-size:12px;
  line-height:1.45;
}
.screenBottomBtn{
  margin-top:16px;
  background:linear-gradient(135deg,#0f766e,#22c55e);
  color:#fff;
  text-align:center;
  padding:14px;
  border-radius:16px;
  font-weight:800;
  box-shadow:0 12px 28px rgba(15,118,110,.18);
}
.hidden-center{
  display:none;
}

.showMoreCentersBtn{
  width:100%;
  border:none;
  border-radius:14px;
  padding:14px 16px;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  background:linear-gradient(135deg,#0f766e,#22c55e);
  color:#fff;
  box-shadow:0 14px 30px rgba(15,118,110,.18);
  transition:.3s ease;
}
.showMoreCentersBtn:hover{
  transform:translateY(-2px);
}
</style>
</head>

<body>

<header>
  <div class="nav">
    <div class="logo">
      <img src="assets/logo.png" alt="Hunger Halt Logo">
      Hunger Halt Initiative
    </div>
    <nav>
      <a href="#about">About</a>
      <a href="#programs">Programs</a>
      <a href="#benefits">Benefits</a>
      <a href="#centers">Centers</a>
      <a href="#impact">Impact</a>
      <a href="#contact">Contact</a>
    </nav>
  </div>
</header>

<section class="hero-slider hero">
  <div class="slide active" style="background-image:
    linear-gradient(rgba(2,6,23,.65),rgba(2,6,23,.65)),
    url('assets/1.jpg')">
    <div class="hero-content">
      <h1>Fighting Hunger.<br>Restoring Hope.</h1>
      <p>
        Hunger Halt Initiative is a humanitarian NGO dedicated to achieving
        <b>UN SDG Goal 2 – Zero Hunger</b> by delivering sustainable food
        support and community empowerment programs.
      </p>
      <div class="hero-buttons">
  <a href="/users/login.php" class="btn btn-primary">👤 Member Login</a>
  <a href="#card-lookup" class="btn btn-outline">🎫 Card Lookup</a>
  <a href="https://wa.me/2349151436827" target="_blank" class="btn btn-outline">💬 Contact Us</a>
</div>
    </div>
  </div>

  <div class="slide" style="background-image:
    linear-gradient(rgba(2,6,23,.65),rgba(2,6,23,.65)),
    url('assets/2.jpg')">
    <div class="hero-content">
      <h1>Food Support<br>That Saves Lives</h1>
      <p>
        Registered members receive <b>food support regularly</b>,
        helping families avoid hunger while restoring dignity and hope.
      </p>
      <div class="hero-buttons">
  <a href="/users/login.php" class="btn btn-primary">👤 Member Login</a>
  <a href="#card-lookup" class="btn btn-outline">🎫 Card Lookup</a>
  <a href="https://wa.me/2349151436827" target="_blank" class="btn btn-outline">💬 Contact Us</a>
</div>
    </div>
  </div>

  <div class="slide" style="background-image:
    linear-gradient(rgba(2,6,23,.65),rgba(2,6,23,.65)),
    url('assets/3.jpg')">
    <div class="hero-content">
      <h1>Together We Can<br>End Hunger</h1>
      <p>
        Through partnerships, volunteers, and community networks,
        we are building a <b>sustainable hunger-free future</b>.
      </p>
      <div class="hero-buttons">
  <a href="/users/login.php" class="btn btn-primary">👤 Member Login</a>
  <a href="#card-lookup" class="btn btn-outline">🎫 Card Lookup</a>
  <a href="https://wa.me/2349151436827" target="_blank" class="btn btn-outline">💬 Contact Us</a>
</div>
    </div>
  </div>

  <div class="slider-dots">
    <span class="dot active" data-slide="0"></span>
    <span class="dot" data-slide="1"></span>
    <span class="dot" data-slide="2"></span>
  </div>
</section>

<section class="section" id="about">
  <h2>About Hunger Halt Initiative</h2>
  <p class="desc">
    Hunger Halt Initiative was founded in 2023 out of a deep and burning desire 
    to address the alarming rate of hunger in our society. The vision was inspired 
    by a tragic real-life incident in which an entire family lost their lives due 
    to hunger and extreme poverty. This heartbreaking event became a wake-up call
    and motivated the creation of Hunger Halt Initiative to work toward reducing 
    hunger and ensuring that no family suffers such a fate again.
  </p>

  <div class="about">
    <div>
      <h3>Our Mission</h3>
      <p>
        To reduce hunger through structured food programs,
        digital food coupons, and community-led initiatives.
      </p>

      <h3>Our Vision</h3>
      <p>
        A world where no family goes to bed hungry.
      </p>
    </div>

    <img src="assets/hhi.jpg" alt="Hunger Halt Initiative">
  </div>
</section>

<section class="section">
  <div class="sdg">
    <span>SDG GOAL 2</span>
    <h2>Zero Hunger Commitment</h2>
    <p>
      Hunger Halt Initiative aligns its programs with the United Nations
      Sustainable Development Goal 2 to eradicate hunger and improve nutrition.
    </p>
  </div>
</section>

<section class="section" id="programs">
  <h2>Our Core Programs</h2>
  <p class="desc">Designed for immediate relief and long-term impact.</p>

  <div class="features">
    <div class="feature">
      <h4>🍚 Regular Food Support</h4>
      <p>Registered members receive structured food assistance through our food bank network.</p>
    </div>
    <div class="feature">
      <h4>🎫 Food Coupon System</h4>
      <p>Secure coupons redeemable for essential food items through our collection centers.</p>
    </div>
    <div class="feature">
      <h4>🤝 Community Network</h4>
      <p>Building strong, hunger-free communities with leaders, volunteers and partners.</p>
    </div>
    <div class="feature">
      <h4>🚀 Empowerment Program</h4>
      <p>Supporting members who want to sell foodstuffs and build sustainable income.</p>
    </div>
  </div>
</section>

<!-- ================= NEW: MEMBER BENEFITS ================= -->
<section class="section" id="benefits">
  <h2>Member Benefits</h2>
  <p class="desc">
    When you register with Hunger Halt Initiative, you gain access to support systems designed to help families eat well,
    grow financially, and buy food at affordable rates.
  </p>

  <div class="benefitsWrap">
    <div class="benefitsGrid">

      <div class="benefitCards">
        <div class="bCard">
          <div class="bIcon">🍲</div>
          <h4>Free Food Support (Regular)</h4>
          <p>
            Members can receive <b>free food support regularly</b> through our Food Bank Network Program,
            helping households stay strong during difficult times.
          </p>
        </div>

        <div class="bCard">
          <div class="bIcon">🚀</div>
          <h4>Empowerment & Business Support</h4>
          <p>
            We empower members who want to sell foodstuffs by helping to <b>establish their business</b>
            and grow their customer base through our network.
          </p>
        </div>

        <div class="bCard">
          <div class="bIcon">🛒</div>
          <h4>Buy Food at Very Low Prices</h4>
          <p>
            Members buy food items at <b>very low prices</b> through our structured supply and distribution system.
          </p>
        </div>

        <div class="bCard">
          <div class="bIcon">💸</div>
          <h4>Cashback on Every Purchase</h4>
          <p>
            Members earn <b>cashback</b> on every food purchase—reducing the cost of feeding the family.
          </p>
        </div>
      </div>

      <div class="benefitAside">
        <div class="asideInner">
          <p class="asideTitle">Food Support via Food Coupon Card</p>
          <p class="asideText">
            Members get food support and discounts through our <b>Food Coupon Card</b>.
            After registration, members can receive their card as a <b>physical card</b> or a <b>digital/virtual card</b>.
          </p>

          <div class="asideBadges">
            <span class="badgePill">🎫 Food Coupon Card</span>
            <span class="badgePill">🏪 Collection Centers</span>
            <span class="badgePill">📦 Food Bank Network</span>
            <span class="badgePill">✅ Cashback Rewards</span>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>


<section class="section" id="card-lookup">
  <h2>Card Lookup</h2>
  <p class="desc">
    Already registered? Enter your phone number to check your Food Coupon Card details instantly.
  </p>

  <div class="lookupWrap">
    <div class="lookupGrid">

      <div class="lookupIntro">
        <h3>Check Your Card Details</h3>
        <p>
          Use the phone number linked to your Hunger Halt membership account to view your
          name, card number, available balance, and card status.
        </p>
      </div>

      <div class="lookupCard">
        <h3>Enter Your Phone Number</h3>
        <p class="lookupSub">
          Make sure you use the same phone number used during registration.
        </p>

        <form id="cardLookupForm" class="lookupForm">
          <label for="lookup_phone">Phone Number</label>
          <input
            type="text"
            id="lookup_phone"
            name="lookup_phone"
            placeholder="Enter your phone number"
            required
          >

          <button type="submit" class="lookupBtn" id="lookupBtn">
            Show Card Details
          </button>
        </form>

        <div id="lookupAjaxError" class="lookupAlert error" style="display:none;"></div>
      </div>

    </div>
  </div>
</section>

<!-- ================= NEW: FOOD COUPON CARD ================= -->
<section class="section" id="coupon-card">
  <h2>Food Coupon Card</h2>
  <p class="desc">
    Your membership comes with a Food Coupon Card that helps you access food support, discounts,
    and rewards across our network.
  </p>

  <div class="cardBenefit">
    <div class="cardText">
      <h3>Physical or Digital Card</h3>
      <p>
        After registration, members can receive their Food Coupon Card either as:
      </p>
      <ul>
        <li><b>Physical Card</b> – collected from any approved collection center.</li>
        <li><b>Virtual/Digital Card</b> – accessed through the member platform (where available).</li>
        <li><b>Redeem Food Support</b> through our food bank program.</li>
        <li><b>Earn Cashback</b> on every food purchase.</li>
      </ul>
    </div>

    <div class="cardMock" aria-label="Food Coupon Card preview">
      <div class="row">
        <div class="brand">Hunger Halt Initiative</div>
        <div class="chip"></div>
      </div>
      <div style="position:relative;opacity:.95;font-weight:800;margin-top:4px">FOOD COUPON CARD</div>
      <div class="num">HHI •••• •••• •••• 2401</div>
      <div class="foot">
        <span>Member</span>
        <span>Zero Hunger</span>
      </div>
    </div>
  </div>
</section>

<!-- ================= NEW: COLLECTION CENTERS (DB LIST) ================= -->
<section class="section" id="centers">
  <h2>Food Collection Centers</h2>
  <p class="desc">
   Members claim their food support using their Food Coupon Card at our approved Food Collection Centers. 
   These centers also allow members to buy food items at affordable prices, and they help 
   build a strong customer base for members who sell foodstuffs through our empowerment program.
  </p>

  <div class="centersWrap">

    <div class="centerPhoto">
      <img src="assets/center.png" alt="Hunger Halt Food Collection Center">
    </div>

    <div class="centerList">
      <div style="display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px">
        <div style="font-weight:900;font-size:16px">Available Centers</div>
        <span class="badgePill" style="background:rgba(15,118,110,.12);border-color:rgba(15,118,110,.25)">
          Total Centers: <?= count($centers) ?>
        </span>
      </div>

      <?php if(empty($centers)): ?>
        <div style="color:#64748b;padding:12px 10px">
          No collection centers have been added yet.
        </div>
      <?php else: ?>

        <?php foreach($centers as $index => $c): ?>
          <?php
            $name  = $c['center_name'] ?? 'Center';
            $phone = $c['phone'] ?? '';
            $addr  = $c['address'] ?? '';
            $state = $c['state'] ?? '';

            $wa = preg_replace('/\D+/', '', $phone);
            if(strlen($wa) > 0 && $wa[0] === '0'){ $wa = '234' . substr($wa, 1); }

            $hiddenClass = ($index >= 10) ? 'extra-center hidden-center' : '';
          ?>
          <div class="centerItem <?= $hiddenClass ?>">
            <div>
              <div class="centerName"><?= htmlspecialchars($name) ?></div>
              <div class="centerMeta">
                <?= htmlspecialchars(trim($addr)) ?><?= $state ? ' • '.htmlspecialchars($state) : '' ?><br>
                Phone: <?= htmlspecialchars($phone ?: '-') ?>
              </div>
            </div>

            <div class="centerRight">
              <div class="centerTag">Available</div>
              <?php if(!empty($wa)): ?>
                <a class="centerLink" target="_blank" href="https://wa.me/<?= htmlspecialchars($wa) ?>">WhatsApp</a>
              <?php endif; ?>
            </div>
          </div>
        <?php endforeach; ?>

      <?php endif; ?>

      <div style="margin-top:14px;color:#64748b;font-size:13px;line-height:1.5;padding:0 10px 6px">
        ✅ Members can get food support through their Food Coupon Card at any approved collection center.
      </div>

      <?php if(count($centers) > 10): ?>
        <div style="padding:10px 10px 0">
          <button id="showMoreCentersBtn" type="button" class="showMoreCentersBtn" onclick="showMoreCenters()">
            Show More Centers
          </button>
        </div>
      <?php endif; ?>
    </div>

  </div>
</section>
<section class="section" id="download-app">
  <h2>Download Our App</h2>
  <p class="desc">
    Install the Hunger Halt Initiative app on your phone to access your membership, card services,
    food support information, and other helpful features anytime.
  </p>

  <div class="downloadAppWrap">
    <div class="downloadAppGrid">

      <div class="downloadText">
        <h3>Get the Hunger Halt App on Your Device</h3>
        <p>
          Enjoy faster access to your account, food coupon card services, collection center information,
          and member support directly from your mobile phone.
        </p>

        <div class="downloadBadges">
          <span class="downloadBadge">📱 Easy to Install</span>
          <span class="downloadBadge">⚡ Fast Access</span>
          <span class="downloadBadge">🎫 Card Services</span>
          <span class="downloadBadge">🏪 Collection Centers</span>
        </div>

        <div class="downloadBtns">
          <a href="app/hhi-app.apk" class="downloadBtn downloadBtnPrimary" download>
            ⬇ Download Android App
          </a>

          <a href="/users/login.php" class="downloadBtn downloadBtnSecondary">
            👤 Open Member Portal
          </a>
        </div>

        <p style="margin-top:16px;font-size:13px;color:rgba(255,255,255,.85);">
          After downloading, open the file and install the app on your Android phone.
          If your device blocks installation, allow installation from trusted sources.
        </p>
      </div>

      <div class="phoneMockWrap">
        <div class="phoneMock">
          <div class="phoneScreen">
            <div class="phoneTop"></div>

            <div class="appMiniLogo">
              <img src="assets/logo.png" alt="HHI App Logo">
            </div>

            <h3 class="screenTitle">HHI Member App</h3>
            <div class="screenSub">
              Access food support, card lookup, collection centers, and member services in one place.
            </div>

            <div class="screenCards">
              <div class="screenCard">
                <strong>Food Coupon Card</strong>
                <span>View your card details and services easily.</span>
              </div>

              <div class="screenCard">
                <strong>Collection Centers</strong>
                <span>Find approved centers near you for support and purchases.</span>
              </div>

              <div class="screenCard">
                <strong>Member Access</strong>
                <span>Stay connected to your account anytime, anywhere.</span>
              </div>
            </div>

            <div class="screenBottomBtn">Install App</div>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

<section class="section">
  <h2>Gallery</h2>
  <p class="desc">Moments from our outreach and community programs.</p>

  <div class="gallery-scroll">
    <img src="assets/1.jpg" onclick="openLightbox(this.src)" alt="Gallery 1">
    <img src="assets/2.jpg" onclick="openLightbox(this.src)" alt="Gallery 2">
    <img src="assets/3.jpg" onclick="openLightbox(this.src)" alt="Gallery 3">
    <img src="assets/4.jpg" onclick="openLightbox(this.src)" alt="Gallery 4">
  </div>
</section>

<div class="lightbox" id="lightbox">
  <img id="lightbox-img" alt="Lightbox image">
</div>

<section class="section" id="team">
  <h2>Meet Our Team</h2>
  <p class="desc">
    Passionate individuals working together to fight hunger and restore hope across communities.
  </p>

  <div class="team-grid">
    <div class="team-card">
      <img src="assets/ceo.png" alt="Team Member">
      <h4>Stephen Adeyeye</h4>
      <span>Founder/Executive Director</span>
    </div>

    <div class="team-card">
      <img src="assets/prec.png" alt="Team Member">
      <h4>Adeniran Precious</h4>
      <span>Program Director</span>
    </div>

    <div class="team-card">
      <img src="assets/team5.png" alt="Team Member">
      <h4>Williams James</h4>
      <span>International Relations Adviser (USA)</span>
    </div>
    <div class="team-card">
      <img src="assets/reality.jpeg" alt="Team Member">
      <h4>Oghenemairo Adegeye</h4>
      <span>Board of Advisors</span>
    </div> 

    <div class="team-card">
      <img src="assets/uniq.jpg" alt="Team Member">
      <h4>Jare Ayo-Martins</h4>
      <span>Program Development Adviser</span>
    </div>

    <div class="team-card">
      <img src="assets/team4.png" alt="Team Member">
      <h4>Timothy Rachael</h4>
      <span>International Volunteers (USA Team)</span>
    </div>

    <div class="team-card">
      <img src="assets/team6.png" alt="Team Member">
      <h4>Olajire Ajayi</h4>
      <span>Strategic Partner</span>
    </div>
    
    <div class="team-card">
      <img src="assets/ijebu.jpeg" alt="Team Member">
      <h4>Olayinka Rachael Foluke</h4>
      <span>Volunteers (Ijeshland)</span>
    </div>
    <div class="team-card">
      <img src="assets/isaiah.jpeg" alt="Team Member">
      <h4>Akintomowo Isaiah</h4>
      <span>Volunteers (Ondo City)</span>
    </div>

    <div class="team-card">
      <img src="assets/alex.png" alt="Team Member">
      <h4>Ebenezer Alex</h4>
      <span>Community Outreach Manager</span>
    </div>
  </div>
</section>

<section class="section" id="partners">
  <h2>Our Partners</h2>
  <p class="desc">
    We are proud to work with organizations, supporters, and strategic partners who share our vision of ending hunger and empowering communities.
  </p>

  <div class="partnersWrap">
    <?php if(empty($partners)): ?>
      <div style="padding:20px;text-align:center;color:#64748b;font-weight:600;">
        No partners added yet.
      </div>
    <?php else: ?>
      <div class="partnersTrack">
        <?php
          $loopPartners = array_merge($partners, $partners);
          foreach($loopPartners as $p):
            $pname = $p['partner_name'] ?? 'Partner';
            $plogo = $p['logo'] ?? '';
            $pweb  = $p['website'] ?? '';

            if($plogo !== ''){
              if(
                strpos($plogo, 'http://') !== 0 &&
                strpos($plogo, 'https://') !== 0 &&
                strpos($plogo, '/') !== 0
              ){
                $plogo = '../' . ltrim($plogo, '/');
              }
            }
        ?>
          <div class="partnerCard">
            <div class="partnerLogo">
              <img src="<?= htmlspecialchars($plogo) ?>" alt="<?= htmlspecialchars($pname) ?>">
            </div>
            <div class="partnerName"><?= htmlspecialchars($pname) ?></div>
            <!--<?php if(!empty($pweb)): ?>-->
            <!--  <a class="partnerLink" href="<?= htmlspecialchars($pweb) ?>" target="_blank">Visit Website</a>-->
            <!--<?php endif; ?>-->
          </div>
        <?php endforeach; ?>
      </div>
    <?php endif; ?>
  </div>
</section>

<section class="section" id="events">
  <h2>Upcoming Events</h2>
  <p class="desc">
    Stay informed about our upcoming outreach programs, food support events, empowerment activities, and community initiatives.
  </p>

  <?php if(empty($events)): ?>
    <div style="background:#fff;border:1px dashed #cbd5e1;border-radius:30px;padding:30px;text-align:center;color:#64748b;">
      No upcoming events added yet.
    </div>
  <?php else: ?>
    <div class="eventsGrid">
      <?php foreach($events as $e): ?>
        <?php
          $eventImage = $e['image'] ?? '';

          if($eventImage !== ''){
            if(
              strpos($eventImage, 'http://') !== 0 &&
              strpos($eventImage, 'https://') !== 0 &&
              strpos($eventImage, '/') !== 0
            ){
              $eventImage = '../' . ltrim($eventImage, '/');
            }
          }
        ?>
        <div class="eventCard">
          <img src="<?= htmlspecialchars($eventImage) ?>" alt="<?= htmlspecialchars($e['title']) ?>">
          <div class="eventBody">
            <div class="eventDate">📅 <?= date("d M, Y", strtotime($e['event_date'])) ?></div>
            <h3 class="eventTitle"><?= htmlspecialchars($e['title']) ?></h3>
            <div class="eventMeta">
              <?= nl2br(htmlspecialchars($e['description'] ?? '')) ?>
              <?php if(!empty($e['venue'])): ?>
                <div class="eventVenue">📍 <?= htmlspecialchars($e['venue']) ?></div>
              <?php endif; ?>
            </div>
          </div>
        </div>
      <?php endforeach; ?>
    </div>
  <?php endif; ?>
</section>


<section class="section" id="impact">
  <h2>Our Impact</h2>
  <p class="desc">
    Measurable results that reflect our commitment to ending hunger and restoring hope.
  </p>

  <div class="impact-card">
    <div class="impact-item">
      <h3>10,000+</h3>
      <span>Meals Provided</span>
    </div>
    <div class="impact-item">
      <h3>3,000+</h3>
      <span>Beneficiaries Reached</span>
    </div>
    <div class="impact-item">
      <h3>15+</h3>
      <span>Communities Served</span>
    </div>
    <div class="impact-item">
      <h3>15+</h3>
      <span>Dedicated Volunteers</span>
    </div>
  </div>
</section>

<section class="section" id="contact">
  <div class="cta">
    <h2>Join the Fight Against Hunger</h2>
    <p>Partner with us, volunteer, or support our mission.</p>
    <a href="https://wa.me/2349151436827" target="_blank">Contact Us</a>
  </div>
</section>
<div class="lookupModalOverlay" id="lookupModal" onclick="closeLookupModal(event)">
  <div class="lookupModal" onclick="event.stopPropagation()">
    <div class="lookupModalHead">
      <h3>🎫 Card Details</h3>
      <button type="button" class="lookupCloseBtn" onclick="hideLookupModal()">×</button>
    </div>

    <div class="lookupModalBody">
      <div class="lookupResultGrid">
        <div class="lookupBox">
          <small>Full Name</small>
          <strong id="modal_fullname">-</strong>
        </div>

        <div class="lookupBox">
          <small>Phone Number</small>
          <strong id="modal_phone">-</strong>
        </div>

        <div class="lookupBox">
          <small>Card Number</small>
          <strong id="modal_card_number">-</strong>
          <button type="button" class="copyCardBtn" onclick="copyCardNumber()">
            Copy Card Number
          </button>
          <div id="copyMsg" class="copyMsg"></div>
        </div>

        <div class="lookupBox">
          <small>Card Balance</small>
          <strong id="modal_balance">₦0.00</strong>
        </div>

        <div class="lookupBox lookupFull">
          <small>Card Status</small>
          <span class="lookupStatus other" id="modal_status">Unknown</span>
        </div>
      </div>
    </div>
  </div>
</div>
<script>

 
const form = document.getElementById("cardLookupForm");
const btn = document.getElementById("lookupBtn");
const errorBox = document.getElementById("lookupAjaxError");

const modal = document.getElementById("lookupModal");

const fullname = document.getElementById("modal_fullname");
const phone = document.getElementById("modal_phone");
const cardNumber = document.getElementById("modal_card_number");
const balance = document.getElementById("modal_balance");
const status = document.getElementById("modal_status");

form.addEventListener("submit", function(e){

    e.preventDefault();

    errorBox.style.display = "none";

    let phoneValue = document.getElementById("lookup_phone").value.trim();

    if(phoneValue === ""){
        errorBox.innerHTML = "Please enter your phone number";
        errorBox.style.display = "block";
        return;
    }

    btn.disabled = true;
    btn.innerHTML = "Checking...";

    fetch("card_lookup_ajax.php", {
        method: "POST",
        headers:{
            "Content-Type":"application/x-www-form-urlencoded"
        },
        body: "phone=" + encodeURIComponent(phoneValue)
    })
    .then(res => res.json())
    .then(data => {

        btn.disabled = false;
        btn.innerHTML = "Show Card Details";

        if(data.status !== "ok"){
            errorBox.innerHTML = data.msg;
            errorBox.style.display = "block";
            return;
        }

        const d = data.data;

        fullname.innerText = d.fullname;
        phone.innerText = d.phone;
        cardNumber.innerText = d.card_number;
        balance.innerText = "₦" + Number(d.balance).toLocaleString(undefined,{minimumFractionDigits:2});
        status.innerText = d.card_status;

        status.className = "lookupStatus";

        if(d.card_status.toLowerCase() === "active"){
            status.classList.add("active");
        }else if(d.card_status.toLowerCase() === "inactive"){
            status.classList.add("inactive");
        }else{
            status.classList.add("other");
        }

        modal.classList.add("show");

    })
    .catch(err=>{
        btn.disabled = false;
        btn.innerHTML = "Show Card Details";
        errorBox.innerHTML = "Network error. Please try again.";
        errorBox.style.display = "block";
    });

});


function hideLookupModal(){
    modal.classList.remove("show");
}

function closeLookupModal(e){
    if(e.target.id === "lookupModal"){
        hideLookupModal();
    }
}


function copyCardNumber(){

    let text = cardNumber.innerText;

    navigator.clipboard.writeText(text);

    const msg = document.getElementById("copyMsg");

    msg.innerHTML = "Copied!";

    setTimeout(()=>{
        msg.innerHTML = "";
    },2000);

}




const slides = document.querySelectorAll('.slide');
const dots = document.querySelectorAll('.dot');
let index = 0;
let autoSlide;

function showSlide(i){
  slides.forEach(s => s.classList.remove('active'));
  dots.forEach(d => d.classList.remove('active'));
  slides[i].classList.add('active');
  dots[i].classList.add('active');
  index = i;
}

function startAuto(){
  autoSlide = setInterval(() => {
    showSlide((index + 1) % slides.length);
  }, 6000);
}
function stopAuto(){ clearInterval(autoSlide); }

dots.forEach(dot => {
  dot.addEventListener('click', () => {
    stopAuto();
    showSlide(parseInt(dot.dataset.slide, 10));
    startAuto();
  });
});

// Swipe support
let startX = 0, endX = 0;
const slider = document.querySelector('.hero-slider');

slider.addEventListener('touchstart', e => { startX = e.touches[0].clientX; });
slider.addEventListener('touchend', e => { endX = e.changedTouches[0].clientX; handleSwipe(); });

slider.addEventListener('mousedown', e => { startX = e.clientX; });
slider.addEventListener('mouseup', e => { endX = e.clientX; handleSwipe(); });

function handleSwipe(){
  const diff = startX - endX;
  if(Math.abs(diff) > 60){
    stopAuto();
    if(diff > 0) index = (index + 1) % slides.length;
    else index = (index - 1 + slides.length) % slides.length;
    showSlide(index);
    startAuto();
  }
}
startAuto();
</script>

<script>
const lightbox = document.getElementById('lightbox');
const lightboxImg = document.getElementById('lightbox-img');
let closeTimer;

function openLightbox(src){
  lightboxImg.src = src;
  lightbox.classList.add('show');
  clearTimeout(closeTimer);
  closeTimer = setTimeout(closeLightbox, 3000);
}
function closeLightbox(){ lightbox.classList.remove('show'); }
lightbox.addEventListener('click', closeLightbox);

</script>
<script>
function showMoreCenters(){
  const hiddenCenters = document.querySelectorAll('.extra-center.hidden-center');
  hiddenCenters.forEach(center => {
    center.classList.remove('hidden-center');
  });

  const btn = document.getElementById('showMoreCentersBtn');
  if(btn){
    btn.style.display = 'none';
  }
}
</script>
<footer>
  © <?= date("Y") ?> Hunger Halt Initiative • All Rights Reserved
</footer>

</body>
</html>