import Topnav from '@/components/topnav'
import Footer from '@/components/footer'
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 (
    <div id="site" className="site-page page-payment-cancelled">
      <Topnav />
      <main id="content">
        <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@anwarpy.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 />
    </div>
  )
}