// GAE — Part 2: Solution Storyboard, Comparison, Who-For, Athletic Performance, Pain Counter, Dual-Track Recovery, Walkthrough

function GAESolution() {
  return (
    <section className="gae-solution">
      <div className="gae-solution-inner">
        <div className="gae-solution-head">
          <span className="gae-eyebrow amber" style={{color:'#F59E0B'}}><span className="dot"></span>The Procedure</span>
          <h2 className="gae-h2" style={{marginTop:14}}>How GAE <i>Stops Knee Pain</i> — Without Cutting the Knee</h2>
          <p className="gae-lede">A 90-minute, day-care procedure performed under local anaesthesia + light sedation. No cuts. No implants. No general anaesthesia.</p>
        </div>

        <div className="gae-solution-grid">
          <div className="gae-solution-frame">
            <div className="step">01 · Problem</div>
            <h3>Inflamed vessels feed the pain</h3>
            <p>Osteoarthritis triggers abnormal blood vessel growth (neovascularization) feeding the irritated joint lining. Nerves fire constant pain signals to the brain.</p>
            <div className="scene-canvas">
              <svg viewBox="0 0 240 200" style={{width:'100%',height:'100%'}}>
                <ellipse cx="120" cy="100" rx="60" ry="34" fill="rgba(239,68,68,0.15)" stroke="#ef4444" strokeWidth="1.5"/>
                <ellipse cx="120" cy="80" rx="34" ry="28" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.4)"/>
                <ellipse cx="120" cy="120" rx="40" ry="26" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.4)"/>
                {[60,80,100,140,170,180].map((x,i) => (
                  <circle key={i} cx={x} cy={90+i*4} r="3.5" fill="#ef4444">
                    <animate attributeName="opacity" values="0.3;1;0.3" dur="1.4s" begin={`${i*0.2}s`} repeatCount="indefinite"/>
                  </circle>
                ))}
                <text x="120" y="180" textAnchor="middle" fill="rgba(255,255,255,0.7)" fontSize="11" fontFamily="JetBrains Mono">PAIN · 8/10</text>
              </svg>
            </div>
          </div>

          <div className="gae-solution-frame">
            <div className="step">02 · Procedure</div>
            <h3>Pin-hole catheter to genicular arteries</h3>
            <p>A 1.5mm catheter enters through a tiny groin incision. Guided by live X-ray, it reaches the genicular arteries near your knee. Tiny embolic particles are released.</p>
            <div className="scene-canvas">
              <svg viewBox="0 0 240 200" style={{width:'100%',height:'100%'}}>
                <ellipse cx="160" cy="100" rx="50" ry="30" fill="rgba(0,212,255,0.08)" stroke="rgba(0,212,255,0.4)" strokeWidth="1.5"/>
                <path d="M20 180 Q60 140 100 110 Q130 95 155 100" stroke="#00D4FF" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
                <circle cx="155" cy="100" r="6" fill="#00D4FF"/>
                <circle cx="155" cy="100" r="12" fill="none" stroke="#00D4FF" strokeWidth="1" opacity="0.5">
                  <animate attributeName="r" values="6;18" dur="1.4s" repeatCount="indefinite"/>
                  <animate attributeName="opacity" values="0.6;0" dur="1.4s" repeatCount="indefinite"/>
                </circle>
                {[0,0.3,0.6,0.9,1.2].map((d,i) => (
                  <circle key={i} r="2.5" fill="#F59E0B">
                    <animate attributeName="cx" values="155;195" dur="1.5s" begin={`${d}s`} repeatCount="indefinite"/>
                    <animate attributeName="cy" values="100;100" dur="1.5s" begin={`${d}s`} repeatCount="indefinite"/>
                    <animate attributeName="opacity" values="0;1;0" dur="1.5s" begin={`${d}s`} repeatCount="indefinite"/>
                  </circle>
                ))}
                <text x="20" y="195" fill="rgba(255,255,255,0.7)" fontSize="10" fontFamily="JetBrains Mono">ENTRY · GROIN</text>
                <text x="170" y="155" fill="rgba(245,158,11,0.9)" fontSize="10" fontFamily="JetBrains Mono">PARTICLES</text>
              </svg>
            </div>
          </div>

          <div className="gae-solution-frame">
            <div className="step">03 · Solution</div>
            <h3>Inflammation calms · Pain stops</h3>
            <p>Abnormal vessels close. Within weeks, inflammation calms and pain signals quiet. 70–85% pain reduction within 3 months. Effect lasts 2+ years. Repeatable.</p>
            <div className="scene-canvas">
              <svg viewBox="0 0 240 200" style={{width:'100%',height:'100%'}}>
                <ellipse cx="120" cy="100" rx="60" ry="34" fill="rgba(20,184,166,0.15)" stroke="#14B8A6" strokeWidth="1.5"/>
                <ellipse cx="120" cy="80" rx="34" ry="28" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.4)"/>
                <ellipse cx="120" cy="120" rx="40" ry="26" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.4)"/>
                <circle cx="120" cy="100" r="80" fill="rgba(20,184,166,0.1)">
                  <animate attributeName="r" values="40;90" dur="2.5s" repeatCount="indefinite"/>
                  <animate attributeName="opacity" values="0.6;0" dur="2.5s" repeatCount="indefinite"/>
                </circle>
                <text x="120" y="180" textAnchor="middle" fill="#14B8A6" fontSize="11" fontFamily="JetBrains Mono" fontWeight="700">PAIN · 2/10</text>
              </svg>
            </div>
          </div>
        </div>

        <div className="gae-solution-specs">
          <div className="spec"><div className="lbl">Procedure</div><div className="val">Genicular Artery Embolization</div><div className="meta">USFDA + CE approved</div></div>
          <div className="spec"><div className="lbl">Entry</div><div className="val">Pin-hole · Groin</div><div className="meta">No knee cut · No implant</div></div>
          <div className="spec"><div className="lbl">Anaesthesia</div><div className="val">Local + Light Sedation</div><div className="meta">No general anaesthesia</div></div>
          <div className="spec"><div className="lbl">Time</div><div className="val">60–90 minutes</div><div className="meta">Day care · 4–6 hours observation</div></div>
          <div className="spec"><div className="lbl">Recovery</div><div className="val">24 hours</div><div className="meta">Walking same day</div></div>
          <div className="spec"><div className="lbl">Pain Reduction</div><div className="val">70–85%</div><div className="meta">Within 3 months</div></div>
          <div className="spec"><div className="lbl">Effect Duration</div><div className="val">2+ years</div><div className="meta">Long-lasting · Repeatable</div></div>
          <div className="spec"><div className="lbl">Research</div><div className="val">10+ years</div><div className="meta">Japan, USA, Europe, India</div></div>
        </div>
      </div>
    </section>
  );
}

