// Layout variation V2 · "Bento + full-bleed hero"
// Same brand colors and content as the base wellness direction, but a
// different page rhythm: photo-driven full-bleed hero, asymmetric bento grid
// for features, horizontal "story strip" instead of split-column story.

const W2 = {
  cream: '#F7F8FC', paper: '#FFFFFF', ink: '#1F2128',
  ink2: 'rgba(31,33,40,0.68)', peach: '#DDE2F5', coral: '#FB8A99',
  navy: '#1A2B5C', rule: 'rgba(31,33,40,0.08)',
};

function WellnessV2() {
  const [scrollerRef, scrolled] = useScrolled(40);
  return (
    <div ref={scrollerRef} className="twj-page" style={{
      width: '100%', height: '100%', overflowY: 'auto', overflowX: 'hidden',
      background: W2.cream, color: W2.ink, fontFamily: '"DM Sans", system-ui, sans-serif', fontSize: 16, lineHeight: 1.55,
    }}>
      {/* Nav */}
      <div style={{ position: 'sticky', top: 0, zIndex: 50, padding: '16px 24px' }}>
        <div style={{
          maxWidth: 1180, margin: '0 auto',
          background: scrolled ? 'rgba(255,255,255,0.92)' : 'rgba(255,255,255,0.65)',
          backdropFilter: 'blur(20px)', borderRadius: 999, padding: '10px 14px 10px 22px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          boxShadow: scrolled ? '0 6px 32px rgba(31,33,40,0.08)' : 'none',
          border: '1px solid rgba(31,33,40,0.06)', transition: 'all .3s',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <img src="assets/logo.png" alt="JOAN" style={{ width: 36, height: 36, borderRadius: 8 }} />
            <span style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontWeight: 600, fontSize: 18 }}>Train with Joan</span>
          </div>
          <div className="twj-nav-links" style={{ display: 'flex', gap: 4, fontSize: 14, fontWeight: 500 }}>
            {['Workouts', 'Meals', 'Story', 'Pricing', 'FAQ'].map((l) => <span key={l} style={{ padding: '8px 14px', borderRadius: 999, cursor: 'pointer' }}>{l}</span>)}
          </div>
          <button style={{ background: W2.coral, color: '#fff', border: 0, padding: '12px 22px', borderRadius: 999, fontWeight: 600, fontSize: 14, cursor: 'pointer', fontFamily: 'inherit' }}>Try free →</button>
        </div>
      </div>

      {/* Hero — full-bleed photo on left, text on right */}
      <section style={{ padding: '24px 24px 0' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 24, minHeight: 640 }}>
          <Reveal>
            <div style={{ height: '100%', background: W2.peach, borderRadius: 36, position: 'relative', overflow: 'hidden', minHeight: 640 }}>
              <img src="assets/joan-flex.webp" alt="Joan" style={{ position: 'absolute', bottom: 0, left: '50%', transform: 'translateX(-50%)', height: '95%', objectFit: 'contain' }} />
              <span style={{ position: 'absolute', top: 24, left: 24, background: W2.paper, padding: '8px 14px', borderRadius: 999, fontSize: 12, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 8, height: 8, borderRadius: 999, background: W2.coral }} /> 400k+ women strong
              </span>
              <div style={{ position: 'absolute', bottom: 24, right: 24, background: W2.ink, color: '#fff', padding: '14px 18px', borderRadius: 18 }}>
                <div style={{ fontSize: 11, opacity: 0.7, letterSpacing: '0.16em', textTransform: 'uppercase' }}>JOAN, AGE</div>
                <div style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontSize: 36, fontWeight: 700, lineHeight: 1 }}>76</div>
              </div>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div style={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '24px 8px' }}>
              <span style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: W2.coral, fontWeight: 700, marginBottom: 24 }}>★★★★★ 4.5 · App Store</span>
              <h1 style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontWeight: 600, fontSize: 84, lineHeight: 0.95, letterSpacing: '-0.035em', margin: 0 }}>
                Strength.<br />Mobility.<br /><span style={{ fontFamily: '"Instrument Serif", serif', fontStyle: 'italic', fontWeight: 400, color: W2.coral }}>At any age.</span>
              </h1>
              <p style={{ fontSize: 19, lineHeight: 1.55, color: W2.ink2, marginTop: 28, maxWidth: 460 }}>
                Joan started at 70 — and got stronger every year. The app gives you her exact recipe: guided workouts, real meals, and a community that actually shows up.
              </p>
              <div style={{ marginTop: 36, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
                <button style={{ background: W2.coral, color: '#fff', border: 0, padding: '20px 32px', borderRadius: 999, fontWeight: 600, fontSize: 16, cursor: 'pointer', fontFamily: 'inherit', boxShadow: '0 12px 28px -8px rgba(251,138,153,0.55)' }}>Start 7-day free trial →</button>
                <button style={{ background: 'transparent', color: W2.ink, border: `1.5px solid ${W2.ink}`, padding: '18px 24px', borderRadius: 999, fontWeight: 600, fontSize: 15, cursor: 'pointer', fontFamily: 'inherit' }}>▸ Watch tour</button>
              </div>
              <div style={{ marginTop: 20 }}>
                <AppStoreBadges height={50} dark />
              </div>
              <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, paddingTop: 28, borderTop: `1px solid ${W2.rule}` }}>
                {[['400k+', 'members'], ['4.5★', 'rating'], ['7 days', 'free trial']].map(([n, l]) => (
                  <div key={l}>
                    <div style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontSize: 28, fontWeight: 600, lineHeight: 1, color: W2.coral, letterSpacing: '-0.02em' }}>{n}</div>
                    <div style={{ fontSize: 12, color: W2.ink2, marginTop: 4 }}>{l}</div>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Press strip */}
      <section style={{ padding: '40px 24px' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', display: 'flex', alignItems: 'center', gap: 32, flexWrap: 'wrap', justifyContent: 'center' }}>
          <span style={{ fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: W2.ink2, fontWeight: 600 }}>Featured in</span>
          {PRESS.map((p) => <span key={p} style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontSize: 18, color: W2.ink, opacity: 0.45, fontWeight: 600 }}>{p}</span>)}
        </div>
      </section>

      {/* Story — horizontal strip with before/after */}
      <section style={{ padding: '60px 24px' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', background: W2.ink, color: '#fff', borderRadius: 36, padding: '64px 56px', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(circle at 80% 30%, ${W2.coral}40, transparent 50%)` }} />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center', position: 'relative' }}>
            <Reveal>
              <span style={{ display: 'inline-block', background: W2.coral, color: '#fff', padding: '6px 14px', borderRadius: 999, fontSize: 12, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase' }}>Joan's Story</span>
              <h2 style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontWeight: 600, fontSize: 56, lineHeight: 1.05, letterSpacing: '-0.03em', margin: '20px 0 24px' }}>
                At 70, my doctor handed me a third prescription.<br /><span style={{ color: W2.coral }}>I handed it back.</span>
              </h2>
              <p style={{ fontSize: 17, lineHeight: 1.6, color: 'rgba(255,255,255,0.78)', margin: '0 0 28px' }}>
                Almost 200 pounds, mobility going. My daughter Michelle — a strength coach — built me a plan I could actually do. Two years later, I was on magazine covers.
              </p>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
                {[['–70 lbs', 'lost & kept off'], ['0', 'medications'], ['76', 'and lifting']].map(([n, l]) => (
                  <div key={l} style={{ background: 'rgba(255,255,255,0.06)', padding: 16, borderRadius: 16, border: '1px solid rgba(255,255,255,0.08)' }}>
                    <div style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontSize: 26, fontWeight: 600, color: W2.coral, lineHeight: 1, letterSpacing: '-0.02em' }}>{n}</div>
                    <div style={{ fontSize: 11, opacity: 0.7, marginTop: 6 }}>{l}</div>
                  </div>
                ))}
              </div>
            </Reveal>
            <Reveal delay={120}>
              <div style={{ position: 'relative' }}>
                <img src="assets/before-after.png" alt="Joan before & after" style={{ width: '100%', borderRadius: 24, display: 'block' }} />
                <span style={{ position: 'absolute', top: 12, left: 12, background: 'rgba(0,0,0,0.7)', color: '#fff', padding: '5px 10px', borderRadius: 999, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 700 }}>Before</span>
                <span style={{ position: 'absolute', bottom: 12, right: 12, background: W2.coral, color: '#fff', padding: '5px 10px', borderRadius: 999, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 700 }}>5 yrs later</span>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Bento features */}
      <section style={{ padding: '60px 24px' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto' }}>
          <Reveal>
            <div style={{ marginBottom: 40 }}>
              <span style={{ background: W2.peach, color: W2.ink, padding: '6px 14px', borderRadius: 999, fontSize: 12, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase' }}>What's inside</span>
              <h2 style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontWeight: 600, fontSize: 56, lineHeight: 1.05, letterSpacing: '-0.03em', margin: '20px 0 0', maxWidth: 760 }}>
                Four pillars. <span style={{ color: W2.coral }}>One app.</span>
              </h2>
            </div>
          </Reveal>
          {/* Bento grid: 1 wide + 1 half · 1 half + 1 wide */}
          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 20, marginBottom: 20 }}>
            <Reveal>
              <div style={{ background: W2.coral, color: '#fff', borderRadius: 28, padding: 36, minHeight: 360, position: 'relative', overflow: 'hidden' }}>
                <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, opacity: 0.85 }}>Workouts</div>
                <h3 style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontWeight: 600, fontSize: 36, lineHeight: 1.1, margin: '12px 0 14px', letterSpacing: '-0.02em' }}>Strength built day by day.</h3>
                <p style={{ fontSize: 15, lineHeight: 1.6, opacity: 0.92, margin: 0, maxWidth: 360 }}>3–5 guided sessions a week, 30–45 minutes. Beginner, intermediate & a mobility track baked in.</p>
                <div style={{ display: 'flex', gap: 8, marginTop: 20 }}>
                  {['Beginner', 'Intermediate', 'Mobility'].map((m) => <span key={m} style={{ background: 'rgba(255,255,255,0.2)', padding: '6px 12px', borderRadius: 999, fontSize: 12, fontWeight: 500 }}>{m}</span>)}
                </div>
                <img src="assets/workout-app.webp" alt="" style={{ position: 'absolute', bottom: -40, right: -40, width: 280, opacity: 0.9, filter: 'drop-shadow(0 12px 24px rgba(0,0,0,0.2))' }} />
              </div>
            </Reveal>
            <Reveal delay={80}>
              <div style={{ background: W2.paper, borderRadius: 28, padding: 32, minHeight: 360, boxShadow: '0 10px 30px -15px rgba(31,33,40,0.1), 0 0 0 1px rgba(31,33,40,0.04)', display: 'flex', flexDirection: 'column' }}>
                <div style={{ width: 52, height: 52, borderRadius: 16, background: W2.navy, display: 'grid', placeItems: 'center', boxShadow: `0 12px 24px -10px ${W2.navy}` }}>
                  <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round"><circle cx="9" cy="8" r="3" /><circle cx="17" cy="9" r="2.5" /><path d="M3 21v-1a5 5 0 0 1 5-5h2a5 5 0 0 1 5 5v1M15 21v-1a4 4 0 0 1 4-4h0a3 3 0 0 1 2 1" /></svg>
                </div>
                <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: W2.navy, fontWeight: 700, marginTop: 24 }}>Community</div>
                <h3 style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontWeight: 600, fontSize: 26, lineHeight: 1.15, margin: '6px 0 10px', letterSpacing: '-0.02em' }}>A daily room of women.</h3>
                <p style={{ fontSize: 14, lineHeight: 1.6, color: W2.ink2, margin: 0 }}>Live coach Q&amp;A, member spotlights, the kind of room that cheers a first deadlift at 65.</p>
                <div style={{ marginTop: 'auto', paddingTop: 20, display: 'flex', gap: 8, alignItems: 'center' }}>
                  <div style={{ display: 'flex' }}>
                    {[0,1,2,3,4].map((i) => <Img key={i} id={`v2-comm-${i}`} w={26} h={26} shape="circle" style={{ marginLeft: i ? -8 : 0, border: `2px solid ${W2.paper}` }} />)}
                  </div>
                  <span style={{ fontSize: 12, color: W2.ink2 }}>286 women live now</span>
                </div>
              </div>
            </Reveal>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 20 }}>
            <Reveal>
              <div style={{ background: W2.peach, borderRadius: 28, padding: 32, minHeight: 320, display: 'flex', flexDirection: 'column' }}>
                <div style={{ width: 52, height: 52, borderRadius: 16, background: W2.ink, display: 'grid', placeItems: 'center' }}>
                  <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round"><path d="M3 17l6-6 4 4 8-8M14 7h7v7" /></svg>
                </div>
                <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: W2.ink, fontWeight: 700, marginTop: 24 }}>Progress</div>
                <h3 style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontWeight: 600, fontSize: 26, lineHeight: 1.15, margin: '6px 0 10px', letterSpacing: '-0.02em' }}>What matters, tracked simply.</h3>
                <p style={{ fontSize: 14, lineHeight: 1.6, color: W2.ink2, margin: 0 }}>Strength, mood, sleep, mobility. The scale is optional.</p>
              </div>
            </Reveal>
            <Reveal delay={80}>
              <div style={{ background: W2.navy, color: '#fff', borderRadius: 28, padding: 36, minHeight: 320, position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
                <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, color: W2.peach }}>Meal Plan</div>
                <h3 style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontWeight: 600, fontSize: 36, lineHeight: 1.1, margin: '12px 0 14px', letterSpacing: '-0.02em', maxWidth: 380 }}>Generous, real-food meals.</h3>
                <p style={{ fontSize: 15, lineHeight: 1.6, opacity: 0.85, margin: 0, maxWidth: 380 }}>Weekly menus, swappable recipes, auto grocery lists. No fads, no powders.</p>
                <div style={{ display: 'flex', gap: 8, marginTop: 18 }}>
                  {['Vegetarian', 'Anti-inflammatory', 'Quick'].map((m) => <span key={m} style={{ background: 'rgba(255,255,255,0.12)', padding: '6px 12px', borderRadius: 999, fontSize: 12, fontWeight: 500 }}>{m}</span>)}
                </div>
                <img src="assets/meal-app.webp" alt="" style={{ position: 'absolute', bottom: -30, right: -20, width: 280, filter: 'drop-shadow(0 12px 24px rgba(0,0,0,0.3))' }} />
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Real-member transformations */}
      <section style={{ padding: '80px 24px' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 40 }}>
            <Reveal>
              <span style={{ background: W2.peach, color: W2.ink, padding: '6px 14px', borderRadius: 999, fontSize: 12, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase' }}>Real members</span>
              <h2 style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontWeight: 600, fontSize: 56, lineHeight: 1.05, letterSpacing: '-0.03em', margin: '20px 0 12px' }}>
                Women showing up <span style={{ color: W2.coral }}>for themselves.</span>
              </h2>
              <p style={{ fontSize: 18, color: W2.ink2, margin: 0 }}>Eight of the four hundred thousand. Their photos, their words.</p>
            </Reveal>
          </div>
          <MembersGrid accent={W2.coral} ink={W2.ink} cols={4} radius={24} />
          <Reveal delay={120}>
            <div style={{ marginTop: 56, maxWidth: 920, marginLeft: 'auto', marginRight: 'auto', background: W2.paper, borderRadius: 36, padding: '48px 56px', boxShadow: '0 30px 60px -30px rgba(31,33,40,0.12), 0 0 0 1px rgba(31,33,40,0.04)' }}>
              <TestimonialRotator accent={W2.coral} ink={W2.ink} cream="#fff" />
            </div>
          </Reveal>
        </div>
      </section>

      {/* Pricing — single card with toggle vibe */}
      <section style={{ padding: '60px 24px' }}>
        <div style={{ maxWidth: 920, margin: '0 auto', background: `linear-gradient(135deg, ${W2.coral}, #FFA8B5)`, borderRadius: 36, padding: '64px 56px', position: 'relative', overflow: 'hidden' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'center', position: 'relative' }}>
            <Reveal>
              <span style={{ background: W2.ink, color: '#fff', padding: '6px 14px', borderRadius: 999, fontSize: 12, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase' }}>Pricing</span>
              <h2 style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontWeight: 600, fontSize: 56, lineHeight: 1.0, letterSpacing: '-0.03em', margin: '20px 0 16px', color: W2.ink }}>
                7 days free.<br />Then <span style={{ fontFamily: '"Instrument Serif", serif', fontStyle: 'italic', fontWeight: 400 }}>your choice.</span>
              </h2>
              <p style={{ fontSize: 16, color: 'rgba(31,33,40,0.78)', margin: 0, maxWidth: 360 }}>Cancel anytime, in two taps. No phone tree, no guilt trip.</p>
            </Reveal>
            <Reveal delay={120}>
              <div style={{ background: W2.paper, borderRadius: 28, padding: 32, boxShadow: '0 30px 60px -20px rgba(0,0,0,0.25)' }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 24 }}>
                  <div style={{ padding: 16, borderRadius: 18, border: `1px solid ${W2.rule}`, textAlign: 'center' }}>
                    <div style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: W2.ink2, fontWeight: 600 }}>Monthly</div>
                    <div style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontSize: 32, fontWeight: 600, marginTop: 4, letterSpacing: '-0.02em' }}>$19.99</div>
                    <div style={{ fontSize: 11, color: W2.ink2 }}>per month</div>
                  </div>
                  <div style={{ padding: 16, borderRadius: 18, background: W2.ink, color: '#fff', textAlign: 'center', position: 'relative' }}>
                    <span style={{ position: 'absolute', top: -10, left: '50%', transform: 'translateX(-50%)', background: W2.coral, color: '#fff', padding: '3px 10px', borderRadius: 999, fontSize: 10, fontWeight: 700, letterSpacing: '0.08em' }}>SAVE 50%</span>
                    <div style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', opacity: 0.7, fontWeight: 600 }}>Annual</div>
                    <div style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontSize: 32, fontWeight: 600, marginTop: 4, letterSpacing: '-0.02em' }}>$119.99</div>
                    <div style={{ fontSize: 11, opacity: 0.7 }}>per year</div>
                  </div>
                </div>
                <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 20px', display: 'grid', gap: 8, fontSize: 13, color: W2.ink }}>
                  {['All workouts & programs', 'Meal plans + grocery lists', 'Community + coach support', 'HealthKit / Google Fit'].map((f) => (
                    <li key={f} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <span style={{ width: 16, height: 16, borderRadius: 999, background: W2.coral, display: 'grid', placeItems: 'center' }}>
                        <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round"><path d="M4 12l5 5L20 6" /></svg>
                      </span>{f}
                    </li>
                  ))}
                </ul>
                <button style={{ width: '100%', padding: '16px', background: W2.coral, color: '#fff', border: 0, borderRadius: 999, fontFamily: 'inherit', fontSize: 15, fontWeight: 600, cursor: 'pointer' }}>Start free trial →</button>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section style={{ padding: '80px 24px' }}>
        <div style={{ maxWidth: 920, margin: '0 auto' }}>
          <Reveal>
            <div style={{ textAlign: 'center', marginBottom: 32 }}>
              <span style={{ background: W2.peach, color: W2.ink, padding: '6px 14px', borderRadius: 999, fontSize: 12, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase' }}>Questions</span>
              <h2 style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontWeight: 600, fontSize: 48, lineHeight: 1.05, letterSpacing: '-0.03em', margin: '16px 0 0' }}>
                Things <span style={{ color: W2.coral }}>women ask</span> us.
              </h2>
            </div>
          </Reveal>
          <Reveal delay={80}>
            <div style={{ background: W2.paper, borderRadius: 28, padding: '8px 36px', boxShadow: '0 10px 30px -15px rgba(31,33,40,0.1), 0 0 0 1px rgba(31,33,40,0.04)' }}>
              <FAQAccordion accent={W2.coral} ink={W2.ink} divider={W2.rule} />
            </div>
          </Reveal>
        </div>
      </section>

      {/* Footer */}
      <footer style={{ padding: '60px 24px 32px' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 48 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <img src="assets/logo.png" alt="JOAN" style={{ width: 40, height: 40, borderRadius: 9 }} />
              <span style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontWeight: 600, fontSize: 18 }}>Train with Joan</span>
            </div>
            <p style={{ fontSize: 14, lineHeight: 1.55, color: W2.ink2, maxWidth: 320, margin: 0 }}>Strength, mobility, community — for women, at any age, from any starting point.</p>
          </div>
          {[['App', ['Workouts', 'Meals', 'Community', 'Pricing']], ['Joan', ['Story', 'Press', 'Cookbook', 'Challenges']], ['Company', ['About', 'Help', 'Terms', 'Privacy']]].map(([title, items]) => (
            <div key={title}>
              <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, marginBottom: 16 }}>{title}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10, fontSize: 14, color: W2.ink2 }}>
                {items.map((i) => <li key={i} style={{ cursor: 'pointer' }}>{i}</li>)}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ maxWidth: 1180, margin: '32px auto 0', paddingTop: 24, borderTop: `1px solid ${W2.rule}`, display: 'flex', justifyContent: 'space-between', fontSize: 12, color: W2.ink2 }}>
          <span>© 2026 Plankk Media · Train with Joan</span>
          <span>Made with care for women, by women.</span>
        </div>
      </footer>
    </div>
  );
}

window.WellnessV2 = WellnessV2;