<?php
// Public landing page for store review/support and app users.
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pyrk Official App</title>
  <link rel="manifest" href="/steps/public/manifest.webmanifest">
  <meta name="theme-color" content="#087f5b">
  <link rel="apple-touch-icon" href="/steps/public/assets/icons/apple-touch-icon.png">
  <link rel="stylesheet" href="/steps/public/assets/css/pwa_app_shell.css?v=2">
  <style>
    body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at top,#e8fff3,#f5f8fb 45%,#ffffff);color:#102033;min-height:100vh;padding:28px}
    .wrap{max-width:980px;margin:0 auto}.hero{background:#fff;border:1px solid #dcefe7;border-radius:34px;padding:34px;box-shadow:0 30px 90px rgba(16,32,51,.12);display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:center}.icon{width:120px;height:120px;border-radius:28px;box-shadow:0 22px 50px rgba(8,127,91,.22)}.eyebrow{letter-spacing:.18em;text-transform:uppercase;color:#087f5b;font-weight:900;margin:0 0 8px}.hero h1{font-size:clamp(34px,5vw,62px);line-height:.95;margin:0 0 12px}.hero p{font-size:18px;line-height:1.55;color:#64748b;margin:0}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}.card{background:#fff;border:1px solid #e2e8f0;border-radius:24px;padding:22px;box-shadow:0 18px 50px rgba(16,32,51,.08)}.card strong{display:block;margin-bottom:7px}.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:18px;padding:14px 18px;font-weight:900}.primary{background:#087f5b;color:white}.soft{background:#ecfdf5;color:#087f5b;border:1px solid #b7efd1}@media(max-width:700px){.hero{grid-template-columns:1fr;text-align:center}.icon{margin:auto}.grid{grid-template-columns:1fr}.btnrow{justify-content:center}}
  </style>
</head>
<body>
  <main class="wrap">
    <section class="hero">
      <img class="icon" src="/steps/public/assets/icons/pyrk-icon-512.png" alt="Pyrk app icon">
      <div>
        <p class="eyebrow">Official mobile app</p>
        <h1>Pyrk Walking Club</h1>
        <p>Join walks, open your route journey, scan QR checkpoints, upload photos, earn badges and manage rewards from a mobile-first experience.</p>
        <div class="btnrow">
          <a class="btn primary" href="/steps/public/login-dev.php?source=app">Open member portal</a>
          <a class="btn soft" href="/steps/public/privacy.php">Privacy policy</a>
          <a class="btn soft" href="/steps/public/terms.php">Terms</a>
        </div>
      </div>
    </section>
    <section class="grid">
      <article class="card"><strong>Member pass</strong><span>QR access, profile, registration status and walk history.</span></article>
      <article class="card"><strong>Walk journey</strong><span>Routes, checkpoints, check-in, finish scan and photos.</span></article>
      <article class="card"><strong>Rewards</strong><span>Badges, loyalty points, prizes and engagement tools.</span></article>
    </section>
  </main>
  <script defer src="/steps/public/assets/js/pwa_install.js?v=2"></script>
</body>
</html>
