// Varicose Veins page — Part 3: Pricing/EMI, Doctor, Testimonials, Before/After, FAQ, Final CTA, Footer chrome

const VV_VIDEOS = [
  { name: 'Sunita ji, 52', meta: 'Both legs · CEAP C4 · 2024', dur: '2:14', tag: 'Bilateral laser', feat: true,
    bg: 'linear-gradient(165deg, #2a3a5c, #1a2440)' },
  { name: 'Rajiv Sharma, 41', meta: 'Right leg · Pilot · 2024', dur: '1:48', tag: 'Back to flying', feat: false,
    bg: 'linear-gradient(165deg, #1a3a4a, #0f2a3a)' },
  { name: 'Mukesh, 58', meta: 'Both legs · Diabetic · 2023', dur: '3:02', tag: 'Diabetes-safe', feat: false,
    bg: 'linear-gradient(165deg, #3a2a4a, #2a1a3a)' },
  { name: 'Anjali, 34', meta: 'Spider veins · 2024', dur: '1:32', tag: 'Cosmetic', feat: false,
    bg: 'linear-gradient(165deg, #4a2a3a, #3a1a2a)' },
  { name: 'Vikram, 48', meta: 'C5 healed ulcer · 2023', dur: '2:48', tag: 'Ulcer recovery', feat: false,
    bg: 'linear-gradient(165deg, #2a4a3a, #1a3a2a)' },
];

