(() => {
const { Button, ProductCard, ScriptureCard, Icon } = window.AscendFaithDesignSystem_9749b4;
const { Tilt, FloatingIcons, GoldDust, Figure, ScrubWords, WordsPullUp, useParallax } = window.AF_MOTION;
const PHRASES = ['Wear the mission', 'Higher than yesterday', 'Faith over fear', 'Find your way to God', 'More than apparel'];
const PILLARS = [
  ['cross', 'Faith', 'Rooted in the Word', 'A verse every morning and studies that meet you where you are.'],
  ['fish', 'Community', 'Walk it together', 'Groups, gatherings and a feed of people on the same road.'],
  ['peak', 'Purpose', 'Built for the climb', 'Heavyweight pieces that carry the message into every day.'],
];
function HomePage({ nav, openProduct }) {
  const D = window.AF_DATA;
  const ref = React.useRef(null);
  useParallax(ref, []);
  return (
    <main ref={ref}>
      <AscentHero nav={nav} />

      <div className="marquee" aria-hidden="true"><div className="marquee__track">{Array.from({ length: 2 }).map((_, k) => <span key={k}>{PHRASES.map(t => <React.Fragment key={t}><b>{t}</b><i>↑</i></React.Fragment>)}</span>)}</div></div>
      <div className="marquee marquee--rev" aria-hidden="true"><div className="marquee__track">{Array.from({ length: 2 }).map((_, k) => <span key={k}>{['Faith', 'Community', 'Purpose', 'The Way', 'The Truth', 'The Life'].map(t => <React.Fragment key={t}><b>{t}</b><Figure name="sparkle" size={18} /></React.Fragment>)}</span>)}</div></div>

      <section className="wrap" style={{ padding: '120px var(--gutter)', position: 'relative' }}>
        <FloatingIcons items={[{ fig: 'sparkle', x: '2%', y: '8%', size: 16, o: 0.5 }, { fig: 'cross', x: '96%', y: '4%', size: 22, o: 0.35 }, { fig: 'dove', x: '48%', y: '2%', size: 26, o: 0.3 }]} style={{ zIndex: 0 }} />
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 48, position: 'relative', zIndex: 1 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}><span className="af-eyebrow">Collection 001</span><h2 className="af-headline-l" style={{ margin: 0 }}><WordsPullUp text="Wear the mission" /></h2></div>
          <Button variant="ghost" iconRight="arrow-right" onClick={() => nav('shop')}>View all</Button>
        </div>
        <div className="home-rail" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 24, position: 'relative', zIndex: 1 }}>
          {D.products.slice(0, 4).map((p, i) => <Tilt key={p.id} style={{ marginTop: i % 2 ? 48 : 0 }}><ProductCard {...p} image={D.img(p.image)} onClick={undefined} aria-disabled="true" /></Tilt>)}
        </div>
      </section>

      <section data-theme="light" style={{ background: 'var(--bg-surface)', color: 'var(--fg-1)', overflow: 'hidden' }}>
        <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96, alignItems: 'center', padding: '120px var(--gutter)' }}>
          <div style={{ position: 'relative', justifySelf: 'center', width: '100%', maxWidth: 440 }}>
            <div className="afm-rays" style={{ inset: '-60%', opacity: 0.9 }} />
            <img data-speed="0.8" src={D.img('artwork/the-way-poster.png')} style={{ position: 'relative', width: '100%', display: 'block', boxShadow: '0 40px 80px rgba(17,17,17,.18)' }} />
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
            <span className="af-eyebrow">Tee 002 &nbsp;—&nbsp; The Way</span>
            <ScriptureCard bare size="inline" text="Jesus answered, “I am the way and the truth and the life. No one comes to the Father except through me.”" reference="John 14:6" style={{ gap: 20 }} />
            <p className="af-reading" style={{ margin: 0, color: 'var(--fg-2)', maxWidth: 480 }}>A single road up the mountain. Screen printed on a stone-wash heavyweight blank, with the ascending arrow at the summit.</p>
            <Button variant="secondary" style={{ alignSelf: 'flex-start' }} onClick={() => openProduct(D.products[1])}>Shop The Way Tee</Button>
          </div>
        </div>
      </section>

      <section className="pillars" data-no-rv>
        <div className="pillars__bg" data-speed="1.4"><img loading="lazy" src={D.img('imagery/scenes/ridges-hd.jpg')} alt="" /></div>
        <div className="afm-noise" style={{ opacity: 0.4 }} />
        <GoldDust count={40} />
        <div className="wrap" style={{ position: 'relative', zIndex: 3, padding: '160px var(--gutter) 140px' }}>
          <span className="af-eyebrow" style={{ color: 'var(--accent-gold)' }}>Isaiah 40:31</span>
          <p className="pillars__verse"><ScrubWords text="but those who hope in the LORD will renew their strength. They will soar on wings like eagles; they will run and not grow weary, they will walk and not be faint." /></p>
          <div className="pillars__grid">
            {PILLARS.map(([f, t, h, d], i) => (
              <div key={t} data-speed={0.6 + i * 0.5} className="pillar afm-glass">
                <span className="pillar__fig"><Figure name={f} size={30} /></span>
                <span className="af-eyebrow" style={{ color: '#ffd052' }}>{t}</span>
                <span className="pillar__h">{h}</span>
                <span className="af-body-s" style={{ color: 'rgba(241,235,221,.75)' }}>{d}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="network" style={{ borderTop: '1px solid var(--border-default)', position: 'relative', overflow: 'hidden' }}>
        <div className="wrap" style={{ padding: '120px var(--gutter)', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <span className="af-eyebrow">The Ascend Faith Christian Network</span>
            <h2 className="af-display-m" style={{ margin: 0 }}>More than apparel.<br /><span className="afm-shimmer">It’s a movement.</span></h2>
            <p className="af-body-l" style={{ margin: 0, color: 'var(--fg-2)', maxWidth: 500 }}>A daily verse every morning, a feed of people walking the same road, and every gathering, invite and RSVP in one place.</p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 0, borderTop: '1px solid var(--border-default)', marginTop: 8 }}>
              {[['book-open-text', 'Daily verse'], ['calendar-plus', 'Events & invites'], ['users-three', 'Community']].map(([i, l], k) => <div key={l} className="net-feat" style={{ padding: '20px var(--gutter)', display: 'flex', flexDirection: 'column', gap: 10, borderLeft: k ? '1px solid var(--border-default)' : 0, paddingLeft: k ? 20 : 0 }}><Icon name={i} size={26} /><span className="af-ui-m">{l}</span></div>)}
            </div>
            <div style={{ display: 'flex', gap: 12 }}><button className="afm-pill">Get the app<span className="afm-pill__dot"><Icon name="device-mobile" /></span></button></div>
          </div>
          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            <div style={{ gridRow: 'span 2', overflow: 'hidden', height: 420 }}><img loading="lazy" data-speed="0.6" src={D.img('imagery/lifestyle/ascent-tee-back.png')} style={{ width: '100%', height: '115%', objectFit: 'cover', display: 'block' }} /></div>
            <div style={{ overflow: 'hidden', height: 206 }}><img loading="lazy" data-speed="0.4" src={D.img('imagery/lifestyle/summit-hats-clean.png')} style={{ width: '100%', height: '120%', objectFit: 'cover', display: 'block' }} /></div>
            <div style={{ overflow: 'hidden', height: 206 }}><img loading="lazy" data-speed="0.4" src={D.img('imagery/lifestyle/woven-label-bone.png')} style={{ width: '100%', height: '120%', objectFit: 'cover', display: 'block' }} /></div>
            <div className="net-chip afm-glass" style={{ left: -44, top: 36 }}><span className="af-eyebrow" style={{ color: 'var(--accent-ink)', margin: 0 }}>Verse of the Day</span><span className="af-scripture-m" style={{ fontSize: 17 }}>“I am the way and the truth and the life.”</span><span className="af-reference">John 14:6</span></div>
            <div className="net-chip afm-glass" style={{ right: -20, bottom: 30, animationDelay: '-2s', flexDirection: 'row', alignItems: 'center', gap: 10 }}><Icon name="hands-praying" size={22} color="#ffd052" /><span className="af-ui-m">112 Amens</span></div>
            <FloatingIcons items={[{ fig: 'dove', x: '86%', y: '-8%', size: 36, o: 0.6, depth: 0.8 }, { fig: 'sparkle', x: '-6%', y: '86%', size: 18, o: 0.6 }]} />
          </div>
        </div>
      </section>
    </main>
  );
}
window.HomePage = HomePage;
})();