@extends('layouts.app', [
    'pageTitle' => 'Főoldal',
    'seoTitle' => 'Főoldal',
    'seoDesc' => 'Főoldal',
    'pageImageRelativeUrl' => '',
    'navBackgroundDesktop' => 'index/nav-background-desktop.webp',
    'navBackgroundMobile' => 'index/nav-background-mobile.webp',
])
@php
    use App\Models\Setting;
@endphp
@section('nav_extra')
    <div class="nav-extra">
        <h1><span>Csökkentsd a</span><br class="d-block d-lg-none"> játékhalmok<br>okozta <span>stresszt!</span></h1>
        <div class="text-center text-lg-left">
            Ne hagyd, hogy a helyhiány és a felesleges játékok eluralkodjanak!<br>Mi intézzük a cserét, fertőtlenítést és szállítást, te csak
            élvezd, hogy<br class="d-none d-lg-block">végre nem a káoszt látod a gyerekszobában.
        </div>
        <div style="height: 24px;"></div>
        <div class="row no-gutters d-flex flex-column flex-lg-row buttons-container">
            <button onclick="window.location.href='/packages'" class="small-padding">Előfizetések megtekintése</button>
            <div class="spacer"></div>
            @if (!Auth::check())
                <button onclick="window.location.href='{{ route('login') }}'" class="small-padding">Belépek</button>
            @endif
        </div>
    </div>