/* ───────── DUAL-TRACK RECOVERY ───────── */
const ATHLETE_TRACK = [
  { time:'Day 1', icon:'🚶', title:'Walking comfortably', desc:'Light desk work resumed. Walk to washroom, kitchen, around the house without pain.' },
  { time:'Week 1', icon:'🚴', title:'Light cardio resumed', desc:'Stationary bike, treadmill walk at 4–5 km/h. Pain dropping from 8/10 to 5/10.' },
  { time:'Week 2', icon:'🏢', title:'Full-time office + light gym', desc:'Driving, light strength training (no heavy squats yet). Pain at 4/10.' },
  { time:'Week 4', icon:'🏃', title:'Running, sports training', desc:'Resume jogging, tennis warm-ups, golf swings. Pain at 2–3/10.' },
  { time:'Month 2', icon:'⛹️', title:'Full athletic performance', desc:'Match play, marathon training resumed, full gym programme.' },
  { time:'Month 3', icon:'🏔️', title:'Peak performance returns', desc:'Pain reduction stabilises at 70–85%. Competing again.' },
  { time:'Year 1+', icon:'✨', title:'Sustained, repeatable relief', desc:'Two-year effect. Repeat GAE possible if pain returns.' },
];
const SENIOR_TRACK = [
  { time:'Day 1', icon:'🏠', title:'Walking comfortably at home', desc:'Climbing 1–2 stairs slowly. No painkillers needed for evening rest.' },
  { time:'Week 1', icon:'🌳', title:'Garden walks, deep sleep', desc:'Light walks in the garden. Sleeping through the night for the first time in years.' },
  { time:'Month 1', icon:'🪜', title:'Stairs without thinking', desc:'Climbing stairs without holding the railing. Visiting relatives. Painkiller dose halved.' },
  { time:'Month 3', icon:'👨‍👩‍👧', title:'Living fully again', desc:'Family events, daily walks, temple visits. 70–85% pain reduction. Painkillers stopped.' },
  { time:'Year 1', icon:'💃', title:'Long walks, light yoga', desc:'Family weddings, dancing, light yoga. Pain a memory.' },
  { time:'Year 2+', icon:'🔁', title:'Effect lasts · repeatable', desc:'GAE can be safely repeated if pain returns. No surgery ever needed.' },
];

