<?php
require_once __DIR__ . '/../../api/lib.php';
hw_require_auth(['client']);
$authUser = hw_get_auth_user();

// CHECK MEMBERSHIP
$db = hw_db();
$membershipStmt = $db->prepare("SELECT id, plan_type, expires_at FROM user_memberships WHERE user_id = ? AND status = 'active' AND expires_at > NOW() LIMIT 1");
$membershipStmt->execute([$authUser['id']]);
if (!$membershipStmt->fetch()) {
    header('Location: /files/atasteofafricanmarketplace/dashboard/user/choose-plan.php');
    exit;
}

$page_title = 'My Membership | Herbal Wellness Care';
$page_description = 'View and manage your membership';
$page_content = function () use ($authUser) {
$db = hw_db();

// Get active membership
$membershipStmt = $db->prepare("SELECT * FROM user_memberships WHERE user_id = ? AND status = 'active' AND expires_at > NOW() ORDER BY expires_at DESC LIMIT 1");
$membershipStmt->execute([$authUser['id']]);
$activeMembership = $membershipStmt->fetch(PDO::FETCH_ASSOC);
?>
<style>
  nav.fixed { 
    display: none !important; 
    visibility: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
    z-index: -1 !important;
  }
  body > nav { 
    display: none !important; 
    visibility: hidden !important;
  }
  body {
    padding-top: 0 !important;
  }
</style>
<link rel="stylesheet" href="/files/atasteofafricanmarketplace/assets/dashboard.css">

<div class="dashboard-container">
  <!-- Sidebar -->
  <div class="dashboard-sidebar">
    <div class="sidebar-header">
      <div class="sidebar-profile">
        <div class="profile-avatar">
          <?= strtoupper(substr($authUser['first_name'], 0, 1) . substr($authUser['last_name'], 0, 1)) ?>
        </div>
        <div class="profile-info">
          <h3><?= htmlspecialchars($authUser['first_name'] . ' ' . $authUser['last_name']) ?></h3>
          <p>Wellness Member</p>
        </div>
      </div>
    </div>
    <nav class="sidebar-nav">
      <a href="/files/atasteofafricanmarketplace/dashboard/user/index.php"><i class="fas fa-home"></i>Home</a>
      <a href="/files/atasteofafricanmarketplace/dashboard/user/appointments.php"><i class="fas fa-calendar-check"></i>Appointments</a>
      <a href="/files/atasteofafricanmarketplace/dashboard/user/messages.php"><i class="fas fa-comments"></i>Messages</a>
      <a href="/files/atasteofafricanmarketplace/dashboard/user/records.php"><i class="fas fa-file-medical"></i>Records</a>
      <a href="/files/atasteofafricanmarketplace/dashboard/user/profile.php"><i class="fas fa-user"></i>Profile & Support</a>
      <hr class="sidebar-divider">
      <a href="/files/atasteofafricanmarketplace/store.php"><i class="fas fa-store"></i>Wellness Store</a>
      <a href="/files/atasteofafricanmarketplace/dashboard/user/membership.php" class="active"><i class="fas fa-crown"></i>My Membership</a>
      <a href="/files/atasteofafricanmarketplace/dashboard/user/billing.php"><i class="fas fa-file-invoice-dollar"></i>Billing</a>
      <hr class="sidebar-divider">
      <a href="/files/atasteofafricanmarketplace/index.php"><i class="fas fa-arrow-left"></i>Back to Home</a>
    </nav>
    <div class="sidebar-footer">
      <a href="/files/atasteofafricanmarketplace/api/auth/logout.php" style="display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,0.7); text-decoration: none; font-size: 13px; font-weight: 500; padding: 10px 0; border-top: 1px solid rgba(212, 173, 49, 0.15); transition: all 0.3s;"><i class="fas fa-sign-out-alt"></i>Sign Out</a>
    </div>
  </div>

  <!-- Main Content -->
  <div class="dashboard-content">
    <main>
      <!-- Header -->
      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; flex-wrap: wrap; gap: 16px;">
        <div>
          <h1 style="font-size: 32px; font-weight: 800; color: #0b3d2e; margin: 0 0 8px 0;">My Membership</h1>
          <p style="font-size: 16px; color: #64748b; margin: 0;">Manage your wellness plan and benefits</p>
        </div>
      </div>

      <!-- Current Membership Card -->
      <?php if ($activeMembership): 
        $daysRemaining = floor((strtotime($activeMembership['expires_at']) - time()) / 86400);
        $planName = ucfirst($activeMembership['plan_type']);
        $isPremium = $activeMembership['plan_type'] === 'family';
      ?>
      <div style="background: linear-gradient(135deg, <?= $isPremium ? '#d4ad31' : '#0f5240' ?> 0%, <?= $isPremium ? '#c9a227' : '#146651' ?> 100%); padding: 32px; border-radius: 16px; margin-bottom: 32px; box-shadow: 0 8px 24px rgba(<?= $isPremium ? '212, 173, 49' : '15, 82, 64' ?>, 0.3); position: relative; overflow: hidden;">
        <div style="position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; background: rgba(255, 255, 255, 0.05); border-radius: 50%;"></div>
        <div style="position: absolute; bottom: -80px; left: -80px; width: 250px; height: 250px; background: rgba(255, 255, 255, 0.03); border-radius: 50%;"></div>
        
        <div style="display: flex; justify-content: space-between; align-items: start; position: relative; z-index: 1; flex-wrap: wrap; gap: 24px;">
          <div style="flex: 1; min-width: 300px;">
            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
              <i class="fas fa-crown" style="font-size: 32px; color: white;"></i>
              <div>
                <h2 style="font-size: 28px; font-weight: 800; color: white; margin: 0;">
                  <?= $planName ?> Plan
                </h2>
                <p style="color: rgba(255, 255, 255, 0.9); margin: 4px 0 0 0; font-size: 15px;">Active Membership</p>
              </div>
            </div>
            
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-top: 24px;">
              <div style="background: rgba(255, 255, 255, 0.15); padding: 16px; border-radius: 12px; backdrop-filter: blur(10px);">
                <p style="color: rgba(255, 255, 255, 0.9); font-size: 13px; margin: 0 0 6px 0; font-weight: 600;">Status</p>
                <p style="color: white; font-size: 18px; font-weight: 700; margin: 0; text-transform: uppercase;"><?= $activeMembership['status'] ?></p>
              </div>
              
              <div style="background: rgba(255, 255, 255, 0.15); padding: 16px; border-radius: 12px; backdrop-filter: blur(10px);">
                <p style="color: rgba(255, 255, 255, 0.9); font-size: 13px; margin: 0 0 6px 0; font-weight: 600;">Expires In</p>
                <p style="color: white; font-size: 18px; font-weight: 700; margin: 0;"><?= $daysRemaining ?> Days</p>
              </div>
              
              <div style="background: rgba(255, 255, 255, 0.15); padding: 16px; border-radius: 12px; backdrop-filter: blur(10px);">
                <p style="color: rgba(255, 255, 255, 0.9); font-size: 13px; margin: 0 0 6px 0; font-weight: 600;">Renewal Date</p>
                <p style="color: white; font-size: 14px; font-weight: 700; margin: 0;"><?= date('M d, Y', strtotime($activeMembership['expires_at'])) ?></p>
              </div>
            </div>
          </div>
          
          <div style="display: flex; flex-direction: column; gap: 12px;">
            <button onclick="managePlan()" style="background: white; color: <?= $isPremium ? '#c9a227' : '#0f5240' ?>; padding: 14px 28px; border-radius: 10px; font-size: 15px; font-weight: 700; border: none; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transition: all 0.3s; white-space: nowrap;">
              <i class="fas fa-edit"></i> Manage Plan
            </button>
            <button onclick="viewBilling()" style="background: rgba(255, 255, 255, 0.2); color: white; padding: 14px 28px; border-radius: 10px; font-size: 15px; font-weight: 700; border: 2px solid rgba(255, 255, 255, 0.3); cursor: pointer; backdrop-filter: blur(10px); transition: all 0.3s; white-space: nowrap;">
              <i class="fas fa-file-invoice-dollar"></i> View Billing
            </button>
          </div>
        </div>
      </div>
      <?php else: ?>
      <!-- No Active Membership -->
      <div style="background: white; padding: 40px; border-radius: 16px; margin-bottom: 32px; text-align: center; border: 2px dashed #e5e7eb;">
        <div style="width: 80px; height: 80px; background: linear-gradient(135deg, #f0f9f6, #fef9e7); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;">
          <i class="fas fa-crown" style="font-size: 36px; color: #d4ad31;"></i>
        </div>
        <h3 style="font-size: 22px; color: #0b3d2e; margin: 0 0 12px 0; font-weight: 700;">No Active Membership</h3>
        <p style="color: #64748b; margin: 0 0 24px 0; max-width: 500px; margin-left: auto; margin-right: auto;">
          Choose a plan below to unlock premium wellness features and personalized coaching
        </p>
      </div>
      <?php endif; ?>

      <!-- Family Members Section (Only for Family Plan) -->
      <?php if ($activeMembership && $activeMembership['plan_type'] === 'family'): ?>
      <div style="background: white; padding: 32px; border-radius: 16px; margin-bottom: 32px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); border: 2px solid #f0f9f6;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 16px;">
          <div>
            <h3 style="font-size: 20px; font-weight: 700; color: #0b3d2e; margin: 0 0 8px 0; display: flex; align-items: center; gap: 12px;">
              <i class="fas fa-users" style="color: #d4ad31;"></i>
              Family Members
            </h3>
            <p style="color: #64748b; margin: 0; font-size: 14px;">Manage up to 5 family members on your plan</p>
          </div>
          <button onclick="openAddMemberModal()" style="background: linear-gradient(135deg, #0f5240, #146651); color: white; padding: 12px 24px; border-radius: 10px; font-size: 14px; font-weight: 700; border: none; cursor: pointer; box-shadow: 0 4px 12px rgba(15, 82, 64, 0.3); transition: all 0.3s; display: flex; align-items: center; gap: 8px;">
            <i class="fas fa-plus-circle"></i> Add Member
          </button>
        </div>

        <div id="family-members-list" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px;">
          <!-- Family members will be loaded here -->
          <div style="background: linear-gradient(135deg, #f0f9f6, #fef9e7); padding: 24px; border-radius: 12px; border: 2px dashed #d4ad31; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 160px;">
            <i class="fas fa-user-plus" style="font-size: 36px; color: #d4ad31; margin-bottom: 12px;"></i>
            <p style="color: #64748b; margin: 0; font-size: 14px;">Add your first family member to get started</p>
          </div>
        </div>
      </div>
      <?php endif; ?>

      <!-- Membership Benefits -->
      <div style="background: linear-gradient(135deg, #f0f9f6 0%, #fef9e7 100%); padding: 32px; border-radius: 16px; margin-bottom: 32px; border: 2px solid #d4ad31;">
        <h3 style="font-size: 20px; font-weight: 700; color: #0b3d2e; margin: 0 0 24px 0; display: flex; align-items: center; gap: 12px;">
          <i class="fas fa-gift" style="color: #d4ad31;"></i>
          Your Current Benefits
        </h3>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
          <div style="background: white; padding: 20px; border-radius: 12px; display: flex; gap: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);">
            <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #10b981, #059669); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
              <i class="fas fa-video" style="color: white; font-size: 20px;"></i>
            </div>
            <div>
              <h4 style="font-size: 16px; font-weight: 700; color: #0b3d2e; margin: 0 0 6px 0;">Video Consultations</h4>
              <p style="color: #64748b; margin: 0; font-size: 14px;"><?= $activeMembership && $activeMembership['plan_type'] === 'family' ? 'Unlimited' : '4 per month' ?></p>
            </div>
          </div>

          <div style="background: white; padding: 20px; border-radius: 12px; display: flex; gap: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);">
            <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #3b82f6, #2563eb); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
              <i class="fas fa-comments" style="color: white; font-size: 20px;"></i>
            </div>
            <div>
              <h4 style="font-size: 16px; font-weight: 700; color: #0b3d2e; margin: 0 0 6px 0;">Coach Messaging</h4>
              <p style="color: #64748b; margin: 0; font-size: 14px;">Unlimited messaging</p>
            </div>
          </div>

          <div style="background: white; padding: 20px; border-radius: 12px; display: flex; gap: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);">
            <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #8b5cf6, #7c3aed); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
              <i class="fas fa-heartbeat" style="color: white; font-size: 20px;"></i>
            </div>
            <div>
              <h4 style="font-size: 16px; font-weight: 700; color: #0b3d2e; margin: 0 0 6px 0;">Health Records</h4>
              <p style="color: #64748b; margin: 0; font-size: 14px;">Secure cloud storage</p>
            </div>
          </div>

          <div style="background: white; padding: 20px; border-radius: 12px; display: flex; gap: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);">
            <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #f59e0b, #d97706); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
              <i class="fas fa-leaf" style="color: white; font-size: 20px;"></i>
            </div>
            <div>
              <h4 style="font-size: 16px; font-weight: 700; color: #0b3d2e; margin: 0 0 6px 0;">Store Discount</h4>
              <p style="color: #64748b; margin: 0; font-size: 14px;"><?= $activeMembership && $activeMembership['plan_type'] === 'family' ? '15%' : '10%' ?> off products</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Available Plans -->
      <div style="margin-bottom: 32px;">
        <h3 style="font-size: 24px; font-weight: 700; color: #0b3d2e; margin: 0 0 24px 0;">Available Plans</h3>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px;">
          <!-- Personal Plan -->
          <div style="background: white; padding: 32px; border-radius: 16px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); border: 2px solid <?= $activeMembership && $activeMembership['plan_type'] === 'personal' ? '#0f5240' : '#e5e7eb' ?>; position: relative; transition: all 0.3s;">
            <?php if ($activeMembership && $activeMembership['plan_type'] === 'personal'): ?>
            <div style="position: absolute; top: 16px; right: 16px; background: #10b981; color: white; padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase;">
              Current Plan
            </div>
            <?php endif; ?>
            
            <div style="margin-bottom: 24px;">
              <div style="width: 64px; height: 64px; background: linear-gradient(135deg, #0f5240, #146651); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;">
                <i class="fas fa-user" style="color: white; font-size: 28px;"></i>
              </div>
              <h4 style="font-size: 24px; font-weight: 800; color: #0b3d2e; margin: 0 0 8px 0;">Personal</h4>
              <div style="display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px;">
                <span style="font-size: 40px; font-weight: 800; color: #0f5240;">$49</span>
                <span style="color: #64748b; font-size: 16px;">/month</span>
              </div>
              <p style="color: #64748b; margin: 0; font-size: 14px;">Perfect for individual wellness journeys</p>
            </div>

            <ul style="list-style: none; padding: 0; margin: 0 0 24px 0; display: flex; flex-direction: column; gap: 12px;">
              <li style="display: flex; align-items: start; gap: 10px; color: #0b3d2e; font-size: 14px;">
                <i class="fas fa-check-circle" style="color: #10b981; margin-top: 2px; flex-shrink: 0;"></i>
                <span>4 video consultations per month</span>
              </li>
              <li style="display: flex; align-items: start; gap: 10px; color: #0b3d2e; font-size: 14px;">
                <i class="fas fa-check-circle" style="color: #10b981; margin-top: 2px; flex-shrink: 0;"></i>
                <span>Unlimited coach messaging</span>
              </li>
              <li style="display: flex; align-items: start; gap: 10px; color: #0b3d2e; font-size: 14px;">
                <i class="fas fa-check-circle" style="color: #10b981; margin-top: 2px; flex-shrink: 0;"></i>
                <span>Personal health records</span>
              </li>
              <li style="display: flex; align-items: start; gap: 10px; color: #0b3d2e; font-size: 14px;">
                <i class="fas fa-check-circle" style="color: #10b981; margin-top: 2px; flex-shrink: 0;"></i>
                <span>10% store discount</span>
              </li>
              <li style="display: flex; align-items: start; gap: 10px; color: #0b3d2e; font-size: 14px;">
                <i class="fas fa-check-circle" style="color: #10b981; margin-top: 2px; flex-shrink: 0;"></i>
                <span>Wellness resources</span>
              </li>
            </ul>

            <button onclick="selectPlan('personal')" style="width: 100%; background: <?= $activeMembership && $activeMembership['plan_type'] === 'personal' ? '#e5e7eb' : 'linear-gradient(135deg, #0f5240, #146651)' ?>; color: <?= $activeMembership && $activeMembership['plan_type'] === 'personal' ? '#64748b' : 'white' ?>; padding: 14px; border-radius: 10px; font-size: 15px; font-weight: 700; border: none; cursor: <?= $activeMembership && $activeMembership['plan_type'] === 'personal' ? 'not-allowed' : 'pointer' ?>; transition: all 0.3s; box-shadow: <?= $activeMembership && $activeMembership['plan_type'] === 'personal' ? 'none' : '0 4px 12px rgba(15, 82, 64, 0.3)' ?>;">
              <?= $activeMembership && $activeMembership['plan_type'] === 'personal' ? 'Current Plan' : 'Select Plan' ?>
            </button>
          </div>

          <!-- Family Plan -->
          <div style="background: white; padding: 32px; border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); border: 2px solid <?= $activeMembership && $activeMembership['plan_type'] === 'family' ? '#d4ad31' : '#d4ad31' ?>; position: relative; transform: scale(1.05); transition: all 0.3s;">
            <div style="position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #d4ad31, #c9a227); color: white; padding: 6px 20px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; box-shadow: 0 4px 8px rgba(212, 173, 49, 0.3);">
              Most Popular
            </div>
            
            <?php if ($activeMembership && $activeMembership['plan_type'] === 'family'): ?>
            <div style="position: absolute; top: 16px; right: 16px; background: #10b981; color: white; padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase;">
              Current Plan
            </div>
            <?php endif; ?>
            
            <div style="margin-bottom: 24px;">
              <div style="width: 64px; height: 64px; background: linear-gradient(135deg, #d4ad31, #c9a227); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;">
                <i class="fas fa-users" style="color: white; font-size: 28px;"></i>
              </div>
              <h4 style="font-size: 24px; font-weight: 800; color: #0b3d2e; margin: 0 0 8px 0;">Family</h4>
              <div style="display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px;">
                <span style="font-size: 40px; font-weight: 800; color: #d4ad31;">$99</span>
                <span style="color: #64748b; font-size: 16px;">/month</span>
              </div>
              <p style="color: #64748b; margin: 0; font-size: 14px;">Complete wellness for your whole family</p>
            </div>

            <ul style="list-style: none; padding: 0; margin: 0 0 24px 0; display: flex; flex-direction: column; gap: 12px;">
              <li style="display: flex; align-items: start; gap: 10px; color: #0b3d2e; font-size: 14px;">
                <i class="fas fa-check-circle" style="color: #d4ad31; margin-top: 2px; flex-shrink: 0;"></i>
                <span><strong>Unlimited</strong> video consultations</span>
              </li>
              <li style="display: flex; align-items: start; gap: 10px; color: #0b3d2e; font-size: 14px;">
                <i class="fas fa-check-circle" style="color: #d4ad31; margin-top: 2px; flex-shrink: 0;"></i>
                <span>Up to 5 family members</span>
              </li>
              <li style="display: flex; align-items: start; gap: 10px; color: #0b3d2e; font-size: 14px;">
                <i class="fas fa-check-circle" style="color: #d4ad31; margin-top: 2px; flex-shrink: 0;"></i>
                <span>Priority scheduling</span>
              </li>
              <li style="display: flex; align-items: start; gap: 10px; color: #0b3d2e; font-size: 14px;">
                <i class="fas fa-check-circle" style="color: #d4ad31; margin-top: 2px; flex-shrink: 0;"></i>
                <span>15% store discount</span>
              </li>
              <li style="display: flex; align-items: start; gap: 10px; color: #0b3d2e; font-size: 14px;">
                <i class="fas fa-check-circle" style="color: #d4ad31; margin-top: 2px; flex-shrink: 0;"></i>
                <span>Personalized wellness plans</span>
              </li>
              <li style="display: flex; align-items: start; gap: 10px; color: #0b3d2e; font-size: 14px;">
                <i class="fas fa-check-circle" style="color: #d4ad31; margin-top: 2px; flex-shrink: 0;"></i>
                <span>24/7 coach support</span>
              </li>
            </ul>

            <button onclick="selectPlan('family')" style="width: 100%; background: <?= $activeMembership && $activeMembership['plan_type'] === 'family' ? '#e5e7eb' : 'linear-gradient(135deg, #d4ad31, #c9a227)' ?>; color: <?= $activeMembership && $activeMembership['plan_type'] === 'family' ? '#64748b' : 'white' ?>; padding: 14px; border-radius: 10px; font-size: 15px; font-weight: 700; border: none; cursor: <?= $activeMembership && $activeMembership['plan_type'] === 'family' ? 'not-allowed' : 'pointer' ?>; transition: all 0.3s; box-shadow: <?= $activeMembership && $activeMembership['plan_type'] === 'family' ? 'none' : '0 4px 12px rgba(212, 173, 49, 0.3)' ?>;">
              <?= $activeMembership && $activeMembership['plan_type'] === 'family' ? 'Current Plan' : 'Upgrade Now' ?>
            </button>
          </div>

          <!-- Enterprise Plan -->
          <div style="background: white; padding: 32px; border-radius: 16px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); border: 2px solid #e5e7eb; position: relative; transition: all 0.3s;">
            <div style="margin-bottom: 24px;">
              <div style="width: 64px; height: 64px; background: linear-gradient(135deg, #6366f1, #4f46e5); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;">
                <i class="fas fa-building" style="color: white; font-size: 28px;"></i>
              </div>
              <h4 style="font-size: 24px; font-weight: 800; color: #0b3d2e; margin: 0 0 8px 0;">Enterprise</h4>
              <div style="display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px;">
                <span style="font-size: 40px; font-weight: 800; color: #6366f1;">Custom</span>
              </div>
              <p style="color: #64748b; margin: 0; font-size: 14px;">Tailored solutions for organizations</p>
            </div>

            <ul style="list-style: none; padding: 0; margin: 0 0 24px 0; display: flex; flex-direction: column; gap: 12px;">
              <li style="display: flex; align-items: start; gap: 10px; color: #0b3d2e; font-size: 14px;">
                <i class="fas fa-check-circle" style="color: #6366f1; margin-top: 2px; flex-shrink: 0;"></i>
                <span>Custom user limits</span>
              </li>
              <li style="display: flex; align-items: start; gap: 10px; color: #0b3d2e; font-size: 14px;">
                <i class="fas fa-check-circle" style="color: #6366f1; margin-top: 2px; flex-shrink: 0;"></i>
                <span>Dedicated wellness coach</span>
              </li>
              <li style="display: flex; align-items: start; gap: 10px; color: #0b3d2e; font-size: 14px;">
                <i class="fas fa-check-circle" style="color: #6366f1; margin-top: 2px; flex-shrink: 0;"></i>
                <span>Advanced analytics</span>
              </li>
              <li style="display: flex; align-items: start; gap: 10px; color: #0b3d2e; font-size: 14px;">
                <i class="fas fa-check-circle" style="color: #6366f1; margin-top: 2px; flex-shrink: 0;"></i>
                <span>API access</span>
              </li>
              <li style="display: flex; align-items: start; gap: 10px; color: #0b3d2e; font-size: 14px;">
                <i class="fas fa-check-circle" style="color: #6366f1; margin-top: 2px; flex-shrink: 0;"></i>
                <span>Custom integrations</span>
              </li>
            </ul>

            <button onclick="contactSales()" style="width: 100%; background: white; color: #6366f1; padding: 14px; border-radius: 10px; font-size: 15px; font-weight: 700; border: 2px solid #6366f1; cursor: pointer; transition: all 0.3s;">
              Contact Sales
            </button>
          </div>
        </div>
      </div>

      <!-- FAQ Section -->
      <div style="background: white; padding: 32px; border-radius: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);">
        <h3 style="font-size: 20px; font-weight: 700; color: #0b3d2e; margin: 0 0 24px 0; display: flex; align-items: center; gap: 12px;">
          <i class="fas fa-question-circle" style="color: #0f5240;"></i>
          Frequently Asked Questions
        </h3>
        
        <div style="display: flex; flex-direction: column; gap: 16px;">
          <details style="background: #f0f9f6; padding: 20px; border-radius: 12px; cursor: pointer; border: 1px solid #e5e7eb;">
            <summary style="font-weight: 600; color: #0b3d2e; cursor: pointer; font-size: 15px;">Can I cancel my membership anytime?</summary>
            <p style="margin: 16px 0 0 0; color: #64748b; font-size: 14px; line-height: 1.6;">Yes, you can cancel your membership at any time. Your access will continue until the end of your billing period.</p>
          </details>

          <details style="background: #f0f9f6; padding: 20px; border-radius: 12px; cursor: pointer; border: 1px solid #e5e7eb;">
            <summary style="font-weight: 600; color: #0b3d2e; cursor: pointer; font-size: 15px;">What payment methods do you accept?</summary>
            <p style="margin: 16px 0 0 0; color: #64748b; font-size: 14px; line-height: 1.6;">We accept all major credit cards (Visa, MasterCard, American Express) and PayPal.</p>
          </details>

          <details style="background: #f0f9f6; padding: 20px; border-radius: 12px; cursor: pointer; border: 1px solid #e5e7eb;">
            <summary style="font-weight: 600; color: #0b3d2e; cursor: pointer; font-size: 15px;">Can I upgrade or downgrade my plan?</summary>
            <p style="margin: 16px 0 0 0; color: #64748b; font-size: 14px; line-height: 1.6;">Yes, you can change your plan at any time. Upgrades take effect immediately, while downgrades apply at your next billing cycle.</p>
          </details>

          <details style="background: #f0f9f6; padding: 20px; border-radius: 12px; cursor: pointer; border: 1px solid #e5e7eb;">
            <summary style="font-weight: 600; color: #0b3d2e; cursor: pointer; font-size: 15px;">Do unused consultations roll over?</summary>
            <p style="margin: 16px 0 0 0; color: #64748b; font-size: 14px; line-height: 1.6;">For Personal plans, up to 2 unused consultations can roll over to the next month. Family plans have unlimited consultations.</p>
          </details>
        </div>
      </div>

    </main>
  </div>
</div>

<style>
details summary {
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}

details[open] {
  background: #fef9e7 !important;
  border-color: #d4ad31 !important;
}

details[open] summary {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important;
}

button:active {
  transform: translateY(0);
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.modal.active {
  display: flex;
}

.modal-content {
  background: white;
  padding: 32px;
  border-radius: 16px;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
}

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

.member-card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  border: 2px solid #f0f9f6;
  transition: all 0.3s;
}

.member-card:hover {
  border-color: #d4ad31;
  box-shadow: 0 4px 12px rgba(212, 173, 49, 0.2);
}
</style>

<script>
// Family Members Management
let familyMembers = [];

async function loadFamilyMembers() {
  try {
    const response = await fetch('/files/atasteofafricanmarketplace/api/membership/family-members.php', {
      credentials: 'include'
    });
    const data = await response.json();
    
    if (data.success) {
      familyMembers = data.members || [];
      renderFamilyMembers();
    }
  } catch (error) {
    console.error('Error loading family members:', error);
  }
}

function renderFamilyMembers() {
  const container = document.getElementById('family-members-list');
  if (!container) return;
  
  if (familyMembers.length === 0) {
    container.innerHTML = `
      <div style="background: linear-gradient(135deg, #f0f9f6, #fef9e7); padding: 24px; border-radius: 12px; border: 2px dashed #d4ad31; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 160px;">
        <i class="fas fa-user-plus" style="font-size: 36px; color: #d4ad31; margin-bottom: 12px;"></i>
        <p style="color: #64748b; margin: 0; font-size: 14px;">Add your first family member to get started</p>
      </div>
    `;
    return;
  }
  
  container.innerHTML = familyMembers.map((member, index) => `
    <div class="member-card">
      <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 16px;">
        <div style="display: flex; gap: 12px; align-items: center;">
          <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #0f5240, #146651); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 18px;">
            ${member.first_name ? member.first_name.charAt(0).toUpperCase() : 'F'}${member.last_name ? member.last_name.charAt(0).toUpperCase() : 'M'}
          </div>
          <div>
            <h4 style="font-size: 16px; font-weight: 700; color: #0b3d2e; margin: 0 0 4px 0;">
              ${member.first_name} ${member.last_name}
            </h4>
            <p style="color: #64748b; margin: 0; font-size: 13px;">${member.relationship || 'Family Member'}</p>
          </div>
        </div>
        <button onclick="removeFamilyMember(${member.id})" style="background: transparent; border: none; color: #ef4444; cursor: pointer; font-size: 18px; padding: 4px 8px; transition: all 0.3s;" title="Remove member">
          <i class="fas fa-times-circle"></i>
        </button>
      </div>
      
      <div style="display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid #f0f9f6;">
        <div style="display: flex; align-items: center; gap: 8px; font-size: 13px; color: #64748b;">
          <i class="fas fa-envelope" style="color: #0f5240; width: 16px;"></i>
          <span>${member.email}</span>
        </div>
        ${member.date_of_birth ? `
          <div style="display: flex; align-items: center; gap: 8px; font-size: 13px; color: #64748b;">
            <i class="fas fa-birthday-cake" style="color: #0f5240; width: 16px;"></i>
            <span>${new Date(member.date_of_birth).toLocaleDateString()}</span>
          </div>
        ` : ''}
        <div style="display: flex; align-items: center; gap: 8px; font-size: 13px;">
          <i class="fas fa-check-circle" style="color: #10b981; width: 16px;"></i>
          <span style="color: #10b981; font-weight: 600;">Active</span>
        </div>
      </div>
    </div>
  `).join('');
}

function openAddMemberModal() {
  const modal = document.getElementById('add-member-modal');
  if (modal) {
    modal.classList.add('active');
    document.getElementById('add-member-form').reset();
  }
}

function closeAddMemberModal() {
  const modal = document.getElementById('add-member-modal');
  if (modal) {
    modal.classList.remove('active');
  }
}

async function submitAddMember(event) {
  event.preventDefault();
  
  const form = event.target;
  const formData = new FormData(form);
  const memberData = {
    first_name: formData.get('first_name'),
    last_name: formData.get('last_name'),
    email: formData.get('email'),
    date_of_birth: formData.get('date_of_birth'),
    relationship: formData.get('relationship')
  };
  
  // Check if we've reached the limit
  if (familyMembers.length >= 5) {
    alert('You have reached the maximum of 5 family members for your plan.');
    return;
  }
  
  const submitBtn = form.querySelector('button[type="submit"]');
  submitBtn.disabled = true;
  submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Adding...';
  
  try {
    const response = await fetch('/files/atasteofafricanmarketplace/api/membership/add-family-member.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      credentials: 'include',
      body: JSON.stringify(memberData)
    });
    
    const data = await response.json();
    
    if (data.success) {
      closeAddMemberModal();
      loadFamilyMembers();
      alert('Family member added successfully!');
    } else {
      alert(data.message || 'Failed to add family member');
    }
  } catch (error) {
    alert('Network error. Please try again.');
  } finally {
    submitBtn.disabled = false;
    submitBtn.innerHTML = '<i class="fas fa-user-plus"></i> Add Family Member';
  }
}

