/* ============================================================
   Төрмен — Broths, Video blog, About, Profile
   ============================================================ */
const { useState:useStateM } = React;

/* ---------- broth card ---------- */
function BrothCard({ broth }){
  const { t, tx } = useLang();
  const { addItem } = useCart();
  const [added,setAdded]=useStateM(false);
  const doAdd=(e)=>{ addItem({ key:'broth-'+broth.id, name:broth.name, vol:broth.vol, label:broth.vol, price:broth.price, ph:'broth' }); setAdded(true); setTimeout(()=>setAdded(false),1400);
    if(window.tormenAddFX) window.tormenAddFX(e&&e.currentTarget, window.imgFor&&window.imgFor('broth-'+broth.id,0), tx(broth.name), t('in_cart')); };
  return (
    <div className="glass lift h-full flex flex-col overflow-hidden">
      <Ph type="broth" imgKey={'broth-'+broth.id} className="aspect-[5/4] w-full" rounded="0" />
      <div className="p-5 flex flex-col flex-1">
        <div className="font-semibold text-base">{tx(broth.name)}</div>
        <p className="text-sm mt-1 mb-3 flex-1" style={{ color:'var(--ink-2)' }}>{tx(broth.desc)}</p>
        <div className="flex flex-wrap gap-1.5 mb-4">
          {tx(broth.tags).map((tg,i)=> <span key={i} className="text-[11px] px-2 py-1 rounded-full" style={{ background:'var(--surface-2)', color:'var(--ink-2)' }}>{tg}</span>)}
        </div>
        <div className="flex items-center justify-between">
          <div>
            <div className="text-xs" style={{ color:'var(--ink-3)' }}>{broth.vol}</div>
            <div className="serif font-semibold tnum">{fmtPrice(broth.price)}</div>
          </div>
          <button onClick={doAdd} className="grid place-items-center rounded-full" style={{ width:42, height:42, background: added?'var(--emerald)':'var(--ember)', color:'var(--on-accent)', transition:'.3s' }}>
            <Icon name={added?'check':'plus'} size={20} stroke={2.2} />
          </button>
        </div>
      </div>
    </div>
  );
}

/* ---------- video card + modal ---------- */
function VideoCard({ video, big, horizontal, plain=false }){
  const { tx, t } = useLang();
  const [open,setOpen]=useStateM(false);
  if(!video) return null;
  const blogCtx = (typeof useBlog === 'function') ? useBlog() : null;
  const cats = blogCtx?.categories || VIDEO_CATS;
  const cat = cats.find(c=>c.id===video.cat) || { id: video.cat, label: { ru: video.cat, kz: video.cat } };
  const ik = (window.VIDEO_IMG && window.VIDEO_IMG[video.cat]) || 'video';
  const vidx = (String(video.id).charCodeAt(String(video.id).length-1) || 0);
  const cover = video.coverUrl;
  const Inner = (
    <div className="relative w-full h-full group">
      {cover
        ? <img src={cover} alt="" className="w-full h-full object-cover" style={{ display:'block' }} loading="lazy" />
        : <Ph type="video" imgKey={ik} idx={vidx} className="w-full h-full" rounded="0" />}
      <div className="absolute inset-0 grid place-items-center">
        <span className="grid place-items-center rounded-full transition-transform group-hover:scale-110" style={{ width: big?72:56, height: big?72:56, background:'rgba(10,8,6,0.45)', backdropFilter:'blur(6px)', border:'1px solid rgba(255,255,255,0.25)' }}>
          <Icon name="play" size={big?26:20} stroke={1.6} style={{ color:'#fff', fill:'#fff', marginLeft:3 }} />
        </span>
      </div>
      <span className="absolute top-3 right-3 text-[11px] font-semibold px-2 py-1 rounded-md tnum" style={{ background:'rgba(10,8,6,0.6)', color:'#fff' }}>{video.dur} {t('min')}</span>
    </div>
  );
  return (
    <>
      <div onClick={()=>setOpen(true)}
        className={`${big && !plain?'glass ':''}${plain?'':'lift '}overflow-hidden cursor-pointer ${horizontal?'flex':'flex flex-col'} h-full`}
        style={plain?undefined:(big?undefined:{ background:'var(--surface-1)', border:'1px solid var(--border-soft)', borderRadius:'var(--radius)' })}>
        <div className={horizontal?'w-40 sm:w-48 shrink-0':'w-full'} style={{ aspectRatio: horizontal?'1/1':(big?'16/9':'16/10') }}>{Inner}</div>
        <div className="p-4 md:p-5 flex flex-col justify-center flex-1">
          <span className="text-[11px] font-semibold uppercase tracking-wider mb-2" style={{ color:'var(--gold)' }}>{tx(cat.label)}</span>
          <div className={`font-semibold leading-snug ${big?'text-xl':'text-base'}`}>{tx(video.title)}</div>
          <div className="text-xs mt-2 flex items-center gap-2" style={{ color:'var(--ink-3)' }}>
            <Icon name="eye" size={13} />{video.views} {t('views')}
          </div>
        </div>
      </div>
      {open && <VideoModal video={video} onClose={()=>setOpen(false)} />}
    </>
  );
}

