// Varicocele Treatment — Part 1
// Hero, Confidentiality, WA Quick Chat, Symptom Checker, What Is Varicocele, Grade Visualizer

const VC_DOC_IMG = "https://flowcare.co.in/wp-content/uploads/2024/05/dr-rajendra-bansal.jpg";
const VC_WA_BASE = "https://wa.me/919876543210?text=";
const VC_TEL = "tel:+919876543210";
const VC_HU = (en, hi) => en;

const VC_WA = (msg) => `${VC_WA_BASE}${encodeURIComponent(msg)}`;

const IconWA = () => (
  <svg viewBox="0 0 24 24" 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.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.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 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-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 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.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 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
);
const IconShield = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="14" height="14"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
);
const IconArrow = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="14" height="14"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
);
const IconCheck = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" width="14" height="14"><polyline points="20 6 9 17 4 12"/></svg>
);
const IconX = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="14" height="14"><path d="M18 6L6 18M6 6l12 12"/></svg>
);
const IconMan = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="14" height="14"><circle cx="12" cy="7" r="4"/><path d="M5 22v-2a7 7 0 0 1 14 0v2"/></svg>
);

/* ═══════════════════════════════════════════════
   1. BREADCRUMB + STRIP
   ═══════════════════════════════════════════════ */
function VCBreadcrumb() {
  return (
    <>
      <div className="vc-crumb">
        <a href="#">Home</a>
        <span className="sep">›</span>
        <a href="#">Treatments</a>
        <span className="sep">›</span>
        <a href="#">Men's Health</a>
        <span className="sep">›</span>
        <span className="here">Varicocele Embolization</span>
      </div>
      <div className="vc-strip">
        <div className="vc-strip-left">
          <span className="vc-strip-item">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            Varicocele Treatment <b>₹70k+</b>
          </span>
          <span className="vc-strip-item">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2L2 7v10c0 5 4 8 10 8s10-3 10-8V7L12 2z"/></svg>
            <b>Improves Fertility</b>
          </span>
          <span className="vc-strip-item">
            <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 0 1 10 0v4"/></svg>
            <b>100% Confidential</b>
          </span>
        </div>
        <a href={VC_WA("Hi, I want to discuss varicocele and fertility privately")} className="vc-cta-wa" style={{padding: '10px 20px', fontSize: 13}}>
          <IconWA /> WhatsApp Now
        </a>
      </div>
    </>
  );
}

/* ═══════════════════════════════════════════════
   2. HERO — fertility-first
   ═══════════════════════════════════════════════ */
