(() => {
const { SiteHeader, IconButton, Logo, Input, Button, Divider, QuantityStepper } = window.AscendFaithDesignSystem_9749b4;
const { GoldDust, FloatingIcons } = window.AF_MOTION;
function WebHeader({ page, nav, bagCount, openBag }) {
  const map = { Shop: 'shop', Collection: 'shop', About: 'about' };
  return <SiteHeader className="web-header" logo={<button className="linkreset" onClick={() => nav('home')}><Logo variant="wordmark" height={34} basePath="../../" /></button>}
    links={['Shop', 'Collection', 'Network', 'About']} active={page === 'shop' ? 'Shop' : page === 'about' ? 'About' : null}
    onNavigate={l => map[l] ? nav(map[l]) : nav('home', 'network')} bagCount={bagCount} onBag={openBag}
    actions={<><IconButton icon="magnifying-glass" label="Search" size="sm" /><IconButton icon="user" label="Account" size="sm" /></>} />;
}
function WebFooter({ nav, toast }) {
  const [email, setEmail] = React.useState('');
  const cols = [['Shop', ['New arrivals', 'Tees', 'Hats', 'Outerwear']], ['Network', ['Get the app', 'Events', 'Daily verse', 'Livestreams']], ['Company', ['About', 'Journal', 'Shipping & returns', 'Contact']]];
  return (
    <footer className="web-footer" style={{ position: 'relative', overflow: 'hidden' }}>
      <GoldDust count={28} style={{ opacity: 0.55 }} />
      <FloatingIcons items={[{ fig: 'cross', x: '92%', y: '10%', size: 22, o: 0.3 }, { fig: 'dove', x: '4%', y: '58%', size: 30, o: 0.25 }, { fig: 'sparkle', x: '62%', y: '6%', size: 14, o: 0.45 }]} style={{ zIndex: 0 }} />
      <div className="wrap" style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'flex-end', gap: 40, paddingBottom: 48, marginBottom: 48, borderBottom: '1px solid var(--border-default)' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}><Logo variant="wordmark" height={40} basePath="../../" className="foot-logo" style={{ alignSelf: 'flex-start' }} /><span className="af-ui-s" style={{ color: 'var(--fg-3)' }}>Find your way to God.</span></div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, flex: '0 1 420px', minWidth: 260 }}>
          <span className="af-eyebrow">First to the drop</span>
          <div style={{ display: 'flex', gap: 8, alignItems: 'flex-end' }}><Input placeholder="Email address" value={email} onChange={e => setEmail(e.target.value)} style={{ flex: 1, minWidth: 0 }} /><Button variant="secondary" onClick={() => { if (email) { setEmail(''); toast('You’re on the list.', 'success'); } }}>Join</Button></div>
        </div>
      </div>
      <div className="wrap" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(160px,1fr))', gap: 40 }}>
        {cols.map(([h, items]) => <div key={h} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}><span className="af-eyebrow">{h}</span>{items.map(i => <a key={i} href="#" onClick={e => { e.preventDefault(); if (i === 'About') nav('about'); else if (h === 'Shop') nav('shop'); }} className="footlink">{i}</a>)}</div>)}
      </div>
      <div className="wrap" style={{ marginTop: 56 }}><Divider /></div>
      <div className="wrap" style={{ display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'space-between', paddingTop: 20 }}><span className="af-ui-s" style={{ color: 'var(--fg-3)' }}>© 2026 Ascend Faith · Est. 2026 · Florida</span><span className="af-ui-s" style={{ color: 'var(--fg-3)' }}>Faith / Community / Purpose</span></div>
      <div className="foot-giant" aria-hidden="true">Ascend Faith</div>
    </footer>
  );
}
function BagDrawer({ open, lines, setLines, close, toast }) {
  if (!open) return null;
  const D = window.AF_DATA;
  const total = lines.reduce((s, l) => s + parseInt(l.p.price.slice(1)) * l.q, 0);
  return (
    <div className="af-dialog__scrim" style={{ justifyContent: 'flex-end', padding: 0, position: 'fixed' }} onClick={close}>
      <aside className="bag" onClick={e => e.stopPropagation()}>
        <div style={{ display: 'flex', alignItems: 'center', padding: '20px 24px', borderBottom: '1px solid var(--border-default)' }}><span className="af-ui-l" style={{ flex: 1 }}>Bag ({lines.reduce((s, l) => s + l.q, 0)})</span><IconButton icon="x" label="Close" size="sm" onClick={close} /></div>
        <div style={{ flex: 1, overflowY: 'auto' }}>
          {lines.length === 0 && <div style={{ padding: 48, textAlign: 'center' }} className="af-body-s">Your bag is empty.</div>}
          {lines.map((l, i) => (
            <div key={i} style={{ display: 'flex', gap: 16, padding: 24, borderBottom: '1px solid var(--border-default)' }}>
              <img src={D.img(l.p.image)} style={{ width: 88, height: 110, objectFit: 'cover', background: 'var(--surface-300)' }} />
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 6 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span className="af-ui-l">{l.p.name}</span><span className="af-ui-l">{l.p.price}</span></div>
                <span className="af-caption">{l.p.meta} · Size {l.s}</span>
                <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 12 }}><QuantityStepper size="sm" value={l.q} min={0} onChange={q => setLines(ls => q === 0 ? ls.filter((_, j) => j !== i) : ls.map((x, j) => j === i ? { ...x, q } : x))} /></div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ padding: 24, borderTop: '1px solid var(--border-default)', display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}><span className="af-ui-l">Subtotal</span><span className="af-ui-l">${total}</span></div>
          <span className="af-caption">Shipping and taxes calculated at checkout.</span>
          <Button variant="primary" size="lg" block disabled={!lines.length} onClick={() => { close(); toast('Checkout is not part of this kit.'); }}>Checkout</Button>
        </div>
      </aside>
    </div>
  );
}
Object.assign(window, { WebHeader, WebFooter, BagDrawer });
})();