function VideoModal({ video, onClose }){
  const { tx, t } = useLang();
  const embed = video.embedUrl || (window.youtubeEmbed && window.youtubeEmbed(video.videoUrl));
  const cover = video.coverUrl;
  return (
    <div className="fixed inset-0 z-[120] flex items-center justify-center p-4 fade-in" style={{ background:'rgba(0,0,0,0.8)' }} onClick={onClose}>
      <div className="w-full max-w-3xl pop" onClick={e=>e.stopPropagation()}>
        <div className="relative rounded-2xl overflow-hidden" style={{ aspectRatio:'16/9', boxShadow:'var(--shadow)', background:'#0a0806' }}>
          {embed ? (
            <iframe
              title={tx(video.title)}
              src={embed + (embed.includes('?') ? '&' : '?') + 'autoplay=1'}
              className="w-full h-full absolute inset-0"
              style={{ border:0 }}
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
            />
          ) : (
            <>
              {cover
                ? <img src={cover} alt="" className="w-full h-full object-cover" />
                : <Ph type="video" imgKey={(window.VIDEO_IMG && window.VIDEO_IMG[video.cat]) || 'video'} idx={String(video.id).charCodeAt(String(video.id).length-1)||0} className="w-full h-full" rounded="0" />}
              <div className="absolute inset-0 grid place-items-center">
                <span className="grid place-items-center rounded-full floaty" style={{ width:84, height:84, background:'rgba(226,86,43,0.85)', boxShadow:'0 0 40px var(--glow-ember)' }}>
                  <Icon name="play" size={32} style={{ color:'#fff', fill:'#fff', marginLeft:4 }} />
                </span>
              </div>
              <div className="absolute bottom-0 left-0 right-0 p-4" style={{ background:'linear-gradient(to top,rgba(0,0,0,0.7),transparent)' }}>
                <div className="h-1 rounded-full mb-3" style={{ background:'rgba(255,255,255,0.25)' }}><div className="h-1 rounded-full" style={{ width:'32%', background:'var(--ember)' }} /></div>
                <div className="flex items-center gap-4 text-white">
                  <Icon name="play" size={18} style={{ fill:'#fff' }} /><Icon name="volume-2" size={18} />
                  <span className="text-xs tnum">0:00 / {video.dur}:00</span>
                  <span className="flex-1"></span><Icon name="maximize" size={18} />
                </div>
              </div>
            </>
          )}
          <button onClick={onClose} className="absolute top-3 right-3 grid place-items-center rounded-full z-10" style={{ width:38, height:38, background:'rgba(0,0,0,0.5)', color:'#fff' }}><Icon name="x" size={20} /></button>
        </div>
        <div className="mt-4 px-1">
          <h3 className="serif-title text-2xl">{tx(video.title)}</h3>
          <p className="text-sm mt-2" style={{ color:'var(--ink-3)' }}>{t('watch')} · {video.views} {t('views')} · Төрмен</p>
          {video.videoUrl && !embed && (
            <a href={video.videoUrl} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-2 mt-3 text-sm font-medium" style={{ color:'var(--gold)' }}>
              <Icon name="external-link" size={16} />{video.videoUrl}
            </a>
          )}
        </div>
      </div>
    </div>
  );
}