const HERO_FRAMES = [
  {
    tag: "01 / Problem",
    headline: "Faulty veins",
    body: "Heat damages sperm production",
    svg: (
      <svg viewBox="0 0 280 280" width="220" height="220">
        <defs>
          <radialGradient id="vcheat" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#ff6b35" stopOpacity="0.6"/>
            <stop offset="100%" stopColor="#ff6b35" stopOpacity="0"/>
          </radialGradient>
        </defs>
        <circle cx="140" cy="140" r="100" fill="url(#vcheat)" opacity="0.7"/>
        {/* Tangled veins */}
        <g stroke="#00D4FF" strokeWidth="2" fill="none" opacity="0.85">
          <path d="M100 80 Q110 110 95 140 Q80 170 105 195 Q125 215 115 240"/>
          <path d="M130 75 Q145 105 130 135 Q115 165 145 190 Q165 210 150 240"/>
          <path d="M165 80 Q180 115 175 145 Q170 175 195 195 Q210 215 195 240"/>
        </g>
        {/* Bulged knot */}
        <g fill="#ff6b35" opacity="0.6">
          <ellipse cx="125" cy="160" rx="22" ry="14"/>
          <ellipse cx="160" cy="170" rx="18" ry="12"/>
          <ellipse cx="140" cy="180" rx="15" ry="10"/>
        </g>
        {/* Heat lines */}
        <g stroke="#ff6b35" strokeWidth="1.5" fill="none" opacity="0.5">
          <path d="M70 100 Q80 95 90 100"/>
          <path d="M70 130 Q80 125 90 130"/>
          <path d="M200 100 Q210 95 220 100"/>
          <path d="M200 130 Q210 125 220 130"/>
        </g>
        <text x="140" y="260" textAnchor="middle" fill="#ff6b35" fontFamily="ui-monospace" fontSize="10" letterSpacing="2">+2°C TESTICULAR HEAT</text>
      </svg>
    ),
  },
  {
    tag: "02 / Procedure",
    headline: "Pin-hole entry",
    body: "Micro-coils seal the bad vein",
    svg: (
      <svg viewBox="0 0 280 280" width="220" height="220">
        {/* Catheter going in */}
        <line x1="50" y1="50" x2="160" y2="160" stroke="#00D4FF" strokeWidth="2" strokeDasharray="4 3" opacity="0.6"/>
        <circle cx="50" cy="50" r="4" fill="#00D4FF"/>
        <text x="60" y="48" fill="#00D4FF" fontFamily="ui-monospace" fontSize="9" letterSpacing="1">ENTRY</text>
        
        {/* Vein with coils */}
        <g stroke="rgba(255,255,255,0.4)" strokeWidth="2" fill="none">
          <path d="M120 100 Q140 130 130 160 Q120 190 140 220"/>
          <path d="M150 100 Q170 130 160 160 Q150 190 170 220"/>
        </g>
        
        {/* Coils */}
        <g fill="#00D4FF">
          <circle cx="135" cy="155" r="3"/>
          <circle cx="138" cy="160" r="3"/>
          <circle cx="142" cy="158" r="3"/>
          <circle cx="145" cy="163" r="3"/>
          <circle cx="148" cy="167" r="3"/>
        </g>
        <circle cx="140" cy="160" r="22" fill="none" stroke="#00D4FF" strokeWidth="1.5" strokeDasharray="2 2" opacity="0.7"/>
        
        <text x="140" y="260" textAnchor="middle" fill="#00D4FF" fontFamily="ui-monospace" fontSize="10" letterSpacing="2">MICRO-COIL EMBOLIZATION</text>
      </svg>
    ),
  },
  {
    tag: "03 / Restored",
    headline: "Fertility restored",
    body: "70% sperm count improvement in 6 months",
    svg: (
      <svg viewBox="0 0 280 280" width="220" height="220">
        <defs>
          <radialGradient id="vccool" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#14B8A6" stopOpacity="0.4"/>
            <stop offset="100%" stopColor="#14B8A6" stopOpacity="0"/>
          </radialGradient>
        </defs>
        <circle cx="140" cy="140" r="100" fill="url(#vccool)"/>
        
        {/* Healthy flow */}
        <g stroke="#14B8A6" strokeWidth="2.5" fill="none">
          <path d="M120 80 Q130 130 130 180 Q130 220 140 250"/>
          <path d="M150 80 Q160 130 160 180 Q160 220 170 250"/>
        </g>
        
        {/* Sperm cells flowing up */}
        <g fill="#00D4FF">
          <ellipse cx="130" cy="130" rx="6" ry="3"/>
          <line x1="124" y1="130" x2="115" y2="132" stroke="#00D4FF" strokeWidth="1"/>
          <ellipse cx="160" cy="100" rx="6" ry="3"/>
          <line x1="154" y1="100" x2="145" y2="102" stroke="#00D4FF" strokeWidth="1"/>
          <ellipse cx="140" cy="160" rx="6" ry="3"/>
          <line x1="134" y1="160" x2="125" y2="162" stroke="#00D4FF" strokeWidth="1"/>
          <ellipse cx="155" cy="200" rx="6" ry="3"/>
          <line x1="149" y1="200" x2="140" y2="202" stroke="#00D4FF" strokeWidth="1"/>
        </g>
        
        {/* Up arrow */}
        <g fill="none" stroke="#14B8A6" strokeWidth="2.5">
          <line x1="200" y1="140" x2="200" y2="100"/>
          <polyline points="195 105 200 100 205 105"/>
        </g>
        <text x="215" y="125" fill="#14B8A6" fontFamily="ui-monospace" fontSize="11" fontWeight="700">+70%</text>
        
        <text x="140" y="40" textAnchor="middle" fill="#14B8A6" fontFamily="ui-monospace" fontSize="10" letterSpacing="2">SPERM PRODUCTION RESTORED</text>
      </svg>
    ),
  },
];

