// Direction 2 · Modern Wellness App
// Soft cream/peach palette, generous rounded corners, friendly geometric layouts,
// pill chips, lots of soft shadows, lifestyle-app energy. Bricolage Grotesque headings.

const W = {
  cream: '#F7F8FC',
  paper: '#FFFFFF',
  ink: '#1F2128',
  ink2: 'rgba(31,33,40,0.68)',
  peach: '#DDE2F5',   // soft lavender (was peach)
  coral: '#FB8A99',   // brand pink (was coral)
  sage: '#1A2B5C',    // brand navy (was sage)
  rule: 'rgba(31,33,40,0.08)',
};

function WellnessDirection() {
  const [scrollerRef, scrolled] = useScrolled(40);
  return (
    <div
      ref={scrollerRef}
      className="twj-page"
      style={{
        width: '100%', height: '100%', overflowY: 'auto', overflowX: 'hidden',
        background: W.cream, color: W.ink,
        fontFamily: '"DM Sans", system-ui, sans-serif',
        fontSize: 16, lineHeight: 1.55,
      }}
    >
      <WNav scrolled={scrolled} />
      <WHero />
      <WTrustBar />
      <WStory />
      <WFeatures />
      <WApp />
      <WTestimonials />
      <WPricing />
      <WFAQ />
      <WCTA />
      <WFooter />
    </div>
  );
}

// ── Nav ──────────────────────────────────────────────────────────
function WNav({ scrolled }) {
  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 50,
      padding: '16px 24px', transition: 'padding .3s',
    }}>
      <div style={{
        maxWidth: 1180, margin: '0 auto',
        background: scrolled ? 'rgba(255,255,255,0.85)' : 'rgba(255,255,255,0.6)',
        backdropFilter: 'blur(20px)',
        borderRadius: 999, padding: '12px 16px 12px 28px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        boxShadow: scrolled ? '0 6px 32px rgba(45,27,18,0.08)' : '0 2px 12px rgba(45,27,18,0.04)',
        border: '1px solid rgba(45,27,18,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, display: 'block' }} />
          <span style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontWeight: 600, fontSize: 18, letterSpacing: '-0.01em' }}>Train with Joan</span>
        </div>
        <div className="twj-nav-links" style={{ display: 'flex', gap: 4, fontSize: 14, fontWeight: 500 }}>
          {['Workouts', 'Meals', 'Community', 'Pricing', 'FAQ'].map((l) => (
            <span key={l} style={{ padding: '8px 14px', borderRadius: 999, cursor: 'pointer' }}>{l}</span>
          ))}
        </div>
        <button style={{ background: W.ink, color: '#fff', border: 0, padding: '12px 22px', borderRadius: 999, fontFamily: 'inherit', fontWeight: 600, fontSize: 14, cursor: 'pointer' }}>Try free →</button>
      </div>
    </div>
  );
}