/* ---------- broths screen ---------- */
function BrothsScreen(){
  const { t, lang } = useLang();
  return (
    <div className="max-w-7xl mx-auto px-5 pt-24 md:pt-28 pb-32">
      <Reveal>
        <div className="eyebrow mb-3">{t('nav_broths')}</div>
        <h1 className="serif-title text-4xl md:text-5xl mb-3">{t('sec_broths_t')}</h1>
        <p className="max-w-xl mb-9" style={{ color:'var(--ink-2)' }}>{lang==='kz'?'Сүйектен ұзақ қайнатылған сорпа — кез келген астың негізі әрі жеке тағам.':'Долго томлённый костный бульон — основа для любого блюда и самостоятельная еда.'}</p>
      </Reveal>
      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
        {BROTHS.map((b,i)=> <Reveal key={b.id} delay={(i%4)*70}><BrothCard broth={b} /></Reveal>)}
      </div>
    </div>
  );
}

/* ---------- blog screen (Sanity CMS → posts; fallback VIDEOS) ---------- */
function BlogScreen(){
  const { t, tx } = useLang();
  const { posts, categories, loading, source } = useBlog();
  const [cat,setCat]=useStateM('all');
  const list = (posts || []).filter(v=>cat==='all'||v.cat===cat);
  const feat = list.find(v=>v.feat)||list[0];
  const rest = list.filter(v=>v!==feat);
  const titleWords = t('sec_blog_t').split(' ');
  const titleLast = titleWords.pop();
  const catList = categories?.length ? categories : VIDEO_CATS;
  return (
    <div className="max-w-7xl mx-auto px-5 pt-24 md:pt-28 pb-32">
      <Reveal>
        <div className="eyebrow mb-3">{t('sec_blog')}</div>
        <h1 className="serif-title text-4xl md:text-5xl mb-6">{titleWords.join(' ')} <span className="grad-text">{titleLast}</span></h1>
      </Reveal>
      <div className="flex flex-wrap gap-2 mb-9">
        {catList.map(c=> <button key={c.id} className={`chip ${cat===c.id?'on':''}`} onClick={()=>setCat(c.id)}>{tx(c.label)}</button>)}
      </div>
      {loading && (
        <div className="text-sm mb-6" style={{ color:'var(--ink-3)' }}>{t('loading') || 'Загрузка…'}</div>
      )}
      {!loading && list.length === 0 && (
        <div className="glass rounded-[var(--r)] p-10 text-center" style={{ color:'var(--ink-2)' }}>
          {source === 'sanity-empty'
            ? (tx({ ru:'В CMS пока нет опубликованных записей. Добавьте пост в Sanity Studio.', kz:'CMS-те әзірге жазба жоқ. Sanity Studio-ға пост қосыңыз.' }))
            : (tx({ ru:'Записи скоро появятся.', kz:'Жазбалар жақында шығады.' }))}
        </div>
      )}
      {feat && <Reveal className="mb-5"><VideoCard video={feat} big /></Reveal>}
      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
        {rest.map((v,i)=> <Reveal key={v.id} delay={(i%3)*70}><VideoCard video={v} /></Reveal>)}
      </div>
    </div>
  );
}

