{% extends "base.html" %}

{% block title %}{{ t.export_waitlist_title }} - {{ config.APP_NAME }}{% endblock %}

{% block content %}
<main class="container-page py-12">
  <div class="card max-w-md mx-auto mt-8 text-center">
    <h1 class="text-2xl mb-4">{{ t.export_waitlist_title }}</h1>

    <p class="text-slate-dark mb-6">{{ t.planner_ewl_intro }}</p>

    <div class="bg-slate-50 border border-slate-200 rounded-lg p-4 mb-6 text-left">
      <h3 class="font-semibold text-navy text-sm mb-2">{{ t.planner_ewl_included_h3 }}</h3>
      <ul class="text-sm text-slate-dark space-y-1">
        {% for key in ['planner_ewl_f1','planner_ewl_f2','planner_ewl_f3','planner_ewl_f4'] %}
        <li class="flex items-start gap-2">
          <svg class="w-4 h-4 text-blue-600 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
          </svg>
          <span>{{ t[key] }}</span>
        </li>
        {% endfor %}
      </ul>
    </div>

    <div class="text-sm text-slate mb-6">
      <p>{{ t.planner_ewl_notify_p }}</p>
      <ul class="mt-2 text-slate-dark">
        <li>• {{ t.planner_ewl_email_item1 }}</li>
        <li>• {{ t.planner_ewl_email_item2 }}</li>
        <li>• {{ t.planner_ewl_email_item3 }}</li>
      </ul>
    </div>

    <a href="{{ url_for('planner.index') }}" class="btn w-full">{{ t.export_waitlist_btn }}</a>
  </div>
</main>
{% endblock %}
