// Varicocele Treatment — Part 2
// Fertility Impact, Sperm Table, Warnings, Solution, Comparison, Walkthrough

/* ═══════════════════════════════════════════════
   8. FERTILITY IMPACT
   ═══════════════════════════════════════════════ */
const VC_FERT_BAD = [
  { h: "+1–2°C testicular heat", p: "Devastates sperm production at cellular level" },
  { h: "30–50% sperm count drop", p: "Progressive decline over months and years" },
  { h: "Damaged motility", p: "Sperm can't swim well enough to reach the egg" },
  { h: "Abnormal morphology", p: "Shape defects reduce fertilization capacity" },
  { h: "Lower testosterone", p: "Fatigue, low libido, reduced muscle mass" },
  { h: "Sperm DNA damage", p: "Oxidative stress causes long-term genetic damage" },
];
const VC_FERT_GOOD = [
  { h: "Normal temperature restored", p: "Within weeks of the procedure" },
  { h: "+70% sperm count gain", p: "Significant improvement within 6 months in 70% of men" },
  { h: "+60% motility improvement", p: "Faster, healthier swimming sperm" },
  { h: "30–50% natural pregnancy rate", p: "Within 12 months — without IVF" },
  { h: "+40% IVF success rate", p: "If you still need IVF, your odds improve dramatically" },
  { h: "Restored testosterone", p: "Energy, libido, and vitality come back" },
];

