/* ============================================================
   Төрмен — Catalog, SetCard, Product detail
   ============================================================ */
const { useState:useStateK, useEffect:useEffectCat } = React;

/* ---------- reusable set card ---------- */
function SetCard({ set, go, sectionTag }){
  const { t, tx } = useLang();
  const { add } = useCart();
  const [added, setAdded] = useStateK(false);
  const v0 = set.variants[0];
  const doAdd = (e)=>{ e.stopPropagation(); add(set, v0); setAdded(true); setTimeout(()=>setAdded(false),1400);
    if(window.tormenAddFX) window.tormenAddFX(e.currentTarget, window.setImg?.(set,0)||(window.imgFor&&window.imgFor(set.id,0)), tx(set.name), t('in_cart')); };
  return (
    <div className="glass glass-halo lift h-full flex flex-col overflow-hidden cursor-pointer" onClick={()=>go('set',{ id:set.id })}>
      <div className="relative">
        <Ph type={set.ph} imgKey={set.id} photoSrc={window.setImg?.(set,0)} medusaPhoto={window.setHasMedusaPhotos?.(set)} className="aspect-[4/3] w-full" rounded="0" />
        <div className="absolute top-3 right-3"><HeartButton id={set.id} floating size={38} /></div>
        {set.badge && (
          <span className={`badge ${set.badge==='gold'?'badge-gold':'badge-ember'} absolute top-3 left-3`} style={{ backdropFilter:'blur(8px)' }}>
            <Icon name={set.badge==='gold'?'crown':'flame'} size={11} stroke={2} />{set.badge==='gold'?(tx({ru:'Премиум',kz:'Премиум'})):(tx({ru:'Хит',kz:'Хит'}))}
          </span>
        )}
        <span className="absolute bottom-3 left-3 flex gap-1.5">
          {set.variants.map((v,i)=> <span key={v.medusaVariantId||i} className="rounded-full text-xs font-semibold tnum px-2.5 py-1" style={{ background:'rgba(10,8,6,0.55)', backdropFilter:'blur(6px)', color:'#fff', border:'1px solid rgba(255,255,255,0.14)' }}>{window.variantChip?.(v) ?? v.persons}</span>)}
        </span>
      </div>
      <div className="p-5 flex flex-col flex-1">
        {sectionTag && (
          <div className="text-[10px] font-semibold uppercase tracking-wider mb-1.5" style={{ color:'var(--gold)' }}>{sectionTag}</div>
        )}
        <div className="font-semibold text-lg leading-snug">{tx(set.name)}</div>
        <div className="text-sm mt-1 mb-4 flex-1" style={{ color:'var(--ink-2)' }}>{tx(set.tagline)}</div>
        <div className="flex items-end justify-between gap-3">
          <div>
            <div className="text-xs" style={{ color:'var(--ink-3)' }}>{t('from')}</div>
            <div className="serif text-xl font-semibold tnum" style={{ color:'var(--ink)' }}>{fmtPrice(minPrice(set))}</div>
          </div>
          <button onClick={doAdd} className="btn btn-primary" style={{ padding:'11px 18px' }}>
            <span className="shine"></span>
            <Icon name={added?'check':'plus'} size={16} stroke={2.2} />{added?t('in_cart'):t('add_cart')}
          </button>
        </div>
      </div>
    </div>
  );
}

