{{define "title"}}RideAware - Smart Cycling Training Platform{{end}}

{{define "content"}}
  <!-- Hero Section -->
  <section class="hero">
    <div class="hero-container">
      <div class="hero-content">
        <h1>Elevate Your Cycling Journey</h1>
        <p class="subtitle">
          The ultimate smart training platform for cyclists who demand
          excellence in every ride.
        </p>

        <div class="cta-section">
          <div class="beta-badge">
            <span class="badge-icon">⚡</span>
            <span class="badge-text">Development Build Available</span>
          </div>
          <h3>Join Our Newsletter</h3>
          <p>Get updates on new features and development progress</p>

          <div class="email-form">
            <input
              type="email"
              class="email-input"
              id="email-input"
              placeholder="Enter your email address"
              required
            />
            <button class="notify-btn" id="notify-button">Subscribe</button>
          </div>

          <div class="beta-notice">
            <p>
              <strong>Note:</strong> This is an early development build. Not all features are fully functional yet. 
              Your feedback helps us build better! 🚀
            </p>
          </div>
        </div>
      </div>

      <div class="hero-visual">
        <div class="phone-mockup">
          <div class="screen">
            <div class="app-interface">
              <div class="app-brand">
                <img
                  src="/static/assets/32x32.png"
                  alt="RideAware icon"
                  class="app-brand-icon"
                  width="32"
                  height="32"
                  decoding="async"
                />
                <div class="app-logo">RideAware</div>
              </div>

              <div class="stats-grid">
                <div class="stat-card">
                  <div class="stat-number">24.5</div>
                  <div class="stat-label">KM/H AVG</div>
                </div>
                <div class="stat-card">
                  <div class="stat-number">45</div>
                  <div class="stat-label">MINUTES</div>
                </div>
                <div class="stat-card">
                  <div class="stat-number">285</div>
                  <div class="stat-label">CALORIES</div>
                </div>
                <div class="stat-card">
                  <div class="stat-number">18.2</div>
                  <div class="stat-label">DISTANCE</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Features Section -->
  {{if .IsHome}}
    <section class="features" id="features">
      <div class="features-container">
        <div class="section-header">
          <h2>Powerful Features for Every Cyclist</h2>
          <p>
            From beginners to professionals, RideAware provides comprehensive
            tools to optimize your training and performance.
          </p>
        </div>

        <div class="features-grid">
          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-calendar-alt"></i>
            </div>
            <h3>Smart Training Plans</h3>
            <ul class="feature-list">
              <li>
                <strong>AI-Powered Planning:</strong> Customized training plans
                based on your goals and fitness level
              </li>
              <li>
                <strong>Adaptive Scheduling:</strong> Smart workout scheduling
                with automated reminders
              </li>
              <li>
                <strong>Goal Tracking:</strong> Set and monitor your cycling
                objectives in real-time
              </li>
            </ul>
          </div>

          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-chart-line"></i>
            </div>
            <h3>Advanced Analytics</h3>
            <ul class="feature-list">
              <li>
                <strong>Detailed Logging:</strong> Track exercises, sets, reps,
                and performance metrics
              </li>
              <li>
                <strong>Data Visualization:</strong> Interactive charts, graphs,
                and progress statistics
              </li>
              <li>
                <strong>Progress Insights:</strong> Monitor your improvement
                over time with AI analysis
              </li>
            </ul>
          </div>

          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-bicycle"></i>
            </div>
            <h3>Virtual Training</h3>
            <ul class="feature-list">
              <li>
                <strong>Expert Coaching:</strong> Professional guidance to
                achieve your cycling goals
              </li>
              <li>
                <strong>Immersive Rides:</strong> Virtual training experiences
                to boost performance
              </li>
              <li>
                <strong>Structured Workouts:</strong> Designed programs for
                fitness and performance gains
              </li>
            </ul>
          </div>

          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-heart"></i>
            </div>
            <h3>Health & Recovery</h3>
            <ul class="feature-list">
              <li>
                <strong>Nutrition Tracking:</strong> Plan and monitor your
                dietary intake for optimal performance
              </li>
              <li>
                <strong>Recovery Optimization:</strong> Tools and resources for
                effective rest and recovery
              </li>
              <li>
                <strong>Injury Prevention:</strong> Proactive measures to
                prevent and manage injuries
              </li>
            </ul>
          </div>

          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-users"></i>
            </div>
            <h3>Community & Social</h3>
            <ul class="feature-list">
              <li>
                <strong>Social Sharing:</strong> Share achievements and progress
                on social platforms
              </li>
              <li>
                <strong>Active Community:</strong> Connect with fellow cyclists
                and share experiences
              </li>
              <li>
                <strong>Competitive Leaderboards:</strong> Challenge yourself
                against the community
              </li>
            </ul>
          </div>

          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-sync-alt"></i>
            </div>
            <h3>Smart Integration</h3>
            <ul class="feature-list">
              <li>
                <strong>Wearable Sync:</strong> Connect with fitness trackers
                and smart devices
              </li>
              <li>
                <strong>Music Integration:</strong> Seamlessly sync with your
                favorite music services
              </li>
              <li>
                <strong>Data Portability:</strong> Easy import/export to other
                cycling platforms
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- Roadmap Section -->
    <section class="development-status" id="roadmap">
      <div class="status-container">
        <div class="section-header">
          <div class="section-label">
            <span class="pulse-dot"></span>
            Development Roadmap
          </div>
          <h2>Current Development Status</h2>
          <p class="status-intro">
            RideAware is actively being built. This development build lets you experience the platform early
            and help us refine it. Here's where we stand across all feature areas.
          </p>
        </div>

        <div class="status-grid">
          <!-- PHASE 1: Authentication & User Management ✅ -->
          <div class="status-item ready">
            <span class="status-badge">✓ Live</span>
            <h4>User Authentication</h4>
            <p>Signup, login, JWT tokens, password recovery, user profiles with bio, zones, FTP & weight</p>
          </div>

          <div class="status-item ready">
            <span class="status-badge">✓ Live</span>
            <h4>Equipment Management</h4>
            <p>Bike/gear CRUD, auto mileage tracking, service intervals & reminders</p>
          </div>

          <div class="status-item ready">
            <span class="status-badge">✓ Live</span>
            <h4>Training Zones</h4>
            <p>7-zone power model (Recovery → Neuromuscular) with color-coded visualization</p>
          </div>

          <div class="status-item ready">
            <span class="status-badge">✓ Live</span>
            <h4>Workout Planning & Builder</h4>
            <p>Structured interval builder (warmup/main/cooldown), %FTP targets, cadence, repeats, live chart preview</p>
          </div>

          <!-- PHASE 2: Templates & Export ✅ -->
          <div class="status-item ready">
            <span class="status-badge">✓ Live</span>
            <h4>Workout Templates Library</h4>
            <p>11 built-in templates (Recovery → Ramp Test) with category browsing & instant scheduling</p>
          </div>

          <div class="status-item ready">
            <span class="status-badge">✓ Live</span>
            <h4>Workout Export</h4>
            <p>Export to .zwo (Zwift) and FIT (Garmin-compatible) formats</p>
          </div>

          <div class="status-item ready">
            <span class="status-badge">✓ Live</span>
            <h4>Activity Import</h4>
            <p>Import FIT/TCX/GPX files with metric extraction (power, HR, cadence, elevation)</p>
          </div>

          <div class="status-item ready">
            <span class="status-badge">✓ Live</span>
            <h4>Device Integrations</h4>
            <p>Garmin Connect (OAuth2 PKCE), Wahoo Cloud API, Intervals.icu — push workouts & sync activities</p>
          </div>

          <!-- PHASE 3: Analytics & Goals ✅ -->
          <div class="status-item ready">
            <span class="status-badge">✓ Live</span>
            <h4>Performance Analytics</h4>
            <p>Summary, weekly, monthly stats, personal bests, TSS/IF calculation, training load (CTL/ATL/TSB)</p>
          </div>

          <div class="status-item ready">
            <span class="status-badge">✓ Live</span>
            <h4>Goal Setting & Tracking</h4>
            <p>SMART goals (distance, frequency, power, weight, custom) with real-time progress tracking</p>
          </div>

          <div class="status-item ready">
            <span class="status-badge">✓ Live</span>
            <h4>Race/Event Planner</h4>
            <p>Target events with taper builder, distance, priority, and gear checklist</p>
          </div>

          <div class="status-item ready">
            <span class="status-badge">✓ Live</span>
            <h4>Nutrition Planning</h4>
            <p>BMR/TDEE calculation, macro targets, weekly meal planning with workout calorie adjustment</p>
          </div>

          <!-- PHASE 4: AI & Advanced ✅ -->
          <div class="status-item ready">
            <span class="status-badge">✓ Live</span>
            <h4>AI-Powered Training Plans</h4>
            <p>DeepSeek integration generates personalized plans based on goals, fitness level, events & nutrition context</p>
          </div>

          <div class="status-item ready">
            <span class="status-badge">✓ Live</span>
            <h4>Workout Library</h4>
            <p>Browse, search, filter workouts; favorites, star ratings, custom workout creation</p>
          </div>

          <div class="status-item in-progress">
            <span class="status-badge">🔨 In Progress</span>
            <h4>OAuth Login</h4>
            <p>Google & Apple sign-in — Garmin & Wahoo OAuth complete, Google/Apple/Strava pending</p>
          </div>

          <div class="status-item in-progress">
            <span class="status-badge">🔨 In Progress</span>
            <h4>Tags & Notes System</h4>
            <p>RPE & Notes fields implemented; mood, conditions, injuries & tag system pending</p>
          </div>

          <!-- PLANNED -->
          <div class="status-item planned">
            <span class="status-badge">📋 Planned</span>
            <h4>Platform Sync</h4>
            <p>Strava activity sync, TrainingPeaks calendar sync, COROS / Apple Health / Google Fit</p>
          </div>

          <div class="status-item planned">
            <span class="status-badge">📋 Planned</span>
            <h4>Coaching & Athlete Management</h4>
            <p>Coach portal, athlete assignments, plan reviews, messaging & comments</p>
          </div>

          <div class="status-item planned">
            <span class="status-badge">📋 Planned</span>
            <h4>Virtual Training</h4>
            <p>Zwift/Rouvy/RGT integration, video routes, real-time ride simulation</p>
          </div>

          <div class="status-item planned">
            <span class="status-badge">📋 Planned</span>
            <h4>Community & Social</h4>
            <p>Social sharing, community forum, leaderboards, clubs/groups, challenges & streaks</p>
          </div>

          <div class="status-item planned">
            <span class="status-badge">📋 Planned</span>
            <h4>Gamification</h4>
            <p>Achievements, badges, milestones, rewards store, partner discounts</p>
          </div>

          <div class="status-item planned">
            <span class="status-badge">📋 Planned</span>
            <h4>Notifications</h4>
            <p>Email/push/SMS reminders, weekly digests, real-time overtraining & weather alerts</p>
          </div>

          <div class="status-item planned">
            <span class="status-badge">📋 Planned</span>
            <h4>Mobile & PWA</h4>
            <p>Offline mode, native app shell, background sync, wearable bridge</p>
          </div>

          <div class="status-item planned">
            <span class="status-badge">📋 Planned</span>
            <h4>Admin & Billing</h4>
            <p>Admin console, Stripe subscriptions (Free/Pro/Coach), feature flags, audit logs</p>
          </div>

          <div class="status-item planned">
            <span class="status-badge">📋 Planned</span>
            <h4>Content Library</h4>
            <p>Exercise library (strength/mobility), knowledge base, route library with GPX planner</p>
          </div>

          <div class="status-item planned">
            <span class="status-badge">📋 Planned</span>
            <h4>Accessibility & i18n</h4>
            <p>WCAG 2.2 AA compliance, localization framework, imperial/metric units, color-blind safe palettes</p>
          </div>
        </div>

        <div class="feedback-cta">
          <h3>Ready to Try RideAware?</h3>
          <p>
            Access the development build and start testing RideAware today. Your feedback helps us build the ultimate cycling training platform.
          </p>
          <a href="https://dev.rideaware.org" class="action-btn primary" target="_blank">
            <i class="fas fa-rocket"></i>
            Access Development Build
          </a>
        </div>
      </div>
    </section>
  {{end}}
{{end}}