{{ define "main" }}
<header class="bg-brand-dark">
    <div class="max-w-7xl mx-auto px-6 md:px-12 lg:px-20 py-16 md:py-20 lg:py-28">
        <div class="max-w-2xl">
            <h1 class="text-white text-4xl md:text-5xl lg:text-[3.5rem] font-extrabold leading-tight tracking-tight">
                Free digital signage for everyone.
            </h1>
            <p class="text-white/60 text-lg mt-6 leading-relaxed">
                Turn a Raspberry Pi or any PC into a digital sign. Schedule images, videos, and web pages from a web interface. No subscriptions, no cloud lock-in.
            </p>
            <p class="text-white/40 text-sm mt-3">
                Formerly <strong class="font-semibold text-white/60">Screenly OSE</strong> — same project, renamed in 2022.
            </p>
            <div class="flex flex-wrap items-center gap-4 mt-8">
                <a class="btn-primary" href="/get-started/">Get Started</a>
                <a class="btn-secondary" href="/features/">See Features</a>
            </div>
            <div class="mt-8 flex flex-wrap items-center gap-3">
                <a class="inline-flex items-center gap-2 rounded-md bg-white/10 hover:bg-white/15 border border-white/20 text-white/90 hover:text-white text-sm font-semibold no-underline px-4 py-2 transition-colors"
                   href="https://github.com/Screenly/Anthias" target="_blank" rel="noopener">
                    {{ partial "icon.html" (dict "name" "github" "size" "1rem") }}
                    Star on GitHub
                </a>
                <a class="inline-flex items-center gap-2 rounded-md bg-white/10 hover:bg-white/15 border border-white/20 text-white/90 hover:text-white text-sm font-semibold no-underline px-4 py-2 transition-colors"
                   href="https://github.com/sponsors/Screenly" target="_blank" rel="noopener">
                    {{ partial "icon.html" (dict "name" "heart" "size" "1rem" "class" "text-[#ea4aaa]") }}
                    Sponsor
                </a>
            </div>
        </div>
    </div>
    <div class="max-w-7xl mx-auto px-6 md:px-12 lg:px-20 pb-8">
        {{- /* Same stable cache key as baseof.html so the resize
               pipeline runs once per build and the preload + slider
               see the identical resource references. */ -}}
        {{- $slides := partialCached "screenshots.html" . "screenshots-singleton" -}}
        {{- if $slides -}}
        {{- /* Browser-chrome framed scroll-snap slider. Each <img>
               carries an explicit aspect-ratio matched to the
               1400×900 capture viewport from tests/conftest.py so
               the box is reserved before WebP decode (CLS = 0). The
               track is the scroll container; the surrounding chrome,
               indicator pills, and prev/next controls are wired up by
               slider.ts via data-screenshot-* hooks. */ -}}
        <div
            class="screenshot-slider"
            data-screenshot-slider
            data-slide-count="{{ len $slides }}"
            role="region"
            aria-roledescription="carousel"
            aria-label="Anthias product screenshots">

            {{- /* Top chrome — traffic-light dots + URL pill. Reads
                   as a real browser frame so the dashboard captures
                   inside feel like the live product, not a flat PR
                   render. The URL value flips per-slide via
                   data-screenshot-url; slider.ts updates it on
                   slide change so the chrome stays in character. */ -}}
            <div class="screenshot-chrome" aria-hidden="true">
                <span class="screenshot-light" style="--light:#ff5f57;"></span>
                <span class="screenshot-light" style="--light:#febc2e;"></span>
                <span class="screenshot-light" style="--light:#28c840;"></span>
                <span class="screenshot-url"><span data-screenshot-url>anthias.local</span></span>
                <span class="screenshot-counter">
                    <span data-screenshot-counter>01</span>
                    <span class="screenshot-counter-sep">/</span>
                    <span>{{ printf "%02d" (len $slides) }}</span>
                </span>
            </div>

            <div class="screenshot-stage">
                <div
                    class="screenshot-track"
                    data-screenshot-track
                    tabindex="0">
                    {{- range $i, $slide := $slides }}
                    <figure
                        class="screenshot-slide"
                        role="group"
                        aria-roledescription="slide"
                        aria-label="{{ add $i 1 }} of {{ len $slides }}: {{ $slide.alt }}"
                        data-screenshot-slide
                        data-slide-index="{{ $i }}"
                        data-slide-url="{{ $slide.name }}">
                        <picture>
                            <source
                                type="image/webp"
                                srcset="{{ $slide.webpSrcset }}"
                                sizes="(min-width: 1280px) 1200px, 100vw">
                            <img
                                class="screenshot-img"
                                srcset="{{ $slide.pngSrcset }}"
                                sizes="(min-width: 1280px) 1200px, 100vw"
                                src="{{ $slide.fallback }}"
                                width="{{ $slide.width }}"
                                height="{{ $slide.height }}"
                                alt="{{ $slide.alt }}"
                                loading="{{ if eq $i 0 }}eager{{ else }}lazy{{ end }}"
                                decoding="async"
                                {{- if eq $i 0 }} fetchpriority="high"{{ end }}>
                        </picture>
                        {{- with $slide.caption }}
                        <figcaption class="screenshot-caption">
                            <span class="screenshot-caption-tag">{{ printf "%02d" (add $i 1) }}</span>
                            <span class="screenshot-caption-text">{{ . }}</span>
                        </figcaption>
                        {{- end }}
                    </figure>
                    {{- end }}
                </div>

                {{- if gt (len $slides) 1 }}
                <button
                    type="button"
                    class="screenshot-nav screenshot-nav-prev"
                    data-screenshot-prev
                    aria-label="Previous screenshot">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
                    </svg>
                </button>
                <button
                    type="button"
                    class="screenshot-nav screenshot-nav-next"
                    data-screenshot-next
                    aria-label="Next screenshot">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
                    </svg>
                </button>
                {{- end }}
            </div>

            {{- if gt (len $slides) 1 }}
            {{- /* Plain buttons with aria-current — not role="tab"
                   inside role="tablist". The full ARIA Tabs pattern
                   (roving tabindex, aria-controls/tabpanel) doesn't
                   fit a horizontal-scroll carousel where every slide
                   stays in the DOM, so the simpler current-state
                   semantics are more honest for assistive tech. */ -}}
            <div class="screenshot-pills" aria-label="Select screenshot" role="group">
                {{- range $i, $slide := $slides }}
                <button
                    type="button"
                    class="screenshot-pill"
                    aria-label="Show screenshot {{ add $i 1 }}: {{ $slide.alt }}"
                    {{- if eq $i 0 }} aria-current="true"{{ end }}
                    data-screenshot-pill
                    data-slide-index="{{ $i }}">
                    <span class="screenshot-pill-fill" aria-hidden="true"></span>
                </button>
                {{- end }}
            </div>
            {{- end }}
        </div>
        {{- end }}
    </div>
