// GAE — Part 1: Breadcrumb, Sticky strip, Hero, Persona Selector, Empathy, WA Promo, Symptom Checker, What is GAE, KL Grade Visualizer

const GAE_WA = "https://wa.me/919876543210?text=";
const GAE_PHONE = "+91 98765 43210";

function GAEBreadcrumb() {
  return (
    <div className="gae-breadcrumb">
      <a href="/">Home</a><span className="sep">›</span>
      <a href="/treatments">Treatments</a><span className="sep">›</span>
      <span className="current">Genicular Artery Embolization (GAE)</span>
    </div>
  );
}

function GAEStickyStrip() {
  return (
    <div className="gae-sticky-strip">
      <div className="meta">
        <span><strong>GAE Treatment ₹1.5L+</strong></span>
        <span style={{opacity:0.6}}>•</span>
        <span>Avoid Knee Replacement</span>
        <span style={{opacity:0.6}}>•</span>
        <span>Walk Pain-Free in 24 Hours</span>
      </div>
      <a className="pill" href={GAE_WA + encodeURIComponent("I want to know about GAE for knee pain")}>💬 WhatsApp Now</a>
    </div>
  );
}

function GAEHero() {
  const [phase, setPhase] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setPhase(p => (p + 1) % 3), 3000);
    return () => clearInterval(t);
  }, []);

  return (
    <section className="gae-hero">
      <div className="gae-hero-inner">
        <div>
          <span className="gae-hero-eyebrow">
            <span style={{width:6,height:6,borderRadius:'50%',background:'#F59E0B',boxShadow:'0 0 8px #F59E0B'}}></span>
            Knee Pain · Non-Surgical Breakthrough
          </span>
          <h1 className="gae-h1">
            Avoid Knee Replacement Surgery.<br/>
            Return to the <i>Life You Love</i> —<br/>
            Without Cuts. Without <em>Implants</em>.
          </h1>
          <p className="gae-hero-sub">
            <strong>Genicular Artery Embolization (GAE)</strong> — the modern, non-surgical breakthrough for chronic knee pain. Done in 90 minutes. Back home the same day. Knee preserved. Pain relief that actually lasts. Whether you're a 40-year-old runner or a 70-year-old grandparent, your knee deserves a second chance.
          </p>

          <div className="gae-hero-pills">
            <span>No Knee Surgery</span>
            <span>No Implant</span>
            <span>Same-Day Discharge</span>
            <span>80% Pain Reduction</span>
          </div>

          <div className="gae-hero-stats">
            <div className="item"><span className="num">500+</span><span className="lbl">GAE Procedures</span></div>
            <div className="item"><span className="num">85%</span><span className="lbl">Success Rate</span></div>
            <div className="item"><span className="num">90 min</span><span className="lbl">Procedure</span></div>
            <div className="item"><span className="num">24 hrs</span><span className="lbl">Recovery</span></div>
            <div className="item"><span className="num">2+ yrs</span><span className="lbl">Pain Relief</span></div>
          </div>

          <div className="gae-hero-price">
            <div className="ic">₹</div>
            <div className="txt">
              <div className="lead">Treatment from ₹1,50,000 · EMI from ₹14,000/month</div>
              <div className="meta">Half the cost of knee replacement · Insurance covered · Tax-deductible</div>
            </div>
          </div>

          <div className="gae-hero-ctas">
            <a className="gae-cta-wa xl" href={GAE_WA + encodeURIComponent("I want to talk to Dr. Bansal's team about GAE for my knee pain")}>
              <svg width="20" height="20" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
              Talk to Doctor's Team on WhatsApp
            </a>
            <a className="gae-hero-cta-amber" href={`tel:${GAE_PHONE.replace(/ /g,'')}`}>
              📞 Call Us — Family Consultation Welcome
            </a>
          </div>
        </div>

        {/* Right column: Split-screen morphing animation */}
        <div className="gae-hero-anim">
          <div className="split">
            <div className="pane pane-top">
              <span className="tag"><span className="d"></span>Active Adults · 35–55</span>
              <div className="scene">
                <svg viewBox="0 0 240 200" className="gae-scene-svg">
                  <defs>
                    <linearGradient id="athLight" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0" stopColor="#F59E0B" stopOpacity="0.9"/>
                      <stop offset="1" stopColor="#F59E0B" stopOpacity="0"/>
                    </linearGradient>
                  </defs>
                  {/* Track */}
                  <ellipse cx="120" cy="170" rx="100" ry="14" fill="rgba(245,158,11,0.15)"/>
                  <path d="M40 170 Q120 156 200 170" stroke="rgba(245,158,11,0.45)" strokeWidth="1.5" strokeDasharray="4 6" fill="none"/>
                  {/* Runner silhouette */}
                  <g transform={`translate(${phase===0? 60 : phase===1? 120 : 170}, 60)`} style={{transition:'transform 1.2s ease'}}>
                    <circle cx="0" cy="0" r="9" fill="#F59E0B"/>
                    <path d="M-2 9 L0 30 L8 38" stroke="#F59E0B" strokeWidth="3.5" fill="none" strokeLinecap="round"/>
                    <path d="M0 30 L-12 42 L-8 56" stroke="#F59E0B" strokeWidth="3.5" fill="none" strokeLinecap="round"/>
                    <path d="M0 14 L12 6 L20 12" stroke="#F59E0B" strokeWidth="3" fill="none" strokeLinecap="round"/>
                    <path d="M0 14 L-10 22 L-18 14" stroke="#F59E0B" strokeWidth="3" fill="none" strokeLinecap="round"/>
                    {/* Knee glow */}
                    <circle cx="-3" cy="38" r="6" fill="url(#athLight)" opacity="0.7"/>
                  </g>
                </svg>
              </div>
              <div className="caption">"Back to running. Back to life."</div>
            </div>

            <div className="pane pane-bottom">
              <span className="tag"><span className="d"></span>Seniors · 55–80</span>
              <div className="scene">
                <svg viewBox="0 0 240 200" className="gae-scene-svg">
                  {/* Garden ground */}
                  <ellipse cx="120" cy="170" rx="110" ry="12" fill="rgba(245,158,11,0.15)"/>
                  {/* Two figures: senior + grandchild walking */}
                  <g transform="translate(85, 70)">
                    {/* Senior */}
                    <circle cx="0" cy="0" r="9" fill="#F59E0B"/>
                    <path d="M0 9 L0 50" stroke="#F59E0B" strokeWidth="4" strokeLinecap="round"/>
                    <path d="M0 50 L-7 75" stroke="#F59E0B" strokeWidth="4" strokeLinecap="round"/>
                    <path d="M0 50 L8 75" stroke="#F59E0B" strokeWidth="4" strokeLinecap="round"/>
                    <path d="M0 18 L-12 32" stroke="#F59E0B" strokeWidth="3.5" strokeLinecap="round"/>
                    <path d="M0 18 L14 28" stroke="#F59E0B" strokeWidth="3.5" strokeLinecap="round"/>
                  </g>
                  <g transform="translate(140, 100)">
                    {/* Grandchild */}
                    <circle cx="0" cy="0" r="6" fill="#00D4FF"/>
                    <path d="M0 6 L0 28" stroke="#00D4FF" strokeWidth="3" strokeLinecap="round"/>
                    <path d="M0 28 L-5 45" stroke="#00D4FF" strokeWidth="3" strokeLinecap="round"/>
                    <path d="M0 28 L6 45" stroke="#00D4FF" strokeWidth="3" strokeLinecap="round"/>
                    <path d="M0 12 L-9 22" stroke="#00D4FF" strokeWidth="2.5" strokeLinecap="round"/>
                    <path d="M0 12 L-15 6" stroke="#F59E0B" strokeWidth="2.5" strokeLinecap="round"/>
                  </g>
                  {/* Sun */}
                  <circle cx="200" cy="40" r="14" fill="#F59E0B" opacity={phase===2? 0.9 : 0.5} style={{transition:'opacity 1s'}}/>
                  <g stroke="#F59E0B" strokeWidth="1.5" opacity={phase===2? 0.7 : 0.3} style={{transition:'opacity 1s'}}>
                    <line x1="200" y1="20" x2="200" y2="14"/>
                    <line x1="200" y1="60" x2="200" y2="66"/>
                    <line x1="180" y1="40" x2="174" y2="40"/>
                    <line x1="220" y1="40" x2="226" y2="40"/>
                  </g>
                </svg>
              </div>
              <div className="caption">"Walking with grandchildren again."</div>
            </div>

            <div className="center-band">
              GAE · Same-Day · Knee Preserved
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────── PERSONA SELECTOR ───────── */
function GAEPersona({ persona, setPersona }) {
  const cards = [
    { id:'athlete', emoji:'🏃', title:'For Myself — Active and Want to Stay Active', desc:'Athletes, working professionals, runners, gym-goers. You can\'t afford 3 months off.' },
    { id:'senior', emoji:'👵', title:'For Myself — Knee Pain Is Limiting My Life', desc:'Chronic OA, told to get knee replacement, want to keep your natural knee and dignity.' },
    { id:'family', emoji:'👨‍👩‍👧', title:'For My Parent or Family Member', desc:'Researching for an elderly parent. We make consultations family-friendly.' },
  ];
  return (
    <section className="gae-persona">
      <div className="gae-persona-head">
        <span className="gae-eyebrow amber"><span className="dot"></span>Tailored Guidance</span>
        <h2 className="gae-h2" style={{marginTop:14}}>Tell Us — Who Are You <i>Researching For?</i></h2>
        <p className="gae-lede" style={{margin:'14px auto 0'}}>We'll subtly highlight what matters most for your situation. You can always see everything by scrolling.</p>
      </div>
      <div className="gae-persona-grid">
        {cards.map(c => (
          <div key={c.id} className={`gae-persona-card ${persona===c.id?'active':''}`} onClick={() => setPersona(c.id)}>
            <span className="check">✓</span>
            <div className="emoji">{c.emoji}</div>
            <h4>{c.title}</h4>
            <p className="desc">{c.desc}</p>
          </div>
        ))}
      </div>
      <div className="gae-persona-foot">Your selection is private. Scroll the full page anytime.</div>
    </section>
  );
}

/* ───────── EMPATHY BRIDGE ───────── */
function GAEEmpathy() {
  return (
    <section className="gae-empathy">
      <div className="gae-section-inner">
        <span className="gae-eyebrow amber"><span className="dot"></span>We Understand</span>
        <h2 className="gae-h2" style={{marginTop:14}}>We Know You've <i>Tried Everything</i></h2>
        <div className="gae-empathy-grid">
          <div className="gae-empathy-card">
            <div className="ic-wrap">🩹</div>
            <h4>Pain oils, balms, ointments</h4>
            <p>Soothing for an evening — but the morning stiffness comes right back. None of them touch the inflamed blood vessels causing your pain.</p>
          </div>
          <div className="gae-empathy-card">
            <div className="ic-wrap">💊</div>
            <h4>Painkillers</h4>
            <p>They work for a few hours. Long-term, they're hard on your kidneys, stomach, and liver — and the dose has to keep increasing.</p>
          </div>
          <div className="gae-empathy-card">
            <div className="ic-wrap">💉</div>
            <h4>Steroid injections</h4>
            <p>Real relief — for 8 to 12 weeks. Then the pain returns, often worse. Repeated steroids can damage the joint over time.</p>
          </div>
        </div>
        <div className="gae-empathy-foot">
          <p>You've been told the only "permanent" solution is <strong>knee replacement surgery</strong>. There's another option doctors don't always mention — and it's working for thousands of Indians who wanted to keep their own knee. Whether you're 40 or 75, GAE could be the answer.</p>
          <a className="gae-cta-wa" href={GAE_WA + encodeURIComponent("I've tried everything for my knee pain. Tell me if GAE can help.")}>💬 Tell us your story privately</a>
        </div>
      </div>
    </section>
  );
}

/* ───────── WA PROMO STRIP ───────── */
function GAEWAPromo() {
  const qs = [
    { q:'Can I avoid knee replacement?', msg:'Doctor said I need knee replacement. Can GAE help me avoid it?' },
    { q:'Will GAE work for my knee pain?', msg:'I have chronic knee pain. Will GAE work for me?' },
    { q:'What will it cost me?', msg:'Please share GAE cost details and EMI options.' },
  ];
  return (
    <section className="gae-wa-promo">
      <div className="gae-wa-inner">
        <h2>Get Real Answers About Your Knee Pain in 5 Minutes</h2>
        <p className="sub">Direct WhatsApp line. Real human reply within 5 minutes. 9 AM – 8 PM. Family members and patients welcome. Hindi support available.</p>
        <div className="gae-wa-questions">
          {qs.map((it,i) => (
            <a key={i} className="gae-wa-q" href={GAE_WA + encodeURIComponent(it.msg)}>
              <span className="q-ic">💬</span>
              {it.q}
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ───────── SYMPTOM CHECKER ───────── */
const GAE_QUIZ = [
  "Knee pain lasting more than 6 months",
  "Pain that gets worse with walking, stairs, standing, or sports",
  "Stiffness in the morning that lasts 30+ minutes",
  "Difficulty squatting, kneeling, or sitting cross-legged",
  "Pain that disturbs your sleep or limits exercise",
  "Tried physiotherapy / painkillers / steroid injections without lasting relief",
  "Doctor mentioned knee replacement surgery",
  "Want to avoid major surgery if possible",
];
function GAESymptomCheck() {
  const [picks, setPicks] = React.useState([]);
  const [pain, setPain] = React.useState(7);
  const [age, setAge] = React.useState('');
  const [show, setShow] = React.useState(false);
  const toggle = (i) => setPicks(p => p.includes(i) ? p.filter(x=>x!==i) : [...p, i]);

  const score = picks.length;
  const candidacy = score >= 5 ? 'Strong' : score >= 3 ? 'Moderate' : 'Initial';
  const reduction = score >= 5 ? '70–85%' : score >= 3 ? '60–75%' : '50–65%';
  const ageGroup = parseInt(age || 0);
  const outcome = ageGroup && ageGroup < 55
    ? `You could likely return to running, gym, or sports within 4–8 weeks of GAE.`
    : ageGroup >= 55
    ? `You could likely climb stairs, walk for 30 minutes, and sleep through the night within 4–6 weeks.`
    : `Once we know your age, we can predict your specific recovery timeline.`;

  const emoji = pain <= 3 ? '🙂' : pain <= 6 ? '😐' : pain <= 8 ? '😣' : '😖';

  return (
    <section className="gae-quiz">
      <div className="gae-section-inner">
        <div className="gae-quiz-card">
          <span className="gae-eyebrow amber"><span className="dot"></span>60-Second Eligibility Check</span>
          <h2 style={{marginTop:14}}>Is GAE Right for <i style={{color:'#D97706',fontStyle:'italic'}}>Your Knee Pain?</i></h2>
          <p className="sub">Tick what applies. Get a personalised assessment based on your age and pain level. Confidential. No spam.</p>

          <div className="gae-quiz-progress"><div className="bar" style={{width: `${(picks.length/GAE_QUIZ.length)*100}%`}}/></div>

          <div className="gae-quiz-options">
            {GAE_QUIZ.map((q,i) => (
              <div key={i} className={`gae-quiz-opt ${picks.includes(i)?'active':''}`} onClick={() => toggle(i)}>
                <span className="box">{picks.includes(i) && '✓'}</span>
                {q}
              </div>
            ))}
          </div>

          <div className="gae-quiz-slider">
            <label>Rate your knee pain — 1 (mild) to 10 (unbearable)</label>
            <div className="row">
              <span className="emoji">{emoji}</span>
              <input type="range" min="1" max="10" value={pain} onChange={e=>setPain(parseInt(e.target.value))}/>
              <span className="num">{pain}<small style={{fontSize:18,color:'#7a8094'}}>/10</small></span>
            </div>
          </div>

          <div style={{marginTop:24, display:'flex', gap:14, flexWrap:'wrap', alignItems:'center'}}>
            <label style={{fontSize:14,fontWeight:600,color:'#4a5570'}}>Your age:</label>
            <select value={age} onChange={e=>setAge(e.target.value)} style={{padding:'12px 18px',borderRadius:10,border:'1.5px solid #d6deea',fontSize:14,fontWeight:500,minWidth:160}}>
              <option value="">Select age</option>
              <option value="35">35–44</option>
              <option value="45">45–54</option>
              <option value="55">55–64</option>
              <option value="65">65–74</option>
              <option value="75">75+</option>
            </select>
          </div>

          <div className="gae-quiz-actions">
            <button className="gae-cta-wa" style={{border:'none',cursor:'pointer'}} onClick={() => setShow(true)}>See My Result</button>
            <a className="gae-cta-out" href={GAE_WA + encodeURIComponent(`Quiz result: ${picks.length}/${GAE_QUIZ.length} symptoms, pain ${pain}/10, age ${age||'?'}. Please advise about GAE.`)}>💬 Send Result on WhatsApp</a>
          </div>

          {show && (
            <div className="gae-quiz-result">
              <div className="score">CANDIDACY · {candidacy.toUpperCase()}</div>
              <h3>You're a likely GAE candidate.</h3>
              <p>Based on your answers ({picks.length}/{GAE_QUIZ.length} symptoms, pain {pain}/10), Dr. Bansal's team estimates a <strong>{reduction} pain reduction</strong> within 3 months of GAE. {outcome}</p>
              <a className="gae-cta-wa" style={{marginTop:14}} href={GAE_WA + encodeURIComponent(`Quiz result: ${candidacy} candidacy, ${reduction} expected pain reduction. Please share next steps.`)}>💬 Send My Result to Dr. Bansal</a>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

/* ───────── WHAT IS GAE ─────────── */
function GAEWhatIs() {
  const [stage, setStage] = React.useState(0);
  const [lang, setLang] = React.useState('en');
  React.useEffect(() => {
    const t = setInterval(() => setStage(s => (s+1)%4), 3500);
    return () => clearInterval(t);
  }, []);

  const stages = [
    { lbl:'Inflamed', title:'Painful Knee', desc:'Abnormal blood vessels (neovascularization) feed the inflamed joint lining. Nerves fire pain signals constantly.' },
    { lbl:'Catheter In', title:'Pin-hole Access', desc:'A 1.5mm catheter is guided from a tiny groin incision up to the genicular arteries near your knee.' },
    { lbl:'Embolize', title:'Particles Released', desc:'Tiny embolic particles (100–300 microns) gently block the abnormal vessels — without touching the cartilage or bone.' },
    { lbl:'Calm', title:'Pain Gone', desc:'Inflammation subsides. Nerve signals quiet. Knee preserved. 70–85% pain reduction within 3 months.' },
  ];

  return (
    <section className="gae-what">
      <div className="gae-section-inner">
        <div style={{display:'flex',alignItems:'flex-end',justifyContent:'space-between',gap:24,flexWrap:'wrap'}}>
          <div>
            <span className="gae-eyebrow amber"><span className="dot"></span>The Science · Plain English</span>
            <h2 className="gae-h2" style={{marginTop:14}}>What Is <i>Genicular Artery Embolization?</i></h2>
            <p className="gae-h2-hi" style={{display: lang==='hi'?'block':'none'}}>घुटने के दर्द का बिना ऑपरेशन इलाज</p>
          </div>
          <div style={{display:'flex',gap:6,background:'#f4f7fb',padding:4,borderRadius:100}}>
            <button onClick={()=>setLang('en')} style={{padding:'8px 16px',border:'none',borderRadius:100,background:lang==='en'?'#fff':'transparent',fontWeight:600,fontSize:13,cursor:'pointer'}}>EN</button>
            <button onClick={()=>setLang('hi')} style={{padding:'8px 16px',border:'none',borderRadius:100,background:lang==='hi'?'#fff':'transparent',fontWeight:600,fontSize:13,cursor:'pointer',fontFamily:"'Noto Serif Devanagari',serif"}}>हिंदी</button>
          </div>
        </div>

        <div className="gae-what-grid">
          <div className="gae-what-prose">
            {lang==='en' ? (
              <>
                <p>Knee pain from osteoarthritis isn't just about worn-out cartilage. The pain itself comes from <strong>inflamed blood vessels</strong> feeding the irritated joint lining.</p>
                <p>GAE is a breakthrough <strong>non-surgical</strong> treatment that targets those abnormal blood vessels directly — using tiny micro-particles to gently block them, calming the inflammation and stopping the pain at its source.</p>
                <div className="pull"><p>"Instead of replacing the entire knee, we turn off the pain switch inside it. Your knee — your joint, your cartilage, your range of motion — stays intact."</p></div>
                <p style={{marginTop:24}}>Originally pioneered in Japan by Dr. Yuji Okuno (2014), GAE is now performed worldwide and backed by 10+ years of peer-reviewed clinical research. USFDA + CE approved technique.</p>
                <a className="gae-cta-wa" style={{marginTop:14}} href={GAE_WA + encodeURIComponent('I have a question about GAE.')}>💬 Have a question? Ask on WhatsApp</a>
              </>
            ) : (
              <>
                <p style={{fontFamily:"'Noto Serif Devanagari',serif",fontSize:17,lineHeight:1.8}}>घुटने का दर्द सिर्फ कार्टिलेज के घिसने से नहीं होता। असली दर्द उन <strong>सूजी हुई नसों</strong> से आता है जो जोड़ की झिल्ली को खून पहुँचाती हैं।</p>
                <p style={{fontFamily:"'Noto Serif Devanagari',serif",fontSize:17,lineHeight:1.8}}>GAE एक आधुनिक <strong>बिना ऑपरेशन वाला</strong> इलाज है जो उन्हीं नसों को छोटे कणों से बंद कर देता है — और दर्द जड़ से रुक जाता है।</p>
                <div className="pull"><p style={{fontFamily:"'Noto Serif Devanagari',serif"}}>"पूरा घुटना बदलने के बजाय, हम घुटने के अंदर का 'दर्द स्विच' बंद करते हैं। आपका घुटना अपना ही रहता है।"</p></div>
                <a className="gae-cta-wa" style={{marginTop:14}} href={GAE_WA + encodeURIComponent('GAE के बारे में जानकारी चाहिए')}>💬 व्हाट्सएप पर पूछें</a>
              </>
            )}
          </div>

          {/* Animated 3D-ish knee diagram */}
          <div className="gae-knee-anim">
            <div className="stage-tabs">
              {stages.map((s,i) => (
                <button key={i} className={stage===i?'active':''} onClick={()=>setStage(i)}>{s.lbl}</button>
              ))}
            </div>
            <svg viewBox="0 0 320 320" className="stage-svg">
              <defs>
                <radialGradient id="kneeBoneGrad" cx="50%" cy="40%">
                  <stop offset="0" stopColor="#fff" stopOpacity="0.15"/>
                  <stop offset="1" stopColor="#fff" stopOpacity="0.02"/>
                </radialGradient>
              </defs>

              {/* Femur */}
              <path d="M120 40 Q110 80 115 130 Q160 140 200 130 Q205 80 195 40 Z" fill="url(#kneeBoneGrad)" stroke="rgba(255,255,255,0.25)" strokeWidth="1.5"/>
              {/* Knee joint */}
              <ellipse cx="160" cy="155" rx="50" ry="14" fill="rgba(255,255,255,0.1)" stroke="rgba(255,255,255,0.3)" strokeWidth="1.5"/>
              {/* Tibia */}
              <path d="M125 175 Q130 220 130 280 Q160 285 190 280 Q190 220 195 175 Q175 188 160 188 Q145 188 125 175 Z" fill="url(#kneeBoneGrad)" stroke="rgba(255,255,255,0.25)" strokeWidth="1.5"/>
              {/* Patella */}
              <ellipse cx="160" cy="158" rx="18" ry="22" fill="rgba(255,255,255,0.12)" stroke="rgba(255,255,255,0.3)" strokeWidth="1"/>

              {/* Genicular arteries — visible from stage 1 */}
              {stage >= 1 && (
                <g stroke="#F59E0B" strokeWidth="2" fill="none" opacity="0.9">
                  <path d="M105 145 Q130 160 160 158" strokeDasharray="3 2"/>
                  <path d="M215 145 Q190 160 160 158" strokeDasharray="3 2"/>
                  <path d="M115 175 Q140 168 160 165" strokeDasharray="3 2"/>
                  <path d="M205 175 Q180 168 160 165" strokeDasharray="3 2"/>
                </g>
              )}

              {/* Inflammation pain nodes (stage 0–1) */}
              {[
                {x:120,y:155,d:0},
                {x:200,y:155,d:0.3},
                {x:160,y:175,d:0.6},
                {x:140,y:170,d:0.9},
                {x:180,y:170,d:1.2},
                {x:160,y:140,d:1.5},
              ].map((p,i) => (
                <circle key={i} cx={p.x} cy={p.y} r={stage>=3?2:5}
                  fill={stage>=3 ? 'rgba(20,184,166,0.4)' : '#ef4444'}
                  className={stage<3 ? 'pain-node' : 'pain-node calm'}
                  style={{animationDelay:`${p.d}s`,transition:'all 0.5s'}}/>
              ))}

              {/* Catheter (stage 1) */}
              {stage === 1 && (
                <g>
                  <path d="M30 270 Q60 230 100 180 Q120 160 140 158" stroke="#00D4FF" strokeWidth="2" fill="none" strokeLinecap="round"/>
                  <circle cx="140" cy="158" r="5" fill="#00D4FF"/>
                  <circle cx="140" cy="158" r="10" fill="none" stroke="#00D4FF" strokeWidth="1" opacity="0.5">
                    <animate attributeName="r" from="5" to="14" dur="1.2s" repeatCount="indefinite"/>
                    <animate attributeName="opacity" from="0.6" to="0" dur="1.2s" repeatCount="indefinite"/>
                  </circle>
                </g>
              )}

              {/* Particles flowing (stage 2) */}
              {stage === 2 && (
                <g>
                  {[0,0.2,0.4,0.6,0.8].map((d,i) => (
                    <circle key={i} r="3" fill="#F59E0B">
                      <animateMotion dur="2s" repeatCount="indefinite" begin={`${d}s`}>
                        <mpath href="#particlePath"/>
                      </animateMotion>
                    </circle>
                  ))}
                  <path id="particlePath" d="M30 270 Q60 230 100 180 Q120 160 145 156 Q170 154 195 156" fill="none" stroke="none"/>
                </g>
              )}

              {/* Healing glow (stage 3) */}
              {stage === 3 && (
                <g>
                  <circle cx="160" cy="160" r="60" fill="rgba(20,184,166,0.15)">
                    <animate attributeName="r" from="40" to="80" dur="2s" repeatCount="indefinite"/>
                    <animate attributeName="opacity" from="0.5" to="0" dur="2s" repeatCount="indefinite"/>
                  </circle>
                  <text x="160" y="60" textAnchor="middle" fill="#14B8A6" fontFamily="JetBrains Mono" fontSize="11" fontWeight="700" letterSpacing="2">PAIN · 8/10 → 2/10</text>
                </g>
              )}
            </svg>
            <div className="stage-info">
              <h5>{stages[stage].title}</h5>
              <p>{stages[stage].desc}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────── KL GRADE VISUALIZER ───────── */
const KL_GRADES = [
  { num:1, lbl:'Doubtful', title:'Grade 1', desc:'Minor wear, occasional stiffness. Early changes only visible on X-ray.', candidacy:'Lifestyle changes; GAE rarely needed yet.', ideal:false, key:'g1' },
  { num:2, lbl:'Mild', title:'Grade 2', desc:'Visible cartilage wear, pain with activity. Stairs become difficult.', candidacy:'Excellent GAE candidate. Earlier = better outcomes.', ideal:true, key:'g2' },
  { num:3, lbl:'Moderate', title:'Grade 3', desc:'Significant cartilage loss, daily pain, morning stiffness, swelling.', candidacy:'Ideal GAE candidate. Avoid scheduled knee replacement.', ideal:true, key:'g3' },
  { num:4, lbl:'Severe', title:'Grade 4', desc:'Bone-on-bone, constant pain, severe mobility loss, deformity.', candidacy:'GAE can give 1–2 years of relief before considering KR.', ideal:false, key:'g4' },
];
function GAEGradeVisualizer() {
  const [active, setActive] = React.useState(2);

  return (
    <section className="gae-grade">
      <div className="gae-grade-head">
        <span className="gae-eyebrow amber"><span className="dot"></span>Kellgren-Lawrence Grading</span>
        <h2 className="gae-h2" style={{marginTop:14}}>What Stage Is <i>Your Knee Osteoarthritis?</i></h2>
        <p className="gae-lede" style={{margin:'14px auto 0'}}>Click your stage. We'll show you GAE candidacy and what to expect — based on Dr. Bansal's 500+ procedure experience.</p>
      </div>
      <div className="gae-grade-grid">
        {KL_GRADES.map((g,i) => (
          <div key={i} className={`gae-grade-card ${g.key} ${active===i?'active':''}`} onClick={()=>setActive(i)}>
            <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:12}}>
              <div className="num">{g.num}</div>
              {g.ideal && <span className="ideal">★ Ideal</span>}
            </div>
            <div>
              <div className="lbl">{g.lbl}</div>
              <h5>{g.title}</h5>
            </div>
            <div className="gae-grade-knee">
              <svg viewBox="0 0 120 100" style={{width:'100%',height:'100%'}}>
                <ellipse cx="60" cy="50" rx="32" ry="14" fill="#fff" stroke="#0E2F6B" strokeWidth="1.5"/>
                {/* Cartilage gap shrinking by grade */}
                <rect x="35" y={48 - (g.num-1)*1} width="50" height={6 - (g.num-1)*1.4} fill={g.num===4 ? '#ef4444' : '#1FC3C7'} opacity={0.7 - g.num*0.1}/>
                <ellipse cx="60" cy="30" rx="20" ry="20" fill="#f0f4fa" stroke="#0E2F6B" strokeWidth="1.5"/>
                <ellipse cx="60" cy="70" rx="24" ry="18" fill="#f0f4fa" stroke="#0E2F6B" strokeWidth="1.5"/>
                {/* Pain dots */}
                {Array.from({length:g.num}).map((_,j) => (
                  <circle key={j} cx={42 + j*9} cy={50} r="2" fill="#ef4444"/>
                ))}
              </svg>
            </div>
            <p>{g.desc}</p>
          </div>
        ))}
      </div>
      <div className="gae-grade-detail">
        <div className="gae-grade-detail-card">
          <div>
            <h4>{KL_GRADES[active].title} — {KL_GRADES[active].lbl}</h4>
            <p><strong style={{color:'#D97706'}}>GAE assessment:</strong> {KL_GRADES[active].candidacy}</p>
          </div>
          <a className="gae-cta-wa" href={GAE_WA + encodeURIComponent(`I have ${KL_GRADES[active].title} (${KL_GRADES[active].lbl}) knee OA. Please advise.`)}>💬 Send my X-ray for assessment</a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  GAEBreadcrumb, GAEStickyStrip, GAEHero, GAEPersona, GAEEmpathy, GAEWAPromo,
  GAESymptomCheck, GAEWhatIs, GAEGradeVisualizer, GAE_WA, GAE_PHONE,
});