<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout}">

<head>
    <title>Home - FitPub</title>
</head>

<body>
    <div layout:fragment="content">
        <!-- Hero Section -->
        <div class="row mb-5">
            <div class="col-lg-12 text-center">
                <h1 class="display-4 fw-bold mb-3">
                    <i class="bi bi-activity text-primary"></i>
                    FitPub
                </h1>
                <p class="lead text-muted mb-4">
                    Federated Fitness Tracking for the Fediverse
                </p>
                <p class="mb-4">
                    Share your fitness activities with followers on Mastodon, Pleroma, and other ActivityPub platforms.
                    Upload FIT files from your GPS devices and track your progress.
                </p>

                <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
                    <a th:href="@{/register}" class="btn btn-primary btn-lg px-4 gap-3">
                        <i class="bi bi-person-plus"></i> Get Started
                    </a>
                    <a th:href="@{/timeline}" class="btn btn-outline-secondary btn-lg px-4">
                        <i class="bi bi-globe"></i> View Public Timeline
                    </a>
                </div>
            </div>
        </div>

        <!-- Features Section -->
        <div class="row g-4 mb-5">
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="mb-3">
                            <i class="bi bi-map text-primary" style="font-size: 3rem;"></i>
                        </div>
                        <h5 class="card-title">Interactive Maps</h5>
                        <p class="card-text text-muted">
                            View your GPS tracks on interactive maps with elevation profiles and detailed metrics.
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="mb-3">
                            <i class="bi bi-share text-primary" style="font-size: 3rem;"></i>
                        </div>
                        <h5 class="card-title">Federated Sharing</h5>
                        <p class="card-text text-muted">
                            Share activities with followers across the Fediverse using the ActivityPub protocol.
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="mb-3">
                            <i class="bi bi-shield-check text-primary" style="font-size: 3rem;"></i>
                        </div>
                        <h5 class="card-title">Privacy Control</h5>
                        <p class="card-text text-muted">
                            Choose who sees your activities: public, followers-only, or private.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- How It Works Section -->
        <div class="row mb-5">
            <div class="col-lg-8 mx-auto">
                <h2 class="text-center mb-4">How It Works</h2>

                <div class="timeline-item">
                    <h5 class="timeline-date">Step 1</h5>
                    <h6>Upload Your FIT File</h6>
                    <p class="text-muted">
                        Export a FIT file from your GPS device (Garmin, Wahoo, etc.) and upload it to FitPub.
                    </p>
                </div>

                <div class="timeline-item">
                    <h5 class="timeline-date">Step 2</h5>
                    <h6>View Your Activity</h6>
                    <p class="text-muted">
                        See your GPS track on an interactive map with detailed metrics like distance, pace, elevation, and heart rate.
                    </p>
                </div>

                <div class="timeline-item">
                    <h5 class="timeline-date">Step 3</h5>
                    <h6>Share on the Fediverse</h6>
                    <p class="text-muted">
                        Your activity appears in your followers' timelines on Mastodon, Pleroma, and other ActivityPub platforms.
                    </p>
                </div>

                <div class="timeline-item">
                    <h5 class="timeline-date">Step 4</h5>
                    <h6>Follow Other Athletes</h6>
                    <p class="text-muted">
                        Connect with other athletes on the Fediverse and see their public workouts in your timeline.
                    </p>
                </div>
            </div>
        </div>

        <!-- CTA Section -->
        <div class="row">
            <div class="col-lg-8 mx-auto text-center">
                <div class="bg-light p-5 rounded">
                    <h3 class="mb-3">Ready to Join the Federated Fitness Community?</h3>
                    <p class="text-muted mb-4">
                        Own your fitness data. Share on your terms. Connect with athletes across the Fediverse.
                    </p>
                    <a th:href="@{/register}" class="btn btn-primary btn-lg">
                        <i class="bi bi-person-plus"></i> Create Your Account
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
