{% extends 'base.html.twig' %}
{% block title %}{{ zone.name }} — {{ map.name }} — CSI World{% endblock %}

{% block body %}
{% set typeColors = {
  town:    '#58a6ff',
  dungeon: '#f85149',
  field:   '#3fb950',
  raid:    '#f0883e',
  event:   '#d2a53a',
  shop:    '#a371f7'
} %}
{% set color = typeColors[zone.type] ?? '#8b949e' %}

<div style="max-width:760px;margin:40px auto;padding:0 20px">

  <nav style="font-size:.82rem;color:var(--muted);margin-bottom:24px;display:flex;align-items:center;gap:6px">
    <a href="{{ path('map_index') }}" style="color:var(--accent2);text-decoration:none">CSI World Online</a>
    <span style="color:var(--border)">/</span>
    <a href="{{ path('map_show', {slug: map.slug}) }}" style="color:var(--accent2);text-decoration:none">{{ map.name }}</a>
    <span style="color:var(--border)">/</span>
    <span style="color:var(--text)">{{ zone.name }}</span>
  </nav>

  <div style="background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:28px">
    <div style="display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap">
      <h1 style="font-size:1.6rem;font-weight:700;color:var(--text);margin:0">{{ zone.name }}</h1>
      <span style="padding:3px 12px;border-radius:14px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
                   background:{{ color }}22;color:{{ color }};border:1px solid {{ color }}55">
        {{ zone.type }}
      </span>
      {% if zone.requiredLevel %}
        <span style="padding:3px 12px;border-radius:14px;font-size:.75rem;font-weight:700;
                     background:rgba(240,136,62,.12);color:var(--accent);border:1px solid rgba(240,136,62,.3)">
          Niveau {{ zone.requiredLevel }} requis
        </span>
      {% endif %}
    </div>

    {% if zone.description %}
      <p style="color:var(--text);line-height:1.7;margin:0 0 24px;white-space:pre-wrap">{{ zone.description }}</p>
    {% endif %}

    <div style="background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:24px 20px;
                color:var(--muted);font-style:italic;text-align:center">
      Contenu à venir…
    </div>
  </div>

  <div style="margin-top:20px">
    <a href="{{ path('map_show', {slug: map.slug}) }}"
       style="color:var(--muted);text-decoration:none;font-size:.85rem">
      ← Retour à la carte
    </a>
  </div>

</div>
{% endblock %}