<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ورقات | حلول رقمية متكاملة</title>
    <link rel="icon" href="logo.png" type="image/png">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700;800&display=swap" rel="stylesheet">
</head>
<body>
    <!-- Header -->
    <header class="header">
        <div class="container">
            <a href="#" class="logo">
                <img src="logo.png" alt="ورقات">
                <span>ورقات</span>
            </a>
            <nav class="nav" id="nav">
                <a href="#about">من نحن</a>
                <a href="#services">خدماتنا</a>
                <a href="#process">كيف نعمل</a>
                <a href="#contact">تواصل معنا</a>
            </nav>
            <button class="menu-toggle" id="menuToggle" aria-label="القائمة">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero">
        <div class="container">
            <div class="hero-content">
                <div class="hero-badge">
                    <span>جديد</span>
                    خدمات الذكاء الاصطناعي متاحة الآن
                </div>
                <h1>نحول أفكارك إلى <span class="highlight">واقع رقمي</span></h1>
                <p class="hero-description">متخصصون في بناء وتطوير المواقع والتطبيقات وتصميم الواجهات وقواعد البيانات وتطبيقات الذكاء الاصطناعي</p>
                <div class="hero-buttons">
                    <a href="#contact" class="btn btn-primary">ابدأ مشروعك</a>
                    <a href="#services" class="btn btn-outline">اكتشف خدماتنا</a>
                </div>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section class="about" id="about">
        <div class="container">
            <div class="section-header">
                <span class="section-label">من نحن</span>
                <h2>شريكك في التحول الرقمي</h2>
            </div>
            <div class="about-content">
                <div class="about-text">
                    <p>مجموعة ورقات شركة متخصصة في بناء وتطوير المواقع الإلكترونية والتطبيقات وتصميم واجهات المستخدم وقواعد البيانات وتطبيقات الذكاء الاصطناعي.</p>
                    <p>نؤمن أن نجاح المشاريع يكمن في جعلها <strong>سهلة الاستخدام، وواضحة، وبواجهة رسومية جذابة</strong>.</p>
                    <div class="about-features">
                        <div class="about-feature">
                            <div class="about-feature-icon">✓</div>
                            <span>جودة عالية</span>
                        </div>
                        <div class="about-feature">
                            <div class="about-feature-icon">✓</div>
                            <span>دعم مستمر</span>
                        </div>
                        <div class="about-feature">
                            <div class="about-feature-icon">✓</div>
                            <span>تسليم سريع</span>
                        </div>
                        <div class="about-feature">
                            <div class="about-feature-icon">✓</div>
                            <span>أسعار منافسة</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section class="services" id="services">
        <div class="container">
            <div class="section-header">
                <span class="section-label">خدماتنا</span>
                <h2>حلول رقمية متكاملة</h2>
                <p>نقدم مجموعة شاملة من الخدمات لتلبية احتياجات عملك</p>
            </div>
            <div class="services-grid">
                <div class="service-card" data-animate>
                    <div class="service-icon">🎨</div>
                    <h3>تصميم UI/UX</h3>
                    <p>تصميم واجهات مستخدم وتجربة مستخدم مميزة للمنصات الرقمية</p>
                </div>
                <div class="service-card" data-animate>
                    <div class="service-icon">💻</div>
                    <h3>تطوير المواقع</h3>
                    <p>بناء وتطوير المواقع الإلكترونية بأحدث التقنيات</p>
                </div>
                <div class="service-card" data-animate>
                    <div class="service-icon">📱</div>
                    <h3>تطوير التطبيقات</h3>
                    <p>إنشاء وتصميم تطبيقات الجوال لنظامي iOS و Android</p>
                </div>
                <div class="service-card" data-animate>
                    <div class="service-icon">🤖</div>
                    <h3>الذكاء الاصطناعي</h3>
                    <p>تطوير أنظمة الذكاء الاصطناعي لحل المشاكل وتحليل البيانات</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Process Section -->
    <section class="process" id="process">
        <div class="container">
            <div class="section-header">
                <span class="section-label">كيف نعمل</span>
                <h2>خطوات بسيطة لمشروع ناجح</h2>
            </div>
            <div class="process-grid">
                <div class="process-card" data-animate>
                    <div class="process-number">١</div>
                    <div class="process-content">
                        <h3>دراسة المشروع</h3>
                        <p>نفهم احتياجاتك ونحلل متطلبات المشروع</p>
                    </div>
                </div>
                <div class="process-card" data-animate>
                    <div class="process-number">٢</div>
                    <div class="process-content">
                        <h3>النموذج الأولي</h3>
                        <p>نصمم نموذج أولي للموافقة عليه</p>
                    </div>
                </div>
                <div class="process-card" data-animate>
                    <div class="process-number">٣</div>
                    <div class="process-content">
                        <h3>التنفيذ</h3>
                        <p>نبدأ في بناء وبرمجة المشروع</p>
                    </div>
                </div>
                <div class="process-card" data-animate>
                    <div class="process-number">٤</div>
                    <div class="process-content">
                        <h3>اختبار الجودة</h3>
                        <p>نختبر المشروع للتأكد من جودته</p>
                    </div>
                </div>
                <div class="process-card" data-animate>
                    <div class="process-number">٥</div>
                    <div class="process-content">
                        <h3>التسليم</h3>
                        <p>نسلم المشروع مع تدريب كامل</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section class="contact" id="contact">
        <div class="container">
            <div class="section-header">
                <span class="section-label">تواصل معنا</span>
                <h2>جاهزون لتحويل فكرتك إلى واقع</h2>
            </div>
            <div class="contact-wrapper">
                <form class="contact-form" action="https://forms.gyoom.sa/form/gAAAAABpUbnC1PlTiSUqDixSZ_iJjpQA1f1ZzCOCRfoJTcWouUXNy0JQwVdRmjdhOmsCokxgdtdI1d31K812WC3Ngei64tboxsbsf-oyPI4WeIvJH9WD-nmqdauy62RUQWwCwsQtwcXT" method="POST">
                    <!-- Honeypots (hidden from users, catches bots) -->
                    <input type="text" name="_gotcha" style="display:none !important" tabindex="-1" autocomplete="off">
                    <input type="text" name="website" style="display:none !important" tabindex="-1" autocomplete="off">
                    <input type="email" name="email_confirm" style="position:absolute;left:-9999px" tabindex="-1" autocomplete="off">
                    <!-- Timestamp for bot detection -->
                    <input type="hidden" name="_ts" id="_ts" value="">
                    <script>document.getElementById('_ts').value = Math.floor(Date.now()/1000);</script>
                    <input type="hidden" name="_form" value="waraqat-contact">
                    <input type="hidden" name="_next" value="https://waraqat.net/thanks.html">
                    <input type="hidden" name="_error" value="https://waraqat.net/error.html">
                    <div class="form-group">
                        <label for="name">الاسم</label>
                        <input type="text" id="name" name="name" placeholder="أدخل اسمك" required>
                    </div>
                    <div class="form-group">
                        <label for="email">البريد الإلكتروني</label>
                        <input type="email" id="email" name="email" placeholder="example@email.com" required>
                    </div>
                    <div class="form-group">
                        <label for="phone">رقم الجوال</label>
                        <input type="tel" id="phone" name="phone" placeholder="05XXXXXXXX">
                    </div>
                    <div class="form-group">
                        <label for="message">رسالتك</label>
                        <textarea id="message" name="message" placeholder="اكتب رسالتك هنا..." required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary btn-full">إرسال الرسالة</button>
                </form>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <img src="logo.png" alt="ورقات">
                    <span>ورقات</span>
                </div>
                <p>© <span id="year"></span> مجموعة ورقات. جميع الحقوق محفوظة</p>
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>
