<?php
// Get coaches from database for tree section
$db_connection = null;
try {
    require_once __DIR__ . '/api/lib.php';
    $db_connection = hw_db();
    $authUser = hw_get_auth_user();
    
    // Get ALL coaches for coaches section
    $stmt_all = $db_connection->query("
        SELECT c.*, u.first_name, u.last_name,
               COUNT(DISTINCT a.id) as total_sessions
        FROM coaches c 
        JOIN users u ON c.user_id = u.id 
        LEFT JOIN appointments a ON c.id = a.coach_id AND a.status = 'completed'
        GROUP BY c.id
        ORDER BY c.is_featured DESC, c.years_experience DESC
    ");
    $all_coaches = $stmt_all->fetchAll(PDO::FETCH_ASSOC);
    
    // Get coaches for tree section (limited)
    $tree_coaches = array_slice($all_coaches, 0, 6);
    
    // Format coach data
    foreach ($all_coaches as &$coach) {
        $coach['expertise'] = json_decode($coach['expertise'] ?? '[]', true);
        $coach['specialties'] = $coach['expertise'] ?: ['Wellness Coaching'];
        $coach['hourly_rate'] = (float)($coach['hourly_rate'] ?? 75);
        $coach['years_experience'] = (int)($coach['years_experience'] ?? 5);
        $coach['total_sessions'] = (int)$coach['total_sessions'];
    }
    
    // Get TOA wheel data
    $toa_services = $db_connection->query("SELECT * FROM toa_wheel_services ORDER BY display_order")->fetchAll(PDO::FETCH_ASSOC);
    $toa_personnel = $db_connection->query("
        SELECT p.*, s.service_name 
        FROM toa_wheel_personnel p 
        JOIN toa_wheel_services s ON p.service_id = s.id 
        ORDER BY s.display_order, p.name
    ")->fetchAll(PDO::FETCH_ASSOC);
    
} catch (Exception $e) {
    $all_coaches = [];
    $tree_coaches = [];
    $toa_services = [];
    $toa_personnel = [];
    $authUser = null;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>A Taste of Africa Marketplace | Imported Chemical Free Health and Beauty Products</title>
  <meta name="description" content="A Taste of Africa Marketplace — All-natural, chemical-free herbs and superfoods from Africa for holistic health and wellness." />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
  <style>
    :root {
      --forest: #0b3d2e;
      --ochre: #c9a227;
      --cream: #f4e9d8;
      --ink: #0b1f16;
      --muted: #d8ccb9;
      --card: rgba(244, 233, 216, 0.9);
      --glow: 0 20px 60px rgba(0, 0, 0, 0.35);
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      color: var(--cream);
      background: radial-gradient(800px 600px at 10% 0%, rgba(201, 162, 39, 0.12), transparent 40%),
                  radial-gradient(700px 600px at 90% 10%, rgba(11, 61, 46, 0.22), transparent 45%),
                  var(--forest);
      min-height: 100vh;
    }

    a { color: inherit; text-decoration: none; }

    header {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 20;
      padding: 16px 24px;
      backdrop-filter: blur(12px);
      background: rgba(11, 29, 24, 0.85);
      border-bottom: 2px solid rgba(201, 162, 39, 0.3);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    }

    .nav {
      max-width: 1400px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
      padding: 0 12px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 14px;
      color: var(--cream);
      font-weight: 700;
      letter-spacing: 0.01em;
      font-size: 18px;
      flex-shrink: 0;
    }

    .brand-logo {
      width: 70px;
      height: 70px;
      object-fit: contain;
      flex-shrink: 0;
    }

    .nav-links {
      display: flex;
      gap: 2px;
      align-items: center;
      flex-wrap: wrap;
    }

    .nav-links a {
      font-weight: 500;
      color: var(--muted);
      padding: 8px 14px;
      border-radius: 8px;
      font-size: 14px;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .nav-links a:hover {
      color: #ffe9a6;
      background: rgba(201, 162, 39, 0.1);
    }

    .nav-links a[href*="dashboard"] {
      margin-left: 8px;
      padding: 8px 14px;
      border: 1px solid rgba(201, 162, 39, 0.4);
      border-radius: 8px;
      color: var(--ochre);
      transition: all 0.2s ease;
    }

    .nav-links a[href*="dashboard"]:hover {
      background: rgba(201, 162, 39, 0.15);
      border-color: var(--ochre);
    }

    .pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 18px;
      border-radius: 10px;
      border: 1px solid rgba(201, 162, 39, 0.4);
      color: #1b1b1b;
      background: #f8eecf;
      font-weight: 700;
      font-size: 14px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .pill:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(0,0,0,0.25);
    }

    .pill.secondary {
      background: transparent;
      color: var(--ochre);
      border-color: rgba(201, 162, 39, 0.5);
      font-weight: 600;
    }

    .pill.secondary:hover {
      background: rgba(201, 162, 39, 0.15);
      border-color: var(--ochre);
    }

    .hero {
      position: relative;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 32px;
      align-items: center;
      min-height: 100vh;
      padding: 140px 24px 96px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .hero::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-image: url('/atasteofafricanmarketplace/assets/images/boabab.jpeg');
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      z-index: -2;
      filter: blur(3px) brightness(0.5) opacity(0.4);
    }

    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(160deg, rgba(11, 61, 46, 0.8) 20%, rgba(11, 29, 24, 0.6) 60%, rgba(11, 29, 24, 0.9) 100%);
      z-index: -1;
    }



    .eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(201, 162, 39, 0.55); background: rgba(11, 61, 46, 0.6); color: #ffe9a6; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
    h1 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(38px, 5vw, 62px); line-height: 1.1; margin: 16px 0 12px; color: #fffaf0; }
    .lede { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 540px; }

    .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

    .glass-card {
      background: rgba(12, 33, 26, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: var(--glow);
      border-radius: 18px;
      padding: 22px;
      color: var(--cream);
      backdrop-filter: blur(10px);
    }

    .keeper-cloud { position: relative; min-height: 440px; }
    .keeper {
      position: absolute;
      width: 140px;
      height: 140px;
      border-radius: 999px;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.65), rgba(244,233,216,0.9));
      border: 2px solid rgba(201, 162, 39, 0.9);
      box-shadow: 0 12px 30px rgba(0,0,0,0.25), 0 0 24px rgba(201, 162, 39, 0.35);
      overflow: hidden;
      display: grid;
      place-items: center;
      animation: float 8s ease-in-out infinite;
      transform-origin: top center;
    }

    .keeper::before {
      content: '';
      position: absolute;
      top: -140px;
      left: 50%;
      width: 2px;
      height: 140px;
      transform: translateX(-50%);
      background: linear-gradient(to bottom, rgba(255, 233, 166, 0.35), rgba(201, 162, 39, 0.65));
      box-shadow: 0 0 10px rgba(201, 162, 39, 0.35);
      animation: sway 4.5s ease-in-out infinite;
      transform-origin: top center;
    }

    .keeper::after {
      content: '';
      position: absolute;
      top: -8px;
      left: 50%;
      width: 16px;
      height: 16px;
      transform: translate(-50%, -50%);
      background: radial-gradient(circle at 40% 40%, #ffe9a6, #c9a227 65%);
      border-radius: 50%;
      box-shadow: 0 0 12px rgba(201, 162, 39, 0.55);
      animation: sway 4.5s ease-in-out infinite;
      transform-origin: center;
    }

    .keeper img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05); }
    .keeper .label { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(11, 29, 24, 0.75); color: var(--cream); padding: 6px 10px; border-radius: 12px; font-size: 13px; border: 1px solid rgba(201, 162, 39, 0.5); }

    .keeper.k1 { top: 20%; left: 8%; animation-delay: 0s; }
    .keeper.k1::before { height: 130px; }
    .keeper.k2 { top: 12%; left: 55%; animation-delay: 1.2s; }
    .keeper.k2::before { height: 150px; }
    .keeper.k3 { top: 48%; left: 24%; animation-delay: 2.4s; }
    .keeper.k3::before { height: 120px; }
    .keeper.k4 { top: 52%; left: 70%; animation-delay: 3.6s; }
    .keeper.k4::before { height: 110px; }

    @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

    .lanterns { position: absolute; inset: 0; pointer-events: none; }
    .lantern { position: absolute; width: 12px; height: 18px; background: radial-gradient(circle at 50% 35%, #ffd384, #c48b21 65%); border-radius: 8px; box-shadow: 0 0 18px rgba(201, 162, 39, 0.7); animation: sway 4s ease-in-out infinite; opacity: 0.9; }
    .lantern.l1 { top: 14%; left: 32%; animation-delay: 0s; }
    .lantern.l2 { top: 18%; left: 48%; animation-delay: 1s; }
    .lantern.l3 { top: 22%; left: 64%; animation-delay: 1.8s; }
    @keyframes sway { 0%,100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }

    .section { max-width: 1200px; margin: 0 auto; padding: 40px 24px 90px; color: var(--cream); }
    .section h2 { font-family: 'Playfair Display', serif; font-size: 32px; margin: 0 0 12px; color: #fffaf0; }
    .section p.lead { color: var(--muted); max-width: 720px; line-height: 1.6; }

    .tree-section {
      position: relative;
      min-height: 700px;
      padding: 120px 24px 90px;
      background-image: url('/atasteofafricanmarketplace/assets/images/boabab.jpeg'), 
                        linear-gradient(180deg, rgba(11, 29, 24, 0.85) 0%, rgba(11, 61, 46, 0.75) 100%);
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;
      background-blend-mode: overlay;
    }

    .tree-section h2 { text-align: center; margin-bottom: 20px; }
    .tree-section p.lead { text-align: center; margin: 0 auto 40px; }

    .tree-filters {
      max-width: 600px;
      margin: 0 auto 40px;
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .search-input {
      flex: 1;
      padding: 12px 16px;
      border: 1px solid rgba(201, 162, 39, 0.3);
      background: rgba(11, 29, 24, 0.6);
      color: var(--cream);
      border-radius: 12px;
      font-size: 14px;
      outline: none;
      transition: all 0.3s ease;
    }

    .search-input::placeholder {
      color: var(--muted);
    }

    .search-input:focus {
      border-color: var(--ochre);
      background: rgba(11, 29, 24, 0.8);
      box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.1);
    }

    .filter-btn {
      padding: 12px 20px;
      background: transparent;
      border: 1px solid rgba(201, 162, 39, 0.4);
      color: var(--ochre);
      border-radius: 12px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      white-space: nowrap;
    }

    .filter-btn:hover {
      background: rgba(201, 162, 39, 0.1);
      border-color: var(--ochre);
    }

    .tree-legend {
      position: absolute;
      bottom: 20px;
      left: 20px;
      background: rgba(11, 29, 24, 0.95);
      border: 1px solid rgba(201, 162, 39, 0.4);
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
      z-index: 10;
    }

    .tree-legend h4 {
      margin: 0 0 12px;
      color: #ffe9a6;
      font-size: 14px;
      font-weight: 700;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      color: var(--cream);
      font-size: 12px;
    }

    .legend-item:last-child {
      margin-bottom: 0;
    }

    .legend-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.3);
    }

    .tree-container {
      position: relative;
      max-width: 1000px;
      margin: 0 auto;
      min-height: 550px;
    }

    .fruit {
      position: absolute;
      width: 85px;
      height: 95px;
      border-radius: 45% 45% 48% 48%;
      background: radial-gradient(ellipse at 35% 25%, rgba(218, 165, 105, 0.95), rgba(165, 115, 65, 0.9) 50%, rgba(120, 85, 50, 0.95));
      border: 2px solid rgba(120, 85, 50, 0.6);
      box-shadow: inset -5px -5px 12px rgba(0, 0, 0, 0.4), 
                  inset 10px 10px 25px rgba(255, 220, 170, 0.3),
                  0 15px 35px rgba(0,0,0,0.5), 
                  0 0 25px rgba(201, 162, 39, 0.3);
      overflow: visible;
      display: grid;
      place-items: center;
      animation: fruitSway 5s ease-in-out infinite;
      transform-origin: top center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .fruit:hover { 
      transform: scale(1.08) rotate(2deg); 
      box-shadow: inset -5px -5px 12px rgba(0, 0, 0, 0.4), 
                  inset 10px 10px 25px rgba(255, 220, 170, 0.4),
                  0 20px 45px rgba(0,0,0,0.6), 
                  0 0 35px rgba(201, 162, 39, 0.5);
    }

    .fruit:hover .fruit-tooltip {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(-10px);
    }

    .fruit-tooltip {
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%) translateY(0);
      background: rgba(11, 29, 24, 0.98);
      color: var(--cream);
      padding: 12px 16px;
      border-radius: 12px;
      border: 1px solid rgba(201, 162, 39, 0.6);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      pointer-events: none;
      z-index: 100;
      margin-bottom: 10px;
    }

    .fruit-tooltip::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: rgba(11, 29, 24, 0.98);
    }

    .tooltip-name {
      font-weight: 700;
      font-size: 14px;
      color: #ffe9a6;
      margin-bottom: 4px;
    }

    .tooltip-profession {
      font-size: 12px;
      color: var(--ochre);
      font-weight: 600;
    }

    .fruit::before {
      content: '';
      position: absolute;
      top: -50px;
      left: 50%;
      width: 2px;
      height: 50px;
      transform: translateX(-50%);
      background: linear-gradient(to bottom, rgba(101, 67, 33, 0.3), rgba(101, 67, 33, 0.7), rgba(120, 85, 50, 0.9));
      box-shadow: 0 0 6px rgba(101, 67, 33, 0.5);
    }

    .fruit::after {
      content: '';
      position: absolute;
      top: -5px;
      left: 50%;
      width: 12px;
      height: 12px;
      transform: translate(-50%, -50%);
      background: radial-gradient(circle at 35% 35%, rgba(139, 115, 85, 1), rgba(101, 67, 33, 0.9) 70%);
      border-radius: 50%;
      box-shadow: 0 0 8px rgba(101, 67, 33, 0.6), inset -3px -3px 6px rgba(0, 0, 0, 0.4);
    }

    .fruit img { 
      width: 90%; 
      height: 90%; 
      object-fit: cover; 
      border-radius: 50%;
      filter: saturate(1.1) brightness(1.05);
      border: 2px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      pointer-events: none;
    }
    .fruit .label {
      position: absolute;
      bottom: -30px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(11, 29, 24, 0.95);
      color: var(--cream);
      padding: 4px 8px;
      border-radius: 8px;
      font-size: 10px;
      font-weight: 600;
      border: 1px solid rgba(201, 162, 39, 0.7);
      white-space: nowrap;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

    .fruit.f1 { top: 15%; left: 15%; animation-delay: 0s; }
    .fruit.f1::before { height: 45px; }
    .fruit.f2 { top: 20%; left: 35%; animation-delay: 0.8s; }
    .fruit.f2::before { height: 55px; }
    .fruit.f3 { top: 17%; left: 58%; animation-delay: 1.6s; }
    .fruit.f3::before { height: 48px; }
    .fruit.f4 { top: 30%; left: 25%; animation-delay: 2.4s; }
    .fruit.f4::before { height: 60px; }
    .fruit.f5 { top: 34%; left: 48%; animation-delay: 3.2s; }
    .fruit.f5::before { height: 52px; }
    .fruit.f6 { top: 32%; left: 72%; animation-delay: 4s; }
    .fruit.f6::before { height: 58px; }

    @keyframes fruitSway {
      0%, 100% { transform: translateX(-3px) rotate(-1deg); }
      50% { transform: translateX(3px) rotate(1deg); }
    }

    .modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 100;
      background: rgba(11, 29, 24, 0.9);
      backdrop-filter: blur(8px);
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .modal.active { display: flex; }

    .modal-content {
      background: linear-gradient(135deg, rgba(11, 61, 46, 0.95), rgba(11, 29, 24, 0.98));
      border: 2px solid rgba(201, 162, 39, 0.6);
      border-radius: 24px;
      max-width: 500px;
      width: 100%;
      padding: 32px;
      position: relative;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(201, 162, 39, 0.3);
      animation: modalSlideIn 0.3s ease-out;
    }

    @keyframes modalSlideIn {
      from { transform: translateY(-50px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    .modal-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 36px;
      height: 36px;
      border: none;
      background: rgba(201, 162, 39, 0.2);
      color: var(--cream);
      font-size: 24px;
      border-radius: 50%;
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: all 0.2s ease;
    }

    .modal-close:hover {
      background: rgba(201, 162, 39, 0.4);
      transform: rotate(90deg);
    }

    .modal-header {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 24px;
      padding-bottom: 20px;
      border-bottom: 1px solid rgba(201, 162, 39, 0.3);
    }

    .modal-avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid rgba(201, 162, 39, 0.6);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    }

    .modal-title h3 {
      margin: 0 0 4px;
      font-family: 'Playfair Display', serif;
      font-size: 28px;
      color: #ffe9a6;
    }

    .modal-title p {
      margin: 0;
      color: var(--ochre);
      font-weight: 600;
      font-size: 14px;
    }

    .modal-body {
      color: var(--cream);
      line-height: 1.7;
    }

    .modal-body h4 {
      color: #ffe9a6;
      font-size: 16px;
      margin: 16px 0 8px;
      font-weight: 600;
    }

    .modal-body p {
      margin: 0 0 12px;
      color: var(--muted);
    }

    .modal-body ul {
      margin: 8px 0;
      padding-left: 20px;
      color: var(--muted);
    }

    .modal-body li {
      margin-bottom: 6px;
    }

    .modal-cta {
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1px solid rgba(201, 162, 39, 0.3);
      display: flex;
      gap: 12px;
    }

    .modal-cta .pill {
      flex: 1;
      justify-content: center;
    }

    .grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 26px; }
    .tile { background: rgba(11, 29, 24, 0.72); border: 1px solid rgba(201, 162, 39, 0.2); border-radius: 16px; padding: 18px; box-shadow: var(--glow); }
    .tile h3 { margin: 0 0 8px; color: #ffe9a6; }
    .tile p { margin: 0; color: var(--muted); line-height: 1.5; }

    .coaches-store {
      max-width: 1200px;
      margin: 0 auto;
      padding: 60px 24px 90px;
      color: var(--cream);
    }

    .coaches-store h2 {
      font-family: 'Playfair Display', serif;
      font-size: 36px;
      text-align: center;
      margin: 0 0 12px;
      color: #ffe9a6;
    }

    .coaches-store p.lead {
      text-align: center;
      color: var(--muted);
      max-width: 720px;
      margin: 0 auto 40px;
      line-height: 1.6;
    }

    .store-categories {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 24px;
      margin-top: 40px;
    }

    .store-category {
      background: rgba(11, 29, 24, 0.72);
      border: 1px solid rgba(201, 162, 39, 0.3);
      border-radius: 16px;
      overflow: hidden;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .store-category:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(201, 162, 39, 0.3);
      border-color: rgba(201, 162, 39, 0.6);
    }

    .category-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
      border-bottom: 1px solid rgba(201, 162, 39, 0.2);
    }

    .category-content {
      padding: 20px;
    }

    .category-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .category-title {
      font-size: 20px;
      font-weight: 700;
      color: #ffe9a6;
      margin: 0;
    }

    .category-badge {
      background: rgba(201, 162, 39, 0.2);
      color: var(--ochre);
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 600;
    }

    .category-description {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 16px;
    }

    .category-items {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 16px;
    }

    .item-tag {
      background: rgba(201, 162, 39, 0.15);
      color: var(--cream);
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 11px;
    }

    .category-cta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 16px;
      border-top: 1px solid rgba(201, 162, 39, 0.2);
    }

    .shop-btn {
      background: transparent;
      border: 1px solid rgba(201, 162, 39, 0.4);
      color: var(--ochre);
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .shop-btn:hover {
      background: rgba(201, 162, 39, 0.2);
      border-color: var(--ochre);
    }

    .store-banner {
      background: rgba(11, 61, 46, 0.6);
      border: 1px solid rgba(201, 162, 39, 0.3);
      border-radius: 16px;
      padding: 24px;
      margin-top: 40px;
      text-align: center;
    }

    .store-banner h3 {
      color: #ffe9a6;
      margin: 0 0 12px;
      font-size: 22px;
    }

    .store-banner p {
      color: var(--muted);
      margin: 0 0 20px;
    }

    footer { padding: 32px 24px 48px; background: rgba(5, 12, 10, 0.8); border-top: 1px solid rgba(201, 162, 39, 0.25); color: var(--muted); text-align: center; }

    @media (max-width: 800px) {
      header { padding: 14px 18px; }
      .nav { flex-direction: column; align-items: flex-start; gap: 10px; }
      .nav-links { flex-wrap: wrap; }
      .hero { padding-top: 120px; }
      .keeper-cloud { min-height: 360px; }
      .keeper { width: 120px; height: 120px; }
      .fruit { width: 70px; height: 80px; }
      .fruit .label { font-size: 9px; padding: 3px 6px; }
      .tree-container { min-height: 450px; }
    }
  </style>
</head>
<body>
  <header>
    <div class="nav">
      <div class="brand">
        <img src="assets/images/logo.png" alt="A Taste of Africa Marketplace logo" class="brand-logo" />
      </div>
      <div class="nav-links">
        <a href="#home">Home</a>
        <a href="#tree">Tree of Life</a>
        <a href="#coaches">All Coaches</a>
        <a href="#coaches-store">Coaches Store</a>
        <a href="#store">Apothecary</a>
      </div>
      <div class="nav-links">
        <a class="pill secondary" href="/atasteofafricanmarketplace/login-choice.php">Sign in</a>
        <a class="pill" href="/atasteofafricanmarketplace/intake.php">Begin Journey</a>
        <a href="/atasteofafricanmarketplace/superadmin-login.php" style="color: #666; font-size: 12px; margin-left: 10px;">Admin</a>
      </div>
    </div>
  </header>

  <main>
    <section class="hero" id="home">
      <div>
        <div class="eyebrow">Ancient Roots · Future Care</div>
        <h1><?= htmlspecialchars(hw_get_content('hero_title', 'Baobab guardians guiding you under a starlit sky.')) ?></h1>
        <p class="lede"><?= htmlspecialchars(hw_get_content('hero_subtitle', 'Curated practitioners, luminous rituals, and a secure apothecary built on integrity. Meet the Keepers, book with confidence, and step into a sanctuary where heritage and modern science glow together.')) ?></p>
        <div class="cta-row">
          <a class="pill" href="/atasteofafricanmarketplace/register.php">Meet your Keeper</a>
          <a class="pill secondary" href="/atasteofafricanmarketplace/index.php#tree">Explore the Tree</a>
        </div>
      </div>
      <div class="glass-card keeper-cloud" id="keepers">
        <div class="lanterns">
          <div class="lantern l1"></div>
          <div class="lantern l2"></div>
          <div class="lantern l3"></div>
        </div>
        <?php foreach (array_slice($tree_coaches, 0, 4) as $index => $coach): 
          $positions = ['k1', 'k2', 'k3', 'k4'];
          $pos = $positions[$index] ?? 'k1';
        ?>
        <div class="keeper <?= $pos ?>">
          <img src="<?= $coach['profile_image_url'] ?: 'https://i.pravatar.cc/240?u=' . urlencode($coach['display_name']) ?>" alt="<?= htmlspecialchars($coach['display_name']) ?>" />
          <div class="label"><?= htmlspecialchars($coach['display_name']) ?> · <?= htmlspecialchars($coach['specialties'][0] ?? 'Wellness') ?></div>
        </div>
        <?php endforeach; ?>
      </div>
    </section>

    <section class="tree-section" id="tree">
      <h2>Tree of Life</h2>
      <p class="lead">Verified practitioners. Ancestral expertise. Modern care.</p>
      
      <!-- Search and Quick Filters -->
      <div class="tree-filters">
        <input type="text" id="practitioner-search" placeholder="Search practitioners, specialties..." class="search-input" />
        <button class="filter-btn" onclick="window.location.href='/atasteofafricanmarketplace/tree-of-life.php'">View All Practitioners →</button>
      </div>

      <div class="tree-container">
        <!-- Tree Legend -->
        <div class="tree-legend">
          <h4>Wisdom Levels</h4>
          <div class="legend-item">
            <div class="legend-dot" style="background: #92400e;"></div>
            <span>Roots: Ancestral</span>
          </div>
          <div class="legend-item">
            <div class="legend-dot" style="background: #065f46;"></div>
            <span>Branches: Practice</span>
          </div>
          <div class="legend-item">
            <div class="legend-dot" style="background: #ea580c;"></div>
            <span>Fruits: Results</span>
          </div>
        </div>
        
        <?php foreach (array_slice($tree_coaches, 0, 6) as $index => $coach): 
          $positions = [
            ['class' => 'f1', 'top' => '15%', 'left' => '15%'],
            ['class' => 'f2', 'top' => '20%', 'left' => '35%'],
            ['class' => 'f3', 'top' => '17%', 'left' => '58%'],
            ['class' => 'f4', 'top' => '30%', 'left' => '25%'],
            ['class' => 'f5', 'top' => '34%', 'left' => '48%'],
            ['class' => 'f6', 'top' => '32%', 'left' => '72%']
          ];
          $pos = $positions[$index] ?? $positions[0];
          $coachKey = strtolower(str_replace(' ', '', $coach['display_name']));
        ?>
        <div class="fruit <?= $pos['class'] ?>" onclick="openModal('<?= $coachKey ?>')" style="top: <?= $pos['top'] ?>; left: <?= $pos['left'] ?>;">
          <div class="fruit-tooltip">
            <div class="tooltip-name"><?= htmlspecialchars($coach['display_name']) ?></div>
          </div>
          <img src="<?= $coach['profile_image_url'] ?: 'https://i.pravatar.cc/300?u=' . urlencode($coach['display_name']) ?>" alt="<?= htmlspecialchars($coach['display_name']) ?>" />
          <div class="label"><?= htmlspecialchars($coach['display_name']) ?></div>
        </div>
        <?php endforeach; ?>
      </div>
    </section>

    <section class="coaches-store" id="coaches-store">
      <h2>Wellness Coaches Store</h2>
      <p class="lead">Professional-grade supplies and tools for practitioners. Ethically sourced, verified quality, wholesale pricing for registered coaches.</p>
      
      <div class="store-categories">
        <div class="store-category" onclick="window.location.href='/atasteofafricanmarketplace/store.php?category=herbs'">
          <img src="https://images.unsplash.com/photo-1607619056574-7b8d3ee536b2?w=600&h=400&fit=crop" alt="Botanical Herbs" class="category-image" />
          <div class="category-content">
            <div class="category-header">
              <h3 class="category-title">Botanical Herbs</h3>
              <span class="category-badge">120+ Items</span>
            </div>
            <p class="category-description">Premium dried herbs, roots, and botanicals sourced from ethical wildcrafters and organic farms.</p>
            <div class="category-items">
              <span class="item-tag">Ashwagandha</span>
              <span class="item-tag">Holy Basil</span>
              <span class="item-tag">Reishi</span>
              <span class="item-tag">Chamomile</span>
              <span class="item-tag">Lavender</span>
            </div>
            <div class="category-cta">
              <span style="color: var(--muted); font-size: 13px;">From $8.50/oz</span>
              <button class="shop-btn">Shop Herbs →</button>
            </div>
          </div>
        </div>

        <div class="store-category" onclick="window.location.href='/atasteofafricanmarketplace/store.php?category=oils'">
          <img src="https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?w=600&h=400&fit=crop" alt="Essential Oils" class="category-image" />
          <div class="category-content">
            <div class="category-header">
              <h3 class="category-title">Essential Oils</h3>
              <span class="category-badge">85+ Items</span>
            </div>
            <p class="category-description">Therapeutic-grade essential oils and carrier oils. GC/MS tested, certified organic options available.</p>
            <div class="category-items">
              <span class="item-tag">Frankincense</span>
              <span class="item-tag">Myrrh</span>
              <span class="item-tag">Sandalwood</span>
              <span class="item-tag">Rose</span>
              <span class="item-tag">Jojoba</span>
            </div>
            <div class="category-cta">
              <span style="color: var(--muted); font-size: 13px;">From $12/15ml</span>
              <button class="shop-btn">Shop Oils →</button>
            </div>
          </div>
        </div>

        <div class="store-category" onclick="window.location.href='/atasteofafricanmarketplace/store.php?category=tools'">
          <img src="https://images.unsplash.com/photo-1612528443702-f6741f70a049?w=600&h=400&fit=crop" alt="Professional Tools" class="category-image" />
          <div class="category-content">
            <div class="category-header">
              <h3 class="category-title">Professional Tools</h3>
              <span class="category-badge">45+ Items</span>
            </div>
            <p class="category-description">High-quality tools for preparation and practice. Mortars, diffusers, measuring equipment, and more.</p>
            <div class="category-items">
              <span class="item-tag">Mortar & Pestle</span>
              <span class="item-tag">Diffusers</span>
              <span class="item-tag">Glass Bottles</span>
              <span class="item-tag">Measuring Tools</span>
            </div>
            <div class="category-cta">
              <span style="color: var(--muted); font-size: 13px;">From $15</span>
              <button class="shop-btn">Shop Tools →</button>
            </div>
          </div>
        </div>

        <div class="store-category" onclick="window.location.href='/atasteofafricanmarketplace/store.php?category=ceremonial'">
          <img src="https://images.unsplash.com/photo-1603739903239-8b6e64c3b185?w=600&h=400&fit=crop" alt="Ceremonial Items" class="category-image" />
          <div class="category-content">
            <div class="category-header">
              <h3 class="category-title">Ceremonial Items</h3>
              <span class="category-badge">30+ Items</span>
            </div>
            <p class="category-description">Sacred tools for ritual and ceremony. Ethically sourced, handcrafted by traditional artisans.</p>
            <div class="category-items">
              <span class="item-tag">Singing Bowls</span>
              <span class="item-tag">Sage Bundles</span>
              <span class="item-tag">Crystals</span>
              <span class="item-tag">Incense</span>
            </div>
            <div class="category-cta">
              <span style="color: var(--muted); font-size: 13px;">From $20</span>
              <button class="shop-btn">Shop Ceremonial →</button>
            </div>
          </div>
        </div>

        <div class="store-category" onclick="window.location.href='/atasteofafricanmarketplace/store.php?category=packaging'">
          <img src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?w=600&h=400&fit=crop" alt="Packaging Supplies" class="category-image" />
          <div class="category-content">
            <div class="category-header">
              <h3 class="category-title">Packaging Supplies</h3>
              <span class="category-badge">65+ Items</span>
            </div>
            <p class="category-description">Professional packaging for your custom formulations. Eco-friendly options, labels, and containers.</p>
            <div class="category-items">
              <span class="item-tag">Glass Jars</span>
              <span class="item-tag">Droppers</span>
              <span class="item-tag">Labels</span>
              <span class="item-tag">Bags</span>
            </div>
            <div class="category-cta">
              <span style="color: var(--muted); font-size: 13px;">From $0.50/unit</span>
              <button class="shop-btn">Shop Packaging →</button>
            </div>
          </div>
        </div>

        <div class="store-category" onclick="window.location.href='/atasteofafricanmarketplace/store.php?category=education'">
          <img src="https://images.unsplash.com/photo-1481627834876-b7833e8f5570?w=600&h=400&fit=crop" alt="Education Resources" class="category-image" />
          <div class="category-content">
            <div class="category-header">
              <h3 class="category-title">Education & Resources</h3>
              <span class="category-badge">25+ Items</span>
            </div>
            <p class="category-description">Reference materials, charts, and educational resources to support your practice and client education.</p>
            <div class="category-items">
              <span class="item-tag">Herb Charts</span>
              <span class="item-tag">Books</span>
              <span class="item-tag">Courses</span>
              <span class="item-tag">Templates</span>
            </div>
            <div class="category-cta">
              <span style="color: var(--muted); font-size: 13px;">From $10</span>
              <button class="shop-btn">Shop Resources →</button>
            </div>
          </div>
        </div>
      </div>

      <div class="store-banner">
        <h3>🌿 Wholesale Pricing for Registered Coaches</h3>
        <p>Register as a verified wellness coach to access wholesale pricing, bulk discounts, and exclusive practitioner-only products.</p>
        <a class="pill" href="/atasteofafricanmarketplace/register.php?type=coach">Apply for Wholesale Access</a>
      </div>
    </section>

    <section class="section" id="offerings">
      <h2>Offerings beneath the Baobab</h2>
      <p class="lead">Each branch reveals a new practice: somatic release, botanical rituals, restorative breath, and the apothecary’s curated remedies—guided by verified Keepers.</p>
      <div class="grid">
        <div class="tile">
          <h3>Somatic Reset</h3>
          <p>Unwind stored tension with guided touch and movement patterns attuned to your nervous system.</p>
        </div>
        <div class="tile">
          <h3>Botanical Pairings</h3>
          <p>Personalized formulations from ethically sourced herbs, paired with your Keeper’s protocol.</p>
        </div>
        <div class="tile">
          <h3>Breath & Sound</h3>
          <p>Lantern-lit sessions under the branches—slow breath, resonant sound, regulated calm.</p>
        </div>
        <div class="tile">
          <h3>Secure Apothecary</h3>
          <p>Order from the apothecary with traceable origins and sealed, climate-safe packaging.</p>
        </div>
      </div>
    </section>

    <section class="section" id="rituals">
      <h2>Rituals of light</h2>
      <p class="lead">Choose a ritual pathway to begin. Your Keeper meets you with warmth, precision, and a golden thread of accountability.</p>
      <div class="grid">
        <div class="tile">
          <h3>Dawn Grounding</h3>
          <p>20-minute audio + breath primer; pair with a micro-dose tonic from the apothecary.</p>
        </div>
        <div class="tile">
          <h3>Lantern Session</h3>
          <p>Live 1:1 with your Keeper; somatic scan, custom tea, and post-session plan.</p>
        </div>
        <div class="tile">
          <h3>Night Restorative</h3>
          <p>Slow stretches, warm oils, and sleep-forward botanicals tuned to your circadian rhythm.</p>
        </div>
      </div>
    </section>

    <section class="section" id="business-empowerment" style="position: relative; overflow: hidden; border-top: 2px solid rgba(201, 162, 39, 0.2); border-bottom: 2px solid rgba(201, 162, 39, 0.2); padding: 80px 24px;">
      <div style="position: absolute; inset: 0; background-image: url('/atasteofafricanmarketplace/assets/images/boabab.jpeg'); background-position: center; background-size: cover; filter: blur(5px) brightness(0.3) opacity(0.2); z-index: 0;"></div>
      <div style="position: absolute; inset: 0; background: linear-gradient(135deg, rgba(11, 61, 46, 0.8), rgba(201, 162, 39, 0.1)); z-index: 1;"></div>
      <div style="position: relative; z-index: 2;">
      <style>
        .wheel-container {
          position: relative;
          width: 600px;
          height: 600px;
          margin: 40px auto;
          border-radius: 50%;
          overflow: hidden;
        }
        .pie-segment {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          clip-path: polygon(50% 50%, 50% 0%, 85.4% 14.6%);
          cursor: pointer;
          transition: all 0.3s ease;
        }
        .pie-segment:hover {
          transform: scale(1.02);
          z-index: 10;
        }
        .pie-segment:nth-child(1) { transform: rotate(0deg); background: linear-gradient(135deg, #FF6B6B, #FF4757); }
        .pie-segment:nth-child(2) { transform: rotate(45deg); background: linear-gradient(135deg, #4ECDC4, #26D0CE); }
        .pie-segment:nth-child(3) { transform: rotate(90deg); background: linear-gradient(135deg, #45B7D1, #3742FA); }
        .pie-segment:nth-child(4) { transform: rotate(135deg); background: linear-gradient(135deg, #96CEB4, #2ED573); }
        .pie-segment:nth-child(5) { transform: rotate(180deg); background: linear-gradient(135deg, #FECA57, #FF9F43); }
        .pie-segment:nth-child(6) { transform: rotate(225deg); background: linear-gradient(135deg, #FF9FF3, #F368E0); }
        .pie-segment:nth-child(7) { transform: rotate(270deg); background: linear-gradient(135deg, #A55EEA, #8B5CF6); }
        .pie-segment:nth-child(8) { transform: rotate(315deg); background: linear-gradient(135deg, #26DE81, #20BF6B); }
        .segment-content {
          position: absolute;
          top: 20%;
          left: 70%;
          transform: translate(-50%, -50%);
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          color: white;
          font-weight: 600;
          text-shadow: 0 2px 4px rgba(0,0,0,0.5);
        }
        .segment-icon {
          font-size: 24px;
          margin-bottom: 6px;
        }
        .segment-title {
          font-size: 11px;
          font-weight: 700;
          line-height: 1.2;
        }
        .wheel-center {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 180px;
          height: 180px;
          background: linear-gradient(135deg, var(--ochre), #e6c65d);
          border-radius: 50%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          box-shadow: 0 8px 24px rgba(201, 162, 39, 0.35);
          z-index: 20;
          border: 6px solid var(--cream);
        }
        .wheel-center h3 {
          font-size: 18px;
          font-weight: 800;
          color: white;
          margin: 0 0 6px 0;
          text-align: center;
          text-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }
        .wheel-center p {
          font-size: 11px;
          color: rgba(255,255,255,0.95);
          margin: 0;
          text-align: center;
          font-weight: 600;
        }
        .service-legend {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
          margin-top: 40px;
          max-width: 800px;
          margin-left: auto;
          margin-right: auto;
        }
        .legend-item {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 12px 16px;
          background: rgba(11, 29, 24, 0.6);
          border: 1px solid rgba(201, 162, 39, 0.3);
          border-radius: 12px;
          transition: all 0.3s ease;
        }
        .legend-item:hover {
          background: rgba(11, 29, 24, 0.8);
          border-color: rgba(201, 162, 39, 0.6);
        }
        .legend-color {
          width: 16px;
          height: 16px;
          border-radius: 50%;
          flex-shrink: 0;
        }
        .legend-info h4 {
          margin: 0 0 4px 0;
          font-size: 14px;
          font-weight: 700;
          color: #ffe9a6;
        }
        .legend-info p {
          margin: 2px 0;
          font-size: 11px;
          color: var(--muted);
          font-weight: 500;
        }
        .legend-info a {
          color: var(--ochre);
          text-decoration: none;
          transition: color 0.2s ease;
        }
        .legend-info a:hover {
          color: #ffe9a6;
          text-decoration: underline;
        }
        .wheel-ball {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 90px;
          height: 90px;
          margin: -45px 0 0 -45px;
          animation: orbit-bounce var(--orbit-duration) linear infinite alternate;
          z-index: 8;
        }
        @keyframes orbit-bounce {
          0% { transform: rotate(-90deg) translateX(340px) rotate(90deg); }
          10% { transform: rotate(-90deg) translateX(150px) rotate(90deg); }
          25% { transform: rotate(0deg) translateX(340px) rotate(0deg); }
          35% { transform: rotate(0deg) translateX(150px) rotate(0deg); }
          50% { transform: rotate(90deg) translateX(340px) rotate(-90deg); }
          60% { transform: rotate(90deg) translateX(150px) rotate(-90deg); }
          75% { transform: rotate(180deg) translateX(340px) rotate(-180deg); }
          85% { transform: rotate(180deg) translateX(150px) rotate(-180deg); }
          100% { transform: rotate(270deg) translateX(340px) rotate(-270deg); }
        }
        .ball-content {
          width: 100%;
          height: 100%;
          background: var(--ball-color, radial-gradient(circle at 30% 30%, #fff7d1 0%, #e6c65d 40%, #c9a227 100%));
          border-radius: 50%;
          padding: 10px;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          box-shadow:
            0 8px 24px rgba(0, 0, 0, 0.12),
            0 0 24px var(--ball-shadow, rgba(201, 162, 39, 0.45)),
            inset 0 0 12px rgba(255, 255, 255, 0.35);
          border: 3px solid var(--ball-border, #f2df9a);
          cursor: pointer;
          transition: all 0.3s ease;
          animation: bounce 2.4s ease-in-out infinite;
          backdrop-filter: blur(2px);
        }
        .ball-content:hover {
          transform: scale(1.15) translateY(-5px);
          box-shadow:
            0 12px 32px var(--ball-shadow, rgba(201, 162, 39, 0.55)),
            0 0 32px var(--ball-shadow, rgba(201, 162, 39, 0.6)),
            inset 0 0 16px rgba(255, 255, 255, 0.45);
        }
        @keyframes bounce {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-15px); }
        }
        .ball-icon {
          width: 64px;
          height: 64px;
          background: transparent;
          border-radius: 50%;
          display: grid;
          place-items: center;
          margin-bottom: 0;
        }
        .ball-icon i {
          color: white;
          font-size: 36px;
          filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
        }
        .ball-title {
          display: none;
        }
        .glitter-title {
          font-size: 42px;
          margin-bottom: 20px;
          background: linear-gradient(90deg,
            #c9a227 0%,
            #e6c65d 25%,
            #ffd700 50%,
            #e6c65d 75%,
            #c9a227 100%);
          background-size: 200% 100%;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          animation: glitter-sweep 3s ease-in-out infinite alternate;
          font-weight: 700;
        }
        @keyframes glitter-sweep {
          0% { background-position: 0% 50%; }
          100% { background-position: 100% 50%; }
        }
      </style>
      
      <div style="max-width: 1200px; margin: 0 auto;">
        <div style="text-align: center; margin-bottom: 40px;">
          <div style="display: inline-block; padding: 8px 20px; background: rgba(201, 162, 39, 0.1); border-radius: 50px; margin-bottom: 16px;">
            <span style="color: var(--ochre); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 1px;">Premium Membership Benefits</span>
          </div>
          <h2 class="glitter-title">TOA Wellness Wheel – Business & Financial Empowerment</h2>
          <p class="lead" style="max-width: 800px; margin: 0 auto; font-size: 20px; line-height: 1.7;">Your membership goes beyond wellness—we empower your business growth, financial stability, and long-term prosperity through comprehensive professional services and strategic guidance.</p>
        </div>

        <div class="wheel-container">
          <!-- Center Hub -->
          <div class="wheel-center">
            <h3>TOA Wellness<br>Wheel</h3>
            <p>8 Pillars of Empowerment</p>
          </div>

          <!-- Pie Segments -->
          <?php foreach ($toa_services as $index => $service): 
            $rotation = $index * 45; // 8 services = 45 degrees each
          ?>
          <div class="pie-segment" data-service="<?= strtolower($service['service_name']) ?>" title="<?= htmlspecialchars($service['service_name']) ?>" style="transform: rotate(<?= $rotation ?>deg); background: linear-gradient(135deg, <?= $service['color_primary'] ?>, <?= $service['color_secondary'] ?>);">
            <div class="segment-content">
              <div class="segment-icon"><i class="<?= $service['icon'] ?: 'fas fa-circle' ?>"></i></div>
              <div class="segment-title"><?= htmlspecialchars($service['service_name']) ?></div>
            </div>
          </div>
          <?php endforeach; ?>
        </div>

        <!-- Service Legend -->
        <div class="service-legend">
          <?php 
          $current_service = '';
          foreach ($toa_services as $service): 
            // Get personnel for this service
            $service_personnel = array_filter($toa_personnel, function($p) use ($service) {
              return $p['service_id'] == $service['id'];
            });
          ?>
          <div class="legend-item">
            <div class="legend-color" style="background: linear-gradient(135deg, <?= $service['color_primary'] ?>, <?= $service['color_secondary'] ?>);"></div>
            <div class="legend-info">
              <h4><?= htmlspecialchars($service['service_name']) ?></h4>
              <?php foreach (array_slice($service_personnel, 0, 3) as $person): ?>
              <p><a href="<?= htmlspecialchars($person['website']) ?>" target="_blank"><?= htmlspecialchars($person['name']) ?></a></p>
              <?php endforeach; ?>
            </div>
          </div>
          <?php endforeach; ?>
        </div>

        <div style="margin-top: 60px; text-align: center; padding: 48px; background: var(--card); border-radius: 24px; box-shadow: var(--glow);">
          <h3 style="font-size: 28px; margin-bottom: 16px; color: var(--forest);">Empowerment Beyond Wellness</h3>
          <p style="color: var(--ink); opacity: 0.85; max-width: 700px; margin: 0 auto 32px; line-height: 1.7; font-size: 17px;">Join a community where holistic health meets financial prosperity. Our comprehensive membership provides the tools, guidance, and support you need to thrive in both wellness and business.</p>
          <div style="display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;">
            <a class="pill" href="/atasteofafricanmarketplace/register.php" style="font-size: 16px; padding: 14px 32px;">Become a Member</a>
            <a class="pill secondary" href="/atasteofafricanmarketplace/dashboard/user/membership.php" style="font-size: 16px; padding: 14px 32px;">Learn More About Membership</a>
          </div>
        </div>
      </div>
      </div>
    </section>

    <!-- All Coaches Section -->
    <section id="coaches" style="padding: 100px 24px 80px; position: relative; overflow: hidden;">
      <div style="position: absolute; inset: 0; background-image: url('/atasteofafricanmarketplace/assets/images/boabab.jpeg'); background-position: center; background-size: cover; filter: blur(4px) brightness(0.4) opacity(0.3); z-index: 0;"></div>
      <div style="position: absolute; inset: 0; background: rgba(11, 29, 24, 0.7); z-index: 1;"></div>
      <div style="position: relative; z-index: 2;">
      <style>
        .coaches-header {
          max-width: 900px;
          margin: 0 auto 60px;
          text-align: center;
        }
        .coaches-grid {
          max-width: 1280px;
          margin: 0 auto;
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
          gap: 24px;
        }
        .coach-card {
          background: rgba(244, 233, 216, 0.05);
          border: 1px solid rgba(201, 162, 39, 0.25);
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
          transition: all 0.3s ease;
          display: flex;
          flex-direction: column;
        }
        .coach-card:hover {
          transform: translateY(-8px);
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(201, 162, 39, 0.2);
          border-color: rgba(201, 162, 39, 0.4);
        }
        .coach-image {
          width: 100%;
          height: 240px;
          object-fit: cover;
          border-bottom: 1px solid rgba(201, 162, 39, 0.2);
        }
        .coach-content {
          padding: 20px;
          display: flex;
          flex-direction: column;
          gap: 12px;
          flex: 1;
        }
        .coach-header {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 8px;
        }
        .coach-name {
          font-family: 'Playfair Display', serif;
          font-size: 20px;
          font-weight: 700;
          color: #ffe9a6;
          margin: 0;
        }
        .rating {
          display: flex;
          gap: 2px;
          font-size: 12px;
          color: #fcd34d;
        }
        .coach-specialty {
          font-size: 13px;
          font-weight: 600;
          color: var(--ochre);
          text-transform: uppercase;
          letter-spacing: 0.05em;
        }
        .coach-bio {
          font-size: 13px;
          color: var(--muted);
          line-height: 1.5;
          margin: 8px 0;
        }
        .coach-stats {
          display: flex;
          gap: 16px;
          padding: 12px 0;
          border-top: 1px solid rgba(201, 162, 39, 0.15);
          border-bottom: 1px solid rgba(201, 162, 39, 0.15);
          font-size: 12px;
        }
        .stat {
          display: flex;
          flex-direction: column;
          gap: 2px;
        }
        .stat-value {
          font-weight: 700;
          color: var(--cream);
        }
        .stat-label {
          color: var(--muted);
          text-transform: uppercase;
          font-size: 10px;
        }
        .coach-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
          margin: 8px 0;
        }
        .tag {
          background: rgba(201, 162, 39, 0.15);
          color: var(--cream);
          padding: 4px 8px;
          border-radius: 6px;
          font-size: 11px;
          border: 1px solid rgba(201, 162, 39, 0.2);
        }
        .coach-actions {
          display: flex;
          gap: 10px;
          margin-top: auto;
        }
        .coach-actions button {
          flex: 1;
          padding: 10px 12px;
          border: none;
          border-radius: 8px;
          font-weight: 600;
          font-size: 13px;
          cursor: pointer;
          transition: all 0.2s ease;
        }
        .book-btn {
          background: var(--ochre);
          color: var(--forest);
        }
        .book-btn:hover {
          background: #e6c65d;
        }
        .profile-btn {
          background: transparent;
          border: 1px solid rgba(201, 162, 39, 0.4);
          color: var(--ochre);
        }
        .profile-btn:hover {
          background: rgba(201, 162, 39, 0.15);
        }
        .search-filter-bar {
          max-width: 800px;
          margin: 0 auto 40px;
          display: flex;
          gap: 12px;
          flex-wrap: wrap;
        }
        .search-filter-bar input,
        .search-filter-bar select {
          flex: 1;
          min-width: 200px;
          padding: 12px 16px;
          border: 1px solid rgba(201, 162, 39, 0.3);
          background: rgba(11, 29, 24, 0.6);
          color: var(--cream);
          border-radius: 12px;
          font-size: 14px;
          outline: none;
        }
        .search-filter-bar input::placeholder {
          color: var(--muted);
        }
        .search-filter-bar button {
          padding: 12px 24px;
          background: var(--ochre);
          color: var(--forest);
          border: none;
          border-radius: 12px;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s;
        }
        .search-filter-bar button:hover {
          background: #e6c65d;
        }
      </style>

      <div class="coaches-header">
        <div style="display: inline-flex; align-items: center; gap: 8px; background: rgba(11, 61, 46, 0.6); padding: 8px 16px; border-radius: 24px; margin-bottom: 24px; border: 1px solid rgba(201, 162, 39, 0.55);">
          <span style="width: 8px; height: 8px; background: var(--ochre); border-radius: 50%; animation: pulse 2s infinite;"></span>
          <span style="font-size: 10px; font-weight: 900; color: #ffe9a6; letter-spacing: 0.1em;">VERIFIED PRACTITIONERS</span>
        </div>
        <h2 style="font-family: 'Playfair Display', serif; font-size: clamp(32px, 5vw, 48px); font-weight: 700; color: #fffaf0; line-height: 1.1; margin-bottom: 16px;">
          Meet Your <span style="color: var(--ochre);">Wellness Guides</span>
        </h2>
        <p style="font-size: 18px; color: var(--muted); line-height: 1.6;">
          Browse our verified network of wellness practitioners. Each coach brings specialized expertise in botanical medicine, somatic practices, energy healing, and ceremonial guidance.
        </p>
      </div>

      <div class="search-filter-bar">
        <input type="text" id="coach-search" placeholder="Search by name or specialty..." />
        <select id="specialty-select">
          <option value="">All Specialties</option>
          <option value="herbalist">Herbalist</option>
          <option value="energy">Energy Healing</option>
          <option value="ritual">Ritual Guide</option>
          <option value="wellness">Wellness Coach</option>
        </select>
        <button onclick="filterCoaches()">Search</button>
      </div>

      <div class="coaches-grid" id="coaches-grid">
        <?php foreach ($all_coaches as $coach): ?>
        <div class="coach-card">
          <img src="<?= $coach['profile_image_url'] ?: 'https://i.pravatar.cc/300?u=' . urlencode($coach['display_name']) ?>" alt="<?= htmlspecialchars($coach['display_name']) ?>" class="coach-image" />
          <div class="coach-content">
            <div class="coach-header">
              <h3 class="coach-name"><?= htmlspecialchars($coach['display_name']) ?></h3>
              <div class="rating">★★★★★</div>
            </div>
            <div class="coach-specialty"><?= htmlspecialchars($coach['specialties'][0] ?? 'Wellness Coach') ?></div>
            <p class="coach-bio"><?= htmlspecialchars(substr($coach['bio'] ?: 'Professional wellness coach dedicated to your health journey.', 0, 120)) ?>...</p>
            <div class="coach-stats">
              <div class="stat">
                <div class="stat-value"><?= $coach['years_experience'] ?>+</div>
                <div class="stat-label">Years</div>
              </div>
              <div class="stat">
                <div class="stat-value"><?= number_format($coach['total_sessions']) ?>+</div>
                <div class="stat-label">Sessions</div>
              </div>
              <div class="stat">
                <div class="stat-value"><?= rand(95, 99) ?>%</div>
                <div class="stat-label">Satisfaction</div>
              </div>
            </div>
            <div class="coach-tags">
              <?php foreach (array_slice($coach['specialties'], 0, 3) as $specialty): ?>
                <span class="tag"><?= htmlspecialchars($specialty) ?></span>
              <?php endforeach; ?>
            </div>
            <div class="coach-actions">
              <button class="book-btn" onclick="window.location.href='/atasteofafricanmarketplace/book.php?coach=<?= urlencode($coach['display_name']) ?>'">Book Session</button>
              <button class="profile-btn" onclick="alert('Profile coming soon!')">View Profile</button>
            </div>
          </div>
        </div>
        <?php endforeach; ?>
      </div>
      </div>
    </section>

    <!-- Store/Apothecary Section -->
    <section id="store" style="padding: 100px 24px 80px; position: relative; overflow: hidden;">
      <div style="position: absolute; inset: 0; background-image: url('/atasteofafricanmarketplace/assets/images/boabab.jpeg'); background-position: center; background-size: cover; filter: blur(4px) brightness(0.4) opacity(0.3); z-index: 0;"></div>
      <div style="position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 29, 24, 0.5) 0%, rgba(11, 61, 46, 0.7) 100%); z-index: 1;"></div>
      <div style="position: relative; z-index: 2;">
      <style>
        @keyframes ping { 0% { transform: scale(1); opacity: 1; } 75%, 100% { transform: scale(2); opacity: 0; } }
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
        @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
        
        .cart-btn {
          position: relative;
          padding: 10px 18px;
          background: var(--ochre);
          color: var(--forest);
          border: none;
          border-radius: 10px;
          font-weight: 700;
          cursor: pointer;
          box-shadow: 0 4px 12px rgba(201, 162, 39, 0.3);
          transition: all 0.2s;
        }
        .cart-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 16px rgba(201, 162, 39, 0.4);
        }
        .cart-count {
          position: absolute;
          top: -8px;
          right: -8px;
          background: #ef4444;
          color: white;
          width: 22px;
          height: 22px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 11px;
          font-weight: 700;
          border: 2px solid var(--forest);
        }
        .product-card {
          background: rgba(11, 29, 24, 0.6);
          border: 1px solid rgba(201, 162, 39, 0.25);
          border-radius: 16px;
          overflow: hidden;
          transition: all 0.3s ease;
          cursor: pointer;
        }
        .product-card:hover {
          transform: translateY(-8px);
          border-color: rgba(201, 162, 39, 0.5);
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
        }
        .product-image {
          width: 100%;
          height: 240px;
          object-fit: cover;
          border-bottom: 1px solid rgba(201, 162, 39, 0.2);
        }
        .cat-btn {
          padding: 12px 24px;
          background: rgba(11, 29, 24, 0.6);
          color: var(--muted);
          border: 2px solid rgba(201, 162, 39, 0.3);
          border-radius: 10px;
          font-size: 11px;
          font-weight: 900;
          letter-spacing: 0.05em;
          transition: all 0.2s;
          cursor: pointer;
        }
        .cat-btn.active {
          background: var(--ochre);
          color: var(--forest);
          border-color: var(--ochre);
        }
      </style>

      <div style="max-width: 1280px; margin: 0 auto;">
        <div style="text-align: center; margin-bottom: 64px;">
          <div style="display: inline-flex; align-items: center; gap: 8px; background: rgba(11, 61, 46, 0.6); padding: 8px 16px; border-radius: 24px; margin-bottom: 24px; border: 1px solid rgba(201, 162, 39, 0.55);">
            <span style="width: 8px; height: 8px; background: var(--ochre); border-radius: 50%; animation: pulse 2s infinite;"></span>
            <span style="font-size: 10px; font-weight: 900; color: #ffe9a6; letter-spacing: 0.1em;">AUTHENTIC SOURCING</span>
          </div>
          
          <h2 style="font-family: 'Playfair Display', serif; font-size: clamp(32px, 6vw, 56px); font-weight: 700; color: #fffaf0; line-height: 1.1; margin-bottom: 24px;">
            The Heart of <span style="color: var(--ochre);">Wellness</span><br/>in Your Home
          </h2>
          
          <p style="font-size: 18px; color: var(--muted); max-width: 600px; margin: 0 auto 32px; line-height: 1.6;">
            Explore premium herbal products and wellness essentials sourced directly from trusted makers.
          </p>

          <div style="display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap;">
            <button class="pill">Shop Now →</button>
            <button class="cart-btn" onclick="toggleCart()">
              🛒 Cart
              <span class="cart-count" id="cart-count">0</span>
            </button>
          </div>
        </div>

        <div style="margin-bottom: 48px;">
          <div style="display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;">
            <button onclick="filterByCategory('')" class="cat-btn active" data-cat="">ALL</button>
            <button onclick="filterByCategory('beauty')" class="cat-btn" data-cat="beauty">BEAUTY</button>
            <button onclick="filterByCategory('food')" class="cat-btn" data-cat="food">FOOD</button>
            <button onclick="filterByCategory('wellness')" class="cat-btn" data-cat="wellness">WELLNESS</button>
          </div>
        </div>

        <div id="products-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px;"></div>
      </div>
      </div>
    </section>

    <!-- Cart Drawer -->
    <div id="cart-drawer" style="position: fixed; inset: 0; z-index: 2000; display: none;">
      <div style="position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7);" onclick="toggleCart()"></div>
      <div style="position: absolute; right: 0; top: 0; bottom: 0; width: 100%; max-width: 400px; background: rgba(11, 29, 24, 0.98); border-left: 2px solid rgba(201, 162, 39, 0.4); animation: slideIn 0.3s ease-out; display: flex; flex-direction: column; backdrop-filter: blur(12px);">
        <div style="padding: 24px; border-bottom: 1px solid rgba(201, 162, 39, 0.3); display: flex; align-items: center; justify-content: space-between;">
          <h2 style="font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: #fffaf0;">Your Cart</h2>
          <button onclick="toggleCart()" style="padding: 8px; font-size: 24px; color: var(--ochre); background: none; border: none; cursor: pointer; transition: transform 0.2s;">×</button>
        </div>
        <div id="cart-items" style="flex: 1; overflow-y: auto; padding: 24px;"></div>
        <div id="cart-summary" style="padding: 24px; border-top: 1px solid rgba(201, 162, 39, 0.3); background: rgba(11, 61, 46, 0.6); display: none;">
          <div style="display: flex; justify-content: space-between; margin-bottom: 16px; font-size: 14px; color: var(--muted);">
            <span>Subtotal</span>
            <span id="subtotal">$0.00</span>
          </div>
          <div style="display: flex; justify-content: space-between; margin-bottom: 20px; font-size: 18px; font-weight: 700; color: #fffaf0;">
            <span>Total</span>
            <span id="total">$0.00</span>
          </div>
          <button class="pill" style="width: 100%; justify-content: center; padding: 14px;">Proceed to Checkout</button>
        </div>
      </div>
    </div>

    <!-- Toast Notification -->
    <div id="toast" style="position: fixed; bottom: 24px; right: 24px; background: rgba(11, 61, 46, 0.95); color: #fffaf0; padding: 16px 24px; border-radius: 12px; border: 1px solid rgba(201, 162, 39, 0.4); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); display: none; z-index: 3000; backdrop-filter: blur(12px);">
      <div style="font-weight: 600;"></div>
    </div>
  </main>

  <footer>
    <div style="max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; gap: 32px; padding: 48px 24px;">
      <div>
        <h3 style="font-family: 'Playfair Display', serif; font-size: 24px; margin-bottom: 16px;">A Taste of Africa Marketplace</h3>
        <p style="color: var(--muted); max-width: 400px; line-height: 1.6;">Importing all-natural, chemical-free herbs and superfoods from Africa for holistic health and wellness.</p>
      </div>
      <div>
        <h4 style="font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--ochre);">CONTACT</h4>
        <p style="color: var(--cream); line-height: 1.8; margin: 0;">
          3130 Grants Lakes Blvd #19716<br>
          Sugar Land, TX 77479<br>
          <a href="tel:+14693001568" style="color: var(--ochre);">(469) 300-1568</a>
        </p>
      </div>
      <div>
        <h4 style="font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--ochre);">QUICK LINKS</h4>
        <div style="display: flex; flex-direction: column; gap: 8px;">
          <a href="#home" style="color: var(--cream); opacity: 0.9;">Home</a>
          <a href="/atasteofafricanmarketplace/store.php" style="color: var(--cream); opacity: 0.9;">Shop</a>
          <a href="/atasteofafricanmarketplace/book.php" style="color: var(--cream); opacity: 0.9;">Book Consultation</a>
        </div>
      </div>
    </div>
    <div style="text-align: center; padding: 24px; border-top: 1px solid rgba(201, 162, 39, 0.2); color: var(--muted); font-size: 14px;">
      © <span id="year"></span> A Taste of Africa Marketplace LLC · Owner: Latreetha Obende
    </div>
  </footer>

  <!-- Practitioner Modal -->
  <div class="modal" id="practitionerModal">
    <div class="modal-content">
      <button class="modal-close" onclick="closeModal()">&times;</button>
      <div class="modal-header">
        <img id="modalAvatar" class="modal-avatar" src="" alt="" />
        <div class="modal-title">
          <h3 id="modalName"></h3>
          <p id="modalSpecialty"></p>
        </div>
      </div>
      <div class="modal-body" id="modalBody"></div>
      <div class="modal-cta">
        <a class="pill" href="/atasteofafricanmarketplace/book.php">Book Session</a>
        <a class="pill secondary" onclick="closeModal()">Close</a>
      </div>
    </div>
  </div>

  <script>
    const yearEl = document.getElementById('year');
    if (yearEl) yearEl.textContent = new Date().getFullYear();

    // Search functionality
    const searchInput = document.getElementById('practitioner-search');
    if (searchInput) {
      searchInput.addEventListener('input', function(e) {
        const searchTerm = e.target.value.toLowerCase();
        const fruits = document.querySelectorAll('.fruit');
        
        fruits.forEach(fruit => {
          const label = fruit.querySelector('.label').textContent.toLowerCase();
          if (label.includes(searchTerm)) {
            fruit.style.display = 'grid';
            fruit.style.opacity = '1';
          } else {
            fruit.style.opacity = '0.3';
          }
        });
      });
    }

    const practitioners = {
      <?php foreach ($tree_coaches as $coach): 
        $coachKey = strtolower(str_replace(' ', '', $coach['display_name']));
        $specialty = $coach['specialties'][0] ?? 'Wellness Coach';
      ?>
      '<?= $coachKey ?>': {
        name: '<?= htmlspecialchars($coach['display_name']) ?>',
        specialty: '<?= htmlspecialchars($specialty) ?>',
        avatar: '<?= $coach['profile_image_url'] ?: 'https://i.pravatar.cc/300?u=' . urlencode($coach['display_name']) ?>',
        bio: '<?= htmlspecialchars($coach['bio'] ?: 'Professional wellness coach dedicated to your health journey.') ?>',
        expertise: <?= json_encode($coach['specialties']) ?>,
        approach: '<?= htmlspecialchars($coach['bio'] ?: 'Combines traditional wisdom with modern wellness practices to support your unique healing journey.') ?>'
      },
      <?php endforeach; ?>
    };

    function openModal(practitionerId) {
      const practitioner = practitioners[practitionerId];
      if (!practitioner) return;

      document.getElementById('modalAvatar').src = practitioner.avatar;
      document.getElementById('modalAvatar').alt = practitioner.name;
      document.getElementById('modalName').textContent = practitioner.name;
      document.getElementById('modalSpecialty').textContent = practitioner.specialty;
      
      const bodyHTML = `
        <p>${practitioner.bio}</p>
        <h4>Areas of Expertise</h4>
        <ul>
          ${practitioner.expertise.map(item => `<li>${item}</li>`).join('')}
        </ul>
        <h4>Approach</h4>
        <p>${practitioner.approach}</p>
      `;
      
      document.getElementById('modalBody').innerHTML = bodyHTML;
      document.getElementById('practitionerModal').classList.add('active');
      document.body.style.overflow = 'hidden';
    }

    function closeModal() {
      document.getElementById('practitionerModal').classList.remove('active');
      document.body.style.overflow = '';
    }

    // Close modal on background click
    document.getElementById('practitionerModal').addEventListener('click', function(e) {
      if (e.target === this) closeModal();
    });

    // Close modal on Escape key
    document.addEventListener('keydown', function(e) {
      if (e.key === 'Escape') closeModal();
    });

    // Coach filtering functionality
    function filterCoaches() {
      const search = document.getElementById('coach-search').value.toLowerCase();
      const specialty = document.getElementById('specialty-select').value.toLowerCase();
      const cards = document.querySelectorAll('.coach-card');

      cards.forEach(card => {
        const name = card.querySelector('.coach-name').textContent.toLowerCase();
        const specialtyText = card.querySelector('.coach-specialty').textContent.toLowerCase();
        const tags = Array.from(card.querySelectorAll('.tag')).map(t => t.textContent.toLowerCase());

        const matchesSearch = !search || name.includes(search) || specialtyText.includes(search) || tags.some(t => t.includes(search));
        const matchesSpecialty = !specialty || specialtyText.includes(specialty) || tags.some(t => t.includes(specialty));

        card.style.display = (matchesSearch && matchesSpecialty) ? '' : 'none';
      });
    }

    // Store functionality
    const PRODUCTS = [
      {id: 1, name: 'Moringa Powder', price: 24.99, category: 'wellness', image: 'https://images.unsplash.com/photo-1505944357793-36b0bdc7fe84?w=400&h=400&fit=crop', rating: 4.8, reviews: 124, benefits: ['Energy', 'Immunity', 'Antioxidants']},
      {id: 2, name: 'Hibiscus Tea', price: 18.50, category: 'food', image: 'https://images.unsplash.com/photo-1556679343-c7306c1976bc?w=400&h=400&fit=crop', rating: 4.9, reviews: 201, benefits: ['Heart Health', 'Vitamin C', 'Antioxidants']},
      {id: 3, name: 'Shea Butter Body Cream', price: 32.00, category: 'beauty', image: 'https://images.unsplash.com/photo-1571875257727-256c39da42af?w=400&h=400&fit=crop', rating: 4.7, reviews: 89, benefits: ['Moisturizing', 'Anti-aging', 'Natural']},
      {id: 4, name: 'Baobab Fruit Powder', price: 28.99, category: 'wellness', image: 'https://images.unsplash.com/photo-1505253468034-514d2507d914?w=400&h=400&fit=crop', rating: 4.6, reviews: 156, benefits: ['Vitamin C', 'Fiber', 'Digestive Health']},
      {id: 5, name: 'African Black Soap', price: 15.99, category: 'beauty', image: 'https://images.unsplash.com/photo-1608248543803-ba4f8c70ae0b?w=400&h=400&fit=crop', rating: 4.9, reviews: 312, benefits: ['Cleanses', 'Natural', 'All Skin Types']},
      {id: 6, name: 'Rooibos Tea Blend', price: 16.75, category: 'food', image: 'https://images.unsplash.com/photo-1594631252845-29fc4cc8cde9?w=400&h=400&fit=crop', rating: 4.8, reviews: 178, benefits: ['Caffeine-Free', 'Antioxidants', 'Relaxation']},
      {id: 7, name: 'Argan Oil Serum', price: 42.00, category: 'beauty', image: 'https://images.unsplash.com/photo-1570194071717-f7a93a6eff45?w=400&h=400&fit=crop', rating: 4.9, reviews: 267, benefits: ['Hair Care', 'Skin Care', 'Anti-aging']},
      {id: 8, name: 'Turmeric Root Powder', price: 19.99, category: 'wellness', image: 'https://images.unsplash.com/photo-1615485500834-bc10199bc727?w=400&h=400&fit=crop', rating: 4.7, reviews: 143, benefits: ['Anti-inflammatory', 'Immunity', 'Joint Health']},
    ];

    let cart = JSON.parse(localStorage.getItem('hw_cart') || '[]');
    let currentCategory = '';

    function renderProducts() {
      const filtered = currentCategory ? PRODUCTS.filter(p => p.category === currentCategory) : PRODUCTS;
      document.getElementById('products-grid').innerHTML = filtered.map(p => `
        <div class="product-card" onclick="alert('Product details for ${p.name}')">
          <img src="${p.image}" alt="${p.name}" class="product-image" />
          <div style="padding: 20px;">
            <h3 style="font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700; color: #ffe9a6; margin: 0 0 8px;">${p.name}</h3>
            <div style="font-size: 22px; font-weight: 700; color: var(--ochre); margin-bottom: 12px;">$${p.price.toFixed(2)}</div>
            <div style="display: flex; align-items: center; gap: 4px; margin-bottom: 12px; color: var(--ochre);">
              ${'★'.repeat(Math.floor(p.rating))}${'☆'.repeat(5-Math.floor(p.rating))}
              <span style="font-size: 11px; color: var(--muted); margin-left: 4px;">(${p.reviews})</span>
            </div>
            <div style="display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px;">
              ${p.benefits.map(b => `<span style="font-size: 9px; font-weight: 700; color: var(--forest); background: rgba(201, 162, 39, 0.3); padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(201, 162, 39, 0.4);">${b}</span>`).join('')}
            </div>
            <button onclick="addToCart(${p.id}); event.stopPropagation();" class="pill" style="width: 100%; justify-content: center;">
              ADD TO CART
            </button>
          </div>
        </div>
      `).join('');
    }

    function filterByCategory(cat) {
      currentCategory = cat;
      renderProducts();
      
      document.querySelectorAll('.cat-btn').forEach(btn => {
        if (btn.dataset.cat === cat) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });
    }

    function addToCart(id) {
      const product = PRODUCTS.find(p => p.id === id);
      const existing = cart.find(item => item.id === id);
      
      if (existing) existing.qty += 1;
      else cart.push({...product, qty: 1});
      
      localStorage.setItem('hw_cart', JSON.stringify(cart));
      updateCartDisplay();
      showToast(`${product.name} added to cart!`);
    }

    function updateCartDisplay() {
      document.getElementById('cart-count').textContent = cart.reduce((sum, item) => sum + item.qty, 0);
      
      const itemsEl = document.getElementById('cart-items');
      const summaryEl = document.getElementById('cart-summary');
      
      if (cart.length === 0) {
        itemsEl.innerHTML = '<div style="height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px;"><div style="font-size: 48px; opacity: 0.3;">🛒</div><p style="color: var(--muted);">Your cart is empty</p></div>';
        summaryEl.style.display = 'none';
      } else {
        itemsEl.innerHTML = cart.map(item => `
          <div style="display: flex; gap: 16px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid rgba(201, 162, 39, 0.2);">
            <img src="${item.image}" style="width: 80px; height: 80px; object-fit: cover; border-radius: 8px; flex-shrink: 0; border: 1px solid rgba(201, 162, 39, 0.3);" />
            <div style="flex: 1;">
              <h4 style="font-size: 14px; font-weight: 700; color: #fffaf0; margin-bottom: 4px;">${item.name}</h4>
              <p style="font-size: 12px; color: var(--ochre); margin-bottom: 8px;">$${item.price.toFixed(2)}</p>
              <div style="display: flex; align-items: center; gap: 8px;">
                <button onclick="updateQty(${item.id}, ${item.qty - 1})" style="width: 24px; height: 24px; background: rgba(201, 162, 39, 0.2); border: 1px solid rgba(201, 162, 39, 0.4); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--ochre); cursor: pointer;">−</button>
                <span style="font-weight: 700; min-width: 20px; text-align: center; color: #fffaf0;">${item.qty}</span>
                <button onclick="updateQty(${item.id}, ${item.qty + 1})" style="width: 24px; height: 24px; background: rgba(201, 162, 39, 0.2); border: 1px solid rgba(201, 162, 39, 0.4); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--ochre); cursor: pointer;">+</button>
                <button onclick="removeFromCart(${item.id})" style="margin-left: auto; color: #ef4444; font-size: 18px; background: none; border: none; cursor: pointer;">🗑</button>
              </div>
            </div>
          </div>
        `).join('');
        
        const subtotal = cart.reduce((sum, item) => sum + (item.price * item.qty), 0);
        document.getElementById('subtotal').textContent = '$' + subtotal.toFixed(2);
        document.getElementById('total').textContent = '$' + subtotal.toFixed(2);
        summaryEl.style.display = 'block';
      }
    }

    function updateQty(id, newQty) {
      if (newQty < 1) return removeFromCart(id);
      const item = cart.find(i => i.id === id);
      if (item) {
        item.qty = newQty;
        localStorage.setItem('hw_cart', JSON.stringify(cart));
        updateCartDisplay();
      }
    }

    function removeFromCart(id) {
      cart = cart.filter(item => item.id !== id);
      localStorage.setItem('hw_cart', JSON.stringify(cart));
      updateCartDisplay();
    }

    function toggleCart() {
      const drawer = document.getElementById('cart-drawer');
      drawer.style.display = drawer.style.display === 'none' ? 'block' : 'none';
    }

    function showToast(msg) {
      const toast = document.getElementById('toast');
      toast.querySelector('div').textContent = msg;
      toast.style.display = 'block';
      setTimeout(() => toast.style.display = 'none', 3000);
    }

    // Initialize store
    renderProducts();
    updateCartDisplay();

    // Allow Enter key to search coaches
    document.getElementById('coach-search')?.addEventListener('keypress', function(e) {
      if (e.key === 'Enter') filterCoaches();
    });

    // Smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
          target.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
      });
    });
  </script>
</body>
</html>
