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

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

<head>
    <title>OneUptime | Help and Support</title>
    <meta name="description"
        content="Get help with OneUptime. Contact our support team, browse documentation, or schedule a call with our engineers.">

    <!-- Open Graph -->
    <meta property="og:title" content="OneUptime | Help and Support">
    <meta property="og:description" content="Get help with OneUptime. Contact our support team, browse documentation, or schedule a call with our engineers.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://oneuptime.com/support">

    <%- include('head', {
        enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false
    }) -%>

    <style>
        /* Support Card Styles with Colorful Glow Effects */
        .support-card-wrapper {
            position: relative;
        }
        .support-card-wrapper::before {
            content: '';
            position: absolute;
            inset: -40px;
            border-radius: 50%;
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            pointer-events: none;
            z-index: 0;
        }
        .support-card-wrapper:hover::before {
            opacity: 1;
        }
        .support-card {
            position: relative;
            z-index: 1;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .support-card:hover {
            transform: translateY(-2px);
        }

        /* Blue - Support Email */
        .support-glow-blue-wrapper::before {
            background: radial-gradient(ellipse at center, rgb(59 130 246 / 0.08) 0%, rgb(59 130 246 / 0.03) 40%, transparent 70%);
        }
        .support-glow-blue:hover {
            box-shadow: 0 0 0 2px rgb(59 130 246 / 0.2), 0 8px 24px -8px rgb(59 130 246 / 0.2), 0 0 40px -12px rgb(59 130 246 / 0.15);
        }

        /* Purple - Slack */
        .support-glow-purple-wrapper::before {
            background: radial-gradient(ellipse at center, rgb(168 85 247 / 0.08) 0%, rgb(168 85 247 / 0.03) 40%, transparent 70%);
        }
        .support-glow-purple:hover {
            box-shadow: 0 0 0 2px rgb(168 85 247 / 0.2), 0 8px 24px -8px rgb(168 85 247 / 0.2), 0 0 40px -12px rgb(168 85 247 / 0.15);
        }

        /* Emerald - Documentation */
        .support-glow-emerald-wrapper::before {
            background: radial-gradient(ellipse at center, rgb(16 185 129 / 0.08) 0%, rgb(16 185 129 / 0.03) 40%, transparent 70%);
        }
        .support-glow-emerald:hover {
            box-shadow: 0 0 0 2px rgb(16 185 129 / 0.2), 0 8px 24px -8px rgb(16 185 129 / 0.2), 0 0 40px -12px rgb(16 185 129 / 0.15);
        }

        /* Amber - Sales & Media */
        .support-glow-amber-wrapper::before {
            background: radial-gradient(ellipse at center, rgb(245 158 11 / 0.08) 0%, rgb(245 158 11 / 0.03) 40%, transparent 70%);
        }
        .support-glow-amber:hover {
            box-shadow: 0 0 0 2px rgb(245 158 11 / 0.2), 0 8px 24px -8px rgb(245 158 11 / 0.2), 0 0 40px -12px rgb(245 158 11 / 0.15);
        }

        /* FAQ Accordion Styles */
        .faq-item {
            transition: all 0.2s ease;
        }
        .faq-item:hover {
            background-color: rgb(249 250 251);
        }
        .faq-item summary::-webkit-details-marker {
            display: none;
        }
        .faq-item summary::marker {
            display: none;
        }
        .faq-chevron {
            transition: transform 0.2s ease;
        }
        .faq-item[open] .faq-chevron {
            transform: rotate(180deg);
        }
    </style>
</head>

<body class="bg-white antialiased text-gray-900">
    <%- include('nav') -%>
    <main id="main-content">
        <!-- Hero Section -->
        <section class="relative isolate overflow-hidden bg-white" id="support-hero-section">
            <!-- Subtle grid pattern background -->
            <div class="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>

            <!-- Grid glow effect that follows cursor - Blue like home page -->
            <div id="support-grid-glow-effect" class="absolute inset-0 -z-9 pointer-events-none" style="opacity: 0; transition: opacity 0.3s ease-out; background: linear-gradient(to right, rgba(59, 130, 246, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(59, 130, 246, 0.3) 1px, transparent 1px); background-size: 4rem 4rem; -webkit-mask-image: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%); mask-image: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%);"></div>

            <div class="py-24 sm:py-32">
                <div class="mx-auto max-w-7xl px-6 lg:px-8">
                    <div class="mx-auto max-w-3xl text-center">
                        <!-- Badge -->
                        <div class="mb-8 inline-flex items-center gap-2 rounded-full bg-blue-50 px-4 py-2 text-sm text-blue-700 ring-1 ring-inset ring-blue-200">
                            <svg class="h-4 w-4 text-blue-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
                            </svg>
                            <span>Always humans, never bots</span>
                        </div>

                        <!-- Main headline -->
                        <h1 class="text-4xl font-medium tracking-tight text-gray-900 sm:text-5xl lg:text-[3.5rem] lg:leading-[1.15]">
                            Help &amp; Support
                        </h1>

                        <!-- Subheadline -->
                        <p class="mt-6 text-base leading-7 text-gray-600 sm:text-lg sm:leading-8 max-w-xl mx-auto">
                            Friendly folks, standing by. We respond to most requests in under one business day. Get the help you need to keep your systems running.
                        </p>

                        <!-- CTA buttons -->
                        <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 relative z-10">
                            <a href="mailto:support@oneuptime.com" class="w-full sm:w-auto inline-flex items-center justify-center rounded-lg bg-gray-900 px-6 py-2.5 text-sm font-medium text-white shadow-sm transition-all hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900">
                                Email support
                                <svg class="ml-2 h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg>
                            </a>
                            <a href="/docs" class="w-full sm:w-auto inline-flex items-center justify-center rounded-lg bg-white px-6 py-2.5 text-sm font-medium text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 transition-all hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600">
                                <svg class="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" 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>
                                Browse docs
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Contact Options Section -->
        <section class="bg-gray-50 py-24 sm:py-32">
            <div class="mx-auto max-w-7xl px-6 lg:px-8">
                <div class="mx-auto max-w-2xl text-center mb-16">
                    <h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">Get in Touch</h2>
                    <p class="mt-4 text-lg text-gray-600">Choose the channel that works best for you.</p>
                </div>

                <div class="mx-auto max-w-5xl">
                    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                        <!-- Support Email - Blue -->
                        <div class="support-card-wrapper support-glow-blue-wrapper">
                            <div class="support-card support-glow-blue bg-white rounded-2xl p-8 ring-1 ring-inset ring-gray-200 transition-all hover:ring-blue-300 h-full">
                                <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-blue-50 ring-1 ring-blue-200 mb-6">
                                    <svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                        <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 mb-3">Support Email</h3>
                                <p class="text-gray-600 leading-relaxed text-sm mb-6">
                                    Questions or issues? Send us an email and we'll get back within one business day. Perfect for non-urgent inquiries.
                                </p>
                                <a href="mailto:support@oneuptime.com" class="inline-flex items-center text-sm font-medium text-blue-600 hover:text-blue-700 transition-colors">
                                    support@oneuptime.com
                                    <svg class="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
                                    </svg>
                                </a>
                            </div>
                        </div>

                        <!-- Slack - Purple -->
                        <div class="support-card-wrapper support-glow-purple-wrapper">
                            <div class="support-card support-glow-purple bg-white rounded-2xl p-8 ring-1 ring-inset ring-gray-200 transition-all hover:ring-purple-300 h-full">
                                <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-purple-50 ring-1 ring-purple-200 mb-6">
                                    <svg class="h-5 w-5 text-purple-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 01.778-.332 48.294 48.294 0 005.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
                                    </svg>
                                </div>
                                <h3 class="text-lg font-semibold text-gray-900 mb-3">Technical Support (Slack)</h3>
                                <p class="text-gray-600 leading-relaxed text-sm mb-6">
                                    Chat with our engineers for help with the dashboard, APIs, and features. Enterprise plans get a dedicated channel.
                                </p>
                                <a href="https://join.slack.com/t/oneuptimesupport/shared_invite/zt-2pz5p1uhe-Fpmc7bv5ZE5xRMe7qJnwmA" target="_blank" rel="noopener" class="inline-flex items-center text-sm font-medium text-purple-600 hover:text-purple-700 transition-colors">
                                    Chat on Slack
                                    <svg class="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
                                    </svg>
                                </a>
                            </div>
                        </div>

                        <!-- Documentation - Emerald -->
                        <div class="support-card-wrapper support-glow-emerald-wrapper">
                            <div class="support-card support-glow-emerald bg-white rounded-2xl p-8 ring-1 ring-inset ring-gray-200 transition-all hover:ring-emerald-300 h-full">
                                <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-emerald-50 ring-1 ring-emerald-200 mb-6">
                                    <svg class="h-5 w-5 text-emerald-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" 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>
                                </div>
                                <h3 class="text-lg font-semibold text-gray-900 mb-3">Documentation</h3>
                                <p class="text-gray-600 leading-relaxed text-sm mb-6">
                                    Guides, API references, and best practices to help you ship faster and resolve issues quickly. Self-serve support 24/7.
                                </p>
                                <a href="/docs" class="inline-flex items-center text-sm font-medium text-emerald-600 hover:text-emerald-700 transition-colors">
                                    Open docs
                                    <svg class="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
                                    </svg>
                                </a>
                            </div>
                        </div>

                        <!-- Sales & Media - Amber -->
                        <div class="support-card-wrapper support-glow-amber-wrapper">
                            <div class="support-card support-glow-amber bg-white rounded-2xl p-8 ring-1 ring-inset ring-gray-200 transition-all hover:ring-amber-300 h-full">
                                <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-amber-50 ring-1 ring-amber-200 mb-6">
                                    <svg class="h-5 w-5 text-amber-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"/>
                                    </svg>
                                </div>
                                <h3 class="text-lg font-semibold text-gray-900 mb-3">Sales &amp; Media</h3>
                                <p class="text-gray-600 leading-relaxed text-sm mb-6">
                                    Looking for a demo, quotes, or press info? Our team can help with enterprise plans and media requests.
                                </p>
                                <div class="flex items-center gap-6">
                                    <a href="mailto:sales@oneuptime.com" class="inline-flex items-center text-sm font-medium text-amber-600 hover:text-amber-700 transition-colors">
                                        Contact sales
                                        <svg class="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
                                        </svg>
                                    </a>
                                    <a href="mailto:press@oneuptime.com" class="inline-flex items-center text-sm font-medium text-amber-600 hover:text-amber-700 transition-colors">
                                        Press
                                        <svg class="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- FAQ Section -->
        <section class="bg-white py-24 sm:py-32">
            <div class="mx-auto max-w-7xl px-6 lg:px-8">
                <div class="mx-auto max-w-2xl text-center mb-16">
                    <h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">Frequently Asked Questions</h2>
                    <p class="mt-4 text-lg text-gray-600">Quick answers to common questions.</p>
                </div>

                <div class="mx-auto max-w-3xl">
                    <div class="bg-white rounded-2xl ring-1 ring-inset ring-gray-200 overflow-hidden shadow-sm">
                        <div class="divide-y divide-gray-100">
                            <details class="faq-item group">
                                <summary class="flex cursor-pointer items-center justify-between px-6 py-5 text-left">
                                    <span class="text-base font-medium text-gray-900">What are your support hours?</span>
                                    <span class="ml-6 flex-shrink-0">
                                        <svg class="faq-chevron h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                                            <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>
                                <div class="px-6 pb-5">
                                    <p class="text-sm leading-relaxed text-gray-600">We provide global coverage Monday through Friday and monitor critical channels 24/7 for enterprise SLAs. Most requests receive a response within one business day.</p>
                                </div>
                            </details>

                            <details class="faq-item group">
                                <summary class="flex cursor-pointer items-center justify-between px-6 py-5 text-left">
                                    <span class="text-base font-medium text-gray-900">How do I get enterprise support?</span>
                                    <span class="ml-6 flex-shrink-0">
                                        <svg class="faq-chevron h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                                            <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>
                                <div class="px-6 pb-5">
                                    <p class="text-sm leading-relaxed text-gray-600">Enterprise plans include a dedicated Slack channel, priority response times, and direct access to our engineering team. <a href="/enterprise/demo" class="font-medium text-blue-600 hover:text-blue-700 underline decoration-blue-300 underline-offset-2">Request a demo</a> to learn more about enterprise features.</p>
                                </div>
                            </details>

                            <details class="faq-item group">
                                <summary class="flex cursor-pointer items-center justify-between px-6 py-5 text-left">
                                    <span class="text-base font-medium text-gray-900">Where can I find product guides and API docs?</span>
                                    <span class="ml-6 flex-shrink-0">
                                        <svg class="faq-chevron h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                                            <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>
                                <div class="px-6 pb-5">
                                    <p class="text-sm leading-relaxed text-gray-600">Head to our <a href="/docs" class="font-medium text-emerald-600 hover:text-emerald-700 underline decoration-emerald-300 underline-offset-2">documentation</a> for quick starts, tutorials, API references, and integration guides. Everything you need to get up and running.</p>
                                </div>
                            </details>

                            <details class="faq-item group">
                                <summary class="flex cursor-pointer items-center justify-between px-6 py-5 text-left">
                                    <span class="text-base font-medium text-gray-900">Can I self-host OneUptime?</span>
                                    <span class="ml-6 flex-shrink-0">
                                        <svg class="faq-chevron h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                                            <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>
                                <div class="px-6 pb-5">
                                    <p class="text-sm leading-relaxed text-gray-600">OneUptime is 100% open source and can be self-hosted on your own infrastructure. Check out our <a href="https://github.com/oneuptime/oneuptime" target="_blank" class="font-medium text-purple-600 hover:text-purple-700 underline decoration-purple-300 underline-offset-2">GitHub repository</a> for deployment instructions and Docker/Kubernetes configurations.</p>
                                </div>
                            </details>

                            <details class="faq-item group">
                                <summary class="flex cursor-pointer items-center justify-between px-6 py-5 text-left">
                                    <span class="text-base font-medium text-gray-900">What's included in the free plan?</span>
                                    <span class="ml-6 flex-shrink-0">
                                        <svg class="faq-chevron h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                                            <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>
                                <div class="px-6 pb-5">
                                    <p class="text-sm leading-relaxed text-gray-600">Our free plan includes monitoring, status pages, incident management, and on-call scheduling. Visit our <a href="/pricing" class="font-medium text-amber-600 hover:text-amber-700 underline decoration-amber-300 underline-offset-2">pricing page</a> to see what's included in each plan and find the right fit for your team.</p>
                                </div>
                            </details>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Schedule a Call Section -->
        <section class="bg-gray-50 py-24 sm:py-32" id="schedule-call-section">
            <div class="mx-auto max-w-7xl px-6 lg:px-8">
                <div class="mx-auto max-w-2xl text-center mb-12">
                    <h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">Schedule a Call</h2>
                    <p class="mt-4 text-lg text-gray-600">Need personalized help? Book time with our team.</p>
                </div>

                <div class="mx-auto max-w-4xl">
                    <div class="bg-white rounded-2xl ring-1 ring-inset ring-gray-200 overflow-hidden shadow-sm">
                        <div class="p-4 sm:p-6">
                            <!-- Cal inline embed code begins -->
                            <div style="width:100%;height:600px;overflow:auto" 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": "#3b82f6" } }, "hideEventTypeDetails": false, "layout": "month_view" });

                                Cal("on", {
                                    action: "bookingSuccessful",
                                    callback: (e) => {
                                        const { data, type, namespace } = e.detail;

                                        if (typeof posthog !== 'undefined' && 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>
                </div>
            </div>
        </section>

        <%- include('cta') -%>
    </main>
    <%- include('footer') -%>

    <script>
    // Subtle cursor-following grid glow effect - Blue like home page
    (function() {
        const section = document.getElementById('support-hero-section');
        const glowEffect = document.getElementById('support-grid-glow-effect');

        if (!section || !glowEffect) return;

        let isHovering = false;
        let animationFrame = null;
        let currentX = 0;
        let currentY = 0;
        let targetX = 0;
        let targetY = 0;

        function lerp(start, end, factor) {
            return start + (end - start) * factor;
        }

        function animate() {
            if (!isHovering) return;

            currentX = lerp(currentX, targetX, 0.12);
            currentY = lerp(currentY, targetY, 0.12);

            glowEffect.style.setProperty('--mouse-x', currentX + 'px');
            glowEffect.style.setProperty('--mouse-y', currentY + 'px');

            animationFrame = requestAnimationFrame(animate);
        }

        section.addEventListener('mouseenter', function() {
            isHovering = true;
            glowEffect.style.opacity = '1';
            animate();
        });

        section.addEventListener('mousemove', function(e) {
            const rect = section.getBoundingClientRect();
            targetX = e.clientX - rect.left;
            targetY = e.clientY - rect.top;

            if (!isHovering) {
                currentX = targetX;
                currentY = targetY;
            }
        });

        section.addEventListener('mouseleave', function() {
            isHovering = false;
            glowEffect.style.opacity = '0';
            if (animationFrame) {
                cancelAnimationFrame(animationFrame);
                animationFrame = null;
            }
        });
    })();
    </script>
</body>
</html>
