@extends('layouts.app-disclaimer-footer')

@section('style')
@endsection

@section('content')
    <main class="page-main" id="steps-join-page">
        <!-- SECTION Steps Join -->
        @php
            $arr = [
                (object) [
                    'icon' => 'step-1.svg',
                    'title' => 'BƯỚC 1: TÌM KIẾM LƯỢT CHƠI',
                    'description' =>
                        'Đặt hàng ngay tại trang  <a href="https://giaobianhanh.com/" target="_blank" rel="noopener" class="giao-bia-nhanh">Star Shop</a> hoặc <a href="https://www.facebook.com/Sapporo.vn/?locale=vi_VN" target="_blank" rel="noopener">Fanpage Sapporo Vietnam</a>. Với mỗi đơn hàng từ 640.000đ, chiến hữu nhận ngay 1 lượt chơi',
                ],
                (object) [
                    'title' => 'BƯỚC 2: THAM GIA NGAY',
                    'icon' => 'step-2.svg',
                    'description' =>
                        'Nhập số điện thoại theo đơn hàng đã mua, bắt đầu cuộc chơi và tích lũy điểm thưởng.',
                ],
                (object) [
                    'title' => 'BƯỚC 3: NHẬN QUÀ NGAY',
                    'icon' => 'step-3.svg',
                    'description' =>
                        "Nhận quà ngay khi kết thúc mỗi lượt chơi, mỗi phần quà tương ứng với số điểm bạn đạt được qua mỗi lượt chơi
                     <span>(*) Vui lòng xem chi tiết bảng điểm tại mục <a href=" .
                        route('rules') .
                        " target='_blank' rel='noopener'>thể lệ chương trình</a></span>",
                ],
                (object) [
                    'title' => 'BƯỚC 4: TRANH ĐẤU ĐỂ NHẬN QUÀ LỚN',
                    'icon' => 'step-4.svg',
                    'description' =>
                        'Tiếp tục tìm kiếm lượt chơi và tích lũy điểm để nhận phần quà cực hấp dẫn mỗi tháng.',
                ],
            ];
        @endphp

        <section class="steps-join" id="section-steps-join">
            <div class="container">
                <h1 class="section-title gradient-title medium is-animated" data-text="Cách thức tham gia">
                    <span>Cách thức tham gia</span>
                </h1>

                <h4 class="small-title gradient-title style-2 left-right is-animated"
                    data-text="“TUYỆT TÁC GIAO THOA, SĂN QUÀ ĐÓN TẾT”">
                    <span>“TUYỆT TÁC GIAO THOA, SĂN QUÀ ĐÓN TẾT”</span>
                </h4>

                <div class="content">
                    <div class="steps-row">
                        {{-- Step Col --}}
                        <div class="steps-col left-col">
                            <div class="decor decor-2">
                                <figure class="img-holder bg-mode">
                                    <img src="{{ asset('assets/img/landing-page/decor/firework-yellow.png') }}"
                                        alt="" width="" height="">
                                </figure>
                            </div>
                            <div class="decor decor-3">
                                <figure class="img-holder bg-mode">
                                    <img src="{{ asset('assets/img/landing-page/decor/firework-yellow.png') }}"
                                        alt="" width="" height="">
                                </figure>
                            </div>
                            <div class="decor decor-1">
                                <figure class="img-holder bg-mode">
                                    <img src="{{ asset('assets/img/landing-page/decor/firework-red.png') }}" alt=""
                                        width="" height="">
                                </figure>
                            </div>
                        </div>
                        {{-- Step Col --}}
                        <div class="steps-col right-col">
                            <ul class="steps">
                                @for ($i = 0; $i < count($arr); $i++)
                                    <li class="step is-animated">
                                        @if ($i === 1)
                                            <a href="{{ route('mini-game') }}" target="_blank" rel="noopener" class="join-game-now">
                                        @endif
                                        <div class="step-icon">
                                            <figure class="img-holder bg-mode">
                                                <img src="{{ asset('assets/img/landing-page/steps/' . $arr[$i]->icon) }}"
                                                    alt="icon">
                                            </figure>
                                        </div>
                                        <div class="step-content">
                                            <div class="step-title">
                                                <span class="icon">
                                                    <figure class="img-holder bg-mode">
                                                        <img src="{{ asset('assets/img/icon/ellipse-yellow-red.svg') }}"
                                                            alt="icon">
                                                    </figure>
                                                </span>
                                                <h5 class="gradient-title style-2 small" data-text="{{ $arr[$i]->title }}">
                                                    <span>{{ $arr[$i]->title }}</span>
                                                </h5>
                                            </div>

                                            <p class="step-desc">{!! $arr[$i]->description !!}</p>
                                        </div>
                                        @if ($i === 1)
                                            </a>
                                        @endif
                                    </li>
                                @endfor
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- SECTION Steps Join - END -->
    </main>
@endsection

@section('script')
@endsection