<?php
    require_once('./pin/header.php');
    require_once('./pin/navbar.php');
    require_once('./pin/sidebar.php');
?>
    <style>
        #switch-plan{
            margin-left: 20rem;
            margin-top: 8rem;
            margin-right: 2rem;
        }
        .switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 28px;
        }

        .switch input {
        opacity: 0;
        width: 0;
        height: 0;
        }

        .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: 0.4s;
        border-radius: 34px;
        }

        .slider::before {
        position: absolute;
        content: "";
        height: 22px;
        width: 22px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: 0.4s;
        border-radius: 50%;
        }

        .switch input:checked + .slider {
            background-color: #4caf50;
        }

        .switch input:checked + .slider::before {
            transform: translateX(22px);
        }

        .saving-label{
            width: fit-content;
            border: 2px solid var(--bs-blue);
            padding: 5px 10px;
            border-radius: 5px;
            color: var(--bs-blue);
        }
        .saving-label p{
            margin: 0px;
        }

        #colorLine{
            width: 100%;
            height: 10px;
            position: absolute;
            top: 0px;
            left: 0px;
            border-radius: 5px 5px 0px 0px;
        }

        .main-plan{
            padding: 1.4rem 1rem;
            border-radius: 8px;
            position: relative;
            flex: 1;
            background-color: white;
        }

        .plan-overview h3{
            font-weight: bold;
        }
        .plan-overview p{
            margin-bottom: 0px;
            font-weight: 500;
        }
        
        #free-dedicated-div{
            border: 1.5px solid;
            border-radius: 4px;
            padding: 5px 10px;
            width: max-content;
            margin-top: 15px;
            margin-bottom: 10px;
        }

        #select-plan-btn{
            text-align: center;
            width: 82%;
            margin: auto;
            position: relative;
            cursor: pointer;
        }
        #select-plan-btn div:nth-child(1){
            border: 2px solid;
            border-radius: 5px;
            padding: 5px 10px;
            position: absolute;
            height: 2rem;
            top: 0px;
            left: 0px;
            right: 0px;
            z-index: 1;
        }
        #color-div {
            position: absolute;
            height: 2rem;
            top: 5px;
            left: 5px;
            right: -6px;
            border: 0px;
            border-radius: 5px;
            /* z-index: 0; */
        }

        #plan-details-div p span{
            margin-right: 5px;
        }

        #new-tag-span{
            background-color: #0080402e;
            color: #008040;
            padding: 3px 10px;
            border-radius: 7px;
            border: 1px solid #008040;
            margin-left: 1rem;
        }

        #pay-as-you-go-main{
            margin: 0rem 3rem;
            margin-bottom: 6rem;
        }

        #color-line-pasAsYouGoComp{
            height: 1.5px;
            background-color: black;
            width: 3.5rem;
            margin-bottom: 1rem;
        }

        #chatbot-div{
            background-color: #66e783;
            width: fit-content;
            border-radius: 50%;
            display: flex;
            padding: 6px 12px;
            /* align-items: center; */
            border: 1px solid black;
            box-shadow: 2px 2px 10px -3px;
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 99;
        }

        @media (max-width:575px){
            #switch-plan{
                margin: 6rem 1rem;
            }
            .page-head{
                flex-direction: column !important;
                align-items: center !important;
            }

            #pay-as-you-go-main{
                margin: 0rem;
            }
        }
        @media (min-width:576px) and (max-width:800px){
            #switch-plan {  
                margin: 6rem 2rem;
            }
            .page-head{
                flex-direction: column !important;
                align-items: center !important;
            }
        }
        @media (min-width: 801px) and (max-width:1039px) {
            #switch-plan {  
                margin: 6rem 2rem;
            }
        }
    </style>

    <div id="switch-plan">
        <div class="d-flex gap-3 justify-content-center page-head">
            <div class="d-flex gap-2 align-items-center">
                <span>Monthly</span>
                <label class="switch">
                    <input type="checkbox">
                    <span class="slider"></span>
                </label>
                <span class="fw-700">Annually</span>
            </div>
            <div class="saving-label">
                <p>You're saving up to 25% Annually!</p>
            </div>
        </div>
        <!-- Plans Container -->
        <div class="mt-4 d-flex flex-wrap gap-3">
            <!-- Growth Plan -->
            <div class="main-plan" style="border: 2px solid #f8b4fd;">
                <div id="colorLine" style="background-color: #f8b4fd;"></div>
                <div class="plan-overview">
                    <h3>Growth</h3>
                    <p>Send WhatsApp message to thousands of users in one click to improve reach</p>
                    <div id="free-dedicated-div">
                        <Span style="font-weight: bold; font-size: smaller;">Free dedicated onboarding</Span>
                    </div>
                    <div style="background-color: #f8b4fd; width: 2.2rem; height: 1px; margin: auto; margin-bottom: 1rem;"></div>
                    <p><span class="fw-bold" style="font-size: large;">₹1,999</span><span>/month</span></p>
                    <div class="mt-3" id="select-plan-btn">
                        <div >
                            <span class="fw-bold">Select Plan</span>
                        </div>
                        <div id="color-div" style="background-color: #f8b4fd;"></div>
                    </div>
                    <div style="text-align: center; margin-top: 4.3rem;">
                        <span class="fw-bold">3 Users Included</span>
                    </div>
                </div>

                <div style="margin-top:2.3rem;">
                    <div style="background-color: #f8b4fd; width: 2.2rem; height: 1px; margin: auto; margin-bottom: 1rem;"></div>
                    <div class="mb-3">
                        <h5>Official Whatsapp API</h5>
                    </div>
                    <div id="plan-details-div">
                        <p><span class="mdi mdi-check-bold"></span>  Blue Tick Verification Assistance</p>
                        <p><span class="mdi mdi-check-bold"></span>  Broadcast multi-media message</p>
                        <p><span class="mdi mdi-check-bold"></span>  15k  Marketing Broadcasts/month (as per WATIFY rate card)</p>
                        <p><span class="mdi mdi-check-bold"></span>  Manual message routing</p>
                        <p><span class="mdi mdi-check-bold"></span>  Shared Team Inbox for collaboration</p>
                        <p><span class="mdi mdi-check-bold"></span>  Basic choice-based Chatbots</p>
                        <p><span class="mdi mdi-check-bold"></span>  1,000 Free Chatbot Sessions/month</p>
                        <p><span class="mdi mdi-check-bold"></span>  Basic campaign & inbox analytics</p>
                        <p><span class="mdi mdi-check-bold"></span>  2 select Commerce/CRM integrations</p>
                        <p><span class="mdi mdi-check-bold"></span>  WhatsApp Catalog</p>
                        <p><span class="mdi mdi-check-bold"></span>  Shopify automated messages</p>
                        <p><span class="mdi mdi-check-bold"></span>  No Webhooks</p>
                        <p><span class="mdi mdi-check-bold"></span>  Email Support in English & Portuguese</p>
                        <p><span class="mdi mdi-check-bold"></span>  Instagram DM integration <span id="new-tag-span">New</span></p>

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

            <!-- Pro Plan -->
            <div class="main-plan" style="border: 2px solid #66e783;">
                <div id="colorLine" style="background-color: #66e783;"></div>
                <div class="plan-overview">
                    <div class="d-flex justify-content-between align-items-start">
                        <h3>Pro</h3>
                        <span style="background-color: #66e783; padding: 5px 10px; border-radius: 30px; font-weight: bold; font-size: 0.75rem"><span class="mdi mdi-diamond-stone"></span> BEST VALUE</span>
                    </div>
                    <p>Set up automations, integrations and get powerful analytics to boost conversion</p>
                    <div id="free-dedicated-div">
                        <Span style="font-weight: bold; font-size: smaller;">Free dedicated onboarding</Span>
                    </div>
                    <div style="background-color: #66e783; width: 2.2rem; height: 1px; margin: auto; margin-bottom: 1rem;"></div>
                    <p><span class="fw-bold" style="font-size: large;">₹4,499</span><span>/month</span></p>
                    <div class="mt-3" id="select-plan-btn">
                        <div>
                            <span class="fw-bold">Select Plan</span>
                        </div>
                        <div id="color-div" style="background-color: #66e783;"></div>
                    </div>
                    <div style="text-align: center; margin-top: 4.3rem;">
                        <p class="fw-bold">5 Users Included</p>
                        <p class="fw-bold">Additional Users @ ₹1299/Month/User</p>
                    </div>
                </div>

                <div style="margin-top:2.3rem;">
                    <div style="background-color: #66e783; width: 2.2rem; height: 1px; margin: auto; margin-bottom: 1rem;"></div>
                    <div class="mb-3">
                        <h5>Everything in Growth +</h5>
                    </div>
                    <div id="plan-details-div">
                        <p><span class="mdi mdi-check-bold" style="color:#66e783;"></span>  Smart Broadcast Retarget for all events</p>
                        <p><span class="mdi mdi-check-bold" style="color:#66e783;"></span>  Carousel templates to boost conversions</p>
                        <p><span class="mdi mdi-check-bold" style="color:#66e783;"></span>  Team/Operator based message routing</p>
                        <p><span class="mdi mdi-check-bold" style="color:#66e783;"></span>  WhatsApp Drip Campaigns</p>
                        <p><span class="mdi mdi-check-bold" style="color:#66e783;"></span>  Click tracking for URLs and analytics</p>
                        <p><span class="mdi mdi-check-bold" style="color:#66e783;"></span>  WhatsApp Lead Generation Forms</p>
                        <p><span class="mdi mdi-check-bold" style="color:#66e783;"></span>  CTWA automations and priority team inbox</p>
                        <p><span class="mdi mdi-check-bold" style="color:#66e783;"></span>  2,000 Free Chatbot Sessions/month </p>
                        <p><span class="mdi mdi-check-bold" style="color:#66e783;"></span>  Advaned campaign & inbox analystics </p>
                        <p><span class="mdi mdi-check-bold" style="color:#66e783;"></span>  5 select integrations including Hubspot and Yotpo </p>
                        <p><span class="mdi mdi-check-bold" style="color:#66e783;"></span>  250 Free AI KnowBot Responses/month </p>
                        <p><span class="mdi mdi-check-bold" style="color:#66e783;"></span>  Limited Webhook & API access </p>
                        <p><span class="mdi mdi-check-bold" style="color:#66e783;"></span>  Shopify: Sync key customer & order info </p>
                        <p><span class="mdi mdi-check-bold" style="color:#66e783;"></span>  Shopify: Support for 3rd party checkout pages like Shopflo, Gokwik</p>
                        <p><span class="mdi mdi-check-bold" style="color:#66e783;"></span>  WhatsApp Pay checkout in Catalog with Razorpay and PayU</p>
                        <p><span class="mdi mdi-check-bold" style="color:#66e783;"></span>  Detialed team performance report</p>
                        <p><span class="mdi mdi-check-bold" style="color:#66e783;"></span>  Instagram DM automations <span id="new-tag-span">New</span></p>

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

            <!-- Business Plan -->
            <div class="main-plan" style="border: 2px solid #65c3ff;">
                <div id="colorLine" style="background-color: #65c3ff;"></div>
                <div class="plan-overview">
                    <h3>Business</h3>
                    <p>Unlock the full potential of WhatsApp with advanced workflows and expert support</p>
                    <div id="free-dedicated-div">
                        <Span style="font-weight: bold; font-size: smaller;">Free dedicated onboarding</Span>
                    </div>
                    <div style="background-color: #65c3ff; width: 2.2rem; height: 1px; margin: auto; margin-bottom: 1rem;"></div>
                    <p><span class="fw-bold" style="font-size: large;">₹13,499</span><span>/month</span></p>
                    <div class="mt-3" id="select-plan-btn">
                        <div>
                            <span class="fw-bold">Select Plan</span>
                        </div>
                        <div id="color-div" style="background-color: #65c3ff;"></div>
                    </div>
                    <div style="text-align: center; margin-top: 4.3rem;">
                        <p class="fw-bold">5 Users Included</p>
                        <p class="fw-bold">Additional Users @ ₹3999/Month/User</p>
                    </div>
                </div>

                <div style="margin-top:2.3rem;">
                    <div style="background-color: #65c3ff; width: 2.2rem; height: 1px; margin: auto; margin-bottom: 1rem;"></div>
                    <div class="mb-3">
                        <h5>Everything in Pro +</h5>
                    </div>
                    <div id="plan-details-div">
                        <p><span class="mdi mdi-check-bold"></span>  Dedicated Customer Success Manager</p>
                        <p><span class="mdi mdi-check-bold"></span>  Round-Robin chat assignment</p>
                        <p><span class="mdi mdi-check-bold"></span>  Attractive discounts on marketing conversations</p>
                        <p><span class="mdi mdi-check-bold"></span>  Up to 5% discount on conversation pricing</p>
                        <p><span class="mdi mdi-check-bold"></span>  Measure Broadcast ROI</p>
                        <p><span class="mdi mdi-check-bold"></span>  Phone number Masking for high privacy</p>
                        <p><span class="mdi mdi-check-bold"></span>  CTWA retargeting and conversion funnel for better conversion</p>
                        <p><span class="mdi mdi-check-bold"></span>  5,000 Free Chatbot Sessions/month</p>
                        <p><span class="mdi mdi-check-bold"></span>  IP Whitelisting</p>
                        <p><span class="mdi mdi-check-bold"></span>  Unlimited integrations including Salesforce, Twilio</p>
                        <p><span class="mdi mdi-check-bold"></span>  Advanced granual level roles </p>
                        <p><span class="mdi mdi-check-bold"></span>  1000 Free AI KnowBot Responses/month</p>
                        <p><span class="mdi mdi-check-bold"></span>  Extensive Webhook & API access</p>
                        <p><span class="mdi mdi-check-bold"></span>  Free Custom Domain</p>
                        <p><span class="mdi mdi-check-bold"></span>  WhatsApp Pay APIs</p>
                        <p><span class="mdi mdi-check-bold"></span>  Auto-delete chat for org compliance</p>
                        <p><span class="mdi mdi-check-bold"></span>  24x7 Priority support</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- pay-as-you-go plan -->
        <div id="pay-as-you-go-main">
            <div style="text-align: center; margin: 1rem 0rem; margin-top: 1.5rem;">
                <a href="#" style="text-decoration: underline;">Compare plans in detail</a>
            </div>

            <div class="p-3" style="border-radius: 8px; background-color:#e2ebf9;">
                <h3>Zero subscription fee, pay-as-you-go plan</h3>
                <p>Recommended for businesses who ONLY want to send bulk campaigns at scale</p>
                <div id="color-line-pasAsYouGoComp"></div>
                <div>
                    <p style="font-weight: bold;"><span class="mdi mdi-check-bold" style="color: #66e783; margin-right:5px;"></span> Pay INR 999 to get started & get INR 999 back as message credits</p>
                    <p style="font-weight: bold;"><span class="mdi mdi-check-bold" style="color: #66e783; margin-right:5px;"></span> Use it for sending out up to 500 messages within 3 months</p>
                    <p style="font-weight: bold;"><span class="mdi mdi-check-bold" style="color: #66e783; margin-right:5px;"></span> Top up credits as you need</p>
                    <p style="font-weight: bold;"><span class="mdi mdi-check-bold" style="color: #66e783; margin-right:5px;"></span> Complete analytics for your bulk campaigns</p>
                    <p style="font-weight: bold;"><span class="mdi mdi-check-bold" style="color: #66e783; margin-right:5px;"></span> Self-serve onboarding & support</p>
                </div>
                <div>
                    <button type="button" class="btn btn-primary">Select Plan</button>
                </div>
            </div>
        </div>

        <!-- chatbot -->
        <div id="chatbot-div">
            <span class="mdi mdi-message-reply-outline" style="font-size:20px;"></span>
        </div> 

        <!-- Footer -->
        <footer class="footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col fs-13 text-muted text-center">
                        © <script>
                            document.write(new Date().getFullYear())
                        </script>2025 - Made with <span class="mdi mdi-heart text-danger"></span> by <a href="#!" class="text-reset fw-semibold">Watify.io</a>
                    </div>
                </div>
            </div>
        </footer>
    </div>

<?php
    require_once('./pin/footer.php');
?>