// MWA Thyroid — Part 2: Warnings, How MWA, Compare Table, Walkthrough, Recovery, Pricing, USG Gallery

/* ===== WARNINGS ===== */
function MWAWarn() {
  const items = [
    { h:'Pressure on the windpipe', p:'Large nodules can push the trachea sideways — causing breathlessness and choking sensations, especially when you lie down.', icon:'M3 12h18M3 6h18M3 18h18' },
    { h:'Voice hoarseness', p:'Nodules pressing on the recurrent laryngeal nerve can permanently change voice quality — irreversible if surgery damages the nerve.', icon:'M9 18V5l12-2v13' },
    { h:'Cosmetic distress', p:'Visible lumps in the neck affect saree blouse fit, wedding photos, video calls, and self-image — anxiety that compounds daily.', icon:'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3' },
    { h:'Slow but steady growth', p:'A 1.5cm nodule today can be 3cm in 18 months — and a 3cm nodule is harder to treat without surgery.', icon:'M3 17l6-6 4 4 8-8' },
    { h:'Cancer screening anxiety', p:'Repeated FNAC biopsies, ultrasounds, "wait and watch" — the mental load of monitoring a nodule for years is its own toll.', icon:'M11 4a7 7 0 1 1-7 7M21 21l-6-6' },
    { h:'Hidden thyroid imbalance', p:'Some nodules quietly produce extra hormone — causing weight loss, anxiety, palpitations, irregular periods that are misdiagnosed for years.', icon:'M12 8v4M12 16h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z' },
  ];
  return (
    <section className="mwa-warn">
      <div className="mwa-section-inner">
        <div style={{textAlign:'center'}}>
          <span className="mwa-eyebrow"><span className="dot"></span>Why You Can't Just "Wait & Watch"</span>
          <h2 className="mwa-h2" style={{marginTop:14}}>What happens if a thyroid nodule is <i>ignored?</i></h2>
          <p className="mwa-lede" style={{margin:'14px auto 0'}}>Most nodules aren't cancer — but they don't stay quiet either. Here's what we see when patients wait too long.</p>
        </div>
        <div className="mwa-warn-grid">
          {items.map((it,i) => (
            <div key={i} className="mwa-warn-card">
              <div className="mwa-warn-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d={it.icon}/></svg></div>
              <div className="mwa-warn-h">{it.h}</div>
              <p className="mwa-warn-p">{it.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== HOW MWA (3-frame storyboard) ===== */
function MWAHow() {
  const cards = [
    { step:'Step 01 · Problem', h:'A nodule pressing on your life', hi:'समस्या', p:'A growing thyroid nodule causing pressure, voice change, or visible swelling. Traditional answer: cut the entire thyroid out.', tags:['Pressure','Cosmetic','Hormone imbalance'] },
    { step:'Step 02 · MWA Procedure', h:'A needle. A microwave. 30 minutes.', hi:'इलाज', p:'Under live ultrasound guidance, a 1.5mm microwave needle enters through a tiny pin-hole. Golden microwave heat is delivered precisely to the nodule — sealing it from inside.', tags:['No scalpel','No GA','USG-guided'] },
    { step:'Step 03 · Result', h:'Nodule shrinks. Neck stays untouched.', hi:'परिणाम', p:'Over 3–6 months, the treated nodule shrinks 60–80%. Symptoms resolve. Voice stays yours. Thyroid keeps working. No visible mark on your neck.', tags:['60–80% shrinkage','Voice-safe','Zero scar'] },
  ];
  return (
    <section className="mwa-how">
      <div className="mwa-how-inner">
        <div style={{textAlign:'center',maxWidth:720,margin:'0 auto'}}>
          <span className="mwa-eyebrow"><span className="dot"></span>The MWA Procedure</span>
          <h2 className="mwa-h2" style={{marginTop:14}}>How <i>microwave ablation</i> works.</h2>
          <p className="mwa-lede" style={{margin:'14px auto 0'}}>Three frames. No medical jargon. Just what actually happens.</p>
        </div>
        <div className="mwa-how-grid">
          {cards.map((c,i) => (
            <div key={i} className="mwa-how-card">
              <div className="mwa-how-vis">
                <div className="mwa-how-step">{c.step}</div>
                {i===0 && <svg viewBox="0 0 200 160" width="170"><circle cx="100" cy="80" r="40" fill="#E8A4B4" opacity="0.5"/><circle cx="85" cy="70" r="14" fill="#7a1a3a"/><circle cx="85" cy="70" r="22" fill="none" stroke="#7a1a3a" strokeWidth="1.5" opacity="0.6"><animate attributeName="r" values="14;30;14" dur="2s" repeatCount="indefinite"/></circle></svg>}
                {i===1 && <svg viewBox="0 0 200 160" width="170"><circle cx="100" cy="80" r="40" fill="#E8A4B4" opacity="0.5"/><line x1="100" y1="20" x2="100" y2="80" stroke="#D4A574" strokeWidth="3" strokeLinecap="round"/><circle cx="100" cy="80" r="10" fill="#F5C264"><animate attributeName="r" values="8;14;8" dur="1s" repeatCount="indefinite"/></circle><circle cx="100" cy="80" r="20" fill="none" stroke="#F5C264" strokeWidth="1.5" opacity="0.6"><animate attributeName="r" values="12;28;12" dur="1.5s" repeatCount="indefinite"/></circle></svg>}
                {i===2 && <svg viewBox="0 0 200 160" width="170"><circle cx="100" cy="80" r="40" fill="#E8A4B4" opacity="0.7"/><circle cx="100" cy="80" r="4" fill="#D4A574" opacity="0.5"/><g fill="#D4A574"><circle cx="60" cy="50" r="2"><animate attributeName="opacity" values="0;1;0" dur="2s" repeatCount="indefinite"/></circle><circle cx="140" cy="60" r="2"><animate attributeName="opacity" values="0;1;0" dur="2s" begin="0.5s" repeatCount="indefinite"/></circle><circle cx="135" cy="115" r="2"><animate attributeName="opacity" values="0;1;0" dur="2s" begin="1s" repeatCount="indefinite"/></circle></g></svg>}
              </div>
              <div className="mwa-how-body">
                <h3 className="mwa-how-h">{c.h}</h3>
                <p style={{fontFamily:"'Noto Serif Devanagari',serif",color:'#F5C264',fontSize:14,margin:'4px 0 14px'}}>{c.hi}</p>
                <p className="mwa-how-p">{c.p}</p>
                <div className="mwa-how-tags">{c.tags.map((t,j) => <span key={j} className="mwa-how-tag">{t}</span>)}</div>
              </div>
            </div>
          ))}
        </div>
        <div className="mwa-how-specs">
          <div><div className="lbl">Procedure</div><div className="val">Microwave Ablation</div><div className="meta">USFDA + CE approved</div></div>
          <div><div className="lbl">Entry</div><div className="val">1.5mm pin-hole</div><div className="meta">No incision, no stitches</div></div>
          <div><div className="lbl">Anaesthesia</div><div className="val">Local only</div><div className="meta">Fully awake · No GA</div></div>
          <div><div className="lbl">Time</div><div className="val">30 minutes</div><div className="meta">Same-day discharge</div></div>
          <div><div className="lbl">Recovery</div><div className="val">24 hours</div><div className="meta">Back to office Day 2</div></div>
          <div><div className="lbl">Shrinkage</div><div className="val">60–80%</div><div className="meta">Over 3–6 months</div></div>
          <div><div className="lbl">Thyroid function</div><div className="val">Preserved</div><div className="meta">No lifelong meds</div></div>
          <div><div className="lbl">Visible scar</div><div className="val">None</div><div className="meta">Ever</div></div>
        </div>
      </div>
    </section>
  );
}

/* ===== COMPARISON TABLE ===== */
const CMP_ROWS = [
  ['Neck scar', 'Yes — 5–8cm visible', 'Yes — smaller but visible', 'No', 'No — pin-hole only', true],
  ['Voice change risk', 'Higher (RLN nearby)', 'Moderate', 'Low', 'Very low (USG-guided)'],
  ['Thyroid preserved', '✗ Whole gland removed', '✗ Half removed', '✓ Function may decline', '✓ Fully preserved'],
  ['Anaesthesia', 'General', 'General', 'None (oral capsule)', 'Local only'],
  ['Hospital stay', '2–3 nights', '1–2 nights', 'Day care + isolation', '4–6 hours'],
  ['Recovery', '2–4 weeks', '1–2 weeks', 'Days to weeks', '24 hours'],
  ['Lifelong thyroid medication', 'Yes', 'Often', 'Often', 'No'],
  ['Approximate cost', '₹1.2L – ₹2.5L', '₹80k – ₹1.5L', '₹40k – ₹80k', '₹50k – ₹1L'],
];
function MWACompare() {
  return (
    <section className="mwa-cmp">
      <div className="mwa-section-inner">
        <div style={{textAlign:'center'}}>
          <span className="mwa-eyebrow"><span className="dot"></span>Side-by-Side</span>
          <h2 className="mwa-h2" style={{marginTop:14}}>MWA vs. surgery vs. radioactive iodine</h2>
          <p className="mwa-lede" style={{margin:'14px auto 0'}}>The numbers tell one story. The mirror tells another. Both matter — and MWA wins both.</p>
        </div>
      </div>
      <div className="mwa-cmp-table">
        <div className="mwa-cmp-grid">
          <div className="mwa-cmp-row head">
            <div>Feature</div>
            <div>Thyroidectomy</div>
            <div>Hemi-thyroidectomy</div>
            <div>Radioactive iodine</div>
            <div className="col-mwa">Flowcare MWA</div>
          </div>
          {CMP_ROWS.map((r,i) => (
            <div key={i} className={`mwa-cmp-row ${r[5]?'scar-row':''}`}>
              <div className="col-feat">{r[0]}</div>
              <div className={r[1].startsWith('Yes')||r[1].startsWith('✗')?'mwa-cmp-bad':''}>{r[1]}</div>
              <div className={r[2].startsWith('✗')?'mwa-cmp-bad':''}>{r[2]}</div>
              <div>{r[3]}</div>
              <div className="col-mwa mwa-cmp-good">{r[4]}</div>
            </div>
          ))}
        </div>
        <div className="mwa-cmp-takeaway">
          <h4>"Surgery = <i>permanent scar.</i> MWA = nothing on the mirror."</h4>
          <p>The neck is the most visible part of your body. MWA is the only option that treats the nodule without changing what people see when they look at you.</p>
          <div style={{marginTop:18}}><a className="mwa-cta-wa" href={MWA_WA + encodeURIComponent("Doctor recommended thyroidectomy — can MWA replace it?")}><IconWA/> Doctor recommended surgery — can MWA replace it?</a></div>
        </div>
      </div>
    </section>
  );
}

/* ===== WALKTHROUGH ===== */
const WALK = [
  { n:'01', t:'Same day, free', h:'WhatsApp consultation', p:'Send your ultrasound + FNAC reports. Female coordinator replies in 5 minutes with eligibility.' },
  { n:'02', t:'45 minutes', h:'Clinic visit', p:'In-person USG, examination, and frank Q&A with Dr. Bansal. Family can accompany.' },
  { n:'03', t:'30 minutes', h:'MWA procedure day', p:'Local anaesthesia. Pin-hole entry. Live ultrasound guidance. You stay awake; chat with the team.' },
  { n:'04', t:'4–6 hours', h:'Same-day discharge', p:'Walk out. Light cold compress overnight. No bandages visible. No stitches to remove.' },
  { n:'05', t:'3, 6, 12 months', h:'Follow-up scans', p:'WhatsApp + clinic USGs to confirm nodule shrinkage. All included in the package.' },
];
function MWAWalk() {
  return (
    <section className="mwa-walk">
      <div className="mwa-section-inner">
        <div style={{textAlign:'center'}}>
          <span className="mwa-eyebrow"><span className="dot"></span>Your Journey</span>
          <h2 className="mwa-h2" style={{marginTop:14}}>From WhatsApp to <i>scar-free recovery</i></h2>
          <p className="mwa-lede" style={{margin:'14px auto 0'}}>Five steps. Zero surprises. Female coordinator with you throughout.</p>
        </div>
        <div className="mwa-walk-track">
          {WALK.map((s,i) => (
            <div key={i} className="mwa-walk-step">
              <div className="mwa-walk-num">{s.n}</div>
              <div className="mwa-walk-time">{s.t}</div>
              <h4 className="mwa-walk-h">{s.h}</h4>
              <p className="mwa-walk-p">{s.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== RECOVERY ===== */
const REC = [
  { w:'Day 0', h:'Walk home', p:'4 hours observation post-procedure. Light cold compress. No bandages visible. Saree blouse can hide the pin-hole if needed.' },
  { w:'Day 1', h:'Back to mirror', p:'No pain killers needed. Mild soreness — like a small bruise. Voice unaffected. Eat normally.' },
  { w:'Day 2', h:'Back to office', p:'Pin-hole site is barely visible. Foundation makeup covers it completely. Full work routine resumed.' },
  { w:'Day 7', h:'No trace', p:'Pin-hole has healed flush. No mark visible to anyone — including yourself in the mirror.' },
  { w:'Month 3', h:'30% shrinkage', p:'First follow-up scan. Nodule is visibly smaller. Pressure symptoms gone. Voice perfect.' },
  { w:'Month 6', h:'60–80% gone', p:'Maximum shrinkage. Family wondering if there was ever a nodule at all. No medication.' },
];
function MWARec() {
  return (
    <section className="mwa-rec">
      <div className="mwa-section-inner">
        <div style={{textAlign:'center'}}>
          <span className="mwa-eyebrow"><span className="dot"></span>Recovery Timeline</span>
          <h2 className="mwa-h2" style={{marginTop:14}}>Back to your life — <i>by tomorrow</i></h2>
        </div>
        <div className="mwa-rec-track">
          {REC.map((r,i) => (
            <div key={i} className="mwa-rec-card">
              <div className="mwa-rec-when">{r.w}</div>
              <div className="mwa-rec-h">{r.h}</div>
              <p className="mwa-rec-p">{r.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== PRICING ===== */
function MWAPricing() {
  return (
    <section className="mwa-price">
      <div className="mwa-section-inner">
        <div style={{textAlign:'center'}}>
          <span className="mwa-eyebrow"><span className="dot"></span>Transparent Pricing</span>
          <h2 className="mwa-h2" style={{marginTop:14}}>Half the cost of surgery. <i>None of the marks.</i></h2>
        </div>
      </div>
      <div className="mwa-price-hero">
        <div>
          <div className="mwa-price-tag">All-Inclusive Package</div>
          <div className="mwa-price-amount"><span className="sym">₹</span>50,000<small style={{fontSize:24}}> – ₹1,00,000</small></div>
          <div className="mwa-price-amount-sub">Final price depends on nodule size, type, and number of sessions required.</div>
          <div className="mwa-emi">
            <div className="mwa-emi-h">EMI from ₹4,500/month</div>
            <div className="mwa-emi-p">On ₹50k base · 12 months · 0% interest with major banks. Send WhatsApp for personalised EMI plan.</div>
          </div>
          <div className="mwa-price-actions">
            <a className="mwa-cta-wa xl" href={MWA_WA + encodeURIComponent("Please share MWA treatment cost")}><IconWA/> Get my exact quote on WhatsApp</a>
            <a className="mwa-cta-out" href={MWA_WA + encodeURIComponent("Is MWA covered by my insurance?")}>Check insurance cover</a>
          </div>
        </div>
        <div>
          <div className="mwa-price-includes-h">What's included</div>
          <div className="mwa-price-includes">
            {[
              'Pre-procedure thyroid USG + Doppler',
              'FNAC report review',
              'MWA procedure with single-use microwave needle',
              'Local anaesthesia',
              '4–6 hour day-care observation',
              'All medications for 7 days',
              '3 follow-up USGs at month 3, 6, 12',
              '6-month WhatsApp doctor support',
              'Female patient coordinator throughout',
              'Insurance paperwork handled by us',
            ].map((it,i) => (<div key={i} className="mwa-price-inc"><IcCheck/>{it}</div>))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===== USG GALLERY ===== */
const USG = [
  { id:'01', age:34, before:'2.4cm solid', after:'0.8cm (66% ↓)', neck:'No mark visible' },
  { id:'02', age:42, before:'3.1cm mixed', after:'1.0cm (68% ↓)', neck:'No mark visible' },
  { id:'03', age:38, before:'1.8cm cystic', after:'0.5cm (72% ↓)', neck:'No mark visible' },
  { id:'04', age:48, before:'2.7cm solid', after:'0.6cm (78% ↓)', neck:'No mark visible' },
  { id:'05', age:31, before:'2.1cm solid', after:'0.7cm (67% ↓)', neck:'No mark visible' },
  { id:'06', age:52, before:'3.5cm mixed', after:'1.2cm (66% ↓)', neck:'No mark visible' },
];
function MWAUsg() {
  return (
    <section className="mwa-usg">
      <div className="mwa-section-inner">
        <div style={{textAlign:'center'}}>
          <span className="mwa-eyebrow"><span className="dot"></span>Imaging · Anonymized</span>
          <h2 className="mwa-h2" style={{marginTop:14}}>Real ultrasound results — <i>same neck, no mark</i></h2>
          <p className="mwa-lede" style={{margin:'14px auto 0'}}>Six anonymised before/after scans from real patients. Photographs of the neck taken at month 6: zero visible mark in every case.</p>
        </div>
        <div className="mwa-usg-grid">
          {USG.map((u,i) => (
            <div key={i} className="mwa-usg-card">
              <div className="mwa-usg-vis">
                <div className="mwa-usg-half before">
                  <span className="mwa-usg-lbl">Before</span>
                  <svg viewBox="0 0 100 100" width="80" height="80"><circle cx="50" cy="50" r="40" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.2)"/><ellipse cx="50" cy="50" rx="22" ry="14" fill="rgba(232,164,180,0.6)"/></svg>
                </div>
                <div className="mwa-usg-half after">
                  <span className="mwa-usg-lbl">After 6 mo</span>
                  <svg viewBox="0 0 100 100" width="80" height="80"><circle cx="50" cy="50" r="40" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.2)"/><ellipse cx="50" cy="50" rx="6" ry="4" fill="rgba(212,165,116,0.5)"/></svg>
                </div>
              </div>
              <div className="mwa-usg-body">
                <div className="mwa-usg-meta">PATIENT #{u.id} · AGE {u.age}</div>
                <div className="mwa-usg-name">{u.before} → {u.after}</div>
                <div className="mwa-usg-stats">
                  <div className="mwa-usg-stat"><span>Neck photo</span><b>{u.neck}</b></div>
                  <div className="mwa-usg-stat"><span>Sessions</span><b>1</b></div>
                </div>
              </div>
            </div>
          ))}
        </div>
        <p style={{textAlign:'center',fontSize:12,color:'#8a7a8a',marginTop:20,fontStyle:'italic'}}>Results vary by individual. All images and outcomes shared with documented consent.</p>
      </div>
    </section>
  );
}

Object.assign(window, { MWAWarn, MWAHow, MWACompare, MWAWalk, MWARec, MWAPricing, MWAUsg });