<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>فراخوان و ارسال اثر | انتشارات آزادی قلم</title>
  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- فونت وزیرمتن جهت نمایش خوانا و استاندارد فارسی -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/misc/Farsi-Digits/font-face-FD.css" />
  <style>
    body {
      font-family: 'Vazirmatn FD', system-ui, -apple-system, sans-serif;
    }
  </style>
</head>
<body class="bg-slate-50 text-slate-800 antialiased selection:bg-amber-100 selection:text-amber-900">

  <!-- هدر و بنر معرفی -->
  <header class="bg-gradient-to-l from-slate-900 via-indigo-950 to-slate-900 text-white py-16 px-4 sm:px-6 relative overflow-hidden border-b-4 border-amber-500">
    <div class="max-w-4xl mx-auto text-center relative z-10">
      <span class="inline-block px-3.5 py-1 rounded-full text-xs font-semibold bg-amber-500/20 text-amber-300 border border-amber-400/30 mb-4">
        فراخوان پذیرش و داوری آثار
      </span>
      <h1 class="text-3xl sm:text-5xl font-extrabold tracking-tight mb-4">
        انتشارات آزادی قلم
      </h1>
      <p class="text-base sm:text-lg text-slate-300 max-w-2xl mx-auto leading-relaxed">
        «کلمه، سرآغاز اندیشه و جاودانگی است.» همگام با نویسندگان، پژوهشگران و مترجمان گران‌قدر برای نشر آثاری تأثیرگذار، علمی و ماندگار.
      </p>
    </div>
  </header>

  <main class="max-w-4xl mx-auto px-4 sm:px-6 py-10 space-y-12">

    <!-- راهنمای گام‌به‌گام مراحل داوری -->
    <section class="bg-white p-6 sm:p-8 rounded-2xl shadow-sm border border-slate-200">
      <h2 class="text-xl font-bold text-slate-900 mb-6 flex items-center gap-2">
        <svg class="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        فرآیند ارزیابی آثار در شورای نشر
      </h2>

      <div class="grid grid-cols-1 sm:grid-cols-4 gap-4 text-center">
        <div class="p-4 rounded-xl bg-slate-50 border border-slate-100">
          <div class="w-9 h-9 rounded-full bg-indigo-100 text-indigo-700 font-bold flex items-center justify-center mx-auto mb-2 text-sm">۱</div>
          <h3 class="font-bold text-slate-800 text-sm mb-1">ارسال اثر</h3>
          <p class="text-xs text-slate-500">تکمیل فرم آنلاین و بارگذاری دست‌نوشته یا طرح</p>
        </div>

        <div class="p-4 rounded-xl bg-slate-50 border border-slate-100">
          <div class="w-9 h-9 rounded-full bg-indigo-100 text-indigo-700 font-bold flex items-center justify-center mx-auto mb-2 text-sm">۲</div>
          <h3 class="font-bold text-slate-800 text-sm mb-1">غربالگری اولیه</h3>
          <p class="text-xs text-slate-500">بررسی ساختار و انطباق با سیاست‌های نشر (۷ روز)</p>
        </div>

        <div class="p-4 rounded-xl bg-slate-50 border border-slate-100">
          <div class="w-9 h-9 rounded-full bg-indigo-100 text-indigo-700 font-bold flex items-center justify-center mx-auto mb-2 text-sm">۳</div>
          <h3 class="font-bold text-slate-800 text-sm mb-1">داوری تخصصی</h3>
          <p class="text-xs text-slate-500">ارزیابی محتوایی توسط شورای علمی نشر (۳ هفته)</p>
        </div>

        <div class="p-4 rounded-xl bg-slate-50 border border-slate-100">
          <div class="w-9 h-9 rounded-full bg-amber-100 text-amber-800 font-bold flex items-center justify-center mx-auto mb-2 text-sm">۴</div>
          <h3 class="font-bold text-slate-800 text-sm mb-1">عقد قرارداد</h3>
          <p class="text-xs text-slate-500">اعلام نتیجه، توافق حقوقی و آغاز مراحل نشر</p>
        </div>
      </div>
    </section>

    <!-- پیام موفقیت پس از ثبت فرم -->
    <div id="successNotice" class="hidden p-6 rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-800 text-center space-y-2">
      <div class="w-12 h-12 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto text-2xl font-bold">✓</div>
      <h3 class="text-lg font-bold">اثـر شما با موفقیت ثبت شد</h3>
      <p class="text-sm text-emerald-700">کد رهگیری اثر شما به شماره موبایل وارد شده پیامک خواهد شد و نتیجه غربالگری اولیه ظرف ۷ روز کاری اعلام می‌گردد.</p>
    </div>

    <!-- فرم اصلی ثبت اثر -->
    <form id="submissionForm" class="bg-white p-6 sm:p-10 rounded-2xl shadow-sm border border-slate-200 space-y-8" enctype="multipart/form-data">
      
      <!-- بخش اول: مشخصات مؤلف/مترجم -->
      <div>
        <h3 class="text-lg font-bold text-slate-900 pb-3 mb-5 border-b border-slate-100 flex items-center gap-2">
          <span class="w-2.5 h-2.5 rounded-full bg-amber-500"></span>
          ۱. اطلاعات صاحب اثر
        </h3>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
          <div>
            <label class="block text-sm font-semibold text-slate-700 mb-2">نام و نام خانوادگی <span class="text-rose-500">*</span></label>
            <input type="text" required placeholder="مثال: دکتر سارا علوی" class="w-full px-4 py-2.5 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-indigo-600/30 focus:border-indigo-600 text-sm" />
          </div>

          <div>
            <label class="block text-sm font-semibold text-slate-700 mb-2">کد ملی <span class="text-rose-500">*</span></label>
            <input type="text" required pattern="[0-9]{10}" placeholder="۱۰ رقم بدون خط تیره" class="w-full px-4 py-2.5 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-indigo-600/30 focus:border-indigo-600 text-sm" />
          </div>

          <div>
            <label class="block text-sm font-semibold text-slate-700 mb-2">شماره تماس همراه (فعال در ایتا/بله/تلگرام) <span class="text-rose-500">*</span></label>
            <input type="tel" required placeholder="۰۹۱۲..." class="w-full px-4 py-2.5 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-indigo-600/30 focus:border-indigo-600 text-sm" />
          </div>

          <div>
            <label class="block text-sm font-semibold text-slate-700 mb-2">پست الکترونیکی (ایمیل) <span class="text-rose-500">*</span></label>
            <input type="email" required placeholder="example@email.com" class="w-full px-4 py-2.5 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-indigo-600/30 focus:border-indigo-600 text-sm text-left" dir="ltr" />
          </div>

          <div class="sm:col-span-2">
            <label class="block text-sm font-semibold text-slate-700 mb-2">مدرک تحصیلی و رشته تخصصی</label>
            <input type="text" placeholder="مثال: کارشناسی ارشد روان‌شناسی تربیتی" class="w-full px-4 py-2.5 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-indigo-600/30 focus:border-indigo-600 text-sm" />
          </div>
        </div>
      </div>

      <!-- بخش دوم: مشخصات اثر -->
      <div>
        <h3 class="text-lg font-bold text-slate-900 pb-3 mb-5 border-b border-slate-100 flex items-center gap-2">
          <span class="w-2.5 h-2.5 rounded-full bg-amber-500"></span>
          ۲. مشخصات و ساختار اثر
        </h3>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
          <div class="sm:col-span-2">
            <label class="block text-sm font-semibold text-slate-700 mb-2">عنوان پیشنهادی کتاب <span class="text-rose-500">*</span></label>
            <input type="text" required placeholder="عنوان کامل و دقیق اثر" class="w-full px-4 py-2.5 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-indigo-600/30 focus:border-indigo-600 text-sm" />
          </div>

          <div>
            <label class="block text-sm font-semibold text-slate-700 mb-2">نوع پدیدآوری <span class="text-rose-500">*</span></label>
            <select required class="w-full px-4 py-2.5 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-indigo-600/30 focus:border-indigo-600 text-sm bg-white">
              <option value="">انتخاب کنید...</option>
              <option value="author">تألیف</option>
              <option value="translate">ترجمه</option>
              <option value="compile">گردآوری و تدوین علمی</option>
            </select>
          </div>

          <div>
            <label class="block text-sm font-semibold text-slate-700 mb-2">حوزه موضوعی <span class="text-rose-500">*</span></label>
            <select required class="w-full px-4 py-2.5 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-indigo-600/30 focus:border-indigo-600 text-sm bg-white">
              <option value="">انتخاب حوزه...</option>
              <option value="education">علوم تربیتی، آموزش و پرورش و خانواده</option>
              <option value="psychology">روان‌شناسی و مشاوره</option>
              <option value="sociology">جامعه‌شناسی و علوم اجتماعی</option>
              <option value="literature">ادبیات داستانی، نقد و شعر</option>
              <option value="child">کودک، نوجوان و مهارتی</option>
              <option value="academic">پژوهش‌های دانشگاهی و تخصصی</option>
            </select>
          </div>

          <div>
            <label class="block text-sm font-semibold text-slate-700 mb-2">تعداد تقریبی صفحات یا واژگان</label>
            <input type="number" placeholder="مثال: ۲۵۰ صفحه" class="w-full px-4 py-2.5 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-indigo-600/30 focus:border-indigo-600 text-sm" />
          </div>

          <div>
            <label class="block text-sm font-semibold text-slate-700 mb-2">مخاطب هدف کتاب</label>
            <input type="text" placeholder="مثال: دانشجویان، معلمان، والدین یا عموم" class="w-full px-4 py-2.5 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-indigo-600/30 focus:border-indigo-600 text-sm" />
          </div>

          <div class="sm:col-span-2">
            <label class="block text-sm font-semibold text-slate-700 mb-2">
              خلاصه اثر، هدف نگارش و تمایز آن با کتب موجود (حداکثر ۲۵۰ کلمه) <span class="text-rose-500">*</span>
            </label>
            <textarea required rows="4" placeholder="توضیح دهید این کتاب چه مسئله‌ای را حل می‌کند و چرا شایسته چاپ است..." class="w-full px-4 py-2.5 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-indigo-600/30 focus:border-indigo-600 text-sm leading-relaxed"></textarea>
          </div>
        </div>
      </div>

      <!-- بخش سوم: فایل‌ها -->
      <div>
        <h3 class="text-lg font-bold text-slate-900 pb-3 mb-5 border-b border-slate-100 flex items-center gap-2">
          <span class="w-2.5 h-2.5 rounded-full bg-amber-500"></span>
          ۳. بارگذاری فایل اثر و مدارک
        </h3>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
          <div class="p-4 rounded-xl border-2 border-dashed border-slate-300 hover:border-indigo-500 bg-slate-50 text-center transition">
            <label class="cursor-pointer block">
              <span class="block text-sm font-semibold text-slate-800 mb-1">فایل پروپوزال / فصل اول + فهرست <span class="text-rose-500">*</span></span>
              <span class="block text-xs text-slate-500 mb-3">فرمت مجاز: PDF یا Word (حداکثر ۲۵ مگابایت)</span>
              <input type="file" required accept=".pdf,.doc,.docx" class="text-xs text-slate-600 file:ml-2 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100" />
            </label>
          </div>

          <div class="p-4 rounded-xl border-2 border-dashed border-slate-300 hover:border-indigo-500 bg-slate-50 text-center transition">
            <label class="cursor-pointer block">
              <span class="block text-sm font-semibold text-slate-800 mb-1">رزومه یا سوابق نویسنده (اختیاری)</span>
              <span class="block text-xs text-slate-500 mb-3">فرمت مجاز: PDF (حداکثر ۵ مگابایت)</span>
              <input type="file" accept=".pdf" class="text-xs text-slate-600 file:ml-2 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-slate-200 file:text-slate-800 hover:file:bg-slate-300" />
            </label>
          </div>
        </div>
      </div>

      <!-- تعهدنامه حقوقی و تایید -->
      <div class="flex items-start gap-3 pt-2">
        <input id="terms" type="checkbox" required class="mt-1 w-4 h-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
        <label for="terms" class="text-xs leading-relaxed text-slate-600 select-none">
          تأیید می‌نمایم که اثر ارسالی متعلق به اینجانب بوده و هرگونه حقوق مادی و معنوی مؤلفان و مترجمان در آن رعایت گردیده است. همچنین می‌دانم انتشارات آزادی قلم فایل ارسالی را به صورت محرمانه تنها برای ارزیابی داوری استفاده می‌نماید.
        </label>
      </div>

      <!-- دکمه ثبت نهایی -->
      <div class="pt-4 text-center">
        <button type="submit" class="w-full sm:w-auto px-10 py-3.5 rounded-xl bg-indigo-700 hover:bg-indigo-800 text-white font-bold text-sm shadow-lg shadow-indigo-600/20 transition-all active:scale-[0.98]">
          ثبت و ارسال نهایی اثر جهت داوری
        </button>
      </div>

    </form>

    <!-- بخش پرسش‌های متداول (FAQ) -->
    <section class="bg-white p-6 sm:p-8 rounded-2xl shadow-sm border border-slate-200">
      <h3 class="text-lg font-bold text-slate-900 mb-4">پرسش‌های متداول نویسندگان</h3>
      <div class="space-y-4 text-sm text-slate-600">
        <div class="p-3 bg-slate-50 rounded-xl">
          <p class="font-bold text-slate-800 mb-1">آیا ارسال دست‌نوشته و داوری اولیه مشمول هزینه است؟</p>
          <p class="text-xs text-slate-500">خیر، کلیه مراحل ارزیابی اولیه و اعلام نظر شورای داوری کاملاً رایگان است.</p>
        </div>
        <div class="p-3 bg-slate-50 rounded-xl">
          <p class="font-bold text-slate-800 mb-1">در صورت پذیرش اثر، نحوه همکاری چگونه خواهد بود؟</p>
          <p class="text-xs text-slate-500">متناسب با سطح علمی، ظرفیت بازار و توافق طرفین، در قالب سرمایه‌گذاری انتشارات، چاپ مشارکتی یا قرارداد حق‌التألیف توافق خواهد شد.</p>
        </div>
      </div>
    </section>

  </main>

  <!-- فوتر ساده و مشخصات تماس -->
  <footer class="text-center py-6 text-xs text-slate-400 border-t border-slate-200 bg-white">
    <p>کلیه حقوق برای انتشارات «آزادی قلم» محفوظ است.</p>
  </footer>

  <!-- اسکریپت ساده جهت مدیریت ارسال فرم -->
  <script>
    const form = document.getElementById('submissionForm');
    const notice = document.getElementById('successNotice');

    form.addEventListener('submit', function (e) {
      e.preventDefault();
      // در حالت واقعی با fetch به سرور یا وردپرس (مثلاً Admin AJAX یا REST API) ارسال می‌شود
      form.classList.add('hidden');
      notice.classList.remove('hidden');
      window.scrollTo({ top: notice.offsetTop - 80, behavior: 'smooth' });
    });
  </script>

</body>
</html>