<!-- Trading Modal -->
<div id="socialModal" class="modal-overlay" style="display: none;">
    <div class="modal-container">
        <div class="modal-content">

            <!-- Close Button -->
            <button type="button" class="modal-close" onclick="closeSocialModal()">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            </button>

            <!-- Modal Header -->
            <div class="modal-header">
                <div class="live-badge-wrap">
                    <span class="live-badge">
                        <span class="live-pulse"></span>
                        LIVE
                    </span>
                </div>
                <div class="header-icon-wrap">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
                    </svg>
                </div>
                <h2 class="modal-title">All Trading Activities Now Live!</h2>
                <p class="modal-subtitle">Bid on products, build your inventory, and sell for profit, take full control of your store right now</p>
            </div>

            <!-- Main Content -->
            <div class="ai-content-container">

                <!-- Success notice -->
                <!--<div class="success-notice">-->
                <!--    <svg class="notice-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">-->
                <!--        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>-->
                <!--        <polyline points="22 4 12 14.01 9 11.01"></polyline>-->
                <!--    </svg>-->
                <!--    <div>-->
                <!--        <h4>Trading is fully operational</h4>-->
                <!--        <p>All markets are open, start bidding, selling and earning now</p>-->
                <!--    </div>-->
                <!--</div>-->

                <!-- Benefits -->
                <div class="ai-benefits-section">
                    <h3 class="benefits-title">How it works</h3>

                    <div class="ai-benefit-item">
                        <div class="benefit-icon step-one">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M12 2a10 10 0 1 0 10 10"/><path d="M12 6v6l4 2"/>
                            </svg>
                        </div>
                        <div class="benefit-text">
                            <h4>Fund your store</h4>
                            <!--<p>Deposit USDT via Solana or Ethereum — confirmed automatically on-chain</p>-->
                            <p>Deposit USDT via Solana or Tron, confirmed automatically and secured</p>
                        </div>
                    </div>

                    <div class="ai-benefit-item">
                        <div class="benefit-icon step-two">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
                                <polyline points="17 6 23 6 23 12"></polyline>
                            </svg>
                        </div>
                        <div class="benefit-text">
                            <h4>Bid on products</h4>
                            <p>Browse live markets, place bids, and win items below market value</p>
                        </div>
                    </div>

                    <div class="ai-benefit-item">
                        <div class="benefit-icon step-three">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <line x1="12" y1="1" x2="12" y2="23"></line>
                                <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
                            </svg>
                        </div>
                        <div class="benefit-text">
                            <h4>Sell &amp; earn profits</h4>
                            <p>List your inventory on sell markets and pocket the price difference</p>
                        </div>
                    </div>
                    
                    <div class="ai-benefit-item">
                        <div class="benefit-icon step-two">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
                                <polyline points="17 6 23 6 23 12"></polyline>
                            </svg>
                        </div>
                        <div class="benefit-text">
                            <h4>Activate an AI to bid and sell</h4>
                            <p>Browse available AIs capable of bidding and selling on behalf of your store</p>
                        </div>
                    </div>
                </div>

                <!-- CTA Section -->
                <div class="cta-section">
                    <div class="cta-highlight">
                        <span class="cta-badge">Start Trading Today</span>
                        <h3>Fund your account &amp; place your first bid</h3>
                        <p>Thousands of products across dozens of markets are available right now</p>
                    </div>
                    <div class="cta-buttons">
                        <a href="{{ route('deposit') }}" class="cta-button primary">
                            <svg class="button-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <line x1="12" y1="5" x2="12" y2="19"></line>
                                <polyline points="19 12 12 19 5 12"></polyline>
                            </svg>
                            Fund Store Now
                        </a>
                        <a href="{{ route('bid-markets') }}" class="cta-button secondary">
                            <svg class="button-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="10"></circle>
                                <polyline points="12 16 16 12 12 8"></polyline>
                                <line x1="8" y1="12" x2="16" y2="12"></line>
                            </svg>
                            Browse Bid Markets
                        </a>
                    </div>
                </div>
            </div>

            <!-- Footer -->
            <div class="modal-footer">
                <div class="footer-social-section">
                    <p class="footer-title">Stay connected with GEAS</p>
                    <div class="footer-social-links">
                        <a href="https://t.me/C2C_store" target="_blank" class="footer-social-icon telegram" rel="noopener noreferrer" title="Telegram">
                            <svg viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z"></path>
                                <path d="M15 10l-4 4l6 6l4 -16l-18 7l4 2l2 6l3 -4"></path>
                            </svg>
                        </a>
                        <a href="https://whatsapp.com/channel/0029VbBUpB58F2pHFUYHBr2b" target="_blank" class="footer-social-icon whatsapp" rel="noopener noreferrer" title="WhatsApp">
                            <svg viewBox="0 0 24 24" fill="currentColor">
                                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
                            </svg>
                        </a>
                        <a href="https://www.instagram.com/globalc2cstore" target="_blank" class="footer-social-icon instagram" rel="noopener noreferrer" title="Instagram">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                                <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                                <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
                            </svg>
                        </a>
                        <a href="https://www.facebook.com/globalc2cstore" target="_blank" class="footer-social-icon facebook" rel="noopener noreferrer" title="Facebook">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
                            </svg>
                        </a>
                    </div>
                </div>
                <label class="dont-show-again">
                    <input type="checkbox" id="dontShowAgain" onchange="handleDontShowAgain()">
                    <span>Don't show this again</span>
                </label>
            </div>

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

