/* AMBER & ZAFRAN — Homepage + 3 hero directions */

/* ============ HERO 1 · THE VEIL (dark cinematic) ============ */
function HeroVeil({ t, lang, go }) {
  return (
    <section style={{ position: 'relative', minHeight: 660, background: 'radial-gradient(130% 90% at 50% 0%, #4a1623 0%, #2a0d15 42%, #160a0e 100%)', color: 'var(--white)', overflow: 'hidden', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center', padding: '90px 26px 64px' }}>
      {/* golden aura / smoke */}
      <div style={{ position: 'absolute', top: '8%', left: '50%', transform: 'translateX(-50%)', width: 360, height: 360, background: 'radial-gradient(circle, rgba(220,177,107,.32), transparent 62%)', filter: 'blur(20px)', animation: 'auraPulse 7s ease-in-out infinite' }}></div>
      <div style={{ position: 'absolute', bottom: '-10%', left: '8%', width: 220, height: 320, background: 'radial-gradient(circle, rgba(118,37,56,.5), transparent 65%)', filter: 'blur(30px)' }}></div>
      <style>{`@keyframes auraPulse{0%,100%{opacity:.7;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.08)}}`}</style>

      <div className="kicker solo" style={{ color: 'var(--gold)', zIndex: 2, marginBottom: 26, animation: 'fade 1.2s var(--ease) both' }}>{t.heroKicker}</div>
      <img src="assets/mark-gold.png" alt="" style={{ width: 132, marginBottom: 24, zIndex: 2, filter: 'drop-shadow(0 8px 30px rgba(0,0,0,.5))', animation: 'fade 1.4s var(--ease) both' }} />
      <h1 className="sec-title h-xl" style={{ zIndex: 2, whiteSpace: 'pre-line', width: '100%', animation: 'rise 1.3s var(--ease) .15s both', color: "rgb(255, 255, 255)" }}>{t.hero1Title}</h1>
      <p className="body" style={{ color: 'rgba(253,253,253,.8)', maxWidth: 320, marginTop: 22, zIndex: 2, animation: 'rise 1.3s var(--ease) .35s both' }}>{t.heroSub}</p>
      <div style={{ marginTop: 34, zIndex: 2, animation: 'rise 1.3s var(--ease) .5s both' }}>
        <button className="btn btn-gold" onClick={() => go('shop')}>{t.heroCta} <Icon.arrow className="arr" /></button>
      </div>
      <style>{`@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}`}</style>
    </section>);

}

/* ============ HERO 2 · EDITORIAL SPLIT (light magazine) ============ */
function HeroSplit({ t, lang, go, products }) {
  const hero = products[0];
  return (
    <section style={{ position: 'relative', background: 'linear-gradient(170deg,#f7f1e9 0%,#efe4d6 100%)', overflow: 'hidden', padding: '78px 0 0' }}>
      <div style={{ padding: '0 26px' }}>
        <div className="kicker" style={{ animation: 'fade 1.1s var(--ease) both' }}>{t.featuredK}</div>
        <h1 className="sec-title" style={{ fontSize: 'clamp(46px,15vw,64px)', marginTop: 18, whiteSpace: 'pre-line', animation: 'rise 1.2s var(--ease) .1s both' }}>{t.hero2Title}</h1>
        <p className="lede" style={{ maxWidth: 300, marginTop: 16, animation: 'rise 1.2s var(--ease) .25s both' }}>{t.heroSub}</p>
      </div>
      {/* art-directed hero object */}
      <div style={{ position: 'relative', marginTop: 30, height: 360, display: 'grid', placeItems: 'center' }}>
        <div style={{ position: 'absolute', width: 260, height: 260, borderRadius: '50%', border: '1px solid var(--gold-line)', animation: 'rise 1.4s var(--ease) .4s both' }}></div>
        <div style={{ position: 'absolute', bottom: 0, width: '100%', height: 120, background: 'linear-gradient(#762538,#591a29)' }}></div>
        <div style={{ position: 'relative', zIndex: 2, animation: 'rise 1.3s var(--ease) .45s both' }}><Flacon p={hero} scale={1.5} /></div>
        <div style={{ position: 'absolute', bottom: 26, left: 26, color: 'var(--white)', zIndex: 3, animation: 'fade 1.6s var(--ease) .8s both' }}>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 20 }}>{lang === 'ar' ? hero.ar : hero.name}</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 11, letterSpacing: '.16em', opacity: .8, marginTop: 4, textTransform: 'uppercase' }}>{t.currency} {hero.price}</div>
        </div>
        <button className="btn btn-ghost" onClick={() => go('shop')} style={{ position: 'absolute', bottom: 22, right: 26, zIndex: 3, color: 'var(--white)', borderColor: 'rgba(253,253,253,.5)', animation: 'fade 1.6s var(--ease) .9s both' }}>{t.heroCta2} <Icon.arrow className="arr" /></button>
      </div>
    </section>);

}

