/* ===========================================================
   راویار — اشتراک، کیف پول، درگاه پرداخت، آفرینش با AI
   =========================================================== */
function PlanCard({ plan, current, onChoose }) {
  const isCur = current === plan.id;
  return (
    <div className={'panel ' + (plan.popular ? 'gold-frame' : '')} style={{ padding: 26, position: 'relative',
      border: plan.popular ? '1px solid transparent' : '1px solid var(--panel-line)',
      transform: plan.popular ? 'scale(1.03)' : 'none' }}>
      {plan.popular && <span className="badge-ai" style={{ position: 'absolute', top: -12, insetInlineStart: 24 }}><Icon name="sparkle" size={11} /> {OMID.TX(plan, 'tag')}</span>}
      <div className="row between">
        <div><b style={{ fontSize: 20 }}>{OMID.TX(plan)}</b><div className="muted" style={{ fontSize: 13, marginTop: 3 }}>{!plan.popular && OMID.TX(plan, 'tag')}</div></div>
        <span style={{ width: 40, height: 40, borderRadius: 12, display: 'grid', placeItems: 'center', background: `${plan.tint}22`, color: plan.tint }}><Icon name={plan.id === 'vip' ? 'sparkle' : plan.id === 'plus' ? 'bell' : 'play'} size={20} /></span>
      </div>
      <div className="row" style={{ alignItems: 'baseline', gap: 8, margin: '18px 0' }}>
        {plan.coins > 0 ? <><CoinGlyph size={26} /><b className="fa-num" style={{ fontSize: 34 }}>{OMID.num(plan.coins)}</b><span className="muted">{L('سکه', 'coins')} / {OMID.TX(plan, 'period')}</span></>
          : <b style={{ fontSize: 30 }}>{L('رایگان', 'Free')}</b>}
      </div>
      <div className="col gap-2" style={{ marginBottom: 22 }}>
        {(OMID.getLang() === 'en' ? plan.featuresEn : plan.features).map((f, i) => (
          <div key={i} className="row gap-2" style={{ fontSize: 14, color: 'var(--cream-2)' }}>
            <span style={{ color: plan.tint }}><Icon name="check" size={15} /></span>{f}
          </div>
        ))}
      </div>
      <button onClick={() => onChoose(plan)} className={'btn ' + (isCur ? 'btn-ghost' : plan.popular ? 'btn-gold' : 'btn-ghost')}
        style={{ width: '100%', justifyContent: 'center' }} disabled={isCur}>
        {isCur ? L('پلن فعلی شما', 'Your current plan') : plan.coins > 0 ? L('فعال‌سازی اشتراک', 'Activate plan') : L('شروع رایگان', 'Start free')}
      </button>
    </div>
  );
}

/* ===========================================================
   راویار — سفرِ خریدِ سکه (تسویه → پرداخت → تکمیل)
   منطبق با مدلِ سکه‌محورِ سایت. هویت = ماژولِ visitor-auth مرکزی
   (window.WCAuth). پرداختِ واقعی = POST /sites/:siteId/public/checkout
   (ماژولِ orders) که نیازمندِ productId واقعیِ «بستهٔ سکه» است؛ فعلاً
   بسته‌ها productId ندارند (نیازمندِ seed در بک‌اند — backendGap)، پس تا
   آماده‌شدنِ آن، فلو در حالتِ نمایشی سکه را شارژ می‌کند و خطا نمی‌دهد.
   =========================================================== */
