{{ define "main" }}
<main class="lander" data-page="home">
  <div class="lander__frame">
    <div class="lander__content">

      <section class="lander__hero" aria-labelledby="hero-brand">
        <div class="hero-banner">
          <span class="hero-banner__badge">v{{ .Site.Params.version }}</span>
          <div class="hero-banner__content">
            <span class="hero-banner__text">Privacy-first calorie tracking. No ads, no analytics, no account.</span>
          </div>
        </div>

        <div class="hero-copy">
          <h1 id="hero-brand" class="hero-brand">Chompass</h1>
          <p class="hero-sub">
            Private calorie tracking for Android and the browser.<br />
            Bring your own AI key, or run Gemma&nbsp;4 on-device.
          </p>
        </div>

        <div class="install-grid" aria-label="Get Chompass">
          <a class="platform-card" href="{{ "app/" | relURL }}">
            <span class="platform-card__tag">web app</span>
            <span class="platform-card__name">Open the PWA</span>
            <span class="platform-card__desc">Runs in any modern browser: phone, tablet, or desktop.</span>
            <span class="platform-card__link">chompass.app/app</span>
          </a>
          <a class="platform-card" href="{{ .Site.Params.obtainium }}">
            <span class="platform-card__tag">android</span>
            <span class="platform-card__name">Get it on Obtainium</span>
            <span class="platform-card__desc">Keeps you updated straight from Codeberg releases.</span>
            <span class="platform-card__link">{{ .Site.Params.apkArm64Note }} arm64 APK</span>
          </a>
          <a class="platform-card" href="{{ .Site.Params.releases }}">
            <span class="platform-card__tag">apk</span>
            <span class="platform-card__name">Download the APK</span>
            <span class="platform-card__desc">Direct install, all architectures, plus checksums.</span>
            <span class="platform-card__link">v{{ .Site.Params.version }} · codeberg</span>
          </a>
          <a class="platform-card" href="https://f-droid.org/packages/app.chompass/">
            <span class="platform-card__tag">f-droid</span>
            <span class="platform-card__name">F-Droid listing</span>
            <span class="platform-card__desc">In preparation. Open-source app store, no account needed.</span>
            <span class="platform-card__link">app.chompass</span>
          </a>
        </div>

        <div class="hero-actions">
          <a class="btn-cta" href="{{ "app/" | relURL }}">Open the web app</a>
          <a class="btn-link" href="{{ .Site.Params.obtainium }}">Get it on Obtainium</a>
        </div>
      </section>

      {{- $usageMp4 := fileExists "static/video/chompass-usage.mp4" -}}
      {{- $poster := fileExists "static/video/chompass-poster.jpg" -}}
      <section class="lander__video" aria-label="Chompass in action" data-live-hero>
        {{- if $usageMp4 -}}
        <video src="{{ "video/chompass-usage.mp4" | relURL }}" autoplay muted loop playsinline preload="none"
          {{- if $poster }} poster="{{ "video/chompass-poster.jpg" | relURL }}"{{ end }}>
          Your browser does not support the video tag.
        </video>
        {{- else -}}
        <div class="video-fallback" aria-hidden="true">
          <img src="{{ "screenshots/home.png" | relURL }}" alt="" width="200" height="433" />
          <img src="{{ "screenshots/add-food.png" | relURL }}" alt="" width="200" height="433" />
          <img src="{{ "screenshots/progress.png" | relURL }}" alt="" width="200" height="433" />
        </div>
        {{- end -}}
        <template>
          <div class="hero-stage">
            <div class="hero-stage__main">
              <div class="hero-camera">
                <div class="hero-phone-canvas">
                  <iframe src="{{ printf "%s?v=%s" ("app/demo.html" | relURL) .Site.Params.version }}" title="" aria-hidden="true" tabindex="-1"
                    loading="lazy" scrolling="no" allow="autoplay"></iframe>
                  <div class="hero-bezel" aria-hidden="true"></div>
                </div>
              </div>
              <p class="hero-callout" aria-hidden="true"></p>
            </div>
            <div class="hero-copy-panel" aria-hidden="true">
              <p class="hero-copy-panel__kicker">Live demo</p>
              <h3 class="hero-copy-panel__title"></h3>
              <p class="hero-copy-panel__desc"></p>
              <ul class="hero-copy-panel__features">
                <li><span class="hero-copy-panel__mark" aria-hidden="true">[*]</span>Privacy-first: diary, weight, and AI keys stay on your device</li>
                <li><span class="hero-copy-panel__mark" aria-hidden="true">[*]</span>Bring your own AI key, or run Gemma&nbsp;4 on-device (Android)</li>
                <li><span class="hero-copy-panel__mark" aria-hidden="true">[*]</span>Same diary JSON across the Android app and this PWA</li>
              </ul>
              <a class="hero-copy-panel__cta" href="{{ "app/" | relURL }}">Try the web app</a>
            </div>
          </div>
        </template>
        <script>
          (function () {
            var host = document.querySelector("[data-live-hero]");
            if (!host || location.protocol !== "file:") return;
            var note = document.createElement("p");
            note.className = "hero-file-note";
            note.style.cssText =
              "margin:0;padding:4rem 1.5rem;text-align:center;color:#8f8a94;background:#0f0e13;font:16px/1.5 system-ui,sans-serif;";
            note.textContent =
              "The live demo needs a web server — open http://localhost:1313/Chompass/ instead.";
            host.textContent = "";
            host.appendChild(note);
          })();
        </script>
      </section>

      <section class="lander__what" aria-labelledby="what-heading">
        <div class="section-title">
          <h2 id="what-heading">What you get</h2>
          <p>Food logging that stays on your device unless you choose cloud AI, plus extras that make daily use clearer.</p>
        </div>
        <ul class="feature-list">
          <li>
            <span class="feature-list__mark">[*]</span>
            <div><strong>Android and browser</strong> — installable PWA and Android app share the same diary and body-metrics JSON. No cloud sync between clients.</div>
          </li>
          <li>
            <span class="feature-list__mark">[*]</span>
            <div><strong>AI you control</strong> — bring your own cloud key, or on Android opt into on-device Gemma&nbsp;4. Analysis shows progress steps and fills fields as the model replies.</div>
          </li>
          <li>
            <span class="feature-list__mark">[*]</span>
            <div><strong>Meal components</strong> — after AI entry, expand ingredients, edit grams per row, and keep meal totals in sync.</div>
          </li>
          <li>
            <span class="feature-list__mark">[*]</span>
            <div><strong>Recipes and saved meals</strong> — save recents, favorites, and multi-ingredient recipes for one-tap logging.</div>
          </li>
          <li>
            <span class="feature-list__mark">[*]</span>
            <div><strong>Live calorie budget</strong> — the Android home ring grows your daily goal with the day's burn: measured by Health Connect, a manual entry after a run, or an estimate from your history.</div>
          </li>
          <li>
            <span class="feature-list__mark">[*]</span>
            <div><strong>Barcode and Open Food Facts</strong> — scan barcodes against Open Food Facts (4.6M+ products, cached offline), or let photo analysis read codes from the image.</div>
          </li>
          <li>
            <span class="feature-list__mark">[*]</span>
            <div><strong>Diet modes and Health Connect</strong> — keto and other diet modes on both clients. Android syncs steps, exercise, sleep, heart rate, and hydration, two-way with wearables and scales.</div>
          </li>
          <li>
            <span class="feature-list__mark">[*]</span>
            <div><strong>Open data, published accuracy</strong> — FOSS barcode on Android, open export and import, and published AI accuracy notes instead of a single marketing number.</div>
          </li>
        </ul>
        <a class="read-more" href="{{ "features/" | relURL }}">
          <span>Read the full feature list</span>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path d="M6.5 12H17M13 16.5L17.5 12L13 7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"/>
          </svg>
        </a>
      </section>

      <section class="lander__stats" aria-labelledby="stats-heading">
        <div class="section-title">
          <h2 id="stats-heading">The numbers</h2>
          <div>
            <span class="section-title__mark">[*]</span>
            <p>Small app, honest claims, no marketing fluff.</p>
          </div>
        </div>
        <div class="stats-grid">
          <div class="stat">
            <span class="stat__mark">[*]</span>
            <div class="stat__label">
              <span class="stat__name">arm64 APK</span>
              <strong class="stat__value">{{ .Site.Params.apkArm64Note }}</strong>
            </div>
            <div class="stat__bar" aria-hidden="true"><div class="stat__bar--fill" style="width: 42%"></div></div>
          </div>
          <div class="stat">
            <span class="stat__mark">[*]</span>
            <div class="stat__label">
              <span class="stat__name">Languages</span>
              <strong class="stat__value">15</strong>
            </div>
            <div class="stat__bar" aria-hidden="true"><div class="stat__bar--fill" style="width: 88%"></div></div>
          </div>
          <div class="stat">
            <span class="stat__mark">[*]</span>
            <div class="stat__label">
              <span class="stat__name">Typed entry within 20%</span>
              <strong class="stat__value">~90%</strong>
            </div>
            <div class="stat__bar" aria-hidden="true"><div class="stat__bar--fill" style="width: 90%"></div></div>
          </div>
          <div class="stat">
            <span class="stat__mark">[*]</span>
            <div class="stat__label">
              <span class="stat__name">Open Food Facts products</span>
              <strong class="stat__value">4.6M+</strong>
            </div>
            <div class="stat__bar" aria-hidden="true"><div class="stat__bar--fill" style="width: 92%"></div></div>
          </div>
        </div>
        <p class="stats-note">
          Accuracy figures come from our published
          <a href="{{ "blog/ai-food-logging-accuracy/" | relURL }}">AI accuracy write-up</a>,
          not a vendor claim. Product count as listed by Open Food Facts.
        </p>
      </section>

      <section class="lander__privacy" aria-labelledby="privacy-heading">
        <div class="section-title">
          <h2 id="privacy-heading">Private by design</h2>
          <div>
            <span class="section-title__mark">[*]</span>
            <p>
              No ads, no analytics SDKs, no accounts. Food logs and API keys stay on your device,
              encrypted at rest. Learn more in the <a href="{{ "privacy/" | relURL }}">privacy policy</a>.
            </p>
          </div>
        </div>
      </section>

      <section class="lander__faq" aria-labelledby="faq-heading">
        <div class="section-title">
          <h2 id="faq-heading">FAQ</h2>
        </div>
        <ul class="faq-list">
          <li class="faq-item">
            <button type="button" class="faq-item__question" aria-expanded="false">
              <svg class="faq-item__icon faq-item__icon--plus" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12.5 11.5H19v1h-6.5V19h-1v-6.5H5v-1h6.5V5h1v6.5Z"/></svg>
              <svg class="faq-item__icon faq-item__icon--minus" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M5 11.5h14v1H5z"/></svg>
              <span class="faq-item__question-text">Do I need an account?</span>
            </button>
            <div class="faq-item__answer" hidden>
              No. Chompass has no sign-in and no central user database. Diary, weight history, profile, and Coach chat stay on your device. Optional user-hosted WebDAV sync uses a server you configure.
            </div>
          </li>
          <li class="faq-item">
            <button type="button" class="faq-item__question" aria-expanded="false">
              <svg class="faq-item__icon faq-item__icon--plus" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12.5 11.5H19v1h-6.5V19h-1v-6.5H5v-1h6.5V5h1v6.5Z"/></svg>
              <svg class="faq-item__icon faq-item__icon--minus" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M5 11.5h14v1H5z"/></svg>
              <span class="faq-item__question-text">How does the AI work?</span>
            </button>
            <div class="faq-item__answer" hidden>
              Chompass is BYOK: you add your own model provider key under Settings, and food analysis goes only to that provider. On Android you can opt into On-Device (Private), which runs Gemma&nbsp;4 on the device itself with no upload.
            </div>
          </li>
          <li class="faq-item">
            <button type="button" class="faq-item__question" aria-expanded="false">
              <svg class="faq-item__icon faq-item__icon--plus" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12.5 11.5H19v1h-6.5V19h-1v-6.5H5v-1h6.5V5h1v6.5Z"/></svg>
              <svg class="faq-item__icon faq-item__icon--minus" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M5 11.5h14v1H5z"/></svg>
              <span class="faq-item__question-text">Web app or Android app?</span>
            </button>
            <div class="faq-item__answer" hidden>
              Both. The <a href="{{ "app/" | relURL }}">installable PWA</a> runs in any modern browser on phone, tablet, or desktop. The Android app adds a live calorie budget on the home ring, Health Connect, widgets, notifications, on-device Gemma&nbsp;4, and all 15 languages. Diary and body-metrics JSON match across clients.
            </div>
          </li>
          <li class="faq-item">
            <button type="button" class="faq-item__question" aria-expanded="false">
              <svg class="faq-item__icon faq-item__icon--plus" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12.5 11.5H19v1h-6.5V19h-1v-6.5H5v-1h6.5V5h1v6.5Z"/></svg>
              <svg class="faq-item__icon faq-item__icon--minus" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M5 11.5h14v1H5z"/></svg>
              <span class="faq-item__question-text">How accurate is food logging?</span>
            </button>
            <div class="faq-item__answer" hidden>
              We test against labeled datasets and publish the results instead of quoting a single number. Typed entry with a stated portion lands within 20% about 90% of the time; photo entry is harder and that gap is true across the industry. Full methodology in <a href="{{ "blog/ai-food-logging-accuracy/" | relURL }}">How accurate is AI food logging?</a>
            </div>
          </li>
          <li class="faq-item">
            <button type="button" class="faq-item__question" aria-expanded="false">
              <svg class="faq-item__icon faq-item__icon--plus" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12.5 11.5H19v1h-6.5V19h-1v-6.5H5v-1h6.5V5h1v6.5Z"/></svg>
              <svg class="faq-item__icon faq-item__icon--minus" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M5 11.5h14v1H5z"/></svg>
              <span class="faq-item__question-text">Can I move my data from Fud AI?</span>
            </button>
            <div class="faq-item__answer" hidden>
              Yes. In Fud AI, export your diary as JSON, then import it in Chompass via Settings. Weight and body data import through the matching import option too.
            </div>
          </li>
          <li class="faq-item">
            <button type="button" class="faq-item__question" aria-expanded="false">
              <svg class="faq-item__icon faq-item__icon--plus" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12.5 11.5H19v1h-6.5V19h-1v-6.5H5v-1h6.5V5h1v6.5Z"/></svg>
              <svg class="faq-item__icon faq-item__icon--minus" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M5 11.5h14v1H5z"/></svg>
              <span class="faq-item__question-text">Is it on the Play Store?</span>
            </button>
            <div class="faq-item__answer" hidden>
              No. Chompass ships from <a href="{{ .Site.Params.repo }}">Codeberg</a>: APK or <a href="{{ .Site.Params.obtainium }}">Obtainium</a> on Android, and a PWA in the browser. The F-Droid listing is in preparation.
            </div>
          </li>
        </ul>
      </section>

      <section class="lander__cta" aria-labelledby="cta-heading">
        <div class="cta-copy">
          <h2 id="cta-heading">Start tracking privately</h2>
          <p>Free, open source, and yours. Bring any AI key, or none.</p>
          <div class="cta-platforms">
            <span class="cta-platform">Android</span>
            <span class="cta-platform">Browser PWA</span>
            <span class="cta-platform">Health Connect</span>
            <span class="cta-platform">On-device AI</span>
          </div>
          <a class="read-more" href="{{ "download/" | relURL }}">
            <span>Install Chompass</span>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <path d="M6.5 12H17M13 16.5L17.5 12L13 7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"/>
            </svg>
          </a>
        </div>
      </section>

    </div>
  </div>
</main>
{{ end }}