function VCHero() {
  const [frame, setFrame] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setFrame(f => (f + 1) % HERO_FRAMES.length), 4500);
    return () => clearInterval(t);
  }, []);
  const F = HERO_FRAMES[frame];

  return (
    <section className="vc-hero">
      <div className="vc-hero-inner">
        <div className="vc-hero-grid">
          <div>
            <span className="vc-eyebrow vc-hero-eyebrow"><span className="dot"></span>Male Fertility · Non-Surgical · Confidential</span>
            <h1>
              Struggling to conceive? <i>Fix varicocele without surgery</i> — and boost your sperm count by up to <b>70%</b>.
            </h1>
            <p className="vc-hero-sub">
              Non-surgical Varicocele Embolization by India's leading Interventional Radiologist. The #1 reversible cause of male infertility — treated in 60 minutes, with no scrotal incision, no general anesthesia, and complete confidentiality. Back to work in 24 hours.
            </p>
            <div className="vc-hero-pills">
              <span className="vc-hero-pill"><span className="dot"></span>Improves fertility</span>
              <span className="vc-hero-pill"><span className="dot"></span>No scrotal surgery</span>
              <span className="vc-hero-pill"><span className="dot"></span>100% confidential</span>
              <span className="vc-hero-pill"><span className="dot"></span>Insurance covered</span>
            </div>
            <div className="vc-hero-stats">
              <div>
                <div className="vc-hero-stat-num">1,500+</div>
                <div className="vc-hero-stat-lbl">Embolizations performed</div>
              </div>
              <div>
                <div className="vc-hero-stat-num">95%</div>
                <div className="vc-hero-stat-lbl">Procedure success rate</div>
              </div>
              <div>
                <div className="vc-hero-stat-num">+70%</div>
                <div className="vc-hero-stat-lbl">Sperm count improvement</div>
              </div>
              <div>
                <div className="vc-hero-stat-num">30–50%</div>
                <div className="vc-hero-stat-lbl">Natural pregnancy rate</div>
              </div>
            </div>
            <div className="vc-hero-price-tease">
              Treatment from <b>₹70,000</b>  ·  Half the cost of one IVF cycle (₹2–4L)  ·  Most insurance plans cover it
            </div>
            <div className="vc-hero-actions">
              <a href={VC_WA("Hi, I want to discuss varicocele and fertility privately")} className="vc-cta-wa">
                <IconWA /> Talk to Doctor's Team Privately
              </a>
              <a href={VC_WA("I'd prefer to speak with the male coordinator about varicocele")} className="vc-cta-male">
                <IconMan /> Speak with Male Coordinator
              </a>
            </div>
            <a href="#book" className="vc-hero-tert">Or book a confidential consult →</a>
          </div>

          <div className="vc-hero-vis">
            <div className="vc-hero-vis-stage">
              <span className="vc-hero-vis-step">{F.tag}</span>
              <div className="vc-hero-vis-svg">{F.svg}</div>
              <div className="vc-hero-vis-cap">
                <div className="vc-hero-vis-cap-h">{F.headline}</div>
                <div className="vc-hero-vis-cap-p">{F.body}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ═══════════════════════════════════════════════
   3. CONFIDENTIALITY VALIDATION
   ═══════════════════════════════════════════════ */
function VCConfidentiality() {
  return (
    <section className="vc-conf">
      <div className="vc-section-inner">
        <span className="vc-eyebrow"><span className="dot"></span>Privacy · Validation · Statistics</span>
        <h2 className="vc-h2" style={{marginTop: 12}}>You're <i>not alone</i>. And you don't have to talk to <i>anyone</i> about it.</h2>
        <div className="vc-conf-grid">
          <div className="vc-conf-card">
            <div className="vc-conf-num">01 / Prevalence</div>
            <div className="vc-conf-stat"><b>1 in 6</b> Indian men</div>
            <div className="vc-conf-p">have varicocele — most never get it diagnosed. The vast majority live with reduced fertility and silent testicular damage for years before seeking help.</div>
          </div>
          <div className="vc-conf-card">
            <div className="vc-conf-num">02 / Infertility link</div>
            <div className="vc-conf-stat"><b>40%</b> of male infertility</div>
            <div className="vc-conf-p">cases are caused by varicocele — and it's the most treatable, most reversible cause. Treating it before IVF improves outcomes by 40%.</div>
          </div>
          <div className="vc-conf-card">
            <div className="vc-conf-num">03 / Discretion</div>
            <div className="vc-conf-stat"><b>100%</b> confidential</div>
            <div className="vc-conf-p">WhatsApp directly with our male patient coordinator. No awkward calls, no front-desk conversations, no family involvement required.</div>
          </div>
        </div>
        <div className="vc-conf-foot">
          <div className="vc-conf-foot-text">
            <b>No awkward consultations. No family involvement needed. No female staff required.</b><br/>
            Just modern science and discreet care — handled by a male doctor and male coordinator.
          </div>
          <a href={VC_WA("Get answers privately on WhatsApp about varicocele")} className="vc-cta-wa">
            <IconWA /> Get answers privately
          </a>
        </div>
      </div>
    </section>
  );
}

/* ═══════════════════════════════════════════════
   4. WHATSAPP QUICK CHAT
   ═══════════════════════════════════════════════ */
const WA_QUICK = [
  { q: "Will it improve my fertility?", msg: "Will treatment improve my sperm count and fertility?" },
  { q: "Should I do this before IVF?", msg: "I want to know if I should try varicocele treatment before IVF?" },
  { q: "What will it cost me?", msg: "Please share varicocele embolization cost details for me" },
];

function VCWAQuick() {
  return (
    <section className="vc-wa">
      <div className="vc-section-inner">
        <span className="vc-eyebrow"><span className="dot"></span>WhatsApp · Direct line · Male coordinator</span>
        <h2 className="vc-h2" style={{marginTop: 12}}>Get real answers in <i>5 minutes</i> — from a male coordinator</h2>
        <p className="vc-lede">Direct WhatsApp line to a male coordinator. 100% confidential reply within 5 minutes. 9 AM – 8 PM, every day.</p>
        <div className="vc-wa-grid">
          {WA_QUICK.map((w, i) => (
            <a key={i} href={VC_WA(w.msg)} className="vc-wa-card">
              <div className="vc-wa-card-head"><IconWA /> Quick chat #{String(i+1).padStart(2,'0')}</div>
              <div className="vc-wa-card-q">"{w.q}"</div>
              <div className="vc-wa-card-foot">Reply from <b>male coordinator</b>  ·  &lt; 5 min</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ═══════════════════════════════════════════════
   5. SYMPTOM CHECKER
   ═══════════════════════════════════════════════ */
const VC_QUESTIONS = [
  { q: "Do you see or feel enlarged veins in your scrotum (often described as a 'bag of worms')?", opts: ["Yes, visible", "Felt only", "No"] },
  { q: "Do you feel a dull aching or heaviness in the scrotum, especially after standing or exercise?", opts: ["Yes, often", "Sometimes", "No"] },
  { q: "Is one testicle noticeably smaller than the other?", opts: ["Yes", "Maybe", "No"] },
  { q: "Does the discomfort improve when you lie down?", opts: ["Yes", "No discomfort", "No, same"] },
  { q: "Have you and your partner been trying to conceive for 6+ months without success?", opts: ["Yes", "Less than 6 months", "Not trying yet"] },
  { q: "Has a recent semen analysis shown low sperm count or poor motility?", opts: ["Yes", "Haven't tested", "No, normal"] },
  { q: "Does scrotal swelling visibly increase through the day?", opts: ["Yes", "Sometimes", "No"] },
  { q: "Do you experience low energy, low libido, or other symptoms of low testosterone?", opts: ["Yes, multiple", "One or two", "No"] },
];

function VCSymptomChecker() {
  const [step, setStep] = React.useState(0);
  const [answers, setAnswers] = React.useState({});
  const total = VC_QUESTIONS.length;
  const done = step >= total;

  const score = Object.values(answers).filter(v => v === 0).length; // index 0 is "Yes, often" / strongest
  const result = score >= 5 ? 'high' : score >= 2 ? 'mod' : 'low';
  const resultMeta = {
    high: { tag: 'High likelihood', label: 'High Risk', h: 'You likely have a Grade 2 or 3 varicocele', p: 'Based on your answers, you have multiple strong indicators of varicocele — including symptoms that affect sperm production. Seeking confidential evaluation is strongly recommended, especially if you are planning a family.' },
    mod: { tag: 'Moderate likelihood', label: 'Moderate Risk', h: 'Possible varicocele — worth confirming', p: 'You have several signs consistent with mild varicocele. A 30-minute Doppler ultrasound will confirm the grade and guide a private treatment plan.' },
    low: { tag: 'Low likelihood', label: 'Low Risk', h: 'Symptoms appear minimal', p: 'Your answers suggest low likelihood, but if you and your partner are trying to conceive without success, a confidential semen analysis is worth doing.' },
  }[result];

  const set = (i, v) => { setAnswers(a => ({...a, [i]: v})); setTimeout(() => setStep(s => Math.min(s+1, total)), 200); };

  return (
    <section className="vc-check">
      <div className="vc-section-inner">
        <span className="vc-eyebrow"><span className="dot"></span>Confidential · 30 seconds · No data stored</span>
        <h2 className="vc-h2" style={{marginTop: 12, textAlign: 'center'}}>Do you have a varicocele? <i>Take the 30-second confidential check.</i></h2>
        <div className="vc-check-shell">
          {!done && (
            <>
              <div className="vc-check-progress">
                {Array.from({length: total}).map((_, i) => (
                  <span key={i} className={i <= step ? 'on' : ''}></span>
                ))}
              </div>
              <div className="vc-check-q-num">QUESTION {String(step+1).padStart(2,'0')} OF {String(total).padStart(2,'0')}</div>
              <div className="vc-check-q">{VC_QUESTIONS[step].q}</div>
              <div className="vc-check-opts" style={{gridTemplateColumns: `repeat(${VC_QUESTIONS[step].opts.length}, 1fr)`}}>
                {VC_QUESTIONS[step].opts.map((opt, i) => (
                  <button key={i} className={`vc-check-opt ${answers[step] === i ? 'is-on' : ''}`} onClick={() => set(step, i)}>
                    <span>{opt}</span>
                    {answers[step] === i && <IconCheck />}
                  </button>
                ))}
              </div>
              <div className="vc-check-actions">
                <button className="vc-check-back" onClick={() => setStep(s => Math.max(0, s-1))} disabled={step === 0}>← Previous</button>
                <span style={{fontSize: 12, color: '#7a8094', fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.1em'}}>100% PRIVATE</span>
              </div>
            </>
          )}
          {done && (
            <div className="vc-check-result">
              <div className={`vc-check-result-tag ${result}`}>Result · {resultMeta.label}</div>
              <h3 className="vc-check-result-h">{resultMeta.h}</h3>
              <p className="vc-check-result-p">{resultMeta.p}</p>
              <div className="vc-check-result-stats">
                <div>
                  <div className="vc-check-result-stat-n">{result === 'high' ? '85%' : result === 'mod' ? '60%' : '25%'}</div>
                  <div className="vc-check-result-stat-l">Likely varicocele</div>
                </div>
                <div>
                  <div className="vc-check-result-stat-n">{result === 'high' ? 'High' : result === 'mod' ? 'Mod' : 'Low'}</div>
                  <div className="vc-check-result-stat-l">Fertility impact</div>
                </div>
                <div>
                  <div className="vc-check-result-stat-n">30 min</div>
                  <div className="vc-check-result-stat-l">Doppler confirms</div>
                </div>
              </div>
              <div style={{display: 'flex', gap: 12, flexWrap: 'wrap'}}>
                <a href={VC_WA(`Symptom check result: ${resultMeta.label} (${score}/8 indicators). Please advise privately.`)} className="vc-cta-wa">
                  <IconWA /> Send result privately to Dr. Bansal
                </a>
                <a href={VC_WA("I'd prefer to speak with the male coordinator about my result")} className="vc-cta-out">
                  <IconMan /> Speak with male coordinator
                </a>
                <button className="vc-check-back" onClick={() => { setStep(0); setAnswers({}); }}>Restart</button>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

/* ═══════════════════════════════════════════════
   6. WHAT IS VARICOCELE
   ═══════════════════════════════════════════════ */
const VC_CAUSES = [
  { en: "Faulty vein valves", icon: "M12 2v20" },
  { en: "Standing for long hours", icon: "M12 2v20" },
  { en: "Heavy lifting", icon: "M12 2v20" },
  { en: "Genetic predisposition", icon: "M12 2v20" },
  { en: "Age 15–25 peak", icon: "M12 2v20" },
  { en: "Left-side anatomy", icon: "M12 2v20" },
];

function VCWhatIs() {
  const [lang, setLang] = React.useState('en');
  const [stage, setStage] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setStage(s => (s + 1) % 4), 2200);
    return () => clearInterval(t);
  }, []);

  const stages = [
    { label: "VALVE FAILURE", svg: (
      <svg viewBox="0 0 240 280" width="220" height="260">
        <g stroke="rgba(255,255,255,0.5)" strokeWidth="2" fill="none">
          <line x1="120" y1="40" x2="120" y2="240"/>
        </g>
        <g fill="none" stroke="#00D4FF" strokeWidth="2.5">
          <path d="M100 80 L140 80 L120 95 Z" opacity="0.4"/>
          <path d="M100 130 L140 130 L120 145 Z" opacity="0.3" fill="#ff6b35"/>
          <path d="M100 180 L140 180 L120 195 Z" opacity="0.3" fill="#ff6b35"/>
        </g>
        <text x="160" y="135" fill="#ff6b35" fontFamily="ui-monospace" fontSize="10">FAILED</text>
        <text x="160" y="185" fill="#ff6b35" fontFamily="ui-monospace" fontSize="10">FAILED</text>
      </svg>
    )},
    { label: "BLOOD POOLING", svg: (
      <svg viewBox="0 0 240 280" width="220" height="260">
        <g stroke="rgba(255,255,255,0.3)" strokeWidth="2" fill="none">
          <line x1="120" y1="40" x2="120" y2="240"/>
        </g>
        <g fill="#ff6b35" opacity="0.7">
          <ellipse cx="120" cy="200" rx="35" ry="25"/>
          <ellipse cx="115" cy="180" rx="20" ry="14"/>
          <ellipse cx="130" cy="170" rx="15" ry="10"/>
        </g>
        <text x="120" y="270" textAnchor="middle" fill="#ff6b35" fontFamily="ui-monospace" fontSize="10">BLOOD POOLS DOWN</text>
      </svg>
    )},
    { label: "TEMP RISES", svg: (
      <svg viewBox="0 0 240 280" width="220" height="260">
        <defs>
          <radialGradient id="vchot" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#ff6b35" stopOpacity="0.7"/>
            <stop offset="100%" stopColor="#ff6b35" stopOpacity="0"/>
          </radialGradient>
        </defs>
        <circle cx="120" cy="160" r="80" fill="url(#vchot)"/>
        <ellipse cx="120" cy="200" rx="40" ry="50" fill="#0E2F6B" stroke="#ff6b35" strokeWidth="2"/>
        <text x="120" y="205" textAnchor="middle" fill="#fff" fontFamily="ui-monospace" fontSize="14" fontWeight="700">+2°C</text>
        <text x="120" y="270" textAnchor="middle" fill="#ff6b35" fontFamily="ui-monospace" fontSize="10">TESTICULAR HEAT</text>
      </svg>
    )},
    { label: "SPERM DAMAGE", svg: (
      <svg viewBox="0 0 240 280" width="220" height="260">
        <g fill="rgba(0,212,255,0.4)">
          <ellipse cx="80" cy="120" rx="6" ry="3"/>
          <ellipse cx="120" cy="160" rx="6" ry="3"/>
          <ellipse cx="160" cy="100" rx="6" ry="3"/>
          <ellipse cx="100" cy="200" rx="6" ry="3"/>
          <ellipse cx="150" cy="220" rx="6" ry="3"/>
        </g>
        <g stroke="#ff6b35" strokeWidth="2.5" fill="none">
          <line x1="40" y1="60" x2="200" y2="240"/>
          <line x1="60" y1="50" x2="60" y2="80"/>
          <line x1="50" y1="70" x2="80" y2="70"/>
          <line x1="190" y1="220" x2="190" y2="250"/>
          <line x1="180" y1="240" x2="210" y2="240"/>
        </g>
        <text x="120" y="270" textAnchor="middle" fill="#ff6b35" fontFamily="ui-monospace" fontSize="10">DNA DAMAGE · LOW MOTILITY</text>
      </svg>
    )},
  ];

  return (
    <section className="vc-what">
      <div className="vc-section-inner">
        <div className="vc-what-toggle">
          <button className={lang === 'en' ? 'on' : ''} onClick={() => setLang('en')}>English</button>
          <button className={lang === 'hi' ? 'on' : ''} onClick={() => setLang('hi')}>हिंदी</button>
        </div>
        <span className="vc-eyebrow"><span className="dot"></span>Anatomy · Plain language</span>
        {lang === 'en' ? (
          <h2 className="vc-h2" style={{marginTop: 12}}>Understanding varicocele — <i>the hidden cause</i> of male infertility</h2>
        ) : (
          <h2 className="vc-h2" style={{marginTop: 12, fontFamily: "'Noto Serif Devanagari', serif"}}>वैरिकोसील — <i>पुरुष बांझपन का छुपा कारण</i></h2>
        )}

        <div className="vc-what-grid">
          <div className="vc-what-text">
            {lang === 'en' ? (
              <>
                <p>A <b>varicocele</b> (called 'अंडकोष की नसों में सूजन' in Hindi) is an enlargement of the veins inside the scrotum — similar to varicose veins in the leg, but in your testicular area. It's caused by faulty valves in the veins, which let blood pool instead of flowing back to the heart.</p>
                <p>This pooling raises temperature in the testicles, which damages sperm production and quality. That's why varicocele affects 1 in 6 men — and is the <b>#1 reversible cause of male infertility</b>, present in 40% of men struggling to conceive.</p>
              </>
            ) : (
              <div style={{fontFamily: "'Noto Serif Devanagari', serif", fontSize: 17, lineHeight: 1.8}}>
                <p><b>वैरिकोसील</b> अंडकोष की नसों में सूजन है — पैर की वैरिकोज वेन्स की तरह, लेकिन अंडकोष क्षेत्र में। यह नसों में दोषपूर्ण वाल्व के कारण होता है, जिससे रक्त वापस हृदय की ओर बहने के बजाय रुक जाता है।</p>
                <p>यह रुका हुआ रक्त अंडकोष का तापमान बढ़ाता है, जो शुक्राणु उत्पादन और गुणवत्ता को नुकसान पहुंचाता है। इसीलिए <b>40% पुरुष बांझपन के मामलों</b> का कारण वैरिकोसील है — और यह सबसे आसानी से इलाज योग्य है।</p>
              </div>
            )}
            <div className="vc-what-causes">
              <div className="vc-what-causes-h">{lang === 'en' ? 'Common causes' : 'सामान्य कारण'}</div>
              <div className="vc-what-cause-grid">
                {VC_CAUSES.map((c, i) => (
                  <div key={i} className="vc-what-cause">
                    <IconCheck />
                    <span>{c.en}</span>
                  </div>
                ))}
              </div>
            </div>
            <div style={{marginTop: 24}}>
              <a href={VC_WA("Have a question about varicocele anatomy")} className="vc-cta-wa" style={{padding: '12px 24px', fontSize: 13}}>
                <IconWA /> Have a question? Ask privately
              </a>
            </div>
          </div>

          <div className="vc-what-vis">
            <span className="vc-what-vis-label">{stages[stage].label}</span>
            {stages[stage].svg}
            <div className="vc-what-vis-stage">
              {stages.map((_, i) => (
                <span key={i} className={`vc-what-vis-dot ${i === stage ? 'on' : ''}`} onClick={() => setStage(i)}></span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ═══════════════════════════════════════════════
   7. GRADE VISUALIZER
   ═══════════════════════════════════════════════ */
const VC_GRADES = [
  {
    n: "S",
    h: "Subclinical",
    sub: "Detectable only on ultrasound",
    palpable: "No",
    visible: "No",
    fertility: "Mild — usually monitored",
    treatment: "Watchful waiting unless trying to conceive",
    urgency: "Low priority — but recommend annual semen analysis if planning family.",
  },
  {
    n: "01",
    h: "Grade 1",
    sub: "Felt only during straining (Valsalva)",
    palpable: "On Valsalva only",
    visible: "No",
    fertility: "Mild – moderate",
    treatment: "Treat if abnormal semen analysis or symptoms",
    urgency: "Treatment recommended if planning family or pain present.",
  },
  {
    n: "02",
    h: "Grade 2",
    sub: "Felt during normal standing without straining",
    palpable: "Standing",
    visible: "Sometimes",
    fertility: "Moderate – significant",
    treatment: "Embolization strongly recommended",
    urgency: "Should be treated promptly if fertility is a goal.",
  },
  {
    n: "03",
    h: "Grade 3",
    sub: "Visible bulging veins through scrotal skin",
    palpable: "Always",
    visible: "Yes — visible 'bag of worms'",
    fertility: "Significant — major sperm impact",
    treatment: "Embolization strongly recommended",
    urgency: "Treat as soon as possible — testicular damage progresses with time.",
  },
];

function VCGradeVisualizer() {
  const [active, setActive] = React.useState(2);
  const G = VC_GRADES[active];

  return (
    <section className="vc-grade">
      <div className="vc-section-inner">
        <span className="vc-eyebrow"><span className="dot"></span>Grading · Clinical · Treatment guidance</span>
        <h2 className="vc-h2" style={{marginTop: 12}}>What <i>grade</i> is your varicocele?</h2>
        <p className="vc-lede">Click each grade to see fertility impact, treatment urgency, and the recommended next step. Most men we treat are Grade 2 or 3.</p>
        <div className="vc-grade-grid">
          <div className="vc-grade-list">
            {VC_GRADES.map((g, i) => (
              <div key={i} className={`vc-grade-card ${i === active ? 'is-on' : ''}`} onClick={() => setActive(i)}>
                <div className="vc-grade-num">{g.n}</div>
                <div>
                  <div className="vc-grade-h">{g.h}</div>
                  <div className="vc-grade-sub">{g.sub}</div>
                </div>
              </div>
            ))}
          </div>
          <div className="vc-grade-detail">
            <div className="vc-grade-detail-inner">
              <div className="vc-grade-detail-tag">Grade · {G.n}</div>
              <h3 className="vc-grade-detail-h">{G.h} — <i>{G.sub.toLowerCase()}</i></h3>
              <div className="vc-grade-detail-rows">
                <div className="vc-grade-detail-row">
                  <span className="l">Palpable</span>
                  <span className="v">{G.palpable}</span>
                </div>
                <div className="vc-grade-detail-row">
                  <span className="l">Visible</span>
                  <span className="v">{G.visible}</span>
                </div>
                <div className="vc-grade-detail-row">
                  <span className="l">Fertility impact</span>
                  <span className="v">{G.fertility}</span>
                </div>
                <div className="vc-grade-detail-row">
                  <span className="l">Treatment</span>
                  <span className="v">{G.treatment}</span>
                </div>
              </div>
              <div className="vc-grade-urgency">→ {G.urgency}</div>
              <a href={VC_WA(`I have ${G.h} varicocele based on the visualizer. Please advise.`)} className="vc-cta-wa">
                <IconWA /> Send my grade to doctor
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  VCBreadcrumb, VCHero, VCConfidentiality, VCWAQuick, VCSymptomChecker, VCWhatIs, VCGradeVisualizer,
  VC_WA, VC_DOC_IMG, VC_TEL,
  IconWA, IconShield, IconArrow, IconCheck, IconX, IconMan,
});