/* ============ HERO 3 · THE ATELIER (type-led) ============ */
function HeroType({ t, lang, go }) {
  return (
    <section style={{ position: 'relative', background: 'var(--paper)', padding: '64px 24px 54px', overflow: 'hidden' }}>
      <div className="rule-gold" style={{ animation: 'fade 1s var(--ease) both' }}></div>
      <div style={{ display: 'flex', justifyContent: 'space-between', padding: '14px 0', fontFamily: 'var(--sans)', fontSize: 10, letterSpacing: '.24em', textTransform: 'uppercase', color: 'var(--ink-soft)', animation: 'fade 1.1s var(--ease) both' }}>
        <span>Est. 1962</span><span>{lang === 'ar' ? 'عمّان' : 'Amman'}</span>
      </div>
      <div className="rule-gold"></div>

      <div style={{ textAlign: 'center', padding: '46px 0 30px' }}>
        <div className="kicker solo center" style={{ justifyContent: 'center', marginBottom: 26, animation: 'fade 1.2s var(--ease) .1s both' }}>{t.heroKicker}</div>
        <h1 className="sec-title" style={{ fontSize: 'clamp(58px,20vw,86px)', lineHeight: .92, letterSpacing: '-.02em', whiteSpace: 'pre-line', width: '100%', animation: 'rise 1.3s var(--ease) .15s both' }}>{t.hero3Title}</h1>
        <div style={{ margin: '26px 0', animation: 'fade 1.4s var(--ease) .5s both' }}><Ornament /></div>
        <p className="body" style={{ maxWidth: 300, margin: '0 auto', animation: 'rise 1.3s var(--ease) .4s both' }}>{t.heroSub}</p>
      </div>

      <div style={{ display: 'flex', gap: 12, justifyContent: 'center', animation: 'rise 1.3s var(--ease) .55s both' }}>
        <button className="btn btn-burg" onClick={() => go('shop')}>{t.heroCta2}</button>
        <button className="btn btn-ghost" onClick={() => go('home')} style={{ color: 'var(--ink)' }}>{t.storyCta}</button>
      </div>
      {/* faint giant arabic watermark */}
      <div style={{ position: 'absolute', bottom: -30, right: -10, fontFamily: 'var(--arabic-display)', fontSize: 150, color: 'rgba(118,37,56,.05)', pointerEvents: 'none', lineHeight: 1 }}>عنبر</div>
    </section>);

}

const HEROES = [
['veil', 'The Veil', 'الستار', HeroVeil],
['split', 'Editorial', 'تحريري', HeroSplit],
['atelier', 'Atelier', 'المشغل', HeroType]];


