/* ============================================================
   Төрмен — Checkout (multi-step: контакты → доставка → оплата)
   Reads cart via useCart; ends with success state + clears cart.
   ============================================================ */
const { useState:useStateCO, useRef:useRefCO, useEffect:useEffectCO } = React;

const CO_NAME_RE = /[a-zA-Z\u0400-\u04FF\u0500-\u052F]/;

function coValidName(s){
  const t = String(s||'').trim();
  return t.length >= 2 && CO_NAME_RE.test(t);
}
function coSanitizePhone(v){
  return String(v||'').replace(/[^\d+\s()-]/g,'').slice(0, 22);
}
function coValidPhone(s){
  return !!window.formatKzPhone?.(s);
}
function coValidEmail(s){
  const e = String(s||'').trim().toLowerCase();
  return !!e && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
}
function coNormQ(s){
  return String(s || '').toLowerCase().replace(/ё/g, 'е').trim();
}

/* custom picker — bottom sheet на мобиле, непрозрачная панель */
function CoPicker({ icon, value, onChange, options, placeholder, searchPh, emptyPh, searchable, error, showError, pinnedCount=0, pickerId, activeId, onActive }){
  const [q, setQ] = useStateCO('');
  const sheetRef = useRefCO(null);
  const open = activeId === pickerId;
  const invalid = showError && !!error;
  const selected = options.find(o => o.id === value);
  const nq = coNormQ(q);
  const filtered = searchable && nq
    ? options.filter(o => coNormQ(o.label).includes(nq) || coNormQ(o.search).includes(nq))
    : options;

  const close = ()=>{ onActive(null); setQ(''); };
  const toggle = ()=>{ open ? close() : onActive(pickerId); };

  useEffectCO(()=>{
    if(!open) return;
    document.body.classList.add('picker-open');
    const onKey = e=>{ if(e.key === 'Escape') close(); };
    document.addEventListener('keydown', onKey);
    return ()=>{
      document.body.classList.remove('picker-open');
      document.removeEventListener('keydown', onKey);
    };
  }, [open]);

  const pick = id=>{
    onChange(id);
    close();
  };

  const renderItem = o=>(
    <button key={o.id} type="button" role="option" aria-selected={o.id === value}
      className={`ledger-picker-item${o.id === value ? ' on' : ''}`}
      onClick={()=> pick(o.id)}>
      <span className="truncate">{o.label}</span>
      {o.id === value && <Icon name="check" size={15} stroke={2.2} className="shrink-0" style={{ color:'var(--ember)' }} />}
    </button>
  );

  const sheet = open && ReactDOM.createPortal(
    <div className="ledger-picker-portal">
      <button type="button" className="ledger-picker-backdrop" aria-label="Закрыть" onClick={close} />
      <div ref={sheetRef} className="ledger-picker-sheet" role="listbox">
        <div className="ledger-picker-sheet-head">
          <span className="text-sm font-semibold" style={{ color:'var(--ink)' }}>{placeholder}</span>
          <button type="button" className="ledger-picker-close" onClick={close} aria-label="Закрыть">
            <Icon name="x" size={18} />
          </button>
        </div>
        {searchable && (
          <div className="ledger-picker-search">
            <Icon name="search" size={14} style={{ color:'var(--ink-3)' }} />
            <input value={q} onChange={e=> setQ(e.target.value)} placeholder={searchPh} autoFocus />
          </div>
        )}
        <div className="ledger-picker-scroll no-sb">
          {filtered.length === 0
            ? <p className="ledger-picker-empty">{emptyPh || '—'}</p>
            : (pinnedCount > 0 && !nq
              ? <>
                  {filtered.slice(0, pinnedCount).map(renderItem)}
                  {filtered.length > pinnedCount && <div className="ledger-picker-divider" />}
                  {filtered.slice(pinnedCount).map(renderItem)}
                </>
              : filtered.map(renderItem))}
        </div>
      </div>
    </div>,
    document.body
  );

  return (
    <div className={`ledger-picker mb-5${open ? ' is-open' : ''}${invalid ? ' is-invalid' : ''}`}>
      <button type="button" className="ledger-picker-btn" onClick={toggle} aria-expanded={open} aria-haspopup="listbox">
        <Icon name={icon} size={16} className="shrink-0" style={{ color: invalid ? 'var(--ember)' : 'var(--ink-3)' }} />
        <span className={`ledger-picker-value${selected ? '' : ' is-ph'}`}>{selected?.label || placeholder}</span>
        <Icon name="chevron-down" size={16} className="ledger-picker-chevron shrink-0" style={{ color:'var(--ink-3)' }} />
      </button>
      {sheet}
      {invalid && <p className="ledger-field-msg" role="alert">{error}</p>}
    </div>
  );
}

