{% extends "base.html" %}

{% block title %} — Start{% endblock %}

{% block content %}
<div class="flex flex-col items-center justify-center min-h-[60vh] text-center gap-8">

  <!-- Hero -->
  <div class="max-w-2xl">
    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-violet-900/40 border border-violet-700/50 text-violet-300 text-sm mb-6">
      <span class="w-2 h-2 rounded-full bg-violet-400 animate-pulse"></span>
      Live demo · Tink Sandbox
    </div>
    <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
      Tink Open Banking<br/>
      <span class="text-violet-400">API Demo</span>
    </h1>
    <p class="text-slate-400 text-lg leading-relaxed mb-2">
      Step-for-step gennemgang af hele Tink integrationsflowet —
      fra brugeroprettelse til live transaktioner og events.
    </p>
    <p class="text-slate-500 text-sm">
      Bruger Tink <strong class="text-violet-400">v2 endpoints</strong> for accounts, transactions og events.
    </p>
  </div>

  <!-- Flow overview -->
  <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 w-full max-w-4xl">
    {% set steps = [
      ("1", "Auth", "Client Credentials", "v1"),
      ("2", "Opret Bruger", "POST /user/create", "v1"),
      ("3", "Tilslut Bank", "Tink Link", "Link"),
      ("4", "Konti", "GET /data/v2/accounts", "v2"),
      ("5", "Transaktioner", "GET /data/v2/transactions", "v2"),
      ("6", "Events", "GET /events/v2/…", "v2"),
    ] %}
    {% for num, name, endpoint, version in steps %}
    <div class="bg-slate-900 border border-slate-800 rounded-xl p-4 flex flex-col gap-2">
      <div class="flex items-center justify-between">
        <span class="w-7 h-7 rounded-full bg-slate-800 text-slate-300 text-xs font-bold flex items-center justify-center">{{ num }}</span>
        <span class="text-xs px-2 py-0.5 rounded-full font-mono {% if version == 'v2' %}bg-violet-900/50 text-violet-300 border border-violet-700/40{% else %}bg-slate-800 text-slate-400{% endif %}">{{ version }}</span>
      </div>
      <div class="text-sm font-semibold text-white">{{ name }}</div>
      <div class="text-xs text-slate-500 font-mono leading-tight">{{ endpoint }}</div>
    </div>
    {% endfor %}
  </div>

  <!-- CTA -->
  <a href="/demo/step/1"
     class="inline-flex items-center gap-3 px-8 py-4 bg-violet-600 hover:bg-violet-500 text-white font-semibold rounded-xl text-lg transition-all hover:scale-105 shadow-lg shadow-violet-900/50">
    Start Demo
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
  </a>

</div>
{% endblock %}