<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Trail Your Map — Vandringsleder, kartor & reseplanering</title>
<link rel="canonical" href="https://trailyourmap.com/">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#0d1f18">
<meta name="description" content="Hitta vandringsleder i Sverige, Norge och hela världen. Officiella topografiska kartor, reseplanering med boende, AI-guide, väder och GPS — helt gratis.">
<meta name="keywords" content="vandring, vandringsleder, kungsleden, sörmlandsleden, kartor, hiking, sverige, norge, gpx, reseplanering, friluftsliv">
<meta name="robots" content="index, follow">
<meta name="author" content="Bontrax AB">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://trailyourmap.com/">
<meta property="og:title" content="Trail Your Map — Vandringsleder & reseplanering">
<meta property="og:description" content="Hitta vandringsleder i hela världen. Planera resan med boende längs leden, AI-guide och officiella kartor — helt gratis.">
<meta property="og:image" content="https://trailyourmap.com/icon-512.png">
<meta property="og:locale" content="sv_SE">
<meta property="og:locale:alternate" content="en_US">
<meta property="og:site_name" content="Trail Your Map">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Trail Your Map — Vandringsleder & reseplanering">
<meta name="twitter:description" content="Hitta vandringsleder i hela världen. AI-guide, officiella kartor och reseplanering — helt gratis.">
<meta name="twitter:image" content="https://trailyourmap.com/icon-512.png">
<!-- JSON-LD Structured Data for rich Google snippets -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "Trail Your Map",
  "url": "https://trailyourmap.com/",
  "description": "Hitta vandringsleder i Sverige, Norge och hela världen. Officiella topografiska kartor, reseplanering med boende, AI-guide, väder och GPS — helt gratis.",
  "applicationCategory": "TravelApplication",
  "operatingSystem": "Any (Web, iOS, Android)",
  "offers": { "@type": "Offer", "price": "0", "priceCurrency": "SEK" },
  "publisher": {
    "@type": "Organization",
    "name": "Bontrax AB",
    "url": "https://trailyourmap.com/about.html"
  },
  "featureList": [
    "33,000+ officiella vandringsleder i Sverige och Norge",
    "Miljontals leder globalt via OpenStreetMap",
    "Officiella topografiska kartor från 13 länder",
    "Reseplanerare med dag-för-dag-planering",
    "AI-guide för personliga råd",
    "GPX-uppladdning och GPS-tracking",
    "Offline-stöd och Visit Sweden-data",
    "Vandringsgrupper och delning"
  ]
}
</script>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="TrailMap">
<link rel="apple-touch-icon" href="icon-192.png">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,400;1,9..144,600&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">

<style>
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --forest: #0d1f18;
  --moss:   #1a3a2e;
  --sage:   #6b8e7f;
  --amber:  #d4743a;
  --cream:  #f0ebe0;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top:    env(safe-area-inset-top, 0px);
}

html, body {
  height: 100%; overflow: hidden;
  font-family: 'Inter', sans-serif;
  background: var(--forest); color: var(--cream);
  -webkit-tap-highlight-color: transparent;
}

/* ── HERO BACKGROUND ── */
.hero {
  position: fixed; inset: 0;
  background-image: url('hiking-background.png');
  background-size: cover; background-position: center 25%;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(170deg,
    rgba(13,31,24,0.05) 0%,
    rgba(13,31,24,0.12) 35%,
    rgba(13,31,24,0.65) 58%,
    rgba(13,31,24,0.95) 75%,
    #0d1f18 100%);
}

/* ── LOGO ── */
.logo {
  position: fixed;
  top: max(var(--safe-top), 1.2rem);
  left: 1.4rem; z-index: 30;
  opacity: 0; animation: fadeDown 0.5s ease 0.1s forwards;
}
.logo-text {
  font-size: 0.6rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--amber); font-weight: 500;
}

/* ── LAYOUT ── */
.layout {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: max(var(--safe-bottom), 1.2rem);
  overflow: hidden;
}

.content { padding: 0 1.4rem; display: flex; flex-direction: column; }

/* ── HEADLINE ── */
.headline {
  opacity: 0; animation: fadeUp 0.6s ease 0.25s forwards;
  margin-bottom: 0;
  position: fixed;
  top: max(var(--safe-top), 5.5rem);
  left: 1.4rem; right: 1.4rem;
  z-index: 15;
}
.headline h1 {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: clamp(1.5rem, 5vw, 1.95rem); font-weight: 600;
  line-height: 1.1; color: var(--cream); letter-spacing: -0.02em;
}
.headline h1 em { font-style: normal; color: var(--amber); }
.headline .sub {
  margin-top: 0.45rem; font-size: 0.78rem; font-weight: 300;
  color: rgba(240,235,224,0.58); line-height: 1.45; max-width: 280px;
}

