<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <meta name="robots" content="noindex, nofollow">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <meta name="theme-color" content="#3897f0">
    <title>کارتل - هی شاپ</title>
    
    <!-- تنظیم base URL -->
    <base href="/">
    
    <!-- SEO Meta Tags -->
    <meta name="description" content="هی شاپ عمده و فله‌ای با طراحی مدرن - سیستم دریافت لیست درخواست آنلاین">
    <meta name="keywords" content="هی شاپ, پخش مواد غذایی, فروش عمده, مواد غذایی فله‌ای">
    <meta name="author" content="هی شاپ">
    
    <!-- PWA Meta -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    
    <!-- Content Security Policy -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://heyshop.kaartel.ir; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://heyshop.kaartel.ir https://static.cloudflareinsights.com; style-src 'self' 'unsafe-inline' https://heyshop.kaartel.ir https://cdnjs.cloudflare.com; img-src 'self' data: https:; font-src 'self' data: https: https://cdnjs.cloudflare.com; connect-src 'self' https://heyshop.kaartel.ir;">
    
    <!-- فونت‌های داخلی -->
    <link rel="stylesheet" href="/assets/css/fonts.css">
    
    <!-- استایل اصلی -->
    <link rel="stylesheet" href="/assets/css/main.css">
    <link rel="stylesheet" href="/assets/css/modals.css">

    <!-- PWA Manifest -->
    <link rel="manifest" href="/manifest.json">
</head>
<body>
    <!-- Container اصلی SPA -->
    <div id="spa-app" role="application" aria-label="اپلیکیشن هی شاپ">
        <!-- محتوای SPA در اینجا رندر می‌شود -->
        <div id="app-content" role="main"></div>
        
        <!-- Loading -->
        <div id="app-loading" class="app-loading" aria-live="polite" aria-label="در حال بارگذاری">
            <div class="loading-spinner">
                <i class="fas fa-circle-notch fa-spin"></i>
            </div>
            <p class="loading-text">در حال بارگذاری کاتالوگ...</p>
            
            <!-- Skeleton Screens -->
            <div class="skeleton-container" aria-hidden="true">
                <div class="skeleton-header"></div>
                <div class="skeleton-profile">
                    <div class="skeleton-circle"></div>
                    <div class="skeleton-info">
                        <div class="skeleton-line w-60"></div>
                        <div class="skeleton-line w-40"></div>
                    </div>
                </div>
                <div class="skeleton-content">
                    <div class="skeleton-line"></div>
                    <div class="skeleton-line"></div>
                    <div class="skeleton-line w-80"></div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- اسکریپت اصلی -->
    <script type="module" src="/assets/js/app.js"></script>
    
    <!-- Network Monitor -->
    <script type="module" src="/assets/js/network-monitor.js"></script>
</body>
</html>