function RaviCheckout({ bundle, gateway, setCoins, onClose, onToast }) {
  const [user, setUser] = React.useState(window.WCAuth ? window.WCAuth.user() : null);
  const [stage, setStage] = React.useState('confirm'); // confirm | paying | done
  const [refCode, setRefCode] = React.useState('');
  React.useEffect(() => { if (window.WCAuth) window.WCAuth.onChange(setUser); }, []);

  const gw = OMID.GATEWAYS.find(g => g.id === gateway) || OMID.GATEWAYS[0];
  const total = bundle.coins + bundle.bonus;
  const uname = user ? (user.name || user.fullName || user.mobile || user.email || L('کاربر راویار', 'Ravyar user')) : '';
  const login = () => { if (window.WCAuth) window.WCAuth.open(); };

  const pay = async () => {
    setStage('paying');
    const pid = bundle.productId; // فقط اگر «بستهٔ سکه» به محصولِ واقعیِ سایت map شده باشد
    if (window.WCAuth && pid) {
      try {
        const api = window.WCAuth.apiBase(), sid = window.WCAuth.siteId(), tok = window.WCAuth.token();
        const cb = location.origin + location.pathname + '?ravipay=1';
        const res = await fetch(api + '/sites/' + sid + '/public/checkout', {
          method: 'POST',
          headers: Object.assign({ 'Content-Type': 'application/json' }, tok ? { Authorization: 'Bearer ' + tok } : {}),
          body: JSON.stringify({
            items: [{ productId: pid, quantity: 1 }],
            customerName: uname,
            customerPhone: (user && (user.mobile || user.phone)) || '',
            customerEmail: (user && user.email) || '',
            customerAddress: L('اشتراک دیجیتال — بدونِ نیاز به آدرس', 'Digital subscription — no address needed'),
            paymentMethod: gateway,
            callbackUrl: cb,
          }),
        });
        const j = await res.json().catch(() => ({}));
        if (res.ok && j && j.paymentUrl) { window.location.href = j.paymentUrl; return; }
        throw new Error((j && j.message) || 'checkout-failed');
      } catch (e) { /* افت به حالتِ نمایشی تا سایت خطا ندهد */ }
    }
    // TODO(backendGap): پس از seedِ «محصولِ بستهٔ سکه» یا افزودنِ اندپوینتِ عمومیِ
    // سکه برای بازدیدکننده، این افتِ نمایشی حذف و مسیرِ واقعیِ بالا فعال شود.
    setCoins(c => c + total);
    setRefCode('DEMO-' + Math.random().toString(36).slice(2, 8).toUpperCase());
    setStage('done');
    onToast && onToast(L('پرداخت (نمایشی) ثبت شد — ' + OMID.numFa(total) + ' سکه افزوده شد', 'Demo payment recorded — ' + total + ' coins added'));
  };

  const openOrders = () => { if (window.WCAccount && window.WCAccount.open) { onClose(); window.WCAccount.open('orders'); } else onClose(); };

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 300, background: 'rgba(6,11,30,.72)', backdropFilter: 'blur(6px)', display: 'grid', placeItems: 'center', padding: 20 }}>
      <div onClick={e => e.stopPropagation()} className="panel gold-frame" style={{ width: 'min(460px,94vw)', padding: 26, position: 'relative' }}>
        <button onClick={onClose} aria-label={L('بستن', 'Close')} style={{ position: 'absolute', top: 14, insetInlineEnd: 14, color: 'var(--muted)' }}><Icon name="x" size={18} /></button>

        {stage === 'done' ? (
          <div className="col gap-3" style={{ textAlign: 'center', padding: '10px 4px' }}>
            <div style={{ width: 62, height: 62, borderRadius: 999, margin: '0 auto', display: 'grid', placeItems: 'center', background: 'rgba(28,183,172,.16)', color: 'var(--turq-400)' }}><Icon name="check" size={30} /></div>
            <h3 style={{ fontSize: 22, fontFamily: 'var(--display)', fontWeight: 500 }}>{L('خرید با موفقیت ثبت شد', 'Purchase completed')}</h3>
            <p className="muted" style={{ fontSize: 14 }}>{L(OMID.numFa(total) + ' سکه به کیف پول شما افزوده شد.', total + ' coins were added to your wallet.')}</p>
            {refCode && <span className="chip fa-num" style={{ direction: 'ltr', margin: '0 auto', fontSize: 12 }}>{refCode}</span>}
            <button onClick={openOrders} className="btn btn-gold" style={{ justifyContent: 'center', marginTop: 6 }}>{L('مشاهدهٔ سفارش‌ها', 'View my orders')}</button>
            <button onClick={onClose} className="btn btn-ghost" style={{ justifyContent: 'center' }}>{L('بستن', 'Close')}</button>
          </div>
        ) : !user ? (
          <div className="col gap-3" style={{ textAlign: 'center', padding: '10px 4px' }}>
            <div className="eyebrow">{L('گامِ ۱ از ۲ — ورود', 'Step 1 of 2 — Sign in')}</div>
            <h3 style={{ fontSize: 21, fontFamily: 'var(--display)', fontWeight: 500 }}>{L('برای تکمیل خرید وارد شوید', 'Sign in to complete your purchase')}</h3>
            <p className="muted" style={{ fontSize: 14 }}>{L('سکه‌ها به کیف پولِ حسابِ شما افزوده می‌شوند؛ برای ثبتِ امنِ تراکنش ورود لازم است.', 'Coins are added to your account wallet; signing in keeps the transaction secure.')}</p>
            <button onClick={login} className="btn btn-gold" data-wc-auth style={{ justifyContent: 'center', marginTop: 4 }}><Icon name="users" size={16} /> {L('ورود / ثبت‌نام', 'Sign in / Register')}</button>
          </div>
        ) : (
          <div className="col gap-3">
            <div className="eyebrow">{L('گامِ ۲ از ۲ — تسویه', 'Step 2 of 2 — Checkout')}</div>
            <h3 style={{ fontSize: 21, fontFamily: 'var(--display)', fontWeight: 500 }}>{L('تأیید و پرداخت', 'Confirm & pay')}</h3>
            <div className="col gap-2" style={{ background: 'rgba(231,222,201,.04)', border: '1px solid var(--hairline)', borderRadius: 14, padding: 16 }}>
              <div className="row between"><span className="muted" style={{ fontSize: 13 }}>{L('خریدار', 'Buyer')}</span><b style={{ fontSize: 14 }}>{uname}</b></div>
              <div className="row between"><span className="muted" style={{ fontSize: 13 }}>{L('بسته', 'Bundle')}</span><span className="row gap-1" style={{ alignItems: 'center' }}><CoinGlyph size={16} /><b className="fa-num">{OMID.num(bundle.coins)}</b>{bundle.bonus > 0 && <span className="turq fa-num" style={{ fontSize: 12 }}>+{OMID.num(bundle.bonus)}</span>}</span></div>
              <div className="row between"><span className="muted" style={{ fontSize: 13 }}>{L('درگاه', 'Gateway')}</span><span className="row gap-1" style={{ alignItems: 'center' }}><span style={{ width: 22, height: 22, borderRadius: 6, display: 'grid', placeItems: 'center', background: gw.tint, color: gw.id === 'zarinpal' ? '#1a1400' : '#fff', fontWeight: 800, fontSize: 12 }}>{gw.mark}</span><b style={{ fontSize: 14 }}>{OMID.TX(gw)}</b></span></div>
              <div className="row between" style={{ borderTop: '1px solid var(--hairline)', paddingTop: 10, marginTop: 2 }}><span style={{ fontSize: 14 }}>{L('مبلغ قابل پرداخت', 'Amount due')}</span><b className="fa-num" style={{ fontSize: 17 }}>{OMID.TX(bundle, 'toman')} <span className="muted" style={{ fontSize: 11 }}>{L('تومان', 'Toman')}</span></b></div>
            </div>
            <button onClick={pay} disabled={stage === 'paying'} className="btn btn-gold" style={{ justifyContent: 'center', padding: 13 }}>
              {stage === 'paying' ? L('در حال انتقال به درگاه…', 'Redirecting to gateway…') : L('پرداخت از ' + OMID.TX(gw), 'Pay via ' + OMID.TX(gw))}
            </button>
            <p className="muted" style={{ fontSize: 11.5, textAlign: 'center' }}>{L('پس از پرداخت به سایت بازمی‌گردید و سکه‌ها به کیف پول افزوده می‌شود.', 'You will return here after payment and coins are credited to your wallet.')}</p>
          </div>
        )}
      </div>
    </div>
  );
}

