{% extends "layouts/public.html" %}
{% block title %}{{ trans('starter.cs.title') }}{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto py-16 px-4">
  <h1 class="text-4xl font-bold text-slate-900 mb-4">{{ trans('starter.cs.title') }}</h1>
  <p class="text-xl text-slate-600 mb-8">
    {{ trans('starter.cs.subtitle') }}
  </p>

  <div class="bg-white border border-slate-200 rounded-lg p-6 mb-8">
    <h2 class="text-lg font-semibold text-slate-800 mb-2">{{ trans('starter.cs.listings.title') }}</h2>
    <p class="text-slate-600 mb-4">
      Parcourez les hébergements disponibles dans les communes partenaires.
    </p>
    <a href="/communes-sejours/hebergements"
       class="inline-block bg-slate-800 text-white px-5 py-2 rounded hover:bg-slate-700">
      {{ trans('starter.cs.nav.listings') }}
    </a>
  </div>

  <p class="text-sm text-slate-400">
    Démonstrateur Forge — données provisoires.
  </p>
</div>
{% endblock %}