@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">Instagram Automatické Lajky</h1>
            <h2 class="product-h2">Získejte Automatické Lajky na Instagram</h2>
            <p style="font-weight:400; max-width:600px; color: #62676c; font-size:16px; margin:0 auto;">Již nemusíte kupovat lajky na každou novou fotku, co přidáte. Náš systém automaticky detekuje nové příspěvky a dodá vám na ně lajky.</p>
            <div>
                <div class="trigger" style="display:none;">
                    <span id="fire" style=" padding:5px 15px;"><img title="sleva" src="{{ url('/img/alarm.png') }}" alt="objednávky" style="margin-top:14px;"></span>
                    <span style="font-size:17px;">POUZE <b>DNES</b> AKTIVOVÁNA <b>EXTRÉMNÍ SLEVA -80%</b>. </span>
                </div>
                <div class="trigger">
                    <span id="fire"><img title="objednávky" src="{{ url('/img/fire-icon.png') }}" alt="objednávky"></span>
                    <span style="font-size:14px;"><b style="font-weight:600;">28 objednávek</b> za posledních 7 dní.</span>
                </div>
                <div class="choose-block" style="box-shadow: 0px 0px 10px 0px #f1f1f1;">
                    <div
                        style="font-size:22px; font-family:'Source Sans Pro'; text-align:center; margin-bottom:8px; margin-left:2px; font-weight:700; color:#303435;">
                        Vyberte množství:</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> lajků / 30 dní<span
                                    class="alt price-flw"
                                    style="font-size:19px; font-weight:700;">{{ $packs->first()->price }}
                                    Kč</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>
                                            lajků / 30 dní</span><span class="alt">{{ $p->price }}
                                            Kč</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>Váš balíček</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, 0) }} Kč</div>
                        <div style="margin-top:-5px; font-size:31px; font-weight:600;"><span
                                id="price-shower">{{ $packs->first()->price }}</span><span
                                style="font-size:27px; margin-left:3px;">Kč</span></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">Dnes ušetříte
                                    <strong class="price-saved"
                                        style="color:#1fb174;">{{ number_format(($packs->first()->price / 100) * 25, 0) }}
                                        Kč</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;">Až na 60 příspěvků</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;">Nepotřebujeme heslo</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 denní balíček</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 podpora</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;">Pokračovat</button>


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

    </section>
    <div style="margin-top:0px;">
        <div class="customer-rated__stars" style="display:flex; justify-content: center;">
            <div style="margin-right:8px;">
                <svg height="24" viewBox="0 0 132 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M11.53 3.94c.302-.653.788-.653 1.09 0l1.93 4.166 4.352.628c.699.1.857.592.354 1.102l-3.178 3.199.78 4.558c.12.715-.285 1.007-.903.663l-3.88-2.175-3.88 2.175c-.618.344-1.022.052-.903-.663l.78-4.558-3.178-3.199c-.503-.51-.345-1.002.353-1.102L9.6 8.106l1.93-4.166Z"
                        fill="#fff"></path>
                    <rect y="1" width="23.15" height="22.048" rx="4.41" fill="#17CA80"></rect>
                    <path
                        d="M11.053 4.777c.29-.627.755-.627 1.045 0l1.849 3.994 4.173.601c.67.096.82.568.339 1.057l-3.046 3.066.747 4.37c.114.685-.274.965-.865.635l-3.72-2.085-3.72 2.085c-.591.33-.98.05-.865-.635l.747-4.37-3.046-3.066c-.481-.489-.33-.96.34-1.057l4.172-.601 1.85-3.994Z"
                        fill="#fff"></path>
                    <rect x="27" y="1" width="23.15" height="22.048" rx="4.41" fill="#17CA80"></rect>
                    <path
                        d="M38.053 4.777c.29-.627.755-.627 1.045 0l1.849 3.994 4.173.601c.67.096.82.568.339 1.057l-3.046 3.066.747 4.37c.114.685-.274.965-.865.635l-3.72-2.085-3.72 2.085c-.591.33-.98.05-.865-.635l.747-4.37-3.046-3.066c-.482-.489-.33-.96.34-1.057l4.172-.601 1.85-3.994Z"
                        fill="#fff"></path>
                    <rect x="54" y="1" width="23.15" height="22.048" rx="4.41" fill="#17CA80"></rect>
                    <path
                        d="M65.052 4.777c.29-.627.756-.627 1.046 0l1.849 3.994 4.173.601c.67.096.82.568.339 1.057l-3.046 3.066.747 4.37c.114.685-.274.965-.865.635l-3.72-2.085-3.72 2.085c-.591.33-.98.05-.865-.635l.747-4.37-3.046-3.066c-.482-.489-.33-.96.34-1.057l4.172-.601 1.85-3.994Z"
                        fill="#fff"></path>
                    <rect x="81" y="1" width="23.15" height="22.048" rx="4.41" fill="#17CA80"></rect>
                    <path
                        d="M92.052 4.777c.29-.627.756-.627 1.046 0l1.849 3.994 4.173.601c.67.096.82.568.339 1.057l-3.046 3.066.747 4.37c.114.685-.274.965-.865.635l-3.72-2.085-3.72 2.085c-.591.33-.98.05-.865-.635l.747-4.37-3.046-3.066c-.481-.489-.33-.96.34-1.057l4.172-.601 1.85-3.994Z"
                        fill="#fff"></path>
                    <rect x="108" y="1" width="23.15" height="22.048" rx="4.41" fill="#17CA80"></rect>
                    <path
                        d="M119.053 4.777c.289-.627.755-.627 1.045 0l1.849 3.994 4.173.601c.669.096.821.568.339 1.057l-3.046 3.066.747 4.37c.114.685-.274.965-.865.635l-3.72-2.085-3.719 2.085c-.592.33-.98.05-.866-.635l.747-4.37-3.046-3.066c-.482-.489-.33-.96.339-1.057l4.173-.601 1.85-3.994Z"
                        fill="#fff"></path>
                </svg>
            </div>
            <div style="margin-top:2px;"><b>4,8 / 5</b> na základě <b>462</b> recenzí</div>
        </div>
    </div>

    <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;">Jak to funguje?</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;">Nahrajete příspěvek
                                na Instagram</h3>
                            <p>Když máte zaplacený balíček, stačí pouze nahrát příspěvek na váš Instagram.</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;">Váš nový příspěvek
                                automaticky detekujeme</h3>
                            <p>Ihned po nahrání váš nový příspěvek automaticky detekujeme. Tím pádem nemusíte vůbec nic
                                dělat!</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;">Váš nový příspěvek
                                automaticky detekujeme</h3>
                            <p>Ihned po nahrání váš nový příspěvek automaticky detekujeme. Tím pádem nemusíte vůbec nic
                                dělat!</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;">Lajky začnou ihned narůstat
                            </h3>
                            <p>Již nemusíte nikde kupovat další lajky. Lajky od nás vám automaticky začnou na příspěvek
                                přibývat.</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;">Proč používat automatické lajky?</h2>
                <p style="font-weight:400; max-width:600px; color: #62676c; font-size:16px; margin:0 auto;">Důvěřuje nám
                    tisíce zákazníků. A toto jsou často kladené otázky, na které se ptají.</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;">Jaká je záruka na lajky? Budou mi ubývat nebo mizet?</div>
                            </button>
                        </h2>
                        <div id="collapseFor1" class="accordion-collapse collapse" aria-labelledby="headingFor1"
                            data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                Zakládáme si na tom, aby Instagram lajky od nás byly vždy <b>maximální kvality</b>.
                                Proto od nás views neubývají ani nemizí. Pokud by se tak náhodou stalo, samozřejmě nás
                                kontaktujte a vyřešíme to.
                            </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;">Je to legální? Nemůžou mi za to smazat účet?</div>
                            </button>
                        </h2>
                        <div id="collapseTwo1" class="accordion-collapse collapse" aria-labelledby="headingTwo1"
                            data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                Naše služba je 100% legální. Díky tomu, že dodáváme kvalitní služby, vám v žádném případě
                                nehrozí smazání nebo blokace vašeho účtu.
                            </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;">Proč bych měl používat automatické lajky?</div>
                            </button>
                        </h2>
                        <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
                            data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <div>
                                    Díky této službě budete mít na vašich příspěvcích vždy dostatek lajků a váš účet tak
                                    bude vypadat mnohem zajímavěji. Zároveň se nebudete muset starat o to, abyste na každou
                                    fotku zvlášť koupili lajky. Plus je to samozřejmě levnější, než kupovat lajky na každou
                                    fotku zvlášť.</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;">Co vše ode mě budete potřebovat?</div>
                            </button>
                        </h2>
                        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                            data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <div>Téměř nic - pouze vaší přezdívku na Instagramu.</div>
                                <div style="margin-top:10px;">
                                    Nikdy po vás nebudeme chtít žádné soukromé údaje jako je heslo nebo podobné věci. Díky
                                    tomu je naše služba maximálně bezpečná.</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") + " Kč");
                $(".amount").html($(this).data("amount"));
                $("#price-shower").html($(this).data("price"));
                $(".price-saved").html(parseInt(($(this).data("price") / 100 * 25)) + " Kč");
                $("#old-price").html(parseInt(($(this).data("price") / 100 * 25) + $(this).data("price")) +
                    " Kč");
            });

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