function PricingScreen({ coins, setCoins, toast }) {
  const [plan, setPlan] = React.useState('free');
  const [bundle, setBundle] = React.useState(OMID.COIN_BUNDLES[1]);
  const [gateway, setGateway] = React.useState('zarinpal');
  const [checkout, setCheckout] = React.useState(null);

  // تأییدِ بازگشت از درگاه (اندپوینتِ واقعیِ orders؛ فقط وقتی product‌ها seed شده باشند)
  React.useEffect(() => {
    try {
      const q = new URLSearchParams(location.search);
      const oid = q.get('orderId');
      if (q.get('ravipay') && oid && window.WCAuth) {
        const api = window.WCAuth.apiBase(), sid = window.WCAuth.siteId();
        const status = q.get('Status') || q.get('status') || '';
        const authority = q.get('Authority') || q.get('authority') || '';
        fetch(api + '/sites/' + sid + '/public/checkout/' + oid + '/verify', {
          method: 'POST', headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ status: status, authority: authority }),
        }).then(r => r.json().catch(() => ({}))).then(j => {
          const ok = j && (j.ok || j.status === 'PAID' || j.paid);
          toast(ok ? L('پرداخت تأیید شد — سکه‌ها به کیف پول افزوده شد', 'Payment verified — coins credited to your wallet')
                   : L('پرداخت تأیید نشد یا لغو شد', 'Payment not verified or was canceled'));
        }).catch(() => {});
        history.replaceState(null, '', location.pathname);
      }
    } catch (e) {}
  }, []);

  const choosePlan = (p) => {
    if (p.coins === 0) { setPlan('free'); return; }
    if (window.WCAuth && !window.WCAuth.user()) { window.WCAuth.open(); toast(L('برای فعال‌سازی اشتراک ابتدا وارد شوید', 'Sign in first to activate a plan')); return; }
    if (coins < p.coins) { toast(L('سکهٔ کافی ندارید — ابتدا کیف پول را شارژ کنید', 'Not enough coins — top up your wallet first')); return; }
    setCoins(coins - p.coins); setPlan(p.id); toast(L(`اشتراک «${p.fa}» فعال شد — ${OMID.numFa(p.coins)} سکه کسر شد`, `“${p.en}” plan activated — ${p.coins} coins deducted`));
  };
  // بازکردنِ سفرِ خرید (تسویه با ورودِ visitor-auth → پرداخت → تکمیل)
  const pay = () => setCheckout({ bundle: bundle, gateway: gateway });

  return (
    <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto', padding: '14px 22px 30px' }}>
      <div className="row between wrap" style={{ gap: 16, marginBottom: 26 }}>
        <div>
          <div className="eyebrow">{L('مدل درآمدی سکه‌محور', 'Coin-based model')}</div>
          <h1 style={{ fontSize: 40, fontFamily: 'var(--display)', fontWeight: 400, marginTop: 6 }}>{L('اشتراک و کیف پول', 'Plans & wallet')}</h1>
          <p className="muted" style={{ fontSize: 16, marginTop: 8, maxWidth: 560 }}>{L('با تماشای داستان‌ها سکه جمع کنید، یا کیف پول را شارژ کنید. اشتراکِ بدون تبلیغ، ماهانه ۱۰۰ سکه از کیف شما کسر می‌شود.', 'Earn coins by watching stories, or top up your wallet. The ad-free plan deducts 100 coins per month from your wallet.')}</p>
        </div>
        <div className="panel gold-frame col gap-2" style={{ padding: 20, minWidth: 210 }}>
          <span className="muted" style={{ fontSize: 13 }}>{L('موجودی کیف پول', 'Wallet balance')}</span>
          <div className="row gap-2" style={{ alignItems: 'center' }}><CoinGlyph size={30} /><b className="fa-num" style={{ fontSize: 36 }}>{OMID.num(coins)}</b><span className="muted">{L('سکه', 'coins')}</span></div>
        </div>
      </div>

      {/* Plans */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20, marginBottom: 40, alignItems: 'center' }}>
        {OMID.PLANS.map(p => <PlanCard key={p.id} plan={p} current={plan} onChoose={choosePlan} />)}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 24 }}>
        {/* Buy coins + gateways */}
        <section className="panel" style={{ padding: 26 }}>
          <div className="row gap-2" style={{ marginBottom: 6, alignItems: 'center' }}><CoinGlyph size={20} /><h3 style={{ fontSize: 20, whiteSpace: 'nowrap' }}>{L('شارژ کیف پول', 'Top up wallet')}</h3></div>
          <p className="muted" style={{ fontSize: 13.5, marginBottom: 18 }}>{L('بستهٔ سکه را انتخاب و از درگاه دلخواه پرداخت کنید.', 'Pick a coin bundle and pay with your preferred gateway.')}</p>
          <div className="col gap-2" style={{ marginBottom: 20 }}>
            {OMID.COIN_BUNDLES.map((b, i) => {
              const on = bundle.coins === b.coins;
              return (
                <button key={i} onClick={() => setBundle(b)} className={on ? 'gold-frame' : ''}
                  style={{ padding: '14px 18px', borderRadius: 14, textAlign: 'start',
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    background: on ? 'linear-gradient(135deg, rgba(212,169,76,.16), rgba(69,214,200,.08))' : 'rgba(231,222,201,.04)',
                    border: `1px solid ${on ? 'var(--panel-line)' : 'var(--hairline)'}` }}>
                  <div className="row gap-2"><CoinGlyph size={22} />
                    <div className="col"><b className="fa-num" style={{ fontSize: 17 }}>{OMID.num(b.coins)} {L('سکه', 'coins')}</b>
                      {b.bonus > 0 && <span className="turq fa-num" style={{ fontSize: 12 }}>+{OMID.num(b.bonus)} {L('هدیه', 'bonus')}</span>}</div>
                    {b.popular && <span className="badge-ai" style={{ fontSize: 10 }}>{L('پرفروش', 'Best value')}</span>}
                  </div>
                  <span className="fa-num" style={{ fontSize: 15, fontWeight: 700 }}>{OMID.TX(b, 'toman')} <span className="muted" style={{ fontSize: 11 }}>{L('تومان', 'Toman')}</span></span>
                </button>
              );
            })}
          </div>
          <div className="muted" style={{ fontSize: 13, marginBottom: 10 }}>{L('درگاه پرداخت', 'Payment gateway')}</div>
          <div className="row gap-2" style={{ marginBottom: 20 }}>
            {OMID.GATEWAYS.map(g => {
              const on = gateway === g.id;
              return (
                <button key={g.id} onClick={() => setGateway(g.id)} style={{ flex: 1, padding: '14px', borderRadius: 14, textAlign: 'start',
                  background: on ? 'rgba(231,222,201,.08)' : 'rgba(231,222,201,.03)', border: `1.5px solid ${on ? g.tint : 'var(--hairline)'}` }}>
                  <div className="row between" style={{ marginBottom: 8 }}>
                    <span style={{ width: 34, height: 34, borderRadius: 9, display: 'grid', placeItems: 'center', background: g.tint, color: g.id === 'zarinpal' ? '#1a1400' : '#fff', fontWeight: 800 }}>{g.mark}</span>
                    <span className="chip" style={{ padding: '3px 9px', fontSize: 11 }}>{OMID.TX(g, 'badge')}</span>
                  </div>
                  <b style={{ fontSize: 15 }}>{OMID.TX(g)}</b>
                  <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>{OMID.TX(g, 'sub')}</div>
                </button>
              );
            })}
          </div>
          <button onClick={pay} className="btn btn-gold" style={{ width: '100%', justifyContent: 'center', padding: 14 }}>
            {L('پرداخت ' + OMID.numFa(bundle.toman) + ' تومان از ' + OMID.GATEWAYS.find(g => g.id === gateway).fa, 'Pay ' + bundle.tomanEn + ' Toman via ' + OMID.GATEWAYS.find(g => g.id === gateway).en)}
          </button>
        </section>

        {/* Earn / spend + history */}
        <section className="col gap-3">
          <div className="panel" style={{ padding: 22 }}>
            <b style={{ fontSize: 16 }}>{L('چطور سکه جمع کنم؟', 'How do I earn coins?')}</b>
            <div className="col gap-2" style={{ marginTop: 14 }}>
              {OMID.COIN_EARN.map((e, i) => (
                <div key={i} className="row between" style={{ padding: '8px 0', borderBottom: i < 3 ? '1px solid var(--hairline)' : 'none' }}>
                  <span className="row gap-2" style={{ fontSize: 13.5 }}><span style={{ color: 'var(--turq-400)' }}><Icon name={e.icon} size={15} /></span>{OMID.TX(e)}</span>
                  <b className="fa-num turq" style={{ fontSize: 14 }}>{OMID.TX(e, 'val')}</b>
                </div>
              ))}
            </div>
          </div>
          <div className="panel" style={{ padding: 22 }}>
            <div className="row between" style={{ marginBottom: 4 }}><b style={{ fontSize: 16 }}>{L('وضعیت پرداخت‌ها و کیف پول', 'Payments & wallet status')}</b><span className="chip" style={{ fontSize: 11 }}>{L('رهگیری تراکنش', 'Track transactions')}</span></div>
            <div className="col gap-2" style={{ marginTop: 12 }}>
              {OMID.WALLET.history.map((h, i) => {
                const ps = OMID.PAY_STATUS[h.pay] || OMID.PAY_STATUS.done;
                return (
                  <div key={i} className="row between" style={{ fontSize: 13, padding: '8px 0', borderBottom: i < OMID.WALLET.history.length - 1 ? '1px solid var(--hairline)' : 'none' }}>
                    <span className="col" style={{ minWidth: 0 }}>
                      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{OMID.TX(h)}</span>
                      <span className="row gap-2" style={{ marginTop: 2 }}>
                        <span className="muted" style={{ fontSize: 11 }}>{OMID.TX(h, 'when')}</span>
                        {h.ref && <span className="muted fa-num" style={{ fontSize: 10.5, direction: 'ltr' }}>{h.ref}</span>}
                      </span>
                    </span>
                    <span className="col" style={{ alignItems: 'flex-end', flexShrink: 0, gap: 3 }}>
                      <b className="fa-num" style={{ color: h.kind === 'in' ? 'var(--turq-400)' : 'var(--ochre-400)' }}>{OMID.TX(h, 'val')}</b>
                      <span className="row gap-1" style={{ fontSize: 10.5, color: ps.tint }}><Icon name={ps.icon} size={11} />{OMID.TX(ps)}</span>
                    </span>
                  </div>
                );
              })}
            </div>
          </div>
        </section>
      </div>

      {/* User AI creation */}
      <section className="panel gold-frame" style={{ padding: 30, marginTop: 28, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, opacity: .5 }}><PosterArt grad={['#0e1c3a', '#1c4392', '#45d6c8']} seed={7} /></div>
        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 30, alignItems: 'center' }}>
          <div>
            <span className="badge-ai"><Icon name="sparkle" size={12} /> {L('خدمات هوش مصنوعی برای کاربران', 'AI services for users')}</span>
            <h2 style={{ fontSize: 30, fontFamily: 'var(--display)', fontWeight: 400, marginTop: 14 }}>{L('داستانِ خودت را با AI بیافرین', 'Create your own story with AI')}</h2>
            <p style={{ fontSize: 15.5, lineHeight: 2, color: 'var(--cream-2)', marginTop: 10, maxWidth: 440 }}>
              {L('موضوع، شخصیت و دوره را انتخاب کن؛ هوش مصنوعی متن و تصویرِ اختصاصی می‌سازد. هر آفرینش از کیف پول شما سکه مصرف می‌کند.', 'Pick a theme, character and era; AI generates dedicated text and art. Each creation spends coins from your wallet.')}
            </p>
            <div className="row gap-2 wrap" style={{ marginTop: 18 }}>
              <span className="chip"><CoinGlyph size={14} /> {L('تولید متن — ۳۰ سکه', 'Text generation — 30 coins')}</span>
              <span className="chip"><CoinGlyph size={14} /> {L('تصویر اختصاصی — ۵۰ سکه', 'Dedicated image — 50 coins')}</span>
            </div>
          </div>
          <div className="col gap-2">
            <div className="row gap-1 wrap">
              {OMID.IMAGE_MODELS.map(m => <span key={m.id} className="chip" style={{ fontSize: 12 }}><span style={{ width: 8, height: 8, borderRadius: 99, background: m.tint }} /> {m.name}</span>)}
            </div>
            <button className="btn btn-turq" style={{ justifyContent: 'center', padding: 14, marginTop: 6 }}><Icon name="sparkle" size={16} /> {L('شروع آفرینش', 'Start creating')}</button>
          </div>
        </div>
      </section>

      {checkout && <RaviCheckout bundle={checkout.bundle} gateway={checkout.gateway} setCoins={setCoins} onClose={() => setCheckout(null)} onToast={toast} />}
    </div>
  );
}
window.PricingScreen = PricingScreen;