<!DOCTYPE html>
<html lang="en" id="contact">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<head>
    <title>OneUptime | Help and Support</title>
    <meta name="description"
        content="OneUptime monitors websites, API's, and servers and alerts your team if something goes wrong. It also keeps your customers updated about any downtime.">
        <%- include('head', {
    enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false
}) -%>
</head>

<body class="bg-white antialiased text-gray-900">
  <%- include('nav') -%>

  <!-- Hero -->
  <header class="relative isolate overflow-hidden bg-gradient-to-b from-indigo-700 via-indigo-700 to-indigo-800">
    <div class="absolute inset-0 -z-10 opacity-20" aria-hidden="true">
      <div class="h-full w-full bg-[radial-gradient(1000px_500px_at_50%_-10%,rgba(255,255,255,0.35),transparent)]"></div>
    </div>
    <div class="mx-auto max-w-7xl px-6 py-20 sm:py-28 lg:px-8">
      <div class="max-w-3xl">
        <h1 class="text-4xl font-bold tracking-tight text-white md:text-5xl lg:text-6xl">Help &amp; Support</h1>
        <p class="mt-6 text-lg leading-8 text-indigo-100">Friendly folks, standing by. Always humans, never bots. We respond to most requests in under one business day.</p>
        <div class="mt-8 flex flex-wrap gap-3">
          <a href="mailto:support@oneuptime.com" class="inline-flex items-center rounded-md bg-white/10 px-4 py-2 text-sm font-semibold text-white ring-1 ring-inset ring-white/20 hover:bg-white/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-white">Email support</a>
          <a href="/docs" class="inline-flex items-center rounded-md bg-white px-4 py-2 text-sm font-semibold text-indigo-700 shadow-sm hover:bg-indigo-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Browse docs</a>
        </div>
      </div>
    </div>
  </header>

  <!-- Contact options -->
  <section class="relative z-10 mx-auto -mt-16 max-w-7xl px-6 pb-24 lg:-mt-20 lg:px-8" aria-labelledby="contact-heading">
    <h2 class="sr-only" id="contact-heading">Contact OneUptime support</h2>

    <div class="grid grid-cols-1 gap-6 sm:gap-8 md:grid-cols-2 lg:grid-cols-4">
      <!-- Support Email -->
      <div class="flex flex-col rounded-2xl bg-white shadow-sm ring-1 ring-gray-200">
        <div class="relative flex-1 px-6 pt-14 pb-6">
          <div class="absolute top-0 left-6 -translate-y-1/2 transform rounded-xl bg-indigo-600 p-3 shadow-md">
            <!-- Heroicon: envelope -->
            <svg class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25H4.5a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15A2.25 2.25 0 002.25 6.75m19.5 0v.243a2.25 2.25 0 01-1.03 1.905l-7.5 4.615a2.25 2.25 0 01-2.34 0l-7.5-4.615a2.25 2.25 0 01-1.03-1.905V6.75"/></svg>
          </div>
          <h3 class="text-lg font-semibold text-gray-900">Support Email</h3>
          <p class="mt-3 text-sm leading-6 text-gray-600">Questions or issues? Send us an email and we’ll get back within one business day.</p>
        </div>
        <div class="rounded-b-2xl bg-gray-50 px-6 py-4">
          <a href="mailto:support@oneuptime.com" class="text-sm font-medium text-indigo-700 hover:text-indigo-600">support@oneuptime.com<span class="ml-1" aria-hidden="true">→</span></a>
        </div>
      </div>

      <!-- Slack -->
      <div class="flex flex-col rounded-2xl bg-white shadow-sm ring-1 ring-gray-200">
        <div class="relative flex-1 px-6 pt-14 pb-6">
          <div class="absolute top-0 left-6 -translate-y-1/2 transform rounded-xl bg-indigo-600 p-3 shadow-md">
            <!-- Heroicon: lifebuoy -->
            <svg class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M16.712 4.33a9.027 9.027 0 011.652 1.306c.51.51.944 1.064 1.306 1.652M16.712 4.33l-3.448 4.138m3.448-4.138a9.014 9.014 0 00-9.424 0M19.67 7.288l-4.138 3.448m4.138-3.448a9.014 9.014 0 010 9.424m-4.138-5.976a3.736 3.736 0 00-.88-1.388 3.737 3.737 0 00-1.388-.88m2.268 2.268a3.765 3.765 0 010 2.528m-2.268-4.796a3.765 3.765 0 00-2.528 0m4.796 4.796c-.181.506-.475.982-.88 1.388a3.736 3.736 0 01-1.388.88m2.268-2.268l4.138 3.448m0 0a9.027 9.027 0 01-1.306 1.652c-.51.51-1.064.944-1.652 1.306m0 0l-3.448-4.138m3.448 4.138a9.014 9.014 0 01-9.424 0m5.976-4.138a3.765 3.765 0 01-2.528 0m0 0a3.736 3.736 0 01-1.388-.88 3.737 3.737 0 01-.88-1.388m2.268 2.268L7.288 19.67m0 0a9.024 9.024 0 01-1.652-1.306 9.027 9.027 0 01-1.306-1.652m0 0l4.138-3.448M4.33 16.712a9.014 9.014 0 010-9.424m4.138 5.976a3.765 3.765 0 010-2.528m0 0c.181-.506.475-.982.88-1.388a3.736 3.736 0 011.388-.88m-2.268 2.268L4.33 7.288m6.406 1.18L7.288 4.33m0 0a9.024 9.024 0 00-1.652 1.306A9.025 9.025 0 004.33 7.288" /></svg>
          </div>
          <h3 class="text-lg font-semibold text-gray-900">Technical Support (Slack)</h3>
          <p class="mt-3 text-sm leading-6 text-gray-600">Chat with our engineers for help with the dashboard, APIs, and features. Enterprise plans get a dedicated channel.</p>
        </div>
        <div class="rounded-b-2xl bg-gray-50 px-6 py-4">
          <a href="https://join.slack.com/t/oneuptimesupport/shared_invite/zt-2pz5p1uhe-Fpmc7bv5ZE5xRMe7qJnwmA" target="_blank" rel="noopener" class="text-sm font-medium text-indigo-700 hover:text-indigo-600">Chat on Slack<span class="ml-1" aria-hidden="true">→</span></a>
        </div>
      </div>

      <!-- Documentation -->
      <div class="flex flex-col rounded-2xl bg-white shadow-sm ring-1 ring-gray-200">
        <div class="relative flex-1 px-6 pt-14 pb-6">
          <div class="absolute top-0 left-6 -translate-y-1/2 transform rounded-xl bg-indigo-600 p-3 shadow-md">
            <!-- Heroicon: book-open -->
            <svg class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75c-2.755-2.06-6-2.25-9-.75v11.25c3-1.5 6-1.31 9 .75m0-11.25c2.755-2.06 6-2.25 9-.75v11.25c-3-1.5-6-1.31-9 .75m0-11.25v11.25"/></svg>
          </div>
          <h3 class="text-lg font-semibold text-gray-900">Documentation</h3>
          <p class="mt-3 text-sm leading-6 text-gray-600">Guides, API references, and best practices to help you ship faster and resolve issues quickly.</p>
        </div>
        <div class="rounded-b-2xl bg-gray-50 px-6 py-4">
          <a href="/docs" class="text-sm font-medium text-indigo-700 hover:text-indigo-600">Open docs<span class="ml-1" aria-hidden="true">→</span></a>
        </div>
      </div>

      <!-- Sales / Media -->
      <div class="flex flex-col rounded-2xl bg-white shadow-sm ring-1 ring-gray-200">
        <div class="relative flex-1 px-6 pt-14 pb-6">
          <div class="absolute top-0 left-6 -translate-y-1/2 transform rounded-xl bg-indigo-600 p-3 shadow-md">
            <!-- Heroicon: phone -->
            <svg class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25A2.25 2.25 0 0021.75 19.5v-1.372a1.125 1.125 0 00-.852-1.091l-4.423-1.106a1.125 1.125 0 00-1.173.417l-.97 1.293a1.125 1.125 0 01-1.21.38 12.035 12.035 0 01-7.143-7.143 1.125 1.125 0 01.38-1.21l1.293-.97a1.125 1.125 0 00.417-1.173L6.963 3.102A1.125 1.125 0 005.872 2.25H4.5A2.25 2.25 0 002.25 4.5v2.25z"/></svg>
          </div>
          <h3 class="text-lg font-semibold text-gray-900">Sales &amp; Media</h3>
          <p class="mt-3 text-sm leading-6 text-gray-600">Looking for a demo, quotes, or press info? Our team can help with enterprise plans and media requests.</p>
        </div>
        <div class="rounded-b-2xl bg-gray-50 px-6 py-4 flex items-center justify-between gap-4">
          <a href="mailto:sales@oneuptime.com" class="text-sm font-medium text-indigo-700 hover:text-indigo-600">Contact sales<span class="ml-1" aria-hidden="true">→</span></a>
          <a href="mailto:press@oneuptime.com" class="text-sm font-medium text-indigo-700 hover:text-indigo-600">Press<span class="ml-1" aria-hidden="true">→</span></a>
        </div>
      </div>
    </div>

    <!-- FAQ (no custom CSS; native details/summary) -->
    <div class="mt-16 rounded-2xl border border-gray-200 bg-white p-6 sm:p-8">
      <h3 class="text-xl font-semibold text-gray-900">Frequently asked</h3>
      <div class="mt-6 divide-y divide-gray-200">
        <details class="group py-4">
          <summary class="flex cursor-pointer list-none items-center justify-between text-left text-base font-medium text-gray-900">
            What are your support hours?
            <span class="ml-4 text-gray-400 group-open:rotate-180 transition"><svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z" clip-rule="evenodd"/></svg></span>
          </summary>
          <p class="mt-3 text-sm leading-6 text-gray-600">We provide global coverage Monday–Friday and monitor critical channels 24/7 for enterprise SLAs.</p>
        </details>
        <details class="group py-4">
          <summary class="flex cursor-pointer list-none items-center justify-between text-left text-base font-medium text-gray-900">
            How do I get enterprise support?
            <span class="ml-4 text-gray-400 group-open:rotate-180 transition"><svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z" clip-rule="evenodd"/></svg></span>
          </summary>
          <p class="mt-3 text-sm leading-6 text-gray-600">Enterprise plans include a dedicated Slack channel and priority response. <a href="/enterprise/demo" class="font-medium text-indigo-700 hover:text-indigo-600">Request a demo</a> to learn more.</p>
        </details>
        <details class="group py-4">
          <summary class="flex cursor-pointer list-none items-center justify-between text-left text-base font-medium text-gray-900">
            Where can I find product guides and API docs?
            <span class="ml-4 text-gray-400 group-open:rotate-180 transition"><svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z" clip-rule="evenodd"/></svg></span>
          </summary>
          <p class="mt-3 text-sm leading-6 text-gray-600">Head to our <a href="/docs" class="font-medium text-indigo-700 hover:text-indigo-600">documentation</a> for quick starts, tutorials, and API references.</p>
        </details>
      </div>
    </div>

    <!-- Call Scheduler -->
    <div class="mt-16 rounded-2xl border border-gray-200 bg-white p-6 sm:p-8">
      <h3 class="text-xl font-semibold text-gray-900 text-center">Schedule a Call</h3>
      <p class="mt-2 text-sm text-gray-600 text-center">Need personalized help? Schedule a call with our support team.</p>
      
      <div style="margin-top: 30px;">
        <!-- Cal inline embed code begins -->
        <div style="width:100%;height:100%;overflow:scroll" id="my-cal-inline-support"></div>
        <script type="text/javascript">
          (function (C, A, L) { let p = function (a, ar) { a.q.push(ar); }; let d = C.document; C.Cal = C.Cal || function () { let cal = C.Cal; let ar = arguments; if (!cal.loaded) { cal.ns = {}; cal.q = cal.q || []; d.head.appendChild(d.createElement("script")).src = A; cal.loaded = true; } if (ar[0] === L) { const api = function () { p(api, arguments); }; const namespace = ar[1]; api.q = api.q || []; typeof namespace === "string" ? (cal.ns[namespace] = api) && p(api, ar) : p(cal, ar); return; } p(cal, ar); }; })(window, "https://app.cal.com/embed/embed.js", "init");
          Cal("init", { origin: "https://cal.com" });

          Cal("inline", {
            elementOrSelector: "#my-cal-inline-support",
            calLink: "oneuptimehq/demo",
            layout: "month_view"
          });

          Cal("ui", { "styles": { "branding": { "brandColor": "#6366f1" } }, "hideEventTypeDetails": false, "layout": "month_view" });

          Cal("on", {
            action: "bookingSuccessful",
            callback: (e) => {
              // `data` is properties for the event.
              // `type` is the name of the action(You can also call it type of the action.) This would be same as "ANY_ACTION_NAME" except when ANY_ACTION_NAME="*" which listens to all the events.
              // `namespace` tells you the Cal namespace for which the event is fired/
              const { data, type, namespace } = e.detail;

              if (posthog) {
                posthog.capture('home/support-call-booked', {
                  'page': {
                    'path': window.location.pathname,
                    'referrer': document.referrer,
                    'search': window.location.search,
                    'url': window.location.href,
                    'title': document.title,
                  },
                  'data': data,
                  'type': type,
                  'namespace': namespace
                });
              }
            }
          })

        </script>
        <!-- Cal inline embed code ends -->
      </div>
    </div>

    <!-- Final CTA -->
    <div class="mt-10 flex flex-wrap items-center gap-3">
      <a href="mailto:support@oneuptime.com" class="inline-flex items-center rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Email support</a>
      <a href="https://join.slack.com/t/oneuptimesupport/shared_invite/zt-2pz5p1uhe-Fpmc7bv5ZE5xRMe7qJnwmA" target="_blank" rel="noopener" class="inline-flex items-center rounded-md bg-white px-4 py-2 text-sm font-semibold text-indigo-700 ring-1 ring-inset ring-indigo-200 hover:bg-indigo-50">Chat on Slack</a>
    </div>
  </section>

  <%- include('cta') -%>
  <%- include('footer') -%>
</body>
</html>
