<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PashuRakhshak (पशुरक्षक) - AI Animal Care & Rescue App India</title>
  <meta name="description" content="PashuRakhshak is India's AI-powered animal care app. Identify 10,000+ species, find nearby vets & NGOs, emergency SOS rescue, and pet adoption marketplace.">
  <meta name="keywords" content="animal identification, pet care India, vet near me, animal rescue, PashuRakhshak, wildlife identification, iNaturalist, Gemini AI, pet adoption">
  <meta name="author" content="PashuRakhshak - Team PawTech">
  <meta name="theme-color" content="#059669">
  <!-- Open Graph / Social -->
  <meta property="og:type" content="website">
  <meta property="og:title" content="PashuRakhshak - AI Animal Care & Rescue">
  <meta property="og:description" content="Identify animals with AI, find vets nearby, emergency SOS rescue, and adopt pets — India's #1 animal welfare super-app.">
  <meta property="og:image" content="https://pashurakshak.app/og-image.png">
  <meta property="og:locale" content="en_IN">
  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="PashuRakhshak - AI Animal Care">
  <meta name="twitter:description" content="India's AI-powered animal care and rescue app.">
  <!-- PWA Manifest -->
  <link rel="manifest" href="manifest.json">
  <link rel="apple-touch-icon" href="icons/icon-192.png">
  <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=Outfit:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="styles.css">
  <!-- Structured Data (JSON-LD) -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "MobileApplication",
    "name": "PashuRakhshak",
    "operatingSystem": "ANDROID, IOS, WEB",
    "applicationCategory": "LifestyleApplication",
    "description": "AI-powered animal care, rescue, and identification app for India.",
    "offers": { "@type": "Offer", "price": "0", "priceCurrency": "INR" },
    "creator": { "@type": "Organization", "name": "Team PawTech" }
  }
  </script>
