@extends('User.layout')

@section('title', 'Refer & Earn')

@section('content')

<section class="refer-earn-section">
    <div class="container-fluid px-3 px-lg-5">
        <div class="refer-card">
            <div class="row align-items-center g-0">

                {{-- LEFT: Heading, Gift and Points --}}
                <div class="col-12 col-lg-5">
                    <div class="refer-left">

                        <div class="refer-header">
                            <span class="refer-label">SHARE & EARN</span>
                            <h2>Refer your friends<br>and Earn</h2>
                            <p>Invite your friends and earn rewards together!</p>
                        </div>

                        <div class="gift-area">
                            <div class="gift-glow"></div>

                            <img
                                src="{{ asset('assets/img/gift.png') }}"
                                alt="Gift"
                                class="gift-image"
                            >

                            <div class="gift-spark spark-one">✦</div>
                            <div class="gift-spark spark-two">✧</div>
                            <div class="gift-spark spark-three">✦</div>
                        </div>

                        <div class="points-area">
                            <div class="points-value">
                                <span class="coin-icon">●</span>
                                <span>100</span>
                            </div>
                        </div>

                        <div class="refer-description">
                            <p>
                                Your friend gets <strong>10 coins</strong> when they sign up
                                using your referral code, and you get
                                <strong>10 coins</strong> for every referral!
                            </p>
                        </div>

                    </div>
                </div>

                {{-- RIGHT: Referral Code and Sharing --}}
                <div class="col-12 col-lg-7">
                    <div class="refer-right">
                        <div class="referral-content">

                            <div class="referral-icon d-none d-lg-flex">
                                <i class="bi bi-people"></i>
                            </div>

                            <h3 class="d-none d-lg-block">Invite Friends</h3>

                            <p class="referral-subtitle d-none d-lg-block">
                                Share your referral code and earn coins for every friend who joins.
                            </p>

                            <div class="referral-code-area">
                                <label>Your referral code</label>

                                <div class="referral-code-box">
                                    <span id="referralCode">ABCD123</span>

                                    <button
                                        type="button"
                                        class="copy-btn"
                                        id="copyReferral"
                                    >
                                        <i class="bi bi-copy"></i>
                                        <span id="copyText">Copy</span>
                                    </button>
                                </div>
                            </div>

                            <div class="share-area">
                                <p>Share your Referral Code via</p>

                                <div class="share-buttons">
                                    <a href="#" class="share-btn telegram" id="telegramShare">
                                        <i class="bi bi-telegram"></i>
                                        <span>Telegram</span>
                                    </a>

                                    <a href="#" class="share-btn facebook" id="facebookShare">
                                        <i class="bi bi-facebook"></i>
                                        <span>Facebook</span>
                                    </a>

                                    <a href="#" class="share-btn whatsapp" id="whatsappShare">
                                        <i class="bi bi-whatsapp"></i>
                                        <span>WhatsApp</span>
                                    </a>
                                </div>
                            </div>

                            <div class="refer-note">
                                <i class="bi bi-info-circle"></i>
                                <span>Earn 10 coins for every successful referral.</span>
                            </div>

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

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

<style>
.refer-earn-section {
    --refer-primary: #123c2a;
    --refer-dark: #0b291d;
    --refer-light: #24563d;
    --refer-gold: #d4af37;
    --refer-gold-light: #f0d78c;
    --refer-cream: #fff8e7;

    padding: 50px 0;
    background: var(--refer-cream);
    font-family: 'DM Sans', sans-serif;
}

.refer-card {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    color: var(--refer-cream);
    background:
        radial-gradient(circle at 25% 35%, rgba(212,175,55,.13), transparent 35%),
        linear-gradient(135deg, #24563d 0%, #123c2a 55%, #0b291d 100%);
    border: 1px solid rgba(212,175,55,.55);
    border-radius: 28px;
    box-shadow: 0 18px 45px rgba(11,41,29,.16);
}

.refer-card::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(240,215,140,.16);
    border-radius: 20px;
    pointer-events: none;
}