/* ---------- about screen ---------- */
function AboutScreen({ go }){
  const { t, lang } = useLang();
  const values = lang==='kz'
    ? [['sprout','Табиғи','Жайылымда өсірілген мал, гормонсыз'],['hand','Қолмен','Әр жинақ қолмен бөлшектеліп жиналады'],['snowflake','Салқын','Мұздатусыз, тек салқындатылған ет'],['heart','Дастархан','Стейк емес — отбасылық дастарханды сатамыз']]
    : [['sprout','Натурально','Скот на пастбищах, без гормонов'],['hand','Вручную','Каждый набор разделываем и собираем руками'],['snowflake','Охлаждённое','Без заморозки — только охлаждённое мясо'],['heart','Для стола','Мы продаём не стейк, а семейный дастархан']];
  return (
    <div className="max-w-7xl mx-auto px-5 pt-24 md:pt-28 pb-32">
      <Reveal>
        <div className="eyebrow mb-3">{t('sec_about')}</div>
        <h1 className="display text-4xl md:text-6xl mb-6 max-w-3xl">
          {lang==='kz'
            ? <><span className="grad-text">Дала дәстүрін</span> дастарханға жеткіземіз</>
            : <>Доносим <span className="grad-text">традицию степи</span> до вашего стола</>}
        </h1>
      </Reveal>
      <Reveal delay={80}><Ph type="farm" imgKey="farm" className="aspect-[21/9] w-full mb-12" label={t('sec_about')} /></Reveal>

      <div className="grid md:grid-cols-2 gap-10 items-center mb-16">
        <Reveal>
          <h2 className="serif-title text-3xl mb-5">{lang==='kz'?'Бәрі бір отбасынан басталды':'Всё началось с одной семьи'}</h2>
          <p className="leading-relaxed mb-4" style={{ color:'var(--ink-2)' }}>{lang==='kz'?'2019 жылы біз қарапайым ойдан бастадық: қаладағы отбасыларға нағыз дала етін, дайын әрі ойластырылған күйде жеткізу. Бешбармаққа қанша ет керек, қазанға не қажет — бәрін біз есептедік.':'В 2019 мы начали с простой идеи — привозить городским семьям настоящее степное мясо, уже готовое и продуманное. Сколько мяса нужно на бешбармак, что взять для казана — мы всё посчитали за вас.'}</p>
          <p className="leading-relaxed" style={{ color:'var(--ink-2)' }}>{lang==='kz'?'Бүгін Төрмен — 9 400-ден астам отбасының дастарханындағы сенімді есім.':'Сегодня Төрмен — это имя, которому доверяют дастарханы более 9 400 семей.'}</p>
        </Reveal>
        <Reveal delay={80}><Ph type="cut" imgKey="cut" idx={1} className="aspect-[4/3] w-full" /></Reveal>
      </div>

      {/* stats band — inline, no boxes */}
      <Reveal>
        <div className="flex flex-wrap items-center gap-x-8 md:gap-x-12 gap-y-6 py-8 mb-16" style={{ borderTop:'1px solid var(--border-soft)', borderBottom:'1px solid var(--border-soft)' }}>
          {[['24',t('stat_sets')],['9 400+',t('stat_families')],['4.9',t('stat_rating')]].map(([n,l],i)=>(
            <React.Fragment key={i}>
              {i>0 && <span className="w-px self-stretch hidden sm:block" style={{ background:'var(--border)' }}></span>}
              <div>
                <div className="display grad-text tnum text-4xl md:text-5xl">{n}</div>
                <div className="text-xs mt-2" style={{ color:'var(--ink-3)' }}>{l}</div>
              </div>
            </React.Fragment>
          ))}
        </div>
      </Reveal>

      {/* values — boxless rail: gradient line through icon nodes, ghost numbers */}
      <div className="relative mb-16">
        <div aria-hidden="true" className="absolute left-0 right-0 hidden lg:block" style={{ top:55.5, height:1, opacity:.55,
          background:'linear-gradient(90deg, transparent, var(--gold) 14%, var(--ember) 86%, transparent)' }}></div>
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-10">
          {values.map(([ic,ti,de],i)=>(
            <Reveal key={i} delay={i*80}>
              <div className="relative pt-8">
                <span aria-hidden="true" className="display select-none pointer-events-none absolute"
                  style={{ top:0, left:30, fontSize:60, lineHeight:1, color:'var(--ink-4)' }}>0{i+1}</span>
                <span className="relative z-10 grid place-items-center rounded-full"
                  style={{ width:48, height:48, background:'linear-gradient(var(--surface-2),var(--surface-2)), var(--surface-solid)', border:'1px solid var(--border)' }}>
                  <Icon name={ic} size={21} style={{ color:'var(--gold)' }} />
                </span>
                <div className="font-semibold text-lg mt-5 mb-1.5">{ti}</div>
                <p className="text-sm leading-relaxed" style={{ color:'var(--ink-2)' }}>{de}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>

      <Reveal>
        <div className="py-12 md:py-16 lg:flex items-center justify-between gap-10" style={{ borderTop:'1px solid var(--border-soft)', borderBottom:'1px solid var(--border-soft)' }}>
          <div>
            <h2 className="serif-title text-3xl md:text-4xl mb-4">
              {lang==='kz'
                ? <><span className="grad-text">Дастарханыңызды</span> жинайық</>
                : <>Соберём ваш <span className="grad-text">дастархан</span></>}
            </h2>
            <p className="max-w-xl" style={{ color:'var(--ink-2)' }}>{t('cat_sub')}</p>
          </div>
          <button className="btn btn-primary mt-7 lg:mt-0 shrink-0" onClick={()=>go('catalog')}><span className="shine"></span>{t('hero_cta')}<Icon name="arrow-right" size={17} /></button>
        </div>
      </Reveal>
    </div>
  );
}

/* ---------- profile: order ledger row ---------- */
function OrderLedgerRow({ o, i, total, statusMap, go, t, tx, lang }){
  const [sk, sic, sc] = statusMap[o.status];
  const active = o.status === 'way';
  const last = i === total - 1;
  const L = (ru,kz)=> lang==='kz' ? kz : ru;
  const track = ()=>{
    if(o.id) setTrackOrderId(o.id);
    const token = window.getSavedTrackToken?.({ orderId: o.id, displayId: o.no }) || '';
    go('order', o.no ? { id: o.no } : {}, token ? { t: token } : {});
  };
  const repeat = (e)=>{ e.stopPropagation(); go('set', { id:o.items[0].id }); };

  return (
    <Reveal delay={i * 50}>
      <div
        className={`group relative flex gap-4 md:gap-5 py-5 md:py-6 transition-colors ${active ? 'cursor-pointer' : ''}`}
        style={{
          borderBottom: last ? 'none' : '1px solid var(--border-soft)',
          marginLeft: active ? -12 : 0, marginRight: active ? -12 : 0,
          paddingLeft: active ? 12 : 0, paddingRight: active ? 12 : 0,
          borderRadius: active ? 'calc(var(--radius) - 6px)' : 0,
          background: active ? 'color-mix(in srgb, var(--ember) 5%, transparent)' : 'transparent',
        }}
        onClick={active ? track : undefined}
        role={active ? 'button' : undefined}
        tabIndex={active ? 0 : undefined}
        onKeyDown={active ? (e)=>{ if(e.key==='Enter'||e.key===' ') track(); } : undefined}
      >
        {/* status rail */}
        <div className="flex flex-col items-center shrink-0 pt-1" style={{ width:22 }}>
          <span className="grid place-items-center rounded-full shrink-0 transition-transform group-hover:scale-105"
            style={{
              width: active ? 22 : 18, height: active ? 22 : 18,
              background: active ? 'linear-gradient(135deg,var(--ember-2),var(--ember))' : 'var(--surface-2)',
              border: active ? 'none' : '1px solid var(--border)',
              color: active ? 'var(--on-accent)' : sc,
              boxShadow: active ? '0 0 18px color-mix(in srgb,var(--ember) 45%,transparent)' : 'none',
            }}>
            <Icon name={active ? sic : (o.status==='done' ? 'check' : sic)} size={active ? 11 : 9} stroke={2.2} />
          </span>
          {!last && <span className="w-px flex-1 mt-2" style={{ minHeight:28, background:'linear-gradient(180deg,var(--border),transparent)' }} />}
        </div>

        {/* main content */}
        <div className="flex-1 min-w-0">
          <div className="flex items-start justify-between gap-4">
            <div className="min-w-0">
              <div className="flex items-center gap-2.5 flex-wrap mb-1">
                <span className="text-[11px] font-semibold uppercase tracking-[.22em]" style={{ color:'var(--ink-3)' }}>{t('order_no')}</span>
                <span className="serif tnum font-semibold" style={{ fontSize:19, color:'var(--ink)' }}>№{o.no}</span>
                {active && (
                  <span className="inline-flex items-center gap-1 text-[10px] font-bold uppercase tracking-[.16em] px-2 py-0.5 rounded-full"
                    style={{ background:'color-mix(in srgb,var(--ember) 18%,transparent)', color:'var(--ember)' }}>
                    <span className="rounded-full pulse-glow" style={{ width:5, height:5, background:'var(--ember)' }} />
                    {t(sk)}
                  </span>
                )}
              </div>
              <div className="font-semibold text-[15px] md:text-base leading-snug">{tx(o.items[0].name)}</div>
              <div className="text-sm mt-0.5" style={{ color:'var(--ink-2)' }}>
                {o.persons} {t('persons')} · {o.date}
              </div>
            </div>
            <div className="text-right shrink-0 flex flex-col items-end gap-1.5">
              <div className="serif tnum font-semibold text-lg md:text-xl" style={{ color: active ? 'var(--gold)' : 'var(--ink)' }}>{fmtPrice(o.sum)}</div>
              {!active && (
                <div className="text-[10px] font-semibold uppercase tracking-[.14em]" style={{ color:sc }}>{t(sk)}</div>
              )}
              {!active && (
                <button type="button" onClick={repeat}
                  className="inline-flex items-center gap-1 text-xs font-medium opacity-0 group-hover:opacity-100 transition-opacity"
                  style={{ color:'var(--ink-3)', background:'none', border:0, cursor:'pointer', padding:0 }}>
                  <Icon name="rotate-ccw" size={12} stroke={1.8} />
                  {t('pf_repeat')}
                </button>
              )}
            </div>
          </div>

          {active && (
            <div className="flex items-center gap-5 mt-3 pt-3" style={{ borderTop:'1px solid color-mix(in srgb,var(--ember) 12%,transparent)' }}>
              <span className="inline-flex items-center gap-1.5 text-sm font-semibold" style={{ color:'var(--ember)' }}>
                <Icon name="truck" size={14} stroke={2} />
                {L('Отследить','Бақылау')}
                <Icon name="arrow-right" size={14} stroke={2} />
              </span>
              <button type="button" onClick={repeat}
                className="inline-flex items-center gap-1.5 text-sm font-medium transition-colors"
                style={{ color:'var(--ink-3)', background:'none', border:0, cursor:'pointer', padding:0 }}
                onMouseEnter={e=>e.currentTarget.style.color='var(--ink)'}
                onMouseLeave={e=>e.currentTarget.style.color='var(--ink-3)'}>
                <Icon name="rotate-ccw" size={13} stroke={1.8} />
                {t('pf_repeat')}
              </button>
            </div>
          )}
        </div>
      </div>
    </Reveal>
  );
}

/* ---------- profile screen ---------- */
function ProfileScreen({ go }){
  const { t, tx, lang } = useLang();
  const { user, profile, loading, configured, displayName, initial, role, signOut } = useAuth();
  const { orders, loading: ordersLoading, source: ordersSource } = useOrders();
  const L = (ru,kz)=> lang==='kz' ? kz : ru;

  if(loading) return (
    <div className="max-w-4xl mx-auto px-5 pt-32 pb-32 text-center">
      <Icon name="loader" size={28} className="spin mx-auto mb-3" style={{ color:'var(--ember)' }} />
      <p className="text-sm" style={{ color:'var(--ink-3)' }}>{t('pf_loading')}</p>
    </div>
  );

  if(!configured) return <MedusaSetupNotice lang={lang} />;
  if(!user) return <AuthScreen go={go} redirectTo="profile" />;

  const bonus = profile?.bonus_points ?? 0;
  const tgLinked = !!profile?.telegram_linked;
  const roleLabel = role==='admin' ? t('pf_role_admin') : role==='manager' ? t('pf_role_manager') : null;

  const orderList = ordersSource === 'medusa' ? orders : [];
  const statusMap = { way:['pf_status_way','truck','var(--gold)'], done:['pf_status_done','check-circle','var(--emerald)'], cook:['pf_status_cook','loader','var(--ember)'] };

  const handleSignOut = async ()=>{
    await signOut();
    if(window.tormenToast) window.tormenToast({ icon:'log-out', title: t('pf_signout'), sub: displayName || '' });
    go('home');
  };

  return (
    <div className="max-w-4xl mx-auto px-5 pt-24 md:pt-28 pb-32">
      <Reveal>
        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-5 pb-7 mb-8" style={{ borderBottom:'1px solid var(--border-soft)' }}>
          <span className="grid place-items-center rounded-full shrink-0" style={{ width:72, height:72, background:'linear-gradient(135deg,var(--ember-2),var(--wine))', fontSize:28, fontWeight:600, color:'var(--gold-2)', fontFamily:'var(--font-serif)' }}>{initial}</span>
          <div className="flex-1">
            <h1 className="serif-title text-2xl md:text-3xl">{displayName || L('Гость','Қонақ')}</h1>
            {user?.email && (
              <p className="text-sm mt-1" style={{ color:'var(--ink-3)' }}>{user.email}</p>
            )}
            <div className="flex flex-wrap gap-2 mt-2">
              {tgLinked && <span className="badge badge-emerald"><Icon name="send" size={11} stroke={2} />{t('pf_tg_linked')}</span>}
              {bonus > 0 && <span className="badge badge-gold"><Icon name="gift" size={11} stroke={2} />{t('pf_bonus')}: {bonus.toLocaleString('ru-RU')} ₸</span>}
              {roleLabel && <span className="badge badge-ember"><Icon name={role==='admin'?'shield':'briefcase'} size={11} stroke={2} />{roleLabel}</span>}
              {user?.phone && <span className="badge" style={{ color:'var(--ink-2)' }}><Icon name="phone" size={11} stroke={2} />{displayPhone(user.phone)}</span>}
            </div>
          </div>
          <div className="flex flex-col sm:flex-row gap-2 shrink-0">
            <button className="btn btn-gold" onClick={()=>go('loyalty')}><Icon name="crown" size={16} />Дастархан-клуб</button>
            <button className="btn btn-ghost" onClick={()=>go('catalog')}><Icon name="plus" size={16} />{t('nav_catalog')}</button>
            <button className="btn btn-ghost" onClick={handleSignOut}><Icon name="log-out" size={16} />{t('pf_signout')}</button>
          </div>
        </div>
      </Reveal>

      <Reveal delay={60}>
        <div className="flex flex-wrap gap-2 mb-8">
          <button className="chip" onClick={()=>go('favorites')}><Icon name="heart" size={14} />{t('nav_fav')}</button>
        </div>
      </Reveal>

      <Reveal>
        <div className="flex items-end justify-between gap-4 mb-2">
          <div className="eyebrow">{t('pf_orders')}</div>
          <span className="text-xs tnum" style={{ color:'var(--ink-3)' }}>{ordersLoading ? '…' : orderList.length}</span>
        </div>
        <div className="hairline mb-1" />
      </Reveal>

      {ordersLoading && (
        <p className="text-sm py-8 text-center" style={{ color:'var(--ink-3)' }}>
          <Icon name="loader" size={20} className="spin inline mr-2" />{t('pf_loading')}
        </p>
      )}
      {!ordersLoading && orderList.length === 0 && (
        <p className="text-sm py-8 text-center" style={{ color:'var(--ink-3)' }}>
          {L('Заказов пока нет — оформите первый в каталоге.','Тапсырыс әзір жоқ — каталогтан бірінші тапсырысты беріңіз.')}
        </p>
      )}
      <div>
        {orderList.map((o,i)=>(
          <OrderLedgerRow key={o.id || o.no} o={o} i={i} total={orderList.length} statusMap={statusMap}
            go={go} t={t} tx={tx} lang={lang} />
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { BrothCard, VideoCard, VideoModal, BrothsScreen, BlogScreen, AboutScreen, ProfileScreen });