<div class="min-h-screen text-white">
  <div class="max-w-6xl mx-auto p-4">
    <div class="text-center mb-8">
      <h1 class="text-4xl font-bold text-primary mb-2">Hackatime Setup</h1>
      <div class="flex items-center justify-center gap-2 mb-4">
        <div class="w-8 h-8 bg-green rounded-full flex items-center justify-center text-sm font-bold">
          <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
          </svg>
        </div>
        <div class="w-16 h-1 bg-green"></div>
        <div class="w-8 h-8 bg-green rounded-full flex items-center justify-center text-sm font-bold">
          <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
          </svg>
        </div>
        <div class="w-16 h-1 bg-green"></div>
        <div class="w-8 h-8 bg-green rounded-full flex items-center justify-center text-sm font-bold">
          <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
          </svg>
        </div>
        <div class="w-16 h-1 bg-green"></div>
        <div class="w-8 h-8 bg-green rounded-full flex items-center justify-center text-sm font-bold">
          <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
          </svg>
        </div>
      </div>
    </div>

    <div class="text-center mb-8 mt-4 max-w-5xl mx-auto">
      <h2 class="text-3xl font-bold text-green mt-4 mb-4">Oh, and one more thing...</h2>
      <p class="text-xl text-secondary mb-2">
        <b>Please do not try to cheat the system!</b> We have measures in place to detect and prevent cheating. If you attempt to manipulate Hackatime, you will be banned from Hackatime and other participating YSWS / events / programs, so please play fair! We are a non-profit organization and we run off of donations.
      </p>

      <p class="text-xl text-secondary">
        But besides that, you're all set! Happy hacking!
      </p>
    </div>

    <div class="text-center mb-8">
      <div class="max-w-lg mx-auto">
        <video src="<%= FlavorText.dino_meme_videos.sample %>" autoplay loop muted playsinline controls class="w-full rounded-lg">
        </video>
      </div>
    </div>

    <div class="flex gap-4 flex-wrap justify-center">
      <%= link_to my_wakatime_setup_step_2_path, class: "bg-secondary hover:bg-darkless text-white px-6 py-3 rounded-lg font-semibold transition-colors" do %>
        Set up another editor
      <% end %>

      <% if (url = session.dig(:return_data, "url")) %>
        <%= link_to url, class: "bg-primary hover:bg-red text-white px-8 py-3 rounded-lg font-semibold transition-colors text-lg" do %>
          <%= session.dig(:return_data, "button_text") || "Done" %>
        <% end %>
      <% else %>
        <%= link_to root_path, class: "bg-primary hover:bg-red text-white px-8 py-3 rounded-lg font-semibold transition-colors text-lg" do %>
          I agree, Get started!
        <% end %>
      <% end %>
    </div>
  </div>
</div>
