import Link from 'next/link'
import '../styles/payment-cancelled.css'

export const metadata = { title: 'لم يكتمل الدفع' }

/* Payment cancelled — design from payment-cancelled.html. */
export default function PaymentCancelledPage() {
  return (
    <>
      <header className="topnav" data-od-id="topnav">
        <div className="container topnav-inner">
          <Link className="logo" href="/" data-od-id="brand">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img className="logo-mark" src="/anwarpi-logo.jpg" alt="" width={30} height={34} />
            أنور بي آي
          </Link>
          <Link className="nav-link" href="/account-settings" data-od-id="account-link">حسابي</Link>
        </div>
      </header>
      <main>
        <section className="section" data-od-id="payment-cancelled">
          <div className="container">
            <article className="state-card">
              <div className="status-mark" aria-hidden="true"><svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth={2}><path d="M9 9l14 14M23 9 9 23" /></svg></div>
              <p className="eyebrow">لم يكتمل الدفع</p>
              <h1 data-od-id="cancelled-title">لم تُخصم أي دفعة.</h1>
              <p className="lead">ألغيت عملية الدفع أو عدت قبل إكمالها. حسابك المجاني ومقالاتك المحفوظة لم تتغير.</p>
              <div className="notice" data-od-id="account-safety-note">
                <h2 data-od-id="account-safety-title">يمكنك المتابعة وقتما يناسبك</h2>
                <p>ارجع إلى صفحة العضوية لمراجعة المزايا أو أكمل استخدام المكتبة المجانية الآن.</p>
              </div>
              <div className="actions">
                <Link className="btn btn-primary" href="/subscription" data-od-id="retry-payment-cta">العودة إلى العضوية</Link>
                <Link className="btn btn-secondary" href="/articles" data-od-id="browse-free-articles-cta">تصفح المقالات المجانية</Link>
              </div>
              <p className="help">واجهت مشكلة أثناء الدفع؟ <a href="mailto:hello@anwarpi.ai?subject=%D9%85%D8%B4%D9%83%D9%84%D8%A9%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%AF%D9%81%D8%B9" data-od-id="payment-help-link">تواصل مع الفريق</a>.</p>
            </article>
          </div>
        </section>
      </main>
      <footer className="pagefoot" data-od-id="footer">
        <div className="container footer-row"><span>© أنور بي آي ٢٠٢٦</span><span>لن تتغير حالة الحساب حتى يكتمل الدفع.</span></div>
      </footer>
    </>
  )
}