@include('layouts.help.header')
<div class="help-support-container">
    <!-- Header Section Start Here -->
    @include('layouts.help.back_button')

    <div class="help-support-container">
        <div class="how-to-scan-qr-content-wrapper">
            <div class="container-fluid">
                <div class="how-to-scan-title-wrapper">
                    <h2>How to Share using NFC</h2>
                    <p>Choose the device you wish sharing to</p>
                </div>

                <div class="how-to-scan-info-wrapper">
                    <h3>Newer iPhones</h3>
                    <p>iPhone XR, XS, 11, 12, 13, 14, 15</p>

                    <div class="nfc-step-title">
                        <h4>Step 1:</h4>
                        <p>Slide and hold the vCarrd on the very top of the iPhone.</p>
                    </div>

                    <div class="how-to-scan-info-images">
                        <img src="{{url('/')}}/assets/help/images/nfc-step-01.png" alt="Newer iPhones Step1" title="Newer iPhones Step1">
                    </div>

                    <div class="nfc-step-title">
                        <h4>Step 2:</h4>
                        <p>Tap on the pop-up notification that appears.</p>
                    </div>

                    <div class="how-to-scan-info-images text-center">
                        <img src="{{url('/')}}/assets/help/images/nfc-step-02.png" alt="Newer iPhones Step2" title="Newer iPhones Step2">
                    </div>

                    <div class="pro-tip-wrapper">
                        <div class="pro-tip-box">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M2.5 10H3.33333M10 2.5V3.33333M16.6667 10H17.5M4.66667 4.66667L5.25 5.25M15.3333 4.66667L14.75 5.25M8.08333 14.1667H11.9167M7.5 13.3333C6.80039 12.8086 6.28361 12.0771 6.02286 11.2424C5.76211 10.4076 5.77061 9.51202 6.04715 8.68238C6.3237 7.85275 6.85427 7.13116 7.56371 6.61982C8.27315 6.10849 9.12549 5.83333 10 5.83333C10.8745 5.83333 11.7269 6.10849 12.4363 6.61982C13.1457 7.13116 13.6763 7.85275 13.9528 8.68238C14.2294 9.51202 14.2379 10.4076 13.9771 11.2424C13.7164 12.0771 13.1996 12.8086 12.5 13.3333C12.1746 13.6554 11.9297 14.0495 11.7849 14.4839C11.6401 14.9182 11.5996 15.3805 11.6667 15.8333C11.6667 16.2754 11.4911 16.6993 11.1785 17.0118C10.866 17.3244 10.442 17.5 10 17.5C9.55797 17.5 9.13405 17.3244 8.82149 17.0118C8.50893 16.6993 8.33333 16.2754 8.33333 15.8333C8.40038 15.3805 8.35988 14.9182 8.21511 14.4839C8.07034 14.0495 7.82536 13.6554 7.5 13.3333Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            <h4>Pro Tip!</h4>
                        </div>
                        <p>If it is not working, give your phone a little time-out. Lock it, unlock it, and give it another go. Always helps!</p>
                    </div>

                    <div class="how-to-scan-info-images">
                        <img src="{{url('/')}}/assets/help/images/nfc-pro-tip.png" alt="How to Share using NFC Pro Tip" title="How to Share using NFC Pro Tip">
                    </div>

                    <div class="back-it-up-wrapper">
                        <div class="back-it-up-title">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M3.125 4.0625C3.125 3.545 3.545 3.125 4.0625 3.125H7.8125C8.33 3.125 8.75 3.545 8.75 4.0625V7.8125C8.75 8.33 8.33 8.75 7.8125 8.75H4.0625C3.81386 8.75 3.5754 8.65123 3.39959 8.47541C3.22377 8.2996 3.125 8.06114 3.125 7.8125V4.0625ZM3.125 12.1875C3.125 11.67 3.545 11.25 4.0625 11.25H7.8125C8.33 11.25 8.75 11.67 8.75 12.1875V15.9375C8.75 16.455 8.33 16.875 7.8125 16.875H4.0625C3.81386 16.875 3.5754 16.7762 3.39959 16.6004C3.22377 16.4246 3.125 16.1861 3.125 15.9375V12.1875ZM11.25 4.0625C11.25 3.545 11.67 3.125 12.1875 3.125H15.9375C16.455 3.125 16.875 3.545 16.875 4.0625V7.8125C16.875 8.33 16.455 8.75 15.9375 8.75H12.1875C11.9389 8.75 11.7004 8.65123 11.5246 8.47541C11.3488 8.2996 11.25 8.06114 11.25 7.8125V4.0625Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M5.625 5.625H6.25V6.25H5.625V5.625ZM5.625 13.75H6.25V14.375H5.625V13.75ZM13.75 5.625H14.375V6.25H13.75V5.625ZM11.25 11.25H11.875V11.875H11.25V11.25ZM11.25 16.25H11.875V16.875H11.25V16.25ZM16.25 11.25H16.875V11.875H16.25V11.25ZM16.25 16.25H16.875V16.875H16.25V16.25ZM13.75 13.75H14.375V14.375H13.75V13.75Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            <h4>Back It Up!</h4>
                        </div>
                        <p>If you have tried everything and your NFC is still not working, No worries! Scan your vCarrd QR code (at the bottom center of the preview tab) to share your profile instantly.</p>
                    </div>

                    <div class="nfc-step-title mb-10">
                        <h4>Older iPhones</h4>
                        <p>iPhone 6, 7, 8, Χ</p>
                    </div>

                    <div class="back-it-up-wrapper">
                        <p>Sharing on older iPhones? Tap the NFC icon (looks like a radio wave) in the Control Center.</p>
                    </div>

                    <div class="how-to-scan-info-images">
                        <img src="{{url('/')}}/assets/help/images/older-iphones.png" class="img-fluid" alt="older Iphones" title="older Iphones">
                    </div>

                    <div class="pro-tip-wrapper">
                        <div class="pro-tip-box">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M2.5 10H3.33333M10 2.5V3.33333M16.6667 10H17.5M4.66667 4.66667L5.25 5.25M15.3333 4.66667L14.75 5.25M8.08333 14.1667H11.9167M7.5 13.3333C6.80039 12.8086 6.28361 12.0771 6.02286 11.2424C5.76211 10.4076 5.77061 9.51202 6.04715 8.68238C6.3237 7.85275 6.85427 7.13116 7.56371 6.61982C8.27315 6.10849 9.12549 5.83333 10 5.83333C10.8745 5.83333 11.7269 6.10849 12.4363 6.61982C13.1457 7.13116 13.6763 7.85275 13.9528 8.68238C14.2294 9.51202 14.2379 10.4076 13.9771 11.2424C13.7164 12.0771 13.1996 12.8086 12.5 13.3333C12.1746 13.6554 11.9297 14.0495 11.7849 14.4839C11.6401 14.9182 11.5996 15.3805 11.6667 15.8333C11.6667 16.2754 11.4911 16.6993 11.1785 17.0118C10.866 17.3244 10.442 17.5 10 17.5C9.55797 17.5 9.13405 17.3244 8.82149 17.0118C8.50893 16.6993 8.33333 16.2754 8.33333 15.8333C8.40038 15.3805 8.35988 14.9182 8.21511 14.4839C8.07034 14.0495 7.82536 13.6554 7.5 13.3333Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            <h4>Pro Tip!</h4>
                        </div>
                        <p>Make sure the device screen is on, airplane mode is off. Close any open camera apps before tapping.</p>
                    </div>

                    <div class="nfc-step-title pb-15">
                        <h4>Share to Androids</h4>
                        <p>Every Android with NFC (almost all)</p>
                    </div>

                    <div class="pro-tip-wrapper">
                        <p>Gently tap the back of your vCarrd against the center back of the receiver’s phone. NFC readers can vary in location for different Android phones. If it doesn't work at first, try moving the vCarrd around a bit near the center.</p>
                    </div>

                    <div class="how-to-scan-info-images text-center pb-15">
                        <img src="{{url('/')}}/assets/help/images/share-to-androids.png" alt="Share to Androids" title="Share to Androids">
                    </div>

                    <div class="pro-tip-wrapper">
                        <div class="pro-tip-box">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M2.5 10H3.33333M10 2.5V3.33333M16.6667 10H17.5M4.66667 4.66667L5.25 5.25M15.3333 4.66667L14.75 5.25M8.08333 14.1667H11.9167M7.5 13.3333C6.80039 12.8086 6.28361 12.0771 6.02286 11.2424C5.76211 10.4076 5.77061 9.51202 6.04715 8.68238C6.3237 7.85275 6.85427 7.13116 7.56371 6.61982C8.27315 6.10849 9.12549 5.83333 10 5.83333C10.8745 5.83333 11.7269 6.10849 12.4363 6.61982C13.1457 7.13116 13.6763 7.85275 13.9528 8.68238C14.2294 9.51202 14.2379 10.4076 13.9771 11.2424C13.7164 12.0771 13.1996 12.8086 12.5 13.3333C12.1746 13.6554 11.9297 14.0495 11.7849 14.4839C11.6401 14.9182 11.5996 15.3805 11.6667 15.8333C11.6667 16.2754 11.4911 16.6993 11.1785 17.0118C10.866 17.3244 10.442 17.5 10 17.5C9.55797 17.5 9.13405 17.3244 8.82149 17.0118C8.50893 16.6993 8.33333 16.2754 8.33333 15.8333C8.40038 15.3805 8.35988 14.9182 8.21511 14.4839C8.07034 14.0495 7.82536 13.6554 7.5 13.3333Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            <h4>Pro Tip!</h4>
                        </div>
                        <p>Double-check the NFC is on! Search "NFC" in Settings to activate it before tapping your vCarrd.</p>
                    </div>

                    <div class="back-it-up-wrapper">
                        <div class="back-it-up-title">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M3.125 4.0625C3.125 3.545 3.545 3.125 4.0625 3.125H7.8125C8.33 3.125 8.75 3.545 8.75 4.0625V7.8125C8.75 8.33 8.33 8.75 7.8125 8.75H4.0625C3.81386 8.75 3.5754 8.65123 3.39959 8.47541C3.22377 8.2996 3.125 8.06114 3.125 7.8125V4.0625ZM3.125 12.1875C3.125 11.67 3.545 11.25 4.0625 11.25H7.8125C8.33 11.25 8.75 11.67 8.75 12.1875V15.9375C8.75 16.455 8.33 16.875 7.8125 16.875H4.0625C3.81386 16.875 3.5754 16.7762 3.39959 16.6004C3.22377 16.4246 3.125 16.1861 3.125 15.9375V12.1875ZM11.25 4.0625C11.25 3.545 11.67 3.125 12.1875 3.125H15.9375C16.455 3.125 16.875 3.545 16.875 4.0625V7.8125C16.875 8.33 16.455 8.75 15.9375 8.75H12.1875C11.9389 8.75 11.7004 8.65123 11.5246 8.47541C11.3488 8.2996 11.25 8.06114 11.25 7.8125V4.0625Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M5.625 5.625H6.25V6.25H5.625V5.625ZM5.625 13.75H6.25V14.375H5.625V13.75ZM13.75 5.625H14.375V6.25H13.75V5.625ZM11.25 11.25H11.875V11.875H11.25V11.25ZM11.25 16.25H11.875V16.875H11.25V16.25ZM16.25 11.25H16.875V11.875H16.25V11.25ZM16.25 16.25H16.875V16.875H16.25V16.25ZM13.75 13.75H14.375V14.375H13.75V13.75Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            <h4>Back It Up!</h4>
                        </div>
                        <p>Your vCarrd device is not working? No worries! Scan your vCarrd QR code (at the bottom center of the preview tab) to share your profile instantly.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@include('layouts.help.footer')