</header>

<section class="bg-bg-light border-y border-black/5 py-10">
    <div class="max-w-7xl mx-auto px-6 md:px-12 lg:px-20">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
            <div>
                <p class="text-2xl font-extrabold text-brand-dark">3,500+</p>
                <p class="text-zinc-500 text-sm mt-1">GitHub stars</p>
            </div>
            <div>
                <p class="text-2xl font-extrabold text-brand-dark">Since 2012</p>
                <p class="text-zinc-500 text-sm mt-1">Active development</p>
            </div>
            <div>
                <p class="text-2xl font-extrabold text-brand-dark">6 boards</p>
                <p class="text-zinc-500 text-sm mt-1">Pi 2 through Pi 5 + x86</p>
            </div>
            <div>
                <p class="text-2xl font-extrabold text-brand-dark">100% free</p>
                <p class="text-zinc-500 text-sm mt-1">Open source, forever</p>
            </div>
        </div>
    </div>
</section>

<section class="bg-white py-20 lg:py-28 px-6 md:px-12 lg:px-20">
    <div class="max-w-7xl mx-auto">
        <h2 class="text-3xl lg:text-4xl font-extrabold tracking-tight">What Anthias does</h2>
        <p class="text-zinc-500 mt-3 text-lg max-w-xl">A complete digital signage platform that runs on hardware you already own.</p>

        <div class="grid md:grid-cols-3 gap-8 mt-12">
            <div class="feature-card">
                <div class="w-10 h-10 rounded-lg bg-brand-yellow/20 flex items-center justify-center mb-4">
                    <svg class="w-5 h-5 text-brand-dark" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="12" rx="2"/><path d="M7 20h10M9 16v4M15 16v4"/></svg>
                </div>
                <h3 class="text-lg font-bold">Multiple content types</h3>
                <p class="text-zinc-500 mt-2 text-sm leading-relaxed">Display images, videos, and web pages. Upload files or point to any URL.</p>
            </div>

            <div class="feature-card">
                <div class="w-10 h-10 rounded-lg bg-brand-purple/10 flex items-center justify-center mb-4">
                    <svg class="w-5 h-5 text-brand-purple" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
                </div>
                <h3 class="text-lg font-bold">Content scheduling</h3>
                <p class="text-zinc-500 mt-2 text-sm leading-relaxed">Set start and end dates for each asset. Control duration and playlist order.</p>
            </div>

            <div class="feature-card">
                <div class="w-10 h-10 rounded-lg bg-brand-yellow/20 flex items-center justify-center mb-4">
                    <svg class="w-5 h-5 text-brand-dark" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M16 18l2-2-2-2M8 6L6 8l2 2"/><path d="M14.5 4l-5 16"/></svg>
                </div>
                <h3 class="text-lg font-bold">REST API</h3>
                <p class="text-zinc-500 mt-2 text-sm leading-relaxed">Automate content updates and manage devices programmatically.</p>
            </div>
        </div>

        <div class="mt-8">
            <a class="text-brand-purple font-semibold text-sm no-underline hover:underline" href="/features/">See all features &rarr;</a>
        </div>
    </div>