/* ---------- product card (мясная лавка / деликатесы / полуфабрикаты) ---------- */
function ProductCard({ p }){
  const { t, tx, lang } = useLang();
  const { addItem } = useCart();
  const L = (ru,kz)=> lang==='kz'?kz:ru;
  const [w, setW] = useStateK(p.weights && p.weights.length>1 ? p.weights[1] : ((p.weights && p.weights[0]) || 1));
  const [added, setAdded] = useStateK(false);
  const price = Math.round(p.ppu * w);
  const doAdd = (e)=>{
    addItem({ key:'p-'+p.id+'-'+w, name:p.name, label:w+' '+L('кг','кг'), weight:w+' '+L('кг','кг'), price, ph:p.ph });
    setAdded(true); setTimeout(()=>setAdded(false),1400);
    if(window.tormenAddFX) window.tormenAddFX(e && e.currentTarget, window.imgFor && window.imgFor(p.id,0), tx(p.name), t('in_cart'));
  };
  return (
    <div className="glass lift h-full flex flex-col overflow-hidden">
      <div className="relative">
        <Ph type={p.ph} imgKey={p.id} className="aspect-square w-full" rounded="0" />
        <div className="absolute top-3 right-3"><HeartButton id={p.id} floating size={36} /></div>
        {p.badge && (
          <span className={`badge ${p.badge==='gold'?'badge-gold':'badge-ember'} absolute top-3 left-3`} style={{ backdropFilter:'blur(8px)' }}>
            <Icon name={p.badge==='gold'?'crown':'flame'} size={11} stroke={2} />{p.badge==='gold'?tx({ru:'Премиум',kz:'Премиум'}):tx({ru:'Хит',kz:'Хит'})}
          </span>
        )}
      </div>
      <div className="p-4 flex flex-col flex-1">
        <div className="font-semibold leading-snug">{tx(p.name)}</div>
        <div className="text-xs mt-1 truncate" style={{ color:'var(--ink-2)' }}>{tx(p.desc)}</div>
        <div className="flex flex-wrap gap-1.5 mt-auto pt-3 mb-3">
          {(p.weights||[0.5,1,2]).map(wt=>(
            <button key={wt} className={`chip tnum ${w===wt?'on':''}`} style={{ padding:'6px 11px' }} onClick={()=>setW(wt)}>
              {wt} {L('кг','кг')}
            </button>
          ))}
        </div>
        <div className="flex items-end justify-between gap-3">
          <div>
            <div className="serif text-lg font-semibold tnum" style={{ color:'var(--ink)' }}>{fmtPrice(price)}</div>
            <div className="text-[11px] tnum" style={{ color:'var(--ink-3)' }}>{fmtPrice(p.ppu)}/{L('кг','кг')}</div>
          </div>
          <button onClick={doAdd} aria-label={t('add_cart')} className="grid place-items-center rounded-full shrink-0"
            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>
  );
}

/* ---------- catalog screen ---------- */
function CatalogEmptyState({ sectionName, openChat, L, lang }){
  const askAi = ()=>{
    if(!openChat) return;
    openChat({
      autoSend: true,
      message: lang==='kz'
        ? `"${sectionName}" бөлімінде тауар жоқ. Қонақ саны мен бюджетке қарай не ұсынар едіңіз?`
        : `В разделе «${sectionName}» пока нет товаров. Что посоветуете под число гостей и бюджет?`,
    });
  };
  return (
    <div className="text-center py-14 px-5 rounded-2xl" style={{ background:'var(--surface-1)', border:'1px solid var(--border-soft)' }}>
      <div className="mx-auto mb-4 grid place-items-center rounded-full" style={{ width:56, height:56, background:'var(--surface-2)' }}>
        <Icon name="package" size={26} style={{ color:'var(--ink-3)' }} />
      </div>
      <p className="font-semibold mb-2" style={{ color:'var(--ink)' }}>
        {L(`В разделе «${sectionName}» пока пусто`,`«${sectionName}» бөлімінде әлі бос`)}
      </p>
      <p className="text-sm mb-6 max-w-sm mx-auto" style={{ color:'var(--ink-2)' }}>
        {L('Напишите — подберём вручную или подскажем альтернативу из других разделов.','Жазыңыз — қолмен таңдаймыз немесе басқа бөлімнен ұсынамыз.')}
      </p>
      <div className="flex flex-wrap gap-2 justify-center">
        <button type="button" className="btn btn-primary" onClick={askAi}>
          <Icon name="sparkles" size={16} />{L('Спросить Ai-повара','Ai-аспаздан сұрау')}
        </button>
        <button type="button" className="btn btn-ghost" onClick={()=> window.openTelegram?.()}>
          <Icon name="send" size={16} />Telegram
        </button>
      </div>
    </div>
  );
}

