@extends('layouts.base')
@section('content')
    <style>
        .nadpisek {
            font-size: 40px !important;
        }

        @media only screen and (max-width: 998px) {

            .mobot-margin {
                margin-top: 10px !important;
                margin-bottom: 40px !important;
            }

            .nadpisek {
                font-size: 32px !important;
            }

            .shapes-container {
                display: none;
            }

            .non-mob {
                display: none;
            }

            .mob-marg {
                margin-top: 30px !important;
            }

            .choose-block {
                padding: 30px 20px !important;
            }

            .chosed {
                font-size: 16px !important;
            }

            .non-chosed {
                font-size: 16px !important;
            }
        }

        .round {
            border-radius: 50%;
            background-color: white;
            box-shadow: 0px 10px 30px 0px rgb(1 1 64 / 8%);
            width: 80px;
            height: 80px;
            text-align: center;
            margin: 0 auto;
            font-size: 40px;
            color: #ff603c;
            font-weight: 600;
            line-height: 80px;
            margin-bottom: 25px;
        }

        .app-landing-2-header .animation-shape.shape-triangle div {
            background-color: #ff603c;
        }

        .product-heading {
            line-height: 22px;
            color: #7b7d86;
            display: inline-block;
            font-size: 14px;
            letter-spacing: 1px;
            margin-bottom: 10px;
            background: #edeef3;
            padding: 5px 13px;
            font-weight: 600;
            border-radius: 16px;
            text-transform: uppercase;
        }

        .product-h2 {
            font-weight: 600;
            line-height: 1.13;
            font-size: 32px;
            color: #313336;
        }

        .product-h2 strong {
            color: #ff603c;
            font-weight: 600;
        }

        .circle-num {
            display: inline-block;
            width: 68px;
            height: 68px;
            color: #fff;
            background: #FF5D00;
            font-size: 30px;
            font-weight: 600;
            line-height: 68px;
            border-radius: 34px;
            text-align: center;
        }

        @media (min-width: 768px) {

            section [class^="container"],
            .section [class^="container"] {
                padding-top: 50px;
                padding-bottom: 90px;
            }

            .mobile-only {
                display: none !important;
            }

            .pc-only {
                display: flex !important;
            }


        }

        .pricing-block {
            width: 300px;
            cursor: grab;
            background-color: white;
            padding: 25px 12px;
        }

        .pricing-block .pricing-cover {
            max-width: 100%;
            border-radius: 8px;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
            transition: 0.2s;
        }

        .pricing-block:hover .pricing-cover {
            box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
        }

        .pricing-header {
            padding: 20px 10px;
            color: #3a4250;
        }

        .pricing-block .number {
            font-size: 35px;
            font-weight: 700;
        }

        .pricing-block .type {
            margin-top: -10px !important;
            font-weight: 600;
            font-size: 15px;
            text-transform: uppercase;
        }

        .pricing-price {
            background-color: #FFE5E0;
            width: 100%;
            padding: 15px 15px;
            color: #3a4250;
            font-weight: 700;
            font-size: 42px;
        }

        .pricing-points {
            padding: 25px;
            padding-top: 17px;
            padding-bottom: 5px;
            font-weight: 500;
            color: #3a4250;
            font-size: 17px;
            text-align: left;
        }

        ul {
            list-style-type: none;
            padding-left: 15px;
        }

        .pricing-points li {
            margin-top: 8px;
        }



        .cart-obal {
            max-width: 640px;
            border-radius: 10px;
            background-color: white;
            box-shadow: 0 6px 6px rgb(0 0 0 / 4%), 0 0 42px rgb(0 0 0 / 4%);
            padding: 40px;
            margin: 0 auto;
        }

        .cart-obal h2 {
            text-align: center;
            font-weight: 700;
            font-size: 38px;
            color: #322f3b;
            margin-bottom: 0;
        }

        hr {
            outline: 0;
            height: 1px;
            background: #eaeaea;
            border-top: 0px solid #eaeaea;
            opacity: 1 !important;
            margin: 40px 0;
        }

        .progress {
            background-color: #efefef;
            height: 6px;
        }

        .bar {
            background: #efefef;
        }

        .value {
            height: 6px;
            background: #fc591e;
        }

        .form-control {
            font-family: 'Source Sans Pro', sans-serif;
            display: block;
            height: 56px;
            width: 100%;
            padding: 15px 16px 16px 53px;
            line-height: 24px;
            outline: 0;
            background: #fff;
            border: 1px solid #e5e5e5;
            font-size: 18px !important;
            text-align: left;
            font-weight: 400;
            color: #000 !important;
            box-sizing: border-box;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
            border-color: #fc654b;
            box-shadow: 0 0 10px 0 rgb(252 101 75 / 20%);
        }

        .form-control.active,
        .form-control:focus {
            border-color: #fc654b;
            box-shadow: 0 0 10px 0 rgb(252 101 75 / 20%);
        }

        .input-icon {
            z-index: 100;
            pointer-events: none;
            margin: 0;
            position: absolute;
            top: 18px;
            left: 17px;
            width: 20px;
        }

        .form-group {
            position: relative;
            margin-bottom: 16px;
            box-sizing: border-box;
        }

        .selector {
            position: relative;
            font-size: 18px;
            color: #000;
            font-weight: 400;
        }

        .selector strong {
            font-weight: 600;
        }

        .selector>button.form-control {
            position: relative;
            margin-bottom: 6px;
            padding-right: 56px;
            background-color: white;
        }


        .selector .alt:last-child {
            margin-left: 0;
        }

        .selector .alt {
            margin-left: 10px;
            float: right;
            font-size: 17px;
            font-weight: 600;
            color: #000;
            text-align: right;
        }

        .selector>button.form-control:after {
            content: "";
            position: absolute;
            top: 25px;
            right: 18px;
            width: 0;
            height: 0;
            border-color: #464b4d transparent transparent;
            border-style: solid;
            border-width: 6px 5px 0;
        }

        .selector .dropdown-stylized {
            position: absolute;
            margin: 0;
            padding-top: 0px;
            padding-bottom: 0px;
            width: 100%;
            left: 0;
            right: 0;
        }

        .dropdown-stylized a:first-child {
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }

        .dropdown-stylized a {
            position: relative;
            padding: 12px 22px;
            box-sizing: border-box;
            display: block;
            color: #000;
            text-decoration: none;
            white-space: nowrap;
            width: 100%;
            font-size: 16px;
            line-height: 22px;
            background-color: #fff;
            transition: background-color .15s ease-in-out;
        }

        .dropdown-stylized a:hover {
            background-color: #e9e9e9;
        }

        .dropdown-stylized a:after {
            content: "";
            display: block;
            position: absolute;
            height: 1px;
            background: #dfdfdf;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .choose-block {
            margin: 20px auto;
            max-width: 550px;
            padding: 30px 40px;
            border-radius: 10px;
            border: 1px solid #EDEDED;
        }

        .trigger {
            box-shadow: 0px 10px 30px 0px rgb(1 1 64 / 8%);
            border-radius: 8px;
            text-align: left;
            max-width: 350px;
            padding: 8px;
            position: relative;
            font-weight: 400;
            color: #000;
            margin: 25px auto;
            vertical-align: middle;
        }

        .trigger span#fire {
            background: blanchedalmond;
        }

        .trigger span {
            padding: 5px 7px;
            border-radius: 5px;
            position: relative;
            font-size: 23px;
            margin-right: 5px;
        }

        .trigger>span>img {
            width: 25px;
            margin-bottom: 4px;
        }

        .price-text {
            color: #323436;
            font-weight: 500;
            padding: 15px;
            border-radius: 10px;
            text-align: center;
            border: 1px solid #e5e5e5;
        }

        .price-text img {
            width: 25px;
            height: 25px;
        }


        .non-chosed {
            border: 3px solid #f6f6f8;
            border-radius: 5px;
            background: #fff;
            padding: 15px;
            font-size: 18px;
            cursor: pointer;
        }

        .price-text p {
            margin-top: 4px;
            margin-bottom: 0px;
        }

        .chosed {
            border: 3px solid #ff603c;
            border-radius: 5px;
            background: #ff603c;
            padding: 15px;
            font-size: 18px;
            cursor: pointer;
            color: white;
        }

        .features-list {
            margin-top: 30px !important;
            font-size: 16px;
            line-height: 25px;
            font-weight: 400;
            color: black;
        }

        .features-list li {
            margin-bottom: 14px;
        }
    </style>
    <section style="">
        <div class="container" style="text-align:center;">
            <h1 class="product-heading">{{__('BUY INSTAGRAM AUTOMATIC LIKES')}}</h1>
            <h2 class="product-h2">{{__('Buy Instagram Auto Likes in few clicks')}}</h2>
            <p style="font-weight:400; max-width:600px; color: #62676c; font-size:16px; margin:0 auto;">{{__('Why go out of your way to buy Instagram likes manually with every new upload? Our system detects new uploads and sends you likes automatically.')}}</p>
            <div>
                <div class="trigger" style="width:fit-content; margin:auto; margin-top:15px;">
                    <span id="fire"><img title="objednávky" src="{{ url('/img/fire-icon.png') }}"
                            alt="objednávky"></span>
                    <span style="font-size:16px; font-weight:500; top:-2px;">{{__('ONLY TODAY 40% OFF')}}</span>
                </div>
                <div class="choose-block" style="box-shadow: 0px 0px 10px 0px #f1f1f1;">
                    <div
                        style="font-size:19px; font-family:'Source Sans Pro'; text-align:center; margin-bottom:8px; margin-left:2px; font-weight:700; color:#303435;">
                        {{__('Pick your number of autolikes')}}:</div>
                    <div class="form-group mb-3">
                        <img class="input-icon" src="{{ url('/img/heart.svg') }}">
                        <div class="selector dropdown">
                            <input type="hidden" name="plan" value="112">
                            <button type="button" class="form-control dropdown-toggle" data-bs-display="static"
                                data-bs-toggle="dropdown"><strong class="amount">{{ $packs->first()->amount }}</strong>
                                Autolikes<span class="alt price-flw"
                                    style="font-size:19px; font-weight:700;">{{ $packs->first()->price }}zł</span></button>
                            <div class="dropdown-menu dropdown-stylized animate slideIn">
                                @foreach ($packs as $p)
                                    <a href="#" data-id="{{ $p->id }}" data-price="{{ $p->price }}"
                                        data-amount="{{ $p->amount }}" class="package-selector"><span
                                            class="desc"><strong>{{ $p->amount }}</strong>
                                            Autolikes</span><span class="alt">{{ $p->price }}zł</span></a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div
                        style="font-size:18px; margin-top:25px; margin-bottom:8px; margin-left:2px; margin-right:2px; font-weight:400; color:#303435; display:flex; justify-content:space-between;">
                        <div>{{__('Your Package')}}</div>
                        <input type="hidden" name="pack_id" id="pack_id" value="{{ $packs->first()->id }}">
                    </div>
                    <div class="price-text">
                        <div style="text-decoration: line-through; font-size:14px;" id="old-price">
                            {{ number_format($packs->first()->price + ($packs->first()->price / 100) * 25, 2) }}zł</div>
                        <div style="margin-top:-5px; font-size:31px; font-weight:600;"><span
                                id="price-shower">{{ $packs->first()->price }}</span>zł</div>
                        <div class="d-flex" style="justify-content: center; margin-top:-7px;">
                            <div style="margin-right:5px;"><svg width="21" height="20" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect opacity="0.1" x="0.633" y="0.115" width="19.48" height="19.48"
                                        rx="9.74" fill="#23CF87"></rect>
                                    <path
                                        d="M9.524 15.168 4.176 11.04 5.7 9.246l3.22 2.486 4.713-7.19 2.054 1.221-6.163 9.404Z"
                                        fill="#23CF87"></path>
                                </svg></div>
                            <div class="flex-col" style="font-size:15px; margin-top:3px;"><span
                                    class="buy-form-alt__saved">{{__('Today You Save')}}
                                    <strong class="price-saved"
                                        style="color:#1fb174;">{{ number_format(($packs->first()->price / 100) * 25,2) }}zł</strong></span>
                            </div>
                        </div>
                    </div>
                    <ul style="padding-left:20px; margin:0 auto; text-align:left;" class="features-list">
                        <div class="row">
                            <div class="col-md-6">
                                <li style="display:flex; justify-content: left;">
                                    <div><svg style="margin-right:10px;" width="20" height="20" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M16.727 3.073H12.12l-.537-1.808c-.27-.903-1.277-1.45-2.184-1.18L1.764 2.354a1.76 1.76 0 0 0-1.18 2.182L3.779 15.27a1.764 1.764 0 0 0 2.183 1.18l1.117-.332v.11c0 .482.392.874.875.874h8.769a.875.875 0 0 0 .875-.875V3.953a.87.87 0 0 0-.87-.88Zm-8.773 0a.875.875 0 0 0-.875.875v10.338l-1.618.483L2.266 4.035 9.9 1.765l.392 1.308H7.954Z"
                                                fill="#F9D530"></path>
                                        </svg>
                                    </div>
                                    <div style="flex-grow:1; margin-top:2px;">{{__('Likes on every new post')}}</div>
                                </li>
                                <li style="display:flex; justify-content: left;">
                                    <div><svg style="margin-right:10px;" width="20" height="20" viewBox="0 0 18 20"
                                            fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M17.031 5.05v.382a.949.949 0 0 1-.303.694.907.907 0 0 1-.707.234H16a.904.904 0 0 1-.582-.304.943.943 0 0 1-.234-.624V5.05c0-.664-.257-1.3-.716-1.77a2.42 2.42 0 0 0-1.73-.733h-.16a2.42 2.42 0 0 0-1.73.733 2.531 2.531 0 0 0-.717 1.77v1.395a31.469 31.469 0 0 0-1.846-.148V5.046c.001-1.163.453-2.278 1.257-3.1A4.248 4.248 0 0 1 12.576.657h.159c.564 0 1.123.113 1.644.334.521.22.995.544 1.394.952a4.4 4.4 0 0 1 .931 1.425c.216.533.327 1.104.327 1.68Zm-3.728 4.185v6.72c0 .23-.078.452-.221.628a.957.957 0 0 1-.562.34l-.584.112a27.412 27.412 0 0 1-10.413 0l-.584-.113a.957.957 0 0 1-.562-.339.996.996 0 0 1-.22-.628v-6.72c-.001-.229.077-.451.22-.628a.957.957 0 0 1 .562-.339l.086-.016c3.77-.729 7.64-.729 11.41 0l.086.016c.22.043.419.163.562.34.142.176.22.398.22.627Zm-4.164 1.788-.479-.49a.425.425 0 0 0-.59-.007l-1.976 1.787-.918-.735a.423.423 0 0 0-.57.036l-.477.49a.446.446 0 0 0-.02.598l1.677 1.984a.43.43 0 0 0 .322.148.423.423 0 0 0 .322-.148l2.723-3.052a.445.445 0 0 0-.014-.608v-.003Z"
                                                fill="#17CA80"></path>
                                        </svg> </div>
                                    <div style="flex-grow:1; margin-top:2px;">{{__('No password required')}}</div>
                                </li>


                            </div>
                            <div class="col-md-6">
                                <li style="display:flex; justify-content: left;">
                                    <div><svg style="margin-right:10px;" width="20" height="20" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="m10.271 6.581-2.438.136.42-5.195C8.31.656 7.132.25 6.655 1.008l-6.25 9.415c-.393.569.083 1.326.784 1.3l2.439-.136-.42 5.195c-.085.866 1.12 1.272 1.597.514l6.251-9.416c.393-.595-.084-1.353-.785-1.299Z"
                                                fill="#FF603C"></path>
                                        </svg> </div>
                                    <div style="flex-grow:1;">{{__('30 days package')}}</div>
                                </li>
                                <li style="display:flex; justify-content: left;">
                                    <div><svg style="margin-right:10px;" width="20" height="20" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M10.51.557C7.2-.78 3.372.357 1.383 3.245c-1.956 2.856-1.605 6.647.802 9.119-.167.718-.501 1.586-1.17 2.02a.367.367 0 0 0-.15.351.36.36 0 0 0 .284.267c.033 0 .284.034.685.034.753 0 2.007-.134 3.093-.902a7.684 7.684 0 0 0 2.692.484h.017c3.578 0 6.671-2.471 7.373-5.878S13.821 1.893 10.511.557ZM4.994 5.3h3.779c.184 0 .334.15.334.334 0 .183-.15.334-.334.334H4.993a.335.335 0 0 1-.334-.334c0-.184.15-.334.334-.334Zm6.053 3.69H4.993a.335.335 0 0 1-.334-.334c0-.183.15-.334.334-.334h6.053c.184 0 .334.15.334.334 0 .184-.15.334-.334.334Z"
                                                fill="#EE93F8"></path>
                                        </svg></div>
                                    <div style="flex-grow:1;">{{__('Premium support')}}</div>
                                </li>

                            </div>
                        </div>
                    </ul>
                    <div style="padding:10px 20px; margin-top:10px;">
                        <div style="border-top: 1px solid #efeff2;"></div>
                    </div>
                    <div
                        style="text-align:center; padding-bottom:10px; padding-left:30px; padding-right:30px; padding-top:25px;">

                        <button type="submit" data-id="" class="btn btn-alternate btn-rounded buy-btn"
                            style="color:white; font-size:16px; font-weight:600; background-color:#ff603c; padding: 13px 22px; width:100%; border-radius:8px;">{{__('Buy Now')}}</button>


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

    </section>
    <x-review-count/>

    <style>

    </style>

    <section class="mob-marg"
        style="margin-top:30px; border-top:1px solid #EDEDED; background-color:white; padding-top:40px; padding-bottom:40px;">
        <div class="container" data-aos="fade-up">
            <div class="section-heading text-center">
                <h2 class="bold" style="font-size:37px;">{{__('How It Works?')}}</h2>

            </div>
            <div class="row gap-y text-center text-md-left">

                <div class="col-md-6" style="text-align:right;"><img src="{{ url('img/howda-4.png') }}" alt=""
                        style="max-width:100%; "></div>
                <div class="col-md-6">
                    <div style="max-width:400px; text-align:center;  margin-top:50px;" class="mobot-margin">
                        <div class="circle-num">1</div>
                        <div style="">
                            <h3 class="bold" style="font-size:30px; margin-top:10px;">{{__('Upload a picture or video to Instagram')}}</h3>
                            <p>{{__("You're already doing the first step! Just upload a picture or video to your Instagram account.")}}</p>
                        </div>
                    </div>

                </div>
            </div>
            <div class="row gap-y text-center text-md-left pc-only" style="display:none;">
                <div class="col col-md-6">
                    <div style="max-width:400px; text-align:center; float:right;  margin-top:50px;" class="mobot-margin">
                        <div class="circle-num">2</div>
                        <div style="">
                            <h3 class="bold" style="font-size:30px; margin-top:10px;">{{__('Your new media is automatically detected')}}</h3>
                            <p>{{__("In just a minute our system will detect your latest upload. You don't have to do anything!")}}
                            </p>
                        </div>
                    </div>

                </div>
                <div class="col col-md-6" style="text-align:left;"><img src="{{ url('img/howda-2.png') }}"
                        alt="" style="max-width:100%;"></div>

            </div>

            <div class="row gap-y text-center text-md-left mobile-only">
                <div class="col col-md-6" style="text-align:left;"><img src="{{ url('img/howda-2.png') }}"
                        alt="" style="max-width:100%;"></div>
                <div class="col col-md-6">
                    <div style="max-width:400px; text-align:center; float:right;  margin-top:50px;" class="mobot-margin">
                        <div class="circle-num">2</div>
                        <div style="">
                            <h3 class="bold" style="font-size:30px; margin-top:10px;">{{__('Your new media is automatically detected')}}</h3>
                            <p>{{__("In just a minute our system will detect your latest upload. You don't have to do anything!")}}</p>
                        </div>
                    </div>

                </div>


            </div>


            <div class="row gap-y text-center text-md-left">
                <div class="col-md-6" style="text-align:right;"><img src="{{ url('img/howda-3.png') }}" alt=""
                        style="max-width:100%;"></div>
                <div class="col-md-6">
                    <div style="max-width:400px; text-align:center; margin-top:50px;" class="mobot-margin">
                        <div class="circle-num">3</div>
                        <div style="">
                            <h3 class="bold" style="font-size:30px; margin-top:10px;">{{__('Watch your likes grow')}}</h3>
                            <p>{{__('Instagram auto likes are delivered to your new uploads at your desired speed.')}}</p>
                        </div>
                    </div>

                </div>
            </div>



        </div>
    </section>

    <section style="padding-top:30px; padding-bottom:0px; border-top:1px solid #EDEDED;" data-aos="fade-up">
        <div class="container">
            <div class="gap-y align-items-center text-center header-main">
                <h2 class="bold" style="font-size:34px;">{{__('Frequently asked questions')}}</h2>
                <p style="font-weight:400; max-width:600px; color: #62676c; font-size:16px; margin:0 auto;">{{__('Hundreds of customers trust us. And these are the most common questions they ask.')}}</p>
            </div>
            <div>
                <div class="accordion" id="accordionExample" style="margin:0 auto; margin-top:40px; max-width:900px; ">
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingFor1">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseFor1" aria-expanded="false" aria-controls="collapseFor1"
                                style="display:flex; justify-content:left;">
                                <div>
                                    <div class="accordion__question-mark"><span>?</span></div>
                                </div>
                                <div style="flex-grow:1;">{{__('When will I recieve my automatic Instagram likes?')}}</div>
                            </button>
                        </h2>
                        <div id="collapseFor1" class="accordion-collapse collapse" aria-labelledby="headingFor1"
                            data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                {{__('Our system monitors your social media account 24/7 and detects your latest posts within 60 seconds. Likes start delivering to your posts immediately after it is detected.')}}
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingTwo1">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseTwo1" aria-expanded="false" aria-controls="collapseTwo1"
                                style="display:flex; justify-content:left;">
                                <div>
                                    <div class="accordion__question-mark"><span>?</span></div>
                                </div>
                                <div style="flex-grow:1;">{{__('Will my account get banned od disabled?')}}</div>
                            </button>
                        </h2>
                        <div id="collapseTwo1" class="accordion-collapse collapse" aria-labelledby="headingTwo1"
                            data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                {{__('No, our system is 100% safe and will not get your account banned or disabled. Not one of our thousands of customers has ever been banned as a result of using our Instagram likes or followers services.')}}
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingOne">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"
                                style="display:flex; justify-content:left;">
                                <div>
                                    <div class="accordion__question-mark"><span>?</span></div>
                                </div>
                                <div style="flex-grow:1;">{{__('Do I need to give you my password?')}}</div>
                            </button>
                        </h2>
                        <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
                            data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <div>
                                    {{__('Absolutely not. Your password is completely confidential. All we require is your Instagram profile username.')}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingTwo">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"
                                style="display:flex; justify-content:left;">
                                <div>
                                    <div class="accordion__question-mark"><span>?</span></div>
                                </div>
                                <div style="flex-grow:1;">{{__('Can my account stay private?')}}</div>
                            </button>
                        </h2>
                        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                            data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <div>{{__('No, we cannot detect new posts on private accounts. Therefore, users must have their profiles set to public in order to receive automatic likes.')}}</div>

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


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

    <x-reasons />

    <x-review-block />

    <x-footer-buy />
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            $("#reviewForm").on('submit', function(e) {
                e.preventDefault();
                $(".send-review").attr("disabled", "disabled");
                var name = $("#prezdivka").val();
                var email = $("#email").val();
                var rating = $("input[name=rating]:checked").val();
                var textarea = $("#rate-text").val();

                $.ajax({
                    url: "/submit-review",
                    type: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        name: name,
                        email: email,
                        rating: rating,
                        textarea: textarea,
                    },
                    success: function(response) {
                        $(".review-sent").show().delay(3000).fadeOut();
                        $(".send-review").removeAttr("disabled");
                        $("#prezdivka").val("");
                        $("#email").val("");
                        $("#rate-text").val("");
                    },
                });
            });

            $(".buy-btn").click(function() {
                var pack = $("#pack_id").val();
                $.ajax({
                    url: '/add-to-cart',
                    data: {
                        pack_id: pack
                    },
                    type: "GET",
                    success: function(data) {
                        window.location.href = data;
                    }
                });
            });

            $(".write-review-btn1").click(function() {
                $(".review-form").toggle();
                var text = $(this).text();
                $(this).text(
                    text == "Napsat recenzi" ? "Zrušit" : "Napsat recenzi");
            });

            $('.reviews').slick({
                centerMode: false,
                speed: 150,
                swipe: true,
                dots: true,
                arrows: false,
                slidesToShow: 3,
                focusOnSelect: false,
                responsive: [{
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 1
                    }
                }]
            });

            $(".package-selector").click(function() {
                event.preventDefault();
                $("#pack_id").val($(this).data("id"));
                $(".price-flw").html( $(this).data("price")+"zł");
                $(".amount").html($(this).data("amount"));
                $("#price-shower").html($(this).data("price"));
                $(".price-saved").html(Number($(this).data("price") / 100 * 25).toFixed(2)+"zł");
                $("#old-price").html( Number(($(this).data("price") / 100 * 25) + $(this).data(
                    "price")).toFixed(2)+"zł");
            });

            $('.cenik').slick({
                dots: false,
                arrows: false,
                centerMode: false,
                variableWidth: true,
                infinite: false,
                speed: 150,
                swipe: true,
                focusOnSelect: false
            });
        });
    </script>
@endsection