async function removeFamilyMember(memberId) {
  if (!confirm('Are you sure you want to remove this family member? They will lose access to the family plan benefits.')) {
    return;
  }
  
  try {
    const response = await fetch('/files/atasteofafricanmarketplace/api/membership/remove-family-member.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      credentials: 'include',
      body: JSON.stringify({ member_id: memberId })
    });
    
    const data = await response.json();
    
    if (data.success) {
      loadFamilyMembers();
      alert('Family member removed successfully.');
    } else {
      alert(data.message || 'Failed to remove family member');
    }
  } catch (error) {
    alert('Network error. Please try again.');
  }
}

// Load family members on page load
document.addEventListener('DOMContentLoaded', () => {
  const familyMembersSection = document.getElementById('family-members-list');
  if (familyMembersSection) {
    loadFamilyMembers();
  }
});

function selectPlan(planType) {
  if (confirm(`Would you like to select the ${planType.charAt(0).toUpperCase() + planType.slice(1)} plan?`)) {
    alert('Payment processing feature coming soon! Your plan selection will be processed securely.');
  }
}

function managePlan() {
  alert('Plan management features:\n\n• Change plan\n• Update payment method\n• View billing history\n\nComing soon!');
}

function viewBilling() {
  window.location.href = '/files/atasteofafricanmarketplace/dashboard/user/billing.php';
}

