{{ 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="{{ .Site.Params.fdroid }}">
            <span class="platform-card__tag">f-droid</span>
            <span class="platform-card__name">Get it on F-Droid</span>
            <span class="platform-card__desc">Now live. Open-source app store, no account needed.</span>
            <span class="platform-card__link">app.chompass</span>
          </a>
        </div>

        <p class="install-note">
          The web app installs like a native app on desktop, phone, and tablet. It covers diary, progress charts, AI entry with your own key, and shared JSON export. The Android app adds Health Connect, widgets, notifications, and on-device Gemma&nbsp;4.
        </p>
      </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">
          <noscript>
            <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" />
          </noscript>
        </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.demoVersion }}" title="" aria-hidden="true" tabindex="-1"
                    loading="lazy" scrolling="no"></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">
              <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>
            </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 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 a few extras that make logging easier.</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>Bring your own AI key.</strong> Cloud provider of your choice, or on Android run Gemma&nbsp;4 on-device. 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: <strong>18</strong> languages,
              <strong>4.6M+</strong> Open Food Facts products cached offline,
              <strong>~90%</strong> of typed entries with a stated portion within 20% of
              true calories, and a <strong>~17&nbsp;MiB</strong> arm64 APK, about
              <strong>14%</strong> of upstream Fud AI's 122&nbsp;MiB build. Zero ads, analytics, or
              accounts.
            </p>
          </div>
        </div>
        <div class="stats-grid">
          <div class="stat">
            <span class="stat__mark">[*]</span>
            <div class="stat__label">
              <span class="stat__name">Languages</span>
              <strong class="stat__value">18</strong>
            </div>
            <p class="stat__desc">Shared locale contract on Android and the web app. The PWA covers core screens.</p>
          </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>
            <p class="stat__desc">Barcode scans resolve against Open Food Facts and cache results for offline use.</p>
          </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>
            <p class="stat__desc">Measured against labeled datasets; the methodology is published, not a vendor claim.</p>
          </div>
          <div class="stat">
            <span class="stat__mark">[*]</span>
            <div class="stat__label">
              <span class="stat__name">Ads · analytics · accounts</span>
              <strong class="stat__value">0</strong>
            </div>
            <p class="stat__desc">No ad SDKs, no trackers, no sign-in. Your diary and AI keys stay on your device.</p>
          </div>
          <div class="stat stat--wide">
            <span class="stat__mark">[*]</span>
            <div class="stat__label">
              <span class="stat__name">arm64 APK vs upstream Fud AI</span>
              <strong class="stat__value">~14%</strong>
            </div>
            <p class="stat__desc">Chompass is a fork of Fud AI, so your diary JSON carries over. The 3.8.0 arm64 APK is 17&nbsp;MiB, about 14% of upstream v6.1's 122&nbsp;MiB universal build (29&nbsp;MiB universal ≈ 23%).</p>
          </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>
              You bring the AI key: add your own model provider 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, and on-device Gemma&nbsp;4. 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 is on <a href="{{ .Site.Params.fdroid }}">F-Droid</a>, and also ships from <a href="{{ .Site.Params.repo }}">Codeberg</a> (APK or <a href="{{ .Site.Params.obtainium }}">Obtainium</a>) on Android, plus a PWA in the browser.
            </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 }}