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

type FaqItem = { q: string; a: string };

const faqs: FaqItem[] = [
  {
    q: 'آیا دانشیار من برای همه پایه‌ها قابل استفاده است؟',
    a: 'بله. مدیر کل سامانه می‌تواند برای هر مدرسه مشخص کند چه پایه‌هایی فعال باشند. مثلا مدرسه‌ای فقط پایه ۱ تا ۶ داشته باشد و دیگری پایه ۷ تا ۱۲.',
  },
  {
    q: 'آیا امتحان آنلاین زمان‌دار دارد؟',
    a: 'بله. امتحان آنلاین تایمر دارد و مدت زمان سمت server کنترل می‌شود. بعد از پایان زمان، ارسال پاسخ جدید مجاز نیست.',
  },
  {
    q: 'آیا مدرسه می‌تواند اطلاعات تماس پدر و مادر دانش‌آموز را ثبت کند؟',
    a: 'بله. شماره موبایل پدر، موبایل مادر، شماره خانه و آدرس در پرونده دانش‌آموز قابل ثبت است. پنل جداگانه‌ای برای خانواده وجود ندارد.',
  },
  {
    q: 'آیا مدرسه می‌تواند کاربران خودش را بسازد؟',
    a: 'بله. Owner یا معاون مجاز می‌تواند دانش‌آموز، معلم، معاون و کارمند پشتیبانی بسازد. رمز اولیه موقت تولید می‌شود و کاربر در اولین ورود مجبور به تغییر رمز است.',
  },
  {
    q: 'آیا اطلاعات هر مدرسه جداست؟',
    a: 'بله. سیستم multi-school است. هر کاربر فقط داده مدرسه خودش را می‌بیند. حتی اگر ID دستی در URL تغییر کند، سیستم دسترسی را رد می‌کند.',
  },
  {
    q: 'آیا سیستم تاریخ شمسی دارد؟',
    a: 'بله. همه تاریخ‌ها در UI به صورت شمسی نمایش داده می‌شوند. ورودی‌ها نیز شمسی گرفته می‌شوند و تبدیل به Gregorian برای ذخیره در دیتابیس انجام می‌شود.',
  },
  {
    q: 'آیا امکان import دانش‌آموزان از Excel وجود دارد؟',
    a: 'بله. می‌توان از فایل CSV template اختصاصی برای import گروهی دانش‌آموزان استفاده کرد. قبل از import، preview و validation نمایش داده می‌شود و ردیف‌های خطادار جدا نشان داده می‌شوند.',
  },
  {
    q: 'آیا تغییر نمره‌ها log دارد؟',
    a: 'بله. هر تغییر نمره شامل کاربر تغییردهنده، نمره قبلی، نمره جدید، دلیل تغییر، زمان و IP address log می‌شود. این log توسط مدیر کل سامانه و owner قابل مشاهده است.',
  },
  {
    q: 'آیا پیامک برای همه مدارس فعال است؟',
    a: 'خیر. پیامک یک ماژول جداگانه است که باید برای مدرسه خریداری و فعال شود. هر مدرسه کیف پول پیامک مستقل دارد و کسر موجودی به ازای هر پیامک موفق انجام می‌شود.',
  },
  {
    q: 'آیا رأی‌گیری شورای دانش‌آموزی داخل سیستم است؟',
    a: 'بله اما به عنوان ماژول قابل فروش. اگر مدرسه این ماژول را نخریده باشد، هیچ کاربری حتی منوی رأی‌گیری را نمی‌بیند. Owner می‌تواند کاندیداها را تعریف کند، زمان رأی‌گیری را مشخص کند و نتایج را ببیند.',
  },
];

export default function Faq() {
  const [open, setOpen] = useState<number | null>(null);

  return (
    <div className="lp">
      <Head title="سوالات متداول">
        <meta name="description" content="سوالات متداول دانشیار من درباره پیامک، رأی‌گیری، پایه‌های مجاز، permission و خرید ماژول مدرسه." />
      </Head>

      <LandingHeader transparent topMode="light" />

      <section className="hero-section" style={{ gridTemplateColumns: '1fr' }}>
        <div className="hero-copy" style={{ maxWidth: 720 }}>
          <p className="eyebrow">سوالات متداول</p>
          <h1>قبل از خرید و راه‌اندازی</h1>
          <p>قوانین محصول شفاف هستند: ماژول‌ها فروخته می‌شوند، permissionها کنترل می‌شوند و UI فقط امکانات فعال را نشان می‌دهد.</p>
        </div>
      </section>

      <section className="landing-section" style={{ maxWidth: 820, margin: '0 auto', paddingBottom: '4rem' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
          {faqs.map((item, idx) => (
            <article
              key={idx}
              className="feature-card"
              style={{ padding: '1.25rem', cursor: 'pointer' }}
              onClick={() => setOpen(open === idx ? null : idx)}
            >
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '1rem' }}>
                <strong style={{ fontSize: '1rem' }}>{item.q}</strong>
                <i
                  className={`bi bi-chevron-${open === idx ? 'up' : 'down'}`}
                  style={{ color: 'var(--color-primary)', flexShrink: 0 }}
                />
              </div>
              {open === idx && (
                <p style={{ marginTop: '0.75rem', marginBottom: 0, color: 'var(--color-text-muted)', lineHeight: 2 }}>
                  {item.a}
                </p>
              )}
            </article>
          ))}
        </div>
      </section>

      <section className="landing-cta">
        <div>
          <p className="eyebrow">هنوز سوال دارید؟</p>
          <h2>با تیم دانشیار من تماس بگیرید</h2>
          <p>درخواست دمو ارسال کنید تا سیستم را برای مدرسه شما نشان دهیم.</p>
        </div>
        <Link className="btn btn-primary" href="/contact">درخواست دمو</Link>
      </section>

      <LandingFooter />
    </div>
  );
}
