@extends("layouts.home")
@section("title")
    انضم إلينا | مركز د.حيدر عبد الشافي
@endsection

<!--       ثابت بالاعلى -->
@section("page-content")
<main class="section">


    <div class="icon-fixed--green">
        <img src="assets/img/Vector.png" alt="">
    </div>
    <div class="icon-fixed--right">
        <img src="assets/img/zzzzz2.png" alt="">
    </div>
    <div class="icon-fixed--bottom">
        <img src="assets/img/zzzzz3.png" alt="">
    </div>

    <section class="join-page" dir="rtl" id="join">
        <div class="container join-page__wrap" style="max-width:1100px;">

            <!-- Head -->
            <header class="join-head">
                <div class="join-crumb">
                    <a href="index.html">الرئيسية</a>
                    <span class="sep">›</span>
                    <span class="current">انضم إلينا</span>
                </div>

                <h1 class="join-title">انضم إلينا</h1>
                <p class="join-sub">
                    املأ النموذج أدناه وسنتواصل معك في أقرب وقت. يمكنك أيضًا التواصل معنا مباشرة عبر بيانات المؤسسة.
                </p>
            </header>

            <div class="row g-4">
                <!-- FORM -->
                <div class="col-lg-7">
                    <div class="join-card">
                        <h3 class="join-card__title">نموذج الانضمام</h3>

                        <form class="join-form" action="#" method="post">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">الاسم الكامل</label>
                                    <input type="text" class="form-control join-input" placeholder="اكتب اسمك" required>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">رقم الجوال</label>
                                    <input type="tel" class="form-control join-input" placeholder="+970..." required>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">البريد الإلكتروني</label>
                                    <input type="email" class="form-control join-input" placeholder="example@email.com" required>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">نوع الانضمام</label>
                                    <select class="form-select join-input" required>
                                        <option value="" selected disabled>اختر</option>
                                        <option>متطوع</option>
                                        <option>عضوية</option>
                                        <option>تدريب</option>
                                        <option>شراكة</option>
                                    </select>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">المجال/الاهتمام</label>
                                    <input type="text" class="form-control join-input" placeholder="مثال: إعلام، بحث، تدريب">
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">المدينة</label>
                                    <input type="text" class="form-control join-input" placeholder="غزة">
                                </div>

                                <div class="col-12">
                                    <label class="form-label">رسالة قصيرة</label>
                                    <textarea class="form-control join-input" rows="4" placeholder="اكتب رسالتك أو سبب الانضمام..." required></textarea>
                                </div>

                                <div class="col-12">
                                    <label class="form-label">مرفق (اختياري)</label>
                                    <input type="file" class="form-control join-file" accept=".pdf,.doc,.docx,.png,.jpg">
                                    <small class="join-hint">يفضل PDF — السيرة الذاتية أو أي ملف داعم.</small>
                                </div>

                                <div class="col-12 d-flex flex-wrap gap-2 align-items-center mt-2">
                                    <button type="submit" class="btn join-btn">
                                        <i class="bi bi-send"></i>
                                        إرسال الطلب
                                    </button>

                                    <button type="reset" class="btn join-btn-outline">
                                        <i class="bi bi-arrow-counterclockwise"></i>
                                        تفريغ
                                    </button>

                                    <div class="join-note ms-auto">
                                        <i class="bi bi-shield-check"></i>
                                        بياناتك محفوظة بسرية
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- CONTACT INFO -->
                <div class="col-lg-5">
                    <aside class="join-side">
                        <div class="join-side__head">
                            <h3 class="join-side__title">بيانات المؤسسة</h3>
                            <p class="join-side__sub">تواصل معنا مباشرة عبر القنوات التالية:</p>
                        </div>

                        <div class="info-list">
                            <a class="info-item" href="mailto:info@hccdps.com">
                                <span class="info-ic"><i class="bi bi-envelope"></i></span>
                                <span class="info-txt">
                <span class="info-k">البريد الإلكتروني</span>
                <span class="info-v">info@hccdps.com</span>
              </span>
                            </a>

                            <a class="info-item" href="tel:+97082860696">
                                <span class="info-ic"><i class="bi bi-telephone"></i></span>
                                <span class="info-txt">
                <span class="info-k">رقم الجوال</span>
                <span class="info-v">+(970) 82860696</span>
              </span>
                            </a>

                            <div class="info-item info-item--static">
                                <span class="info-ic"><i class="bi bi-geo-alt"></i></span>
                                <span class="info-txt">
                <span class="info-k">العنوان</span>
                <span class="info-v">
                  غزة - الميناء - شارع المؤسسات - عمارة أبو شعبان - الطابق الأول بجوار برج حجي
                </span>
              </span>
                            </div>
                        </div>

                        <div class="join-mini">
                            <div class="join-mini__title">ساعات العمل</div>
                            <div class="join-mini__row">
                                <span>السبت - الخميس</span>
                                <span>9:00 ص – 4:00 م</span>
                            </div>
                            <div class="join-mini__row">
                                <span>الجمعة</span>
                                <span>مغلق</span>
                            </div>
                        </div>

                        <div class="join-side__cta">
                            <a class="join-whatsapp" href="#">
                                <i class="bi bi-whatsapp"></i>
                                تواصل واتساب
                            </a>
                        </div>

                        <!-- decor -->
                        <span class="join-decor join-decor--r"></span>
                        <span class="join-decor join-decor--l"></span>
                    </aside>
                </div>
            </div>

        </div>
    </section>





</main>
@endsection