<style>
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0,0,0,0.72);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes slideUp { from { transform:translateY(40px); opacity:0; } to { transform:translateY(0); opacity:1; } }

.modal-container {
    max-width: 520px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    animation: slideUp 0.38s cubic-bezier(.4,0,.2,1);
}

.modal-content {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(0,0,0,0.18);
    position: relative;
    overflow: hidden;
}
.dark .modal-content { background: #0f172a; }

/* Close */
.modal-close {
    position: absolute; top: 1rem; right: 1rem; z-index: 10;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.modal-close:hover { background: rgba(255,255,255,0.3); transform: rotate(90deg); }
.modal-close svg { color: #fff; }

/* Header */
.modal-header {
    padding: 2rem 2rem 1.75rem;
    text-align: center;
    background: linear-gradient(135deg, #f97316 0%, #c2440a 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.modal-header::before {
    content: '';
    position: absolute; top: -60px; right: -60px;
    width: 180px; height: 180px; border-radius: 50%;
    background: rgba(255,255,255,0.08);
    pointer-events: none;
}
.modal-header::after {
    content: '';
    position: absolute; bottom: -40px; left: -40px;
    width: 120px; height: 120px; border-radius: 50%;
    background: rgba(255,255,255,0.06);
    pointer-events: none;
}

/* Live badge */
.live-badge-wrap {
    position: relative; z-index: 1;
    margin-bottom: 1.1rem;
}
.live-badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.85rem;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 99px;
    font-size: 0.72rem; font-weight: 800;
    letter-spacing: 0.1em; color: #fff;
}
.live-pulse {
    width: 7px; height: 7px; border-radius: 50%;
    background: #4ade80;
    display: inline-block;
    animation: livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:0.5; transform:scale(0.75); }
}

/* Header icon */
.header-icon-wrap {
    position: relative; z-index: 1;
    width: 72px; height: 72px;
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem;
    animation: iconFloat 3s ease-in-out infinite;
}
.header-icon-wrap svg { width: 34px; height: 34px; color: #fff; }
@keyframes iconFloat {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.modal-title {
    font-size: 1.6rem; font-weight: 900;
    letter-spacing: -0.02em; line-height: 1.2;
    margin: 0 0 0.5rem;
    position: relative; z-index: 1;
}
.modal-subtitle {
    font-size: 0.875rem; opacity: 0.9; margin: 0; line-height: 1.55;
    position: relative; z-index: 1;
}

/* Content */
.ai-content-container { padding: 1.75rem 1.5rem; }

/* Success notice */
.success-notice {
    display: flex; gap: 0.85rem; align-items: flex-start;
    padding: 1rem 1.1rem;
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.22);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}
.notice-icon { width: 20px; height: 20px; color: #10b981; flex-shrink: 0; margin-top: 1px; }
.success-notice h4 { font-size: 0.88rem; font-weight: 700; margin: 0 0 0.2rem; color: #065f46; }
.dark .success-notice h4 { color: #6ee7b7; }
.success-notice p  { font-size: 0.78rem; margin: 0; color: #047857; line-height: 1.5; }
.dark .success-notice p  { color: #a7f3d0; }

/* Benefits */
.ai-benefits-section { margin-bottom: 1.5rem; }
.benefits-title {
    font-size: 0.85rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.07em;
    color: #94a3b8;
    margin: 0 0 0.85rem; text-align: center;
}

.ai-benefit-item {
    display: flex; align-items: flex-start; gap: 0.85rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.6rem;
    background: #f8fafc;
    border-radius: 12px;
    border: 1.5px solid transparent;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.ai-benefit-item:last-child { margin-bottom: 0; }
.ai-benefit-item:hover {
    border-color: rgba(249,115,22,0.3);
    transform: translateX(4px);
    box-shadow: 0 4px 14px rgba(249,115,22,0.1);
}
.dark .ai-benefit-item { background: #1e293b; }

.benefit-icon {
    width: 42px; height: 42px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.benefit-icon svg { width: 20px; height: 20px; color: #fff; }
.benefit-icon.step-one   { background: linear-gradient(135deg, #f97316, #ea580c); }
.benefit-icon.step-two   { background: linear-gradient(135deg, #10b981, #059669); }
.benefit-icon.step-three { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }

.benefit-text h4 { font-size: 0.88rem; font-weight: 700; margin: 0 0 0.2rem; color: #1e293b; }
.dark .benefit-text h4 { color: #f1f5f9; }
.benefit-text p  { font-size: 0.78rem; margin: 0; color: #64748b; line-height: 1.5; }
.dark .benefit-text p  { color: #94a3b8; }

/* CTA */
.cta-section {
    background: linear-gradient(135deg, #fff7ed, #fef3c7);
    border: 1px solid rgba(249,115,22,0.15);
    padding: 1.25rem;
    border-radius: 14px;
}
.dark .cta-section {
    background: linear-gradient(135deg, #1e1206, #1a120a);
    border-color: rgba(249,115,22,0.2);
}

.cta-highlight { text-align: center; margin-bottom: 1.1rem; }
.cta-badge {
    display: inline-block;
    padding: 0.28rem 0.85rem;
    background: linear-gradient(135deg, #f97316, #c2440a);
    color: #fff; border-radius: 99px;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em;
    margin-bottom: 0.6rem;
}
.cta-highlight h3 { font-size: 1.05rem; font-weight: 800; margin: 0 0 0.35rem; color: #1e293b; }
.dark .cta-highlight h3 { color: #f1f5f9; }
.cta-highlight p  { font-size: 0.78rem; margin: 0; color: #64748b; }
.dark .cta-highlight p  { color: #94a3b8; }

.cta-buttons { display: flex; flex-direction: column; gap: 0.6rem; }

.cta-button {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.82rem 1.25rem;
    border-radius: 10px;
    font-size: 0.88rem; font-weight: 800; text-decoration: none;
    transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
}
.cta-button.primary {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    box-shadow: 0 4px 16px rgba(249,115,22,0.35);
}
.cta-button.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(249,115,22,0.45);
    color: #fff;
}
.cta-button.secondary {
    background: #fff; color: #660066;
    border: 2px solid rgba(102,0,102,0.3);
}
.dark .cta-button.secondary { background: #1e293b; color: #e879f9; border-color: rgba(232,121,249,0.3); }
.cta-button.secondary:hover { background: #660066; color: #fff; border-color: #660066; }
.dark .cta-button.secondary:hover { background: #7c3aed; color: #fff; }

.button-icon { width: 17px; height: 17px; }

/* Footer */
.modal-footer {
    padding: 1.25rem 1.5rem 1.5rem;
    background: #f8fafc;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.dark .modal-footer { background: #0f172a; border-top-color: rgba(255,255,255,0.07); }

.footer-social-section { margin-bottom: 1rem; }
.footer-title {
    text-align: center; font-size: 0.75rem; font-weight: 600;
    color: #94a3b8; margin: 0 0 0.75rem;
    text-transform: uppercase; letter-spacing: 0.06em;
}

.footer-social-links { display: flex; justify-content: center; gap: 0.65rem; }
.footer-social-icon {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s; text-decoration: none;
}
.footer-social-icon:hover { transform: translateY(-3px) scale(1.1); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.footer-social-icon svg { width: 18px; height: 18px; }
.footer-social-icon.telegram  { background: linear-gradient(135deg, #0088cc, #0077b5); color: #fff; }
.footer-social-icon.whatsapp  { background: linear-gradient(135deg, #25D366, #128C7E); color: #fff; }
.footer-social-icon.instagram { background: linear-gradient(135deg, #833ab4, #fd1d1d 50%, #fcb045); color: #fff; }
.footer-social-icon.facebook  { background: linear-gradient(135deg, #1877f2, #0d65d9); color: #fff; }

.dont-show-again {
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; user-select: none; gap: 0.4rem;
}
.dont-show-again input[type="checkbox"] {
    width: 16px; height: 16px; cursor: pointer; accent-color: #f97316;
}
.dont-show-again span { font-size: 0.78rem; color: #94a3b8; }

@media (max-width: 640px) {
    .modal-overlay { padding: 12px; }
    .modal-header  { padding: 1.75rem 1.5rem 1.5rem; }
    .modal-title   { font-size: 1.35rem; }
    .ai-content-container { padding: 1.25rem 1rem; }
    .header-icon-wrap { width: 62px; height: 62px; }
    .header-icon-wrap svg { width: 28px; height: 28px; }
}
</style>

<script>
function openSocialModal() {
    const modal = document.getElementById('socialModal');
    if (modal) { modal.style.display = 'flex'; document.body.style.overflow = 'hidden'; }
}

function closeSocialModal() {
    const modal = document.getElementById('socialModal');
    if (modal) { modal.style.display = 'none'; document.body.style.overflow = ''; }
}

function handleDontShowAgain() {
    const cb = document.getElementById('dontShowAgain');
    if (cb && cb.checked) {
        localStorage.setItem('socialModalDismissed', 'true');
    } else {
        localStorage.removeItem('socialModalDismissed');
    }
}

document.addEventListener('click', function(e) {
    const modal = document.getElementById('socialModal');
    if (modal && e.target === modal) closeSocialModal();
});

document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closeSocialModal();
});

document.addEventListener('DOMContentLoaded', function() {
    if (!localStorage.getItem('socialModalDismissed')) {
        setTimeout(openSocialModal, 3000);
    }
});
</script>