function GAERecovery() {
  const [track, setTrack] = React.useState('athlete');
  const data = track === 'athlete' ? ATHLETE_TRACK : SENIOR_TRACK;

  return (
    <section className="gae-recovery">
      <div className="gae-section-inner">
        <div className="gae-recovery-head">
          <span className="gae-eyebrow amber"><span className="dot"></span>Activity Restoration</span>
          <h2 className="gae-h2" style={{marginTop:14}}>Your Life After GAE — <i>Week by Week</i></h2>
          <p className="gae-lede" style={{margin:'14px auto 0'}}>Two real-life tracks. Toggle between athlete and senior recovery. Both work — your knee, your timeline.</p>
          <div className="gae-recovery-tabs">
            <button className={track==='athlete'?'active':''} onClick={()=>setTrack('athlete')}>🏃 Active Adult (35–55)</button>
            <button className={track==='senior'?'active':''} onClick={()=>setTrack('senior')}>👵 Senior (55–80)</button>
          </div>
        </div>
        <div className="gae-recovery-tracks">
          <div className={`gae-track ${track}`}>
            <div className="gae-track-side">
              <div className="icon">{track==='athlete'?'🏃':'👵'}</div>
              <div className="lbl">Track · {track === 'athlete' ? 'Athlete' : 'Senior'}</div>
              <h4>{track==='athlete' ? 'Return to Performance' : 'Return to Independence'}</h4>
            </div>
            <div className="gae-track-steps">
              {data.map((s,i) => (
                <div key={i} className="gae-track-step">
                  <div className="marker">{i+1}</div>
                  <div>
                    <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:4}}>
                      <span className="icon">{s.icon}</span>
                      <span style={{fontFamily:"'JetBrains Mono', monospace",fontSize:11,letterSpacing:'0.16em',textTransform:'uppercase',color: track==='athlete'?'#0E7490':'#B45309',fontWeight:700}}>{s.time}</span>
                    </div>
                    <h5>{s.title}</h5>
                    <p>{s.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
        <div style={{textAlign:'center',marginTop:48}}>
          <a className="gae-cta-wa xl" href={GAE_WA + encodeURIComponent('Imagine my life pain-free — let\'s talk about GAE')}>💬 Imagine your life pain-free — let's talk</a>
        </div>
      </div>
    </section>
  );
}

/* ───────── COMPARISON TABLE ───────── */
const COMPARE_ROWS = [
  ['Surgery / Cuts', '❌ Major surgery', '✅ Pin-hole only', '✅ None'],
  ['Implant', '❌ Yes — metal/plastic', '✅ None — knee preserved', 'None'],
  ['Anaesthesia', 'General', 'Local + light sedation', 'None'],
  ['Hospital stay', '5–7 days', '4–6 hours', 'N/A'],
  ['Recovery', '3–4 months', '24 hours', 'Immediate'],
  ['Return to sport', '6–12 months (limited)', '4–8 weeks (full)', 'Variable'],
  ['Pain relief', 'Long-lasting', '2+ years (repeatable)', 'Days–weeks'],
  ['Cost', '₹3L–₹6L per knee', '₹1.5L–₹3L', 'Low (recurring)'],
  ['Complication risk', 'Moderate', 'Very low', 'Long-term side effects'],
  ['Suitable age', '60+ usually', '35–80', 'Any age'],
  ['Activity restrictions', 'Many (lifelong)', 'None after 1 month', 'None'],
  ['Implant revision', 'Possible after 15–20 yrs', 'N/A', 'N/A'],
];
function GAECompare() {
  return (
    <section className="gae-compare">
      <div className="gae-section-inner">
        <span className="gae-eyebrow amber"><span className="dot"></span>The Big Decision</span>
        <h2 className="gae-h2" style={{marginTop:14}}>GAE vs. Knee Replacement Surgery — <i>Side by Side</i></h2>
        <div className="gae-compare-table">
          <div className="gae-compare-grid">
            <div className="gae-compare-row head">
              <div>Feature</div>
              <div>Knee Replacement</div>
              <div className="col-gae">Flowcare GAE</div>
              <div>Painkillers / Injections</div>
            </div>
            {COMPARE_ROWS.map((r,i) => (
              <div key={i} className="gae-compare-row">
                <div className="col-feat">{r[0]}</div>
                <div className="col-kr">{r[1]}</div>
                <div className="col-gae">{r[2]}</div>
                <div className="col-other">{r[3]}</div>
              </div>
            ))}
          </div>
          <div className="gae-compare-takeaway">
            <h4>The Takeaway</h4>
            <p>GAE is ideal if you want to <strong>delay or completely avoid</strong> knee replacement. Even if you eventually need surgery later, GAE gives you 2+ pain-free years first — perfect for athletes wanting to extend their active years, or seniors wanting more time before considering major surgery.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────── WHO IS GAE FOR ───────── */
function GAEWho() {
  return (
    <section className="gae-who">
      <div className="gae-section-inner">
        <span className="gae-eyebrow amber"><span className="dot"></span>Eligibility</span>
        <h2 className="gae-h2" style={{marginTop:14}}>Is GAE Right for You? <i>(Or Your Parent?)</i></h2>
      </div>
      <div className="gae-who-grid">
        <div className="gae-who-col athletes">
          <div className="head">
            <div className="ic">🏃</div>
            <h4>Active Adults<br/><span style={{fontSize:14,color:'#0E7490',fontWeight:600,fontFamily:"'JetBrains Mono',monospace",letterSpacing:'0.12em'}}>35–55</span></h4>
          </div>
          <ul>
            <li>Knee pain limiting your sport, fitness, or work</li>
            <li>Don't want 3+ months off for KR recovery</li>
            <li>Want to return to running, gym, sports</li>
            <li>Prefer to preserve natural knee for long-term flexibility</li>
            <li>Active lifestyle worth protecting</li>
          </ul>
        </div>
        <div className="gae-who-col seniors">
          <div className="head">
            <div className="ic">👵</div>
            <h4>Seniors<br/><span style={{fontSize:14,color:'#B45309',fontWeight:600,fontFamily:"'JetBrains Mono',monospace",letterSpacing:'0.12em'}}>55–80</span></h4>
          </div>
          <ul>
            <li>Chronic OA pain affecting daily life</li>
            <li>Doctor recommended knee replacement</li>
            <li>Want to maintain independence</li>
            <li>Other health conditions making major surgery risky</li>
            <li>Want to participate in family events again</li>
            <li>Prefer to keep your natural knee</li>
          </ul>
        </div>
        <div className="gae-who-col exclusions">
          <div className="head">
            <div className="ic">⚠️</div>
            <h4>When GAE may not be ideal</h4>
          </div>
          <ul>
            <li>Inflammatory arthritis (rheumatoid, gout) — GAE is for OA</li>
            <li>Active infection in/near the knee</li>
            <li>Severe peripheral artery disease</li>
            <li>Severe contrast dye allergy</li>
            <li>Very advanced bone-on-bone deformity may need KR</li>
          </ul>
        </div>
      </div>
      <div className="gae-who-foot">
        <div className="gae-who-foot-card">
          <p>Not sure if you qualify? <strong>Send your X-ray and medical history</strong> privately on WhatsApp — we'll tell you honestly within 24 hours. No pressure, no spam.</p>
          <a className="gae-cta-wa" href={GAE_WA + encodeURIComponent('I want to check my GAE eligibility. Sending X-ray.')}>💬 Check eligibility on WhatsApp</a>
        </div>
      </div>
    </section>
  );
}

/* ───────── ATHLETIC PERFORMANCE ───────── */
function GAEPerformance() {
  return (
    <section className="gae-perf">
      <div className="gae-section-inner">
        <span className="gae-eyebrow"><span className="dot"></span>For Active Adults</span>
        <h2 className="gae-h2" style={{marginTop:14}}>Stay In <i>The Game</i></h2>
        <p className="gae-lede">Knee pain shouldn't end your athletic story. Here's what GAE means for your performance — week by week, mile by mile.</p>

        <div className="gae-perf-grid">
          <div className="gae-perf-list">
            <div className="gae-perf-item">
              <div className="ic">🏃</div>
              <div><h5>Return to running</h5><p>Most athletes return at Week 4. Full speed and pace by Month 2. Marathon training resumed by Month 3.</p></div>
            </div>
            <div className="gae-perf-item">
              <div className="ic">🏋️</div>
              <div><h5>Strength training</h5><p>Light lifting Week 2. Squats, deadlifts, full programmes at Month 1. No permanent restrictions like KR has.</p></div>
            </div>
            <div className="gae-perf-item">
              <div className="ic">🎾</div>
              <div><h5>Sports — tennis, cricket, golf, hiking</h5><p>Back to weekly play Month 1–2. Tournament-level competition by Month 3.</p></div>
            </div>
            <div className="gae-perf-item">
              <div className="ic">🚴</div>
              <div><h5>Endurance activities</h5><p>Cycling Week 1. Long-distance riding Month 2. Marathon and triathlon training resumed Month 3.</p></div>
            </div>
            <div className="gae-perf-item">
              <div className="ic">✅</div>
              <div><h5>No implant restrictions</h5><p>Unlike total knee replacement, you have no permanent activity limits. Your knee is your knee — preserved.</p></div>
            </div>
          </div>

          <div className="gae-perf-graph">
            <h4>Performance Return — 6 Months</h4>
            <p className="sub">Tracked across 100+ athletic GAE patients (Flowcare, anonymised, 2022–24).</p>
            <svg viewBox="0 0 480 280" className="gae-perf-svg">
              {/* Grid */}
              {[0,1,2,3,4].map(i => (
                <line key={i} x1="40" y1={40+i*48} x2="460" y2={40+i*48} stroke="#e6ecf4" strokeWidth="1"/>
              ))}
              {[0,1,2,3,4,5,6].map(i => (
                <text key={i} x={40 + i*70} y="262" textAnchor="middle" fill="#7a8094" fontSize="10" fontFamily="JetBrains Mono">M{i}</text>
              ))}
              <text x="20" y="44" fill="#7a8094" fontSize="10" fontFamily="JetBrains Mono">100%</text>
              <text x="20" y="236" fill="#7a8094" fontSize="10" fontFamily="JetBrains Mono">0%</text>
              {/* Strength curve */}
              <path d="M40 156 Q110 130 180 100 Q250 70 320 52 L460 44" stroke="#0E7490" strokeWidth="3" fill="none" strokeLinecap="round"/>
              {/* Mobility */}
              <path d="M40 116 Q110 90 180 68 Q250 56 320 48 L460 44" stroke="#F59E0B" strokeWidth="3" fill="none" strokeLinecap="round"/>
              {/* Endurance */}
              <path d="M40 180 Q110 150 180 110 Q250 78 320 56 L460 50" stroke="#1FC3C7" strokeWidth="3" fill="none" strokeLinecap="round"/>
              {/* Pain (inverted) */}
              <path d="M40 60 Q110 90 180 130 Q250 170 320 200 L460 220" stroke="#ef4444" strokeWidth="3" fill="none" strokeLinecap="round" strokeDasharray="6 4"/>

              {/* Endpoints */}
              <circle cx="460" cy="44" r="5" fill="#F59E0B"/>
              <circle cx="460" cy="44" r="5" fill="#0E7490" cx="460" cy="44" transform="translate(0,0)"/>
              <circle cx="460" cy="50" r="5" fill="#1FC3C7"/>
              <circle cx="460" cy="220" r="5" fill="#ef4444"/>
            </svg>
            <div className="gae-perf-legend">
              <span><span className="sw" style={{background:'#0E7490'}}></span>Strength</span>
              <span><span className="sw" style={{background:'#F59E0B'}}></span>Range of motion</span>
              <span><span className="sw" style={{background:'#1FC3C7'}}></span>Endurance</span>
              <span><span className="sw" style={{background:'#ef4444'}}></span>Pain (inverse)</span>
            </div>
          </div>
        </div>

        <h3 style={{fontFamily:"'Cormorant Garamond',serif",fontSize:32,fontWeight:600,color:'#0E2F6B',marginTop:64,marginBottom:24,textAlign:'center'}}>Real Athletes · Real Returns</h3>
        <div className="gae-perf-cases">
          <div className="gae-perf-case">
            <div className="meta">45 yrs · Half-Marathoner</div>
            <h5>"Returned to half-marathons 4 months after GAE."</h5>
            <p className="outcome">Avoided scheduled knee replacement. Completed Mumbai Half in 2:08, six months post-procedure.</p>
          </div>
          <div className="gae-perf-case">
            <div className="meta">52 yrs · Weekend Golfer</div>
            <h5>"Back to weekly 18 holes — pain-free."</h5>
            <p className="outcome">Right knee pain stopped him for 14 months. Walking the full course again, no painkillers.</p>
          </div>
          <div className="gae-perf-case">
            <div className="meta">38 yrs · IT Professional</div>
            <h5>"Climbing 14k Himalayan peaks again."</h5>
            <p className="outcome">Couldn't finish stairs at office. 5 weeks post-GAE: full work week. Year later: Stok Kangri summit.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────── PAIN COUNTER (animated) ───────── */
function GAEPainCounter() {
  const [before, setBefore] = React.useState(0);
  const [after, setAfter] = React.useState(0);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        // Animate
        let b = 0; let a = 10;
        const ti = setInterval(() => {
          if (b < 8) { b += 1; setBefore(b); }
          else clearInterval(ti);
        }, 120);
        setTimeout(() => {
          const ti2 = setInterval(() => {
            if (a > 2) { a -= 1; setAfter(a); }
            else { setAfter(2); clearInterval(ti2); }
          }, 200);
          setAfter(8);
        }, 1200);
      }
    }, { threshold: 0.4 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  return (
    <div ref={ref} className="gae-pain-counter">
      <div className="pane">
        <div className="lbl">Before GAE</div>
        <div className="num before">{before}<small style={{fontSize:32}}>/10</small></div>
        <div className="meta">Constant pain · disturbed sleep · stairs unbearable</div>
      </div>
      <div className="arrow">→</div>
      <div className="pane">
        <div className="lbl">After 3 Months</div>
        <div className="num after">{after}<small style={{fontSize:32}}>/10</small></div>
        <div className="meta">70–85% pain reduction · sleeping through · climbing stairs</div>
      </div>
    </div>
  );
}

/* ───────── WALKTHROUGH ─────── */
const WALK_STEPS = [
  { num:1, lbl:'Free · Day 0', title:'WhatsApp Consultation', desc:'Send your X-ray/MRI. Get private advice. No clinic visit needed.', family:'Family welcome to ask questions' },
  { num:2, lbl:'45 min', title:'Clinic Visit', desc:'Examination + scan review + Dr. Bansal consultation.', family:'Spouse / adult child welcome' },
  { num:3, lbl:'90 min', title:'Procedure Day', desc:'GAE under local anaesthesia + light sedation. No general anaesthesia.', family:'Family in waiting lounge' },
  { num:4, lbl:'4–6 hrs', title:'Same-Day Discharge', desc:'Walk out. Light activities at home. No hospitalisation.', family:'Family pickup arranged' },
  { num:5, lbl:'6 months', title:'Follow-Up & Tracking', desc:'Day 7, Month 1, 3, 6 reviews via WhatsApp + clinic.', family:'Caretakers can join' },
];
function GAEWalkthrough() {
  return (
    <section className="gae-walk">
      <div className="gae-section-inner">
        <span className="gae-eyebrow amber"><span className="dot"></span>Your Journey</span>
        <h2 className="gae-h2" style={{marginTop:14}}>Your GAE Journey — <i>Step by Step</i></h2>
        <p className="gae-lede">From WhatsApp to walking out. The whole journey takes one day at the clinic + 6 months of free support.</p>
      </div>
      <div className="gae-walk-steps">
        {WALK_STEPS.map((s,i) => (
          <div key={i} className="gae-walk-step">
            <div className="num">{s.num}</div>
            <div className="meta">{s.lbl}</div>
            <h5>{s.title}</h5>
            <p>{s.desc}</p>
            <div className="family-note">👨‍👩‍👧 {s.family}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, {
  GAESolution, GAERecovery, GAECompare, GAEWho, GAEPerformance, GAEPainCounter, GAEWalkthrough,
});