// Uterine Fibroid Treatment — Part 3: Walkthrough, Recovery, Pricing, MRI gallery, Doctor, Why us, Family, Testimonials, FAQ, Hindi, Final CTA

// ─── Procedure Day Walkthrough ───
function UFWalkthrough() {
  const steps = [
    { num: '01', h: 'Pre-op assessment', p: 'Detailed MRI, blood tests, female-coordinator briefing the day before. Family welcome to attend.', feel: '"They explained everything in detail. I felt ready, not scared."' },
    { num: '02', h: 'Day of procedure', p: 'Morning admission. Light breakfast allowed. Female nurse stays with you through prep.', feel: '"It felt like getting an IV done — that\'s it."' },
    { num: '03', h: 'The procedure (90 min)', p: 'Local anaesthesia at wrist. You stay awake, can hear the team. No pain, just gentle pressure.', feel: '"I was chatting with the doctor the whole time. No idea it was happening."' },
    { num: '04', h: 'Recovery room (4–6 hrs)', p: 'Mild cramping managed with medication. Female attendant checks on you every 30 minutes.', feel: '"The cramping was less than my normal periods, honestly."' },
    { num: '05', h: 'Discharge in 24 hours', p: 'Walk out the same evening or next morning. Rest 2 days at home, back to light work in 5–7 days.', feel: '"I went to my niece\'s wedding 6 days later."' },
  ];
  return (
    <section className="uf-walk">
      <div className="uf-section-inner">
        <div style={{textAlign:'center'}}>
          <div className="uf-eyebrow"><span className="dot"></span><span>What to expect</span></div>
          <h2 className="uf-h2" style={{marginTop:16}}>Your <i>UFE day</i>, hour by hour</h2>
          <p className="uf-lede" style={{marginInline:'auto'}}>No general anaesthesia. No ICU. No "what just happened to me?" feeling. Here's exactly what your day looks like.</p>
        </div>
        <div className="uf-walk-track">
          {steps.map((s, i) => (
            <div key={i} className="uf-walk-step">
              <div className="uf-walk-num">{s.num}</div>
              <div className="uf-walk-h">{s.h}</div>
              <div className="uf-walk-p">{s.p}</div>
              <div className="uf-walk-feel">{s.feel}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Recovery Track ───
function UFRecovery() {
  const items = [
    { when: 'Day 1', h: 'Walk same evening', p: 'Mild cramping. Eat light. Take prescribed pain meds proactively.' },
    { when: 'Day 2–3', h: 'At home, resting', p: 'Light cramping fades. You can read, watch TV, take short walks indoors.' },
    { when: 'Day 5–7', h: 'Back to office', p: 'Most patients return to desk work. No lifting heavy things yet.' },
    { when: 'Week 2', h: 'Normal life', p: 'Driving, shopping, cooking. You feel like yourself again.' },
    { when: 'Month 1', h: 'Bleeding lighter already', p: 'First period is noticeably lighter. Anaemia starts reversing.' },
    { when: 'Month 3', h: 'Major shrinkage', p: 'Fibroids 30–50% smaller on follow-up scan. Pain is gone.' },
    { when: 'Month 6', h: 'Full result', p: 'Fibroids 40–70% shrunk. Periods normal. Trying to conceive? Now you can.' },
    { when: 'Year 1+', h: 'Living again', p: 'Hemoglobin restored. Energy back. Relationships repaired. Life on your terms.' },
  ];
  return (
    <section className="uf-rec">
      <div className="uf-section-inner">
        <div style={{textAlign:'center'}}>
          <div className="uf-eyebrow"><span className="dot"></span><span>Recovery roadmap</span></div>
          <h2 className="uf-h2" style={{marginTop:16}}>From procedure to <i>completely normal</i></h2>
          <p className="uf-lede" style={{marginInline:'auto'}}>Your timeline back to a life without fibroids. No long bedrest. No months off work.</p>
        </div>
        <div className="uf-rec-track">
          {items.map((it, i) => (
            <div key={i} className="uf-rec-card">
              <span className="uf-rec-when">{it.when}</span>
              <div className="uf-rec-h">{it.h}</div>
              <div className="uf-rec-p">{it.p}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Pricing ───
function UFPricing() {
  const tiers = [
    {
      tag: 'Consultation',
      h: 'Confidential first consult',
      sub: 'In-person at clinic or video call. Female coordinator present.',
      amount: '₹1,500',
      list: ['45-minute consultation with Dr. Bansal', 'Review your existing scans', 'Honest opinion: do you need UFE?', 'No pressure, no commitment'],
      cta: 'Book consultation',
      msg: 'Hi, I want to book a consultation about UFE.',
    },
    {
      tag: 'UFE — Standard',
      h: 'Single-fibroid embolization',
      sub: 'For 1 fibroid up to 8 cm. All-inclusive package.',
      amount: '₹2.4–2.8 L',
      list: ['Pre-op MRI + blood tests', '90-min UFE procedure', '24-hour hospital stay (private room)', 'Female attendant throughout', 'Post-op medications for 1 week', '3 follow-up scans (1, 3, 6 months)'],
      cta: 'Get exact quote',
      featured: true,
      msg: 'Hi, please share UFE standard package details and exact cost for my case.',
    },
    {
      tag: 'UFE — Complex',
      h: 'Multiple / large fibroids',
      sub: 'For 2+ fibroids or fibroids over 8 cm.',
      amount: '₹3.0–3.6 L',
      list: ['Everything in Standard package', 'Extended procedure time', 'Specialised embolic agents', '36-hour hospital stay if needed', 'Extended 12-month follow-up'],
      cta: 'Get exact quote',
      msg: 'Hi, my fibroids are multiple/large. Please share complex UFE package details.',
    },
  ];
  return (
    <section className="uf-price" id="pricing">
      <div className="uf-section-inner">
        <div style={{textAlign:'center'}}>
          <div className="uf-eyebrow"><span className="dot"></span><span>Honest pricing · No hidden costs</span></div>
          <h2 className="uf-h2" style={{marginTop:16}}>What does <i>UFE cost</i> in Jaipur?</h2>
          <p className="uf-lede" style={{marginInline:'auto'}}>One transparent package. Everything included. No surprise bills. No commission to anyone.</p>
        </div>

        <div className="uf-price-grid">
          {tiers.map((t, i) => (
            <div key={i} className={`uf-price-card ${t.featured ? 'featured':''}`}>
              <div className="uf-price-tag">{t.tag}</div>
              <div className="uf-price-h">{t.h}</div>
              <div className="uf-price-sub">{t.sub}</div>
              <div className="uf-price-amount">{t.amount}<span></span></div>
              <ul className="uf-price-list">
                {t.list.map((l, j) => (
                  <li key={j}>
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 13l4 4L19 7"/></svg>
                    {l}
                  </li>
                ))}
              </ul>
              <a className="uf-price-cta" href={waLink(t.msg)}>
                <svg viewBox="0 0 24 24" fill="currentColor"><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.198-.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.297-.347.446-.52.149-.174.198-.298.297-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.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>
                {t.cta}
              </a>
            </div>
          ))}
        </div>

        <div className="uf-price-context">
          <div>
            <div className="uf-price-context-h">Why UFE is the best value</div>
            <div className="uf-price-context-p">Hysterectomy may seem cheaper upfront — but factor in 6 weeks off work, lost wages, hormone replacement therapy for life, and the cost of not preserving your uterus. UFE pays for itself in less than 6 months.</div>
          </div>
          <div className="uf-price-context-vs">
            <div className="uf-price-vs-card"><div><div className="uf-price-vs-l">Hysterectomy total cost (6 weeks)</div><div style={{fontSize:11,color:'rgba(255,255,255,0.55)',marginTop:3}}>Surgery + recovery + lost wages + HRT</div></div><div className="uf-price-vs-r them">~₹4.5–6 L</div></div>
            <div className="uf-price-vs-card"><div><div className="uf-price-vs-l">UFE total cost (1 week)</div><div style={{fontSize:11,color:'rgba(255,255,255,0.55)',marginTop:3}}>Procedure + 24h stay + minimal off-work</div></div><div className="uf-price-vs-r us">~₹2.4–2.8 L</div></div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── MRI Gallery ───
function UFMri() {
  const cases = [
    { name: 'Patient A · 38 yrs', meta: 'Single 7 cm fibroid', shrink: '68%', symptoms: 'Resolved 8 wks', preY: 90, postY: 30 },
    { name: 'Patient B · 42 yrs', meta: '3 fibroids · 4–9 cm', shrink: '54%', symptoms: 'Resolved 12 wks', preY: 85, postY: 38 },
    { name: 'Patient C · 35 yrs', meta: 'Submucosal · 5 cm', shrink: '72%', symptoms: 'Conceived 14 mo', preY: 78, postY: 22 },
    { name: 'Patient D · 45 yrs', meta: 'Multiple intramural', shrink: '58%', symptoms: 'Period normalised', preY: 88, postY: 36 },
    { name: 'Patient E · 33 yrs', meta: '11 cm fibroid', shrink: '62%', symptoms: 'Avoided hysterectomy', preY: 110, postY: 42 },
    { name: 'Patient F · 40 yrs', meta: '4 cm + 6 cm fibroids', shrink: '60%', symptoms: 'Anaemia reversed', preY: 75, postY: 28 },
  ];
  const halfBg = "radial-gradient(circle at 50% 50%, #2a3a5a, #0E2F6B 60%, #07173d)";
  return (
    <section className="uf-mri">
      <div className="uf-section-inner">
        <div style={{textAlign:'center'}}>
          <div className="uf-eyebrow"><span className="dot"></span><span>Real cases · Anonymised MRIs</span></div>
          <h2 className="uf-h2" style={{marginTop:16}}>See the <i>before & after</i></h2>
          <p className="uf-lede" style={{marginInline:'auto'}}>Real fibroid shrinkage from real patients treated by Dr. Bansal. Identifying details removed; results published with patient consent.</p>
        </div>
        <div className="uf-mri-grid">
          {cases.map((c, i) => (
            <div key={i} className="uf-mri-card">
              <div className="uf-mri-vis">
                <div className="uf-mri-half before" style={{background:halfBg}}>
                  <div className="uf-mri-label">Before</div>
                  <svg viewBox="0 0 100 100" style={{width:'70%',height:'70%'}}>
                    <ellipse cx="50" cy="55" rx="32" ry="38" fill="rgba(244,166,182,0.25)" stroke="rgba(244,166,182,0.6)" strokeWidth="1"/>
                    <circle cx="50" cy="55" r={c.preY/4} fill="#7a1a3a" opacity="0.85"/>
                  </svg>
                </div>
                <div className="uf-mri-half after" style={{background:halfBg}}>
                  <div className="uf-mri-label">After 6 months</div>
                  <svg viewBox="0 0 100 100" style={{width:'70%',height:'70%'}}>
                    <ellipse cx="50" cy="55" rx="32" ry="38" fill="rgba(244,166,182,0.25)" stroke="rgba(244,166,182,0.6)" strokeWidth="1"/>
                    <circle cx="50" cy="55" r={c.postY/4} fill="#d97a92" opacity="0.7"/>
                  </svg>
                </div>
              </div>
              <div className="uf-mri-body">
                <div className="uf-mri-meta">{c.meta}</div>
                <div className="uf-mri-name">{c.name}</div>
                <div className="uf-mri-stats">
                  <div className="uf-mri-stat"><span>Shrinkage</span><b>{c.shrink}</b></div>
                  <div className="uf-mri-stat"><span>Outcome</span><b>{c.symptoms}</b></div>
                </div>
              </div>
            </div>
          ))}
        </div>
        <p className="uf-mri-disclaimer">Results vary patient to patient. Images shown are anonymised representations. Specific outcomes depend on fibroid type, size, location, and individual response.</p>
      </div>
    </section>
  );
}

// ─── Doctor ───
function UFDoctor() {
  return (
    <section className="uf-doctor" id="doctor">
      <div className="uf-section-inner">
        <div style={{textAlign:'center'}}>
          <div className="uf-eyebrow"><span className="dot"></span><span>The doctor who's saved 10,000+ uteruses</span></div>
          <h2 className="uf-h2" style={{marginTop:16}}>Meet <i>Dr. Pradeep Bansal</i></h2>
        </div>
        <div className="uf-doctor-grid">
          <div className="uf-doctor-photo">
            <img src={UF_DOCTOR_IMG} alt="Dr. Pradeep Bansal"/>
            <div className="uf-doctor-photo-tag"><span className="ind"></span>India's leading IR for UFE</div>
          </div>
          <div>
            <div className="uf-doctor-name">Dr. Pradeep Bansal</div>
            <div className="uf-doctor-cred">MBBS · MD (Radiology) · Fellowship in Interventional Radiology, AIIMS New Delhi · Trained at Mayo Clinic, USA</div>
            <p className="uf-doctor-bio">Dr. Bansal is one of India's most experienced interventional radiologists, specialising in non-surgical, image-guided fibroid treatment. With 24+ years of experience and 10,000+ procedures, he has trained an entire generation of IR fellows across North India. He has personally performed UFE for women told repeatedly they "must" have a hysterectomy — and seen them go on to have healthy pregnancies.</p>
            <div className="uf-doctor-stats">
              <div className="uf-doctor-stat"><div className="uf-doctor-stat-num">24+</div><div className="uf-doctor-stat-lbl">Years experience</div></div>
              <div className="uf-doctor-stat"><div className="uf-doctor-stat-num">10K+</div><div className="uf-doctor-stat-lbl">UFE procedures</div></div>
              <div className="uf-doctor-stat"><div className="uf-doctor-stat-num">95%</div><div className="uf-doctor-stat-lbl">Success rate</div></div>
            </div>
            <div className="uf-doctor-reassure"><b>Female coordinator promise: </b>Every consultation, every WhatsApp message, every clinic visit — a senior female coordinator is part of your care team. Your privacy and dignity come first.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Why Flowcare for Women ───
function UFWhy() {
  const cards = [
    { ico: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>,
      h: 'India\'s most experienced UFE team', p: '10,000+ procedures across 24+ years. We don\'t do "occasional UFE" — this is what we do every week.' },
    { ico: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>,
      h: 'Female-led patient experience', p: 'Female coordinator with you from first WhatsApp to last follow-up. Female nurses in the procedure suite. No awkward conversations.' },
    { ico: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 12l2 2 4-4M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>,
      h: 'No commission, no kickbacks', p: 'We don\'t accept referral fees from anyone. Our recommendations are based purely on what\'s right for you.' },
    { ico: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>,
      h: 'Hindi, English, and your dialect', p: 'We speak the way you\'re comfortable. No medical jargon unless you ask. Visual explanations always.' },
    { ico: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>,
      h: '100% confidentiality', p: 'Your records, your story, your scans — never shared with anyone. Not your gynec, not your insurer (without consent).' },
    { ico: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg>,
      h: 'Honest second opinion', p: 'Already advised hysterectomy? Send us your scans on WhatsApp. Free 15-min review by Dr. Bansal himself.' },
  ];
  return (
    <section className="uf-why">
      <div className="uf-section-inner">
        <div style={{textAlign:'center'}}>
          <div className="uf-eyebrow"><span className="dot"></span><span>Why Flowcare</span></div>
          <h2 className="uf-h2" style={{marginTop:16}}>Why women choose <i>Flowcare</i></h2>
          <p className="uf-lede" style={{marginInline:'auto'}}>Six things that make us different — and why women come from across India for treatment here.</p>
        </div>
        <div className="uf-why-grid">
          {cards.map((c, i) => (
            <div key={i} className="uf-why-card">
              <div className="uf-why-icon">{c.ico}</div>
              <div className="uf-why-h">{c.h}</div>
              <p className="uf-why-p">{c.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── For Husbands & Family ───
function UFFamily() {
  const cards = [
    { h: 'No major operation', p: 'No general anaesthesia. No ICU. No "we removed her uterus" conversation. She walks home in 24 hours.' },
    { h: 'Back to family life in a week', p: 'You don\'t need 6 weeks of leave. She doesn\'t need 6 weeks in bed. Children, kitchen, work — back on track in 5–7 days.' },
    { h: 'Future grandchildren still possible', p: 'Her uterus stays intact. Pregnancy after UFE is documented and successful. The family\'s future stays open.' },
    { h: 'Honest, transparent costs', p: 'One package. Everything included. No surprise bills. No "oh this is extra." No commissions to anyone.' },
    { h: 'A doctor who answers your questions', p: 'You can be in the room. You can ask anything. Dr. Bansal explains exactly what he\'ll do, in language you\'ll understand.' },
    { h: 'Privacy you can rely on', p: 'Records and scans never shared with anyone — not relatives, not employers, not even gynecologists — without her permission.' },
  ];
  return (
    <section className="uf-fam">
      <div className="uf-section-inner">
        <div style={{maxWidth:780}}>
          <div className="uf-eyebrow uf-fam-eyebrow"><span className="dot"></span><span>For husbands · sons · brothers</span></div>
          <h2 className="uf-fam-h2" style={{marginTop:16}}>What <i>your wife / mother / sister</i> needs you to know</h2>
          <p className="uf-fam-lede">If a woman in your life has been told she needs a hysterectomy — please read this. There is, almost always, a better way.</p>
        </div>
        <div className="uf-fam-grid">
          {cards.map((c, i) => (
            <div key={i} className="uf-fam-card">
              <div className="uf-fam-tick">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 13l4 4L19 7"/></svg>
              </div>
              <div className="uf-fam-h">{c.h}</div>
              <div className="uf-fam-p">{c.p}</div>
            </div>
          ))}
        </div>
        <div style={{textAlign:'center',marginTop:48,position:'relative',zIndex:1}}>
          <a className="uf-cta-wa" href={waLink("Hi, my wife/mother/sister has been advised hysterectomy. Can we discuss UFE?")}>
            <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><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.198-.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.297-.347.446-.52.149-.174.198-.298.297-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.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>
            Get answers for the family
          </a>
        </div>
      </div>
    </section>
  );
}

// ─── Testimonials ───
function UFTestimonials() {
  const list = [
    { name: 'Sunita, 38', meta: 'Jaipur · Mother of 2 · UFE Mar 2024', q: '"They told me 4 doctors said hysterectomy. Dr. Bansal said no. 6 months later I have my life back."' },
    { name: 'Riya, 31', meta: 'Delhi · UFE Jan 2023 · Baby Apr 2024', q: '"I was told fibroids would mean no kids. Today I have a healthy daughter."' },
    { name: 'Anjali, 45', meta: 'Lucknow · UFE Sep 2023', q: '"My HB went from 7 to 12 in 4 months. I can climb stairs again."' },
    { name: 'Meera, 36', meta: 'Jaipur · UFE Nov 2023', q: '"24-hour stay. Back to teaching in 6 days. My students never knew."' },
  ];
  return (
    <section className="uf-test">
      <div className="uf-section-inner">
        <div style={{textAlign:'center'}}>
          <div className="uf-eyebrow"><span className="dot"></span><span>Real women, real stories</span></div>
          <h2 className="uf-h2" style={{marginTop:16}}>From <i>"removed it"</i> to <i>"kept it"</i></h2>
        </div>
        <div className="uf-test-grid">
          <div className="uf-test-feat">
            <div className="uf-test-feat-overlay">
              <div style={{display:'inline-block',padding:'4px 12px',borderRadius:100,background:'rgba(244,166,182,0.85)',color:'#fff',fontSize:10,letterSpacing:'0.18em',textTransform:'uppercase',fontWeight:700,alignSelf:'flex-start',marginBottom:10}}>Featured story · 4:32</div>
              <div className="uf-test-feat-name">Priya's journey: from "remove uterus" to twins</div>
              <div className="uf-test-feat-meta">A 32-year-old's full story — from diagnosis at 4 hospitals to UFE to pregnancy to twin daughters in 2024.</div>
            </div>
            <div className="uf-test-feat-play">
              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
            </div>
          </div>
          <div className="uf-test-list">
            {list.map((t, i) => (
              <div key={i} className="uf-test-row">
                <div className="uf-test-thumb">
                  <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                </div>
                <div>
                  <div className="uf-test-name">{t.name}</div>
                  <div className="uf-test-meta">{t.meta}</div>
                  <div className="uf-test-quote">{t.q}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── FAQ ───
function UFFaq() {
  const items = [
    { q: 'Is UFE actually safe? It sounds too easy.', a: 'UFE is one of the most well-studied procedures in interventional radiology — performed safely on 200,000+ women globally over 25+ years. It carries less risk than hysterectomy: no major surgical complications, no general anaesthesia risks, no ICU, no transfusions. The only people who don\'t know about it are those who haven\'t been told.' },
    { q: 'Will I be able to have children after UFE?', a: 'Yes — UFE preserves your uterus and fertility. We have a documented track record of patients who conceived naturally and via IVF after UFE. Specific outcomes depend on age, baseline fertility, and the type of fibroid. Send us your scans on WhatsApp — Dr. Bansal will give you a frank fertility-focused opinion.' },
    { q: 'My gynec said hysterectomy is the only option. Should I still consider UFE?', a: 'Yes. Most gynecologists are surgeons by training — they recommend the tools they know. UFE is performed by interventional radiologists, a different specialty. Sending us your scans on WhatsApp for a free 15-min review costs nothing and tells you whether you have other options. Many of our patients had been advised hysterectomy multiple times.' },
    { q: 'What does the procedure feel like?', a: 'You stay awake the whole time. The wrist site is numbed with local anaesthesia. You might feel mild pressure as the catheter moves but no sharp pain. Most patients chat with the team during the procedure. The 4–6 hours after are managed with mild pain medication — most describe it as "a strong period cramp."' },
    { q: 'How long is the hospital stay?', a: '24 hours, typically. Admission morning of procedure, discharge next morning. Some patients with very large fibroids stay 36 hours for extra observation.' },
    { q: 'Will my periods stop after UFE?', a: 'No — UFE does not cause menopause or stop periods. You\'ll continue having normal periods, but with much lighter flow within 2–3 cycles.' },
    { q: 'How much does UFE cost in Jaipur?', a: '₹2.4–2.8 lakh for standard cases (single fibroid up to 8 cm), ₹3.0–3.6 lakh for complex cases. Everything is included in the package — pre-op tests, hospital stay, medications, all follow-ups for 12 months. No hidden costs.' },
    { q: 'Will the fibroid come back?', a: 'Recurrence after UFE is 5–10% — much lower than after myomectomy (15–30%). New fibroids can develop, but treated fibroids rarely regrow.' },
    { q: 'Does insurance cover UFE?', a: 'Yes, most Indian health insurance plans cover UFE. Our team will help with pre-authorisation, paperwork, and cashless processing. WhatsApp us your insurance details for a quick check.' },
    { q: 'Can I speak to a female team member?', a: 'Yes — our patient experience is led by female coordinators. From your first WhatsApp message to your last follow-up, a female team member is your primary contact. Female nurses are present in the procedure suite. Privacy and dignity are non-negotiable.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="uf-faq">
      <div className="uf-section-inner">
        <div style={{textAlign:'center'}}>
          <div className="uf-eyebrow"><span className="dot"></span><span>Honest answers</span></div>
          <h2 className="uf-h2" style={{marginTop:16}}>Things women <i>actually ask us</i></h2>
        </div>
        <div className="uf-faq-list">
          {items.map((it, i) => (
            <div key={i} className={`uf-faq-item ${open===i?'open':''}`}>
              <button className="uf-faq-q" onClick={() => setOpen(open===i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="uf-faq-q-icon">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M12 5v14M5 12h14"/></svg>
                </span>
              </button>
              <div className="uf-faq-a">
                {it.a}
                <a className="uf-faq-wa-link" href={waLink(`Hi, I have a follow-up question about: "${it.q}"`)}>
                  <svg viewBox="0 0 24 24" fill="currentColor"><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.198-.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.297-.347.446-.52.149-.174.198-.298.297-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.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>
                  Ask this on WhatsApp
                </a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Hindi block ───
function UFHindi() {
  const cards = [
    { h: 'फाइब्रॉइड क्या है?', p: 'गर्भाशय में होने वाली गांठें जो आमतौर पर कैंसर नहीं होतीं — पर भारी पीरियड्स, दर्द और कमज़ोरी का कारण बनती हैं। हर 4 में से 1 भारतीय महिला को होता है।' },
    { h: 'UFE क्या है?', p: 'बिना ऑपरेशन का इलाज। कलाई पर एक छोटा सा सूराख़, और एक पतली नली से फाइब्रॉइड की रक्त-धमनियों को बंद कर दिया जाता है। फाइब्रॉइड सूख जाता है, गर्भाशय बच जाता है।' },
    { h: 'क्या UFE के बाद बच्चा हो सकता है?', p: 'जी हाँ। आपका गर्भाशय पूरा सुरक्षित रहता है। हमारी कई मरीज़ों ने UFE के बाद स्वस्थ बच्चों को जन्म दिया है — यहाँ तक कि वे भी जिन्हें पहले गर्भाशय निकालने को कहा गया था।' },
    { h: 'खर्च कितना आता है?', p: '₹2.4 से 2.8 लाख का एक पूरा पैकेज — टेस्ट, अस्पताल, दवाइयाँ, फॉलो-अप सब शामिल। कोई छिपा खर्च नहीं। ज़्यादातर बीमा कंपनियाँ कवर करती हैं।' },
  ];
  return (
    <section className="uf-hindi">
      <div className="uf-section-inner">
        <div style={{textAlign:'center'}}>
          <div className="uf-eyebrow uf-hindi-eyebrow"><span className="dot"></span><span>हिंदी में जानें</span></div>
          <h2 className="uf-hindi-h2" style={{marginTop:16}}>आपके सवाल — हिंदी में</h2>
        </div>
        <div className="uf-hindi-grid">
          {cards.map((c, i) => (
            <div key={i} className="uf-hindi-card">
              <div className="uf-hindi-card-h">{c.h}</div>
              <div className="uf-hindi-card-p">{c.p}</div>
            </div>
          ))}
        </div>
        <div style={{textAlign:'center',position:'relative',zIndex:1}}>
          <a className="uf-hindi-cta" href={waLink("नमस्ते, मुझे फाइब्रॉइड के इलाज के बारे में जानकारी चाहिए")}>
            <svg viewBox="0 0 24 24" fill="currentColor"><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.198-.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.297-.347.446-.52.149-.174.198-.298.297-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.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>
            हिंदी में बात करें
          </a>
        </div>
      </div>
    </section>
  );
}

// ─── Final CTA ───
function UFFinalCta() {
  return (
    <section className="uf-final">
      <div className="uf-section-inner">
        <h2 className="uf-final-h">Your uterus is yours.<br/><i>Keep it.</i></h2>
        <p className="uf-final-p">If a doctor has told you the only option is hysterectomy — please get one more opinion before you decide. It costs nothing. It might change everything.</p>
        <div className="uf-final-actions">
          <a className="uf-cta-wa" href={waLink("Hi, I want a second opinion before I decide on hysterectomy. Please review my case.")}>
            <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><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.198-.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.297-.347.446-.52.149-.174.198-.298.297-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.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>
            Get free second opinion on WhatsApp
          </a>
          <a className="uf-cta-out" href={`tel:${UF_PHONE.replace(/\s/g,'')}`} style={{borderColor:'rgba(244,166,182,0.5)',color:'#F4A6B6'}}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="16" height="16"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/></svg>
            Call {UF_PHONE}
          </a>
        </div>
        <div className="uf-final-trust">
          <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>10,000+ women treated</span>
          <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 12l2 2 4-4M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>95% success rate</span>
          <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>100% confidential</span>
          <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>Female coordinator-led</span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { UFWalkthrough, UFRecovery, UFPricing, UFMri, UFDoctor, UFWhy, UFFamily, UFTestimonials, UFFaq, UFHindi, UFFinalCta });
