import { Link, usePage } from '@inertiajs/react';
import { jalaliToday, persianDigits } from '@/lib/persianDate';

type LandingTrust = {
  enamadHtml?: string;
  samandehiHtml?: string;
  achievements?: { title?: string; subtitle?: string; icon?: string; url?: string }[];
};

export function LandingFooter() {
  const currentYear = persianDigits(jalaliToday().jy);
  const { props } = usePage<{ landingTrust?: LandingTrust }>();
  const trust = props.landingTrust ?? {};
  const achievements = trust.achievements ?? [];

  return (
    <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">
              <img
                src="/assets/images/logo/logo.png"
                alt="دانشیار من"
                className="lp-footer-logo-img"
                width="44"
                height="44"
              />
              <div>
                <strong>دانشیار من</strong>
                <small>اتوماسیون هوشمند مدارس</small>
              </div>
            </Link>
            <p>
              پنل فارسی مدیریت مدرسه: دانش‌آموز، معلم، امتحان، نمره،
              حضور و غیاب، پیامک و رأی‌گیری در یک سامانه یکپارچه.
            </p>
          </div>

          <div className="lp-footer-links">
            <div className="lp-footer-col">
              <h4>امکانات</h4>
              <ul>
                <li><Link href="/features">امتحانات آنلاین</Link></li>
                <li><Link href="/features">نمره‌دهی و کارنامه</Link></li>
                <li><Link href="/features">حضور و غیاب</Link></li>
                <li><Link href="/features">پیامک و پیام‌رسانی</Link></li>
                <li><Link href="/features">رأی‌گیری</Link></li>
              </ul>
            </div>
            <div className="lp-footer-col">
              <h4>پشتیبانی</h4>
              <ul>
                <li><Link href="/about">درباره ما</Link></li>
                <li><Link href="/features">مشاهده امکانات</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="/privacy">حریم خصوصی</Link></li>
                <li><Link href="/terms">شرایط استفاده</Link></li>
                <li><Link href="/faq">امنیت اطلاعات</Link></li>
                <li><Link href="/login">ورود به پنل</Link></li>
              </ul>
            </div>
          </div>
        </div>

        <div className="lp-footer-trust">
          <div className="lp-trust-slot" data-slot="enamad">
            {trust.enamadHtml ? <span dangerouslySetInnerHTML={{ __html: trust.enamadHtml }} /> : (
              <><i className="bi bi-patch-check" /><span>نماد اعتماد الکترونیکی</span><small>آماده ثبت کد</small></>
            )}
          </div>
          <div className="lp-trust-slot" data-slot="samandehi">
            {trust.samandehiHtml ? <span dangerouslySetInnerHTML={{ __html: trust.samandehiHtml }} /> : (
              <><i className="bi bi-shield-check" /><span>نشان ساماندهی</span><small>آماده ثبت کد</small></>
            )}
          </div>
          {achievements.slice(0, 2).map((item, index) => {
            const content = (
              <>
                <i className={`bi ${item.icon || (index === 0 ? 'bi-award' : 'bi-trophy')}`} />
                <span>{item.title || 'افتخار'}</span>
                <small>{item.subtitle || 'ثبت شده در پنل'}</small>
              </>
            );
            return item.url ? (
              <a key={index} className="lp-trust-slot" href={item.url} target="_blank" rel="noopener noreferrer">{content}</a>
            ) : (
              <div key={index} className="lp-trust-slot">{content}</div>
            );
          })}
        </div>

        <div className="lp-footer-bottom">
          <div className="lp-footer-copy">
            <span>© {currentYear} دانشیار من · mydaneshyar.ir</span>
            <small>تمامی حقوق محفوظ است.</small>
          </div>
          <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>
  );
}