/* ============ HERO SWITCHER (lets the user pick a direction live) ============ */
function HeroPicker({ hero, setHero, t, lang }) {
  return (
    <div style={{ position: 'absolute', bottom: 22, left: '50%', transform: 'translateX(-50%)', zIndex: 50, display: 'flex', alignItems: 'center', gap: 8, background: 'rgba(24,24,24,.74)', backdropFilter: 'blur(14px)', padding: '7px 8px 7px 14px', borderRadius: 40, boxShadow: '0 10px 34px rgba(0,0,0,.4)', whiteSpace: 'nowrap' }}>
      <span style={{ fontFamily: 'var(--sans)', fontSize: 8.5, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--gold)', whiteSpace: 'nowrap' }}>{t.chooseHero}</span>
      <div style={{ display: 'flex', gap: 3 }}>
        {HEROES.map(([id, en, ar]) =>
        <button key={id} onClick={() => setHero(id)} style={{ fontFamily: 'var(--sans)', fontSize: 10, letterSpacing: '.08em', padding: '6px 11px', borderRadius: 30, color: hero === id ? 'var(--black)' : 'rgba(253,253,253,.7)', background: hero === id ? 'var(--gold)' : 'transparent', transition: 'all .3s var(--ease)', whiteSpace: 'nowrap' }}>{lang === 'ar' ? ar : en}</button>
        )}
      </div>
    </div>);

}

/* ============ HORIZONTAL PRODUCT RAIL ============ */
function Rail({ items, lang, t, onOpen, wish, toggleWish }) {
  return (
    <div className="hscroll" style={{ padding: '0 22px' }}>
      {items.map((p) =>
      <div key={p.id} style={{ width: 220 }}>
          <ProductCard p={p} lang={lang} t={t} onOpen={onOpen} wished={wish.includes(p.id)} onWish={toggleWish} />
        </div>
      )}
    </div>);

}

/* ============ HOMEPAGE ============ */
function Home({ t, lang, go, onOpen, wish, toggleWish, hero, setHero }) {
  const [products, setProducts] = useState([]);
  const [collections, setCollections] = useState([]);
  const [status, setStatus] = useState('loading'); // 'loading' | 'ready' | 'error'

  const load = useCallback(() => {
    setStatus('loading');
    Promise.all([AZCatalog.fetchAllProducts(), AZCatalog.fetchCollections()])
      .then(([p, c]) => { setProducts(p); setCollections(c); setStatus('ready'); })
      .catch((e) => { console.error('Home: failed to load catalog data', e); setStatus('error'); });
  }, []);
  useEffect(load, [load]);

  if (status === 'loading' || (status === 'ready' && products.length === 0)) return <LoadingState lang={lang} />;
  if (status === 'error') return <ErrorState lang={lang} onRetry={load} />;

  // Featured Collection = first 4 in display order (matches the
  // original mock's P.slice(0,4) exactly — see supabase/seed.sql).
  const featured = products.slice(0, 4);
  // Best Sellers = next 4 (matches the original mock's P.slice(1,5) exactly).
  // Placeholder ordering, not a real sales metric yet — see
  // docs/phase2-frontend-catalog-integration.md for the upgrade path.
  const bestSellers = products.slice(1, 5);
  // New Arrivals = last 4, most-recently-added first. Original mock used
  // an arbitrary hand-picked order; this is the real, principled
  // equivalent — same 4 products, deterministic order.
  const newArrivals = products.slice(-4).reverse();

  const Hero = HEROES.find((h) => h[0] === hero)[3];
  const tier = (name, i, active) => {
    const colors = [['#d8d8d8', '#9a9a9a'], ['#e8c684', '#bd9148'], ['#cfd4dc', '#8d97a8'], ['#762538', '#dcb16b']];
    return (
      <div key={i} style={{ flex: 'none', width: 130, padding: '22px 16px', textAlign: 'center', background: i === 3 ? 'linear-gradient(160deg,#762538,#3a0e18)' : 'var(--paper)', border: i === 3 ? 'none' : '1px solid var(--line)', color: i === 3 ? 'var(--white)' : 'var(--ink)' }}>
        <div style={{ width: 38, height: 38, borderRadius: '50%', margin: '0 auto 14px', background: `linear-gradient(140deg,${colors[i][0]},${colors[i][1]})`, boxShadow: 'inset 0 1px 2px rgba(255,255,255,.5)' }}></div>
        <div style={{ fontFamily: lang === 'ar' ? 'var(--arabic-display)' : 'var(--serif)', fontSize: 17 }}>{name}</div>
        <div style={{ fontFamily: 'var(--sans)', fontSize: 9, letterSpacing: '.14em', textTransform: 'uppercase', marginTop: 8, opacity: .6 }}>{['0 pts', '500 pts', '2000 pts', '5000 pts'][i]}</div>
      </div>);

  };

  return (
    <div>
      <Hero t={t} lang={lang} go={go} products={products} />

      {/* marquee strip */}
      <div style={{ background: 'var(--black)', color: 'var(--gold)', overflow: 'hidden', padding: '13px 0', whiteSpace: 'nowrap' }}>
        <div style={{ display: 'inline-flex', gap: 36, animation: 'marq 22s linear infinite', fontFamily: 'var(--sans)', fontSize: 10, letterSpacing: '.28em', textTransform: 'uppercase' }}>
          {Array(2).fill(0).map((_, k) => <React.Fragment key={k}>
            <span>{t.freeNote}</span><span style={{ color: 'var(--rose)' }}>✦</span><span>{lang === 'ar' ? 'صُنع يدوياً في عمّان' : 'Hand-composed in Amman'}</span><span style={{ color: 'var(--rose)' }}>✦</span><span>{t.tagline}</span><span style={{ color: 'var(--rose)' }}>✦</span>
          </React.Fragment>)}
        </div>
        <style>{`@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}`}</style>
      </div>

      {/* Featured */}
      <section className="sec" style={{ paddingBottom: 40 }}>
        <Reveal className="sec-head" style={{ alignItems: 'center', textAlign: 'center' }}>
          <div className="kicker solo center" style={{ justifyContent: 'center' }}>{t.featuredK}</div>
          <h2 className="sec-title h-lg">{t.featuredT}</h2>
          <p className="body" style={{ maxWidth: 300 }}>{t.featuredS}</p>
        </Reveal>
        <Reveal><Rail items={featured} lang={lang} t={t} onOpen={onOpen} wish={wish} toggleWish={toggleWish} /></Reveal>
      </section>

      {/* Brand Story (dark) */}
      <section style={{ background: 'radial-gradient(120% 80% at 80% 0%, #2a1116, #140a0d)', color: 'var(--white)', padding: '70px 24px' }}>
        <Reveal className="sec-head">
          <div className="kicker solo" style={{ color: 'var(--gold)' }}>{t.storyK}</div>
          <h2 className="sec-title h-lg" style={{ color: 'var(--white)', whiteSpace: 'pre-line' }}>{t.storyT}</h2>
        </Reveal>
        <Reveal className="body" style={{ color: 'rgba(253,253,253,.78)' }}>{t.storyB}</Reveal>
        <Reveal style={{ marginTop: 28 }}><button className="ulink" style={{ color: 'var(--gold)' }} onClick={() => go('story')}>{t.storyCta} <Icon.arrow className="arr" /></button></Reveal>
        <Reveal style={{ display: 'flex', gap: 30, marginTop: 44 }}>
          {[['1962', lang === 'ar' ? 'سنة التأسيس' : 'Est.'], ['3', lang === 'ar' ? 'أجيال' : 'Generations'], ['60+', lang === 'ar' ? 'تركيبة' : 'Compositions']].map(([n, l], i) =>
          <div key={i}>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 34, color: 'var(--gold)' }}>{n}</div>
              <div style={{ fontFamily: 'var(--sans)', fontSize: 10, letterSpacing: '.16em', textTransform: 'uppercase', color: 'rgba(253,253,253,.55)', marginTop: 4 }}>{l}</div>
            </div>
          )}
        </Reveal>
      </section>

      {/* Best sellers grid */}
      <section className="sec">
        <Reveal className="sec-head">
          <div className="kicker solo">{t.bestK}</div>
          <h2 className="sec-title h-lg">{t.bestT}</h2>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '28px 16px' }}>
          {bestSellers.map((p, i) =>
          <Reveal key={p.id} delay={i * 80}>
              <ProductCard p={p} lang={lang} t={t} onOpen={onOpen} wished={wish.includes(p.id)} onWish={toggleWish} />
            </Reveal>
          )}
        </div>
      </section>

      {/* Gifting (burgundy) */}
      <section style={{ background: 'linear-gradient(160deg,#762538,#4d1623)', color: 'var(--white)', padding: '70px 24px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -40, right: -40, width: 200, height: 200, borderRadius: '50%', border: '1px solid var(--gold-line)' }}></div>
        <Reveal className="sec-head">
          <div className="kicker solo" style={{ color: 'var(--gold)' }}>{t.giftK}</div>
          <h2 className="sec-title h-lg" style={{ color: 'var(--white)', whiteSpace: 'pre-line' }}>{t.giftT}</h2>
        </Reveal>
        <Reveal className="body" style={{ color: 'rgba(253,253,253,.82)', maxWidth: 320 }}>{t.giftB}</Reveal>
        {/* gift box visual */}
        <Reveal style={{ display: 'flex', justifyContent: 'center', margin: '40px 0 36px' }}>
          <div style={{ width: 150, height: 150, position: 'relative' }}>
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(150deg,#1d0c10,#2c1116)', boxShadow: '0 30px 50px rgba(0,0,0,.4)' }}></div>
            <div style={{ position: 'absolute', left: '50%', top: 0, bottom: 0, width: 16, transform: 'translateX(-50%)', background: 'linear-gradient(var(--gold-deep),var(--gold))' }}></div>
            <div style={{ position: 'absolute', top: '50%', left: 0, right: 0, height: 16, transform: 'translateY(-50%)', background: 'linear-gradient(90deg,var(--gold-deep),var(--gold))' }}></div>
            <img src="assets/mark-gold.png" alt="" style={{ position: 'absolute', width: 44, top: '50%', left: '50%', transform: 'translate(-50%,-50%)', zIndex: 2 }} />
          </div>
        </Reveal>
        <Reveal style={{ textAlign: 'center' }}><button className="btn btn-gold" onClick={() => go('gifting')}>{t.giftCta} <Icon.arrow className="arr" /></button></Reveal>
      </section>

      {/* New arrivals rail */}
      <section className="sec" style={{ paddingBottom: 44 }}>
        <Reveal className="sec-head"><div className="kicker solo">{t.newK}</div><h2 className="sec-title h-lg">{t.newT}</h2></Reveal>
        <Reveal><Rail items={newArrivals} lang={lang} t={t} onOpen={onOpen} wish={wish} toggleWish={toggleWish} /></Reveal>
      </section>

      {/* Collections */}
      <section className="sec" style={{ background: 'var(--cream)', paddingBottom: 56 }}>
        <Reveal className="sec-head" style={{ alignItems: 'center', textAlign: 'center' }}>
          <div className="kicker solo center" style={{ justifyContent: 'center' }}>{t.collK}</div>
          <h2 className="sec-title h-lg">{t.collT}</h2>
        </Reveal>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {collections.map((c, i) =>
          <Reveal key={c.id} delay={i * 70}>
              <div
                onClick={() => go('collections')}
                role="button" tabIndex={0} aria-label={lang === 'ar' ? c.ar : c.name}
                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); go('collections'); } }}
                style={{ position: 'relative', height: 150, borderRadius: 0, 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>
                <div style={{ fontFamily: 'var(--sans)', fontSize: 9, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--gold)' }}>{c.count} {lang === 'ar' ? 'عطر' : 'fragrances'}</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>

      {/* Loyalty */}
      <section className="sec">
        <Reveal className="sec-head" style={{ alignItems: 'center', textAlign: 'center' }}>
          <div className="kicker solo center" style={{ justifyContent: 'center' }}>{t.loyaltyK}</div>
          <h2 className="sec-title h-lg">{t.loyaltyT}</h2>
          <p className="body" style={{ maxWidth: 300 }}>{t.loyaltyB}</p>
        </Reveal>
        <Reveal><div className="hscroll" style={{ padding: '4px 0' }}>{t.tiers.map((nm, i) => tier(nm, i))}</div></Reveal>
      </section>

      {/* VIP */}
      <section style={{ background: 'var(--black)', color: 'var(--white)', padding: '74px 24px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(80% 50% at 50% 0%, rgba(220,177,107,.14), transparent 60%)' }}></div>
        <Reveal style={{ textAlign: 'center', position: 'relative' }}>
          <img src="assets/mark-gold.png" alt="" style={{ width: 70, margin: '0 auto 18px' }} />
          <div className="kicker solo center" style={{ justifyContent: 'center', color: 'var(--gold)' }}>{t.vipK}</div>
          <h2 className="sec-title h-lg" style={{ color: 'var(--white)', marginTop: 14 }}>{t.vipT}</h2>
          <p className="body" style={{ color: 'rgba(253,253,253,.78)', maxWidth: 300, margin: '14px auto 0' }}>{t.vipB}</p>
        </Reveal>
        <Reveal style={{ display: 'flex', flexDirection: 'column', gap: 14, margin: '34px auto 0', maxWidth: 320, position: 'relative' }}>
          {t.vipPoints.map((pt, i) =>
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 0', borderBottom: '1px solid rgba(255,255,255,.1)' }}>
              <span style={{ fontFamily: 'var(--serif)', fontSize: 13, color: 'var(--gold)', width: 22 }}>{String(i + 1).padStart(2, '0')}</span>
              <span style={{ fontFamily: lang === 'ar' ? 'var(--arabic)' : 'var(--sans)', fontWeight: 300, fontSize: 14, color: 'rgba(253,253,253,.9)' }}>{pt}</span>
            </div>
          )}
        </Reveal>
        <Reveal style={{ textAlign: 'center', marginTop: 34, position: 'relative' }}><button className="btn btn-gold" onClick={() => go('vip')}>{t.vipCta}</button></Reveal>
      </section>

      {/* Newsletter */}
      <section style={{ background: 'linear-gradient(170deg,#efe4d6,#e3d3c2)', padding: '64px 26px', textAlign: 'center' }}>
        <Reveal>
          <div style={{ marginBottom: 18 }}><Ornament /></div>
          <div className="kicker solo center" style={{ justifyContent: 'center' }}>{t.newsK}</div>
          <h2 className="sec-title h-md" style={{ marginTop: 12 }}>{t.newsT}</h2>
          <p className="body" style={{ maxWidth: 300, margin: '12px auto 0' }}>{t.newsB}</p>
          <div style={{ display: 'flex', marginTop: 26, border: '1px solid var(--ink)', background: 'var(--paper)' }}>
            <input placeholder={t.newsPh} style={{ flex: 1, border: 'none', background: 'transparent', padding: '15px 18px', fontFamily: 'var(--sans)', fontSize: 13, outline: 'none' }} />
            <button className="btn btn-fill" style={{ padding: '15px 22px' }}>{t.newsCta}</button>
          </div>
        </Reveal>
      </section>

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

}

Object.assign(window, { Home, HeroPicker });