.refer-left,
.refer-right {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 45px;
}

.refer-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.refer-right {
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgba(240,215,140,.2);
}

.refer-header,
.gift-area,
.points-area,
.refer-description,
.referral-content {
    position: relative;
    z-index: 1;
}

.refer-label {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--refer-gold-light);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.refer-header h2 {
    margin: 0;
    color: #fff8e7;
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 700;
    line-height: 1.2;
}

.refer-header p {
    margin: 12px 0 0;
    color: rgba(255,248,231,.78);
    font-size: 13px;
}

/* Gift image */
.gift-area {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 150px;
    margin: 8px 0 0;
}

.gift-glow {
    position: absolute;
    width: 150px;
    height: 110px;
    background: rgba(212,175,55,.16);
    border-radius: 50%;
    filter: blur(22px);
}

.gift-image {
    position: relative;
    z-index: 2;
    display: block;
    width: 150px;
    height: 140px;
    object-fit: contain;
    filter: drop-shadow(0 8px 8px rgba(0,0,0,.22));
    animation: giftFloat 3s ease-in-out infinite;
}

.gift-spark {
    position: absolute;
    z-index: 3;
    color: var(--refer-gold-light);
    font-size: 18px;
    pointer-events: none;
    animation: sparkPulse 1.8s ease-in-out infinite;
}

.spark-one {
    left: calc(50% - 85px);
    top: 47px;
}

.spark-two {
    right: calc(50% - 90px);
    top: 25px;
    font-size: 22px;
    animation-delay: .4s;
}

.spark-three {
    right: calc(50% - 65px);
    bottom: 15px;
    font-size: 12px;
    animation-delay: .8s;
}

@keyframes giftFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-7px);
    }
}

@keyframes sparkPulse {
    0%, 100% {
        opacity: .5;
        transform: scale(.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.points-area {
    margin-top: -5px;
    text-align: center;
}

.points-value {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--refer-gold-light);
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
}

.coin-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    color: #a67c22;
    font-size: 13px;
    background: linear-gradient(135deg, #fff1a9, #d4af37);
    border: 2px solid #f0d78c;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

.points-label {
    margin-top: 6px;
    color: rgba(255,248,231,.75);
    font-size: 12px;
}

.refer-description {
    max-width: 360px;
    margin: 18px auto 0;
}

.refer-description p {
    margin: 0;
    color: rgba(255,248,231,.85);
    font-size: 12px;
    line-height: 1.8;
}

.refer-description strong {
    color: var(--refer-gold-light);
    font-weight: 700;
}

/* Right panel */
.referral-content {
    width: 100%;
    max-width: 520px;
    padding: 10px 0;
    text-align: center;
}

.referral-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 15px;
    color: var(--refer-gold-light);
    font-size: 27px;
    background: rgba(240,215,140,.1);
    border: 1px solid rgba(240,215,140,.35);
    border-radius: 18px;
}

.referral-content h3 {
    margin: 0;
    color: var(--refer-cream);
    font-family: 'Playfair Display', serif;
    font-size: 27px;
    font-weight: 700;
}

.referral-subtitle {
    max-width: 390px;
    margin: 10px auto 28px;
    color: rgba(255,248,231,.72);
    font-size: 13px;
    line-height: 1.7;
}

.referral-code-area {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.referral-code-area label {
    display: block;
    margin-bottom: 8px;
    color: rgba(255,248,231,.75);
    font-size: 12px;
    text-align: left;
}

.referral-code-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 55px;
    padding: 7px 8px 7px 18px;
    background: rgba(255,248,231,.08);
    border: 1px dashed rgba(240,215,140,.7);
    border-radius: 10px;
}

.referral-code-box > span {
    color: var(--refer-gold-light);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: 3px;
}

.copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    color: var(--refer-dark);
    font-size: 12px;
    font-weight: 700;
    background: var(--refer-gold-light);
    border: 0;
    border-radius: 7px;
    transition: .2s ease;
    cursor: pointer;
}

.copy-btn:hover {
    background: #fff0b5;
    transform: translateY(-1px);
}

.copy-btn i {
    font-size: 15px;
}

.share-area {
    margin-top: 28px;
}

.share-area > p {
    margin-bottom: 13px;
    color: rgba(255,248,231,.8);
    font-size: 12px;
    font-weight: 600;
}

.share-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
    padding: 12px 10px;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    border-radius: 30px;
    transition: transform .2s ease, filter .2s ease;
}

