<% content_for :head do %>
  <!-- Article Schema -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "What is Hackatime?",
    "description": "Hackatime is a free, open-source coding time tracker built by Hack Club for high school students. Track your programming time across 75+ editors and see your coding statistics.",
    "url": "https://hackatime.hackclub.com/what-is-hackatime",
    "datePublished": "2025-01-01",
    "dateModified": "2025-01-01",
    "author": {
      "@type": "Organization",
      "name": "Hack Club",
      "url": "https://hackclub.com"
    },
    "publisher": {
      "@type": "Organization",
      "name": "Hack Club",
      "url": "https://hackclub.com"
    },
    "mainEntityOfPage": {
      "@type": "WebPage",
      "@id": "https://hackatime.hackclub.com/what-is-hackatime"
    },
    "about": {
      "@type": "SoftwareApplication",
      "name": "Hackatime",
      "description": "Free and open source coding time tracker by Hack Club"
    }
  }
  </script>
<% end %>

<div class="container">
  <div class="max-w-4xl mx-auto">
    <h1 class="text-4xl font-bold mb-6 text-center">
      What is <span class="text-primary">Hackatime</span>?
    </h1>

    <div class="bg-dark rounded-lg p-8 mb-8">
      <p class="text-lg mb-6">
        <strong class="text-primary">Hackatime</strong> is a free, open-source coding time tracker built by <a href="https://hackclub.com" target="_blank" class="text-primary hover:text-red underline">Hack Club</a> for high school students and developers who want to understand their programming habits.
      </p>

      <p class="text-lg mb-6">
        Unlike other time tracking tools, <strong>Hackatime</strong> is completely free and designed specifically for the Hack Club community. It helps you see exactly how much time you spend coding, which programming languages you use most, and which editors you prefer.
      </p>

      <h2 class="text-2xl font-semibold text-primary mb-4">How Hackatime Works</h2>
      <p class="text-lg mb-6">
        <strong>Hackatime</strong> tracks your coding activity automatically by monitoring when you're actively typing in your code editor. It works with over 75 different editors including VS Code, JetBrains IDEs, vim, emacs, and many more.
      </p>

      <h2 class="text-2xl font-semibold text-primary mb-4">Why Hackatime Exists</h2>
      <p class="text-lg mb-6">
        <strong>Hackatime</strong> was created because Hack Club believes that the more time you spend making things, the better you get at building cool projects. By tracking your coding time, you can see your progress and stay motivated to keep building.
      </p>

      <h2 class="text-2xl font-semibold text-primary mb-4">Key Features of Hackatime</h2>
      <ul class="list-disc list-inside text-lg mb-6 space-y-2">
        <li><strong>Completely free</strong> - No paid plans or hidden costs</li>
        <li><strong>Open source</strong> - You can see the code and contribute</li>
        <li><strong>Works offline</strong> - Tracks your time even without internet</li>
        <li><strong>Real-time stats</strong> - See your coding activity as it happens</li>
        <li><strong>Community leaderboards</strong> - Compare with other Hack Clubbers</li>
        <li><strong>Privacy-focused</strong> - Minimal data is collected for time tracking. File contents are never sent to our servers or stored.</li>
      </ul>

      <h2 class="text-2xl font-semibold text-primary mb-4">Getting Started with Hackatime</h2>
      <p class="text-lg mb-6">
        To start using <strong>Hackatime</strong>, simply sign in with your Hack Club Slack account or email. Once you're logged in, install the editor plugin for your preferred code editor and start coding. <strong>Hackatime</strong> will automatically begin tracking your time.
      </p>

      <div class="text-center mt-8">
        <%= link_to "Get Started with Hackatime", root_path, class: "inline-block bg-primary text-white font-bold px-8 py-3 rounded-lg hover:bg-red-600 transition-colors duration-200" %>
      </div>
    </div>

    <div class="text-center text-gray-400 text-sm">
      <p>
        <strong>Hackatime</strong> is built and maintained by the Hack Club community.
        <%= link_to "Learn more about Hack Club", "https://hackclub.com", target: "_blank", class: "text-primary hover:text-red underline" %>.
      </p>
    </div>
  </div>
</div>