function VCFertility() {
  return (
    <section className="vc-fert">
      <div className="vc-section-inner">
        <span className="vc-eyebrow"><span className="dot"></span>Fertility · Sperm parameters · Reversible</span>
        <h2 className="vc-h2" style={{marginTop: 12}}>How varicocele <i>destroys sperm quality</i> — and how treatment <i>reverses it</i></h2>
        <p className="vc-lede">Varicocele isn't just a vein problem. It's a fertility problem. Here's exactly what's happening inside — and what changes after embolization.</p>

        <div className="vc-fert-grid">
          <div className="vc-fert-col bad">
            <div className="vc-fert-col-tag">Without treatment</div>
            <h3 className="vc-fert-col-h">What varicocele does to your fertility</h3>
            <div className="vc-fert-list">
              {VC_FERT_BAD.map((f, i) => (
                <div key={i} className="vc-fert-item">
                  <span className="vc-fert-ico"><IconX /></span>
                  <div className="vc-fert-item-text"><b>{f.h}.</b> {f.p}</div>
                </div>
              ))}
            </div>
          </div>
          <div className="vc-fert-col good">
            <div className="vc-fert-col-tag">After embolization</div>
            <h3 className="vc-fert-col-h">What embolization does for you</h3>
            <div className="vc-fert-list">
              {VC_FERT_GOOD.map((f, i) => (
                <div key={i} className="vc-fert-item">
                  <span className="vc-fert-ico"><IconCheck /></span>
                  <div className="vc-fert-item-text"><b>{f.h}.</b> {f.p}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="vc-fert-foot">
          <div className="vc-fert-foot-h">One-time treatment. <b>Lifelong benefit.</b></div>
          <a href={VC_WA("I want to discuss my fertility goals privately")} className="vc-cta-wa">
            <IconWA /> Discuss my fertility goals privately
          </a>
        </div>
      </div>
    </section>
  );
}

/* ═══════════════════════════════════════════════
   9. SPERM PARAMETER BEFORE/AFTER TABLE
   ═══════════════════════════════════════════════ */
const VC_SPERM_DATA = [
  { id: "01", age: 32, before_count: "8 M/ml", before_mot: "28%", after_count: "38 M/ml", after_mot: "56%", outcome: "Wife conceived naturally", tag: "Natural pregnancy" },
  { id: "02", age: 28, before_count: "12 M/ml", before_mot: "22%", after_count: "45 M/ml", after_mot: "62%", outcome: "First child born 2024", tag: "Natural pregnancy" },
  { id: "03", age: 35, before_count: "5 M/ml", before_mot: "18%", after_count: "28 M/ml", after_mot: "51%", outcome: "IVF success after embolization", tag: "IVF success" },
  { id: "04", age: 30, before_count: "15 M/ml", before_mot: "30%", after_count: "52 M/ml", after_mot: "64%", outcome: "Twins conceived naturally", tag: "Twins" },
  { id: "05", age: 38, before_count: "3 M/ml", before_mot: "15%", after_count: "22 M/ml", after_mot: "48%", outcome: "Wife pregnant in 9 months", tag: "Natural pregnancy" },
];

function VCSpermTable() {
  return (
    <section className="vc-sperm">
      <div className="vc-section-inner">
        <span className="vc-eyebrow"><span className="dot"></span>Real Lab Data · Anonymized · Verified</span>
        <h2 className="vc-h2" style={{marginTop: 12}}>Real sperm parameter improvements — <i>verified by lab reports</i></h2>
        <p className="vc-lede">Anonymized data from recent patients (with documented written consent). Every value is from independent laboratory semen analysis at 6 months post-procedure.</p>

        <div className="vc-sperm-table">
          <div className="vc-sperm-head">
            <div>Patient</div>
            <div>Before treatment</div>
            <div>After 6 months</div>
            <div>Outcome</div>
          </div>
          {VC_SPERM_DATA.map((row, i) => (
            <div key={i} className="vc-sperm-row">
              <div>
                <div className="vc-sperm-pat">Patient #{row.id}</div>
                <span className="vc-sperm-pat-meta">AGE {row.age} · ANON.</span>
              </div>
              <div className="vc-sperm-val">
                <span className="l">Sperm count</span>{row.before_count}<br/>
                <span className="l">Motility</span>{row.before_mot}
              </div>
              <div className="vc-sperm-val after">
                <span className="l" style={{color: '#7a8094'}}>Sperm count</span>↑ {row.after_count}<br/>
                <span className="l" style={{color: '#7a8094'}}>Motility</span>↑ {row.after_mot}
              </div>
              <div>
                <div>
                  <span className="vc-sperm-out-tag">{row.tag}</span>
                  <div className="vc-sperm-out">{row.outcome}</div>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="vc-sperm-disclaimer">
          All data verified by independent labs. Anonymized reports available on request via WhatsApp. Results vary by individual case.
        </div>

        <div style={{textAlign: 'center', marginTop: 28}}>
          <a href={VC_WA("Please share my expected sperm improvement based on my reports")} className="vc-cta-wa">
            <IconWA /> See my expected improvement based on my reports
          </a>
        </div>
      </div>
    </section>
  );
}

/* ═══════════════════════════════════════════════
   10. WARNINGS — why not ignore
   ═══════════════════════════════════════════════ */
const VC_WARNINGS = [
  { h: "Permanent sperm damage", p: "Long-term temperature damage may become irreversible — testicular tissue scars over time." },
  { h: "Testicular shrinkage (atrophy)", p: "The affected testicle slowly reduces in size as production cells die off." },
  { h: "Lower testosterone for life", p: "Affects energy, libido, mood, mental clarity, and muscle mass — even outside fertility." },
  { h: "Chronic daily ache", p: "What was occasional discomfort becomes daily aching — and worsens with age." },
  { h: "Permanent infertility risk", p: "40% of male infertility cases are linked to varicocele — and untreated cases are the hardest to reverse." },
  { h: "Failed IVF cycles", p: "Even IVF success rates drop sharply when underlying varicocele isn't treated first." },
];

function VCWarnings() {
  return (
    <section className="vc-warn">
      <div className="vc-section-inner">
        <span className="vc-eyebrow"><span className="dot"></span>Warning · Untreated · Progressive</span>
        <h2 className="vc-h2" style={{marginTop: 12}}>Why untreated varicocele is a <i>bigger problem</i> than you think</h2>
        <p className="vc-lede">Varicocele is progressive. Every year you wait, the temperature damage accumulates — and a fixable problem can become a permanent one.</p>

        <div className="vc-warn-grid">
          {VC_WARNINGS.map((w, i) => (
            <div key={i} className="vc-warn-card">
              <div className="vc-warn-ico">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
              </div>
              <h3 className="vc-warn-h">{w.h}</h3>
              <p className="vc-warn-p">{w.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ═══════════════════════════════════════════════
   11. SOLUTION — 3-frame storyboard
   ═══════════════════════════════════════════════ */
function VCSolution() {
  const frames = [
    {
      step: "01 / Problem",
      h: "Faulty veins, raised heat",
      p: "Damaged valves let blood pool in the testicular vein. Temperature climbs by 1–2°C and starts damaging sperm at a cellular level.",
      tags: ["Pooled blood", "Raised temperature", "Sperm damage"],
      svg: (
        <svg viewBox="0 0 280 200" width="240">
          <defs>
            <radialGradient id="vcs1" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stopColor="#ff6b35" stopOpacity="0.5"/>
              <stop offset="100%" stopColor="#ff6b35" stopOpacity="0"/>
            </radialGradient>
          </defs>
          <circle cx="140" cy="100" r="80" fill="url(#vcs1)"/>
          <g stroke="#00D4FF" strokeWidth="2.5" fill="none" opacity="0.7">
            <path d="M110 40 Q120 70 105 100 Q90 130 115 160"/>
            <path d="M140 35 Q155 65 140 95 Q125 125 155 155"/>
            <path d="M175 40 Q190 75 185 105 Q180 135 200 160"/>
          </g>
          <g fill="#ff6b35" opacity="0.7">
            <ellipse cx="135" cy="120" rx="22" ry="14"/>
            <ellipse cx="170" cy="130" rx="18" ry="12"/>
          </g>
        </svg>
      ),
    },
    {
      step: "02 / Procedure",
      h: "Pin-hole, micro-coil seal",
      p: "Tiny puncture in groin or wrist (no scrotal cut). A micro-catheter is guided up to the faulty vein and tiny coils + sclerosant seal it shut.",
      tags: ["Local anaesthesia", "60–90 minutes", "No scrotal cut"],
      svg: (
        <svg viewBox="0 0 280 200" width="240">
          <line x1="40" y1="40" x2="160" y2="120" stroke="#00D4FF" strokeWidth="2.5" strokeDasharray="4 3"/>
          <circle cx="40" cy="40" r="5" fill="#00D4FF"/>
          <text x="50" y="38" fill="#00D4FF" fontFamily="ui-monospace" fontSize="9" letterSpacing="1">PIN-HOLE</text>
          <g stroke="rgba(255,255,255,0.4)" strokeWidth="2" fill="none">
            <path d="M130 60 Q150 90 140 120 Q130 150 150 175"/>
            <path d="M165 60 Q180 90 175 120 Q170 150 185 175"/>
          </g>
          <g fill="#00D4FF">
            <circle cx="145" cy="115" r="3"/>
            <circle cx="148" cy="120" r="3"/>
            <circle cx="152" cy="118" r="3"/>
            <circle cx="156" cy="123" r="3"/>
          </g>
          <circle cx="150" cy="120" r="22" fill="none" stroke="#00D4FF" strokeWidth="1.5" strokeDasharray="2 2"/>
          <text x="180" y="125" fill="#00D4FF" fontFamily="ui-monospace" fontSize="9" letterSpacing="1">COILS</text>
        </svg>
      ),
    },
    {
      step: "03 / Solution",
      h: "Blood reroutes, fertility returns",
      p: "Blood reroutes through healthy veins. Testicular temperature normalises. Sperm production rebuilds — and 70% of men see significant count improvements within 6 months.",
      tags: ["Normal temperature", "Sperm count up to +70%", "30–50% natural pregnancy"],
      svg: (
        <svg viewBox="0 0 280 200" width="240">
          <defs>
            <radialGradient id="vcs3" 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="100" r="80" fill="url(#vcs3)"/>
          <g stroke="#14B8A6" strokeWidth="2.5" fill="none">
            <path d="M125 30 Q130 80 130 130 Q130 165 140 180"/>
            <path d="M155 30 Q160 80 160 130 Q160 165 170 180"/>
          </g>
          <g fill="#00D4FF">
            <ellipse cx="120" cy="80" rx="6" ry="3"/>
            <line x1="114" y1="80" x2="105" y2="82" stroke="#00D4FF"/>
            <ellipse cx="170" cy="60" rx="6" ry="3"/>
            <line x1="164" y1="60" x2="155" y2="62" stroke="#00D4FF"/>
            <ellipse cx="140" cy="120" rx="6" ry="3"/>
            <line x1="134" y1="120" x2="125" y2="122" stroke="#00D4FF"/>
          </g>
          <g fill="none" stroke="#14B8A6" strokeWidth="2.5">
            <line x1="220" y1="130" x2="220" y2="80"/>
            <polyline points="215 85 220 80 225 85"/>
          </g>
          <text x="232" y="110" fill="#14B8A6" fontFamily="ui-monospace" fontSize="11" fontWeight="700">+70%</text>
        </svg>
      ),
    },
  ];

  return (
    <section className="vc-sol">
      <div className="vc-section-inner">
        <span className="vc-eyebrow"><span className="dot"></span>Procedure · Modern · USFDA & CE approved</span>
        <h2 className="vc-h2" style={{marginTop: 12}}>Varicocele embolization — <i>the modern alternative</i> to surgery</h2>
        <p className="vc-lede">No scrotal cut. No general anaesthesia. No hospital stay. The same result as surgery — through a pin-hole the size of a pen tip.</p>

        <div className="vc-sol-grid">
          {frames.map((f, i) => (
            <div key={i} className="vc-sol-card">
              <div className="vc-sol-vis">
                <span className="vc-sol-step">{f.step}</span>
                <div className="vc-sol-vis-svg">{f.svg}</div>
              </div>
              <div className="vc-sol-body">
                <h3 className="vc-sol-h">{f.h}</h3>
                <p className="vc-sol-p">{f.p}</p>
                <div className="vc-sol-tags">
                  {f.tags.map((t, j) => <span key={j} className="vc-sol-tag">{t}</span>)}
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="vc-sol-specs">
          <div><span>Procedure</span><b>Percutaneous Embolization</b></div>
          <div><span>Entry</span><b>Pin-hole · groin</b></div>
          <div><span>Anaesthesia</span><b>Local only</b></div>
          <div><span>Duration</span><b>60–90 min</b></div>
          <div><span>Hospital stay</span><b>4–6 hours observation</b></div>
          <div><span>Recovery</span><b>24–48 hours</b></div>
          <div><span>Success rate</span><b>90–95%</b></div>
          <div><span>Approval</span><b>USFDA · CE</b></div>
        </div>
      </div>
    </section>
  );
}

/* ═══════════════════════════════════════════════
   12. COMPARISON TABLE
   ═══════════════════════════════════════════════ */
const VC_CMP_ROWS = [
  ["Scrotal cut",            "Yes",               "Yes",              "None — pin-hole in groin", "N/A"],
  ["Anaesthesia",            "General",           "General",          "Local only",                "N/A"],
  ["Hospital stay",          "1–2 days",          "Day care",         "4–6 hours",                 "N/A"],
  ["Recovery",               "2–4 weeks",         "1 week",           "24–48 hours",               "N/A"],
  ["Treats root cause",      "Yes",               "Yes",              "Yes",                       "No"],
  ["Sperm improvement",      "Yes",               "Yes",              "Yes (up to +70%)",          "No"],
  ["Natural pregnancy",      "Possible",          "Possible",         "30–50% rate",               "Not natural"],
  ["Cost (₹)",               "₹40k–₹1L",          "₹70k–₹1.5L",       "₹70k–₹1.5L",                "₹2L–₹4L /cycle"],
  ["Repeat needed",          "Sometimes",         "Rarely",           "Rarely",                    "Often"],
];

function VCComparison() {
  const isOurs = (row, idx) => idx === 3;
  const cellClass = (val) => {
    if (val === "Yes" || val.includes("70%") || val.includes("rate") || val === "Local only") return "vc-cmp-good";
    if (val === "No" || val === "General" || val === "1–2 days" || val === "Often" || val === "2–4 weeks") return "vc-cmp-bad";
    return "";
  };

  return (
    <section className="vc-cmp">
      <div className="vc-section-inner">
        <span className="vc-eyebrow"><span className="dot"></span>Comparison · Surgery · IVF · Embolization</span>
        <h2 className="vc-h2" style={{marginTop: 12}}>Embolization vs. surgery vs. IVF — <i>side by side</i></h2>
        <p className="vc-lede">The same result as varicocele surgery — without the scrotal incision, the general anaesthesia, the recovery weeks, or the hospital admission.</p>

        <div className="vc-cmp-table">
          <div className="vc-cmp-row head">
            <div>Feature</div>
            <div>Open surgery</div>
            <div>Microsurgery</div>
            <div className="ours">Flowcare embolization</div>
            <div>IVF (no treatment)</div>
          </div>
          {VC_CMP_ROWS.map((row, i) => (
            <div key={i} className="vc-cmp-row">
              <div className="feat">{row[0]}</div>
              <div className={cellClass(row[1])}>{row[1]}</div>
              <div className={cellClass(row[2])}>{row[2]}</div>
              <div className="ours">{row[3]}</div>
              <div className={cellClass(row[4])}>{row[4]}</div>
            </div>
          ))}
        </div>

        <div className="vc-cmp-foot">
          <div className="vc-cmp-foot-h">"Embolization treats the <b>root cause</b>. IVF treats the symptom. For best results, treat varicocele <b>first</b> — even if you're planning IVF later."</div>
        </div>
      </div>
    </section>
  );
}

/* ═══════════════════════════════════════════════
   13. WALKTHROUGH timeline
   ═══════════════════════════════════════════════ */
const VC_WALK = [
  { n: "01", h: "WhatsApp Consultation", dur: "Same day · free", p: "Send semen analysis & ultrasound on WhatsApp. Get private advice from Dr. Bansal's team — male coordinator handles your case." },
  { n: "02", h: "Clinic Visit", dur: "45 minutes · ₹500", p: "Doppler ultrasound + consultation. Male coordinator can be present throughout. Confirms grade and side." },
  { n: "03", h: "Procedure Day", dur: "60–90 minutes", p: "Embolization under local anaesthesia. Pin-hole in groin. You're awake, comfortable, and chatting with the team." },
  { n: "04", h: "Same-Day Discharge", dur: "4–6 hours after", p: "Walk out the same day. Mild groin soreness only — no pain, no scrotal sensation, no hospital admission." },
  { n: "05", h: "Follow-Up", dur: "Day 7 · Mo 3 · Mo 6", p: "Three reviews via WhatsApp + clinic. Semen analysis at Month 3 tracks the sperm parameter improvements." },
];

function VCWalkthrough() {
  return (
    <section className="vc-walk">
      <div className="vc-section-inner">
        <span className="vc-eyebrow"><span className="dot"></span>Journey · Step by step · Discreet</span>
        <h2 className="vc-h2" style={{marginTop: 12}}>Your treatment journey — <i>step by step</i></h2>
        <p className="vc-lede">From first WhatsApp message to follow-up at Month 6 — every step handled discreetly, with the option of a male coordinator throughout.</p>

        <div className="vc-walk-track">
          {VC_WALK.map((s, i) => (
            <div key={i} className="vc-walk-step">
              <div className="vc-walk-num">{s.n}</div>
              <div className="vc-walk-dur">{s.dur}</div>
              <h3 className="vc-walk-h">{s.h}</h3>
              <p className="vc-walk-p">{s.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ═══════════════════════════════════════════════
   14. RECOVERY
   ═══════════════════════════════════════════════ */
const VC_REC = [
  { when: "Day 1", h: "Walk immediately", p: "Mild groin soreness only. Drive yourself home if you wish. No bed rest required." },
  { when: "Day 2–3", h: "Resume desk work", p: "Back to office, laptop work, light walking. Avoid heavy lifting and gym for now." },
  { when: "Day 7", h: "Driving + sex okay", p: "Return to driving, gentle exercise, and sexual activity. Most men return to full routine here." },
  { when: "Day 14", h: "Gym + sports back", p: "Resume gym, full workouts, sports, heavy lifting. The pin-hole is fully healed." },
  { when: "Month 3", h: "First semen test", p: "Repeat semen analysis to track sperm count and motility improvements." },
  { when: "Month 6", h: "Major improvements", p: "70% of men see significant sperm parameter improvements by this milestone." },
  { when: "Month 6+", h: "Try to conceive", p: "Optimal time to attempt natural conception. 30–50% pregnancy rate within 12 months." },
  { when: "Year 1+", h: "Permanent benefit", p: "Effects of embolization are lifelong. Recurrence is rare (under 5%)." },
];

function VCRecovery() {
  return (
    <section className="vc-rec">
      <div className="vc-section-inner">
        <span className="vc-eyebrow"><span className="dot"></span>Recovery · Day-by-day · Realistic</span>
        <h2 className="vc-h2" style={{marginTop: 12}}>Back to your routine — <i>faster than you think</i></h2>
        <p className="vc-lede">No 2-week leave. No ice packs for a month. No "take it easy" speech from your doctor. Most men are back at the gym by Day 14.</p>

        <div className="vc-rec-track">
          {VC_REC.map((r, i) => (
            <div key={i} className="vc-rec-card">
              <span className="vc-rec-when">{r.when}</span>
              <h3 className="vc-rec-h">{r.h}</h3>
              <p className="vc-rec-p">{r.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  VCFertility, VCSpermTable, VCWarnings, VCSolution, VCComparison, VCWalkthrough, VCRecovery,
});