@endsection
@section('content')
    @php
        $userSubPrice = Auth::check() && Auth::user()->isSubscribed() ? Auth::user()->subscription->package->price : 0;
    @endphp
    <link rel="stylesheet" href="/css/index.css">
    <script src="/js/index.js"></script>
    <div class="container-0 text-center">
        <div class="title"><span>{{ env('APP_NAME') }}</span> játékcsere csomagok</div>
        <div class="text-0">Fedezd fel a fenntartható játékélményt</div>
        <div class="buttons-container row no-gutters d-flex flex-column flex-lg-row">
            <button id="sub_type_0" class="small-padding active" onclick="setSelectedSubType(0)">Használt játékos előfizetések (Második Esély
                Klub)</button>
            <div class="spacer"></div>
            <button id="sub_type_1" class="small-padding" disabled onclick="setSelectedSubType(1)">Új játékos előfizetések (Friss Mosoly
                Klub)</button>
        </div>
        <div class="buttons-container row no-gutters d-flex flex-column flex-lg-row custom-width">
            <button id="sub_interval_0" class="small-padding active" onclick="setSelectedSubInterval(0)">Havi</button>
            <div class="spacer"></div>
            <button id="sub_interval_1" class="small-padding" onclick="setSelectedSubInterval(1)">Fél éves
                ({{ Setting::getValue('package_half_year_discount') }}% kedvezménnyel)</button>
            <div class="spacer"></div>
            <button id="sub_interval_2" class="small-padding" onclick="setSelectedSubInterval(2)">Éves
                ({{ Setting::getValue('package_year_discount') }}% kedvezménnyel)</button>
        </div>
    </div>
    @php
        $halfYearDiscount = (100 - (int) Setting::getValue('package_half_year_discount')) / 100;
        $yearDiscount = (100 - (int) Setting::getValue('package_year_discount')) / 100;
        $prices = [
            [
                [
                    number_format($subscriptionPackages[1]->price, 0, ',', ' ') . ' Ft/Hó',
                    number_format($subscriptionPackages[2]->price, 0, ',', ' ') . ' Ft/Hó',
                    number_format($subscriptionPackages[3]->price, 0, ',', ' ') . ' Ft/Hó',
                ],
                [
                    number_format($subscriptionPackages[1]->price * $halfYearDiscount, 0, ',', ' ') . ' Ft/Hó',
                    number_format($subscriptionPackages[2]->price * $halfYearDiscount, 0, ',', ' ') . ' Ft/Hó',
                    number_format($subscriptionPackages[3]->price * $halfYearDiscount, 0, ',', ' ') . ' Ft/Hó',
                ],
                [
                    number_format($subscriptionPackages[1]->price * $yearDiscount, 0, ',', ' ') . ' Ft/Hó',
                    number_format($subscriptionPackages[2]->price * $yearDiscount, 0, ',', ' ') . ' Ft/Hó',
                    number_format($subscriptionPackages[3]->price * $yearDiscount, 0, ',', ' ') . ' Ft/Hó',
                ],
            ],
            [
                [
                    number_format($subscriptionPackages[4]->price, 0, ',', ' ') . ' Ft/Hó',
                    number_format($subscriptionPackages[5]->price, 0, ',', ' ') . ' Ft/Hó',
                    number_format($subscriptionPackages[6]->price, 0, ',', ' ') . ' Ft/Hó',
                ],
                [
                    number_format($subscriptionPackages[4]->price * $halfYearDiscount, 0, ',', ' ') . ' Ft/Hó',
                    number_format($subscriptionPackages[5]->price * $halfYearDiscount, 0, ',', ' ') . ' Ft/Hó',
                    number_format($subscriptionPackages[6]->price * $halfYearDiscount, 0, ',', ' ') . ' Ft/Hó',
                ],
                [
                    number_format($subscriptionPackages[4]->price * $yearDiscount, 0, ',', ' ') . ' Ft/Hó',
                    number_format($subscriptionPackages[5]->price * $yearDiscount, 0, ',', ' ') . ' Ft/Hó',
                    number_format($subscriptionPackages[6]->price * $yearDiscount, 0, ',', ' ') . ' Ft/Hó',
                ],
            ],
        ];
        $texts = [
            [
                [
                    'Havi ' . number_format($subscriptionPackages[1]->cupon, 0, ',', '.') . ' Ft értékű játékcsere',
                    'Extra kupon: 5.000 Ft értékben',
                    'Akár évi 195.000 Ft értékű játékcsere',
                    'Ingyenes kiszállítás havi 1 alkalommal',
                    'Rugalmas játékcsere - bármikor',
                    $subscriptionPackages[1]->keeping_discount . '% megtartási kedvezmény',
                    '10 % ajánlói kedvezmény',
                ],
                [
                    'Havi ' . number_format($subscriptionPackages[2]->cupon, 0, ',', '.') . ' Ft értékű játékcsere',
                    'Extra kupon: 10.000 Ft értékben',
                    'Akár évi 350.000 Ft értékű játékcsere',
                    'Ingyenes kiszállítás, visszaküldés havi 1 alkalommal',
                    'Rugalmas játékcsere - bármikor',
                    $subscriptionPackages[2]->keeping_discount . '% megtartási kedvezmény',
                    '20% ajánlói kedvezmény',
                    'Digitális jelvények',
                    'Belépés a zárt ' . env('APP_NAME') . ' közösségbe',
                    'Titkos Raktár, új játékok',
                    'Évente 1 Rejtélyes Csomag',
                ],
                [
                    'Havi ' . number_format($subscriptionPackages[3]->cupon, 0, ',', '.') . ' Ft értékű játékcsere',
                    'Extra kupon: 20.000 Ft értékben',
                    'Akár évi 600.000 Ft értékű játékcsere',
                    'Ingyenes kiszállítás, visszaküldés havi 1 alkalommal',
                    'Rugalmas játékcsere - bármikor',
                    $subscriptionPackages[3]->keeping_discount . '% megtartási kedvezmény',
                    '30% ajánlói kupon',
                    'Digitális jelvények',
                    'Belépés a zárt ' . env('APP_NAME') . ' közösségbe',
                    'Havi extra VIP kupon',
                    'Évente 2 Rejtélyes Csomag',
                    'Offline kedvezmények',
                ],
            ],
            [['Fityesz'], ['Fityesz'], ['Fityesz']],
        ];
    @endphp
    <div id="real_container" class="container-1">
        <div class="container-1-row d-flex flex-column flex-md-row">
            <div class="box" data-aos="fade-right">
                @for ($i = 0; $i < 2; $i++)
                    <button style="display:none;"
                        class="small-radius no-horizontal-padding title-button no-hover-lift package-{{ $i }}-item">{{ $subscriptionPackages[$i * 3 + 3]->name }}</button>
                    @for ($j = 0; $j < 3; $j++)
                        <div id="price_{{ $i }}_{{ $j }}_2" style="display:none;" class="price">{{ $prices[$i][$j][2] }}
                        </div>
                    @endfor
                    @foreach ($texts[$i][2] as $text)
                        <div class="package-{{ $i }}-item" style="display:none;">
                            <div class="line"></div>
                            <div class="row no-gutters justify-content-between item">
                                <img src="/images/index/success.svg"></img>
                                <div class="text">{{ $text }}</div>
                            </div>
                        </div>
                    @endforeach
                @endfor
                <div class="flex-grow-1"></div>
                @for ($i = 0; $i < 2; $i++)
                    <div name="subscribe_button_container_{{ $i }}">
                        <button {{ $userSubPrice >= $subscriptionPackages[$i * 3 + 3]->price ? 'disabled' : '' }} onclick='moveToPay(2)'
                            class="sub-button small-padding">Előfizetek</button>
                    </div>
                @endfor
                <div class="bottom-text">Jelenleg az előfizetés a brancs közösségi kampány finanszírozás keretében lehetséges.</div>
            </div>
            <div class="box" data-aos="fade-up">
                @for ($i = 0; $i < 2; $i++)
                    <button style="display:none;"
                        class="small-radius no-horizontal-padding title-button no-hover-lift package-{{ $i }}-item">{{ $subscriptionPackages[$i * 3 + 2]->name }}</button>
                    @for ($j = 0; $j < 3; $j++)
                        <div id="price_{{ $i }}_{{ $j }}_1" style="display:none;" class="price">
                            {{ $prices[$i][$j][1] }}
                        </div>
                    @endfor
                    @foreach ($texts[$i][1] as $text)
                        <div class="package-{{ $i }}-item" style="display:none;">
                            <div class="line"></div>
                            <div class="row no-gutters justify-content-between item">
                                <img src="/images/index/success.svg"></img>
                                <div class="text">{{ $text }}</div>
                            </div>
                        </div>
                    @endforeach
                @endfor
                <div class="flex-grow-1"></div>
                @for ($i = 0; $i < 2; $i++)
                    <div name="subscribe_button_container_{{ $i }}">
                        <button {{ $userSubPrice >= $subscriptionPackages[$i * 3 + 2]->price ? 'disabled' : '' }} onclick='moveToPay(1)'
                            class="sub-button small-padding">Előfizetek</button>
                    </div>
                @endfor
                <div class="bottom-text">Jelenleg az előfizetés a brancs közösségi kampány finanszírozás keretében lehetséges.</div>
            </div>
            <div class="box" data-aos="fade-left">
                @for ($i = 0; $i < 2; $i++)
                    <button style="display:none;"
                        class="small-radius no-horizontal-padding title-button no-hover-lift package-{{ $i }}-item">{{ $subscriptionPackages[$i * 3 + 1]->name }}</button>
                    @for ($j = 0; $j < 3; $j++)
                        <div id="price_{{ $i }}_{{ $j }}_0" style="display:none;" class="price">
                            {{ $prices[$i][$j][0] }}</div>
                    @endfor
                    @foreach ($texts[$i][0] as $text)
                        <div class="package-{{ $i }}-item" style="display:none;">
                            <div class="line"></div>
                            <div class="row no-gutters justify-content-between item">
                                <img src="/images/index/success.svg"></img>
                                <div class="text">{{ $text }}</div>
                            </div>
                        </div>
                    @endforeach
                @endfor
                <div class="flex-grow-1"></div>
                @for ($i = 0; $i < 2; $i++)
                    <div name="subscribe_button_container_{{ $i }}">
                        <button {{ $userSubPrice >= $subscriptionPackages[$i * 3 + 1]->price ? 'disabled' : '' }} onclick='moveToPay(0)'
                            class="sub-button small-padding">Előfizetek</button>
                    </div>
                @endfor
                <div class="bottom-text">Jelenleg az előfizetés a brancs közösségi kampány finanszírozás keretében lehetséges.</div>
            </div>
        </div>
        <div class="text-center"><button class="small-padding white bottom" onclick="window.location.href='/packages'">Részletek
                megtekintése</button></div>
    </div>
    <div id="temporary_container" class="container-1 text-center" style="display:none;">
        <img src="/images/temporary.webp"></img>
    </div>
    <div class="container-2 text-center container">
        <div class="title"><span>Cserélhető</span> játékaink</div>
        <div style="color: red;">Az alábbi játékok csak teszt jellegűek</div>
        <div class="text-0">Közönségkedvenc játékok</div>
        <div id="products" class="products-row d-flex flex-wrap justify-content-center"></div>
    </div>
    <div class="d-flex justify-content-center">
        <div id="paginator"></div>
    </div>
    <script type="text/javascript">
        let products = [
            @foreach ($products as $product)
                {
                    id: {{ $product->id }},
                    name: "{{ $product->name }}",
                    price: {{ $product->price }},
                    old_price: {{ $product->old_price }},
                    image_extension: "{{ $product->image_extension }}",
                    category: "{{ $product->categories->first()?->name ?? 'N/A' }}",
                    age: "{{ $product->ages->first()?->name ?? 'N/A' }}",
                },
            @endforeach
        ];
        renderPaginator(products);
    </script>
    <div class="container-3">
        <div class="container">
            <div class="row d-flex flex-column-reverse flex-column flex-lg-row" data-aos="fade-left">
                <div class="col-12 col-lg-6 text-left">
                    <div class="title"><span>Használt</span> játékos előfizetés</div>
                    <div class="spacer-0"></div>
                    <b>Fenntartható, tudatos választás családoknak:</b> havonta új, minőségellenőrzött és fertőtlenített játékok érkeznek, a
                    régieket visszaküldheted, így mindig friss játékélményt kapsz — miközben helyet, pénzt és időt nyersz.
                    <br>
                    <b>Előnyök egy tipikus csomagban:</b>
                    <div class="spacer-1"></div>
                    <div class="row no-gutters justify-content-between item">
                        <img src="/images/index/success.svg"></img>
                        <div class="text">
                            Havonta meghatározott értékű játékcsere-keret <b>(akár évi 600.000 Ft értékben)</b>
                        </div>
                    </div>
                    <div class="row no-gutters justify-content-between item">
                        <img src="/images/index/success.svg"></img>
                        <div class="text">
                            Ingyenes kiszállítás és visszaküldés a csere során
                        </div>
                    </div>
                    <div class="row no-gutters justify-content-between item">
                        <img src="/images/index/success.svg"></img>
                        <div class="text">
                            Az általad választható játékok a kínálatból — nem csak „véletlenszerű darabok”
                        </div>
                    </div>
                    <div class="row no-gutters justify-content-between item">
                        <img src="/images/index/success.svg"></img>
                        <div class="text">
                            Fejlesztőpedagógusok által ajánlott játékok
                        </div>
                    </div>
                    <div class="row no-gutters justify-content-between item">
                        <img src="/images/index/success.svg"></img>
                        <div class="text">
                            Kedvezményes lehetőség: ha a játék megtetszik, megvásárolhatod — vagy visszaküldés után az értéke visszakerül a
                            rendszerbe
                        </div>
                    </div>
                    <div class="white-container">
                        <div class="little-title">Miért éri meg?</div>
                        Ez a csomag tökéletes választás, ha szeretnéd új életre kelteni a gyerekek régi kedvenceit, miközben csökkented a
                        hulladékot, és részese leszel egy fenntartható játékokkal foglalkozó közösségnek.
                    </div>
                    <div class="text-center text-lg-left"><button class="small-padding"
                            onclick="window.location.href='/packages?type=0'">Szeretnék időben értesülni</button></div>
                </div>
                <div class="col-12 col-lg-6 image-col">
                    <div class="position-relative image-container h-100">
                        <img class="badge-1" src="/images/index/container-3-badge-1.webp"></img>
                        <img class="badge-2" src="/images/index/container-3-badge-2.webp"></img>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-4 text-center">
        <div class="container">
            <div class="title"><span>Hogyan</span> működik?</div>
            <div class="text-0">Három egyszerű lépés és a gyerekszoba újra levegőt kap.</div>
            A {{ env('APP_NAME') }} egy játékcsere-előfizetés, amellyel folyamatosan friss játékélményt biztosíthatsz a gyerekednek, anélkül,
            hogy
            halmoznád, vagy kidobnád a régieket.
            <div class="container-4-row d-flex flex-column flex-md-row">
                <div class="col box text-left" data-aos="fade-right">
                    <div class="big-title">01.</div>
                    <div class="little-title">Előfizetsz.</div>
                    Fix havi díjért háromszoros értékű cserekeretet kapsz, amiből prémium, fertőtlenített játékokat választhatsz.
                </div>
                <div class="col box text-left" data-aos="fade-down">
                    <div class="big-title">02.</div>
                    <div class="little-title">Válogatsz és játszotok.</div>
                    A játékok ellenőrzöttek, fejlesztőpedagógusok ajánlásával. Egyszerre több játék is lehet nálatok.
                </div>
                <div class="col box text-left" data-aos="fade-left">
                    <div class="big-title">03.</div>
                    <div class="little-title">Megunta a gyerek? Lecseréled!</div>
                    A profilodban kijelölöd a játékot, feltöltesz egy fotót, elindítod a cserét.
                    A játék értéke azonnal felszabadul, és új játékot választhatsz értékvesztés nélkül.
                </div>
            </div>
            <button class="small-padding d-none d-lg-block m-auto" onclick="window.location.href='/how-it-works'">Részletesen
                elolvasom</button>
        </div>
    </div>
    <div class="container-5 text-center">
        <div class="container">
            <div class="title"><span>Miért</span> válaszd <span>a {{ env('APP_NAME') }}</span>-t?</div>
            <div class="container-5-row d-flex flex-column flex-md-row">
                <div class="col box text-left" data-aos="fade-right">
                    <img src="/images/index/container-5-img-1.webp"></img>
                    <div class="more-padding">
                        <div class="little-title">Boldogság + Fejlődés egy csomagban</div>
                        A {{ env('APP_NAME') }}™ havonta új, prémium játékélményt hoz, ami egyszerre szórakoztat és fejleszt - a gyerekeknek
                        öröm, a szülőknek minőségi idő.
                    </div>
                </div>
                <div class="col box text-left" data-aos="fade-up">
                    <img src="/images/index/container-5-img-2.webp"></img>
                    <div class="more-padding">
                        <div class="little-title">Tudatos<br>döntés</div>
                        Nem kell többé halmozni vagy eladni a játékokat: használd, küldd vissza, és jön az új! Egyszerű, gazdaságos és
                        fenntartható.
                    </div>
                </div>
                <div class="col box text-left" data-aos="fade-left">
                    <img src="/images/index/container-5-img-3.webp"></img>
                    <div class="more-padding">
                        <div class="little-title">Együtt<br>jobb</div>
                        A visszaküldött játékokat szakembereink megtisztítják és fertőtlenítik, így biztonságosan, megbízhatóan kerülnek új
                        kezekbe.
                    </div>
                </div>
            </div>
            <button class="small-padding" onclick="window.location.href='/packages'">Meggyőztetek megnézem a csomagokat</button>
        </div>
    </div>
    <div id="about_us" class="container-3 green-background">
        <div class="container">
            <div class="row d-flex flex-column-reverse flex-column flex-lg-row">
                <div class="col-12 col-lg-6 text-left" data-aos="fade-right">
                    <div class="title"><span>A {{ env('APP_NAME') }} küldetés vagy „Miért csináljuk?"</span></div>
                    <div class="spacer-0"></div>
                    Szülőként nap mint nap találkozom azzal a helyzettel, hogy a gyerekek játéka egykor imádott darabként indult, aztán pár hét
                    múlva már csak porosodik a sarokban. Közben ott az állandó nyomás: új játék kell, hogy ne unatkozzon a gyerek — és ez egy
                    ördögi kör, tele felesleges kiadásokkal, időveszteséggel és helyhiánnyal.<br><br>
                    Éppen ezért jött létre a {{ env('APP_NAME') }}: egy előfizetéses játékcsere-platform, ahol havonta friss, fertőtlenített játék érkezik
                    hozzád, a régit pedig gond nélkül visszük. Nincs hirdetés, nincs végtelen böngészés vagy alkudozás — csak egy egyszerű,
                    működő rendszer, ami leveszi a terhet a válladról. Ráadásul már az indulásnál elindíthatod a játékhalmok csökkentését: a
                    feleslegessé vált játékokat beküldheted, így otthonod rögtön felszabadul, gyermeked megkapja a havi új élményt, Te pedig
                    időt, pénzt és helyet nyersz — mindeközben segítesz rászoruló gyerekeken és a környezetet is véded.<br><br>
                    Szlogenünk: <b>„Egy játék, két mosoly”</b> — mert a legszebb pillanat az, amikor a gyermek és a szülő egyszerre mosolyog.
                    Éliás Péter a {{ env('APP_NAME') }} alapítója
                </div>
                <div class="col-12 col-lg-6 image-col" data-aos="fade-left">
                    <div class="position-relative image-container h-100"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-3">
        <div class="container">
            <div class="row d-flex flex-column-reverse flex-column flex-lg-row">
                <div class="col-12 col-lg-6 position-relative col-slider" data-aos="fade-right">
                    <div class="splide h-100">
                        <div class="splide__track">
                            <ul class="splide__list">
                                <li class="splide__slide">
                                    <img class="w-100" src="/images/index/container-3-img-3.webp">
                                </li>
                                <li class="splide__slide">
                                    <img class="w-100" src="/images/index/container-3-img-3.webp">
                                </li>
                                <li class="splide__slide">
                                    <img class="w-100" src="/images/index/container-3-img-3.webp">
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6 text-left padding-bottom-mobile col-text" data-aos="fade-left">
                    <div class="title">Küldetésünk hitelességét a szakmai közeg is elismerte</div>
                    <div class="spacer-0"></div>
                    A VII. Mindset Meetup keretében zajló vállalkozási ötlet versenyen csapatunk bejutott a <b>100 indulóból a legjobb 3
                        közé</b>, mint
                    egyik kiemelt startup-ötlet.<br>
                    A zsűri összetétele rangos volt: többek között Kercsmár András, Kövesdi Gábor, Fetter István és
                    Csillag Péter is jelen volt - olyan szakemberek, akik a hazai startup- és vállalkozói közeg meghatározó figurái.
                    <br><br>Ez a helyezés nem csak elismerés, <b>hanem bizonyíték arra,</b> hogy a {{ env('APP_NAME') }}-platform működőképes, innovatív és
                    valódi
                    társadalmi értéket teremtő megoldás a játékcsere területén.<br>
                    Büszkék vagyunk erre a mérföldkőre — és egyszerre motivál bennünket arra,
                    hogy tovább építsük a szolgáltatásunkat, még nagyobb hatással.
                </div>
            </div>
        </div>
    </div>
@endsection