.share-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.share-btn i {
    font-size: 17px;
}

.telegram {
    background: #229ed9;
}

.facebook {
    background: #1877f2;
}

.whatsapp {
    background: #20a84b;
}

.refer-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 25px;
    padding: 12px;
    color: var(--refer-gold-light);
    font-size: 11px;
    background: rgba(240,215,140,.07);
    border: 1px solid rgba(240,215,140,.16);
    border-radius: 9px;
}

.refer-note i {
    font-size: 15px;
}

/* Large screens */
@media (min-width: 992px) {
    .refer-earn-section {
        padding: 60px 0;
    }

    .refer-card {
        min-height: 480px;
    }

    .refer-left,
    .refer-right {
        min-height: 480px;
        padding: 40px 45px;
    }

    .gift-area {
        height: 135px;
    }
}

/* Tablet and mobile */
@media (max-width: 991.98px) {
    .refer-earn-section {
        padding: 35px 0;
    }

    .refer-left,
    .refer-right {
        padding: 30px 25px;
    }

    .refer-right {
        border-left: 0;
        border-top: 1px solid rgba(240,215,140,.2);
    }

    .refer-card {
        max-width: 520px;
    }

    .refer-description {
        max-width: 330px;
    }
}

/* Small mobile */
@media (max-width: 380px) {
    .refer-earn-section {
        padding: 25px 0;
    }

    .refer-left,
    .refer-right {
        padding: 25px 17px;
    }

    .refer-header h2 {
        font-size: 25px;
    }

    .gift-image {
        width: 135px;
        height: 125px;
    }

    .share-buttons {
        gap: 5px;
    }

    .share-btn {
        gap: 3px;
        padding: 9px 4px;
        font-size: 9px;
    }

    .share-btn i {
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gift-image,
    .gift-spark {
        animation: none !important;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const referralCode = document.getElementById('referralCode');
    const copyButton = document.getElementById('copyReferral');
    const copyText = document.getElementById('copyText');

    if (!referralCode || !copyButton || !copyText) {
        return;
    }

    const code = referralCode.textContent.trim();
    const referralLink = window.location.origin + '/register?ref=' +
        encodeURIComponent(code);

    const shareMessage = 'Join me and earn rewards! Use my referral code: ' +
        code + ' ' + referralLink;

    copyButton.addEventListener('click', async function () {
        try {
            await navigator.clipboard.writeText(code);
        } catch (error) {
            const tempInput = document.createElement('textarea');
            tempInput.value = code;
            tempInput.style.position = 'fixed';
            tempInput.style.opacity = '0';

            document.body.appendChild(tempInput);
            tempInput.select();
            document.execCommand('copy');
            tempInput.remove();
        }

        copyText.textContent = 'Copied!';

        setTimeout(function () {
            copyText.textContent = 'Copy';
        }, 1800);
    });

    document.getElementById('telegramShare').href =
        'https://t.me/share/url?url=' +
        encodeURIComponent(referralLink) +
        '&text=' + encodeURIComponent(shareMessage);

    document.getElementById('facebookShare').href =
        'https://www.facebook.com/sharer/sharer.php?u=' +
        encodeURIComponent(referralLink);

    document.getElementById('whatsappShare').href =
        'https://wa.me/?text=' + encodeURIComponent(shareMessage);

    document.querySelectorAll('.share-btn').forEach(function (button) {
        button.target = '_blank';
        button.rel = 'noopener noreferrer';
    });
});
</script>

@endsection