@extends('layouts.app')

@section('content')
<style>
    .mobile-app-shell {
        display: none;
    }
    @media (max-width: 768px) {
        .mobile-app-shell {
            display: block;
            min-height: 100vh;
            background: linear-gradient(145deg, #0f0f1a 0%, #1a1a2e 30%, #2d1f4e 50%, #1a1a2e 70%, #0f0f1a 100%);
        }
        /* Hide desktop sidebar and header on mobile */
        .lg\:ml-64, .desktop-sidebar, header, .site-header {
            display: none !important;
        }
    }

    /* Mobile Page Sections */
    .mobile-page { display: none; }
    .mobile-page.active { display: block; }

    /* Page Card Style */
    .mobile-card {
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(168,85,247,0.15);
        border-radius: 20px;
        padding: 20px;
        margin-bottom: 16px;
    }

    /* Hero section */
    .mobile-hero {
        text-align: center;
        padding: 24px 20px 16px;
    }
    .mobile-hero h1 {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 22px;
        font-weight: 800;
        color: #fff;
        margin-bottom: 6px;
        line-height: 1.2;
    }
    .mobile-hero p {
        font-size: 13px;
        color: #9ca3af;
        line-height: 1.5;
    }

    /* Feature cards */
    .mobile-feature-card {
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(168,85,247,0.12);
        border-radius: 16px;
        padding: 16px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 12px;
    }
    .mobile-feature-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .mobile-feature-title {
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 4px;
    }
    .mobile-feature-desc {
        font-size: 12px;
        color: #9ca3af;
        line-height: 1.5;
    }

    /* CTA Button */
    .mobile-cta-btn {
        display: block;
        width: 100%;
        padding: 14px;
        border-radius: 14px;
        border: none;
        background: linear-gradient(135deg, #a855f7, #ec4899);
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        box-shadow: 0 4px 16px rgba(168,85,247,0.35);
        transition: all 0.2s;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }
    .mobile-cta-btn:active {
        transform: scale(0.97);
    }

    /* Plan cards */
    .mobile-plan-card {
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(168,85,247,0.15);
        border-radius: 20px;
        padding: 20px;
        margin-bottom: 14px;
        transition: all 0.2s;
    }
    .mobile-plan-card.popular {
        border-color: #a855f7;
        box-shadow: 0 0 20px rgba(168,85,247,0.15);
    }
    .mobile-plan-name {
        font-size: 16px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 4px;
    }
    .mobile-plan-price {
        font-size: 28px;
        font-weight: 800;
        color: #a855f7;
        margin-bottom: 2px;
    }
    .mobile-plan-price span {
        font-size: 14px;
        color: #9ca3af;
        font-weight: 500;
    }
    .mobile-plan-desc {
        font-size: 12px;
        color: #9ca3af;
        margin-bottom: 14px;
    }

    /* Guide steps */
    .mobile-step {
        display: flex;
        gap: 14px;
        margin-bottom: 20px;
        align-items: flex-start;
    }
    .mobile-step-num {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: linear-gradient(135deg, #a855f7, #ec4899);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        flex-shrink: 0;
    }
    .mobile-step-title {
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 3px;
    }
    .mobile-step-desc {
        font-size: 12px;
        color: #9ca3af;
        line-height: 1.5;
    }

    /* Review cards */
    .mobile-review-card {
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(168,85,247,0.12);
        border-radius: 16px;
        padding: 16px;
        margin-bottom: 12px;
    }
    .mobile-review-stars {
        color: #fbbf24;
        font-size: 14px;
        margin-bottom: 8px;
    }
    .mobile-review-text {
        font-size: 13px;
        color: #e2e8f0;
        line-height: 1.6;
        margin-bottom: 10px;
    }
    .mobile-review-author {
        font-size: 12px;
        color: #9ca3af;
        font-weight: 600;
    }

    /* Section header */
    .mobile-section-title {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 18px;
        font-weight: 800;
        color: #fff;
        margin-bottom: 16px;
        padding: 0 4px;
    }
</style>

<div class="mobile-app-shell">
    <!-- HOME PAGE -->
    <div class="mobile-page active" id="page-home">
        <div class="mobile-hero">
            <div style="display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px;">
                <img src="/logo-locket.png" style="width:36px;height:36px;border-radius:10px;" alt="Logo">
                <span style="font-size:16px;font-weight:800;color:#fff;">Locket Gold</span>
            </div>
            <h1>Nâng Cấp Gold<br>Cực Nhanh</h1>
            <p>Không iCloud · Không mật khẩu · Không Shadowrocket · Bảo hành vĩnh viễn!</p>
            <div style="margin-top:12px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;">
                <span style="background:rgba(168,85,247,0.15);border:1px solid rgba(168,85,247,0.3);color:#a855f7;font-size:11px;font-weight:600;padding:4px 12px;border-radius:20px;">✓ Không cần mật khẩu</span>
                <span style="background:rgba(168,85,247,0.15);border:1px solid rgba(168,85,247,0.3);color:#a855f7;font-size:11px;font-weight:600;padding:4px 12px;border-radius:20px;">✓ Bảo hành vĩnh viễn</span>
            </div>
        </div>

        <div style="padding:0 16px 16px;">
            <a href="/pricing" class="mobile-cta-btn">
                Nâng Cấp Ngay
            </a>
        </div>

        <div style="padding:0 16px 24px;">
            <div class="mobile-section-title">Tính năng nổi bật</div>

            <div class="mobile-feature-card">
                <div class="mobile-feature-icon" style="background:rgba(59,130,246,0.15);">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
                </div>
                <div>
                    <div class="mobile-feature-title">Nâng Cấp Tức Thì</div>
                    <div class="mobile-feature-desc">Chỉ cần gửi Username, nhận Gold trong vài phút</div>
                </div>
            </div>

            <div class="mobile-feature-card">
                <div class="mobile-feature-icon" style="background:rgba(34,197,94,0.15);">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                </div>
                <div>
                    <div class="mobile-feature-title">Bảo Mật Tuyệt Đối</div>
                    <div class="mobile-feature-desc">Không yêu cầu mật khẩu hay iCloud. An toàn 100%</div>
                </div>
            </div>

            <div class="mobile-feature-card">
                <div class="mobile-feature-icon" style="background:rgba(245,158,11,0.15);">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                </div>
                <div>
                    <div class="mobile-feature-title">Bảo Hành Vĩnh Viễn</div>
                    <div class="mobile-feature-desc">Nếu mất Gold, nâng cấp lại miễn phí trọn đời</div>
                </div>
            </div>

            <div class="mobile-feature-card">
                <div class="mobile-feature-icon" style="background:rgba(168,85,247,0.15);">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#a855f7" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                </div>
                <div>
                    <div class="mobile-feature-title">Hỗ Trợ 24/7</div>
                    <div class="mobile-feature-desc">Đội ngũ hỗ trợ luôn sẵn sàng qua Zalo</div>
                </div>
            </div>
        </div>
    </div>

    <!-- PRICING PAGE -->
    <div class="mobile-page" id="page-pricing">
        <div style="padding:20px 16px 8px;text-align:center;">
            <div style="font-size:11px;font-weight:600;color:#a855f7;letter-spacing:1px;text-transform:uppercase;margin-bottom:4px;">Bảng giá</div>
            <h2 style="font-size:22px;font-weight:800;color:#fff;margin-bottom:4px;">Chọn Gói Phù Hợp</h2>
            <p style="font-size:13px;color:#9ca3af;">Giá đã bao gồm VAT</p>
        </div>

        <div style="padding:16px;">
            <div class="mobile-plan-card popular">
                <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
                    <div class="mobile-plan-name">Basic</div>
                    <span style="background:linear-gradient(135deg,#a855f7,#ec4899);color:#fff;font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;">Phổ biến</span>
                </div>
                <div class="mobile-plan-price">15,000đ <span>/ 24h</span></div>
                <div class="mobile-plan-desc">Dùng thử · Hết hạn sau 24 giờ</div>
                <a href="/payment" class="mobile-cta-btn" style="font-size:13px;padding:11px;">Chọn Basic</a>
            </div>

            <div class="mobile-plan-card">
                <div class="mobile-plan-name">Pro</div>
                <div class="mobile-plan-price">49,000đ <span>/ vĩnh viễn</span></div>
                <div class="mobile-plan-desc">Nâng cấp trọn đời · Bảo hành vĩnh viễn</div>
                <a href="/payment?plan=pro" class="mobile-cta-btn" style="font-size:13px;padding:11px;background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 4px 16px rgba(34,197,94,0.3);">Chọn Pro</a>
            </div>

            <div class="mobile-plan-card">
                <div class="mobile-plan-name">Premium</div>
                <div class="mobile-plan-price">99,000đ <span>/ vĩnh viễn</span></div>
                <div class="mobile-plan-desc">Tất cả tính năng · Hỗ trợ ưu tiên</div>
                <a href="/payment?plan=premium" class="mobile-cta-btn" style="font-size:13px;padding:11px;background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 4px 16px rgba(245,158,11,0.3);">Chọn Premium</a>
            </div>
        </div>
    </div>

    <!-- GUIDE PAGE -->
    <div class="mobile-page" id="page-guide">
        <div style="padding:20px 16px 8px;text-align:center;">
            <div style="font-size:11px;font-weight:600;color:#a855f7;letter-spacing:1px;text-transform:uppercase;margin-bottom:4px;">Hướng dẫn</div>
            <h2 style="font-size:22px;font-weight:800;color:#fff;margin-bottom:4px;">Cách Nâng Cấp Gold</h2>
            <p style="font-size:13px;color:#9ca3af;">Chỉ 3 bước đơn giản</p>
        </div>

        <div style="padding:16px;">
            <div class="mobile-step">
                <div class="mobile-step-num">1</div>
                <div>
                    <div class="mobile-step-title">Chọn gói & Thanh toán</div>
                    <div class="mobile-step-desc">Chọn gói Basic / Pro / Premium phù hợp và thanh toán qua chuyển khoản ngân hàng hoặc ví điện tử.</div>
                </div>
            </div>

            <div class="mobile-step">
                <div class="mobile-step-num">2</div>
                <div>
                    <div class="mobile-step-title">Gửi Username Locket</div>
                    <div class="mobile-step-desc">Sau khi thanh toán, gửi username Locket của bạn qua Zalo cho admin. Không cần mật khẩu!</div>
                </div>
            </div>

            <div class="mobile-step">
                <div class="mobile-step-num">3</div>
                <div>
                    <div class="mobile-step-title">Nhận Gold trong vài phút</div>
                    <div class="mobile-step-desc">Admin sẽ xử lý và thông báo khi hoàn tất. Thông thường chỉ mất 5-15 phút.</div>
                </div>
            </div>

            <div class="mobile-card">
                <div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;">
                    <div style="width:36px;height:36px;border-radius:10px;background:rgba(168,85,247,0.15);display:flex;align-items:center;justify-content:center;">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#a855f7" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                    </div>
                    <div style="font-size:14px;font-weight:700;color:#fff;">Lưu ý quan trọng</div>
                </div>
                <div style="font-size:12px;color:#9ca3af;line-height:1.7;">
                    • Không cần cung cấp mật khẩu iCloud<br>
                    • Không cần cài đặt ứng dụng thứ 3<br>
                    • Tài khoản của bạn hoàn toàn an toàn<br>
                    • Bảo hành vĩnh viễn nếu mất Gold
                </div>
            </div>
        </div>
    </div>

    <!-- LOCKET GOLD PAGE -->
    <div class="mobile-page" id="page-gold">
        <div style="padding:20px 16px 8px;text-align:center;">
            <div style="font-size:11px;font-weight:600;color:#a855f7;letter-spacing:1px;text-transform:uppercase;margin-bottom:4px;">Premium</div>
            <h2 style="font-size:22px;font-weight:800;color:#fff;margin-bottom:4px;">Nâng LocketGold</h2>
            <p style="font-size:13px;color:#9ca3af;">Trải nghiệm đẳng cấp không giới hạn</p>
        </div>

        <div style="padding:16px;">
            <!-- Gold benefits -->
            <div class="mobile-card">
                <div style="display:flex;align-items:center;gap:10px;margin-bottom:14px;">
                    <div style="width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#a855f7,#7c3aed);display:flex;align-items:center;justify-content:center;">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="white"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                    </div>
                    <div style="font-size:15px;font-weight:700;color:#fff;">Quyền lợi Gold</div>
                </div>
                <div style="display:flex;flex-direction:column;gap:10px;">
                    <div style="display:flex;align-items:center;gap:10px;">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="#22c55e"><path d="M20 6L9 17l-5-5"/></svg>
                        <span style="font-size:12px;color:#e2e8f0;">Toàn bộ tính năng Premium</span>
                    </div>
                    <div style="display:flex;align-items:center;gap:10px;">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="#22c55e"><path d="M20 6L9 17l-5-5"/></svg>
                        <span style="font-size:12px;color:#e2e8f0;">Không giới hạn photo sharing</span>
                    </div>
                    <div style="display:flex;align-items:center;gap:10px;">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="#22c55e"><path d="M20 6L9 17l-5-5"/></svg>
                        <span style="font-size:12px;color:#e2e8f0;">Bảo hành vĩnh viễn</span>
                    </div>
                    <div style="display:flex;align-items:center;gap:10px;">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="#22c55e"><path d="M20 6L9 17l-5-5"/></svg>
                        <span style="font-size:12px;color:#e2e8f0;">Hỗ trợ ưu tiên 24/7</span>
                    </div>
                    <div style="display:flex;align-items:center;gap:10px;">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="#22c55e"><path d="M20 6L9 17l-5-5"/></svg>
                        <span style="font-size:12px;color:#e2e8f0;">Nâng cấp lại miễn phí nếu mất Gold</span>
                    </div>
                </div>
            </div>

            <!-- CTA -->
            <a href="/payment" class="mobile-cta-btn" style="background:linear-gradient(135deg,#a855f7,#7c3aed);box-shadow:0 4px 16px rgba(168,85,247,0.4);margin-bottom:12px;">
                Nâng Cấp Ngay
            </a>

            <div style="text-align:center;font-size:11px;color:#6b7280;">Bắt đầu từ 15,000đ · Không cần mật khẩu</div>
        </div>
    </div>

    <!-- REVIEW PAGE -->
    <div class="mobile-page" id="page-review">
        <div style="padding:20px 16px 8px;text-align:center;">
            <div style="font-size:11px;font-weight:600;color:#a855f7;letter-spacing:1px;text-transform:uppercase;margin-bottom:4px;">Đánh giá</div>
            <h2 style="font-size:22px;font-weight:800;color:#fff;margin-bottom:4px;">Người Dùng Nói Gì?</h2>
            <div style="color:#fbbf24;font-size:16px;margin-bottom:2px;">★★★★★</div>
            <p style="font-size:12px;color:#9ca3af;">4.9/5 từ 500+ đánh giá</p>
        </div>

        <div style="padding:16px;">
            <div class="mobile-review-card">
                <div class="mobile-review-stars">★★★★★</div>
                <div class="mobile-review-text">"Mình nâng cấp gói Pro, chỉ 10 phút là có Gold rồi. Không phải cung cấp mật khẩu gì hết, an toàn tuyệt đối. Recommend!"</div>
                <div class="mobile-review-author">Nguyễn Minh T. · TP.HCM</div>
            </div>

            <div class="mobile-review-card">
                <div class="mobile-review-stars">★★★★★</div>
                <div class="mobile-review-text">"Đã dùng 3 tháng, Gold vẫn còn ngon. Lần trước mất Gold được nâng cấp lại miễn phí luôn. Admin hỗ trợ nhiệt tình."</div>
                <div class="mobile-review-author">Trần Thị L. · Hà Nội</div>
            </div>

            <div class="mobile-review-card">
                <div class="mobile-review-stars">★★★★★</div>
                <div class="mobile-review-text">"Giá rẻ hơn nhiều chỗ khác, quy trình nhanh gọn. Gửi username xong ngồi đợi 5 phút là xong. 10/10!"</div>
                <div class="mobile-review-author">Lê Văn N. · Đà Nẵng</div>
            </div>

            <div class="mobile-review-card">
                <div class="mobile-review-stars">★★★★★</div>
                <div class="mobile-review-text">"Ban đầu cũng lo nhưng admin giải thích rõ ràng, hỗ trợ qua Zalo cực nhanh. Giờ đã dùng Premium, rất hài lòng!"</div>
                <div class="mobile-review-author">Phạm Hoàng K. · Cần Thơ</div>
            </div>
        </div>
    </div>
</div>

<script>
    // Mobile tab switching
    function switchMobileTab(id) {
        // Hide all pages
        document.querySelectorAll('.mobile-page').forEach(p => p.classList.remove('active'));

        // Show selected page
        const page = document.getElementById('page-' + id);
        if (page) {
            page.classList.add('active');
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
    }

    // Listen for nav tab change events
    window.addEventListener('mobileNavTabChange', function(e) {
        switchMobileTab(e.detail.tab);
    });

    // Sync tab with URL hash
    window.addEventListener('hashchange', function() {
        const hash = window.location.hash.replace('#', '');
        if (['home', 'pricing', 'guide', 'review'].includes(hash)) {
            switchMobileTab(hash);
        }
    });

    // Initialize from hash
    if (['#pricing', '#guide', '#review'].includes(window.location.hash)) {
        switchMobileTab(window.location.hash.replace('#', ''));
    }
</script>
@endsection