<% content_for :title, "Documentation" %>
<% content_for :meta_description, "Complete documentation for Hackatime - learn how to track your coding time and use our API." %>

<div class="min-h-screen text-white">
  <div class="max-w-6xl mx-auto px-6 py-8">

    <h1 class="text-4xl font-bold mb-4">
      Welcome to <span class="text-primary">Hackatime</span>
    </h1>
    <p class="text-secondary text-lg mb-8">
      Tracks your coding time - made by <a href="https://hackclub.com" target="_blank" class="text-primary hover:text-red underline">Hack Club</a>
    </p>

    <div class="bg-dark rounded-lg p-6 mb-8">
      <p class="mb-4">
        Hackatime is a free tool from Hack Club. It shows you how much time you spend coding. You can see what other Hack Clubbers are building too!
      </p>

      <p class="mb-4">
        <strong class="text-primary">Why we made this:</strong> The more time you spend making things, the better you get at building cool projects!
      </p>

      <p>
        Hackatime is totally free. Anyone can see the <a href="https://github.com/hackclub/hackatime" target="_blank" class="text-primary hover:text-red underline">code</a>. It's like <a href="https://wakatime.com" target="_blank" class="text-primary hover:text-red underline">WakaTime</a> but free and open source.
      </p>
    </div>

    <h3 class="text-2xl font-semibold text-primary mb-4">🎯 How to Start</h3>
    <div class="bg-darkless rounded-lg p-6 mb-8">
      <ol class="space-y-3 text-lg">
        <li><strong class="text-white">Make an account</strong> at <a href="<%= root_url %>" class="text-primary hover:text-red underline">hackatime.hackclub.com</a></li>
        <li><strong class="text-white">Do the setup</strong>: Go to our <a href="<%= my_wakatime_setup_path %>" class="text-primary hover:text-red underline">setup page</a></li>
        <li><strong class="text-white">Add a plugin</strong>: Put WakaTime in your code editor</li>
        <li><strong class="text-white">Start coding</strong>: It tracks your time by itself!</li>
      </ol>
    </div>

    <div class="bg-dark border-l-4 border-primary rounded-r-lg p-6 mb-8">
      <strong class="text-primary">💡 Tip:</strong> The <a href="<%= my_wakatime_setup_path %>" class="text-primary hover:text-red underline">setup page</a> does everything for you. No hard stuff to figure out!
    </div>

    <h3 class="text-2xl font-semibold text-primary mb-4">🔌 What Code Editors Work</h3>
    <div class="bg-dark rounded-lg p-6 mb-8">
      <p class="mb-6">
        Hackatime works with <strong class="text-white">any editor</strong> that has <a href="https://wakatime.com" target="_blank" class="text-primary hover:text-red underline">WakaTime</a>. Just add the WakaTime plugin to your editor:
      </p>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-darkless rounded-lg p-4">
          <strong class="text-primary text-lg block mb-3">Popular Ones:</strong>
          <ul class="space-y-2">
            <li><%= link_to "VS Code", doc_path("editors/vs-code"), class: "text-white hover:text-primary" %></li>
            <li><%= link_to "PyCharm", doc_path("editors/pycharm"), class: "text-white hover:text-primary" %></li>
            <li><%= link_to "Vim", doc_path("editors/vim"), class: "text-white hover:text-primary" %></li>
            <li><%= link_to "Sublime Text", doc_path("editors/sublime-text"), class: "text-white hover:text-primary" %></li>
          </ul>
        </div>
        <div class="bg-darkless rounded-lg p-4">
          <strong class="text-primary text-lg block mb-3">Lots More:</strong>
          <ul class="space-y-2">
            <li><%= link_to "Brackets", doc_path("editors/brackets"), class: "text-white hover:text-primary" %></li>
            <li class="text-secondary">All JetBrains apps</li>
            <li><%= link_to "Command Line", doc_path("editors/terminal"), class: "text-white hover:text-primary" %></li>
            <li><a href="#supported-editors" onclick="document.getElementById('all-editors').parentElement.open = true; document.getElementById('all-editors').scrollIntoView({behavior: 'smooth'});" class="text-primary hover:text-red">70+ others</a></li>
          </ul>
        </div>
      </div>
    </div>

    <h3 class="text-2xl font-semibold text-primary mb-4">📚 Help Pages</h3>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
      <div class="bg-dark rounded-lg p-6">
        <h4 class="text-xl font-semibold text-primary mb-4">Getting Started</h4>
        <ul class="space-y-3">
          <li><%= link_to "Quick Start Guide", doc_path("getting-started/quick-start"), class: "text-white hover:text-primary" %> <span class="text-secondary">- Start in 5 minutes</span></li>
          <li><%= link_to "Installation", doc_path("getting-started/installation"), class: "text-white hover:text-primary" %> <span class="text-secondary">- Add plugins to your editor</span></li>
          <li><%= link_to "Configuration", doc_path("getting-started/configuration"), class: "text-white hover:text-primary" %> <span class="text-secondary">- Advanced setup stuff</span></li>
        </ul>
      </div>

      <div class="bg-dark rounded-lg p-6">
        <h4 class="text-xl font-semibold text-primary mb-4">For Coders</h4>
        <ul class="space-y-3">
          <li><%= link_to "API Overview", doc_path("api/overview"), class: "text-white hover:text-primary" %> <span class="text-secondary">- How to use our code API</span></li>
          <li><%= link_to "Authentication", doc_path("api/authentication"), class: "text-white hover:text-primary" %> <span class="text-secondary">- How to log in with code</span></li>
          <li><%= link_to "Endpoints", doc_path("api/endpoints"), class: "text-white hover:text-primary" %> <span class="text-secondary">- All the API commands</span></li>
        </ul>
      </div>
    </div>

    <h3 class="text-2xl font-semibold text-primary mb-4">🔒 Safe & Free</h3>
    <div class="bg-dark rounded-lg p-6 mb-8">
      <ul class="space-y-3">
        <li><strong class="text-primary">Open Source</strong>: You can see all the code on <a href="https://github.com/hackclub/hackatime" target="_blank" class="text-primary hover:text-red underline">GitHub</a></li>
        <li><strong class="text-primary">Works Offline</strong>: Time tracking continues even without internet - your data syncs when you reconnect</li>
        <li><strong class="text-primary">Private</strong>: We only see how long you code, not what you type</li>
        <li><strong class="text-primary">Community Made</strong>: Built by Hack Club</li>
        <li><strong class="text-primary">Free</strong>: You can donate to cover server costs at <a href="https://hackclub.com/donate" target="_blank" class="text-primary hover:text-red underline">hackclub.com/donate</a></li>
      </ul>
    </div>

    <h3 class="text-2xl font-semibold text-primary mb-4">🆘 Need Help?</h3>
    <div class="bg-darkless rounded-lg p-6 mb-8">
      <p class="mb-4">
        <strong class="text-primary">Not seeing your time?</strong> Go to the <a href="<%= my_wakatime_setup_path %>" class="text-primary hover:text-red underline">setup page</a>
        to check if everything is working.
      </p>
      <p>
        <strong class="text-primary">Have questions?</strong> Ask in the <a href="https://hackclub.slack.com" target="_blank" class="text-primary hover:text-red underline">Hack Club Slack</a>
        (#hackatime-v2 channel) or <a href="https://github.com/hackclub/hackatime/issues" target="_blank" class="text-primary hover:text-red underline">ask on GitHub</a>.
      </p>
    </div>

    <h3 class="text-2xl font-semibold text-primary mb-4">🔧 Supported Editors</h3>
    <div class="bg-dark rounded-lg p-6 mb-8">
      <p class="mb-6">
        Hackatime works with any editor that supports WakaTime. Click on your editor below for setup instructions:
      </p>

      <div id="supported-editors" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
        <!-- Most popular editors among teenagers, ordered by popularity -->
        <% 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-colors text-center block">
            <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>

    <details class="bg-dark rounded-lg p-6 mb-8">
      <summary class="cursor-pointer font-semibold text-primary">View all 80 supported editors</summary>
      <div id="all-editors" class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-3 mt-4 p-4">
      <%
        # All 80 editors - alphabetically sorted
        all_editors = [
          ['Android Studio', 'android-studio'], ['AppCode', 'appcode'], ['Aptana', 'aptana'], ['Arduino IDE', 'arduino-ide'],
          ['Azure Data Studio', 'azure-data-studio'], ['Blender', 'blender'], ['Brackets', 'brackets'], ['Brave', 'brave'],
          ['C++ Builder', 'c++-builder'], ['Canva', 'canva'], ['Chrome', 'chrome'], ['CLion', 'clion'],
          ['Cloud9', 'cloud9'], ['Coda', 'coda'], ['CodeTasty', 'codetasty'], ['Cursor', 'cursor'],
          ['DataGrip', 'datagrip'], ['DataSpell', 'dataspell'], ['DBeaver', 'dbeaver'], ['Delphi', 'delphi'],
          ['Discord', 'discord'], ['Eclipse', 'eclipse'], ['Edge', 'edge'], ['Emacs', 'emacs'],
          ['Eric', 'eric'], ['Excel', 'excel'], ['Figma', 'figma'], ['Firefox', 'firefox'],
          ['Gedit', 'gedit'], ['Godot', 'godot'], ['GoLand', 'goland'], ['HBuilder X', 'hbuilder-x'], ['IDA Pro', 'ida-pro'],
          ['IntelliJ IDEA', 'intellij-idea'], ['Jupyter', 'jupyter'], ['Kakoune', 'kakoune'], ['Kate', 'kate'],
          ['Komodo', 'komodo'], ['Micro', 'micro'], ['MPS', 'mps'], ['Neovim', 'neovim'],
          ['NetBeans', 'netbeans'], ['Notepad++', 'notepad++'], ['Nova', 'nova'], ['Obsidian', 'obsidian'],
          ['OnShape', 'onshape'], ['Oxygen', 'oxygen'], ['PhpStorm', 'phpstorm'], ['Postman', 'postman'], ['PowerPoint', 'powerpoint'],
          ['Processing', 'processing'], ['Pulsar', 'pulsar'], ['PyCharm', 'pycharm'], ['ReClassEx', 'reclassex'],
          ['Rider', 'rider'], ['Roblox Studio', 'roblox-studio'], ['RubyMine', 'rubymine'], ['RustRover', 'rustrover'],
          ['Safari', 'safari'], ['SiYuan', 'siyuan'], ['Sketch', 'sketch'], ['SlickEdit', 'slickedit'],
          ['SQL Server Management Studio', 'sql-server-management-studio'], ['Sublime Text', 'sublime-text'],
          ['Terminal', 'terminal'], ['TeXstudio', 'texstudio'], ['TextMate', 'textmate'], ['Trae', 'trae'],
          ['Unity', 'unity'], ['Unreal Engine 4', 'unreal-engine-4'], ['Vim', 'vim'], ['Visual Studio', 'visual-studio'], ['VS Code', 'vs-code'],
          ['WebStorm', 'webstorm'], ['Windsurf', 'windsurf'], ['Wing', 'wing'], ['Word', 'word'],
          ['Xcode', 'xcode'], ['Zed', 'zed'], ['Swift Playgrounds', 'swift-playgrounds']
        ].sort_by { |editor| editor[0] }
      %>
        <% all_editors.each do |name, slug| %>
          <a href="<%= doc_path("editors/#{slug}") %>" class="bg-darkless rounded p-2 hover:bg-primary/10 transition-colors text-center block">
            <img src="/images/editor-icons/<%= slug %>-128.png" alt="<%= name %>" class="w-8 h-8 mx-auto mb-1">
            <div class="text-xs text-white leading-tight"><%= name %></div>
          </a>
        <% end %>
      </div>
    </details>

    <div class="border-t border-darkless my-8"></div>

    <div class="text-center">
      <p class="text-secondary">
        Found an issue with the docs?
        <a href="https://github.com/hackclub/hackatime" target="_blank" class="text-primary hover:text-red underline">
          Edit on GitHub
        </a> - we'd love your help making them better!
      </p>
    </div>
  </div>
</div>
