<?php
/**
 * Plattr — public app download page (/download).
 *
 * Device-aware: server detects the visitor's platform family from the
 * User-Agent and features that download; a small client script refines the
 * highlight. Every platform's link / version / date / status is edited in
 * Command Center (Apps → App Downloads) and read from cc_settings via
 * includes/app-downloads.php. Uses the shared secondary-page chrome.
 */
require_once __DIR__ . '/../config.php';
require_once __DIR__ . '/../includes/app-downloads.php';

$__cfg        = appDownloadsConfig();
$__platforms  = $__cfg['platforms'];
$__family     = appDetectFamily($_SERVER['HTTP_USER_AGENT'] ?? '');
$__primaryKey = appPrimaryKeyForFamily($__family);

/** Reformat clean ISO dates ("2026-07-14") to "14 Jul 2026"; leave free text be. */
function dlFmtDate(string $d): string {
    $d = trim($d);
    if ($d === '') return '';
    if (preg_match('/^\d{4}-\d{2}-\d{2}/', $d) && ($ts = strtotime($d))) return date('j M Y', $ts);
    return $d;
}
function dlVerLine(array $p): string {
    $bits = [];
    if ($p['version'] !== '') $bits[] = 'v' . htmlspecialchars($p['version']);
    $dt = dlFmtDate($p['date']);
    if ($dt !== '') $bits[] = htmlspecialchars($dt);
    return implode(' <span class="dl-dot"></span> ', $bits);
}
function dlDownloadable(array $p): bool {
    return $p['status'] === 'live' && $p['url'] !== '';
}

$__primary = ($__primaryKey && isset($__platforms[$__primaryKey]) && $__platforms[$__primaryKey]['status'] !== 'hidden')
    ? $__platforms[$__primaryKey] : null;

$pageTitle = 'Download the Plattr app — iPhone, Mac, Android, Windows & Linux';
$pageDesc  = 'Get the Plattr app on every device you run your business from. Free for iPhone & iPad, Android, Windows and Linux, with Mac coming soon.';
$pageSlug  = 'download';

