(() => {
const { ScriptureCard, Divider, Button } = window.AscendFaithDesignSystem_9749b4;
const { WordsPullUp, FloatingIcons, GoldDust, Figure, Tilt, useParallax } = window.AF_MOTION;
function AboutPage({ nav }) {
  const D = window.AF_DATA;
  const ref = React.useRef(null);
  useParallax(ref, []);
  const fam = [['01', 'Ascend', 'Mountain, arrow, upward movement.', 'Growth', 'peak'], ['02', 'Christ', 'Cross, crown, classical engraving.', 'Christ', 'cross'], ['03', 'Scripture', 'Typography-first pieces.', 'The Word', 'book'], ['04', 'Disciple', 'Numbers, symbols, journeys.', 'Following Christ', 'fish'], ['05', 'Faith', 'Minimal and wearable.', 'Everyday faith', 'flame']];
  return (
    <main ref={ref}>
      <section className="about-hero" data-no-rv>
        <div className="about-hero__bg" data-speed="1.2"><img className="afm-drift" src={D.img('imagery/scenes/clouds-rays-hd.jpg')} alt="" /></div>
        <div className="afm-noise" style={{ opacity: 0.5, zIndex: 1 }} />
        <GoldDust count={50} style={{ zIndex: 2 }} />
        <FloatingIcons items={[{ fig: 'dove', x: '12%', y: '22%', size: 44, o: 0.55, depth: 0.9 }, { fig: 'cross', x: '84%', y: '26%', size: 30, o: 0.45 }, { fig: 'sparkle', x: '70%', y: '70%', size: 18, o: 0.6 }, { fig: 'olive', x: '20%', y: '72%', size: 34, o: 0.35 }, { fig: 'crown', x: '50%', y: '12%', size: 24, o: 0.3, depth: 0.2 }]} />
        <div className="wrap" style={{ padding: '140px var(--gutter)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 28, textAlign: 'center', position: 'relative', zIndex: 4 }}>
          <div style={{ position: 'relative', width: 96, height: 96 }}>
            <div className="afm-rays" style={{ inset: '-160%' }} />
            <img src="../../assets/logo/ascend-arrow-solid.png" className="float-mark" style={{ position: 'relative', height: 96, filter: 'drop-shadow(0 0 30px rgba(255,208,82,.55))' }} />
          </div>
          <h1 className="af-display-l" style={{ margin: 0, color: '#f7f7f3', textShadow: '0 8px 40px rgba(0,0,0,.4)' }}><WordsPullUp text="Find your way to God." delay={120} /></h1>
          <Divider variant="gold" />
          <p className="af-reading" style={{ margin: 0, color: 'rgba(247,247,243,.85)', maxWidth: 640 }}>Ascend Faith is a Christian streetwear label and the network built around it. We make heavyweight garments with intentional typography and biblical symbolism, and a place for people to walk the road together.</p>
        </div>
      </section>
      <section data-theme="light" style={{ background: 'var(--bg-surface)', color: 'var(--fg-1)', overflow: 'hidden' }}>
        <div className="wrap" style={{ padding: '120px var(--gutter)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <span className="af-eyebrow">What we believe about design</span>
            <h2 className="af-headline-l" style={{ margin: 0 }}><WordsPullUp text="Restraint is the luxury." /></h2>
            <p className="af-reading" style={{ margin: 0, color: 'var(--fg-2)' }}>No clip-art crosses. No logo shouting from every chest. Bone type on a black tee, one small gold detail, a verse you notice on the second look.</p>
            <ScriptureCard bare text="Now faith is confidence in what we hope for and assurance about what we do not see." reference="Hebrews 11:1" />
          </div>
          <Tilt max={5}><div style={{ overflow: 'hidden', height: 520 }}><img loading="lazy" data-speed="0.6" src={D.img('imagery/lifestyle/truth-tee-back.png')} style={{ width: '100%', height: '116%', objectFit: 'cover', display: 'block' }} /></div></Tilt>
        </div>
      </section>
      <section className="wrap" style={{ padding: '120px var(--gutter)' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 40 }}><span className="af-eyebrow">The system</span><h2 className="af-headline-l" style={{ margin: 0 }}><WordsPullUp text="Five families" /></h2></div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', borderTop: '1px solid var(--border-default)', borderLeft: '1px solid var(--border-default)' }}>
          {fam.map(([n, t, d, th, f]) => <div key={n} className="fam" style={{ padding: 28, borderRight: '1px solid var(--border-default)', borderBottom: '1px solid var(--border-default)', display: 'flex', flexDirection: 'column', gap: 12, minHeight: 260 }}><div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}><span className="af-ui-s" style={{ color: 'var(--fg-3)' }}>{n}</span><span className="fam__fig"><Figure name={f} size={34} /></span></div><span className="af-headline-s">{t}</span><span className="af-body-s" style={{ color: 'var(--fg-2)' }}>{d}</span><span className="af-ui-s" style={{ marginTop: 'auto', color: 'var(--accent-ink)' }}>{th}</span></div>)}
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 64 }}><Button variant="outline" size="lg" onClick={() => nav('shop')}>Shop Collection 001</Button></div>
      </section>
    </main>
  );
}
window.AboutPage = AboutPage;
})();