(function(){
/* Shared furniture for the muna marketing site. Exposed on window for the other babel files. */
const { Button } = window.DS;
const Icon = window.MunaIcon;

/* Reveal-on-scroll that fails VISIBLE: the hiding class is applied by JS, never in
   markup, and a timeout always resolves the element to its shown state. */
function useReveal(on) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!on || !el) return;
    const show = () => { el.classList.remove('rv'); el.classList.remove('in'); };
    const fade = () => { el.classList.add('in'); };
    if (document.visibilityState !== 'visible') return;
    el.classList.add('rv');
    const fallback = setTimeout(() => {
      /* only force-show what the user can actually see; anything still below the
         fold keeps .rv so the observer can fade it in on scroll */
      const r = el.getBoundingClientRect();
      if (r.top < window.innerHeight && r.bottom > 0) show();
    }, 700);
    let io;
    if ('IntersectionObserver' in window) {
      io = new IntersectionObserver((es) => es.forEach((e) => {
        if (e.isIntersecting) { clearTimeout(fallback); fade(); io.unobserve(e.target); }
      }), { threshold: 0.08, rootMargin: '0px 0px -8% 0px' });
      io.observe(el);
    } else { clearTimeout(fallback); show(); }
    const escape = () => { clearTimeout(fallback); show(); };
    addEventListener('beforeprint', escape);
    document.addEventListener('visibilitychange', () => { if (document.visibilityState !== 'visible') escape(); });
    return () => { clearTimeout(fallback); removeEventListener('beforeprint', escape); if (io) io.disconnect(); };
  }, [on]);
  return ref;
}

function Band({ eyebrow, title, sub, children, soft, bare, align, headMax = 760, id, reveal }) {
  const center = align === 'center';
  const ref = useReveal(reveal);
  return (
    <section ref={ref} id={id} className={'band' + (soft ? ' band-soft' : '') + (bare ? ' band-bare' : '')}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 'var(--space-xxl)' }}>
        {(eyebrow || title || sub) && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-base)', maxWidth: headMax, textAlign: center ? 'center' : 'left', marginLeft: center ? 'auto' : 0, marginRight: center ? 'auto' : 0 }}>
            {eyebrow && <span className="t-caption-upper">{eyebrow}</span>}
            {title && <h2 className="t-display-lg" style={{ textWrap: 'pretty' }}>{title}</h2>}
            {sub && <p className="t-body-md">{sub}</p>}
          </div>
        )}
        {children}
      </div>
    </section>
  );
}

const MQ = ['circular fashion ↑', 'community, reimagined', 'resale, redefined', 'built in africa', 'Muna Resell', 'deadstockr', 'zero waste', 'muna.africa'];

function Marquee() {
  const group = (k) => (
    <div className="mq-g" key={k} aria-hidden={k > 0}>
      {MQ.map((t, i) => (
        <React.Fragment key={i}><span className="t-caption-upper">{t}</span><span className="mq-dot"></span></React.Fragment>
      ))}
    </div>
  );
  return <div className="mq"><div className="mq-t">{[0, 1].map(group)}</div></div>;
}

function ProductCard({ eyebrow, name, lead, body, glyph, sticker, onOpen }) {
  const stickers = sticker ? [].concat(sticker) : [];
  return (
    <div className={'pcard' + (stickers.length ? ' pcard-has-sticker' : '')}>
      <div className="pcard-top" style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 'var(--space-base)' }}>
        <span className="t-caption-upper">{eyebrow}</span>
        {glyph && <span style={{ color: 'var(--text-muted)', display: 'flex' }}><Icon name={glyph} size={20} /></span>}
        {stickers.length > 0 && (
          <div className={'pcard-stickers' + (stickers.length > 1 ? ' pcard-stickers-pair' : '')}>
            {stickers.map((s, i) => <img className="pcard-sticker" src={s} alt="" aria-hidden="true" key={i} />)}
          </div>
        )}
      </div>
      <h3 className="t-display-md" style={{ marginTop: 'var(--space-xs)' }}>{name}</h3>
      {lead && <p className="t-body-md plead"><strong>{lead}</strong></p>}
      <div className={'t-body-md pbody' + ''} style={{ maxWidth: 460, textWrap: 'pretty' }}>{body}</div>
      <div style={{ marginTop: 'auto' }}>
        <Button variant="text" iconAfter={<Icon name="arrow-right" size={16} />} onClick={onOpen}>learn more</Button>
      </div>
    </div>
  );
}

function Step({ n, title, children }) {
  return (
    <div className="step">
      <span className="num">{n}</span>
      <div className="step-txt">
        {title && <p className="t-body-md plead"><strong>{title}</strong></p>}
        <p className="t-body-md" style={{ margin: 0, color: title ? 'var(--text-body)' : 'var(--text-strong)', textWrap: 'pretty' }}>{children}</p>
      </div>
    </div>
  );
}

Object.assign(window, { Band, Marquee, ProductCard, Step, useReveal });
})();