// ── Hero ─────────────────────────────────────────────────────────
function WHero() {
  return (
    <section style={{ position: 'relative', padding: '32px 24px 80px' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{
          background: W.paper, borderRadius: 36, padding: '72px 56px', position: 'relative', overflow: 'hidden',
          boxShadow: '0 40px 80px -30px rgba(45,27,18,0.18), 0 0 0 1px rgba(45,27,18,0.04)',
        }}>
          {/* decorative blob */}
          <div style={{ position: 'absolute', right: -120, top: -120, width: 420, height: 420, borderRadius: 999, background: `radial-gradient(circle, ${W.peach}, ${W.peach}00 70%)`, pointerEvents: 'none' }} />
          <div style={{ position: 'absolute', left: -60, bottom: -120, width: 320, height: 320, borderRadius: 999, background: `radial-gradient(circle, ${W.sage}55, transparent 70%)`, pointerEvents: 'none' }} />

          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48, alignItems: 'center', position: 'relative' }}>
            <Reveal>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: W.cream, color: W.ink, padding: '8px 14px', borderRadius: 999, fontSize: 13, fontWeight: 500 }}>
                <span style={{ width: 8, height: 8, borderRadius: 999, background: W.coral, animation: 'twjPulse 2s ease-in-out infinite' }} />
                400,000+ women already showing up
              </span>
              <h1 style={{
                fontFamily: 'Bricolage Grotesque, sans-serif',
                fontWeight: 600, fontSize: 76, lineHeight: 1.0, letterSpacing: '-0.035em',
                margin: '24px 0 24px',
              }}>
                Strength.<br />Mobility.<br />
                <span style={{ background: `linear-gradient(120deg, ${W.coral}, ${W.peach})`, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text', fontFamily: '"Instrument Serif", serif', fontStyle: 'italic', fontWeight: 400 }}>
                  At any age.
                </span>
              </h1>
              <p style={{ fontSize: 19, lineHeight: 1.55, color: W.ink2, maxWidth: 480, margin: 0 }}>
                Joan started at 70 — and got stronger every year. The app gives you her exact recipe: guided workouts, real-food meals, and a community of women who actually show up.
              </p>
              <div style={{ marginTop: 36, display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
                <button style={{ background: W.coral, color: '#fff', border: 0, padding: '20px 32px', borderRadius: 999, fontWeight: 600, fontSize: 16, cursor: 'pointer', fontFamily: 'inherit', boxShadow: '0 12px 28px -8px rgba(232,133,106,0.55)', display: 'inline-flex', alignItems: 'center', gap: 10 }}>
                  Start your 7-day free trial
                  <span style={{ width: 24, height: 24, borderRadius: 999, background: '#fff', color: W.coral, display: 'grid', placeItems: 'center', fontSize: 14 }}>→</span>
                </button>
                <button style={{ background: 'transparent', color: W.ink, border: `1.5px solid ${W.ink}`, padding: '18px 24px', borderRadius: 999, fontWeight: 600, fontSize: 15, cursor: 'pointer', fontFamily: 'inherit', display: 'inline-flex', alignItems: 'center', gap: 10 }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
                  Watch 60s tour
                </button>
              </div>
              <div style={{ marginTop: 24 }}>
                <AppStoreBadges height={52} dark />
              </div>
              <div style={{ marginTop: 32, display: 'flex', alignItems: 'center', gap: 16 }}>
                <div style={{ display: 'flex' }}>
                  {[0,1,2,3].map((i) => (
                    <Img key={i} id={`hero-avatar-${i}`} w={36} h={36} shape="circle" style={{ marginLeft: i ? -10 : 0, border: `3px solid ${W.paper}` }} />
                  ))}
                </div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600 }}>★★★★★ 4.5 on the App Store</div>
                  <div style={{ fontSize: 12, color: W.ink2 }}>Loved by women 50, 60, 70+</div>
                </div>
              </div>
            </Reveal>

            <Reveal delay={120}>
              {/* Hero: Joan flex on lavender halo */}
              <div style={{ position: 'relative', height: 600, display: 'grid', placeItems: 'center' }}>
                <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(circle at 55% 55%, ${W.peach} 0%, ${W.peach}00 65%)`, borderRadius: 999 }} />
                <img src="assets/joan-flex.webp" alt="Joan flexing" style={{ position: 'relative', maxWidth: '100%', maxHeight: 600, objectFit: 'contain', filter: 'drop-shadow(0 30px 50px rgba(31,33,40,0.18))' }} />
                {/* floating badge */}
                <div style={{ position: 'absolute', top: 80, left: 0, background: W.paper, padding: '14px 18px', borderRadius: 18, boxShadow: '0 12px 32px rgba(31,33,40,0.12)', display: 'flex', alignItems: 'center', gap: 12, zIndex: 2 }}>
                  <div style={{ width: 36, height: 36, borderRadius: 12, background: W.sage, display: 'grid', placeItems: 'center' }}>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l8.84 8.84 8.84-8.84a5.5 5.5 0 0 0 0-7.78z" /></svg>
                  </div>
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>Today's workout</div>
                    <div style={{ fontSize: 11, color: W.ink2 }}>32 min · low impact</div>
                  </div>
                </div>
                <div style={{ position: 'absolute', bottom: 80, right: 0, background: W.coral, color: '#fff', padding: '14px 16px', borderRadius: 18, fontSize: 13, fontWeight: 600, boxShadow: '0 12px 32px rgba(251,138,153,0.5)', display: 'flex', alignItems: 'center', gap: 8, zIndex: 2 }}>
                  <span style={{ width: 28, height: 28, borderRadius: 999, background: 'rgba(255,255,255,0.25)', display: 'grid', placeItems: 'center' }}>🔥</span>
                  47-day streak
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
      <style>{`@keyframes twjPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}`}</style>
    </section>
  );
}

// ── Trust bar ────────────────────────────────────────────────────
function WTrustBar() {
  return (
    <section style={{ padding: '24px', overflow: 'hidden' }}>
      <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: W.ink2, fontWeight: 600 }}>Featured in</span>
        {PRESS.map((p) => (
          <span key={p} style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontSize: 18, color: W.ink, opacity: 0.45, fontWeight: 600, letterSpacing: '0.02em' }}>{p}</span>
        ))}
      </div>
    </section>
  );
}

// ── Story / Before-After ─────────────────────────────────────────
function WStory() {
  return (
    <section style={{ padding: '80px 24px' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', background: W.paper, borderRadius: 36, padding: '72px 56px', boxShadow: '0 30px 60px -30px rgba(45,27,18,0.12), 0 0 0 1px rgba(45,27,18,0.04)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'center' }}>
          <Reveal>
            <Pill color={W.peach}>Joan's Story</Pill>
            <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. <span style={{ color: W.coral }}>I handed it back.</span>
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.65, color: W.ink2, margin: '0 0 24px' }}>
              I weighed almost 200 pounds, struggled with my mobility, and was tired of being told this was just life now. My daughter Michelle, a strength coach, sat me down and built me a plan I could actually do. Two years later, I was on magazine covers.
            </p>
            <p style={{ fontSize: 18, lineHeight: 1.65, color: W.ink2, margin: '0 0 36px' }}>
              We turned that plan into the Train With Joan app — so the next woman who needs it doesn't need a daughter who's a coach.
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
              {[['–70 lbs', 'lost & kept off'], ['0', 'medications'], ['76', 'and lifting']].map(([n, l]) => (
                <div key={l} style={{ background: W.cream, padding: 20, borderRadius: 20 }}>
                  <div style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontWeight: 600, fontSize: 32, color: W.coral, lineHeight: 1, letterSpacing: '-0.02em' }}>{n}</div>
                  <div style={{ fontSize: 12, color: W.ink2, 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%', height: 'auto', display: 'block', borderRadius: 28 }} />
              <span style={{ position: 'absolute', top: 16, left: 16, background: 'rgba(31,33,40,0.85)', color: '#fff', padding: '6px 12px', borderRadius: 999, fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 700 }}>Before</span>
              <span style={{ position: 'absolute', bottom: 16, right: 16, background: W.coral, color: '#fff', padding: '6px 12px', borderRadius: 999, fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 700 }}>5 years later</span>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Pill({ children, color, fg = W.ink }) {
  return (
    <span style={{ display: 'inline-block', background: color, color: fg, padding: '6px 14px', borderRadius: 999, fontSize: 12, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{children}</span>
  );
}

// ── Features ─────────────────────────────────────────────────────
function WFeatures() {
  const items = [
    { icon: 'workout', tag: 'Workouts', tone: W.coral, title: 'Strength built day by day', body: 'Three to five guided sessions a week, 30–45 minutes each. Mobility track for limited range of motion built in.', meta: ['Beginner', 'Intermediate', 'Mobility'] },
    { icon: 'meals', tag: 'Meal Plan', tone: W.sage, title: 'Generous, real-food meals', body: 'Weekly menus, swappable recipes, auto grocery lists. No fads, no powders, no plain chicken every night.', meta: ['Vegetarian', 'Anti-inflammatory', 'Quick'] },
    { icon: 'community', tag: 'Community', tone: W.peach, title: 'A daily room of women', body: 'Live check-ins, member spotlights, and certified coaches answering form & nutrition questions.', meta: ['Live', 'Coached', 'Daily'] },
    { icon: 'progress', tag: 'Progress', tone: W.coral, title: 'What matters, tracked simply', body: 'Strength, mood, sleep, mobility, and the scale if you want it. Apple Health & Google Fit synced.', meta: ['HealthKit', 'Streaks', 'Trends'] },
  ];
  return (
    <section style={{ padding: '80px 24px' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <Reveal>
          <div style={{ textAlign: 'center', marginBottom: 56 }}>
            <Pill color={W.peach}>What's Inside</Pill>
            <h2 style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontWeight: 600, fontSize: 56, lineHeight: 1.05, letterSpacing: '-0.03em', margin: '20px 0 16px' }}>
              Everything Joan used —<br /><span style={{ color: W.coral }}>nothing she didn't.</span>
            </h2>
            <p style={{ fontSize: 18, color: W.ink2, maxWidth: 560, margin: '0 auto' }}>Four pillars, one app, zero fluff. Every feature exists because Joan needed it to keep going.</p>
          </div>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
          {items.map((it, i) => (
            <Reveal key={it.tag} delay={i * 80}>
              <article style={{ background: W.paper, borderRadius: 28, padding: 32, height: '100%', boxShadow: '0 10px 30px -15px rgba(45,27,18,0.1), 0 0 0 1px rgba(45,27,18,0.04)', position: 'relative', overflow: 'hidden' }}>
                <div style={{ position: 'absolute', top: -40, right: -40, width: 160, height: 160, borderRadius: 999, background: `${it.tone}30` }} />
                <div style={{ position: 'relative' }}>
                  <FeatureIcon name={it.icon} bg={it.tone} />
                  <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: it.tone, fontWeight: 700, marginTop: 24 }}>{it.tag}</div>
                  <h3 style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontWeight: 600, fontSize: 28, lineHeight: 1.15, margin: '8px 0 14px', letterSpacing: '-0.02em' }}>{it.title}</h3>
                  <p style={{ fontSize: 15, lineHeight: 1.6, color: W.ink2, margin: '0 0 20px' }}>{it.body}</p>
                  <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                    {it.meta.map((m) => (
                      <span key={m} style={{ background: W.cream, padding: '6px 12px', borderRadius: 999, fontSize: 12, fontWeight: 500, color: W.ink }}>{m}</span>
                    ))}
                  </div>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function FeatureIcon({ name, bg }) {
  const stroke = '#fff';
  const paths = {
    workout: <path d="M6 12h2m12 0h-2M9 6v12m6-12v12M3 9v6m18-6v6" />,
    meals: <path d="M4 8h16M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8M9 8V4m6 4V4" />,
    community: <><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" /></>,
    progress: <path d="M3 17l6-6 4 4 8-8M14 7h7v7" />,
  };
  return (
    <div style={{ width: 56, height: 56, borderRadius: 18, background: bg, display: 'grid', placeItems: 'center', boxShadow: `0 12px 24px -10px ${bg}` }}>
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">{paths[name]}</svg>
    </div>
  );
}

// ── App walkthrough ──────────────────────────────────────────────
function WApp() {
  return (
    <section style={{ padding: '80px 24px' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', background: W.ink, color: W.cream, borderRadius: 36, padding: '72px 56px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(circle at 80% 20%, ${W.coral}40, transparent 50%)` }} />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center', position: 'relative' }}>
          <Reveal>
            <span style={{ display: 'inline-block', background: 'rgba(255,255,255,0.1)', color: W.peach, padding: '6px 14px', borderRadius: 999, fontSize: 12, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase' }}>The App</span>
            <h2 style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontWeight: 600, fontSize: 56, lineHeight: 1.05, letterSpacing: '-0.03em', margin: '20px 0 24px' }}>
              Press play.<br /><span style={{ color: W.peach }}>That's the whole plan.</span>
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: 'rgba(250,244,237,0.78)', margin: '0 0 32px' }}>
              Today's workout is on the home screen. Today's meal is one tap away. Your streak, your strength, your story — all in one place that opens fast and stays out of your way.
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              {[
                ['Apple Health sync', 'HealthKit'],
                ['Cast to TV', 'AirPlay & Chromecast'],
                ['Offline downloads', 'Workouts to-go'],
                ['Family share', 'Up to 5 members'],
              ].map(([t, s]) => (
                <div key={t} style={{ background: 'rgba(255,255,255,0.06)', padding: '14px 16px', borderRadius: 16, border: '1px solid rgba(255,255,255,0.08)' }}>
                  <div style={{ fontWeight: 600, fontSize: 14 }}>{t}</div>
                  <div style={{ fontSize: 12, opacity: 0.7, marginTop: 2 }}>{s}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 32, display: 'flex', gap: 12 }}>
              <button style={{ background: W.cream, color: W.ink, border: 0, padding: '14px 22px', borderRadius: 999, fontSize: 14, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer' }}>App Store ↗</button>
              <button style={{ background: 'transparent', color: W.cream, border: '1.5px solid rgba(250,244,237,0.4)', padding: '14px 22px', borderRadius: 999, fontSize: 14, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer' }}>Google Play ↗</button>
            </div>
          </Reveal>
          <Reveal delay={150}>
            <div style={{ display: 'grid', placeItems: 'center', position: 'relative' }}>
              <img src="assets/workout-app.webp" alt="Train With Joan workout screen" style={{ maxWidth: '100%', maxHeight: 600, objectFit: 'contain', filter: 'drop-shadow(0 30px 50px rgba(0,0,0,0.4))' }} />
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ── Testimonials + real-member transformations ──────────────────
function WTestimonials() {
  return (
    <section style={{ padding: '80px 24px' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <Reveal>
          <div style={{ textAlign: 'center', marginBottom: 48 }}>
            <Pill color={W.sage} fg="#fff">Real members</Pill>
            <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: W.coral }}>for themselves.</span>
            </h2>
            <p style={{ fontSize: 18, color: W.ink2, margin: 0 }}>Real Train With Joan members. No filters, no fine print.</p>
          </div>
        </Reveal>
        <MembersGrid accent={W.coral} ink={W.ink} cols={4} radius={20} />
        <Reveal delay={120}>
          <div style={{ marginTop: 56, background: W.paper, borderRadius: 28, padding: '36px 36px 32px', boxShadow: '0 20px 50px -25px rgba(31,33,40,0.18), 0 0 0 1px rgba(31,33,40,0.04)', maxWidth: 920, margin: '56px auto 0' }}>
            <TestimonialRotator accent={W.coral} ink={W.ink} cream="#fff" />
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ── Pricing ──────────────────────────────────────────────────────
function WPricing() {
  return (
    <section style={{ padding: '80px 24px' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <Reveal>
          <div style={{ textAlign: 'center', marginBottom: 48 }}>
            <Pill color={W.peach}>Pricing</Pill>
            <h2 style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontWeight: 600, fontSize: 56, lineHeight: 1.05, letterSpacing: '-0.03em', margin: '20px 0 12px' }}>
              Try it free for a week.
            </h2>
            <p style={{ fontSize: 18, color: W.ink2, margin: 0 }}>No surprises. Cancel anytime in two taps.</p>
          </div>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, maxWidth: 920, margin: '0 auto' }}>
          <Reveal>
            <WPriceCard
              title="Monthly"
              price="$19.99"
              unit="per month"
              sub="Easy on, easy off."
              cta="Start monthly"
              accent={W.sage}
              dark={false}
            />
          </Reveal>
          <Reveal delay={120}>
            <WPriceCard
              title="Annual"
              price="$119.99"
              unit="per year"
              sub="Save 50% — that's 7 months on us."
              cta="Start annual"
              accent={W.coral}
              dark
              ribbon="Save 50%"
            />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function WPriceCard({ title, price, unit, sub, cta, accent, dark, ribbon }) {
  const bg = dark ? W.ink : W.paper;
  const fg = dark ? W.cream : W.ink;
  const rule = dark ? 'rgba(250,244,237,0.12)' : W.rule;
  return (
    <div style={{ background: bg, color: fg, borderRadius: 28, padding: '36px 32px', boxShadow: '0 20px 40px -20px rgba(45,27,18,0.18), 0 0 0 1px rgba(45,27,18,0.04)', position: 'relative' }}>
      {ribbon && (
        <span style={{ position: 'absolute', top: 20, right: 20, background: accent, color: '#fff', padding: '5px 12px', borderRadius: 999, fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{ribbon}</span>
      )}
      <div style={{ fontSize: 13, fontWeight: 600, color: accent, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{title}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 16 }}>
        <span style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontSize: 64, fontWeight: 600, lineHeight: 1, letterSpacing: '-0.03em' }}>{price}</span>
        <span style={{ fontSize: 14, opacity: 0.7 }}>{unit}</span>
      </div>
      <p style={{ marginTop: 8, fontSize: 14, opacity: 0.78 }}>{sub}</p>
      <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0', display: 'grid', gap: 10, fontSize: 14, borderTop: `1px solid ${rule}`, paddingTop: 24 }}>
        {['All workouts & programs', 'Meal plans + grocery lists', 'Community & coach support', 'HealthKit + Google Fit'].map((f) => (
          <li key={f} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ width: 18, height: 18, borderRadius: 999, background: accent, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
              <svg width="10" height="10" 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: accent, color: '#fff', border: 0, borderRadius: 999, fontFamily: 'inherit', fontSize: 15, fontWeight: 600, cursor: 'pointer' }}>{cta} →</button>
      <p style={{ marginTop: 12, fontSize: 12, opacity: 0.55, textAlign: 'center' }}>7 days free. Cancel anytime.</p>
    </div>
  );
}

// ── FAQ ─────────────────────────────────────────────────────────
function WFAQ() {
  return (
    <section style={{ padding: '80px 24px' }}>
      <div style={{ maxWidth: 920, margin: '0 auto' }}>
        <Reveal>
          <div style={{ textAlign: 'center', marginBottom: 48 }}>
            <Pill color={W.peach}>Questions</Pill>
            <h2 style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontWeight: 600, fontSize: 52, lineHeight: 1.05, letterSpacing: '-0.03em', margin: '20px 0 0' }}>
              Things <span style={{ color: W.coral }}>women ask</span> us.
            </h2>
          </div>
        </Reveal>
        <Reveal delay={80}>
          <div style={{ background: W.paper, borderRadius: 28, padding: '8px 36px', boxShadow: '0 10px 30px -15px rgba(45,27,18,0.1), 0 0 0 1px rgba(45,27,18,0.04)' }}>
            <FAQAccordion accent={W.coral} ink={W.ink} divider={W.rule} />
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ── Final CTA ────────────────────────────────────────────────────
function WCTA() {
  return (
    <section style={{ padding: '40px 24px 80px' }}>
      <div style={{
        maxWidth: 1180, margin: '0 auto',
        background: `linear-gradient(135deg, ${W.coral} 0%, ${W.peach} 100%)`,
        borderRadius: 36, padding: '80px 56px', textAlign: 'center',
        position: 'relative', overflow: 'hidden',
      }}>
        <Reveal>
          <h2 style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontWeight: 600, fontSize: 64, lineHeight: 1.0, letterSpacing: '-0.03em', margin: 0, color: W.ink, maxWidth: 760, marginInline: 'auto' }}>
            If Joan can do it, <span style={{ fontFamily: '"Instrument Serif", serif', fontStyle: 'italic', fontWeight: 400 }}>so can you.</span>
          </h2>
          <p style={{ fontSize: 19, color: 'rgba(45,27,18,0.78)', maxWidth: 540, margin: '24px auto 36px' }}>
            Seven days free. Two-tap cancel. Your future self is already proud of you.
          </p>
          <button style={{ background: W.ink, color: '#fff', border: 0, padding: '22px 36px', borderRadius: 999, fontWeight: 600, fontSize: 17, cursor: 'pointer', fontFamily: 'inherit' }}>Start your free trial →</button>
        </Reveal>
      </div>
    </section>
  );
}

// ── Footer ──────────────────────────────────────────────────────
function WFooter() {
  return (
    <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, display: 'block' }} />
            <span style={{ fontFamily: 'Bricolage Grotesque, sans-serif', fontWeight: 600, fontSize: 18 }}>Train with Joan</span>
          </div>
          <p style={{ fontSize: 14, lineHeight: 1.55, color: W.ink2, maxWidth: 320, margin: 0 }}>Strength, mobility, community — for women, at any age, from any starting point.</p>
        </div>
        <FooterColW title="App" items={['Workouts', 'Meals', 'Community', 'Pricing']} />
        <FooterColW title="Joan" items={['Story', 'Press', 'Cookbook', 'Challenges']} />
        <FooterColW title="Company" items={['About', 'Help', 'Terms', 'Privacy']} />
      </div>
      <div style={{ maxWidth: 1180, margin: '32px auto 0', paddingTop: 24, borderTop: `1px solid ${W.rule}`, display: 'flex', justifyContent: 'space-between', fontSize: 12, color: W.ink2 }}>
        <span>© 2026 Plankk Media · Train with Joan</span>
        <span>Made with care for women, by women.</span>
      </div>
    </footer>
  );
}

function FooterColW({ title, items }) {
  return (
    <div>
      <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, marginBottom: 16, color: W.ink }}>{title}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10, fontSize: 14, color: W.ink2 }}>
        {items.map((i) => <li key={i} style={{ cursor: 'pointer' }}>{i}</li>)}
      </ul>
    </div>
  );
}

window.WellnessDirection = WellnessDirection;
