/* AMBER & ZAFRAN — Collections (reuses Homepage Collections content) */
function Collections({ t, lang, go }) {
  const [collections, setCollections] = useState([]);
  const [status, setStatus] = useState('loading'); // 'loading' | 'ready' | 'error'

  const load = useCallback(() => {
    setStatus('loading');
    AZCatalog.fetchCollections()
      .then((c) => { setCollections(c); setStatus('ready'); })
      .catch((e) => { console.error('Collections: failed to load', e); setStatus('error'); });
  }, []);
  useEffect(load, [load]);

  if (status === 'loading') return <LoadingState lang={lang} />;
  if (status === 'error') return <ErrorState lang={lang} onRetry={load} />;

  return (
    <div>
      <section style={{ background: 'radial-gradient(120% 90% at 50% 0%,#2a1116,#160a0d)', color: 'var(--white)', padding: '78px 24px 38px', textAlign: 'center' }}>
        <div className="kicker solo center" style={{ justifyContent: 'center', color: 'var(--gold)' }}>{t.collK}</div>
        <h1 className="sec-title" style={{ fontSize: 'clamp(44px,14vw,58px)', color: 'var(--white)', marginTop: 14 }}>{t.collT}</h1>
        <div style={{ marginTop: 14, fontFamily: 'var(--sans)', fontSize: 11, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--rose)' }}>{collections.length} {lang === 'ar' ? 'مجموعات' : 'collections'}</div>
      </section>

      <section className="sec" style={{ paddingBottom: 56 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {collections.map((c, i) => (
            <Reveal key={c.id} delay={i * 70}>
              <div
                onClick={() => go('shop', { collectionId: c.id })}
                role="button" tabIndex={0} aria-label={lang === 'ar' ? c.ar : c.name}
                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); go('shop', { collectionId: c.id }); } }}
                style={{ position: 'relative', height: 150, overflow: 'hidden', cursor: 'pointer', background: `linear-gradient(120deg,${c.from},${c.to})`, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: 22, color: 'var(--white)' }}
              >
                <div style={{ position: 'absolute', top: 14, right: 16, fontFamily: 'var(--arabic-display)', fontSize: 44, color: 'rgba(255,255,255,.12)' }}>{c.ar}</div>
                {/* A collection with zero products (e.g. pending merchandising
                    review — see docs/collection-mapping-review.md) shows
                    "Coming soon" instead of "0 fragrances" — still tappable,
                    Shop's own empty state handles the rest. */}
                <div style={{ fontFamily: 'var(--sans)', fontSize: 9, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--gold)' }}>
                  {c.count > 0 ? `${c.count} ${lang === 'ar' ? 'عطر' : 'fragrances'}` : (lang === 'ar' ? 'قريباً' : 'Coming soon')}
                </div>
                <div style={{ fontFamily: lang === 'ar' ? 'var(--arabic-display)' : 'var(--serif)', fontSize: 26, marginTop: 6 }}>{lang === 'ar' ? c.ar : c.name}</div>
                <div className="body" style={{ color: 'rgba(253,253,253,.78)', fontSize: 13, marginTop: 4 }}>{lang === 'ar' ? c.descAr : c.desc}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      <Footer t={t} lang={lang} go={go} />
    </div>
  );
}

Object.assign(window, { Collections });