<?php
$page_title = "MyEduNest Driver App — Live School Bus GPS Tracking App | Download on Google Play";
$page_desc = "Download the official MyEduNest Driver App on Google Play Store. Turn any smartphone into a real-time school bus GPS tracker. Features 1-tap start trip, automated parent arrival alerts, live speed monitoring, and zero hardware installation cost.";
$page_keywords = "MyEduNest Driver App, School Bus Live GPS Tracking App, School Bus Driver App Android, Free School Bus GPS Software, Antisoft Driver App, School Transport Management System India";
require_once __DIR__ . '/includes/header.php';

$wa_phone_clean = preg_replace('/[^0-9]/', '', $contact_phone ?? '916239943211');
?>

<!-- ==========================================================================
     HERO SECTION: DRIVER APP
     ========================================================================== -->
<section class="site-hero" id="driver-hero">
  <div class="hero-ambient-glow" aria-hidden="true"></div>
  <div class="hero-dot-pattern" aria-hidden="true"></div>
  
  <div class="hero-inner site-hero-grid">
    <div class="hero-content">
      <!-- Tag Badge -->
      <div class="hero-tag-badge">
        <span class="live-pulse" aria-hidden="true" style="background: #22C55E; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);"></span>
        <span>Official Driver Mode Android App</span>
      </div>

      <!-- Headline -->
      <h1>
        Real-Time School Bus GPS <span class="gradient-text">With Zero Hardware</span> Costs
      </h1>

      <!-- Subtitle -->
      <p class="hero-copy">
        The <strong>MyEduNest Driver App</strong> turns any smartphone into an intelligent live GPS beacon. Van drivers simply tap <em>"Start Trip"</em>, broadcasting real-time bus location, speed, and automated arrival alerts directly to parents and school principals.
      </p>

      <!-- Key Pills -->
      <div class="hero-feature-pills" aria-label="Key driver features">
        <span class="hero-pill-item">
          <svg class="ui-icon icon-emerald" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
          <span>Zero Extra Hardware</span>
        </span>
        <span class="hero-pill-item">
          <svg class="ui-icon icon-primary" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
          <span>1-Tap Start / End Trip</span>
        </span>
        <span class="hero-pill-item">
          <svg class="ui-icon icon-amber" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
          <span>2-Stop Proximity Alerts</span>
        </span>
        <span class="hero-pill-item">
          <svg class="ui-icon icon-primary" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg>
          <span>Lightweight &amp; Battery Smart</span>
        </span>
      </div>

      <!-- Hero Actions -->
      <div class="hero-actions">
        <a href="<?php echo htmlspecialchars($driver_play_store_url, ENT_QUOTES, 'UTF-8'); ?>" target="_blank" rel="noopener noreferrer" class="button primary" style="background: #16A34A !important; border-color: #15803D !important; box-shadow: 0 10px 24px -4px rgba(22, 163, 74, 0.45) !important;">
          <svg class="ui-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/><path d="M19 12 5 21V3l14 9z"/></svg>
          <span>Download Driver App on Play Store</span>
        </a>
        <a href="https://wa.me/<?php echo htmlspecialchars($wa_phone_clean, ENT_QUOTES, 'UTF-8'); ?>?text=Hello%20MyEduNest%20Team,%20I%20want%20to%20learn%20more%20about%20the%20Driver%20GPS%20App" target="_blank" rel="noopener noreferrer" class="button secondary">
          <svg class="ui-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M3 21l1.65-3.8a9 9 0 1 1 3.4 2.9L3 21"/>
            <path d="M9 10a.5.5 0 0 0 1 0V9a.5.5 0 0 0-1 0v1a5 5 0 0 0 5 5h1a.5.5 0 0 0 0-1h-1a.5.5 0 0 0 0 1"/>
          </svg>
          <span>Ask Transport Setup on WhatsApp</span>
        </a>
      </div>
    </div>

    <!-- Right Live Preview Mockup -->
    <div class="hero-preview-col">
      <div class="hero-mockup-card">
        <div class="mockup-header">
          <div class="mockup-icon" style="background: #ECFDF5; border-color: #A7F3D0; color: #15803D;">
            <svg class="ui-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.5 2.8C2 10.9 2 11.2 2 11.5V16c0 .6.4 1 1 1h2"/><circle cx="7" cy="17" r="2"/><circle cx="17" cy="17" r="2"/></svg>
          </div>
          <div>
            <div class="mockup-title">MyEduNest Driver Mode</div>
            <div class="mockup-subtitle">Live Broadcast Active &bull; Route #4</div>
          </div>
        </div>

        <div class="mockup-grid">
          <div class="mockup-item">
            <span class="mockup-badge badge-gps">LIVE SPEED</span>
            <strong>34 km/h</strong>
            <span>Safe driving range</span>
          </div>

          <div class="mockup-item">
            <span class="mockup-badge badge-attendance">NEXT STOP</span>
            <strong>Model Town Chowk</strong>
            <span>ETA: 4 Minutes (2 stops ahead)</span>
          </div>

          <div class="mockup-item">
            <span class="mockup-badge badge-fees">PARENTS NOTIFIED</span>
            <strong>32 Families</strong>
            <span>Proximity alerts dispatched</span>
          </div>

          <div class="mockup-item">
            <span class="mockup-badge badge-excel">STATUS</span>
            <strong>Trip in Progress</strong>
            <span>Morning Pickup Shift</span>
          </div>
        </div>

        <div class="mockup-footer-banner" style="background: #ECFDF5; border-color: #A7F3D0;">
          <div>
            <div class="mockup-price-sub" style="color: #166534;">Hardware Installation Cost</div>
            <div class="mockup-price-tag" style="color: #15803D;">&#8377;0 (Free Driver App)</div>
          </div>
          <a href="<?php echo htmlspecialchars($driver_play_store_url, ENT_QUOTES, 'UTF-8'); ?>" target="_blank" rel="noopener noreferrer" class="button royal" style="background: #16A34A !important; min-height: 40px; padding: 8px 16px; font-size: 0.85rem;">Get App</a>
        </div>
      </div>
    </div>
  </div>
