defmodule ToweropsWeb.HelpLive.Sections.About do
  @moduledoc false
  use ToweropsWeb, :html

  def render(assigns) do
    ~H"""
    <div class="p-6">
      <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">About Towerops</h2>

      <div class="prose prose-sm dark:prose-invert max-w-none">
        <p class="text-gray-600 dark:text-gray-400">
          Towerops is a modern network monitoring and management platform designed to provide
          comprehensive visibility into your network infrastructure. It came out of a need to simplify
          network monitoring and alerting while running a wireless ISP.
        </p>

        <p class="text-gray-600 dark:text-gray-400">
          Our promise to you:
          <ul class="list-disc list-inside">
            <li>No random marketing emails or sign up for our newsletter popups.</li>
            <li>No trackers EVER, no external libraries used.</li>
            <li>No ads or sponsored content.</li>
            <li>No data collection or sharing.</li>
            <li>
              Our remote agent is
              <a href="https://codeberg.org/towerops-agent/towerops-agent">
                fully open source
              </a>
              and ONLY collects monitoring jobs from the server and WILL NEVER allow us to access any part of your internal network.
            </li>
          </ul>
        </p>

        <p class="text-gray-600 dark:text-gray-400 mt-4">
          Think of Towerops as combining the best of LibreNMS, Icinga2/Nagios, and PagerDuty into
          a single, unified platform. You get deep network device monitoring with SNMP auto-discovery,
          flexible health checks and alerting, and intelligent incident management—all with a modern
          interface that makes complex monitoring workflows simple and accessible.
        </p>

        <p class="text-gray-600 dark:text-gray-400 mt-4">
          Towerops is not and has no plans to be a replacement for a full WISP/network billing system.
        </p>

        <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
          <div class="p-4 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
            <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">
              Network Monitoring
            </h4>
            <p class="text-sm text-gray-600 dark:text-gray-400">
              Like LibreNMS, discover and monitor network devices via SNMP with support for
              multi-vendor equipment, interface statistics, and topology mapping.
            </p>
          </div>
          <div class="p-4 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
            <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">
              Health Checks & Alerting
            </h4>
            <p class="text-sm text-gray-600 dark:text-gray-400">
              Like Icinga2/Nagios, configure flexible monitoring checks with customizable thresholds
              and alert conditions for any metric or device state.
            </p>
          </div>
          <div class="p-4 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
            <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">
              Incident Management
            </h4>
            <p class="text-sm text-gray-600 dark:text-gray-400">
              Like PagerDuty, manage incidents with intelligent alerting, escalation policies,
              and notification routing to keep your team informed.
            </p>
          </div>
        </div>

        <div class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
          <div class="flex gap-3">
            <.icon
              name="hero-information-circle"
              class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5"
            />
            <div>
              <p class="text-sm text-blue-800 dark:text-blue-300">
                Ready to get started? Check out the
                <.link
                  patch={~p"/help?section=getting-started"}
                  class="underline hover:text-blue-900 dark:hover:text-blue-200"
                >
                  Getting Started
                </.link>
                guide to begin monitoring your network infrastructure.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    """
  end
end