function contactSales() {
  window.location.href = 'mailto:sales@herbalwellness.com?subject=Enterprise Plan Inquiry';
}
</script>

<!-- Add Family Member Modal -->
<div id="add-member-modal" class="modal">
  <div class="modal-content">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
      <h3 style="font-size: 22px; font-weight: 700; color: #0b3d2e; margin: 0;">Add Family Member</h3>
      <button onclick="closeAddMemberModal()" style="background: transparent; border: none; color: #64748b; cursor: pointer; font-size: 24px; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; transition: all 0.3s;">
        <i class="fas fa-times"></i>
      </button>
    </div>
    
    <form id="add-member-form" onsubmit="submitAddMember(event)">
      <div style="display: flex; flex-direction: column; gap: 20px;">
        <div>
          <label style="display: block; font-weight: 600; color: #0b3d2e; margin-bottom: 8px; font-size: 14px;">First Name *</label>
          <input type="text" name="first_name" required style="width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 15px; transition: all 0.3s; font-family: inherit;" placeholder="Enter first name">
        </div>
        
        <div>
          <label style="display: block; font-weight: 600; color: #0b3d2e; margin-bottom: 8px; font-size: 14px;">Last Name *</label>
          <input type="text" name="last_name" required style="width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 15px; transition: all 0.3s; font-family: inherit;" placeholder="Enter last name">
        </div>
        
        <div>
          <label style="display: block; font-weight: 600; color: #0b3d2e; margin-bottom: 8px; font-size: 14px;">Email *</label>
          <input type="email" name="email" required style="width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 15px; transition: all 0.3s; font-family: inherit;" placeholder="member@example.com">
        </div>
        
        <div>
          <label style="display: block; font-weight: 600; color: #0b3d2e; margin-bottom: 8px; font-size: 14px;">Relationship</label>
          <select name="relationship" style="width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 15px; transition: all 0.3s; font-family: inherit; background: white;">
            <option value="">Select relationship</option>
            <option value="Spouse">Spouse</option>
            <option value="Child">Child</option>
            <option value="Parent">Parent</option>
            <option value="Sibling">Sibling</option>
            <option value="Other">Other</option>
          </select>
        </div>
        
        <div>
          <label style="display: block; font-weight: 600; color: #0b3d2e; margin-bottom: 8px; font-size: 14px;">Date of Birth</label>
          <input type="date" name="date_of_birth" style="width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 15px; transition: all 0.3s; font-family: inherit;">
        </div>
        
        <div style="background: linear-gradient(135deg, #f0f9f6, #fef9e7); padding: 16px; border-radius: 8px; border: 1px solid #d4ad31;">
          <p style="margin: 0; font-size: 13px; color: #64748b;">
            <i class="fas fa-info-circle" style="color: #d4ad31;"></i>
            Family members will receive an invitation email to set up their account and access wellness services.
          </p>
        </div>
      </div>
      
      <div style="display: flex; gap: 12px; margin-top: 24px;">
        <button type="button" onclick="closeAddMemberModal()" style="flex: 1; background: white; color: #64748b; padding: 14px; border-radius: 10px; font-size: 15px; font-weight: 700; border: 2px solid #e5e7eb; cursor: pointer; transition: all 0.3s;">
          Cancel
        </button>
        <button type="submit" style="flex: 1; background: linear-gradient(135deg, #0f5240, #146651); color: white; padding: 14px; border-radius: 10px; font-size: 15px; font-weight: 700; border: none; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 12px rgba(15, 82, 64, 0.3);">
          <i class="fas fa-user-plus"></i> Add Family Member
        </button>
      </div>
    </form>
  </div>
</div>

<?php };
include __DIR__ . '/../../partials/layout.php';
?>