{% extends 'base.html' %}
{% block content %}
<section class="hero">
  <div class="container hero-grid">
    <div>
      <span class="eyebrow">Hackathon concept for Salla municipality</span>
      <h1>One platform for routes, rentals, rewards, partners, and safer outdoor tourism.</h1>
      <p class="lead">Visitors plan trips by budget and time. Local businesses register as partners. Cyclists and hikers can trigger bike repair or health support and get the closest service route on the map.</p>
      <div class="hero-actions">
        <a class="btn primary" href="{{ url_for('planner_page') }}">Open planner</a>
        <a class="btn secondary" href="{{ url_for('safety_page') }}">Test safety flow</a>
      </div>
    </div>
    <div class="hero-card">
      <h3>Core value</h3>
      <ul>
        <li>Centralizes attractions, rentals, and support services</li>
        <li>Creates partner revenue and municipal commission paths</li>
        <li>Adds opt-in safety support for outdoor tourism</li>
        <li>Works across web and mobile with shared APIs</li>
      </ul>
    </div>
  </div>
</section>

<section class="section">
  <div class="container card-grid three">
    <article class="card">
      <h3>Trip planning</h3>
      <p>Visitors enter budget, days, and interests. The platform returns an itinerary, estimated cost, and reward suggestions.</p>
    </article>
    <article class="card">
      <h3>Partner marketplace</h3>
      <p>Bike rentals, repair shops, health providers, souvenir shops, and guides can register and pay platform fees.</p>
    </article>
    <article class="card">
      <h3>Emergency support layer</h3>
      <p>Users can trigger assistance through the mobile app. The platform recommends the nearest service and displays the route.</p>
    </article>
  </div>
</section>

<section class="section muted-bg">
  <div class="container">
    <div class="section-head">
      <h2>Live Salla demo map</h2>
      <p>Sample points include attractions, bike-related services, and health-support locations around Salla.</p>
    </div>
    <div id="sallaMap" class="map large-map" data-mode="overview"></div>
  </div>
</section>

<section class="section">
  <div class="container two-col">
    <div class="card">
      <h3>Pitch framing for judges</h3>
      <p>Do not pitch this as full clinical monitoring on day one. Pitch it as a destination platform with opt-in safety support and phased health integration.</p>
      <p><strong>Phase 1:</strong> planner, partner marketplace, rewards, location-aware support.</p>
      <p><strong>Phase 2:</strong> wearables, verified care partners, incident escalation workflows.</p>
    </div>
    <div class="card">
      <h3>Route engine recommendation</h3>
      <p>Use Google Maps on the frontend for familiar map rendering and Valhalla in production for free, self-hosted route computation with OpenStreetMap data.</p>
      <p>This demo uses a lightweight nearest-service API and route polyline generator so you can present the end-to-end concept without standing up Valhalla immediately.</p>
    </div>
  </div>
</section>
{% endblock %}