<div class="container">
  <% if current_user&.trust_level == "red" %>
    <div class="text-primary bg-red-500/10 border-2 border-red-500/20 p-4 text-center rounded-lg mb-4">
      <div class="flex items-center justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 14.5a6.5 6.5 0 1 0 0-13a6.5 6.5 0 0 0 0 13M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m1-5a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-.25-6.25a.75.75 0 0 0-1.5 0v3.5a.75.75 0 0 0 1.5 0z" clip-rule="evenodd" /></svg>
        <span class="text-3xl font-bold block ml-2">Hold up! Your account has been banned for suspicious activity.</span>
      </div>
      <div>
        <p class="text-primary text-left text-lg mb-2"><b>What does this mean?</b> Your account was convicted for fraud or abuse of Hackatime, such as using methods to gain an unfair advantage on the leaderboards or attempting to manipulate your coding time in any way. This restricts your access to participate in public leaderboards, but Hackatime will still track and display your time. This may also affect your ability to participate in current and future Hack Club events.</p>
        <p class="text-primary text-left text-lg mb-2"><b>What can I do?</b> Account bans are non-negotiable, and will not be removed unless determined to have been issued incorrectly. In that case, it will automatically be removed. We take fraud very seriously and have a zero-tolerance policy for abuse. If you believe this was a mistake, please DM the <a href="https://hackclub.slack.com/team/U091HC53CE8" target="_blank" class="underline">Fraud Department</a> on Slack. We do not respond in any other channel, DM or thread.</p>
        <p class="text-primary text-left text-lg mb-0"><b>Can I know what caused this?</b> No. We do not disclose the patterns that were detected. Releasing this information would only benefit fraudsters. The fraud team regularly investigates claims of false bans to increase the effectiveness of our detection systems to combat fraud.</p>
      </div>
    </div>
  <% end %>
  <div class="flex items-center space-x-2 mt-2">
    <p class="italic text-gray-400 m-0">
      <%= @flavor_text %>
    </p>
  </div>
  <div id="clock" class="ds-digital clock-display">
  </div>
  <% if current_user %>
    <h1 class="font-bold mt-1 mb-4 text-5xl text-center">Keep Track of <span class="text-primary">Your</span> Coding Time</h1>
  <% else %>
    <h1 class="font-bold mt-1 mb-1 text-5xl text-center">Track How Much You <span class="text-primary">Code</span></h1>
    <div class="flex flex-col w-full max-w-[50vw] mx-auto mb-22">
      <%= link_to slack_auth_path, class: "inline-flex items-center justify-center px-6 py-3 rounded text-white font-bold cursor-pointer border-none w-full my-2 bg-primary" do %>
        <img src="/images/slack.png" class="h-8 w-8 mr-2 bg-white rounded-full p-1">
        <span class="hidden md:flex">Sign in with Hack Club Slack</span>
      <% end %>

      <div class="flex items-center my-4">
        <div class="flex-1 border-t border-gray-600"></div>
        <span class="px-4 text-gray-400 text-sm">or</span>
        <div class="flex-1 border-t border-gray-600"></div>
      </div>

      <%= form_tag email_auth_path, class: "relative", data: { turbo: false } do %>
        <div class="relative">
          <%= email_field_tag :email, nil, placeholder: "Enter your email to get a sign in link", required: true, class: "w-full px-3 py-3 pr-12 border border-gray-600 rounded text-base bg-gray-800 text-white" %>
          <button type="submit" class="absolute right-2 top-1/2 transform -translate-y-1/2 w-8 h-8 p-1 bg-blue-600 hover:bg-blue-700 rounded cursor-pointer border-none flex items-center justify-center transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M13.3 20.275q-.3-.3-.3-.7t.3-.7L16.175 16H7q-.825 0-1.412-.587T5 14V5q0-.425.288-.712T6 4t.713.288T7 5v9h9.175l-2.9-2.9q-.3-.3-.288-.7t.288-.7q.3-.3.7-.312t.7.287L19.3 14.3q.15.15.212.325t.063.375t-.063.375t-.212.325l-4.575 4.575q-.3.3-.712.3t-.713-.3" /></svg>
          </button>
        </div>
      <% end %>
    </div>
    <% if params[:sign_in_email] %>
      <div class="text-green-500 mt-4 text-center max-w-[50vw] mx-auto">
        Check your email for a sign-in link!
      </div>
      <% dev_tool class: "text-center max-w-[50vw] mx-auto mb-4" do %>
        Because you're on localhost, <%= link_to "click here to view the email", letter_opener_web_path %>
      <% end %>
    <% end %>
    <div class="w-full flex justify-center overflow-x-none">
      <p class="monospace text-center text-primary text-[22px] select-none whitespace-nowrap">
        ==============================================/ h a c k /=============================================
      </p>
    </div>
    <div class="mt-8 mb-8">
      <h1 class="font-bold mt-1 mb-1 text-4xl">Compatible with your favourite IDEs</h1>
      <p class="text-primary monospace text-[20px]">Hackatime works with these code editors and more!</p>
      <div id="supported-editors" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4">
        <% popular_editors = [
          ['VS Code', 'vs-code'], ['PyCharm', 'pycharm'], ['IntelliJ IDEA', 'intellij-idea'],
          ['Sublime Text', 'sublime-text'], ['Vim', 'vim'], ['Neovim', 'neovim'],
          ['Android Studio', 'android-studio'], ['Xcode', 'xcode'], ['Unity', 'unity'],
          ['Godot', 'godot'], ['Cursor', 'cursor'], ['Zed', 'zed'],
          ['Terminal', 'terminal'], ['WebStorm', 'webstorm'], ['Eclipse', 'eclipse'],
          ['Emacs', 'emacs'], ['Jupyter', 'jupyter'], ['OnShape', 'onshape']
        ] %>
        <% popular_editors.each do |name, slug| %>
          <a href="<%= doc_path("editors/#{slug}") %>" class="bg-darkless rounded-lg p-3 hover:bg-primary/10 transition-all duration-200 text-center block hover:translate-y-[-2px] hover:shadow-lg hover:shadow-blue-500/20">
            <img src="/images/editor-icons/<%= slug %>-128.png" alt="<%= name %>" class="w-12 h-12 mx-auto mb-2">
            <div class="text-sm text-white"><%= name %></div>
          </a>
        <% end %>
      </div>
    </div>
    <div class="w-full flex justify-center overflow-x-none">
      <p class="monospace text-center text-primary text-[22px] select-none whitespace-nowrap">
        -----------------------------------------------------------------------------------------------
      </p>
    </div>
    <div class="mt-8 mb-8">
      <h1 class="font-bold mt-1 mb-1 text-4xl">Why Hackatime?</h1>
      <% if @home_stats&.[](:seconds_tracked) && @home_stats&.[](:users_tracked) %>
        <p class="text-primary monospace text-[20px]">
          We've tracked over <span class="text-primary"><%= number_with_delimiter(@home_stats[:seconds_tracked] / 3600) %> <%= 'hour'.pluralize(@home_stats[:seconds_tracked] / 3600) %></span> of coding time across <span class="text-primary"><%= number_with_delimiter(@home_stats[:users_tracked]) %> <%= 'high schooler'.pluralize(@home_stats[:users_tracked]) %></span> since <span class="text-primary">2025</span>!
        </p>
      <% end %>
      <div class="overflow-x-auto -mx-4 px-4 pb-4 no-scrollbar">
        <div class="grid grid-cols-4 gap-4 mt-4 text-center h-30 min-w-[800px] select-none cursor-pointer">
          <p class="flex flex-col text-3xl justify-center bg-darkless rounded-lg p-3 hover:bg-primary/10 transition-all duration-200 text-center hover:translate-y-[-2px] hover:shadow-lg hover:shadow-blue-500/20"><span class="text-green font-bold text-4xl">100%</span><br>free</p>
          <p class="flex flex-col text-3xl justify-center bg-darkless rounded-lg p-3 hover:bg-primary/10 transition-all duration-200 text-center hover:translate-y-[-2px] hover:shadow-lg hover:shadow-blue-500/20">works<br><span class="text-green font-bold text-4xl">offline</span></p>
          <p class="flex flex-col text-3xl justify-center bg-darkless rounded-lg p-3 hover:bg-primary/10 transition-all duration-200 text-center hover:translate-y-[-2px] hover:shadow-lg hover:shadow-blue-500/20"><span class="text-green font-bold text-4xl">real time</span><br>stats</p>
          <p class="flex flex-col text-3xl justify-center bg-darkless rounded-lg p-3 hover:bg-primary/10 transition-all duration-200 text-center hover:translate-y-[-2px] hover:shadow-lg hover:shadow-blue-500/20">rise to the<br><span class="text-green font-bold text-4xl">top #1</span></p>
        </div>
      </div>
    </div>
    <div class="w-full flex justify-center overflow-x-none">
      <p class="monospace text-center text-primary text-[22px] select-none whitespace-nowrap">
        --------------------------------| #hackclub | #hackclub | #hackclub |--------------------------------
      </p>

    </div>
    <div class="mt-8 mb-8">
      <h1 class="font-bold mt-1 mb-1 text-4xl">For your favourite <span class="text-primary">Hack Club</span> events!</span></h1>
      <p class="text-primary monospace text-[20px]">Don't commit fraud lol ;)</p>
      <div class="flex flex-col md:flex-row bg-[url('/images/som-bg.png')] mt-4 mb-4 rounded-lg">
        <div class="w-full md:w-1/2 p-8">
          <img src="/images/som.png" class="h-2/3 mx-auto md:mx-0 mb-6">
          <%= link_to "Start building", "https://summer.hackclub.com/", class: "inline-block bg-[#592F31] font-primary font-bold text-[#f6dbba] px-4 py-2 rounded-[100px] text-[22px] hover:scale-105 transition-transform duration-200", target: "_blank" %>
        </div>
        <div class="w-full md:w-1/2 p-8 pl-4 pr-4 grid grid-cols-1 gap-4">
          <div class="som-box p-4">
            <h2 class="font-bold text-[22px]">Build Projects</h2>
            <p class="text-[18px]">Build websites, games, apps, or any other personal open-source coding projects to showcase your skills.</p>
          </div>
          <div class="som-box p-4">
            <h2 class="font-bold text-[22px]">Get Stuff</h2>
            <p class="text-[18px]">Get awesome prizes like Raspberry Pis, Server hosting credits, 3D printers, and more to fuel your next creation.</p>
          </div>
        </div>
      </div>
      <div class="flex flex-col md:flex-row bg-gradient-to-r from-[#EFCCCC] to-[#D35648] mt-4 mb-4 rounded-lg">
        <div class="w-full md:w-1/3 translate-y-[-20px]">
          <img src="/images/athena.png" class="w-[400px]">
        </div>
        <div class="w-full md:w-2/3 p-8 pl-4 pr-4">
          <img src="/images/athena_award.svg" class="h-24 mb-4">
          <p class="text-[18px] m-4">Earn an <b>industry recognized technical certificate</b> for coding 30 hours and building 3 personal projects. Win prizes as you code, and a chance to travel to NYC for 2025's largest high school hackathon for girls.</p>
          <%= link_to "Join Athena", "https://athena.hackclub.com/", class: "inline-block bg-white font-primary font-bold text-[#D35648] px-4 py-2 m-4 rounded-[100px] text-[22px] hover:scale-105 transition-transform duration-200", target: "_blank" %>
        </div>
      </div>
    </div>
  <% end %>
  <% if current_user %>
    <% if @show_wakatime_setup_notice %>
      <div class="text-left my-8 flex flex-col">
        <p class="mb-4 text-xl text-primary">
          Hello friend! Looks like you are new around here, let's get you set up so you can start tracking your coding time.
        </p>
        <%= link_to "Let's setup Hackatime! Click me :D", my_wakatime_setup_path, class: "inline-block w-auto text-3xl font-bold px-8 py-4 bg-primary text-white rounded shadow-md hover:shadow-lg hover:-translate-y-1 transition-all duration-300 animate-pulse" %>
        <div class="flex items-center mt-4 flex-nowrap">
          <% if @ssp_users_recent&.any? %>
            <div class="flex m-0 ml-0 flex-shrink-0">
              <% @ssp_users_recent.each_with_index do |user, index| %>
                <div class="relative cursor-pointer transition-transform duration-200 hover:-translate-y-1 hover:z-10 group <%= index > 0 ? '-ml-4' : '' %>">
                  <div class="absolute -top-9 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-2 py-1 rounded text-xs whitespace-nowrap opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-20">
                    <%= h(user[:display_name]) %>
                    <div class="absolute top-full left-1/2 -ml-1 border-l-2 border-r-2 border-t-2 border-transparent border-t-gray-800"></div>
                  </div>
                  <img src="<%= user[:avatar_url] %>" alt="<%= h(user[:display_name]) %>" class="w-10 h-10 rounded-full border-2 border-primary object-cover shadow-sm">
                </div>
              <% end %>
              <% if @ssp_users_size && @ssp_users_size > 5 %>
                <div class="relative cursor-pointer transition-transform duration-200 hover:-translate-y-1 hover:z-10 group -ml-4" title="See all <%= @ssp_users_size %> users">
                  <div class="w-10 h-10 rounded-full border-2 border-primary bg-primary text-white font-bold text-sm flex items-center justify-center shadow-sm">+<%= @ssp_users_size - 5 %></div>
                  <div class="absolute left-[-20px] top-11 bg-gray-800 rounded-lg shadow-xl p-4 w-80 z-50 max-h-96 overflow-y-auto opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
                    <h4 class="mt-0 mb-2 text-base text-gray-200 border-b border-gray-600 pb-2">All users who set up Hackatime</h4>
                    <div class="flex flex-col gap-2">
                      <% @ssp_users_recent.each do |user| %>
                        <div class="flex items-center p-1 rounded hover:bg-gray-700 transition-colors duration-200">
                          <img src="<%= user[:avatar_url] %>" alt="<%= h(user[:display_name]) %>" class="w-8 h-8 rounded-full mr-2 border border-primary">
                          <span class="font-medium text-sm"><%= h(user[:display_name]) %></span>
                        </div>
                      <% end %>
                    </div>
                    <div class="absolute -top-2 left-8 w-0 h-0 border-l-2 border-r-2 border-b-2 border-transparent border-b-gray-800"></div>
                  </div>
                </div>
              <% end %>
            </div>
          <% end %>
          <% if @ssp_message %>
            <p class="m-0 ml-2 italic text-gray-400"><%= @ssp_message %> (this is real data)</p>
          <% end %>
        </div>
      </div>
    <% end %>
    <p class="mt-2">
      <% if @show_logged_time_sentence %>
        You've logged
        <%= short_time_detailed @todays_duration %>
        <% if @todays_languages.any? || @todays_editors.any? %>
          across
          <% if @todays_languages.any? %>
            <% if @todays_languages.length >= 4 %>
              <%= @todays_languages[0..1].join(", ") %> <span title="<%= @todays_languages[2..].join(", ") %>">(& <%= pluralize(@todays_languages.length - 2, 'other language') %>)</span>
            <% else %>
              <%= @todays_languages.to_sentence %>
            <% end %>
          <% end %>
          <% if @todays_languages.any? && @todays_editors.any? %>
            using
          <% end %>
          <% if @todays_editors.any? %>
            <%= @todays_editors.to_sentence %>
          <% end %>
        <% end %>
      <% else %>
        No time logged today... but you can change that!
      <% end %>
    </p>
    <%= turbo_frame_tag "mini_leaderboard", src: mini_leaderboard_static_pages_path do %>
      <%= render "leaderboards/mini_leaderboard_loading" %>
    <% end %>
    <%= turbo_frame_tag "filterable_dashboard", src: filterable_dashboard_static_pages_path do %>
      <span>Loading...</span>
    <% end %>
    <%= turbo_frame_tag "activity_graph", src: activity_graph_static_pages_path do %>
      <span>Loading...</span>
    <% end %>
  <% else %>
    <% if @leaderboard %>
      <h3>Today's Top Hack Clubbers</h3>
      <%= render "leaderboards/mini_leaderboard", leaderboard: @leaderboard, current_user: nil %>
    <% end %>

    <div class="w-full flex justify-center overflow-x-none">
      <p class="monospace text-center text-primary text-[22px] select-none whitespace-nowrap">
      ==============================================/ h a c k /=============================================
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 my-8 items-center">
      <div class="w-full relative pb-[56.25%] h-0 overflow-hidden">
        <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/eFVA_ZWnzDk?si=TcEVwiigFZh0Sp_Z&loop=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen class="absolute top-0 left-0 w-full h-full rounded-lg"></iframe>
      </div>

      <div>
        <h1 class="font-bold mt-1 mb-1 text-5xl">Start hacking with <span class="text-primary">Hackatime</span> now!</h1>
        <p class="text-primary monospace text-[20px]">Superrrrrr easy to setup :)</p>
      </div>
    </div>
  <% end %>
</div>