function VVTestimonials() {
  return (
    <section className="vv-section dark">
      <div className="vv-section-inner">
        <div className="vv-section-head">
          <div className="vv-eyebrow"><span className="dot" /> In their own words</div>
          <h2 className="vv-h2">10,000+ patients walked in.<br/><i>Watch a few walk out.</i></h2>
          <p className="vv-lede">
            Hospitals love stats. Patients trust patients. Hear unedited recovery stories — pilots
            back in cockpits, teachers back on their feet, mothers back on the floor with grandkids.
            <b> All filmed at our Jaipur centre. No paid actors.</b>
          </p>
        </div>

        <div className="vv-videos">
          {VV_VIDEOS.map((v, i) => (
            <div key={i} className={`vv-video ${v.feat ? 'feat' : ''}`}>
              <div className="vv-video-thumb" style={{background: v.bg}} />
              <div className="vv-video-tag">{v.tag}</div>
              <div className="vv-video-duration">{v.dur}</div>
              <div className="vv-video-play">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
              </div>
              <div className="vv-video-caption">
                <div className="vv-video-name">{v.name}</div>
                <div className="vv-video-meta">{v.meta}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ────────────── Before / After Gallery ──────────────
const VV_BA = [
  { pat: 'Sunita Devi, 52', cond: 'Bilateral C4 · Pigmentation', meta: '6 weeks post-procedure · Sept 2024' },
  { pat: 'Rajiv Sharma, 41', cond: 'Right leg C2-C3 · Pilot', meta: '4 weeks post-procedure · Aug 2024' },
  { pat: 'Anjali M., 34',   cond: 'Spider veins · Cosmetic', meta: '8 weeks post-sclerotherapy · 2024' },
];

function VVBeforeAfter() {
  return (
    <section className="vv-section">
      <div className="vv-section-inner">
        <div className="vv-section-head">
          <div className="vv-eyebrow"><span className="dot" /> Before · After</div>
          <h2 className="vv-h2">Real results — <i>real patients.</i></h2>
          <div className="vv-h2-hi">वास्तविक मरीज़, वास्तविक परिणाम</div>
          <p className="vv-lede">
            Photographs published with patient consent. No retouching, no filters. The smoothness
            you see is the natural result of properly closed veins healing back into the body's
            normal venous circulation.
          </p>
        </div>

        <div className="vv-ba-grid">
          {VV_BA.map((b, i) => (
            <div key={i} className="vv-ba">
              <div className="vv-ba-imgs">
                <div className="vv-ba-img before">
                  <div className="vv-ba-img-tag">Before</div>
                  <svg viewBox="0 0 100 140" style={{width:'70%'}}>
                    <path d="M 50 10 Q 40 40 45 70 Q 38 100 50 130 Q 62 100 55 70 Q 60 40 50 10 Z" fill="#d9a878" stroke="#b88858" strokeWidth="0.5"/>
                    <path d="M 42 30 Q 36 60 44 90 Q 38 115 46 130" stroke="#7a3a5a" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
                    <path d="M 56 35 Q 60 65 54 95 Q 58 115 52 130" stroke="#7a3a5a" strokeWidth="2" fill="none" strokeLinecap="round"/>
                    <circle cx="42" cy="60" r="3" fill="#7a3a5a"/>
                    <circle cx="56" cy="80" r="3.5" fill="#7a3a5a"/>
                    <circle cx="44" cy="105" r="2.5" fill="#7a3a5a"/>
                  </svg>
                </div>
                <div className="vv-ba-img after">
                  <div className="vv-ba-img-tag">After</div>
                  <svg viewBox="0 0 100 140" style={{width:'70%'}}>
                    <path d="M 50 10 Q 40 40 45 70 Q 38 100 50 130 Q 62 100 55 70 Q 60 40 50 10 Z" fill="#f4d4b8" stroke="#b88858" strokeWidth="0.5"/>
                    <path d="M 48 30 Q 47 70 49 110" stroke="#1FC3C7" strokeWidth="0.8" fill="none" opacity="0.3"/>
                  </svg>
                </div>
              </div>
              <div className="vv-ba-body">
                <div className="vv-ba-cond">{b.cond}</div>
                <div className="vv-ba-pat">{b.pat}</div>
                <div className="vv-ba-meta">{b.meta}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ────────────── Pricing & EMI ──────────────
function VVPricing() {
  const [amount, setAmount] = React.useState(85000);
  const [tenure, setTenure] = React.useState(12);
  const tenures = [3, 6, 9, 12, 18, 24];
  const emi = Math.round((amount * 1.06) / tenure);

  return (
    <section className="vv-section alt">
      <div className="vv-section-inner">
        <div className="vv-section-head">
          <div className="vv-eyebrow"><span className="dot" /> Transparent pricing</div>
          <h2 className="vv-h2">No hidden fees. <i>No surprises.</i></h2>
          <div className="vv-h2-hi">पारदर्शी क़ीमत — कोई छुपी हुई फ़ीस नहीं</div>
          <p className="vv-lede">
            Most clinics give you a "ballpark figure" then surprise you with consumables, anaesthesia,
            and stocking charges later. Here's exactly what you pay — written down, signed, and bound.

          </p>
        </div>

        <div className="vv-pricing">
          <div className="vv-price-card">
            <div className="vv-price-tag">SINGLE LEG</div>
            <div className="vv-price-h">Unilateral 1470nm Laser</div>
            <div className="vv-price-sub">For one affected leg · Starting ₹65,000</div>
            <div className="vv-price-amount">₹65,000<span>+</span></div>
            <ul className="vv-price-list">
              {['Pre-op duplex ultrasound mapping', 'Tumescent local anaesthesia', '1470nm radial laser fibre (single-use)', 'Class-II compression stocking', '24-hour post-op WhatsApp support', '4 follow-up visits over 6 weeks', 'Final ultrasound at 6 weeks'].map((item,i) => (
                <li key={i}>
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 13l4 4L19 7"/></svg>
                  {item}
                </li>
              ))}
            </ul>
            <a className="vv-price-cta-wa" href={`https://wa.me/${window.VV_WA_NUMBER}?text=${encodeURIComponent('Hi, I want a single-leg quote')}`}>
              <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.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-.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.002-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 your exact quote on WhatsApp
            </a>
          </div>

          <div className="vv-price-card featured">
            <div className="vv-price-tag">BOTH LEGS · MOST CHOSEN</div>
            <div className="vv-price-h">Bilateral 1470nm Laser</div>
            <div className="vv-price-sub">Both legs treated in one sitting · Starting ₹85,000</div>
            <div className="vv-price-amount">₹85,000<span>+</span></div>
            <ul className="vv-price-list">
              {['Everything in single-leg, for both legs', 'Same-day bilateral procedure (saves 30%)', '2 single-use radial laser fibres', 'Two Class-II compression stockings', 'Priority WhatsApp line — Dr. Bansal', '6 follow-up visits over 8 weeks', 'Lifetime annual ultrasound recheck (free)', 'Cashless paperwork handled by us'].map((item,i) => (
                <li key={i}>
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 13l4 4L19 7"/></svg>
                  {item}
                </li>
              ))}
            </ul>
            <a className="vv-price-cta-wa" href={`https://wa.me/${window.VV_WA_NUMBER}?text=${encodeURIComponent('Hi, I want a bilateral quote and EMI options')}`}>
              <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.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-.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.002-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 your exact quote on WhatsApp
            </a>
          </div>
        </div>

        <div className="vv-price-factors">
          {[
            { h: 'CEAP stage', p: 'C2 costs less than C4-C6. Earlier you treat, less you pay.',
              icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 12l3-3 4 4 8-8 3 3"/></svg> },
            { h: 'One leg vs both', p: 'Bilateral saves ~30% vs two separate procedures.',
              icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 3v18M15 3v18"/></svg> },
            { h: 'Location', p: 'K-48/49, Income Tax Colony, SL Marg, Tonk Road, Jaipur 302015.',
              icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg> },
            { h: 'Add-ons needed', p: 'Sclerotherapy or phlebectomy add-ons priced transparently.',
              icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14M5 12h14"/></svg> },
          ].map((f, i) => (
            <div key={i}>
              <div className="vv-factor-icon">{f.icon}</div>
              <div className="vv-factor-h">{f.h}</div>
              <div className="vv-factor-p">{f.p}</div>
            </div>
          ))}
        </div>

        <div style={{display:'none'}}>
          <div>
            <div className="vv-emi-h">Monthly EMI calculator</div>
            <div className="vv-emi-sub">No-cost EMI on Bajaj Finserv, HDFC, ICICI, Axis cards · Instant approval</div>
            <div className="vv-emi-slider-row">
              <div>
                <div className="vv-emi-slider-label">
                  <span>Procedure cost</span>
                  <b>₹{amount.toLocaleString('en-IN')}</b>
                </div>
                <input type="range" className="vv-emi-slider" min="50000" max="200000" step="5000" value={amount} onChange={e => setAmount(+e.target.value)} />
              </div>
              <div>
                <div className="vv-emi-slider-label">
                  <span>Tenure</span>
                  <b>{tenure} months</b>
                </div>
                <div className="vv-emi-tenure">
                  {tenures.map(t => (
                    <span key={t} className={`vv-emi-tenure-pill ${t === tenure ? 'active' : ''}`} onClick={() => setTenure(t)}>{t} mo</span>
                  ))}
                </div>
              </div>
            </div>
            <div className="vv-emi-partners">
              {['Bajaj Finserv', 'HDFC', 'ICICI', 'Axis', 'SBI Card', 'Pine Labs'].map(p => (
                <span key={p} className="vv-emi-partner">{p}</span>
              ))}
            </div>
          </div>
          <div className="vv-emi-result">
            <div className="vv-emi-result-eyebrow">YOUR MONTHLY EMI</div>
            <div className="vv-emi-result-amount">₹{emi.toLocaleString('en-IN')}<span>/mo</span></div>
            <div className="vv-emi-result-period">for {tenure} months · No-cost EMI on select cards</div>
            <div className="vv-emi-result-savings">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" width="12" height="12"><path d="M12 2v20M2 12h20"/></svg>
              Save ₹{Math.round(amount * 0.13).toLocaleString('en-IN')} with no-cost EMI
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────────── Doctor card ──────────────
function VVDoctor() {
  return (
    <section className="vv-section">
      <div className="vv-section-inner">
        <div className="vv-section-head">
          <div className="vv-eyebrow"><span className="dot" /> Your interventional radiologist</div>
          <h2 className="vv-h2">Why patients fly to Jaipur for <i>Dr. Rajendra Bansal.</i></h2>
          <p className="vv-lede">
            18+ years and over 10,000 personally-performed pin-hole vascular procedures.
            Trained in interventional radiology at AIIMS, fellowship in endovascular therapy.
            One of only 12 specialists in India with this many radial laser cases.
          </p>
        </div>

        <div style={{display:'grid',gridTemplateColumns:'380px 1fr',gap:48,alignItems:'start'}}>
          <div style={{position:'sticky',top:100}}>
            <div style={{borderRadius:24,overflow:'hidden',background:'linear-gradient(165deg, var(--navy), var(--navy-deep))',aspectRatio:'4/5',position:'relative',boxShadow:'0 24px 60px rgba(14,47,107,0.18)'}}>
              <img src={window.VV_DOCTOR_IMG} alt="Dr. Rajendra Bansal" style={{width:'100%',height:'100%',objectFit:'cover',mixBlendMode:'normal'}} onError={(e)=>{e.currentTarget.style.display='none'}}/>
              <div style={{position:'absolute',inset:0,background:'linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.85) 100%)'}}/>
              <div style={{position:'absolute',bottom:0,left:0,right:0,padding:24,color:'#fff'}}>
                <div style={{fontFamily:"'Cormorant Garamond', serif",fontSize:28,fontWeight:600,lineHeight:1.1}}>Dr. Rajendra Bansal</div>
                <div style={{fontSize:13,color:'var(--cyan)',marginTop:4,letterSpacing:'0.05em'}}>MD (Radiology) · Fellowship Endovascular IR</div>
              </div>
            </div>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10,marginTop:14}}>
              <div style={{padding:16,borderRadius:14,background:'#fff',border:'1px solid var(--light-line)'}}>
                <div style={{fontFamily:"'Cormorant Garamond', serif",fontSize:32,fontWeight:600,color:'var(--cyan-deep)',lineHeight:1}}>10K+</div>
                <div style={{fontSize:11,letterSpacing:'0.12em',color:'var(--light-ink-3)',fontWeight:600,marginTop:4}}>PROCEDURES</div>
              </div>
              <div style={{padding:16,borderRadius:14,background:'#fff',border:'1px solid var(--light-line)'}}>
                <div style={{fontFamily:"'Cormorant Garamond', serif",fontSize:32,fontWeight:600,color:'var(--cyan-deep)',lineHeight:1}}>18yr</div>
                <div style={{fontSize:11,letterSpacing:'0.12em',color:'var(--light-ink-3)',fontWeight:600,marginTop:4}}>EXPERIENCE</div>
              </div>
            </div>
          </div>

          <div>
            <div style={{padding:28,borderRadius:20,background:'#fff',border:'1px solid var(--light-line)',marginBottom:18}}>
              <div style={{fontSize:11,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--cyan-deep)',fontWeight:700,marginBottom:14}}>Credentials</div>
              <div style={{display:'grid',gap:14}}>
                {[
                  ['MD', 'Radiology · AIIMS Delhi'],
                  ['Fellowship', 'Endovascular & Interventional Radiology · Singapore General Hospital'],
                  ['Member', 'Indian Society of Vascular & Interventional Radiology'],
                  ['Faculty', '14+ international vein conferences'],
                  ['Author', '23 peer-reviewed papers on venous interventions'],
                ].map(([k,v],i)=>(
                  <div key={i} style={{display:'grid',gridTemplateColumns:'120px 1fr',gap:14,paddingBottom:14,borderBottom: i<4?'1px solid var(--light-line)':'none'}}>
                    <div style={{fontSize:11,letterSpacing:'0.12em',color:'var(--light-ink-3)',fontWeight:700}}>{k.toUpperCase()}</div>
                    <div style={{fontSize:14,color:'var(--navy)',fontWeight:600}}>{v}</div>
                  </div>
                ))}
              </div>
            </div>

            <div style={{padding:28,borderRadius:20,background:'linear-gradient(165deg, var(--navy), var(--navy-deep))',color:'#fff',position:'relative',overflow:'hidden'}}>
              <div style={{position:'absolute',top:-80,right:-80,width:240,height:240,borderRadius:'50%',background:'radial-gradient(circle, rgba(31,195,199,0.4), transparent 70%)',filter:'blur(40px)'}}/>
              <div style={{position:'relative',zIndex:1}}>
                <div style={{fontSize:11,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--cyan)',fontWeight:700,marginBottom:14}}>A note from Dr. Bansal</div>
                <div style={{fontFamily:"'Cormorant Garamond', serif",fontSize:24,fontWeight:500,fontStyle:'italic',lineHeight:1.4,color:'rgba(255,255,255,0.95)'}}>
                  "Your veins didn't break in a day. They won't be fixed by stockings alone. The good news — modern laser closes the faulty vein in 60 minutes, with no cuts, no stitches, no scars. You will walk in. You will walk out. That's my promise."
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────────── FAQ ──────────────
const VV_FAQS = [
  { q: 'Is the procedure painful?', a: 'You feel only the initial pin-prick of local anaesthesia (like a vaccine). After that, the leg is numb. You may feel mild warmth or pressure during the laser pass, but no pain. Most patients describe it as "a strange but completely tolerable sensation." We chat through the whole 60 minutes.' },
  { q: 'How soon will I see results?', a: 'Most patients notice a significant reduction in heaviness and swelling within 48 hours. The vein gradually fades over 4–8 weeks as the body absorbs the sealed tissue. Full cosmetic improvement is visible at the 6-week follow-up ultrasound. Bulging disappears progressively — patients often say they notice the difference when getting dressed.' },
  { q: 'How is 1470nm different from older lasers?', a: 'Older 810nm and 980nm lasers used bare-tip fibres — they targeted blood (haemoglobin) which caused inconsistent heating, more bruising, and 8-15% recurrence. The 1470nm wavelength on a radial-tipped fibre targets water in the vein wall directly, distributing heat in 360°. The result — uniform vein closure, dramatically less bruising, sub-3% recurrence at 5 years.' },
  { q: 'Will the veins come back?', a: 'The treated vein cannot come back — once the laser closes it, the body absorbs it permanently. However, new varicose veins can develop in different segments if underlying valve disease isn\'t fully addressed. That\'s why we map ALL faulty perforators on day one and treat them in the same session. Our 5-year recurrence rate is under 3%, vs 20-25% for traditional surgery.' },
  { q: 'Can I walk after the procedure?', a: 'Yes — and you must. We ask all patients to walk for 15 minutes immediately after, before discharge. Walking activates the calf muscle pump which prevents clots and speeds healing. You\'ll walk to your car. You can drive yourself home (a relative riding along is recommended). Most patients are at their desk the next day.' },
  { q: 'What if both my legs are affected?', a: 'We treat both legs in the same sitting — saves you a separate procedure day, separate anaesthesia, separate stocking purchase, and roughly 30% in cost. Bilateral 1470nm laser at Flowcare takes 90-100 minutes total. You still walk out the same day.' },
  { q: 'Is laser safe if I have diabetes / heart disease?', a: 'Yes. In fact, laser is much safer than open surgery for diabetics, cardiac, and elderly patients because it avoids general anaesthesia and large incisions (which carry infection risk in diabetics). We routinely treat patients on blood thinners, with controlled diabetes, post-cardiac stenting, and even on dialysis. Send your medical history on WhatsApp; Dr. Bansal personally reviews before booking.' },
  { q: 'How soon can I fly / travel after?', a: 'Domestic flights and road trips are safe from day 3 with stockings on. Long-haul international flights (over 4 hours) — we recommend waiting 2-3 weeks and using compression stockings throughout. Cruises and beach holidays where you\'ll be in water and sunlight — wait 4 weeks for full skin healing.' },
  { q: 'Does pregnancy worsen varicose veins? Should I treat before or after?', a: 'Pregnancy commonly worsens varicose veins due to hormone changes and increased pelvic pressure. If you\'re planning a family, treating existing varicose veins beforehand makes pregnancy more comfortable. If you\'re currently pregnant — we recommend graduated stockings during pregnancy, and laser treatment 3-6 months postpartum after breastfeeding settles.' },
  { q: 'What\'s the difference between sclerotherapy and laser?', a: 'Sclerotherapy uses an injection of foam/liquid to scar shut small spider veins and reticular veins — best for cosmetic C1 cases. Laser ablation uses heat to seal larger faulty saphenous veins — needed for C2-C6. We often combine both: laser closes the source (saphenous trunk), sclerotherapy cleans up branches. Same sitting, single recovery.' },
];

function VVFaq() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="vv-section alt">
      <div className="vv-section-inner">
        <div className="vv-section-head">
          <div className="vv-eyebrow"><span className="dot" /> Real questions, honest answers</div>
          <h2 className="vv-h2">Everything patients <i>actually ask us.</i></h2>
          <div className="vv-h2-hi">हर वो सवाल जो मरीज़ अक्सर पूछते हैं</div>
          <p className="vv-lede">
            We pulled the top 10 questions from 2,847 WhatsApp chats this year. If yours isn't here,
            ping us on WhatsApp — Dr. Bansal himself reviews complex cases.
          </p>
        </div>

        <div className="vv-faq-list">
          {VV_FAQS.map((f, i) => (
            <div key={i} className={`vv-faq-item ${open === i ? 'open' : ''}`}>
              <div className="vv-faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="vv-faq-toggle">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" width="14" height="14"><path d="M12 5v14M5 12h14"/></svg>
                </span>
              </div>
              <div className="vv-faq-a">
                <div className="vv-faq-a-inner">
                  {f.a}
                  <div>
                    <a className="vv-faq-a-cta" href={`https://wa.me/${window.VV_WA_NUMBER}?text=${encodeURIComponent('Hi, I have a follow-up question: ' + f.q)}`}>
                      <svg viewBox="0 0 24 24" fill="currentColor" width="14" height="14"><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-.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.002-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 Dr. Bansal directly
                    </a>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ────────────── Final CTA ──────────────
function VVFinal() {
  return (
    <section className="vv-final">
      <div className="vv-final-inner">
        <h2 className="vv-final-h">Walk in with pain.<br/><i>Walk out with confidence.</i></h2>
        <div className="vv-final-hi">दर्द के साथ आइए — आत्मविश्वास के साथ जाइए</div>
        <p className="vv-final-lede">
          Stop letting your legs decide what you can wear, where you can travel, or how
          long you can stand at your child's wedding. The 1470nm laser closes faulty veins
          in 60 minutes. No cuts, no stitches, no long recovery.
        </p>
        <div className="vv-final-actions">
          <a className="vv-cta vv-cta-wa" href={`https://wa.me/${window.VV_WA_NUMBER}?text=${encodeURIComponent("Hi Dr. Bansal, I want to book a consultation for varicose veins")}`}>
            <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><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-.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.002-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>
            Book free consultation on WhatsApp
          </a>
          <a className="vv-cta vv-cta-call" href={`tel:${window.VV_PHONE.replace(/\s/g,'')}`}>
            <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 {window.VV_PHONE}
          </a>
        </div>
        <div className="vv-final-trust">
          <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> 10,000+ procedures</span>
          <span><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> Same-day discharge</span>
          <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12l4 4L19 6"/></svg> 99.2% closure rate</span>
        </div>
      </div>
    </section>
  );
}

// ────────────── Sticky floating buttons ──────────────
function VVStickyBar() {
  return (
    <div className="vv-sticky-bar">
      <a className="vv-sticky-wa" href={`https://wa.me/${window.VV_WA_NUMBER}`} target="_blank" rel="noopener">
        <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.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-.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.002-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>
      <a className="vv-sticky-call" href={`tel:${window.VV_PHONE.replace(/\s/g,'')}`}>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><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>
      </a>
    </div>
  );
}

// ────────────── Breadcrumb + Byline ──────────────
function VVBreadcrumb() {
  return (
    <div className="vv-breadcrumb">
      <div className="vv-breadcrumb-inner">
        <a href="Flowcare Homepage.html">Home</a>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M9 5l7 7-7 7"/></svg>
        <a href="#">Treatments</a>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M9 5l7 7-7 7"/></svg>
        <a href="#">Vascular</a>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M9 5l7 7-7 7"/></svg>
        <b>Varicose Veins Laser Treatment in Jaipur</b>
      </div>
    </div>
  );
}

function VVByline() {
  return (
    <div className="vv-byline">
      <div className="vv-byline-author">
        <div className="vv-byline-avatar">RB</div>
        <div className="vv-byline-name">
          Medically reviewed by <a href="#">Dr. Rajendra Bansal, MD (Radiology)</a><br/>
          <span style={{fontSize:11,color:'var(--light-ink-3)'}}>Senior Interventional Radiologist · Flowcare Jaipur</span>
        </div>
      </div>
      <div className="vv-byline-meta">
        <span className="vv-byline-reviewed">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" width="11" height="11"><path d="M5 13l4 4L19 7"/></svg>
          Clinically reviewed
        </span>
        <span><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> Updated <b>April 2026</b></span>
        <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg> <b>14 min</b> read</span>
      </div>
    </div>
  );
}

Object.assign(window, { VVTestimonials, VVBeforeAfter, VVPricing, VVDoctor, VVFaq, VVFinal, VVStickyBar, VVBreadcrumb, VVByline });
