/* ── Zafa — Home / Marketplace + all categories ─────────────────────── */

function HomeScreen() {
  const { lang, t, setTab, push, homeLayout } = useZafa();
  const featured = FEATURED.map((id) => VENDORS.find((v) => v.id === id)).filter(Boolean);
  const topCats = CATEGORIES.slice(0, 8);
  const grid = homeLayout === 'grid';

  return (
    <div className="z-scroll no-bar" style={{ background: 'var(--bg)', position: 'relative' }}>
      {/* decorative floral header band — spans the top of the app */}
      <div aria-hidden="true" className="home-topbg" />
      <div style={{ position: 'relative', zIndex: 1 }}>
      <div style={{ padding: '6px 20px 4px' }}><TopBar onBell={() => {}} /></div>

      <div style={{ padding: '12px 20px 4px' }}>
        <p className="eyebrow" style={{ marginBottom: 6 }}>{L(lang, 'Good morning', 'صباح الخير')}</p>
        <h1 className="h1" style={{ margin: 0, fontSize: 28, maxWidth: 260 }}>{t('greetingName')}</h1>
      </div>

      <div style={{ padding: '14px 20px 4px', position: 'sticky', top: 0, zIndex: 10 }}>
        <SearchBar onClick={() => setTab('search')} onSpark={() => setTab('search')} />
      </div>

      {/* featured arched carousel */}
      <div style={{ paddingTop: 18 }}>
        <div style={{ padding: '0 20px' }}>
          <SectionHeader icon="spark" title={t('featured')} action={t('seeAll')} onAction={() => push({ name: 'feedlist', id: 'featured' })} />
        </div>
        <div className="no-bar" style={{ display: 'flex', gap: 14, overflowX: 'auto', paddingInlineStart: 24, paddingInlineEnd: 20, paddingBottom: 10, scrollPaddingInlineStart: 24, scrollSnapType: 'x mandatory' }}>
          {featured.map((v) => <FeaturedCard key={v.id} v={v} />)}
        </div>
      </div>

      {/* categories */}
      <div style={{ padding: '20px 20px 6px' }}>
        <SectionHeader icon="spark" title={t('browseCategory')} action={t('seeAll')} onAction={() => push({ name: 'allcats' })} />
        <div className="no-bar" style={{ display: 'grid', gridAutoFlow: 'column', gridTemplateColumns: 'none', gridAutoColumns: '78px', gap: 14, overflowX: 'auto', paddingBottom: 6 }}>
          {topCats.map((c, i) => <CategoryTile key={c.id} c={c} i={i} onClick={() => push({ name: 'category', id: c.id })} />)}
        </div>
      </div>

      {/* feed */}
      <div style={{ padding: '18px 20px 28px' }}>
        <SectionHeader icon="spark" title={t('topPicks')} action={t('seeAll')} onAction={() => push({ name: 'feedlist', id: 'picks' })} />
        <div style={grid ? { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 13 } : { display: 'flex', flexDirection: 'column', gap: 16 }}>
          {VENDORS.map((v, i) => <VendorCard key={v.id} v={v} delay={i * 45} compact={grid} />)}
        </div>
      </div>
      </div>
    </div>);

}

/* ── All categories ── */
function AllCategories() {
  const { lang, t, pop, push } = useZafa();
  const [q, setQ] = React.useState('');
  const list = CATEGORIES.filter((c) => !q || L(lang, c.en, c.ar).toLowerCase().includes(q.toLowerCase()));
  return (
    <div className="z-scroll no-bar" style={{ background: 'var(--bg)' }}>
      <div style={{ position: 'sticky', top: 0, zIndex: 10, background: 'var(--bg)', padding: '6px 20px 12px' }}>
        <ScreenHeader title={t('categories')} onBack={pop} />
        <div style={{ marginTop: 12 }}>
          <SearchField value={q} onChange={(e) => setQ(e.target.value)} placeholder={L(lang, 'Search categories', 'ابحث في الفئات')} />
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '20px 13px', padding: '12px 20px 30px' }}>
        {list.map((c, i) => <CategoryTile key={c.id} c={c} i={i} onClick={() => push({ name: 'category', id: c.id })} />)}
      </div>
    </div>);

}

/* ── Featured / Top picks — full list ("See all") ── */
function FeedList({ kind }) {
  const { lang, t, pop } = useZafa();
  const isFeat = kind === 'featured';
  // featured = boosted vendors first; picks = the full feed. Pad so "see all" shows more.
  const base = isFeat
    ? [...FEATURED.map((id) => VENDORS.find((v) => v.id === id)).filter(Boolean), ...VENDORS.filter((v) => !FEATURED.includes(v.id) && v.type === 'vendor')]
    : VENDORS;
  const list = [...base, ...base].slice(0, isFeat ? 9 : VENDORS.length + 6);
  const title = isFeat ? t('featured') : t('topPicks');
  return (
    <div className="z-scroll no-bar" style={{ background: 'var(--bg)' }}>
      <div style={{ position: 'sticky', top: 0, zIndex: 10, background: 'var(--bg)', padding: '6px 20px 10px', borderBottom: '1px solid var(--line-2)' }}>
        <ScreenHeader title={<span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}><Icon name="spark" size={18} style={{ color: 'var(--gold)' }} />{title}</span>} onBack={pop} />
      </div>
      <p className="sec" style={{ padding: '12px 22px 2px', fontSize: 13.5, fontWeight: 600 }}>{list.length} {L(lang, 'listings', 'قائمة')}</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16, padding: '8px 20px 30px' }}>
        {list.map((v, i) => <VendorCard key={kind + i} v={v} delay={i * 40} />)}
      </div>
    </div>);

}

Object.assign(window, { HomeScreen, AllCategories, FeedList });