ÿØÿà JFIF 

  
 
  ÿÛ „ 	 ( %!1!%*+...983,7(-.-

ÿØÿà JFIF 

  
 
  ÿÛ „ 	 ( %!1!%*+...983,7(-.-

<?php if (!defined('ABSPATH')) exit; ?>
<?php
// Get pet hero image as base64 from uploads or plugin
$hero_img_url = MPP7_URL . 'images/hero.jpg';
$hero_bg_style = 'background-image:url(' . esc_url($hero_img_url) . ')';
?>
<div id="mpp7">

<!-- ── NAV ── -->
<nav class="mpp7-nav">
  <div style="display:flex;align-items:center;gap:14px;">
    <div class="mpp7-logo" onclick="goPage('home')">
      <svg width="36" height="36" viewBox="0 0 40 40" fill="none">
        <ellipse cx="10" cy="12" rx="5" ry="7" fill="#1db87e" opacity=".9"/>
        <ellipse cx="30" cy="12" rx="5" ry="7" fill="#1db87e" opacity=".9"/>
        <ellipse cx="20" cy="28" rx="12" ry="10" fill="#1db87e"/>
        <ellipse cx="14" cy="22" rx="5" ry="6" fill="#1db87e" opacity=".8"/>
        <ellipse cx="26" cy="22" rx="5" ry="6" fill="#1db87e" opacity=".8"/>
        <ellipse cx="20" cy="29" rx="7" ry="5" fill="#fff" opacity=".3"/>
      </svg>
      <div>
        <div class="mpp7-logo-name">MyPetPro7<span style="color:var(--muted);font-weight:400;font-size:16px;">.com</span></div>
        <small class="mpp7-logo-sub" id="mpp7t-tagline"><?php echo esc_html(get_option('mpp7_hero_tagline','Loving pet care in your neighborhood™')); ?></small>
      </div>
    </div>
    <div class="mpp7-nav-links">
      <button class="mpp7-nav-lnk" onclick="goPage('search')" id="mpp7t-nav-search">Search Sitters</button>
      <button class="mpp7-nav-lnk" onclick="openModal('pro-reg')" id="mpp7t-nav-become">Become a Sitter</button>
      <button class="mpp7-nav-lnk" onclick="goPage('calendar')" id="mpp7t-nav-services">Book Appointment</button>
    </div>
  </div>
  <div style="display:flex;align-items:center;gap:7px;">
    <button class="mpp7-nav-lnk" onclick="openModal('signin')" id="mpp7t-nav-signin">Sign In</button>
    <button class="btn btn-green" onclick="openModal('signup')" id="mpp7t-nav-signup">Sign Up</button>
    <?php if (is_user_logged_in()): ?>
      <button class="btn btn-outline" onclick="goPage('user')" id="mpp7t-nav-user">My Account</button>
      <?php if (current_user_can('manage_options')): ?>
        <button class="btn btn-navy" onclick="goPage('admin')" id="mpp7t-nav-admin">Admin</button>
      <?php endif; ?>
      <button class="btn btn-outline" onclick="goPage('provider')" id="mpp7t-nav-pro">Pro Panel</button>
    <?php else: ?>
      <button class="btn btn-outline" onclick="openModal('signin')" id="mpp7t-nav-pro">Pro Panel</button>
    <?php endif; ?>
    <div class="mpp7-lang">
      <button class="mpp7-lang-btn act" onclick="setMPP7Lang('es',this)">ES</button>
      <button class="mpp7-lang-btn" onclick="setMPP7Lang('en',this)">EN</button>
      <button class="mpp7-lang-btn" onclick="setMPP7Lang('fr',this)">FR</button>
    </div>
  </div>
</nav>

<!-- ██ HOME ██ -->
<div class="mpp7-page on" id="mpp7pg-home">
  <div class="mpp7-hero">
    <div class="mpp7-hero-bg" style="<?php echo $hero_bg_style; ?>"></div>
    <div class="mpp7-hero-overlay"></div>
    <div class="mpp7-hero-content">
      <h1 id="mpp7t-hero-h1"><?php echo esc_html(get_option('mpp7_hero_tagline','Loving pet care in your neighborhood™')); ?></h1>
      <p class="mpp7-hero-sub" id="mpp7t-hero-sub">Book trusted sitters and dog walkers.</p>
      <div class="mpp7-search-box">
        <p style="font-size:13.5px;font-weight:600;color:var(--text);margin-bottom:12px;" id="mpp7t-search-q">What kind of pet care are you looking for?</p>
        <div class="mpp7-svc-tabs" id="mpp7-svc-tabs"></div>
        <div class="mpp7-addr-label" id="mpp7t-addr-label">Address</div>
        <div class="mpp7-addr-row">
          <input class="mpp7-addr-input" type="text" id="mpp7t-addr-ph" placeholder="Add your address"/>
          <button class="mpp7-search-btn" onclick="goPage('search')" id="mpp7t-search-btn">Search</button>
        </div>
      </div>
      <div class="mpp7-trust">
        <span class="mpp7-tp-stars">★★★★★</span>
        <span class="mpp7-tp-txt" id="mpp7t-trust-txt">30,000+ reviews on</span>
        <span class="mpp7-tp-logo" style="color:#00b67a;font-weight:700;font-size:13px;">★ Trustpilot</span>
      </div>
    </div>
  </div>

  <!-- HOW -->
  <div class="mpp7-sec">
    <div class="mpp7-sec-title" id="mpp7t-how-title">How it works</div>
    <div class="mpp7-sec-sub" id="mpp7t-how-sub">Book trusted pet care in 3 simple steps</div>
    <div class="mpp7-how-grid" id="mpp7-how-grid"></div>
  </div>

  <!-- SERVICES -->
  <div class="mpp7-sec-bg">
    <div class="mpp7-sec-inner">
      <div class="mpp7-sec-title" id="mpp7t-svc-title">Services for every pet</div>
      <div class="mpp7-sec-sub" id="mpp7t-svc-sub">From boarding to grooming, we've got you covered</div>
      <div class="mpp7-svc-grid" id="mpp7-svc-grid"></div>
    </div>
  </div>

  <!-- PROVIDERS -->
  <div class="mpp7-sec">
    <div class="mpp7-sec-title" id="mpp7t-prov-title">Top rated sitters near you</div>
    <div class="mpp7-sec-sub" id="mpp7t-prov-sub">Verified professionals ready to care for your pet</div>
    <div class="mpp7-prov-grid" id="mpp7-prov-grid"></div>
  </div>

  <!-- WHY -->
  <div class="mpp7-sec-bg">
    <div class="mpp7-sec-inner">
      <div class="mpp7-sec-title" id="mpp7t-why-title">Why MyPetPro7?</div>
      <div class="mpp7-sec-sub" id="mpp7t-why-sub">Peace of mind for you and your pet</div>
      <div class="mpp7-why-grid" id="mpp7-why-grid"></div>
    </div>
  </div>

  <!-- BECOME SITTER -->
  <div class="mpp7-become">
    <div class="mpp7-become-inner">
      <div class="mpp7-become-left">
        <h2 id="mpp7t-become-h">Earn doing what you love</h2>
        <p id="mpp7t-become-p">Turn your love of pets into income. Join thousands of pet sitters earning on their schedule.</p>
        <div class="mpp7-become-steps" id="mpp7-become-steps"></div>
        <button class="btn btn-green" style="font-size:15px;padding:13px 28px;border-radius:25px;" onclick="openModal('pro-reg')" id="mpp7t-become-btn">Get started today</button>
      </div>
      <div class="mpp7-become-stats" id="mpp7-become-stats"></div>
    </div>
  </div>

  <!-- CTA -->
  <div class="mpp7-cta">
    <h2 id="mpp7t-cta-h">Ready to find the perfect sitter?</h2>
    <p id="mpp7t-cta-p">Join 5 million+ pet owners who trust MyPetPro7</p>
    <div class="mpp7-cta-btns">
      <button class="mpp7-cta-white" onclick="goPage('search')" id="mpp7t-cta-btn1">Find a sitter</button>
      <button class="mpp7-cta-outline" onclick="openModal('pro-reg')" id="mpp7t-cta-btn2">Become a sitter</button>
    </div>
  </div>

  <!-- FOOTER -->
  <footer class="mpp7-footer">
    <div class="mpp7-footer-grid">
      <div>
        <div class="mpp7-footer-logo">🐾 MyPetPro7.com</div>
        <p class="mpp7-footer-desc" id="mpp7t-footer-copy">Connecting pet owners with trusted local pet care professionals since 2024.</p>
      </div>
      <div>
        <h4 id="mpp7t-footer-services">Services</h4>
        <div class="mpp7-footer-links" id="mpp7-footer-svc"></div>
      </div>
      <div>
        <h4 id="mpp7t-footer-providers">For Sitters</h4>
        <div class="mpp7-footer-links" id="mpp7-footer-pro"></div>
      </div>
      <div>
        <h4 id="mpp7t-footer-help">Support</h4>
        <div class="mpp7-footer-links" id="mpp7-footer-help"></div>
      </div>
    </div>
    <div class="mpp7-footer-bottom">© <?php echo date('Y'); ?> MyPetPro7.com</div>
  </footer>
</div>

<!-- ██ SEARCH ██ -->
<div class="mpp7-page" id="mpp7pg-search">
  <div class="mpp7-sec">
    <div style="display:flex;align-items:center;gap:10px;margin-bottom:20px;">
      <button onclick="goPage('home')" style="background:none;border:none;font-size:22px;cursor:pointer;color:var(--muted);">←</button>
      <div>
        <h2 style="font-size:20px;font-weight:800;" id="mpp7t-search-title">Find pet care near you</h2>
        <p style="font-size:13px;color:var(--muted);" id="mpp7t-search-sub">Verified sitters and walkers in your area</p>
      </div>
    </div>
    <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;">
      <select class="mpp7-fi" style="border-radius:25px;max-width:200px;" id="mpp7-search-svc-filter"></select>
      <input type="text" class="mpp7-fi" style="border-radius:25px;max-width:200px;" placeholder="City / ZIP"/>
      <button class="btn btn-green" onclick="renderSearchPage()">Search</button>
    </div>
    <div class="mpp7-prov-grid" id="mpp7-search-grid"></div>
  </div>
</div>

<!-- ██ CALENDAR ██ -->
<div class="mpp7-page" id="mpp7pg-calendar">
  <div class="mpp7-sec">
    <div style="display:flex;align-items:center;gap:10px;margin-bottom:20px;">
      <button onclick="goPage('home')" style="background:none;border:none;font-size:22px;cursor:pointer;color:var(--muted);">←</button>
      <div>
        <h2 style="font-size:20px;font-weight:800;" id="mpp7t-cal-title">Appointment Calendar</h2>
        <p style="font-size:13px;color:var(--muted);">Book your pet care appointment</p>
      </div>
    </div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
      <!-- Calendar left -->
      <div>
        <div class="mpp7-fg" style="margin-bottom:16px;">
          <label style="font-size:13px;font-weight:700;margin-bottom:6px;display:block;" id="mpp7t-cal-select-prov">Select a provider</label>
          <select class="mpp7-fi" id="mpp7-cal-prov-sel" onchange="if(selDay)calPickDay(selDay)">
            <option value="0">— Select provider —</option>
            <option value="1">María García — Boarding/Cat Sitting</option>
            <option value="2">Carlos López — Dog Walking/Day Care</option>
            <option value="3">Ana Martínez — House Sitting/Drop-in</option>
            <option value="4">Luis Ramírez — Grooming/Boarding</option>
          </select>
        </div>
        <div class="mpp7-cal-wrap">
          <div class="mpp7-cal-header">
            <button class="mpp7-cal-nav-btn" onclick="calNav(-1)" id="mpp7t-cal-prev">‹</button>
            <div class="mpp7-cal-month" id="mpp7-cal-month-lbl"></div>
            <button class="mpp7-cal-nav-btn" onclick="calNav(1)" id="mpp7t-cal-next">›</button>
          </div>
          <div class="mpp7-cal-grid" id="mpp7-cal-dow"></div>
          <div class="mpp7-cal-grid" id="mpp7-cal-days"></div>
          <div id="mpp7-slots-wrap" style="display:none;margin-top:14px;"></div>
        </div>
      </div>
      <!-- Booking form right -->
      <div>
        <div id="mpp7-cal-form">
          <div style="background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;">
            <div style="font-size:14px;font-weight:700;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:7px;">
              <i class="ti ti-user" aria-hidden="true" style="color:var(--gr);font-size:18px;"></i>
              <span id="mpp7t-cal-book-title">Confirm appointment</span>
            </div>
            <div class="mpp7-fg"><label id="mpp7t-cal-book-name">Full name *</label><input class="mpp7-fi" type="text" id="mpp7-cal-name"/></div>
            <div class="mpp7-fg"><label id="mpp7t-cal-book-email">Email *</label><input class="mpp7-fi" type="email" id="mpp7-cal-email"/></div>
            <div class="mpp7-fg"><label id="mpp7t-cal-book-phone">Phone</label><input class="mpp7-fi" type="tel" id="mpp7-cal-phone"/></div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
              <div class="mpp7-fg"><label id="mpp7t-cal-book-pet-name">Pet name *</label><input class="mpp7-fi" type="text" id="mpp7-cal-pet-name"/></div>
              <div class="mpp7-fg"><label id="mpp7t-cal-book-pet-type">Pet type *</label>
                <select class="mpp7-fi" id="mpp7-cal-pet-type">
                  <option>🐕 Dog</option><option>🐱 Cat</option><option>🐦 Bird</option><option>🐇 Rabbit</option>
                </select>
              </div>
            </div>
            <div class="mpp7-fg"><label id="mpp7t-cal-book-svc">Service *</label>
              <select class="mpp7-fi" id="mpp7-cal-svc">
                <option>Boarding</option><option>House Sitting</option><option>Drop-In Visits</option>
                <option>Doggy Day Care</option><option>Dog Walking</option><option>Grooming</option>
              </select>
            </div>
            <div class="mpp7-fg"><label id="mpp7t-cal-book-selected">Selected date and time</label>
              <input class="mpp7-fi" type="text" id="mpp7-cal-datetime-disp" readonly style="background:#f8fafc;" placeholder="Select on the calendar"/>
            </div>
            <div class="mpp7-fg"><label id="mpp7t-cal-book-notes">Additional notes</label><textarea class="mpp7-fi" rows="2" id="mpp7-cal-notes"></textarea></div>
            <button class="btn btn-green btn-full" style="font-size:15px;padding:13px;" onclick="calConfirmBook()" id="mpp7t-cal-book-btn">Confirm appointment</button>
          </div>
        </div>
        <div id="mpp7-cal-ok" style="display:none;">
          <div class="mpp7-success">
            <i class="ti ti-circle-check big" aria-hidden="true"></i>
            <h4 id="mpp7t-cal-ok-h">Appointment confirmed!</h4>
            <p id="mpp7t-cal-ok-p">You will receive a confirmation email.</p>
            <p style="font-size:14px;font-weight:700;margin-top:10px;color:var(--gr-dk);" id="mpp7-cal-ok-detail"></p>
            <button class="btn btn-green btn-sm" style="margin-top:12px;" onclick="calReset()" id="mpp7t-cal-new">New appointment</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ██ PROVIDER DASHBOARD ██ -->
<div class="mpp7-page" id="mpp7pg-provider">
  <div class="mpp7-dash">
    <div class="mpp7-sb">
      <div class="mpp7-sb-hd">
        <div class="mpp7-sb-brand">🐾 MyPetPro7</div>
        <div class="mpp7-sb-role" id="mpp7t-pro-dash-sub">Pro Panel</div>
      </div>
      <div class="mpp7-sb-title" id="mpp7t-pro-overview">MENU</div>
      <button class="mpp7-sb-item act" onclick="proTab('overview',this)"><i class="ti ti-layout-dashboard" aria-hidden="true"></i><span id="mpp7t-pro-overview">Overview</span></button>
      <button class="mpp7-sb-item" onclick="proTab('profile',this)"><i class="ti ti-user-circle" aria-hidden="true"></i><span id="mpp7t-pro-profile">My Profile</span></button>
      <button class="mpp7-sb-item" onclick="proTab('schedule',this)"><i class="ti ti-clock" aria-hidden="true"></i><span id="mpp7t-pro-schedule">My Schedule</span></button>
      <button class="mpp7-sb-item" onclick="proTab('post',this)"><i class="ti ti-plus-circle" aria-hidden="true"></i><span id="mpp7t-pro-post">Post Service</span></button>
      <div class="mpp7-sb-title">MANAGE</div>
      <button class="mpp7-sb-item" onclick="proTab('myservices',this)"><i class="ti ti-clipboard-list" aria-hidden="true"></i><span id="mpp7t-pro-my-svcs">My Services</span></button>
      <button class="mpp7-sb-item" onclick="proTab('requests',this)"><i class="ti ti-bell" aria-hidden="true"></i><span id="mpp7t-pro-requests">Requests</span></button>
      <button class="mpp7-sb-item" onclick="proTab('calendar',this)"><i class="ti ti-calendar" aria-hidden="true"></i><span id="mpp7t-pro-calendar">My Calendar</span></button>
      <button class="mpp7-sb-item" onclick="proTab('reviews',this)"><i class="ti ti-star" aria-hidden="true"></i><span id="mpp7t-pro-reviews">Reviews</span></button>
      <div style="flex:1;"></div>
      <button class="mpp7-sb-item" onclick="goPage('home')"><i class="ti ti-arrow-left" aria-hidden="true"></i><span id="mpp7t-pro-back">Back to site</span></button>
    </div>
    <div class="mpp7-dash-main" id="mpp7-pro-content"></div>
  </div>
</div>

<!-- ██ USER DASHBOARD ██ -->
<div class="mpp7-page" id="mpp7pg-user">
  <div class="mpp7-dash">
    <div class="mpp7-sb">
      <div class="mpp7-sb-hd">
        <div class="mpp7-sb-brand">🐾 MyPetPro7</div>
        <div class="mpp7-sb-role" id="mpp7t-user-dash-sub">My Account</div>
      </div>
      <div class="mpp7-sb-title">MENU</div>
      <button class="mpp7-sb-item act" onclick="userTab('appointments',this)"><i class="ti ti-calendar-check" aria-hidden="true"></i><span id="mpp7t-user-my-appts">My Appointments</span></button>
      <button class="mpp7-sb-item" onclick="userTab('pets',this)"><i class="ti ti-paw-filled" aria-hidden="true"></i><span id="mpp7t-user-my-pets">My Pets</span></button>
      <button class="mpp7-sb-item" onclick="userTab('favorites',this)"><i class="ti ti-heart" aria-hidden="true"></i><span id="mpp7t-user-favorites">Favorites</span></button>
      <button class="mpp7-sb-item" onclick="goPage('calendar')"><i class="ti ti-calendar-plus" aria-hidden="true"></i><span id="mpp7t-user-find">Book Appointment</span></button>
      <div style="flex:1;"></div>
      <button class="mpp7-sb-item" onclick="goPage('home')"><i class="ti ti-arrow-left" aria-hidden="true"></i><span id="mpp7t-user-back">Back to site</span></button>
    </div>
    <div class="mpp7-dash-main" id="mpp7-user-content"></div>
  </div>
</div>

<!-- ██ ADMIN DASHBOARD ██ -->
<div class="mpp7-page" id="mpp7pg-admin">
  <div class="mpp7-dash">
    <div class="mpp7-sb">
      <div class="mpp7-sb-hd">
        <div class="mpp7-sb-brand">🐾 MyPetPro7</div>
        <div class="mpp7-sb-role">Administrator</div>
      </div>
      <div class="mpp7-sb-title">MAIN</div>
      <button class="mpp7-sb-item act" onclick="adminTab('overview',this)"><i class="ti ti-chart-bar" aria-hidden="true"></i><span id="mpp7t-adm-overview">Overview</span></button>
      <button class="mpp7-sb-item" onclick="adminTab('providers',this)"><i class="ti ti-users" aria-hidden="true"></i><span id="mpp7t-adm-providers">Providers</span></button>
      <button class="mpp7-sb-item" onclick="adminTab('users',this)"><i class="ti ti-user" aria-hidden="true"></i><span id="mpp7t-adm-users">Users</span></button>
      <button class="mpp7-sb-item" onclick="adminTab('appointments',this)"><i class="ti ti-calendar" aria-hidden="true"></i><span id="mpp7t-adm-appts">Appointments</span></button>
      <button class="mpp7-sb-item" onclick="adminTab('services',this)"><i class="ti ti-clipboard-list" aria-hidden="true"></i><span id="mpp7t-adm-svcs">Services</span></button>
      <div class="mpp7-sb-title">MORE</div>
      <button class="mpp7-sb-item" onclick="adminTab('messages',this)"><i class="ti ti-mail" aria-hidden="true"></i><span id="mpp7t-adm-msgs">Messages</span></button>
      <button class="mpp7-sb-item" onclick="adminTab('reviews',this)"><i class="ti ti-star" aria-hidden="true"></i><span id="mpp7t-adm-reviews">Reviews</span></button>
      <button class="mpp7-sb-item" onclick="adminTab('settings',this)"><i class="ti ti-settings" aria-hidden="true"></i><span id="mpp7t-adm-settings">Settings</span></button>
      <div style="flex:1;"></div>
      <button class="mpp7-sb-item" onclick="goPage('home')"><i class="ti ti-arrow-left" aria-hidden="true"></i>Back to site</button>
    </div>
    <div class="mpp7-dash-main" id="mpp7-admin-content"></div>
  </div>
</div>

<!-- ██ MODAL ██ -->
<div class="mpp7-overlay hidden" id="mpp7-modal-bg">
  <div class="mpp7-modal" id="mpp7-modal">
    <div class="mpp7-modal-hd">
      <h3 id="mpp7-modal-title">Sign Up</h3>
      <button class="mpp7-modal-cl" onclick="closeModal()">✕</button>
    </div>
    <div class="mpp7-modal-bd" id="mpp7-modal-body"></div>
  </div>
</div>

</div><!-- #mpp7 -->