{% extends 'base.html' %}
{% block content %}
<section class="hero">
  <div class="container hero-grid">
    <div>
      <span class="eyebrow">Explore Salla in one place</span>
      <h1 class="gradient">Routes, rentals, attractions, and support for outdoor travel in Salla.</h1>
      <p class="lead">
        Plan your stay, discover places to visit, find rentals and local services,
        and use the live support map for bike repair or health guidance during your journey.
      </p>
      <div class="hero-actions">
        <a class="btn primary" href="{{ url_for('planner_page') }}">Plan your trip</a>
        <a class="btn secondary" href="{{ url_for('map_demo') }}">Open live map</a>
      </div>
    </div>

    <div class="hero-card glass-card" style="padding:28px;">
      <h3>Platform highlights</h3>
      <ul>
        <li>Discover attractions, routes, and local services</li>
        <li>Find rental, repair, and support locations on one map</li>
        <li>Build a trip plan by time, interests, and budget</li>
        <li>Explore partner offers and local rewards</li>
      </ul>
    </div>
  </div>
</section>

<section class="section">
  <div class="container card-grid three">
    <article class="card">
      <h3>Sights and attractions</h3>
      <p>Find cultural places, nature destinations, and well-known visitor spots in and around Salla.</p>
    </article>
    <article class="card">
      <h3>Routes and activity planning</h3>
      <p>Browse biking and hiking-oriented experiences, then build a practical plan for your stay.</p>
    </article>
    <article class="card">
      <h3>Support on the move</h3>
      <p>Use the live map to locate the nearest health or bike-related support point during your trip.</p>
    </article>
  </div>
</section>

<section class="section muted-bg">
  <div class="container">
    <div class="section-head">
      <h2>Live Salla map</h2>
      <p>View attractions, routes, support points, and service locations on one interactive map.</p>
    </div>
    <div id="sallaMap" class="map large-map" data-mode="overview"></div>
  </div>
</section>
{% endblock %}