</section>

<section class="bg-bg-light py-20 lg:py-28 px-6 md:px-12 lg:px-20">
    <div class="max-w-7xl mx-auto">
        <h2 class="text-3xl lg:text-4xl font-extrabold tracking-tight">Get running in minutes</h2>
        <p class="text-zinc-500 mt-3 text-lg max-w-xl">The recommended way is to flash an SD card with Raspberry Pi Imager &mdash; no command line needed. Advanced users can install over an existing Raspberry Pi OS / Debian system.</p>

        <div class="mt-8 grid md:grid-cols-2 gap-6 max-w-4xl">
            <div class="bg-white border border-black/10 rounded-lg p-6 flex flex-col">
                <div class="flex items-center gap-2"><h3 class="text-lg font-bold">Raspberry Pi Imager</h3><span class="text-xs font-semibold text-green-700 bg-green-100 rounded px-2 py-0.5">Recommended</span></div>
                <p class="text-zinc-500 mt-2 text-sm leading-relaxed flex-grow">Open <a class="text-brand-purple no-underline hover:underline" href="https://www.raspberrypi.com/software/" target="_blank" rel="noopener">Raspberry Pi Imager</a>, pick <em>Other specific-purpose OS &rarr; Digital signage and kiosks &rarr; Anthias</em>, choose your Pi model, and flash. The SD card boots straight into Anthias &mdash; no SSH, no installer prompts.</p>
                <p class="text-zinc-400 text-xs mt-3">Raspberry Pi 2 through Pi 5.</p>
            </div>

            <div class="bg-brand-dark rounded-lg p-6 flex flex-col">
                <h3 class="text-white text-lg font-bold">One-line install <span class="text-white/50 font-normal text-sm">(advanced)</span></h3>
                <p class="text-white/60 text-sm mt-2 leading-relaxed">On a running Raspberry Pi OS Lite or Debian system, run:</p>
                <div class="mt-3 bg-black/30 rounded-md p-4 flex-grow flex items-center">
                    <code class="text-brand-yellow font-mono text-xs md:text-sm break-all">bash &lt;(curl -sL https://install-anthias.srly.io)</code>
                </div>
                <p class="text-white/50 text-xs mt-3">Raspberry Pi, x86, and 64-bit ARM SBCs.</p>
            </div>
        </div>

        <p class="text-zinc-500 mt-6 text-sm">Prefer fleet-managed, OTA-updated images? See <a class="text-brand-purple no-underline hover:underline" href="https://hub.balena.io/fleets-for-good" target="_blank" rel="noopener">balenaHub Fleets for Good</a>.</p>

        <div class="mt-8">
            <a class="text-brand-purple font-semibold text-sm no-underline hover:underline" href="/get-started/">All installation options &rarr;</a>
        </div>
    </div>
</section>

<section class="bg-brand-dark py-20 lg:py-28 px-6 md:px-12 lg:px-20">
    <div class="max-w-7xl mx-auto text-center">
        <h2 class="text-white text-3xl lg:text-4xl font-extrabold tracking-tight">Ready to set up your digital sign?</h2>
        <p class="text-white/50 mt-4 text-lg max-w-lg mx-auto">Anthias is free and open source. Get started in minutes on any Raspberry Pi or x86 PC.</p>
        <div class="flex flex-wrap justify-center gap-4 mt-8">
            <a class="btn-primary" href="/get-started/">Get Started</a>
            <a class="btn-secondary" href="https://github.com/Screenly/Anthias" target="_blank" rel="noopener">View on GitHub</a>
        </div>
    </div>
</section>
{{ end }}