<%- include('cookie-banner') -%>
  <footer class="bg-gradient-to-b from-gray-50 to-white border-t border-gray-200/60" aria-labelledby="footer-heading">
    <h2 id="footer-heading" class="sr-only">Footer</h2>

    <!-- CTA Section -->
    <div class="border-b border-gray-200/60 bg-gradient-to-r from-gray-50 via-gray-100/30 to-gray-50">
      <div class="mx-auto max-w-7xl px-6 py-14 lg:px-8">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-10">
          <div class="max-w-2xl">
            <div class="flex items-center gap-3 mb-3">
              <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-gray-900 shadow-sm">
                <svg class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0l-5.571 3-5.571-3" />
                </svg>
              </div>
              <span class="text-sm font-medium text-gray-900">Open Source Observability</span>
            </div>
            <h3 class="text-2xl font-semibold text-gray-900 tracking-tight">Build reliable systems with confidence</h3>
            <p class="mt-3 text-base text-gray-600">Join thousands of developers using OneUptime to monitor, debug, and optimize their infrastructure, stack, and apps.</p>
          </div>
          <div class="flex flex-col sm:flex-row gap-4 sm:items-center">
            <a href="/blog" class="inline-flex items-center justify-center gap-2 rounded-full bg-white px-6 py-3 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-gray-200 hover:bg-gray-50 hover:ring-gray-300 transition-all duration-200">
              <svg class="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
              </svg>
              Read Blog
            </a>
            <a href="https://github.com/oneuptime/oneuptime" target="_blank" class="inline-flex items-center justify-center gap-2 rounded-full bg-gray-900 px-6 py-3 text-sm font-semibold text-white shadow-sm hover:bg-gray-900 transition-all duration-200 hover:shadow-md">
              <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
                <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
              </svg>
              Star on GitHub
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Main Footer Content -->
    <div class="mx-auto max-w-7xl px-6 py-16 lg:px-8">
      <div class="xl:grid xl:grid-cols-3 xl:gap-12">

        <!-- Brand Section -->
        <div class="space-y-6">
          <a href="/" class="inline-block">
            <img class="h-8 w-auto" src="/img/4-gray.svg" alt="OneUptime">
          </a>
          <p class="text-sm text-gray-600 leading-relaxed max-w-xs">
            The complete open-source observability platform. Monitor, debug, and improve your entire stack in one place.
          </p>

          <!-- Social Links -->
          <div class="flex items-center gap-4">
            <a href="https://github.com/oneuptime/oneuptime" target="_blank"
               class="group flex items-center justify-center w-10 h-10 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-900 hover:text-white transition-all duration-200 hover:scale-105">
              <span class="sr-only">GitHub</span>
              <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
              </svg>
            </a>
            <a href="https://x.com/oneuptimehq" target="_blank"
               class="group flex items-center justify-center w-10 h-10 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-900 hover:text-white transition-all duration-200 hover:scale-105">
              <span class="sr-only">X</span>
              <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 220 200" aria-hidden="true">
                <path d="M173.263 0H206.998L133.297 84.718L220 200H152.112L98.9403 130.082L38.0995 200H4.34432L83.1743 109.385L0 0H69.6111L117.674 63.9077L173.263 0ZM161.423 179.692H180.116L59.4539 19.241H39.3946L161.423 179.692Z"/>
              </svg>
            </a>
            <a href="https://www.youtube.com/@OneUptimeHQ" target="_blank"
               class="group flex items-center justify-center w-10 h-10 rounded-full bg-gray-100 text-gray-600 hover:bg-red-600 hover:text-white transition-all duration-200 hover:scale-105">
              <span class="sr-only">YouTube</span>
              <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd" />
              </svg>
            </a>
            <a href="https://www.reddit.com/r/oneuptimehq/" target="_blank"
               class="group flex items-center justify-center w-10 h-10 rounded-full bg-gray-100 text-gray-600 hover:bg-orange-600 hover:text-white transition-all duration-200 hover:scale-105">
              <span class="sr-only">Reddit</span>
              <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M14.238 15.348c.085.084.085.221 0 .306-.465.462-1.194.687-2.231.687l-.008-.002-.008.002c-1.036 0-1.766-.225-2.231-.688-.085-.084-.085-.221 0-.305.084-.084.222-.084.307 0 .379.377 1.008.561 1.924.561l.008.002.008-.002c.915 0 1.544-.184 1.924-.561.085-.084.223-.084.307 0zm-3.44-2.418c0-.507-.414-.919-.922-.919-.509 0-.923.412-.923.919 0 .506.414.918.923.918.508.001.922-.411.922-.918zm13.202-.93c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5-.129c0-.851-.695-1.543-1.55-1.543-.417 0-.795.167-1.074.435-1.056-.695-2.485-1.137-4.066-1.194l.865-2.724 2.343.549-.003.034c0 .696.569 1.262 1.268 1.262.699 0 1.267-.566 1.267-1.262s-.568-1.262-1.267-1.262c-.537 0-.994.335-1.179.804l-2.525-.592c-.11-.027-.223.037-.257.145l-.965 3.038c-1.656.02-3.155.466-4.258 1.181-.277-.255-.644-.415-1.05-.415-.854.001-1.549.693-1.549 1.544 0 .566.311 1.056.768 1.325-.03.164-.05.331-.05.5 0 2.281 2.805 4.137 6.253 4.137s6.253-1.856 6.253-4.137c0-.16-.017-.317-.044-.472.486-.261.82-.766.82-1.353zm-4.872.141c-.509 0-.922.412-.922.919 0 .506.414.918.922.918s.922-.412.922-.918c0-.507-.413-.919-.922-.919z"/>
              </svg>
            </a>
            <a href="https://www.linkedin.com/company/oneuptime" target="_blank"
               class="group flex items-center justify-center w-10 h-10 rounded-full bg-gray-100 text-gray-600 hover:bg-blue-700 hover:text-white transition-all duration-200 hover:scale-105">
              <span class="sr-only">LinkedIn</span>
              <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
              </svg>
            </a>
          </div>

          <!-- Trust Statement -->
          <p class="text-sm text-gray-500 leading-relaxed pt-2">
            Trusted by thousands of teams worldwide - from Fortune 500 enterprises to fast-growing startups.
          </p>
        </div>

        <!-- Links Grid -->
        <div class="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
          <div class="md:grid md:grid-cols-2 md:gap-8">

            <!-- Products Column -->
            <div>
              <h3 class="text-sm font-semibold text-gray-900">Products</h3>
              <ul role="list" class="mt-4 space-y-3">
                <li><a href="/product/status-page" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Status Page</a></li>
                <li><a href="/product/incident-management" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Incidents</a></li>
                <li><a href="/product/monitoring" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Monitoring</a></li>
                <li><a href="/product/on-call" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">On-Call</a></li>
                <li><a href="/product/logs-management" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Logs</a></li>
                <li><a href="/product/metrics" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Metrics</a></li>
                <li><a href="/product/traces" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Traces</a></li>
                <li><a href="/product/exceptions" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Exceptions</a></li>
                <li><a href="/product/workflows" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Workflows</a></li>
                <li><a href="/product/dashboards" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Dashboards</a></li>
                <li><a href="/product/ai-agent" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">AI Agent</a></li>
              </ul>
            </div>

            <!-- Solutions Column -->
            <div class="mt-10 md:mt-0">
              <h3 class="text-sm font-semibold text-gray-900">Solutions</h3>
              <ul role="list" class="mt-4 space-y-3">
                <li><a href="/enterprise/overview" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Enterprise</a></li>
                <li><a href="/enterprise/demo" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Request Demo</a></li>
                <li><a href="/pricing" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Pricing</a></li>
                <li><a href="/legal/data-residency" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Data Residency</a></li>
              </ul>

              <h3 class="text-sm font-semibold text-gray-900 mt-8">Teams</h3>
              <ul role="list" class="mt-4 space-y-3">
                <li><a href="/solutions/devops" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">DevOps</a></li>
                <li><a href="/solutions/sre" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">SRE</a></li>
                <li><a href="/solutions/platform" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Platform</a></li>
                <li><a href="/solutions/developers" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Developers</a></li>
              </ul>
            </div>

          </div>

          <div class="md:grid md:grid-cols-2 md:gap-8">

            <!-- Resources Column -->
            <div>
              <h3 class="text-sm font-semibold text-gray-900">Resources</h3>
              <ul role="list" class="mt-4 space-y-3">
                <li><a href="/docs" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Documentation</a></li>
                <li><a href="/reference" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">API Reference</a></li>
                <li><a href="/blog" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Blog</a></li>
                <li><a href="/support" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Help & Support</a></li>
                <li><a href="https://github.com/oneuptime/oneuptime" target="_blank" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">GitHub</a></li>
                <li><a href="https://github.com/oneuptime/oneuptime/releases" target="_blank" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Changelog</a></li>
                <li><a href="/oss-friends" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Open Source Friends</a></li>
              </ul>

              <h3 class="text-sm font-semibold text-gray-900 mt-8">Industries</h3>
              <ul role="list" class="mt-4 space-y-3">
                <li><a href="/industries/fintech" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">FinTech</a></li>
                <li><a href="/industries/saas" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">SaaS</a></li>
                <li><a href="/industries/healthcare" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Healthcare</a></li>
                <li><a href="/industries/ecommerce" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">E-Commerce</a></li>
                <li><a href="/industries/media" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Media</a></li>
                <li><a href="/industries/government" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Government</a></li>
              </ul>
            </div>

            <!-- Company Column -->
            <div class="mt-10 md:mt-0">
              <h3 class="text-sm font-semibold text-gray-900">Company</h3>
              <ul role="list" class="mt-4 space-y-3">
                <li><a href="/about" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">About Us</a></li>
                <li><a href="https://github.com/OneUptime/interview" target="_blank" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Careers</a></li>
                <li><a href="https://shop.oneuptime.com" target="_blank" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Merch Store</a></li>
                <li><a href="/legal/contact" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Contact</a></li>
              </ul>

              <h3 class="text-sm font-semibold text-gray-900 mt-8">Legal</h3>
              <ul role="list" class="mt-4 space-y-3">
                <li><a href="/legal/terms" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Terms of Service</a></li>
                <li><a href="/legal/privacy" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Privacy Policy</a></li>
                <li><a href="/legal/sla" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">SLA</a></li>
                <li><a href="/legal" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">Legal Center</a></li>
              </ul>

              <h3 class="text-sm font-semibold text-gray-900 mt-8">Compare</h3>
              <ul role="list" class="mt-4 space-y-3">
                <li><a href="/compare/pagerduty" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">vs PagerDuty</a></li>
                <li><a href="/compare/statuspage.io" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">vs Statuspage</a></li>
                <li><a href="/compare/incident.io" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">vs Incident.io</a></li>
                <li><a href="/compare/pingdom" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">vs Pingdom</a></li>
                <li><a href="/compare/datadog" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">vs Datadog</a></li>
                <li><a href="/compare/newrelic" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">vs New Relic</a></li>
                <li><a href="/compare/better-uptime" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">vs Better Stack</a></li>
                <li><a href="/compare/uptime-robot" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">vs Uptime Robot</a></li>
                <li><a href="/compare/checkly" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">vs Checkly</a></li>
                <li><a href="/compare/signoz" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">vs SigNoz</a></li>
              </ul>
            </div>

          </div>
        </div>
      </div>
    </div>

    <!-- Bottom Bar -->
    <div class="border-t border-gray-200/60 bg-gray-50/50">
      <div class="mx-auto max-w-7xl px-6 py-6 lg:px-8">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
          <div class="flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-6">
            <p class="text-sm text-gray-500">&copy; <%= new Date().getFullYear() %> HackerBay, Inc. All rights reserved.</p>
            <div class="flex items-center gap-4">
              <a href="https://github.com/oneuptime/oneuptime" target="_blank" class="inline-flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200 group">
                <span class="flex items-center justify-center w-6 h-6 rounded-full bg-gray-200 group-hover:bg-gray-900 transition-colors duration-200">
                  <svg class="h-3.5 w-3.5 text-gray-600 group-hover:text-white transition-colors duration-200" fill="currentColor" viewBox="0 0 24 24">
                    <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
                  </svg>
                </span>
                <span class="font-medium">Open Source</span>
              </a>
              <span class="text-gray-300">|</span>
              <span class="text-sm text-gray-500">Made with care for developers worldwide</span>
            </div>
          </div>
          <div class="flex items-center gap-4">
            <a href="/legal/soc-2" class="text-xs text-gray-400 hover:text-gray-600 transition-colors duration-200">SOC 2</a>
            <a href="/legal/hipaa" class="text-xs text-gray-400 hover:text-gray-600 transition-colors duration-200">HIPAA</a>
            <a href="/legal/gdpr" class="text-xs text-gray-400 hover:text-gray-600 transition-colors duration-200">GDPR</a>
            <a href="/legal/iso-27001" class="text-xs text-gray-400 hover:text-gray-600 transition-colors duration-200">ISO 27001</a>
          </div>
        </div>
      </div>
    </div>

  </footer>