</head>
<body>
  <!-- Skip to main content (accessibility) -->
  <a href="#screenViewport" class="skip-link" style="position:absolute;top:-40px;left:0;background:#059669;color:white;padding:8px 16px;text-decoration:none;font-size:13px;font-weight:bold;border-radius:0 0 8px 0;transition:top 0.2s;z-index:99999;" onfocus="this.style.top='0'" onblur="this.style.top='-40px'">Skip to main content</a>
  <!-- Offline/Online status announcer for screen readers -->
  <div id="a11yAnnouncer" aria-live="polite" aria-atomic="true" style="position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;"></div>
  <div class="app-layout">
    <!-- Mobile Device Preview Mockup -->
    <div class="device-container">
      <div class="phone-frame">
        <div class="phone-notch">
          <div class="speaker"></div>
          <div class="camera-lens"></div>
        </div>

        <!-- Phone Screen Content -->
        <div class="phone-screen">
          <!-- Top App Bar -->
          <div class="mobile-app-bar">
            <div class="app-title-group">
              <div class="mini-logo"><i class="fa-solid fa-paw"></i></div>
              <div>
                <h3 id="appTitleText">PashuRakhshak</h3>
                <span class="app-status-tag" id="userRoleTag">Pet Parent</span>
              </div>
            </div>
            <div class="app-bar-actions" role="toolbar" aria-label="App actions">
              <div class="lang-select-wrapper">
                <select class="header-lang-select" id="languageSelect" onchange="changeLanguage(this.value)" title="Select Language (13 Indian Languages)" aria-label="Select app language">
                  <option value="en">🌐 EN</option>
                  <option value="hi">🌐 HI (हिन्दी)</option>
                  <option value="bho">🌐 BHO (भोजपुरी)</option>
                  <option value="bn">🌐 BN (বাংলা)</option>
                  <option value="ta">🌐 TA (தமிழ்)</option>
                  <option value="te">🌐 TE (తెలుగు)</option>
                  <option value="mr">🌐 MR (मराठी)</option>
                  <option value="gu">🌐 GU (ગુજરાતી)</option>
                  <option value="pa">🌐 PA (ਪੰਜਾਬੀ)</option>
                  <option value="kn">🌐 KN (ಕನ್ನಡ)</option>
                  <option value="ml">🌐 ML (മലയാളം)</option>
                  <option value="or">🌐 OR (ଓଡ଼ିଆ)</option>
                  <option value="as">🌐 AS (অসমীয়া)</option>
                </select>
              </div>
              <button class="sos-mini-btn" onclick="navigateTo('report-emergency')" title="Emergency SOS" aria-label="Emergency SOS - Report injured animal">
                <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i> SOS
              </button>
              <button class="avatar-btn" onclick="navigateTo('profile')" title="Profile" aria-label="User profile">
                <span aria-hidden="true">YS</span>
              </button>
            </div>
          </div>

          <!-- Screen Container (Dynamically Switched) -->
          <div class="screen-viewport" id="screenViewport" role="main" aria-label="App screen content" tabindex="-1">
            <!-- Screen content injected via JS -->
          </div>

          <!-- Bottom Navigation Bar -->
          <nav class="mobile-bottom-nav" aria-label="Main navigation">
            <button class="nav-btn active" id="nav-home" onclick="navigateTo('home')" aria-label="Home screen" aria-current="page">
              <i class="fa-solid fa-house" aria-hidden="true"></i>
              <span id="navHomeText">Home</span>
            </button>
            <button class="nav-btn scan-highlight" id="nav-identify" onclick="navigateTo('identify')" aria-label="Scan animal with AI camera">
              <div class="scan-icon-circle" aria-hidden="true"><i class="fa-solid fa-camera"></i></div>
              <span>Scan AI</span>
            </button>
            <button class="nav-btn" id="nav-help" onclick="navigateTo('help')" aria-label="Find nearby vets and animal shelters">
              <i class="fa-solid fa-location-dot" aria-hidden="true"></i>
              <span id="navHelpText">Find Help</span>
            </button>
            <button class="nav-btn" id="nav-adopt" onclick="navigateTo('adopt')" aria-label="Adopt or buy pets">
              <i class="fa-solid fa-heart" aria-hidden="true"></i>
              <span id="navAdoptText">Adopt</span>
            </button>
            <button class="nav-btn" id="nav-community" onclick="navigateTo('community')" aria-label="Community lost and found alerts">
              <i class="fa-solid fa-users" aria-hidden="true"></i>
              <span id="navCommText">Community</span>
            </button>
          </nav>
        </div>
      </div>
    </div>
  </div>

  <!-- Razorpay Payment Modal Simulation -->
  <div class="modal-backdrop" id="paymentModal">
    <div class="payment-modal-card">
      <div class="rzp-header">
        <div class="rzp-brand"><i class="fa-solid fa-shield"></i> Razorpay Secure Checkout</div>
        <button class="close-btn" onclick="closePaymentModal()">&times;</button>
      </div>
      <div class="rzp-body">
        <div class="plan-summary">
          <h4 id="rzpPlanTitle">PashuRakhshak VIP Gold Plan</h4>
          <div class="rzp-price" id="rzpPlanPrice">₹999 / year</div>
        </div>
        <p class="rzp-desc">Includes unlimited Gemini Vision deep scans, priority NGO emergency ambulance dispatch, and 24/7 AI Vet support.</p>
        <div class="payment-methods">
          <div class="pay-method active"><i class="fa-brands fa-google-pay"></i> UPI / GPay / PhonePe</div>
          <div class="pay-method"><i class="fa-regular fa-credit-card"></i> Debit / Credit Card</div>
          <div class="pay-method"><i class="fa-solid fa-building-columns"></i> Net Banking</div>
        </div>
        <button class="rzp-pay-btn" onclick="confirmPayment()">
          <i class="fa-solid fa-lock"></i> Pay Now & Activate VIP
        </button>
      </div>
    </div>
  </div>

  <!-- Hidden File Upload Inputs for Animal Photo Selection / Camera Capture -->
  <input type="file" id="animalFileInput" accept="image/*" style="display:none" onchange="handleAnimalFileSelect(event)">
  <input type="file" id="animalCameraInput" accept="image/*" capture="environment" style="display:none" onchange="handleAnimalFileSelect(event)">

  <script src="app.js"></script>
</body>
</html>