require __DIR__ . '/includes/page-head.php';
?>
<style>
.dl-wrap{max-width:1080px;margin:0 auto;padding:0 32px}
.dl-hero{text-align:center;padding:clamp(56px,9vw,92px) 0 16px}
.dl-eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--pb-brand-dim)}
.dl-title{font-family:'Inter',sans-serif;font-weight:800;letter-spacing:-.035em;line-height:1.02;font-size:clamp(38px,6.5vw,72px);margin:20px 0 0;text-wrap:balance}
.dl-title em{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;letter-spacing:-.01em}
.dl-lede{max-width:560px;margin:22px auto 0;font-size:clamp(16px,2vw,19px);line-height:1.55;color:var(--pb-soft)}
.dl-primary{margin:42px auto 0;max-width:440px;background:var(--pb-card);border:1px solid var(--pb-line);border-radius:24px;padding:26px;box-shadow:0 24px 60px -20px rgba(10,10,15,.16);position:relative}
.dl-primary-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--pb-brand);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 13px;border-radius:100px;box-shadow:0 6px 16px rgba(var(--pb-brand-rgb),.4);white-space:nowrap}
.dl-primary-row{display:flex;align-items:center;gap:16px;text-align:left}
.dl-primary-ic{width:58px;height:58px;flex-shrink:0;border-radius:16px;display:grid;place-items:center;font-size:32px;color:#fff;box-shadow:0 8px 18px -6px rgba(10,10,15,.4),inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 .5px rgba(255,255,255,.1)}
.dl-primary-meta{flex:1;min-width:0}
.dl-primary-dev{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em}
.dl-primary-store{display:block;font-size:13.5px;color:var(--pb-muted);margin-top:2px}
.dl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:20px;padding:15px 22px;border-radius:14px;background:var(--pb-brand);color:#fff;font-size:16px;font-weight:700;letter-spacing:-.01em;box-shadow:0 8px 22px rgba(var(--pb-brand-rgb),.35);transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s;border:none;cursor:pointer}
.dl-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(var(--pb-brand-rgb),.45)}
.dl-primary-ver{margin-top:14px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--pb-muted);letter-spacing:.02em}
.dl-primary-coming{margin-top:20px;display:flex;justify-content:center}
.dl-scrollhint{display:block;margin:26px auto 0;font-size:13.5px;color:var(--pb-muted)}
.dl-scrollhint b{color:var(--pb-ink);font-weight:600}
.dl-all{padding:clamp(48px,7vw,72px) 0 40px}
.dl-all-head{text-align:center;margin-bottom:38px}
.dl-all-h{font-size:14px;font-weight:700;letter-spacing:-.01em}
.dl-all-sub{font-size:13.5px;color:var(--pb-muted);margin-top:4px}
.dl-facts{margin-top:18px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.dl-facts span{display:inline-flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:500;letter-spacing:.01em;color:var(--pb-soft);background:var(--pb-card);border:1px solid var(--pb-line);border-radius:100px;padding:6px 12px}
.dl-facts span i{font-size:14px;color:var(--pb-brand-dim)}
.dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.dl-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.dl-grid{grid-template-columns:1fr}}
.dl-card{background:var(--pb-card);border:1px solid var(--pb-line);border-radius:20px;padding:22px;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(10,10,15,.04);transition:border-color .2s,transform .2s,box-shadow .2s}
.dl-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(10,10,15,.2);border-color:var(--pb-line-strong)}
.dl-card.is-you{border-color:rgba(var(--pb-brand-rgb),.5);box-shadow:0 0 0 1px rgba(var(--pb-brand-rgb),.4)}
.dl-card-top{display:flex;align-items:center;gap:13px}
.dl-card-ic{width:46px;height:46px;flex-shrink:0;border-radius:13px;display:grid;place-items:center;font-size:25px;color:#fff;box-shadow:0 6px 14px -5px rgba(10,10,15,.38),inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 .5px rgba(255,255,255,.1)}
.dl-card-meta{flex:1;min-width:0}
.dl-card-dev{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.dl-card-store{display:block;font-size:12.5px;color:var(--pb-muted);margin-top:2px}
.dl-you-badge{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--pb-brand-dim);background:rgba(var(--pb-brand-rgb),.1);padding:4px 9px;border-radius:100px;white-space:nowrap}
.dl-card-ver{margin-top:16px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--pb-muted);display:flex;gap:8px;align-items:center;min-height:16px}
.dl-dot{width:3px;height:3px;border-radius:50%;background:var(--pb-line-strong);flex-shrink:0}
.dl-card-foot{margin-top:auto;padding-top:16px}
.dl-card-foot-line{border-top:1px solid var(--pb-line);margin-bottom:16px}
.dl-card-btn{display:inline-flex;align-items:center;gap:7px;width:100%;justify-content:center;padding:11px 16px;border-radius:11px;background:var(--pb-ink);color:#fff;font-size:14px;font-weight:600;transition:background .2s,transform .15s;border:none;cursor:pointer}
.dl-card-btn:hover{background:var(--pb-brand);transform:translateY(-1px)}
.dl-card-btn--ghost{background:transparent;color:var(--pb-soft);border:1px solid var(--pb-line-strong);cursor:default}
.dl-card-btn--ghost:hover{background:transparent;transform:none}
.dl-coming{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#b45309;background:rgba(251,191,36,.14);padding:5px 11px;border-radius:100px}
</style>

<main class="dl-wrap">
  <section class="dl-hero">
    <div class="dl-eyebrow">Download Plattr</div>
    <h1 class="dl-title">Your whole shop,<br><em>in your pocket.</em></h1>
    <p class="dl-lede">Take orders, tweak your menu, and keep an eye on the day from anywhere. The Plattr app is on every device you run your business from.</p>

    <?php if ($__primary): ?>
    <div class="dl-primary" id="dlPrimary" data-primary-key="<?= htmlspecialchars($__primaryKey) ?>">
      <span class="dl-primary-tag">Detected &middot; your device</span>
      <div class="dl-primary-row">
        <span class="dl-primary-ic" style="background:<?= htmlspecialchars($__primary['accent']) ?>"><i class="bx <?= htmlspecialchars($__primary['icon']) ?>"></i></span>
        <span class="dl-primary-meta">
          <span class="dl-primary-dev"><?= htmlspecialchars($__primary['label']) ?></span>
          <span class="dl-primary-store"><?= htmlspecialchars($__primary['store']) ?></span>
        </span>
      </div>
      <?php if (dlDownloadable($__primary)): ?>
        <a href="<?= htmlspecialchars($__primary['url']) ?>" class="dl-btn" rel="noopener"><i class="bx <?= htmlspecialchars($__primary['icon']) ?>"></i> Get Plattr for <?= htmlspecialchars($__primary['label']) ?></a>
        <?php $vl = dlVerLine($__primary); if ($vl !== ''): ?><div class="dl-primary-ver"><?= $vl ?></div><?php endif; ?>
      <?php else: ?>
        <div class="dl-primary-coming"><span class="dl-coming"><i class="bx bx-time-five"></i> Coming soon</span></div>
      <?php endif; ?>
    </div>
    <?php endif; ?>

    <span class="dl-scrollhint">On another device? <b>See every version below &darr;</b></span>
  </section>

  <section class="dl-all" id="dlAll">
    <div class="dl-all-head">
      <div class="dl-all-h">Available on every platform</div>
      <div class="dl-all-sub">One account. All your devices, always in sync.</div>
      <div class="dl-facts">
        <span><i class="bx bx-download"></i> Free download</span>
        <span><i class="bx bx-sync"></i> Always in sync</span>
        <span><i class="bx bx-refresh"></i> Auto-updating</span>
      </div>
    </div>
    <div class="dl-grid">
      <?php foreach ($__platforms as $key => $p): if ($p['status'] === 'hidden') continue; ?>
      <div class="dl-card<?= $key === $__primaryKey ? ' is-you' : '' ?>" data-key="<?= htmlspecialchars($key) ?>" data-family="<?= htmlspecialchars($p['family']) ?>">
        <div class="dl-card-top">
          <span class="dl-card-ic" style="background:<?= htmlspecialchars($p['accent']) ?>"><i class="bx <?= htmlspecialchars($p['icon']) ?>"></i></span>
          <span class="dl-card-meta"><span class="dl-card-dev"><?= htmlspecialchars($p['label']) ?></span><span class="dl-card-store"><?= htmlspecialchars($p['store']) ?></span></span>
          <span class="dl-you-badge"<?= $key === $__primaryKey ? '' : ' hidden' ?>>Your device</span>
        </div>
        <div class="dl-card-ver">
          <?php if ($p['status'] === 'coming'): ?>
            <span class="dl-coming"><i class="bx bx-time-five"></i> <?= $key === 'mac' ? 'Coming this month' : 'Coming soon' ?></span>
          <?php else: $vl = dlVerLine($p); echo $vl !== '' ? $vl : '<span style="opacity:.6">Latest version</span>'; endif; ?>
        </div>
        <div class="dl-card-foot">
          <div class="dl-card-foot-line"></div>
          <?php if (dlDownloadable($p)): ?>
            <a href="<?= htmlspecialchars($p['url']) ?>" class="dl-card-btn" rel="noopener"><i class="bx bx-download"></i> <?= htmlspecialchars($p['store']) ?></a>
          <?php else: ?>
            <span class="dl-card-btn dl-card-btn--ghost"><?= $p['status'] === 'coming' ? 'Not yet available' : 'Coming soon' ?></span>
          <?php endif; ?>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
  </section>
</main>

<script>
/* Refine the "your device" highlight client-side — the server UA can be
   generic (proxies, privacy modes). Never downgrades: only re-points the
   highlight when the browser is confident about the family. */
(function () {
  var ua = (navigator.userAgent || '').toLowerCase();
  var plat = (navigator.userAgentData && navigator.userAgentData.platform || navigator.platform || '').toLowerCase();
  var fam = '';
  if (/iphone|ipad|ipod/.test(ua) || (plat.indexOf('mac') === 0 && navigator.maxTouchPoints > 1)) fam = 'ios';
  else if (ua.indexOf('android') > -1) fam = 'android';
  else if (plat.indexOf('mac') === 0 || ua.indexOf('mac os x') > -1) fam = 'mac';
  else if (plat.indexOf('win') === 0 || ua.indexOf('windows') > -1) fam = 'windows';
  else if (ua.indexOf('linux') > -1 || plat.indexOf('linux') > -1) fam = 'linux';
  if (!fam) return;

  var cards = Array.prototype.slice.call(document.querySelectorAll('.dl-card'));
  var serverFam = (document.querySelector('.dl-card.is-you') || {}).getAttribute
    ? document.querySelector('.dl-card.is-you').getAttribute('data-family') : '';
  if (serverFam === fam) return;   // server already right

  cards.forEach(function (c) {
    var isYou = c.getAttribute('data-family') === fam;
    c.classList.toggle('is-you', isYou);
    var b = c.querySelector('.dl-you-badge');
    if (b) b.hidden = !isYou;
  });
})();
</script>

<?php require __DIR__ . '/includes/page-foot.php'; ?>