</section>

<main>
  <!-- ==========================================================================
       THREE BIG REASONS: ZERO HARDWARE SAVINGS
       ========================================================================== -->
  <section class="band light">
    <div class="section-inner">
      <div class="section-heading text-center">
        <span class="eyebrow">Cost &amp; Operational Efficiency</span>
        <h2>Why Schools Are Switching to MyEduNest Driver App</h2>
        <p>Traditional hardwired GPS trackers are expensive, prone to battery drain, and break frequently. The MyEduNest smartphone driver model solves every transport challenge.</p>
      </div>

      <div class="journey-grid">
        <article class="journey-card">
          <div class="journey-badge-icon blue">
            <svg class="ui-icon" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
          </div>
          <h3>Save &#8377;6,000–&#8377;8,000 Per Bus in Hardware</h3>
          <p>Traditional GPS vendors charge high upfront hardware costs plus monthly SIM subscription fees. With MyEduNest Driver App, zero hardware purchases are required.</p>
          <ul class="journey-list blue-check">
            <li>
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
              <span><strong>Zero Installation Downtime:</strong> No mechanics or wiring required; drivers download and start immediately.</span>
            </li>
            <li>
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
              <span><strong>Swap Vehicles Effortlessly:</strong> If a van undergoes maintenance, the driver simply logs in from the replacement vehicle.</span>
            </li>
            <li>
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
              <span><strong>Included in Standard Cloud Plans:</strong> No extra charge per bus in our &#8377;4 to &#8377;10 subscription plans.</span>
            </li>
          </ul>
        </article>

        <article class="journey-card">
          <div class="journey-badge-icon amber">
            <svg class="ui-icon" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
          </div>
          <h3>Parent Peace of Mind &amp; Stop Arrival Alerts</h3>
          <p>Parents no longer wait outside in extreme heat, rain, or winter fog. The app automatically sends notifications when the bus is approaching their stop.</p>
          <ul class="journey-list amber-check">
            <li>
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
              <span><strong>Automated 2-Stop Notification:</strong> Parents receive an alert when the bus is 2 stops away so their child is ready.</span>
            </li>
            <li>
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
              <span><strong>Live Interactive Map:</strong> Parents see the bus smoothly moving along the assigned route in real time.</span>
            </li>
            <li>
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
              <span><strong>90% Fewer Inbound Phone Calls:</strong> Eliminates anxious parent phone calls to the driver or school reception desk.</span>
            </li>
          </ul>
        </article>
      </div>
    </div>
  </section>

  <!-- ==========================================================================
       LIVE MULTI-VAN FLEET TRACKING SHOWCASE (SCREENSHOT)
       ========================================================================== -->
  <section class="band subtle">
    <div class="section-inner">
      <div class="section-heading text-center">
        <span class="eyebrow dark">Fleet Monitoring Command Center</span>
        <h2>Live Multi-Van Fleet Tracking (All Vans on One Screen)</h2>
        <p>School administrators, principals, and transport managers can monitor every school bus and van moving in real time simultaneously with high-resolution satellite and street map views.</p>
      </div>

      <div class="fleet-screenshot-wrapper" style="margin: 24px auto 0 auto; max-width: 840px; background: var(--surface); border-radius: var(--radius-xl); border: 1px solid var(--border); box-shadow: var(--shadow-lg); overflow: hidden; padding: 10px;">
        <div style="background: #0052CC; color: #ffffff; padding: 10px 16px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;">
          <div style="display: flex; align-items: center; gap: 10px;">
            <svg class="ui-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.5 2.8C2 10.9 2 11.2 2 11.5V16c0 .6.4 1 1 1h2"/><circle cx="7" cy="17" r="2"/><circle cx="17" cy="17" r="2"/></svg>
            <span style="font-weight: 800; font-size: 0.95rem; letter-spacing: -0.01em;">Live Fleet Tracking (All Vans at One Time)</span>
          </div>
          <span style="background: #22C55E; color: #ffffff; font-size: 0.75rem; font-weight: 800; padding: 3px 10px; border-radius: var(--radius-full); display: inline-flex; align-items: center; gap: 5px;">
            <span class="live-pulse" style="background: #ffffff; width: 6px; height: 6px;"></span> LIVE ONLINE
          </span>
        </div>

        <div style="position: relative; overflow: hidden; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: #0F172A;">
          <img src="live-fleet-tracking.png" alt="Live Fleet Tracking All Vans Screen - MyEduNest" style="width: 100%; height: auto; display: block; border-radius: 0 0 var(--radius-lg) var(--radius-lg);" loading="lazy">
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; padding: 14px 8px 8px 8px; border-top: 1px solid var(--border); margin-top: 8px;">
          <div style="display: flex; gap: 8px; align-items: center;">
            <div style="width: 30px; height: 30px; border-radius: 50%; background: #EFF6FF; color: #2563EB; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
              <svg class="ui-icon" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
            </div>
            <div>
              <strong style="display: block; font-size: 0.88rem; color: var(--navy);">Multi-Van Live Grid</strong>
              <span style="font-size: 0.78rem; color: var(--muted);">Track all vans simultaneously</span>
            </div>
          </div>

          <div style="display: flex; gap: 8px; align-items: center;">
            <div style="width: 30px; height: 30px; border-radius: 50%; background: #ECFDF5; color: #059669; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
              <svg class="ui-icon" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
            </div>
            <div>
              <strong style="display: block; font-size: 0.88rem; color: var(--navy);">Satellite &amp; Street Map</strong>
              <span style="font-size: 0.78rem; color: var(--muted);">High-precision satellite view</span>
            </div>
          </div>

          <div style="display: flex; gap: 8px; align-items: center;">
            <div style="width: 30px; height: 30px; border-radius: 50%; background: #FFFBEB; color: #D97706; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
              <svg class="ui-icon" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
            </div>
            <div>
              <strong style="display: block; font-size: 0.88rem; color: var(--navy);">Driver &amp; Vehicle Tagging</strong>
              <span style="font-size: 0.78rem; color: var(--muted);">Driver name &amp; vehicle reg no</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ==========================================================================
       DETAILED FEATURES GRID
       ========================================================================== -->
  <section class="band subtle">
    <div class="section-inner">
      <div class="section-heading text-center">
        <span class="eyebrow dark">Engineered for Drivers</span>
        <h2>Built Specifically for Simplicity &amp; Road Safety</h2>
        <p>We designed the driver application with extra-large touch targets, high contrast, and simplified flows so drivers can focus 100% on safe driving.</p>
      </div>

      <div class="feature-grid">
        <div class="feature-card">
          <div class="module-icon" style="background: #EEF2FF; color: #4338CA;">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
          </div>
          <h3>1-Tap Start / End Trip</h3>
          <p>Drivers select their assigned morning or evening route and tap "Start Trip". The app handles all background location transmission automatically.</p>
        </div>

        <div class="feature-card">
          <div class="module-icon" style="background: #ECFDF5; color: #059669;">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
          </div>
          <h3>Battery &amp; Low-Data Optimized</h3>
          <p>Engineered with smart GPS polling intervals that conserve smartphone battery life and consume minimal 2G/3G/4G cellular data throughout long routes.</p>
        </div>

        <div class="feature-card">
          <div class="module-icon" style="background: #FFFBEB; color: #D97706;">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
          </div>
          <h3>Over-Speeding Safety Alerts</h3>
          <p>The system monitors live vehicle speed and automatically alerts school transport administrators if a vehicle exceeds safe campus speed thresholds.</p>
        </div>

        <div class="feature-card">
          <div class="module-icon" style="background: #F5F3FF; color: #6D28D9;">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
          </div>
          <h3>Student Stop Roll-Check</h3>
          <p>Bus conductors can view student lists per stop, checking off boarding and deboarding to guarantee no student is left behind at any bus stop.</p>
        </div>

        <div class="feature-card">
          <div class="module-icon" style="background: #FFF1F2; color: #E11D48;">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
          </div>
          <h3>1-Touch Emergency Contact</h3>
          <p>Drivers have instant direct contact buttons to the school transport manager and emergency helpline in case of vehicle breakdown or road delays.</p>
        </div>

        <div class="feature-card">
          <div class="module-icon" style="background: #F0F9FF; color: #0284C7;">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/></svg>
          </div>
          <h3>Multi-Bus Fleet Dashboard</h3>
          <p>School principals and clerks see all school vans moving simultaneously on a single unified live map on the Windows PC software.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ==========================================================================
       EASY 3-STEP SETUP FOR DRIVERS
       ========================================================================== -->
  <section class="band light">
    <div class="section-inner">
      <div class="section-heading text-center">
        <span class="eyebrow">Effortless Setup</span>
        <h2>How Drivers Get Started in Under 2 Minutes</h2>
        <p>Simple 3-step process requiring zero technical expertise.</p>
      </div>

      <div class="step-grid">
        <div class="step-card">
          <div class="step-number">1</div>
          <h3>Download App</h3>
          <p>Driver installs the official <strong>MyEduNest Driver</strong> app directly from the Google Play Store on their Android smartphone.</p>
        </div>

        <div class="step-card">
          <div class="step-number">2</div>
          <h3>Login via Phone &amp; OTP</h3>
          <p>Driver enters their mobile number and logs in with an instant OTP. The school admin assigns the vehicle route with 1 click.</p>
        </div>

        <div class="step-card">
          <div class="step-number">3</div>
          <h3>Tap "Start Trip"</h3>
          <p>Driver taps "Start Trip" when leaving the campus. The app handles all GPS broadcasting and stops automatically.</p>
        </div>

        <div class="step-card">
          <div class="step-number">4</div>
          <h3>Tap "End Trip"</h3>
          <p>Upon completing the route, driver taps "End Trip". Live tracking ceases immediately to safeguard driver privacy.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ==========================================================================
       DIRECT DOWNLOAD & WHATSAPP ACTION BANNER
       ========================================================================== -->
  <section class="band light">
    <div class="section-inner">
      <div class="cta-banner-card" style="background: linear-gradient(135deg, #15803D 0%, #16A34A 50%, #0284C7 100%);">
        <div class="cta-banner-grid">
          <div>
            <span class="eyebrow" style="background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.3); color: #ffffff;">Download Official App</span>
            <h2>Get the MyEduNest Driver App on Google Play</h2>
            <p>Experience zero-hardware school bus GPS tracking today. Available for all MyEduNest partner schools.</p>
          </div>
          <div class="cta-banner-actions">
            <a href="<?php echo htmlspecialchars($driver_play_store_url, ENT_QUOTES, 'UTF-8'); ?>" target="_blank" rel="noopener noreferrer" class="button primary" style="background: #ffffff !important; color: #15803D !important; border-color: #ffffff !important; font-size: 1rem; padding: 14px 28px;">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
              <span>Download on Google Play</span>
            </a>
            <a href="https://wa.me/<?php echo htmlspecialchars($wa_phone_clean, ENT_QUOTES, 'UTF-8'); ?>?text=Hello%20MyEduNest%20Team,%20I%20want%20help%20setting%20up%20the%20Driver%20App" target="_blank" rel="noopener noreferrer" class="button secondary" style="background: rgba(255,255,255,0.15) !important; color: #ffffff !important; border-color: rgba(255,255,255,0.6) !important;">
              <svg class="ui-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21l1.65-3.8a9 9 0 1 1 3.4 2.9L3 21"/><path d="M9 10a.5.5 0 0 0 1 0V9a.5.5 0 0 0-1 0v1a5 5 0 0 0 5 5h1a.5.5 0 0 0 0-1h-1a.5.5 0 0 0 0 1"/></svg>
              <span>Transport Setup Help</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

<?php require_once __DIR__ . '/includes/footer.php'; ?>