function CatalogScreen({ go, openChat }){
  const { t, tx, lang } = useLang();
  const { sets, sections, loading: catalogLoading } = useCatalog();
  const L = (ru,kz)=> lang==='kz'?kz:ru;
  const [topCat, setTopCat] = useStateK('sets');
  const [sort, setSort] = useStateK('pop');
  const [query, setQuery] = useStateK('');
  const [personFilter, setPersonFilter] = useStateK(null);

  // Static PRODUCTS/BROTHS/SETS — только локальный прототип без Medusa.
  // Когда API настроен, витрина = только Published товары из админки.
  const medusaLive = !!window.isMedusaConfigured?.();
  const PRODS = medusaLive ? [] : (window.PRODUCTS || []);
  const shopSections = sections?.length ? sections : (window.DEFAULT_SHOP_SECTIONS || []);
  const tabs = shopSections.map(s=> ({
    id: s.handle,
    label: { ru: s.name, kz: s.name_kz || s.name },
    icon: s.icon || 'package',
  }));
  const recentList = window.recentProducts?.(sets) || [];

  useEffectCat(()=>{
    if(shopSections.length && !shopSections.some(s=> s.handle === topCat)){
      setTopCat(shopSections[0].handle);
    }
  }, [shopSections, topCat]);

  const isProd = topCat==='meat' || topCat==='delicacy' || topCat==='semi';
  const activeTab = tabs.find(x=>x.id===topCat) || tabs[0];
  const sectionProducts = window.medusaForSection?.(sets, topCat) || [];

  const sortMedusa = (arr)=>{
    if(sort==='cheap') return [...arr].sort((a,b)=>minPrice(a)-minPrice(b));
    if(sort==='exp')   return [...arr].sort((a,b)=>minPrice(b)-minPrice(a));
    return [...arr].sort((a,b)=>(b.best?1:0)-(a.best?1:0));
  };

  let baseList = sectionProducts;
  if(topCat==='sets' && personFilter != null){
    baseList = baseList.filter(s=> window.setMatchesPersons?.(s, personFilter));
  }
  const q = String(query || '').toLowerCase().replace(/ё/g, 'е').trim();
  if(q){
    baseList = baseList.filter(s=> window.productSearchText?.(s, tx).includes(q));
  }
  let medusaList = sortMedusa(baseList);

  let plist = (!medusaLive && !medusaList.length && isProd && !q) ? PRODS.filter(p=>p.cat===topCat) : [];
  if(sort==='cheap') plist=[...plist].sort((a,b)=>a.ppu-b.ppu);
  if(sort==='exp')   plist=[...plist].sort((a,b)=>b.ppu-a.ppu);
  if(sort==='pop')   plist=[...plist].sort((a,b)=>(b.best?1:0)-(a.best?1:0));

  const useStaticBroths = !medusaLive && topCat==='broths' && !medusaList.length && !q;
  const gridCols = (topCat==='sets' || medusaList.length) ? 'sm:grid-cols-2 lg:grid-cols-3' : 'sm:grid-cols-2 lg:grid-cols-4';
  const hasActiveFilters = !!q || personFilter != null;
  const sectionEmpty = !catalogLoading && !q && sectionProducts.length === 0;
  const filterEmpty = !catalogLoading && medusaList.length === 0 && !sectionEmpty && (hasActiveFilters || sectionProducts.length > 0);

  const title = topCat==='sets' ? t('cat_title') : tx(activeTab?.label || { ru: topCat, kz: topCat });
  const sub = topCat==='sets' ? t('cat_sub')
    : topCat==='broths' ? L('Наваристые бульоны долгого томления — разогреть и подать','Ұзақ қайнатылған наварлы сорпалар — жылытып, дастарханға қойыңыз')
    : L('Товары раздела — выберите вариант и оформите заказ','Бөлім тауарлары — нұсқаны таңдап, тапсырыс беріңіз');
  const storageHint = window.CATALOG_STORAGE_HINT?.[lang] || window.CATALOG_STORAGE_HINT?.ru;
  const countLabel = topCat==='sets' ? t('cat_found') : L('товаров в подборке','тауар таңдауда');
  const showMedusaTools = sectionProducts.length > 0 || medusaList.length > 0;

  const askAiForGuests = (n)=>{
    if(!openChat) return;
    const sec = tx(activeTab?.label || { ru: topCat, kz: topCat });
    openChat({
      autoSend: true,
      message: lang==='kz'
        ? `«${sec}» бөлімінен ${n} қонаққа жинақ таңдаңыз. Бюджетті ескеріңіз.`
        : `Подбери из раздела «${sec}» набор на ${n} гостей. Учти бюджет и состав.`,
    });
  };

  return (
    <div className="catalog-page max-w-7xl mx-auto px-5 pt-24 md:pt-28 pb-32">
      <style>{`
        .catalog-page .catalog-toolbar{
          padding:0 0 12px;margin-bottom:1.25rem;
        }
        .catalog-page .catalog-search{
          display:flex;align-items:center;gap:10px;width:100%;
          padding:10px 0;border-radius:0;
          background:transparent;border:none;
          border-bottom:1px solid var(--border-soft);
        }
        .catalog-page .catalog-search:focus-within{border-bottom-color:color-mix(in srgb,var(--gold) 45%,transparent)}
        .catalog-page .catalog-search input{
          flex:1;border:none;background:transparent;outline:none;
          font-size:14px;color:var(--ink);
        }
        .catalog-page .catalog-search input::placeholder{color:var(--ink-3)}
        .catalog-page .catalog-ai{
          display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;
          font-size:13px;color:var(--ink-2);
        }
        .catalog-page .catalog-ai .chip{padding:5px 11px;font-size:12px}
      `}</style>

      <Reveal>
        <div className="eyebrow mb-3">{L('Каталог','Каталог')}</div>
        <h1 className="serif-title text-4xl md:text-5xl mb-3"><span className="grad-text">{title}</span></h1>
        <p className="max-w-xl mb-3" style={{ color:'var(--ink-2)' }}>{sub}</p>
        {topCat==='sets' && openChat && (
          <div className="catalog-ai mb-4">
            <span className="inline-flex items-center gap-1.5 shrink-0">
              <Icon name="sparkles" size={14} style={{ color:'var(--gold)' }} />
              {L('Подобрать с Ai-поваром на','Ai-аспазбен таңдау')}
            </span>
            {[3,5,10,15].map(n=>(
              <button key={n} type="button" className="chip tnum" onClick={()=> askAiForGuests(n)}>{n}</button>
            ))}
            <span className="text-xs" style={{ color:'var(--ink-3)' }}>{t('persons')}</span>
          </div>
        )}
        <p className="text-xs mb-6 inline-flex items-center gap-2" style={{ color:'var(--ink-3)' }}>
          <Icon name="snowflake" size={13} style={{ color:'var(--gold)' }} />{storageHint}
        </p>
        {catalogLoading && medusaList.length === 0 && !useStaticBroths && !plist.length && (
          <p className="text-xs -mt-4 mb-6 inline-flex items-center gap-2" style={{ color:'var(--ink-3)' }}>
            <Icon name="loader" size={14} className="spin" />{L('Загрузка каталога…','Каталог жүктелуде…')}
          </p>
        )}
        {!catalogLoading && sets.some(s=> s._needsCategory) && (
          <p className="text-xs -mt-4 mb-6 px-3 py-2 rounded-xl" style={{ color:'var(--gold)', background:'rgba(212,168,75,0.1)', border:'1px solid rgba(212,168,75,0.25)' }}>
            {L('Есть товары без категории — выберите раздел в Organize → Category (наборы, мясо, бульоны…).','Категориясы жоқ тауарлар бар — Organize → Category бөлімін таңдаңыз.')}
          </p>
        )}
      </Reveal>

      <div className="catalog-toolbar">
        <label className="catalog-search mb-4">
          <Icon name="search" size={16} style={{ color:'var(--ink-3)', flexShrink:0 }} />
          <input
            value={query}
            onChange={e=> setQuery(e.target.value)}
            placeholder={L('Поиск по каталогу…','Каталогтан іздеу…')}
          />
          {query && (
            <button type="button" onClick={()=> setQuery('')} aria-label={L('Очистить','Тазалау')}
              className="grid place-items-center rounded-full shrink-0" style={{ width:26, height:26, color:'var(--ink-3)' }}>
              <Icon name="x" size={14} />
            </button>
          )}
        </label>

        <div className="flex flex-wrap gap-2 md:gap-2.5">
          {tabs.map(tb=>(
            <button key={tb.id} type="button" onClick={()=>{ setTopCat(tb.id); setSort('pop'); setPersonFilter(null); setQuery(''); }}
              className={`chip ${topCat===tb.id?'on':''}`} style={{ padding:'10px 16px', fontSize:13 }}>
              <Icon name={tb.icon} size={15} stroke={2} />{tx(tb.label)}
            </button>
          ))}
        </div>
      </div>

      {topCat==='sets' && (
        <div className="flex flex-wrap items-center gap-2 mt-6 mb-2">
          <span className="text-xs mr-0.5 shrink-0" style={{ color:'var(--ink-3)' }}>{t('filter_persons')}:</span>
          {(window.PERSON_FILTERS || []).map(f=>(
            <button key={String(f.id)} type="button" className={`chip tnum ${personFilter===f.id?'on':''}`} onClick={()=> setPersonFilter(f.id)}>
              {L(f.ru, f.kz)}
            </button>
          ))}
        </div>
      )}

      {showMedusaTools && (
        <div className="flex flex-wrap items-center gap-2 justify-end mb-8 mt-4">
          <span className="text-xs mr-0.5 shrink-0" style={{ color:'var(--ink-3)' }}>{L('Сортировка','Сұрыптау')}:</span>
          {[['pop','sort_pop'],['cheap','sort_cheap'],['exp','sort_exp']].map(([v,k])=>(
            <button key={v} type="button" className={`chip ${sort===v?'on':''}`} onClick={()=>setSort(v)}>{t(k)}</button>
          ))}
        </div>
      )}

      {medusaList.length > 0 && (
        <div>
          <div className="text-sm mb-5 tnum" style={{ color:'var(--ink-3)' }}>
            <span className="serif font-semibold" style={{ color:'var(--ink)', fontSize:18 }}>{medusaList.length}</span> {countLabel}
          </div>
          <div className={`grid ${gridCols} gap-5`}>
            {medusaList.map((s,i)=>(
              <Reveal key={s.id} delay={(i%3)*70}>
                <SetCard set={s} go={go} />
              </Reveal>
            ))}
          </div>
        </div>
      )}

      {filterEmpty && (
        <div className="text-center py-16" style={{ color:'var(--ink-3)' }}>{t('nothing')}</div>
      )}

      {sectionEmpty && !isProd && !useStaticBroths && (
        <CatalogEmptyState sectionName={tx(activeTab?.label || { ru: topCat, kz: topCat })} openChat={openChat} L={L} lang={lang} />
      )}

      {medusaList.length === 0 && isProd && !q && (plist.length===0 ? (
        <CatalogEmptyState sectionName={tx(activeTab?.label)} openChat={openChat} L={L} lang={lang} />
      ) : (
        <div>
          <div className="text-sm mb-5 tnum" style={{ color:'var(--ink-3)' }}>
            <span className="serif font-semibold" style={{ color:'var(--ink)', fontSize:18 }}>{plist.length}</span> {countLabel}
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {plist.map((p,i)=> <Reveal key={p.id} delay={(i%4)*60}><ProductCard p={p} /></Reveal>)}
          </div>
        </div>
      ))}

      {medusaList.length === 0 && useStaticBroths && (
        <div>
          <div className="text-sm mb-5 tnum" style={{ color:'var(--ink-3)' }}>
            <span className="serif font-semibold" style={{ color:'var(--ink)', fontSize:18 }}>{BROTHS.length}</span> {countLabel}
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {BROTHS.map((b,i)=> <Reveal key={b.id} delay={(i%4)*60}><BrothCard broth={b} /></Reveal>)}
          </div>
        </div>
      )}

      {recentList.length > 0 && (
        <div className="mt-16 pt-10" style={{ borderTop:'1px solid var(--border-soft)' }}>
          <div className="eyebrow mb-4">{L('Недавно смотрели','Жақында қаралған')}</div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {recentList.map((s,i)=>(
              <Reveal key={'recent-'+s.id} delay={i*50}>
                <SetCard set={s} go={go} />
              </Reveal>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

/* ---------- product image lightbox ---------- */
function ProductLightbox({ set, gi, setGi, onClose }){
  const { tx } = useLang();
  const imgs = window.setImageList?.(set) || [];
  const n = imgs.length || 4;
  const move = (d)=> setGi(g=> (g+d+n)%n);
  React.useEffect(()=>{
    const h=(e)=>{ if(e.key==='Escape') onClose(); if(e.key==='ArrowRight') move(1); if(e.key==='ArrowLeft') move(-1); };
    window.addEventListener('keydown',h); return ()=>window.removeEventListener('keydown',h);
  },[]);
  return (
    <div className="fixed inset-0 z-[140] flex items-center justify-center p-4 fade-in" style={{ background:'rgba(0,0,0,0.92)' }} onClick={onClose}>
      <button onClick={onClose} className="absolute top-4 right-4 grid place-items-center rounded-full" style={{ width:42, height:42, background:'rgba(255,255,255,0.12)', color:'#fff' }}><Icon name="x" size={22} /></button>
      <button onClick={(e)=>{e.stopPropagation();move(-1);}} className="absolute left-3 md:left-6 grid place-items-center rounded-full" style={{ width:46, height:46, background:'rgba(255,255,255,0.12)', color:'#fff' }}><Icon name="chevron-left" size={24} /></button>
      <button onClick={(e)=>{e.stopPropagation();move(1);}} className="absolute right-3 md:right-6 grid place-items-center rounded-full" style={{ width:46, height:46, background:'rgba(255,255,255,0.12)', color:'#fff' }}><Icon name="chevron-right" size={24} /></button>
      <div className="pop" onClick={e=>e.stopPropagation()} style={{ maxWidth:'min(920px,92vw)' }}>
        <img src={window.normalizeMedusaAssetUrl?.(window.setImg?.(set, gi))||window.setImg?.(set, gi)||window.imgFor(set.id, gi)} alt={tx(set.name)} className="w-full object-contain rounded-2xl" style={{ maxHeight:'78vh', boxShadow:'var(--shadow)' }} />
        <div className="flex items-center justify-center gap-2 mt-4">
          {Array.from({length:n},(_,i)=>i).map(i=> <button key={i} onClick={(e)=>{e.stopPropagation();setGi(i);}} className="rounded-full transition-all" style={{ width:i===gi?22:8, height:8, background:i===gi?'var(--ember)':'rgba(255,255,255,0.4)' }} />)}
        </div>
      </div>
    </div>
  );
}

/* ---------- product detail ---------- */
function ProductScreen({ id, go, openChat }){
  const { t, tx, lang } = useLang();
  const { add } = useCart();
  const { sets, loading: catalogLoading } = useCatalog();
  const set = window.findSetById?.(sets, id) || sets.find(s=> s.id === id);
  const [vi, setVi] = useStateK(0);
  const [gi, setGi] = useStateK(0);
  const [lb, setLb] = useStateK(false);
  const [added, setAdded] = useStateK(false);
  const [storageOpen, setStorageOpen] = useStateK(false);
  const L = (ru,kz)=> lang==='kz'?kz:ru;

  useEffectCat(()=>{
    if(set?.id) window.pushRecentView?.(set.id);
  }, [set?.id]);

  if(catalogLoading && !set) return (
    <div className="max-w-7xl mx-auto px-5 pt-32 text-center" style={{ color:'var(--ink-3)' }}>
      <Icon name="loader" size={22} className="spin mx-auto mb-3" />
      {L('Загрузка товара…','Тауар жүктелуде…')}
    </div>
  );
  if(!set) return (
    <div className="max-w-7xl mx-auto px-5 pt-32 pb-24 text-center">
      <p className="mb-4" style={{ color:'var(--ink-3)' }}>{L('Товар не найден','Тауар табылмады')}</p>
      <button onClick={()=>go('catalog')} className="btn btn-ghost"><Icon name="arrow-left" size={16} />{t('back')}</button>
    </div>
  );

  const v = set.variants[vi] || set.variants[0];
  if(!v) return (
    <div className="max-w-7xl mx-auto px-5 pt-32 text-center" style={{ color:'var(--ink-3)' }}>
      {L('Нет варианта с ценой — добавьте цену KZT в админке','Нұсқа жоқ — админке KZT бағасын қосыңыз')}
    </div>
  );
  const perPerson = v.persons > 0 ? Math.round(v.price/v.persons) : 0;
  const recipes = VIDEOS.filter(x=>x.cat==='recipe').slice(0,2);
  const gallery = window.setImageList?.(set) || [];
  const hasMedusaPhotos = gallery.length > 0;
  const galleryCount = hasMedusaPhotos ? gallery.length : 4;
  const items = tx(set.items);

  return (
    <div className="product-page max-w-7xl mx-auto px-5 pt-24 md:pt-28 pb-36">
      <button onClick={()=>go('catalog')} className="inline-flex items-center gap-2 text-sm mb-6" style={{ color:'var(--ink-2)' }}>
        <Icon name="arrow-left" size={16} />{t('back')}
      </button>

      <div className="grid lg:grid-cols-2 gap-8 lg:gap-12 items-start">
        {/* gallery */}
        <div className="lg:sticky lg:top-24">
          <button onClick={()=>setLb(true)} className="relative block w-full group" style={{ cursor:'zoom-in' }}>
            <Ph key={gi} type={set.ph} imgKey={set.id} idx={gi} photoSrc={window.setImg?.(set,gi)} medusaPhoto={hasMedusaPhotos} className="aspect-[4/3] w-full" label={hasMedusaPhotos ? '' : tx(set.name)} rounded="var(--radius)" />
            <span className="absolute top-3 right-3 grid place-items-center rounded-full transition-opacity opacity-80 group-hover:opacity-100" style={{ width:38, height:38, background:'rgba(10,8,6,0.5)', backdropFilter:'blur(6px)', border:'1px solid rgba(255,255,255,0.18)', color:'#fff' }}><Icon name="maximize-2" size={16} /></span>
          </button>
          <div className="grid grid-cols-4 gap-3 mt-3">
            {Array.from({length:galleryCount},(_,i)=>i).map(i=>(
              <button key={i} onClick={()=>setGi(i)} className={`relative transition-opacity rounded-xl overflow-hidden ${i===gi?'':'opacity-55 hover:opacity-80'}`}
                style={i===gi?{ boxShadow:'0 0 0 1px var(--ember)' }:undefined}>
                <Ph type={set.ph} imgKey={set.id} idx={i} photoSrc={window.setImg?.(set,i)} medusaPhoto={hasMedusaPhotos} className="aspect-square" rounded="12px" />
              </button>
            ))}
          </div>
        </div>

        {/* info */}
        <div>
          <div className="flex items-center gap-3 mb-3">
            {set.badge && <span className={`badge ${set.badge==='gold'?'badge-gold':'badge-ember'}`}><Icon name={set.badge==='gold'?'crown':'flame'} size={11} stroke={2} />{set.badge==='gold'?'Премиум':'Хит'}</span>}
            <ReviewStars productHandle={set.id} />
            <span className="ml-auto"><HeartButton id={set.id} size={42} /></span>
          </div>
          <h1 className="serif-title text-3xl md:text-4xl mb-3"><span className="grad-text">{tx(set.name)}</span></h1>
          <p className="leading-relaxed mb-6" style={{ color:'var(--ink-2)' }}>{tx(set.desc)}</p>

          {/* variant selector */}
          <div className="eyebrow mb-3">{set.variants.some(v=>v.persons>0) ? t('choose_size') : t('choose_qty')}</div>
          <div className="flex flex-wrap gap-2 mb-6">
            {set.variants.map((vr,i)=>(
              <button key={vr.medusaVariantId||i} onClick={()=>setVi(i)}
                className={`chip flex-col items-center justify-center text-center ${i===vi?'on':''}`}
                style={{ padding:'11px 18px', minWidth:112 }}>
                <span className="block font-semibold leading-tight">
                  {window.variantChoiceLabel?.(vr, t) ?? `${vr.persons} ${t('persons')}`}
                </span>
                {vr.weight && <span className="block text-[11px] mt-0.5 opacity-75">{vr.weight}</span>}
                <span className="block serif font-semibold tnum text-sm mt-1">{fmtPrice(vr.price)}</span>
              </button>
            ))}
          </div>

          <hr className="hairline mb-6" />

          {/* price + add */}
          <div className="mb-6 flex items-center justify-between gap-4">
            <div>
              <div className="serif text-3xl font-semibold tnum">{fmtPrice(v.price)}</div>
              {perPerson > 0 && <div className="text-xs tnum" style={{ color:'var(--ink-3)' }}>{t('per_person')}: {fmtPrice(perPerson)}</div>}
            </div>
            <button className="btn btn-primary" onClick={(e)=>{ add(set,v); setAdded(true); setTimeout(()=>setAdded(false),1500); if(window.tormenAddFX) window.tormenAddFX(e.currentTarget, window.setImg?.(set,gi)||(window.imgFor&&window.imgFor(set.id,gi)), tx(set.name), t('in_cart')); }}>
              <span className="shine"></span><Icon name={added?'check':'shopping-bag'} size={18} stroke={2} />{added?t('in_cart'):t('add_cart')}
            </button>
          </div>

          {items.length > 0 && (
            <>
              <hr className="hairline mb-6" />
              <div className="eyebrow mb-3">{t('whats_inside')}</div>
              <div className="grid sm:grid-cols-2 gap-x-6 gap-y-2 mb-6">
                {items.map((it,i)=>(
                  <div key={i} className="flex items-center gap-2.5 text-sm py-1.5">
                    <Icon name="check" size={15} stroke={2.4} style={{ color:'var(--emerald)' }} />{it}
                  </div>
                ))}
              </div>
            </>
          )}

          <hr className="hairline mb-0" />

          {/* storage accordion */}
          <button onClick={()=>setStorageOpen(o=>!o)} className="w-full py-4 flex items-center justify-between text-left">
            <span className="font-medium inline-flex items-center gap-2.5"><Icon name="snowflake" size={17} style={{ color:'var(--gold)' }} />{t('storage')}</span>
            <Icon name="chevron-down" size={18} style={{ transform: storageOpen?'rotate(180deg)':'none', transition:'.3s', color:'var(--ink-3)' }} />
          </button>
          {storageOpen && (
            <p className="text-sm pb-4 leading-relaxed fade-in" style={{ color:'var(--ink-2)' }}>
              {tx(set.storage) || t('storage_d')}
            </p>
          )}

          <hr className="hairline" />

          {/* ask ai */}
          <button onClick={openChat} className="w-full py-4 flex items-center gap-3 text-left transition-opacity hover:opacity-80">
            <span className="grid place-items-center rounded-full pulse-glow" style={{ width:42, height:42, background:'linear-gradient(135deg,var(--ember-2),var(--wine))' }}><Icon name="sparkles" size={19} style={{ color:'var(--gold-2)' }} /></span>
            <div className="text-left flex-1">
              <div className="font-semibold text-sm">{t('ask_ai')}</div>
              <div className="text-xs" style={{ color:'var(--ink-2)' }}>{lang==='kz'?'Қанша алу керек, қалай дайындау керек':'Сколько брать и как приготовить'}</div>
            </div>
            <Icon name="arrow-right" size={18} style={{ color:'var(--ink-3)' }} />
          </button>
        </div>
      </div>

      {/* reviews for this set */}
      <ProductReviews setId={set.id} setName={tx(set.name)} medusaProductId={set.medusaProductId} plain />

      {lb && <ProductLightbox set={set} gi={gi} setGi={setGi} onClose={()=>setLb(false)} />}

      {/* recipes for this set */}
      <div className="mt-16 pt-8 border-t border-[color-mix(in_srgb,var(--border-soft)_100%,transparent)]">
        <Reveal><SectionHeader eyebrow={t('recipes_in')} title={t('sec_blog_t')}
          action={<button className="btn btn-ghost hidden md:inline-flex" onClick={()=>go('blog')}>{t('view_all')}<Icon name="arrow-right" size={16} /></button>} /></Reveal>
        <div className="grid sm:grid-cols-2 gap-5">
          {recipes.map((vd,i)=> <Reveal key={vd.id} delay={i*80}><VideoCard video={vd} horizontal plain /></Reveal>)}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SetCard, ProductCard, CatalogScreen, ProductScreen });