{% extends "base.html" %}

{% block title %}{{ title }} — {{ config.APP_NAME }}{% endblock %}

{% block head %}
<meta name="description" content="{{ t.report_q1_meta_description }}">
<meta property="og:title" content="{{ title }}">
<meta property="og:description" content="{{ t.report_q1_meta_description }}">
{% endblock %}

{% block content %}
<main class="container-page py-10">

  {# ── Report hero ── #}
  <div class="mb-8">
    <p class="text-xs font-semibold uppercase tracking-widest text-electric mb-2">{{ t.report_q1_eyebrow }}</p>
    <h1 class="text-4xl font-bold text-navy mb-3 leading-tight" style="font-family: var(--font-display)">{{ title }}</h1>
    <p class="text-lg text-slate max-w-2xl">{{ t.report_q1_subtitle }}</p>
  </div>

  <div class="grid-2" style="gap: 3rem; align-items: start">

    {# ── Left column: stats + TOC ── #}
    <div>

      {# Stats strip #}
      <div class="stats-strip mb-8">
        <div class="stats-strip__item">
          <div class="stats-strip__label">{{ t.report_q1_stat1_label }}</div>
          <div class="stats-strip__value">77,355</div>
        </div>
        <div class="stats-strip__item">
          <div class="stats-strip__label">{{ t.report_q1_stat2_label }}</div>
          <div class="stats-strip__value">+29%</div>
        </div>
        <div class="stats-strip__item">
          <div class="stats-strip__label">{{ t.report_q1_stat3_label }}</div>
          <div class="stats-strip__value">80</div>
        </div>
        <div class="stats-strip__item">
          <div class="stats-strip__label">{{ t.report_q1_stat4_label }}</div>
          <div class="stats-strip__value">12,441</div>
        </div>
      </div>

      {# Table of contents preview #}
      <div class="card" style="padding: 1.5rem">
        <h2 class="text-base font-semibold text-navy mb-3" style="font-family: var(--font-sans)">{{ t.report_q1_toc_heading }}</h2>
        <ol class="space-y-1 text-sm text-slate-dark" style="padding-left: 1.25rem; list-style: decimal">
          <li>{{ t.report_q1_toc_1 }}</li>
          <li>{{ t.report_q1_toc_2 }}</li>
          <li>{{ t.report_q1_toc_3 }}</li>
          <li>{{ t.report_q1_toc_4 }}</li>
          <li>{{ t.report_q1_toc_5 }}</li>
          <li>{{ t.report_q1_toc_6 }}</li>
        </ol>
        <p class="text-xs text-slate mt-3">{{ t.report_q1_toc_note }}</p>
      </div>

      {# Data sources note #}
      <div class="mt-4 text-xs text-slate">
        <p>{{ t.report_q1_sources }}</p>
      </div>

    </div>

    {# ── Right column: email gate / download ── #}
    <div>
      <div class="card" style="padding: 2rem">

        {% if confirmed %}

        {# ── Post-capture: download state ── #}
        <div class="text-center mb-6">
          <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-accent/10 mb-3">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M20 6L9 17l-5-5" stroke="#16A34A" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <h2 class="text-xl font-bold text-navy mb-1">{{ t.report_q1_confirmed_title }}</h2>
          <p class="text-sm text-slate">{{ t.report_q1_confirmed_body }}</p>
        </div>

        <a href="{{ url_for('reports.download', lang=lang, slug=slug) }}"
           class="btn w-full text-center"
           style="display: flex; justify-content: center">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" class="mr-2" style="flex-shrink:0">
            <path d="M12 15l-4-4h3V4h2v7h3l-4 4zM4 20h16v-2H4v2z" fill="currentColor"/>
          </svg>
          {{ t.report_q1_download_btn }}
        </a>

        <p class="text-center text-xs text-slate mt-3">{{ t.report_q1_download_note }}</p>

        {% else %}

        {# ── Pre-capture: email form ── #}
        <h2 class="text-xl font-bold text-navy mb-1">{{ t.report_q1_gate_title }}</h2>
        <p class="text-sm text-slate mb-5">{{ t.report_q1_gate_body }}</p>

        <ul class="space-y-1.5 text-sm text-slate-dark mb-6">
          <li class="flex items-start gap-2">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style="flex-shrink:0;margin-top:3px">
              <circle cx="7" cy="7" r="7" fill="#16A34A" fill-opacity="0.12"/>
              <path d="M4 7l2 2 4-4" stroke="#16A34A" stroke-width="1.5" stroke-linecap="round"/>
            </svg>
            {{ t.report_q1_feature1 }}
          </li>
          <li class="flex items-start gap-2">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style="flex-shrink:0;margin-top:3px">
              <circle cx="7" cy="7" r="7" fill="#16A34A" fill-opacity="0.12"/>
              <path d="M4 7l2 2 4-4" stroke="#16A34A" stroke-width="1.5" stroke-linecap="round"/>
            </svg>
            {{ t.report_q1_feature2 }}
          </li>
          <li class="flex items-start gap-2">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style="flex-shrink:0;margin-top:3px">
              <circle cx="7" cy="7" r="7" fill="#16A34A" fill-opacity="0.12"/>
              <path d="M4 7l2 2 4-4" stroke="#16A34A" stroke-width="1.5" stroke-linecap="round"/>
            </svg>
            {{ t.report_q1_feature3 }}
          </li>
        </ul>

        <form method="post" action="{{ url_for('reports.capture', lang=lang, slug=slug) }}" class="space-y-3">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <div>
            <label for="email" class="form-label">{{ t.report_q1_email_label }}</label>
            <input
              type="email"
              id="email"
              name="email"
              class="form-input"
              placeholder="you@example.com"
              required
              autofocus
            >
          </div>
          <button type="submit" class="btn w-full">{{ t.report_q1_cta_btn }}</button>
        </form>

        <p class="text-center text-xs text-slate mt-3">{{ t.report_q1_privacy_note }}</p>

        {% endif %}

      </div>
    </div>

  </div>
</main>
{% endblock %}