/* module-level controlled field (stable ref → no focus loss on re-render) */

function CoField({ icon, ph, value, onChange, type, inputMode, error, showError, onBlur, autoComplete, list }){
  const invalid = showError && !!error;
  return (
    <div className={`relative ledger-field mb-5${invalid ? ' is-invalid' : ''}`}>
      <Icon name={icon} size={16} className="absolute left-0 top-1/2 -translate-y-1/2" style={{ color: invalid ? 'var(--ember)' : 'var(--ink-3)' }} />
      <input value={value} onChange={e=>onChange(e.target.value)} placeholder={ph} type={type||'text'}
        inputMode={inputMode} autoComplete={autoComplete} onBlur={onBlur} list={list}
        className="w-full py-3.5 pl-8 pr-1 text-sm" style={{ color:'var(--ink)' }} />
      {invalid && <p className="ledger-field-msg" role="alert">{error}</p>}
    </div>
  );
}

function CheckoutScreen({ go }){
  const { lang, t, tx } = useLang();
  const { items, subtotal, clear } = useCart();
  const { user, profile, displayName, updateProfile, configured: authOk } = useAuth();
  const { regionId } = useCatalog();
  const { loadOrders } = useOrders();
  const L = (ru,kz)=> lang==='kz'?kz:ru;
  const [step,setStep]=useStateCO(1);
  const [mode,setMode]=useStateCO('delivery');
  const [pay,setPay]=useStateCO('kaspi');
  const [f,setF]=useStateCO({ name:'', phone:'', email:'', city:'almaty', district:'', street:'', comment:'' });
  const [done,setDone]=useStateCO(false);
  const [orderNo,setOrderNo]=useStateCO('');
  const [trackToken,setTrackToken]=useStateCO('');
  const [busy,setBusy]=useStateCO(false);
  const [err,setErr]=useStateCO('');
  const [touch,setTouch]=useStateCO({});
  const [pickerOpen,setPickerOpen]=useStateCO(null);
  const upd=(k,v)=>setF(p=>({...p,[k]:v}));
  const markTouch=(...keys)=> setTouch(p=>{
    const n = { ...p };
    keys.forEach(k=>{ n[k] = true; });
    return n;
  });

  const total = subtotal;
  const count = items.reduce((s,i)=>s+i.qty,0);
  const medusaReady = !!window.isMedusaConfigured?.() && items.length > 0 && items.every(i=> i.medusaVariantId);

  React.useEffect(()=>{
    if(!user) return;
    const name = profile?.full_name || (displayName && !displayName.includes('@') ? displayName : '');
    setF(p=> ({
      ...p,
      name: p.name || name || '',
      email: p.email || user.email || '',
    }));
  }, [user, profile, displayName, user]);

  React.useEffect(()=>{
    if(step !== 2 || mode !== 'delivery') setPickerOpen(null);
  }, [step, mode]);

  /* empty guard */
  if(items.length===0 && !done){
    return (
      <div className="max-w-2xl mx-auto px-5 pt-28 pb-32 text-center">
        <div className="mx-auto mb-7 grid place-items-center rounded-full" style={{ width:96, height:96, background:'var(--surface-1)', border:'1px solid var(--border)' }}><Icon name="shopping-bag" size={36} stroke={1.4} style={{ color:'var(--ink-3)' }} /></div>
        <h2 className="serif-title text-3xl mb-3">{t('cart_empty')}</h2>
        <button className="btn btn-primary" onClick={()=>go('catalog')}><span className="shine"></span>{t('go_catalog')}<Icon name="arrow-right" size={17} /></button>
      </div>
    );
  }

  /* success state */
  if(done){
    return (
      <div className="max-w-xl mx-auto px-5 pt-28 pb-36 text-center">
        <div className="mx-auto mb-6 grid place-items-center rounded-full pop" style={{ width:104, height:104, background:'linear-gradient(135deg,var(--ember-2),var(--ember))', color:'var(--on-accent)', boxShadow:'0 20px 50px -14px var(--glow-ember)' }}><Icon name="check" size={52} stroke={2.4} /></div>
        <div className="eyebrow mb-3">{L('Заказ оформлен','Тапсырыс рәсімделді')}</div>
        <h1 className="display text-4xl mb-3"><span className="grad-text">{L('Спасибо!','Рахмет!')}</span></h1>
        <p className="mb-2" style={{ color:'var(--ink-2)' }}>{L('Заказ','Тапсырыс')} <span className="tnum" style={{ color:'var(--ink)' }}>№ {orderNo}</span> {L('принят. Мы напишем в Telegram — подтвердим состав и детали доставки.','қабылданды. Telegram арқылы құрам мен жеткізу мәліметін растаймыз.')}</p>
        <p className="mb-6 tnum" style={{ color:'var(--ink-3)' }}>{L('Сумма','Сомасы')}: {fmtPrice(total)}</p>
        {trackToken && orderNo && (
          <div className="glass text-left p-4 mb-6 mx-auto max-w-md space-y-4">
            <div>
              <div className="text-xs font-semibold tracking-wide uppercase mb-2" style={{ color:'var(--ink-3)' }}>{L('Ссылка для отслеживания','Бақылау сілтемесі')}</div>
              <p className="text-sm mb-3" style={{ color:'var(--ink-2)' }}>{L('Мы также отправили её на email. Сохраните ссылку — статус без входа в аккаунт.','Сілтемені email-ге де жібердік. Аккаунтқа кірмей-ақ бақылауға болады.')}</p>
              <div className="flex items-center gap-2 rounded-2xl p-2 pl-3" style={{ background:'var(--surface-1)', border:'1px dashed color-mix(in srgb,var(--gold) 40%,transparent)' }}>
                <span className="text-xs truncate flex-1 tnum" style={{ color:'var(--ink)' }}>{window.buildOrderTrackUrl?.(orderNo, trackToken)}</span>
                <button type="button" className="btn btn-ghost shrink-0 py-2 px-3" onClick={()=>{
                  const url = window.buildOrderTrackUrl?.(orderNo, trackToken);
                  try{ navigator.clipboard.writeText(url); }catch(_){}
                  if(window.tormenToast) window.tormenToast({ icon:'link', title:L('Ссылка скопирована','Сілтеме көшірілді'), sub: L('Можно отправить себе в мессенджер','Өзіңізге мессенджерге жіберуге болады') });
                }}><Icon name="copy" size={15} /></button>
              </div>
            </div>
            <div>
              <p className="text-sm mb-3" style={{ color:'var(--ink-2)' }}>{L('Хотите статусы в Telegram? Нажмите Start в боте — один раз.','Telegram-да күй керек пе? Ботта Start басыңыз — бір рет.')}</p>
              <a className="btn btn-ghost w-full" href={window.buildTelegramTrackLink?.(orderNo, trackToken)} target="_blank" rel="noopener noreferrer">
                <Icon name="send" size={16} />{L('Открыть @tormen_bot','@tormen_bot ашу')}
              </a>
            </div>
          </div>
        )}
        <div className="flex gap-3 justify-center flex-wrap">
          <button className="btn btn-primary" onClick={()=>go('order', orderNo ? { id: orderNo } : {}, trackToken ? { t: trackToken } : {})}><span className="shine"></span><Icon name="truck" size={16} />{L('Отследить заказ','Тапсырысты бақылау')}</button>
          <button className="btn btn-ghost" onClick={()=>go('home')}>{L('На главную','Басты бет')}</button>
        </div>
      </div>
    );
  }

  const stepsMeta=[['user',L('Контакты','Байланыс')],['truck',L('Доставка','Жеткізу')],['credit-card',L('Оплата','Төлем')]];
  const pays=[['kaspi',L('Kaspi перевод','Kaspi аударым'),'smartphone'],['card',L('Картой онлайн','Картамен онлайн'),'credit-card'],['cash',L('Наличными при получении','Қолма-қол'),'wallet'],['tg',L('Через Telegram-бот','Telegram-бот арқылы'),'send']];
  const cityOptions = window.getKzCityOptions?.(lang) || [];
  const districtHasList = !!window.kzHasDistrictList?.(f.city);
  const districtOptions = districtHasList ? (window.getKzDistrictOptions?.(f.city, lang) || []) : [];
  const addrCheck = window.validateKzAddress?.({ city:f.city, district:f.district, street:f.street }, lang) || { valid:false, errors:{} };
  const nameOk = coValidName(f.name);
  const phoneOk = coValidPhone(f.phone);
  const emailOk = user ? true : coValidEmail(f.email);
  const addrOk = mode === 'pickup' || addrCheck.valid;
  const canNext = step===1 ? (nameOk && phoneOk && emailOk) : step===2 ? addrOk : true;

  const nameErr = nameOk ? '' : t('co_err_name');
  const phoneErr = phoneOk ? '' : t('co_err_phone');
  const districtErr = addrCheck.errors?.district
    ? (districtHasList ? t('co_err_district') : t('co_err_district_free'))
    : '';
  const streetErr = addrCheck.errors?.street ? t('co_err_street') : '';
  const emailErr = emailOk ? '' : t('co_err_email');
  const showNameErr = (touch.name || f.name.trim().length > 0) && !nameOk;
  const showPhoneErr = (touch.phone || f.phone.trim().length > 0) && !phoneOk;
  const showEmailErr = !user && (touch.email || f.email.trim().length > 0) && !emailOk;
  const showDistrictErr = (touch.district || f.district.trim().length > 0) && !!districtErr && mode === 'delivery';
  const showStreetErr = (touch.street || f.street.trim().length > 0) && !!streetErr && mode === 'delivery';

  const onPhoneBlur = ()=>{
    markTouch('phone');
    const e164 = window.formatKzPhone?.(f.phone);
    if(e164 && window.displayPhone) setF(p=>({ ...p, phone: window.displayPhone(e164) }));
  };

  const mapErr = (e)=>{
    const m = (e?.message || '').toLowerCase();
    if(m.includes('no_medusa_items') || m.includes('mixed_cart')) return L('Онлайн-заказ пока только для наборов из каталога Medusa. Уберите демо-товары из корзины.','Онлайн тапсырыс әзірге Medusa каталогындағы жинақтарға ғана. Себеттен демо тауарларды алыңыз.');
    if(m.includes('fetch') || m.includes('network')) return t('auth_err_offline');
    return L('Не удалось оформить заказ. Попробуйте ещё раз.','Тапсырысты рәсімдеу сәтсіз. Қайта көріңіз.');
  };

  const placeOrder = async ()=>{
    setErr(''); setBusy(true);
    try{
      if(!medusaReady) throw new Error('mixed_cart');
      const order = await placeMedusaOrder({
        items, form:f, mode, pay, lang,
        regionId, userEmail: user?.email, auth: !!user && authOk,
      });
      const no = String(order.display_id ?? '');
      const token = order._track_token || '';
      setOrderNo(no);
      setTrackToken(token);
      window.saveTrackCredentials?.({ orderId: order.id, displayId: no, token });
      if(user && f.name.trim()) {
        try{ await updateProfile({ full_name: f.name.trim() }); }catch(_){}
      }
      if(user) loadOrders();
      clear();
      setDone(true);
      window.scrollTo(0,0);
    }catch(e){ setErr(mapErr(e)); }
    finally{ setBusy(false); }
  };

  const next=()=>{
    if(step === 1){
      markTouch('name', 'phone', ...(user ? [] : ['email']));
      if(!canNext) return;
      setStep(2);
      return;
    }
    if(step === 2){
      if(mode === 'delivery') markTouch('district', 'street');
      if(!canNext) return;
      setStep(3);
      return;
    }
    placeOrder();
  };

  return (
    <div className="max-w-7xl mx-auto px-5 pt-24 md:pt-28 pb-36">
      <button onClick={()=>go('cart')} className="inline-flex items-center gap-2 text-sm mb-6" style={{ color:'var(--ink-2)' }}><Icon name="arrow-left" size={16} />{L('Корзина','Себет')}</button>
      <div className="eyebrow mb-3">{t('cart')}</div>
      <h1 className="display text-3xl md:text-5xl mb-8"><span className="grad-text">{L('Оформление заказа','Тапсырысты рәсімдеу')}</span></h1>

      {/* step indicator */}
      <div className="flex items-center gap-2 mb-8">
        {stepsMeta.map((s,i)=>{ const n=i+1, on=n===step, dn=n<step; return (
          <React.Fragment key={n}>
            <button onClick={()=>n<step&&setStep(n)} className="flex items-center gap-2.5" style={{ opacity:(on||dn)?1:0.5, cursor:n<step?'pointer':'default' }}>
              <span className="grid place-items-center rounded-full" style={{ width:34, height:34, background: dn?'var(--emerald)':on?'var(--ember)':'var(--surface-3)', color:(dn||on)?'var(--on-accent)':'var(--ink-3)' }}>{dn?<Icon name="check" size={16} stroke={2.4} />:<Icon name={s[0]} size={16} />}</span>
              <span className="text-sm font-semibold hidden sm:block" style={{ color:on?'var(--ink)':'var(--ink-2)' }}>{s[1]}</span>
            </button>
            {i<2 && <span className="flex-1 h-px" style={{ background:'var(--border)' }} />}
          </React.Fragment>
        ); })}
      </div>

      <div className="grid lg:grid-cols-[1fr_320px] gap-8 lg:gap-10 items-start">
        {/* step panel — ledger */}
        <div className="ledger-panel">
          {step===1 && (
            <div className="fade-in">
              <div className="eyebrow mb-4">{L('Контактные данные','Байланыс деректері')}</div>
              <CoField icon="user" ph={t('name_f')} value={f.name}
                onChange={v=>upd('name', v)} autoComplete="name"
                error={nameErr} showError={showNameErr}
                onBlur={()=>markTouch('name')} />
              <CoField icon="phone" ph={t('co_phone_ph')} value={f.phone}
                onChange={v=>upd('phone', coSanitizePhone(v))} type="tel" inputMode="tel"
                autoComplete="tel" error={phoneErr} showError={showPhoneErr}
                onBlur={onPhoneBlur} />
              {!user && (
                <>
                  <CoField icon="mail" ph={t('co_email_ph')} value={f.email}
                    onChange={v=>upd('email', v)} type="email" inputMode="email"
                    autoComplete="email" error={emailErr} showError={showEmailErr}
                    onBlur={()=>markTouch('email')} />
                  <p className="text-xs -mt-2 mb-4" style={{ color:'var(--ink-3)' }}>{t('co_email_hint')}</p>
                </>
              )}
            </div>
          )}
          {step===2 && (
            <div className="fade-in">
              <div className="eyebrow mb-3">{L('Способ получения','Алу тәсілі')}</div>
              <div className="ledger-seg mb-6">
                {[['delivery',L('Доставка','Жеткізу'),'truck'],['pickup',L('Самовывоз','Өзі алу'),'store']].map(([m,lbl,ic])=>(
                  <button key={m} type="button" onClick={()=>setMode(m)} className={mode===m?'on':''}>
                    <span className="inline-flex items-center justify-center gap-1.5"><Icon name={ic} size={15} stroke={2} />{lbl}</span>
                  </button>
                ))}
              </div>
              {mode==='delivery' ? (
                <div>
                  <CoPicker icon="map-pin" pickerId="city" activeId={pickerOpen} onActive={setPickerOpen}
                    value={f.city}
                    onChange={v=> setF(p=>({ ...p, city:v, district:'' }))}
                    options={cityOptions} placeholder={t('co_city_ph')}
                    searchPh={t('co_city_search')} emptyPh={t('co_no_results')}
                    searchable pinnedCount={3} showError={false} />
                  {districtHasList ? (
                    <CoPicker icon="map" pickerId="district" activeId={pickerOpen} onActive={setPickerOpen}
                      value={districtOptions.find(d=> d.label === f.district)?.id || ''}
                      onChange={id=>{
                        const d = districtOptions.find(x=> x.id === id);
                        if(d){ upd('district', d.label); markTouch('district'); }
                      }}
                      options={districtOptions} placeholder={t('co_district_ph')}
                      searchPh={t('co_district_search')} emptyPh={t('co_no_results')} searchable
                      error={districtErr} showError={showDistrictErr} />
                  ) : (
                    <CoField icon="map" ph={t('co_district_ph_free')} value={f.district}
                      onChange={v=> upd('district', v)}
                      error={districtErr} showError={showDistrictErr}
                      onBlur={()=> markTouch('district')} />
                  )}
                  <CoField icon="map-pin" ph={t('co_street_ph')} value={f.street}
                    onChange={v=>upd('street', v)} autoComplete="street-address"
                    error={streetErr} showError={showStreetErr}
                    onBlur={()=>markTouch('street')} />
                  <CoField icon="message-square" ph={L('Комментарий (подъезд, этаж)','Пікір (кіреберіс, қабат)')} value={f.comment}
                    onChange={v=>upd('comment', v)} showError={false} />
                </div>
              ) : (
                <p className="ledger-note inline-flex items-center gap-2 w-full">
                  <Icon name="map-pin" size={15} style={{ color:'var(--gold)' }} />
                  {window.TORMEN_ENV?.app?.address || 'Алматы'} · {window.TORMEN_ENV?.app?.workingHours || '09:00–21:00'}
                </p>
              )}
            </div>
          )}
          {step===3 && (
            <div className="fade-in">
              <div className="eyebrow mb-4">{L('Способ оплаты','Төлем әдісі')}</div>
              {pays.map(([id,lbl,ic])=>(
                <button key={id} type="button" onClick={()=>setPay(id)} className={`ledger-row-btn ${pay===id?'on':''}`}>
                  <span className="ledger-radio" />
                  <Icon name={ic} size={17} style={{ color:'var(--gold)' }} />
                  <span className="font-medium text-sm flex-1">{lbl}</span>
                </button>
              ))}
            </div>
          )}

          {!medusaReady && step === 3 && (
            <p className="text-sm mb-3" style={{ color:'var(--gold)' }}>
              {L('Для онлайн-заказа добавьте наборы из каталога (Medusa). Демо-товары пока не отправляются.','Онлайн тапсырыс үшін каталогтан Medusa жинақтарын қосыңыз. Демо тауарлар әзір жіберілмейді.')}
            </p>
          )}
          {err && <p className="text-sm mb-3" style={{ color:'var(--ember)' }}>{err}</p>}
          <div className="hairline mt-8 mb-6" />
          <div className="flex gap-3">
            {step>1 && <button className="btn btn-ghost" onClick={()=>setStep(step-1)} disabled={busy}><Icon name="arrow-left" size={16} />{L('Назад','Артқа')}</button>}
            <button className="btn btn-primary flex-1" disabled={busy || (step===3 && !medusaReady)} style={{ opacity:(!busy && (step<3 || medusaReady))?1:0.5 }} onClick={next}>
              <span className="shine"></span>
              {busy ? L('Оформляем…','Рәсімдеуде…') : step<3 ? (<>{L('Далее','Әрі қарай')}<Icon name="arrow-right" size={17} /></>) : (<><Icon name="check" size={17} stroke={2.2} />{L('Оформить заказ','Тапсырыс беру')}</>)}
            </button>
          </div>
        </div>

        {/* order summary — ledger */}
        <aside className="ledger-aside lg:sticky lg:top-24">
          <div className="eyebrow mb-4">{L('Ваш заказ','Тапсырысың')}</div>
          <div className="space-y-4 mb-5 no-sb" style={{ maxHeight:240, overflow:'auto' }}>
            {items.map((i,idx)=>(
              <div key={i.key} className="flex items-center gap-3 pb-4" style={{ borderBottom: idx < items.length - 1 ? '1px solid var(--border-soft)' : 'none' }}>
                <Ph type={i.ph} imgKey={i.setId||i.key} photoSrc={i.thumb} medusaPhoto={!!i.thumb} className="w-11 h-11 shrink-0" rounded="10px" />
                <div className="flex-1 min-w-0"><div className="text-sm font-medium truncate">{tx(i.name)}</div><div className="text-xs tnum" style={{ color:'var(--ink-3)' }}>{i.qty} × {fmtPrice(i.price)}</div></div>
                <div className="text-sm tnum font-semibold whitespace-nowrap">{fmtPrice(i.price*i.qty)}</div>
              </div>
            ))}
          </div>
          <div className="space-y-3">
            <Row label={t('subtotal')} value={fmtPrice(subtotal)} />
            <div className="hairline my-4" />
            <Row label={t('total')} value={fmtPrice(total)} big />
          </div>
          <p className="text-xs mt-4" style={{ color:'var(--ink-3)' }}>{L('Стоимость доставки уточним при подтверждении заказа','Жеткізу құнын тапсырысты растау кезінде нақтылаймыз')}</p>
        </aside>
      </div>
    </div>
  );
}

Object.assign(window, { CheckoutScreen });