<?php defined( 'ABSPATH' ) || die( 'Cheatin\' uh?' ); ?>
<?php if ( ! isset( $view ) ) { return; } ?>
<div id="hmwp_ghost_mode_modal" class="modal" tabindex="-1" role="dialog" style="margin-top: 1%;">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="background-color: #f5f5f7;min-width: 550px;">
            <div class="modal-body m-0 p-0" style="background-color: #f5f5f7 !important;">

                <div style="border-radius: 16px; width: 100%; position: relative; overflow: hidden;transform: scale(0.92) translateY(12px); transition: opacity 0.5s cubic-bezier(.16,1,.3,1), transform 0.5s cubic-bezier(.16,1,.3,1);">

                    <div style="position: relative; padding: 2.5rem 2rem 1.5rem; text-align: center; overflow: hidden;">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" style="position: absolute; top: 65%; left: 43%; transform: translate(-50%, -50%); width: 300px; height: 300px; opacity: 0.06;">
                            <g transform="translate(0, 9) scale(0.45)">
                                <path fill="none" stroke="#1a1a1a" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" d="M400,40 L640,140 L640,380 Q640,520 400,700 Q160,520 160,380 L160,140Z"/>
                                <path fill="none" stroke="#1a1a1a" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M400,90 L590,170 L590,370 Q590,490 400,640 Q210,490 210,370 L210,170Z"/>
                                <path fill="none" stroke="#1a1a1a" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" opacity="0.8" d="M400,140 L540,200 L540,360 Q540,460 400,580 Q260,460 260,360 L260,200Z"/>
                                <path fill="none" stroke="#1a1a1a" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round" opacity="0.5" d="M400,190 L490,230 L490,350 Q490,430 400,520 Q310,430 310,350 L310,230Z"/>
                                <ellipse fill="none" stroke="#1a1a1a" stroke-width="0.6" opacity="0.35" cx="400" cy="380" rx="360" ry="300" transform="rotate(-8,400,380)"/>
                                <ellipse fill="none" stroke="#1a1a1a" stroke-width="0.5" opacity="0.25" cx="400" cy="380" rx="380" ry="300" transform="rotate(5,400,380)"/>
                                <circle cx="400" cy="300" r="4" fill="none" stroke="#1a1a1a" stroke-width="0.8" opacity="0.5"/>
                            </g>
                        </svg>

                        <div style="position: relative; z-index: 2;">

                            <div style="display: inline-flex; align-items: center; gap: 6px; background: #fff3e6; border: 1px solid #ffd9a8; border-radius: 20px; padding: 5px 14px; margin-bottom: 16px;">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M12 2L3 7v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7L12 2z" fill="#EF8B1A"/></svg>
                                <span style="font-size: 12px; font-weight: 500; color: #b06000; letter-spacing: 0.5px; text-transform: uppercase;">Limited time offer</span>
                            </div>

                            <h2 style="font-family: 'Georgia', serif; font-size: 28px; font-weight: 700; color: #1a1a1a; margin: 0 0 6px; line-height: 1.25;">Upgrade to <span style="color: #EF8B1A;">Premium</span></h2>

                            <p style="font-size: 14px; color: #777; margin: 0 0 20px; line-height: 1.5;">Get advanced hack prevention with enterprise-grade security hardening for your WordPress sites.</p>

                            <div style="display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-bottom: 16px;">
                                <span style="font-size: 16px; color: #aaa; text-decoration: line-through;">$149/yr</span>
                                <span style="font-family: 'Georgia', serif; font-size: 42px; font-weight: 700; color: #1a1a1a; line-height: 1;">$52<span style="font-size: 18px; color: #555;">/yr</span></span>
                            </div>

                            <div style="background: linear-gradient(135deg, #e84118 0%, #f97316 100%); color: white; border-radius: 8px; padding: 3px 12px; display: inline-block; font-size: 13px; font-weight: 600; margin-bottom: 20px; letter-spacing: 0.3px;">SAVE 65% on Ghost 5</div>

                        </div>
                    </div>

                    <div style="padding: 0 2rem;">
                        <div style="display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px;">
                            <div style="display: flex; align-items: center; gap: 10px;">
                                <svg width="18" height="18" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="#e6f7ee" stroke="#34c77b" stroke-width="1"/><path d="M7 12.5l3 3 7-7" stroke="#34c77b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                <span style="font-size: 1rem; color: #444;">Hide and secure all WordPress entry points</span>
                            </div>
                            <div style="display: flex; align-items: center; gap: 10px;">
                                <svg width="18" height="18" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="#e6f7ee" stroke="#34c77b" stroke-width="1"/><path d="M7 12.5l3 3 7-7" stroke="#34c77b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                <span style="font-size: 1rem; color: #444;">Block malicious traffic before it reaches your site</span>
                            </div>
                            <div style="display: flex; align-items: center; gap: 10px;">
                                <svg width="18" height="18" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="#e6f7ee" stroke="#34c77b" stroke-width="1"/><path d="M7 12.5l3 3 7-7" stroke="#34c77b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                <span style="font-size: 1rem; color: #444;">Detect and fix security vulnerabilities</span>
                            </div>
                            <div style="display: flex; align-items: center; gap: 10px;">
                                <svg width="18" height="18" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="#e6f7ee" stroke="#34c77b" stroke-width="1"/><path d="M7 12.5l3 3 7-7" stroke="#34c77b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                <span style="font-size: 1rem; color: #444;">Block unwanted countries and suspicious traffic</span>
                            </div>
                            <div style="display: flex; align-items: center; gap: 10px;">
                                <svg width="18" height="18" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="#e6f7ee" stroke="#34c77b" stroke-width="1"/><path d="M7 12.5l3 3 7-7" stroke="#34c77b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                <span style="font-size: 1rem; color: #444;">See attacks in real time</span>
                            </div>
                            <div style="display: flex; align-items: center; gap: 10px;">
                                <svg width="18" height="18" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="#e6f7ee" stroke="#34c77b" stroke-width="1"/><path d="M7 12.5l3 3 7-7" stroke="#34c77b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                <span style="font-size: 1rem; color: #444;">Monitor user activity and changes</span>
                            </div>
                            <div style="display: flex; align-items: center; gap: 10px; padding-left: 6%;">
                                <span style="font-size: 1rem; color: #444;">and more ...</span>
                            </div>
                        </div>
                    </div>

                    <div style="padding: 0 2rem 1.5rem; text-align: center;">
                        <a id="cta-btn" href="https://wpghost.com/pricing/?coupon=HIDEMYWP70&utm_source=social&utm_medium=banner&utm_campaign=free&utm_id=offer#price" target="_blank" style="display: inline-block; background: #f97316; color: #fff; text-decoration: none; border-radius: 50px; padding: 15px 32px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: transform 0.15s, box-shadow 0.2s; box-shadow: 0 4px 18px rgba(239,139,26,0.35); letter-spacing: 0.3px; width: 300px;" onmouseenter="this.style.transform='translateY(-1px)';this.style.boxShadow='0 6px 24px rgba(239,139,26,0.45)'" onmouseleave="this.style.transform='translateY(0)';this.style.boxShadow='0 4px 18px rgba(239,139,26,0.35)'" onmousedown="this.style.transform='scale(0.97)'">
                            Secure My Site Now
                        </a>
                    </div>

                    <div style="text-align: center; padding: 10px 2rem 14px;">
                        <span data-dismiss="modal" style="font-size: 0.8rem; color: #aaa; cursor: pointer;" onmouseenter="this.style.color='#777'" onmouseleave="this.style.color='#aaa'">Continue with free version</span>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>
<script>
    (function ($) {
        $(document).on('click', '.hmwp_pro, .hmwp_pro *', function (e) {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();

            $('#hmwp_ghost_mode_modal').modal('show');

            return false;
        });
    })(jQuery);
</script>