/* ── PILLS ── */
.pills {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-bottom: 1.1rem;
  opacity: 0; animation: fadeUp 0.6s ease 0.4s forwards;
}
.pill {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  background: rgba(26,58,46,0.72); border: 1px solid rgba(107,142,127,0.28);
  border-radius: 100px; font-size: 0.75rem; font-weight: 400;
  color: rgba(240,235,224,0.8);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pill .dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.pill.amber .dot { background: var(--amber); }
.pill.green .dot { background: #34c759; }
.pill.blue  .dot  { background: #4a9eda; }

/* ── SCROLLABLE CARDS ── */
.cards {
  display: flex; gap: 0.55rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  margin: 0 -1.4rem; padding: 0 1.4rem 0.3rem;
  margin-bottom: 1.1rem;
  opacity: 0; animation: fadeUp 0.6s ease 0.55s forwards;
}
.cards::-webkit-scrollbar { display: none; }

.card {
  flex: 0 0 175px; scroll-snap-align: start;
  background: rgba(15,36,26,0.82); border: 1px solid rgba(107,142,127,0.18);
  border-radius: 14px; padding: 0.9rem 0.85rem;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: flex; flex-direction: column; gap: 0.4rem;
  position: relative; overflow: hidden; cursor: default;
}
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; border-radius: 14px 14px 0 0;
}
.card.safety::before  { background: linear-gradient(90deg,#34c759,transparent); }
.card.weather::before { background: linear-gradient(90deg,#4a9eda,transparent); }
.card.ai::before      { background: linear-gradient(90deg,#af52de,transparent); }
.card.routes::before  { background: linear-gradient(90deg,var(--amber),transparent); }
.card.maps::before    { background: linear-gradient(90deg,#ff9500,transparent); }
.card.search::before  { background: linear-gradient(90deg,#34c759,transparent); }
.card.groups::before  { background: linear-gradient(90deg,#5ac8fa,transparent); }
.card.install::before { background: linear-gradient(90deg,var(--amber),transparent); }

.card-icon  { font-size: 1.35rem; line-height: 1; }
.card-title { font-family: 'Fraunces', serif; font-size: 0.88rem; font-weight: 600; color: var(--cream); line-height: 1.2; }
.card-body  { font-size: 0.73rem; font-weight: 300; color: rgba(240,235,224,0.5); line-height: 1.45; flex: 1; }
.card-note  { font-size: 0.63rem; letter-spacing: 0.07em; text-transform: uppercase; margin-top: 0.1rem; }
.card.safety  .card-note { color: #34c759; }
.card.weather .card-note { color: #4a9eda; }
.card.ai      .card-note { color: #af52de; }
.card.routes  .card-note { color: var(--amber); }
.card.maps    .card-note { color: #ff9500; }
.card.search  .card-note { color: #34c759; }
.card.groups  .card-note { color: #5ac8fa; }
.card.install .card-note { color: var(--amber); }

.card.install {
  cursor: pointer; border-color: rgba(212,116,58,0.3);
  transition: border-color 0.2s, transform 0.15s;
  -webkit-user-select: none; user-select: none;
}
.card.install:active { transform: scale(0.97); border-color: rgba(212,116,58,0.7); }

/* ── CTA ── */
.cta-area {
  opacity: 0; animation: fadeUp 0.6s ease 0.7s forwards;
  padding-bottom: 0;
}
.cta-btn {
  display: block; width: 100%; padding: 0.95rem;
  background: linear-gradient(135deg, var(--amber) 0%, #b85f28 100%);
  border: none; border-radius: 14px; color: white;
  font-family: 'Fraunces', serif; font-size: 1.05rem; font-weight: 600;
  text-align: center; text-decoration: none; cursor: pointer;
  box-shadow: 0 4px 22px rgba(212,116,58,0.38);
  transition: opacity 0.2s, transform 0.15s;
  -webkit-user-select: none; user-select: none;
}
.cta-btn:active { opacity: 0.85; transform: scale(0.98); }
.cta-note {
  text-align: center; font-size: 0.7rem;
  color: rgba(240,235,224,0.3); margin-top: 0.6rem; font-weight: 300;
}

/* ── INSTALL MODAL ── */
.install-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: flex-end; justify-content: center;
}
.install-overlay.open { display: flex; }
.install-sheet {
  background: linear-gradient(135deg, #1a3a2e, #122b20);
  border: 1px solid rgba(107,142,127,0.3);
  border-radius: 24px 24px 0 0;
  padding: 1.5rem 1.5rem max(var(--safe-bottom), 1.5rem);
  width: 100%; max-width: 480px;
  animation: slideUp 0.35s cubic-bezier(0.32,0.72,0,1) forwards;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.install-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: rgba(240,235,224,0.2); margin: 0 auto 1.2rem;
}
.install-title {
  font-family: 'Fraunces', serif; font-size: 1.2rem; font-weight: 600;
  color: var(--cream); margin-bottom: 0.35rem;
}
.install-sub { font-size: 0.82rem; color: rgba(240,235,224,0.5); margin-bottom: 1.4rem; }

.install-steps { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 1.4rem; }
.install-step {
  display: flex; align-items: flex-start; gap: 0.85rem;
}
.step-num {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: rgba(212,116,58,0.2); border: 1px solid rgba(212,116,58,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 600; color: var(--amber);
}
.step-icon { font-size: 1.1rem; width: 28px; text-align: center; flex-shrink: 0; margin-top: 0.1rem; }
.step-text { font-size: 0.86rem; line-height: 1.45; color: rgba(240,235,224,0.85); padding-top: 0.25rem; }
.step-text strong { color: var(--cream); font-weight: 500; }

.install-close {
  width: 100%; padding: 0.85rem;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; color: rgba(240,235,224,0.7);
  font-size: 0.9rem; cursor: pointer;
  -webkit-user-select: none; user-select: none;
}

/* ── ALREADY INSTALLED BANNER ── */
.installed-banner {
  display: none; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  background: rgba(52,199,89,0.12); border: 1px solid rgba(52,199,89,0.3);
  border-radius: 10px; margin-bottom: 0.8rem;
  font-size: 0.8rem; color: #34c759;
}

/* ── LEGAL FOOTER ── */
.legal-footer {
  position: fixed;
  bottom: max(var(--safe-bottom), 0.6rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  display: flex;
  gap: 0.9rem;
  align-items: center;
  font-size: 0.62rem;
  color: rgba(240, 235, 224, 0.32);
  background: rgba(13, 31, 24, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.35rem 0.85rem;
  border-radius: 100px;
  border: 1px solid rgba(107, 142, 127, 0.15);
  white-space: nowrap;
  pointer-events: auto;
}
.legal-footer a {
  color: rgba(240, 235, 224, 0.55);
  text-decoration: none;
  transition: color 0.2s;
}
.legal-footer a:hover { color: var(--amber); }
.legal-footer .sep { opacity: 0.4; }
@media (max-width: 600px) {
  .legal-footer {
    font-size: 0.58rem;
    gap: 0.6rem;
    padding: 0.3rem 0.7rem;
  }
}

/* ── ANIMATIONS ── */
@keyframes fadeUp   { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
</style>
</head>
<body>

<!-- ── Logo (top center) ── -->
<a href="index.html" id="logoLink" style="
  position: fixed;
  top: max(env(safe-area-inset-top, 0px), 0.8rem);
  left: 1.4rem;
  z-index: 30;
  display: flex; align-items: center; gap: 0.5rem;
  text-decoration: none;
  opacity: 0; animation: fadeDown 0.5s ease 0.1s forwards;
">
  <img src="logga.png" alt="Trail Your Map" style="
    width: 56px; height: 56px;
    border-radius: 50%;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
    background: white;
  ">
</a>

<!-- ── Language selector ── -->
<div id="langSelector" style="
  position:fixed; top:max(env(safe-area-inset-top,0px),0.9rem); right:1.1rem;
  z-index:100; display:flex; gap:0.4rem;
  font-family:Inter,sans-serif;
">
  <button id="langBtnSv" onclick="applyWelcomeLang('sv')" style="
    background:rgba(13,31,24,0.85); border:1.5px solid rgba(107,142,127,0.35);
    border-radius:20px; padding:0.32rem 0.7rem; cursor:pointer;
    font-size:0.8rem; color:rgba(232,244,234,0.8);
    display:flex; align-items:center; gap:0.3rem;
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    transition:border-color 0.2s, background 0.2s;
  " aria-label="Svenska">
    🇸🇪 <span>SV</span>
  </button>
  <button id="langBtnEn" onclick="applyWelcomeLang('en')" style="
    background:rgba(13,31,24,0.85); border:1.5px solid rgba(107,142,127,0.35);
    border-radius:20px; padding:0.32rem 0.7rem; cursor:pointer;
    font-size:0.8rem; color:rgba(232,244,234,0.8);
    display:flex; align-items:center; gap:0.3rem;
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    transition:border-color 0.2s, background 0.2s;
  " aria-label="English">
    🇬🇧 <span>EN</span>
  </button>
</div>

<script>
// Lang shim — ensures applyWelcomeLang works before main script loads
window.__pendingLang = null;
window.applyWelcomeLang = function(lang) {
  localStorage.setItem('lang', lang);
  window.__pendingLang = lang;
  // Will be overwritten by full implementation below
  // Immediately update button styles
  document.querySelectorAll('[id^="langBtn"],[id^="langPick"]').forEach(function(btn) {
    var isSv = btn.id.includes('Sv');  // only top-right buttons
    var active = (lang === 'sv' && isSv) || (lang === 'en' && !isSv);
    btn.style.borderColor = active ? 'rgba(212,116,58,0.8)' : 'rgba(107,142,127,0.3)';
    btn.style.background  = active ? 'rgba(212,116,58,0.18)' : 'rgba(13,31,24,0.7)';
    btn.style.color       = active ? '#d4743a' : 'rgba(232,244,234,0.85)';
  });
};
</script>

<div class="hero"></div>


<div class="headline">
  <div style="display:inline-block;background:rgba(13,31,24,0.75);border:1px solid rgba(107,142,127,0.28);border-radius:16px;padding:1rem 1.2rem;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);">
    <h1 style="color:var(--amber);" data-i18n="headline">Hitta vägen.</h1>
    <p class="sub" style="max-width:100%;" data-i18n="sub">Officiella kartor, miljontals leder och GPS-spårning — med AI-guide och gruppfunktioner.</p>
  </div>
</div>

<div class="layout">
  <div class="content">



    <div class="pills">
      <div class="pill green"><span class="dot"></span><span data-i18n="pill_free">Helt gratis</span></div>
      <div class="pill blue"><span class="dot"></span><span data-i18n="pill_maps">13 länder · 29 kartor</span></div>
      <div class="pill amber"><span class="dot"></span><span data-i18n="pill_offline">Fungerar offline</span></div>
    </div>

    <div class="cards" id="cards">

      <!-- Card 1: Maria AI (lead) -->
      <div class="card ai" onclick="location.href='app.html?tab=maria'" style="cursor:pointer;">
        <div class="card-icon">🤖</div>
        <div class="card-title" data-i18n="card_maria_title">Fråga Maria — din AI-guide</div>
        <div class="card-body" data-i18n="card_maria_body">Hjälper dig med allt: utrustning, svårighetsgrad, väder, ledförslag och packlistor. Få personliga råd och tips inför varje vandring — alltid tillgänglig.</div>
        <div class="card-note" data-i18n="card_maria_note">💬 Frågor · 💡 Tips · 🎒 Råd · 🤖 Powered by Claude</div>
      </div>

      <!-- Card 2: Trip Planner -->
      <div class="card routes" onclick="location.href='app.html?tab=explore'" style="cursor:pointer;">
        <div class="card-icon">📋</div>
        <div class="card-title" data-i18n="card_planner_title">Planera hela resan</div>
        <div class="card-body" data-i18n="card_planner_body">Välj en led — få en färdig dag-för-dag-plan med boende, transport och utrustning. Boka allt från kartan, via Booking.com.</div>
        <div class="card-note" data-i18n="card_planner_note">🏨 Boende · 🚌 Transport · 🎒 Utrustning</div>
      </div>

      <!-- Card 3: Trails & Routes -->
      <div class="card maps">
        <div class="card-icon">🗺️</div>
        <div class="card-title" data-i18n="card_trails_title">Leder och rutter i hela världen</div>
        <div class="card-body" data-i18n="card_trails_body">33 000+ officiella svenska och norska leder, plus miljontals stigar globalt via OpenStreetMap. Rita egna rutter direkt på topografiska kartor från Lantmäteriet, Kartverket och fler.</div>
        <div class="card-note" data-i18n="card_trails_note">29 kartor · 13 länder · OSM · NVR</div>
      </div>

      <!-- Card 4: Weather -->
      <div class="card weather">
        <div class="card-icon">⛅</div>
        <div class="card-title" data-i18n="card_weather_title">Väder du kan lita på</div>
        <div class="card-body" data-i18n="card_weather_body">7-dagars prognos med vandringsbedömning för exakt din position på leden. Höjdprofil och väder i en vy — så vet du om resan blir lyckad.</div>
        <div class="card-note" data-i18n="card_weather_note">SMHI · Yr · Smartare planering</div>
      </div>

      <!-- Card 5: Hiking Groups -->
      <div class="card groups">
        <div class="card-icon">🏕️</div>
        <div class="card-title" data-i18n="card_groups_title">Vandringsgrupper</div>
        <div class="card-body" data-i18n="card_groups_body">Skapa grupp, dela leder och se varandras position i realtid. Planera vandringen tillsammans med datum, tid och samlingsplats — med kalendervy.</div>
        <div class="card-note" data-i18n="card_groups_note">📍 Realtid · 🗓️ Planering · 🗺️ Karta</div>
      </div>

      <!-- Card 6: All free features -->
      <div class="card ai">
        <div class="card-icon">💚</div>
        <div class="card-title" data-i18n="card_free_title">Allt detta — helt gratis</div>
        <div class="card-body" data-i18n="card_free_body">Live GPS-spårning, offline-kartor, AI-guiden Maria, GPX-uppladdning, statistik och achievements, sparade favoritleder och global ledsökning. Inget abonnemang, inga annonser, inget krångel.</div>
        <div class="card-note" data-i18n="card_free_note">🔴 Live · 📥 Offline · 🤖 AI · ⭐ Favoriter</div>
      </div>

      <!-- Card 7: Install as app -->
      <div class="card install" id="installCard" onclick="showInstallSheet()">
        <div class="card-icon">📲</div>
        <div class="card-title" data-i18n="card_install_title">Installera som app</div>
        <div class="card-body" id="installCardBody" data-i18n="card_install_body">Lägg till på hemskärmen — fungerar offline och startar direkt utan webbläsare. Som en riktig app, men utan App Store.</div>
        <div class="card-note" id="installCardNote" data-i18n="card_install_note">📱 Tryck för att installera</div>
      </div>

    </div>

    <div id="installedBanner" class="installed-banner" data-i18n="installed_banner">✅ Appen är installerad på din hemskärm</div>

    <div class="cta-area">
      <!-- Language pick inline above CTA -->
      
      <a href="app.html?tab=explore" class="cta-btn" id="ctaBtn" data-i18n="cta_btn">Börja utforska →</a>
      <p class="cta-note" data-i18n="cta_note">Inget konto krävs · Gratis för alltid</p>
    </div>

  </div>
</div>

<!-- ── INSTALL SHEET ── -->
<div class="install-overlay" id="installOverlay" onclick="closeInstallSheet(event)">
  <div class="install-sheet" id="installSheet">
    <div class="install-handle"></div>
    <div class="install-title" id="installTitle">📲 Installera Trail Your Map</div>
    <div class="install-sub" id="installSub">Lägg till på hemskärmen för snabb åtkomst och offline-bruk.</div>
    <div class="install-steps" id="installSteps"></div>
    <button class="install-close" onclick="closeInstallSheet()">Stäng</button>
  </div>
</div>

<script>
// ── Scroll cards with wheel ──
const cards = document.getElementById('cards');
if (cards) {
  cards.addEventListener('wheel', e => {
    e.preventDefault();
    cards.scrollLeft += e.deltaY + e.deltaX;
  }, { passive: false });
}

// ── Detect platform ──
const ua = navigator.userAgent;
const isIos     = /iphone|ipad|ipod/i.test(ua);
const isAndroid = /android/i.test(ua);
const isChrome  = /chrome/i.test(ua) && !/edge/i.test(ua);
const isSafari  = /safari/i.test(ua) && !/chrome/i.test(ua);
const isFirefox = /firefox/i.test(ua);
const isStandalone = window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone;

// ── Already installed ──
if (isStandalone) {
  const card = document.getElementById('installCard');
  if (card) card.style.display = 'none';
  const banner = document.getElementById('installedBanner');
  if (banner) banner.style.display = 'flex';
}

// ── Android Chrome: native prompt ──
let deferredPrompt = null;
window.addEventListener('beforeinstallprompt', e => {
  e.preventDefault();
  deferredPrompt = e;
  const card = document.getElementById('installCard');
  if (card) {
    card.style.borderColor = 'rgba(212,116,58,0.55)';
    card.style.background  = 'rgba(26,50,30,0.9)';
    document.getElementById('installCardNote').textContent = '⬇️ Installera nu';
  }
});

window.addEventListener('appinstalled', () => {
  const card = document.getElementById('installCard');
  if (card) card.style.display = 'none';
  const banner = document.getElementById('installedBanner');
  if (banner) banner.style.display = 'flex';
  closeInstallSheet();
});

// ── Show install sheet ──
function showInstallSheet() {
  // Android Chrome: trigger native prompt if available
  if (deferredPrompt) {
    deferredPrompt.prompt();
    deferredPrompt.userChoice.then(({ outcome }) => {
      deferredPrompt = null;
      if (outcome === 'accepted') {
        document.getElementById('installCardBody').textContent = 'Installeras…';
        document.getElementById('installCardNote').textContent = '✅ Klar!';
      }
    });
    return;
  }

  // Build platform-specific steps
  let title, sub, steps;

  if (isIos && isSafari) {
    title = '📲 Installera på iPhone / iPad';
    sub   = 'Öppna den här sidan i Safari och följ dessa steg:';
    steps = [
      { icon: '⬆️', text: 'Tryck på <strong>Dela-ikonen</strong> längst ner i Safari (rutan med en pil uppåt)' },
      { icon: '📋', text: 'Scrollar ner i menyn och tryck på <strong>"Lägg till på hemskärmen"</strong>' },
      { icon: '✅', text: 'Tryck <strong>"Lägg till"</strong> uppe till höger — klart!' },
    ];
  } else if (isIos && !isSafari) {
    title = '📲 Installera på iPhone / iPad';
    sub   = 'Du behöver öppna sidan i Safari för att installera appen.';
    steps = [
      { icon: '🧭', text: 'Öppna <strong>Safari</strong> på din iPhone eller iPad' },
      { icon: '🔗', text: 'Gå till <strong>trailyourmap.com</strong>' },
      { icon: '⬆️', text: 'Tryck på <strong>Dela-ikonen</strong> och välj "Lägg till på hemskärmen"' },
    ];
  } else if (isAndroid && isFirefox) {
    title = '📲 Installera på Android';
    sub   = 'I Firefox väljer du att lägga till som genväg:';
    steps = [
      { icon: '⋮',  text: 'Tryck på <strong>menyn (⋮)</strong> uppe till höger i Firefox' },
      { icon: '📌', text: 'Välj <strong>"Lägg till på hemskärmen"</strong> eller "Installera"' },
      { icon: '✅', text: 'Bekräfta — appen läggs till på hemskärmen' },
    ];
  } else if (isAndroid) {
    title = '📲 Installera på Android';
    sub   = 'Öppna i Chrome och installera med ett tryck:';
    steps = [
      { icon: '⋮',  text: 'Tryck på <strong>menyn (⋮)</strong> uppe till höger i Chrome' },
      { icon: '📲', text: 'Välj <strong>"Lägg till på startskärmen"</strong> eller "Installera app"' },
      { icon: '✅', text: 'Tryck <strong>"Installera"</strong> — appen är klar att använda!' },
    ];
  } else {
    // Desktop
    title = '📲 Installera Trail Your Map';
    sub   = 'Öppna appen i Chrome eller Safari på din telefon för bäst upplevelse.';
    steps = [
      { icon: '📱', text: 'Öppna <strong>trailyourmap.com</strong> i Chrome på Android eller Safari på iPhone' },
      { icon: '📲', text: 'Följ installationsinstruktionerna som visas i webbläsaren' },
      { icon: '🚀', text: 'Appen startar direkt från hemskärmen — utan webbläsare!' },
    ];
  }

  document.getElementById('installTitle').textContent = title;
  document.getElementById('installSub').textContent   = sub;

  const stepsEl = document.getElementById('installSteps');
  stepsEl.innerHTML = steps.map((s, i) => `
    <div class="install-step">
      <span class="step-num">${i + 1}</span>
      <span class="step-icon">${s.icon}</span>
      <span class="step-text">${s.text}</span>
    </div>`).join('');

  document.getElementById('installOverlay').classList.add('open');
}

function closeInstallSheet(e) {
  if (e && e.target !== document.getElementById('installOverlay')) return;
  document.getElementById('installOverlay').classList.remove('open');
}


// ==================== WELCOME PAGE i18n ====================

const WELCOME_LANGS = {
  sv: {
    html_lang: 'sv',
    page_title: 'Trail Your Map — Din guide i naturen',
    headline: 'Hitta vägen.',
    sub: 'Officiella kartor, miljontals leder och GPS-spårning — med AI-guide och gruppfunktioner.',
    pill_free: 'Helt gratis',
    pill_maps: '13 länder · 29 kartor',
    pill_offline: 'Fungerar offline',

    card_maria_title: 'Fråga Maria — din AI-guide',
    card_maria_body: 'Hjälper dig med allt: utrustning, svårighetsgrad, väder, ledförslag och packlistor. Få personliga råd och tips inför varje vandring — alltid tillgänglig.',
    card_maria_note: '💬 Frågor · 💡 Tips · 🎒 Råd · 🤖 Powered by Claude',

    card_planner_title: 'Planera hela resan',
    card_planner_body: 'Välj en led — få en färdig dag-för-dag-plan med boende, transport och utrustning. Boka allt från kartan, via Booking.com.',
    card_planner_note: '🏨 Boende · 🚌 Transport · 🎒 Utrustning',

    card_trails_title: 'Leder och rutter i hela världen',
    card_trails_body: '33 000+ officiella svenska och norska leder, plus miljontals stigar globalt via OpenStreetMap. Rita egna rutter direkt på topografiska kartor från Lantmäteriet, Kartverket och fler.',
    card_trails_note: '29 kartor · 13 länder · OSM · NVR',

    card_weather_title: 'Väder du kan lita på',
    card_weather_body: '7-dagars prognos med vandringsbedömning för exakt din position på leden. Höjdprofil och väder i en vy — så vet du om resan blir lyckad.',
    card_weather_note: 'SMHI · Yr · Smartare planering',

    card_groups_title: 'Vandringsgrupper',
    card_groups_body: 'Skapa grupp, dela leder och se varandras position i realtid. Planera vandringen tillsammans med datum, tid och samlingsplats — med kalendervy.',
    card_groups_note: '📍 Realtid · 🗓️ Planering · 🗺️ Karta',

    card_free_title: 'Allt detta — helt gratis',
    card_free_body: 'Live GPS-spårning, offline-kartor, AI-guiden Maria, GPX-uppladdning, statistik och achievements, sparade favoritleder och global ledsökning. Inget abonnemang, inga annonser, inget krångel.',
    card_free_note: '🔴 Live · 📥 Offline · 🤖 AI · ⭐ Favoriter',

    card_install_title: 'Installera som app',
    card_install_body: 'Lägg till på hemskärmen — fungerar offline och startar direkt utan webbläsare. Som en riktig app, men utan App Store.',
    card_install_note: '📱 Tryck för att installera',

    installed_banner: '✅ Appen är installerad på din hemskärm',
    legal_about: 'Om oss',
    legal_privacy: 'Integritet',
    legal_terms: 'Villkor',
    cta_btn: 'Börja utforska →',
    cta_note: 'Inget konto krävs · Gratis för alltid',

    lang_flag: '🇸🇪',
    lang_label: 'SV',
    lang_switch_to: 'en',
  },
  en: {
    html_lang: 'en',
    page_title: 'Trail Your Map — Your guide in the outdoors',
    headline: 'Find your way.',
    sub: 'Official maps, millions of trails and GPS tracking — with AI guide and group features.',
    pill_free: 'Completely free',
    pill_maps: '13 countries · 29 maps',
    pill_offline: 'Works offline',

    card_maria_title: 'Ask Maria — your AI guide',
    card_maria_body: 'Helps you with everything: gear, difficulty, weather, trail suggestions and packing lists. Get personal advice and tips before every hike — always available.',
    card_maria_note: '💬 Questions · 💡 Tips · 🎒 Advice · 🤖 Powered by Claude',

    card_planner_title: 'Plan your whole trip',
    card_planner_body: 'Pick a trail — get a ready day-by-day plan with stays, transport and gear. Book everything from the map, via Booking.com.',
    card_planner_note: '🏨 Stays · 🚌 Transport · 🎒 Gear',

    card_trails_title: 'Trails and routes worldwide',
    card_trails_body: '33,000+ official Swedish and Norwegian trails, plus millions of paths globally via OpenStreetMap. Draw your own routes directly on topographic maps from Lantmäteriet, Kartverket and more.',
    card_trails_note: '29 maps · 13 countries · OSM · NVR',

    card_weather_title: 'Weather you can rely on',
    card_weather_body: '7-day forecast with hiking assessment for your exact position on the trail. Elevation profile and weather in one view — so you know if the trip will be a success.',
    card_weather_note: 'SMHI · Yr · Smarter planning',

    card_groups_title: 'Hiking groups',
    card_groups_body: 'Create a group, share trails and see each other\'s position in real time. Plan together with date, time and meeting point — with calendar view.',
    card_groups_note: '📍 Real-time · 🗓️ Planning · 🗺️ Map',

    card_free_title: 'All of this — completely free',
    card_free_body: 'Live GPS tracking, offline maps, AI guide Maria, GPX uploads, stats and achievements, saved favourite trails and global trail search. No subscription, no ads, no hassle.',
    card_free_note: '🔴 Live · 📥 Offline · 🤖 AI · ⭐ Favourites',

    card_install_title: 'Install as app',
    card_install_body: 'Add to home screen — works offline and launches instantly without a browser. Like a real app, but without the App Store.',
    card_install_note: '📱 Tap to install',

    installed_banner: '✅ App is installed on your home screen',
    legal_about: 'About',
    legal_privacy: 'Privacy',
    legal_terms: 'Terms',
    cta_btn: 'Start exploring →',
    cta_note: 'No account required · Free forever',

    lang_flag: '🇬🇧',
    lang_label: 'EN',
    lang_switch_to: 'sv',
  }
};

function applyWelcomeLang(lang) {
  const L = WELCOME_LANGS[lang];
  if (!L) return;
  localStorage.setItem('lang', lang);

  // HTML lang attr
  document.documentElement.lang = L.html_lang;
  document.title = L.page_title;

  // Highlight active language buttons (top-right + inline CTA)
  const ACTIVE_STYLE   = 'border-color:rgba(212,116,58,0.8); background:rgba(212,116,58,0.18); color:#d4743a;';
  const INACTIVE_STYLE = 'border-color:rgba(107,142,127,0.3); background:rgba(13,31,24,0.7); color:rgba(232,244,234,0.85);';

  ['langBtnSv'].forEach(id => {
    const el = document.getElementById(id);
    if (el) el.style.cssText += lang === 'sv' ? ACTIVE_STYLE : INACTIVE_STYLE;
  });
  ['langBtnEn'].forEach(id => {
    const el = document.getElementById(id);
    if (el) el.style.cssText += lang === 'en' ? ACTIVE_STYLE : INACTIVE_STYLE;
  });

  // Helper to set text by data-i18n attribute
  document.querySelectorAll('[data-i18n]').forEach(el => {
    const key = el.getAttribute('data-i18n');
    if (L[key] !== undefined) el.textContent = L[key];
  });

  // CTA link lang param
  const ctaBtn = document.getElementById('ctaBtn');
  if (ctaBtn) {
    ctaBtn.href = 'app.html?tab=explore&lang=' + lang;
    ctaBtn.textContent = L.cta_btn;
  }
}

// Language toggle handled by applyWelcomeLang()
// Re-apply if user clicked a button before the full script loaded
if (window.__pendingLang) {
  applyWelcomeLang(window.__pendingLang);
  window.__pendingLang = null;
}

// Auto-detect or restore on load
(function() {
  let lang = localStorage.getItem('lang');
  if (!lang) {
    // Auto-detect from browser
    const browserLang = navigator.language || navigator.userLanguage || 'sv';
    lang = browserLang.toLowerCase().startsWith('sv') ? 'sv' : 'en';
  }
  applyWelcomeLang(lang);
})();

</script>
<!-- ── DISCREET LEGAL FOOTER ── -->
<div class="legal-footer">
  <a href="about.html" data-i18n="legal_about">Om oss</a>
  <span class="sep">·</span>
  <a href="privacy.html" data-i18n="legal_privacy">Integritet</a>
  <span class="sep">·</span>
  <a href="terms.html" data-i18n="legal_terms">Villkor</a>
  <span class="sep">·</span>
  <span style="color:rgba(240,235,224,0.3);">© Bontrax AB</span>
</div>

<!-- ── COOKIE BANNER ── -->
<script src="cookie-banner.js" defer></script>

</body>
</html>
