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

type Plan = {
  name: string;
  subtitle: string;
  badge?: string;
  features: string[];
  cta: string;
};

const plans: Plan[] = [
  {
    name: 'پلن پایه',
    subtitle: 'برای مدارس کوچک',
    features: [
      'تعداد دانش‌آموز محدود',
      'مدیریت کلاس‌ها و درس‌ها',
      'برنامه هفتگی',
      'امتحان آنلاین پایه',
      'نمره‌دهی',
      'پیام‌رسانی محدود',
    ],
    cta: 'درخواست دمو',
  },
  {
    name: 'پلن حرفه‌ای',
    subtitle: 'برای مدارس متوسط',
    badge: 'محبوب‌ترین',
    features: [
      'دانش‌آموز بیشتر',
      'امتحان آنلاین کامل',
      'کارنامه ترمی و سالانه',
      'حضور و غیاب جلسه‌ای',
      'گزارش مدیریتی',
      'پیام‌رسانی کامل',
      'اطلاعات تماس پدر و مادر',
      'import/export CSV',
    ],
    cta: 'درخواست دمو',
  },
  {
    name: 'پلن سازمانی',
    subtitle: 'برای مدارس بزرگ یا مجموعه مدارس',
    features: [
      'ظرفیت بالا',
      'چند شعبه',
      'گزارش‌های پیشرفته',
      'کلاس آنلاین',
      'پیامک و کیف پول اختصاصی',
      'رأی‌گیری شورای دانش‌آموزی',
      'پشتیبانی ویژه',
      'تنظیمات اختصاصی',
      'قرارداد سفارشی',
    ],
    cta: 'مذاکره فروش',
  },
];

const modules = [
  ['bi-mortarboard', 'آموزشی', 'امتحانات، نمره‌دهی، کارنامه، برنامه هفتگی'],
  ['bi-people', 'مدیریتی', 'کاربران، دانش‌آموزان، معلمان، کلاس‌ها'],
  ['bi-chat-dots', 'ارتباطی', 'پیام‌رسانی، اطلاعیه، پیامک'],
  ['bi-check-circle', 'حضور و غیاب', 'ثبت جلسه‌ای، پیامک غیبت، گزارش'],
  ['bi-award', 'رأی‌گیری', 'شورای دانش‌آموزی، کاندیدا، نتایج'],
  ['bi-bar-chart', 'گزارش‌گیری', 'export CSV، داشبورد مدیریتی'],
];

export default function Pricing() {
  return (
    <div className="lp">
      <Head title="قیمت‌ها">
        <meta name="description" content="پلن‌ها و قیمت‌گذاری ماژولی دانشیار من برای مدارس؛ فعال‌سازی امکانات بر اساس license، module و permission." />
      </Head>

      <LandingHeader transparent topMode="light" />

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

      <section className="landing-section">
        <div className="section-copy">
          <p className="eyebrow">پلن‌های پیشنهادی</p>
          <h2>شروع ساده، رشد آسان</h2>
          <p>هر پلن قابل سفارشی‌سازی است. با مدیر کل هماهنگ می‌شود که دقیقا چه ماژول‌هایی فعال باشد.</p>
        </div>
        <div className="feature-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(270px, 1fr))' }}>
          {plans.map((plan) => (
            <article className="feature-card" key={plan.name} style={{ position: 'relative', padding: '1.75rem' }}>
              {plan.badge && (
                <span style={{
                  position: 'absolute', top: '1rem', left: '1rem',
                  background: 'var(--color-primary)', color: 'white',
                  borderRadius: '999px', fontSize: '0.75rem', fontWeight: 700,
                  padding: '0.25rem 0.75rem',
                }}>
                  {plan.badge}
                </span>
              )}
              <p className="eyebrow" style={{ marginBottom: '0.25rem' }}>{plan.name}</p>
              <p style={{ color: 'var(--color-text-muted)', marginBottom: '1.5rem', fontSize: '0.95rem' }}>{plan.subtitle}</p>
              <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 1.5rem' }}>
                {plan.features.map((f) => (
                  <li key={f} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.6rem', color: 'var(--color-text)' }}>
                    <i className="bi bi-check-circle-fill" style={{ color: 'var(--color-primary)', flexShrink: 0 }} />
                    {f}
                  </li>
                ))}
              </ul>
              <Link className="btn btn-soft" href="/contact" style={{ display: 'block', textAlign: 'center' }}>
                {plan.cta}
              </Link>
            </article>
          ))}
        </div>
      </section>

      <section className="landing-section process-section">
        <div className="section-copy">
          <p className="eyebrow">ماژول‌های قابل فروش</p>
          <h2>هر ماژول جداگانه فعال یا غیرفعال می‌شود</h2>
          <p>اگر مدرسه ماژولی نخریده باشد، هیچ کاربر آن مدرسه آن امکان را حتی در منو هم نمی‌بیند.</p>
        </div>
        <div className="process-grid">
          {modules.map(([icon, title, description]) => (
            <article className="process-card" key={title}>
              <span style={{ background: 'var(--color-primary-soft)', color: 'var(--color-primary-active)' }}>
                <i className={`bi ${icon}`} style={{ fontSize: '1.2rem' }} />
              </span>
              <h3 style={{ margin: '0.75rem 0 0.25rem' }}>{title}</h3>
              <p style={{ margin: 0 }}>{description}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="landing-cta">
        <div>
          <p className="eyebrow">پرداخت آنلاین بعدا</p>
          <h2>نسخه اول با تماس فروش و invoice دستی</h2>
          <p>درگاه آنلاین بعد از انتخاب payment gateway فعال می‌شود. الان از طریق تماس فروش اشتراک مدرسه فعال می‌شود.</p>
        </div>
        <Link className="btn btn-primary" href="/contact">تماس با تیم فروش</Link>
      </section>

      <LandingFooter />
    </div>
  );
}
