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

/* ── Motion presets (skill: ease-out enter, spring for cards) ── */
const eO   = 'easeOut' as const;
const eIO  = 'easeInOut' as const;
const fadeUp  = { hidden: { opacity: 0, y: 24 }, show: { opacity: 1, y: 0 } };
const stagger = { hidden: {}, show: { transition: { staggerChildren: 0.08 } } };

const features = [
  { icon: 'bi-mortarboard',            color: 'green',  title: 'مدیریت آموزشی',    desc: 'دانش‌آموز، معلم، کلاس، پایه، درس و برنامه هفتگی در یک پنل منظم.' },
  { icon: 'bi-ui-checks-grid',         color: 'blue',   title: 'امتحان و نمره‌دهی', desc: 'امتحان آنلاین، ثبت نمره، تایید نمره و audit log کامل تغییرات.' },
  { icon: 'bi-chat-dots',              color: 'amber',  title: 'SMS و پیام‌رسانی',  desc: 'اطلاعیه، پیام مهم، SMS غیبت و کیف پول اختصاصی هر مدرسه.' },
  { icon: 'bi-award',                  color: 'purple', title: 'شورای دانش‌آموزی', desc: 'رأی‌گیری با کاندیدا، پایه/کلاس مجاز و خروجی نتایج قابل ارائه.' },
  { icon: 'bi-person-badge',           color: 'red',    title: 'مدیریت کاربران',   desc: 'نقش‌های مجزا برای owner، معاون، معلم و دانش‌آموز با permission دقیق.' },
  { icon: 'bi-file-earmark-bar-graph', color: 'teal',   title: 'گزارش و Export',   desc: 'کارنامه PDF، export CSV، گزارش غیبت و آمار فعالیت کاربران.' },
] as const;

const steps = [
  { num: '1', icon: 'bi-key',        title: 'خرید License',   desc: 'Super Admin مدرسه، owner، پایه‌ها و ماژول‌های مجاز را فعال می‌کند.' },
  { num: '2', icon: 'bi-gear',       title: 'راه‌اندازی',      desc: 'Owner دانش‌آموزان، معلمان و کلاس‌ها را با فرم یا فایل CSV وارد می‌کند.' },
  { num: '3', icon: 'bi-check2-all', title: 'استفاده روزانه', desc: 'هر نقش فقط امکانات مجاز خودش را در پنل می‌بیند و استفاده می‌کند.' },
] as const;

const testimonials = [
  {
    quote: 'دانشیار من مدیریت مدرسه را برای ما متحول کرد. ثبت نمرات که قبلاً سه روز وقت می‌گرفت، حالا در چند دقیقه انجام می‌شود.',
    name: 'احمد رضایی', role: 'مدیر دبیرستان', school: 'دبیرستان شهید مطهری، تهران', initials: 'ا.ر', color: '#0EA678',
  },
  {
    quote: 'سامانه SMS غیبت باعث شد والدین همیشه در جریان باشند. تعداد شکایات به شدت کاهش یافت و اعتماد خانواده‌ها بیشتر شد.',
    name: 'مریم حسینی', role: 'معاون آموزشی', school: 'مجتمع آموزشی رازی، اصفهان', initials: 'م.ح', color: '#3B82F6',
  },
  {
    quote: 'رأی‌گیری شورای دانش‌آموزی که یک هفته طول می‌کشید، با این سامانه در یک روز تمام شد. همه دانش‌آموزان راضی بودند.',
    name: 'کریم محمدی', role: 'مدیر آموزشگاه', school: 'آموزشگاه نور، مشهد', initials: 'ک.م', color: '#8B5CF6',
  },
] as const;

const logos = [
  'دبیرستان مطهری', 'مجتمع رازی', 'آموزشگاه نور',
  'دبیرستان علامه', 'مدرسه فاطمیه', 'آموزشگاه دانش',
];

function WaveDown({ fill }: { fill: string }) {
  return (
    <div className="lp-wave-wrap" aria-hidden="true">
      <svg viewBox="0 0 1440 80" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M0,0 C360,80 1080,0 1440,60 L1440,80 L0,80 Z" fill={fill} />
      </svg>
    </div>
  );
}

