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

const ease  = 'easeInOut' as const;
const easeO = 'easeOut'   as const;

const fadeUp = { hidden: { opacity: 0, y: 36 }, show: { opacity: 1, y: 0 } };
const stagger = { hidden: {}, show: { transition: { staggerChildren: 0.12 } } };

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: '۱', icon: 'bi-key',        title: 'خرید License',    desc: 'Super Admin مدرسه، owner، پایه‌ها و ماژول‌های مجاز را فعال می‌کند.' },
  { num: '۲', icon: 'bi-gear',       title: 'راه‌اندازی',       desc: 'Owner دانش‌آموزان، معلمان و کلاس‌ها را با فرم یا فایل CSV وارد می‌کند.' },
  { num: '۳', icon: 'bi-check2-all', title: 'استفاده روزانه',  desc: 'هر نقش فقط امکانات مجاز خودش را در پنل می‌بیند و استفاده می‌کند.' },
] as const;

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 و رأی‌گیری در یک سامانه فارسی." />
      </Head>

      <LandingHeader transparent />

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

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

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

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

            <motion.div className="lp-hero-actions" variants={fadeUp} transition={{ duration: 0.6 }}>
              <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.6 }}>
              {[
                ['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 ── */}
          <motion.div
            className="lp-hero-visual"
            aria-hidden="true"
            initial={{ opacity: 0, x: -48 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.9, delay: 0.25, ease: easeO }}
          >
            {/* Main card */}
            <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">
                {[
                  ['دانش‌آموزان', '۱٬۲۴۰'],
                  ['معلمان',      '۴۸'],
                  ['کلاس‌ها',     '۳۲'],
                  ['SMS باقی',    '۳٬۵۰۰'],
                ].map(([label, val]) => (
                  <div key={label} className="lp-card-stat">
                    <span>{label}</span>
                    <strong>{val}</strong>
                  </div>
                ))}
              </div>
              <div className="lp-card-progress">
                <div className="lp-card-progress-row">
                  <span>حضور امروز</span><span>۸۲٪</span>
                </div>
                <div className="lp-card-track">
                  <motion.div
                    className="lp-card-fill"
                    initial={{ width: '0%' }}
                    animate={{ width: '82%' }}
                    transition={{ duration: 1.4, delay: 1.1, ease: easeO }}
                  />
                </div>
              </div>
              <div className="lp-card-progress">
                <div className="lp-card-progress-row">
                  <span>تکالیف تحویلی</span><span>۶۷٪</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.4, delay: 1.3, ease: easeO }}
                  />
                </div>
              </div>
            </div>

            {/* Floating notif cards */}
            <motion.div
              className="lp-notif lp-notif--a"
              animate={{ y: [0, -14, 0], rotate: [-0.8, 0.8, -0.8] }}
              transition={{ duration: 4.5, repeat: Infinity, ease }}
            >
              <span className="lp-notif-icon lp-notif-icon--green">
                <i className="bi bi-check-circle-fill" />
              </span>
              <div><strong>نمره ثبت شد</strong><small>ریاضی · کلاس ۱۰ الف</small></div>
            </motion.div>

            <motion.div
              className="lp-notif lp-notif--b"
              animate={{ y: [-6, 10, -6], rotate: [1.5, -1, 1.5] }}
              transition={{ duration: 5.5, repeat: Infinity, ease, delay: 1.2 }}
            >
              <span className="lp-notif-icon lp-notif-icon--blue">
                <i className="bi bi-chat-dots-fill" />
              </span>
              <div><strong>پیامک ارسال شد</strong><small>۱۲ دانش‌آموز · الان</small></div>
            </motion.div>

            <motion.div
              className="lp-notif lp-notif--c"
              animate={{ y: [4, -10, 4], rotate: [-1.5, 1, -1.5] }}
              transition={{ duration: 6.2, repeat: Infinity, ease, delay: 0.6 }}
            >
              <span className="lp-notif-icon lp-notif-icon--amber">
                <i className="bi bi-clipboard-check-fill" />
              </span>
              <div><strong>امتحان فیزیک</strong><small>۳۰ نفر شرکت کردند</small></div>
            </motion.div>
          </motion.div>
        </div>

        {/* Wave connector → white */}
        <WaveDown fill="white" />
      </section>

      {/* ════════════════════════════════ STATS ════════════════════════════════ */}
      <motion.section
        className="lp-stats"
        variants={stagger}
        initial="hidden"
        whileInView="show"
        viewport={{ once: true, amount: 0.6 }}
      >
        {[
          ['+۵۰',    'مدرسه فعال'],
          ['+۱۰,۰۰۰','دانش‌آموز'],
          ['۶',       'ماژول اصلی'],
          ['۲۴/۷',   'پشتیبانی'],
        ].map(([num, label], i) => (
          <>
            {i > 0 && <div key={`sep-${i}`} className="lp-stats-sep" />}
            <motion.div key={label} className="lp-stats-item" variants={fadeUp} transition={{ duration: 0.5 }}>
              <strong>{num}</strong>
              <span>{label}</span>
            </motion.div>
          </>
        ))}
      </motion.section>

      {/* ════════════════════════════════ FEATURES ════════════════════════════ */}
      <section className="lp-features">
        <div className="lp-section-inner">
          <motion.div
            className="lp-section-head"
            initial={{ opacity: 0, y: 28 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, amount: 0.5 }}
            transition={{ duration: 0.6 }}
          >
            <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.15 }}
          >
            {features.map((f) => (
              <motion.article
                key={f.title}
                className="lp-feat-card"
                variants={fadeUp}
                transition={{ duration: 0.5 }}
                whileHover={{ y: -6, transition: { duration: 0.2 } }}
              >
                <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: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.3 }}
          >
            <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: 28 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, amount: 0.5 }}
            transition={{ duration: 0.6 }}
          >
            <span className="lp-pill lp-pill--dark">فرآیند راه‌اندازی</span>
            <h2>از خرید تا استفاده در ۳ مرحله</h2>
            <p>بدون پیچیدگی — مدرسه در کمتر از یک روز آماده است.</p>
          </motion.div>

          <motion.div
            className="lp-how-grid"
            variants={stagger}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.25 }}
          >
            {steps.map((s, i) => (
              <motion.div
                key={s.title}
                className="lp-how-card"
                variants={fadeUp}
                transition={{ duration: 0.55 }}
              >
                <div className="lp-how-num">
                  <span>{s.num}</span>
                  {i < steps.length - 1 && <div className="lp-how-line" />}
                </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="#0EA678" />
      </section>

      {/* ════════════════════════════════ CTA ════════════════════════════════ */}
      <section className="lp-cta">
        <div className="lp-glow lp-glow--cta-l" aria-hidden="true" />
        <div className="lp-glow lp-glow--cta-r" aria-hidden="true" />
        <motion.div
          className="lp-cta-inner"
          initial={{ opacity: 0, y: 32 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0.4 }}
          transition={{ duration: 0.7 }}
        >
          <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="#060F1E" />
      </section>

      {/* ════════════════════════════════ FOOTER ════════════════════════════ */}
      <footer className="lp-footer">
        <div className="lp-footer-inner">
          {/* Top */}
          <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>

          {/* Bottom */}
          <div className="lp-footer-bottom">
            <span>© ۱۴۰۵ دانشیار من — 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>
  );
}
