@section('style')

<style>
    .achivement-box {
        margin-bottom: 2rem;
    }
    .achivement-box .inner-box {
        width: 100%;
        text-align: center;
        background: #fff;
        padding-top: 1rem;
        border: 1px solid var(--dark-color);
        -moz-box-shadow:    3px 3px 5px 3px rgb(0, 0, 0, 0.05);
        -webkit-box-shadow: 3px 3px 5px 3px rgb(0, 0, 0, 0.05);
        box-shadow:         3px 3px 5px 3px rgb(0, 0, 0, 0.05);
    }
    .achivement-box img {
        width: 40%;
        margin-top: 1rem;
    }
    .achivement-box .completed {
        display: inline-block;
        position: absolute;
        right: 30px;
        top: 0.2rem;
        font-size: 1.5rem;
        color: var(--primary-color);
    }
    .achivement-box .section-title {
        margin: 0;
    }
    .achivement-box .achivement-box .btn {
        border-radius: 0;
    }
    .achivement-box .list-group-item {
        border-color: #fff;
        text-align: left;
    }
    .achivement-box .list-group-item {
        border-radius: 0;
    }
    .achivement-box .progress {
        margin: 0 1rem 1rem 1rem;
    }
    .progress-bar {
        background-color: var(--primary-color);
    }
    .achivement-box p {
        padding: 1rem 1rem 1rem 1rem;
        margin: 0;
    }
    .encouragement {
        font-size: 0.8rem;
        margin: 1rem 0 0.2rem 0;
        padding: 0;
        color: var(--primary-color);
    }
</style>

@endsection

    <div class="row mb-2">
        <div class="col-lg-2 col-md-2 col-sm-1 col-0"></div>
        <div class="col-lg-8 col-md-8 col-sm-10 col-12 pb-2">
            <div class="section-title">Refer a Friend and Enjoy 12 months free service!!</div>
            <p>We value our customers and believe the best endorsement comes from you. That&rsquo;s why we&rsquo;re excited to introduce our new time limited referral program, designed to reward both you and your friends! This special offer runs until <strong>July 31, 2024</strong>.</p>
            <h4>Here&rsquo;s how it works</h4>
            <p><u>For Your Friends:</u> When a new customer is referred by a current customer and signs up for a 24-month plan, they will receive their first 12 months absolutely free.</p>
            <p><u>For You:</u> As a thank you for the referral, you&rsquo;ll also receive 12 months free on your own plan.</p>
            <p><u>Extra Rewards:</u> If you refer more than one friend who signs up for a 24-month plan, you&rsquo;ll receive a £50 Amazon voucher for each additional referral.</p>
            <h4>How to refer</h4>
            <p style="font-size:1.1rem;">Start spreading the word using your unique share links below or give us a call on <a href="tel:{{env('SALES_TEL')}}">{{env('SALES_TEL')}}</a> to refer a friend. Thank you for being a valued customer! Hurry, this offer ends on June 30, 2024!</p>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-1 col-0"></div>
    </div>

    <div class="row mb-5">
        <div class="col-lg-2 col-md-2 col-sm-1 col-0"></div>
        <div class="col-lg-8 col-md-8 col-sm-10 col-12 pb-2">
            <div class="section-title">Your share buttons </div>
            <p>Use the below buttons/link and we will track the people that engage. Below you can see how you are doing so far.</p>
            <x-elements.champion_share :link="$share_link" :areaname="($user->lead->getArea()->name ?? null)" />
        </div>
        <div class="col-lg-2 col-md-2 col-sm-1 col-0"></div>
    </div>

    <div class="row pb-5 mb-1">
        <div class="col-lg-2 col-md-2 col-sm-1 col-0"></div>
        <div class="col-lg-8 col-md-8 col-sm-10 col-12 pb-2">
            <div class="section-title">Your impact</div>
            <p>Here you can see how many people you have brought to our community.</p>
            <table class="table table-bordered">
                <tbody>
                    @foreach($referred as $row)
                    <tr class="{{$row['class']}}">
                        <th scope="row">{!!$row['title']!!}</th>
                        <td>{{$row['count']}}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-1 col-0"></div>
    </div>

    <div class="row mb-5">
        <div class="col-lg-2 col-md-2 col-sm-1 col-0"></div>
        <div class="col-lg-8 col-md-8 col-sm-10 col-12 pb-2">
            <p><a href="{{config('app.url')}}/uploads/brand/referral-program-tc-july24.pdf">
                Terms and conditions - Click here to open
            </a></p>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-1 col-0"></div>
    </div>