function WaveUp({ fill }: { fill: string }) {
  return (
    <div className="lp-wave-wrap lp-wave-wrap--top" aria-hidden="true">
      <svg viewBox="0 0 1440 80" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M0,80 C360,0 1080,80 1440,20 L1440,0 L0,0 Z" fill={fill} />
      </svg>
    </div>
  );
}

export default function Home() {
  return (
    <div className="lp">
      <Head title="خانه">
        <meta name="description" content="دانشیار من؛ هوشمندترین پنل مدیریت مدرسه — امتحان، نمره، SMS و رأی‌گیری در یک سامانه فارسی." />
        {/* skill: Poppins (SaaS heading font) + Inter (numerics) + Vazirmatn (Persian body) */}
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800;900&family=Inter:wght@600;700;800;900&display=swap" rel="stylesheet" />
      </Head>

      <LandingHeader transparent />

      {/* ══════════════════════════════════ HERO ══════════════════════════════════ */}
      <section className="lp-hero">
        <div className="lp-glow lp-glow--green" aria-hidden="true" />

        <div className="lp-hero-inner">
          {/* Text side */}
          <motion.div
            className="lp-hero-text"
            variants={stagger}
            initial="hidden"
            animate="show"
          >
            <motion.div variants={fadeUp} transition={{ duration: 0.5, ease: eO }}>
              <span className="lp-pill">
                <span className="lp-pill-dot" />
                پلتفرم مدیریت مدارس ایران
              </span>
            </motion.div>

            <motion.h1 className="lp-hero-h1" variants={fadeUp} transition={{ duration: 0.6, ease: eO }}>
              هوشمندترین پنل<br />
              <span className="lp-hero-accent">مدیریت مدرسه</span>
            </motion.h1>

            <motion.p className="lp-hero-sub" variants={fadeUp} transition={{ duration: 0.55, ease: eO }}>
              دانش‌آموز، معلم، امتحان، نمره، حضور و غیاب، پیامک و رأی‌گیری —
              همه در یک پنل فارسی یکپارچه.
            </motion.p>

            <motion.div className="lp-hero-actions" variants={fadeUp} transition={{ duration: 0.55, ease: eO }}>
              <Link href="/contact" className="lp-btn lp-btn--primary lp-btn--lg">
                <i className="bi bi-rocket-takeoff-fill" />
                درخواست دمو رایگان
              </Link>
              <Link href="/pricing" className="lp-btn lp-btn--glass lp-btn--lg">
                مشاهده پلن‌ها
                <i className="bi bi-arrow-left" />
              </Link>
            </motion.div>

            <motion.div className="lp-hero-badges" variants={fadeUp} transition={{ duration: 0.5, ease: eO }}>
              {[
                ['bi-shield-check-fill', 'امنیت کامل'],
                ['bi-phone-fill',        'PWA موبایل'],
                ['bi-calendar-heart',    'تاریخ شمسی'],
                ['bi-buildings',         'چند مدرسه'],
              ].map(([ic, label]) => (
                <span key={label} className="lp-badge">
                  <i className={`bi ${ic}`} />{label}
                </span>
              ))}
            </motion.div>
          </motion.div>

          {/* Visual side — spring entrance, subtle float (skill: 3px / 8s, not distracting) */}
          <motion.div
            className="lp-hero-visual"
            aria-hidden="true"
            initial={{ opacity: 0, scale: 0.94, y: 20 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            transition={{ type: 'spring', stiffness: 220, damping: 28, delay: 0.28 }}
          >
            <div className="lp-card-main">
              <div className="lp-card-topbar">
                <span className="lp-dot lp-dot--red" />
                <span className="lp-dot lp-dot--yellow" />
                <span className="lp-dot lp-dot--green" />
                <span className="lp-card-title">داشبورد مدرسه</span>
              </div>
              <div className="lp-card-stats">
                {[
                  ['دانش‌آموزان', '1,240'],
                  ['معلمان',      '48'],
                  ['کلاس‌ها',     '32'],
                  ['SMS باقی',    '3,500'],
                ].map(([label, val]) => (
                  <div key={label} className="lp-card-stat">
                    <span>{label}</span>
                    <strong className="lp-num">{val}</strong>
                  </div>
                ))}
              </div>
              <div className="lp-card-progress">
                <div className="lp-card-progress-row">
                  <span>حضور امروز</span><span className="lp-num">82%</span>
                </div>
                <div className="lp-card-track">
                  <motion.div
                    className="lp-card-fill"
                    initial={{ width: '0%' }}
                    animate={{ width: '82%' }}
                    transition={{ duration: 1.2, delay: 1.0, ease: eO }}
                  />
                </div>
              </div>
              <div className="lp-card-progress">
                <div className="lp-card-progress-row">
                  <span>تکالیف تحویلی</span><span className="lp-num">67%</span>
                </div>
                <div className="lp-card-track">
                  <motion.div
                    className="lp-card-fill lp-card-fill--blue"
                    initial={{ width: '0%' }}
                    animate={{ width: '67%' }}
                    transition={{ duration: 1.2, delay: 1.2, ease: eO }}
                  />
                </div>
              </div>
            </div>

            {/* skill: subtle float 3px / 8s — professional, not distracting */}
            <motion.div
              className="lp-notif lp-notif--a"
              initial={{ opacity: 0, y: 12 }}
              animate={{ opacity: 1, y: [0, -3, 0] }}
              transition={{ opacity: { duration: 0.4, delay: 0.8 }, y: { duration: 8, repeat: Infinity, ease: eIO, delay: 0.8 } }}
            >
              <span className="lp-notif-icon lp-notif-icon--green">
                <i className="bi bi-check-circle-fill" />
              </span>
              <div><strong>نمره ثبت شد</strong><small>ریاضی · کلاس 10 الف</small></div>
            </motion.div>

            <motion.div
              className="lp-notif lp-notif--b"
              initial={{ opacity: 0, y: 12 }}
              animate={{ opacity: 1, y: [0, 3, 0] }}
              transition={{ opacity: { duration: 0.4, delay: 1.0 }, y: { duration: 9, repeat: Infinity, ease: eIO, delay: 2.0 } }}
            >
              <span className="lp-notif-icon lp-notif-icon--blue">
                <i className="bi bi-chat-dots-fill" />
              </span>
              <div><strong>پیامک ارسال شد</strong><small>12 دانش‌آموز · الان</small></div>
            </motion.div>

            <motion.div
              className="lp-notif lp-notif--c"
              initial={{ opacity: 0, y: 12 }}
              animate={{ opacity: 1, y: [0, -3, 0] }}
              transition={{ opacity: { duration: 0.4, delay: 1.2 }, y: { duration: 10, repeat: Infinity, ease: eIO, delay: 1.2 } }}
            >
              <span className="lp-notif-icon lp-notif-icon--amber">
                <i className="bi bi-clipboard-check-fill" />
              </span>
              <div><strong>امتحان فیزیک</strong><small>30 نفر شرکت کردند</small></div>
            </motion.div>
          </motion.div>
        </div>

        <WaveDown fill="white" />
      </section>

      {/* ══════════════════════════════════ STATS ══════════════════════════════════ */}
      <motion.section
        className="lp-stats"
        variants={stagger}
        initial="hidden"
        whileInView="show"
        viewport={{ once: true, amount: 0.5 }}
      >
        {[
          ['+50',    'مدرسه فعال'],
          ['+10,000','دانش‌آموز'],
          ['6',      'ماژول اصلی'],
          ['24/7',   'پشتیبانی'],
        ].map(([num, label], i) => (
          <motion.div
            key={label}
            className="lp-stats-row-item"
            variants={fadeUp}
            transition={{ duration: 0.5, ease: eO }}
          >
            {i > 0 && <div className="lp-stats-sep" />}
            <div className="lp-stats-item">
              <strong className="lp-num">{num}</strong>
              <span>{label}</span>
            </div>
          </motion.div>
        ))}
      </motion.section>

      {/* ══════════════════════════════════ LOGOS STRIP (trust signal) ══════════════ */}
      <motion.div
        className="lp-logos"
        initial={{ opacity: 0, y: 16 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, amount: 0.6 }}
        transition={{ duration: 0.55, ease: eO }}
      >
        <p className="lp-logos-label">مدارسی که به ما اعتماد کرده‌اند</p>
        <div className="lp-logos-grid">
          {logos.map((name) => (
            <span key={name} className="lp-logo-item">{name}</span>
          ))}
        </div>
      </motion.div>

      {/* ══════════════════════════════════ FEATURES ══════════════════════════════ */}
      <section className="lp-features">
        <div className="lp-section-inner">
          <motion.div
            className="lp-section-head"
            initial={{ opacity: 0, y: 22 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, amount: 0.5 }}
            transition={{ duration: 0.55, ease: eO }}
          >
            <span className="lp-pill lp-pill--dark">امکانات اصلی</span>
            <h2>همه چیز ماژولی است</h2>
            <p>مدرسه فقط ماژول‌هایی را می‌بیند که خریده — بدون پیچیدگی اضافه.</p>
          </motion.div>

          <motion.div
            className="lp-feat-grid"
            variants={stagger}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.1 }}
          >
            {features.map((f) => (
              <motion.article
                key={f.title}
                className="lp-feat-card"
                variants={fadeUp}
                transition={{ duration: 0.5, ease: eO }}
                whileHover={{ y: -6, transition: { type: 'spring', stiffness: 380, damping: 24 } }}
              >
                <span className={`lp-feat-icon lp-feat-icon--${f.color}`}>
                  <i className={`bi ${f.icon}`} />
                </span>
                <h3>{f.title}</h3>
                <p>{f.desc}</p>
              </motion.article>
            ))}
          </motion.div>

          <motion.div
            className="lp-section-cta"
            initial={{ opacity: 0, y: 16 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.2, ease: eO }}
          >
            <Link href="/pricing" className="lp-btn lp-btn--outline-dark lp-btn--md">
              مشاهده همه امکانات <i className="bi bi-arrow-left" />
            </Link>
          </motion.div>
        </div>
      </section>

      {/* ══════════════════════════════════ HOW IT WORKS ══════════════════════════ */}
      <section className="lp-how">
        <WaveUp fill="#F1F5F9" />
        <div className="lp-section-inner">
          <motion.div
            className="lp-section-head"
            initial={{ opacity: 0, y: 22 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, amount: 0.5 }}
            transition={{ duration: 0.55, ease: eO }}
          >
            <span className="lp-pill lp-pill--dark">فرآیند راه‌اندازی</span>
            <h2>از خرید تا استفاده در 3 مرحله</h2>
            <p>بدون پیچیدگی — مدرسه در کمتر از یک روز آماده است.</p>
          </motion.div>

          <motion.div
            className="lp-how-grid"
            variants={stagger}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.2 }}
          >
            {steps.map((s) => (
              <motion.div
                key={s.title}
                className="lp-how-card"
                variants={fadeUp}
                transition={{ duration: 0.5, ease: eO }}
              >
                <div className="lp-how-num">
                  <span className="lp-num">{s.num}</span>
                </div>
                <div className="lp-how-icon"><i className={`bi ${s.icon}`} /></div>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
              </motion.div>
            ))}
          </motion.div>
        </div>
        <WaveDown fill="white" />
      </section>

      {/* ══════════════════════════════════ TESTIMONIALS ══════════════════════════ */}
      <section className="lp-testimonials">
        <div className="lp-section-inner">
          <motion.div
            className="lp-section-head"
            initial={{ opacity: 0, y: 22 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, amount: 0.5 }}
            transition={{ duration: 0.55, ease: eO }}
          >
            <span className="lp-pill lp-pill--dark">نظر مدیران مدارس</span>
            <h2>چرا به ما اعتماد کرده‌اند</h2>
            <p>صدها مدیر مدرسه در سراسر ایران دانشیار من را برای اتوماسیون مدرسه انتخاب کرده‌اند.</p>
          </motion.div>

          <motion.div
            className="lp-test-grid"
            variants={stagger}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.1 }}
          >
            {testimonials.map((t) => (
              <motion.div
                key={t.name}
                className="lp-tcard"
                variants={fadeUp}
                transition={{ duration: 0.5, ease: eO }}
                whileHover={{ y: -5, transition: { type: 'spring', stiffness: 360, damping: 22 } }}
              >
                <div className="lp-tcard-quote">"</div>
                <p className="lp-tcard-text">{t.quote}</p>
                <div className="lp-tcard-footer">
                  <span className="lp-tcard-avatar" style={{ background: t.color }}>{t.initials}</span>
                  <div className="lp-tcard-info">
                    <div className="lp-tcard-name">{t.name}</div>
                    <div className="lp-tcard-role">{t.role} · {t.school}</div>
                  </div>
                  <span className="lp-tcard-stars" aria-label="5 ستاره">★★★★★</span>
                </div>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* ══════════════════════════════════ CTA ══════════════════════════════════ */}
      <section className="lp-cta">
        <motion.div
          className="lp-cta-inner"
          initial={{ opacity: 0, y: 26 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0.35 }}
          transition={{ duration: 0.65, ease: eO }}
        >
          <span className="lp-pill lp-pill--white-ghost">آماده شروع هستید؟</span>
          <h2>مدرسه‌تان را همین امروز هوشمند کنید</h2>
          <p>
            یک دمو رایگان ترتیب می‌دهیم تا تمام امکانات را در پنل واقعی ببینید.
            بدون پرداخت — فقط یک جلسه آنلاین.
          </p>
          <div className="lp-cta-btns">
            <Link href="/contact" className="lp-btn lp-btn--white lp-btn--lg">
              <i className="bi bi-calendar-check-fill" />
              درخواست دمو رایگان
            </Link>
            <Link href="/pricing" className="lp-btn lp-btn--ghost-white lp-btn--lg">
              مشاهده پلن‌ها
              <i className="bi bi-arrow-left" />
            </Link>
          </div>
        </motion.div>
        <WaveDown fill="#0F2337" />
      </section>

      {/* ══════════════════════════════════ FOOTER ══════════════════════════════════ */}
      <footer className="lp-footer">
        <div className="lp-footer-inner">
          <div className="lp-footer-top">
            <div className="lp-footer-brand">
              <Link href="/" className="lp-footer-logo-wrap">
                <span className="lp-footer-logo-icon">د</span>
                <div>
                  <strong>دانشیار من</strong>
                  <small>اتوماسیون هوشمند مدارس</small>
                </div>
              </Link>
              <p>
                پنل فارسی مدیریت مدرسه — دانش‌آموز، معلم، امتحان، نمره،
                حضور و غیاب، SMS و رأی‌گیری در یک سامانه یکپارچه.
              </p>
            </div>

            <div className="lp-footer-links">
              <div className="lp-footer-col">
                <h4>امکانات</h4>
                <ul>
                  <li><Link href="/pricing">امتحانات آنلاین</Link></li>
                  <li><Link href="/pricing">نمره‌دهی و کارنامه</Link></li>
                  <li><Link href="/pricing">حضور و غیاب</Link></li>
                  <li><Link href="/pricing">SMS و پیام‌رسانی</Link></li>
                  <li><Link href="/pricing">رأی‌گیری</Link></li>
                </ul>
              </div>
              <div className="lp-footer-col">
                <h4>پشتیبانی</h4>
                <ul>
                  <li><Link href="/pricing">پلن‌ها و قیمت‌ها</Link></li>
                  <li><Link href="/contact">درخواست دمو</Link></li>
                  <li><Link href="/contact">تماس با فروش</Link></li>
                  <li><Link href="/faq">سوالات متداول</Link></li>
                </ul>
              </div>
              <div className="lp-footer-col">
                <h4>قوانین</h4>
                <ul>
                  <li><Link href="/faq">حریم خصوصی</Link></li>
                  <li><Link href="/faq">شرایط استفاده</Link></li>
                  <li><Link href="/faq">امنیت اطلاعات</Link></li>
                  <li><Link href="/login">ورود به پنل</Link></li>
                </ul>
              </div>
            </div>
          </div>

          <div className="lp-footer-bottom">
            <span>© 1404 دانشیار من — mydaneshyar.ir</span>
            <div className="lp-footer-socials">
              <a href="#" className="lp-social" aria-label="تلگرام"><i className="bi bi-telegram" /></a>
              <a href="#" className="lp-social" aria-label="اینستاگرام"><i className="bi bi-instagram" /></a>
              <a href="#" className="lp-social" aria-label="لینکدین"><i className="bi bi-linkedin" /></a>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}
