import { Head, Link } from '@inertiajs/react';
import { LandingHeader } from '@/Components/Layout/LandingHeader';

const featureGroups = [
  {
    icon: 'bi-mortarboard',
    title: 'مدیریت آموزشی',
    description: 'ساختار کامل مدرسه از پایه و کلاس تا درس و برنامه هفتگی.',
    items: ['دانش‌آموزان و پرونده تحصیلی', 'معلمان و درس‌های تدریس‌شده', 'پایه‌ها، کلاس‌ها و درس‌ها', 'برنامه هفتگی مدرسه', 'اطلاعات تماس والدین', 'ورود گروهی اطلاعات با CSV'],
  },
  {
    icon: 'bi-ui-checks-grid',
    title: 'امتحان و نمره‌دهی',
    description: 'فرایند یکپارچه طراحی امتحان، شرکت دانش‌آموز و ثبت نتیجه.',
    items: ['امتحان آنلاین زمان‌دار', 'بانک و مدیریت سوالات', 'ذخیره پاسخ حین آزمون', 'ثبت و ویرایش نمرات', 'تایید یا رد نمره‌ها', 'کارنامه PDF و تاریخچه تغییرات'],
  },
  {
    icon: 'bi-calendar2-check',
    title: 'حضور و غیاب',
    description: 'ثبت دقیق وضعیت هر جلسه و اطلاع‌رسانی سریع به خانواده‌ها.',
    items: ['حضور و غیاب جلسه‌ای', 'درخواست و تایید اصلاح حضور', 'ارسال پیامک غیبت', 'گزارش غیبت دانش‌آموز', 'فیلتر بر اساس کلاس و تاریخ', 'خروجی اطلاعات حضور و غیاب'],
  },
  {
    icon: 'bi-chat-dots',
    title: 'ارتباطات مدرسه',
    description: 'همه ابزارهای ارتباطی مدرسه در یک مسیر روشن و قابل پیگیری.',
    items: ['پیام‌رسانی داخلی', 'اطلاعیه‌های مدرسه', 'ارسال پیامک گروهی', 'قالب‌های آماده پیامک', 'کیف پول پیامک مستقل', 'سوابق ارسال و مصرف پیامک'],
  },
  {
    icon: 'bi-camera-video',
    title: 'کلاس و محتوای آنلاین',
    description: 'ادامه آموزش خارج از کلاس با ابزارهای ساده و در دسترس.',
    items: ['ساخت و مدیریت کلاس آنلاین', 'لینک ورود اختصاصی دانش‌آموز', 'گزارش ورود به کلاس', 'تکلیف و تحویل پاسخ', 'فایل‌های آموزشی مدرسه', 'دسترسی کنترل‌شده به محتوا'],
  },
  {
    icon: 'bi-award',
    title: 'شورای دانش‌آموزی',
    description: 'برگزاری رأی‌گیری شفاف با کنترل کامل افراد و زمان انتخابات.',
    items: ['ساخت دوره رأی‌گیری', 'مدیریت کاندیداها', 'تعیین پایه و کلاس مجاز', 'زمان شروع و پایان', 'جلوگیری از رأی تکراری', 'نتایج و خروجی رأی‌گیری'],
  },
  {
    icon: 'bi-bar-chart-line',
    title: 'گزارش و انتقال اطلاعات',
    description: 'داده‌های مدرسه همیشه قابل بررسی، دریافت و انتقال هستند.',
    items: ['داشبورد مدیریتی', 'گزارش فعالیت کاربران', 'خروجی CSV و Excel', 'ورود گروهی دانش‌آموز و معلم', 'خروجی کامل اطلاعات مدرسه', 'گزارش‌های مدیریتی و آماری'],
  },
  {
    icon: 'bi-shield-check',
    title: 'امنیت و دسترسی',
    description: 'هر شخص فقط اطلاعات و ابزارهایی را می‌بیند که برای نقش او مجاز است.',
    items: ['نقش‌های مدیر، معاون، معلم و دانش‌آموز', 'سطح دسترسی جزئی برای معاون', 'جداسازی کامل اطلاعات مدارس', 'ثبت رویدادها و Audit Log', 'کنترل ماژول‌های خریداری‌شده', 'تاریخ شمسی و نسخه PWA موبایل'],
  },
] as const;

export default function Features() {
  return (
    <div className="landing-page feature-catalog-page">
      <Head title="امکانات">
        <meta name="description" content="فهرست کامل امکانات سامانه مدیریت مدرسه دانشیار من؛ آموزش، امتحان، نمره، حضور و غیاب، پیامک، گزارش و رأی‌گیری." />
      </Head>

      <LandingHeader />

      <section className="feature-catalog-hero">
        <span className="feature-catalog-kicker">امکانات دانشیار من</span>
        <h1>تمام ابزارهای مدرسه، در یک پنل یکپارچه</h1>
        <p>امکانات به‌صورت ماژولی فعال می‌شوند؛ هر مدرسه فقط ابزارهایی را دریافت می‌کند که واقعاً به آن‌ها نیاز دارد.</p>
        <div className="feature-catalog-actions">
          <Link href="/contact" className="btn btn-primary">درخواست دمو</Link>
          <Link href="/pricing" className="btn btn-ghost">مشاهده پلن‌ها</Link>
        </div>
      </section>

      <main className="feature-catalog-main">
        <div className="feature-catalog-intro">
          <span>۸ بخش اصلی</span>
          <h2>از کار روزانه تا گزارش مدیریتی</h2>
          <p>این فهرست بر اساس قابلیت‌های واقعی سامانه تنظیم شده است، نه امکانات نمایشی یا وعده‌های آینده.</p>
        </div>

        <div className="feature-catalog-grid">
          {featureGroups.map((group) => (
            <article className="feature-catalog-card" key={group.title}>
              <div className="feature-catalog-card-head">
                <span className="feature-catalog-icon"><i className={`bi ${group.icon}`} /></span>
                <div>
                  <h2>{group.title}</h2>
                  <p>{group.description}</p>
                </div>
              </div>
              <ul>
                {group.items.map((item) => (
                  <li key={item}><i className="bi bi-check2" />{item}</li>
                ))}
              </ul>
            </article>
          ))}
        </div>
      </main>

      <section className="feature-catalog-cta">
        <div>
          <span>برای مدرسه شما</span>
          <h2>پنل را با امکانات موردنیازتان ببینید</h2>
          <p>در جلسه دمو، مسیر واقعی کار مدیر، معاون، معلم و دانش‌آموز را نمایش می‌دهیم.</p>
        </div>
        <Link href="/contact" className="btn btn-primary">درخواست دمو</Link>
      </section>

      <footer className="landing-footer">
        <div>
          <Link href="/" className="feature-footer-brand">دانشیار من</Link>
          <p>اتوماسیون یکپارچه و قابل توسعه برای مدارس ایران.</p>
        </div>
        <div className="footer-links">
          <Link href="/">خانه</Link>
          <Link href="/pricing">پلن‌ها</Link>
          <Link href="/faq">سوالات متداول</Link>
          <Link href="/contact">تماس</Link>
        </div>
      </footer>
    </div>
  );
}
