// Varicose Veins page — Part 2: Warning Signs, Comparison Table, Procedure Walkthrough, Recovery Timeline

const VV_WARNINGS = [
  { h: 'Heaviness by evening', p: 'Legs feel like lead after a day of standing or sitting. Worse in summer.', urgent: false,
    icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg> },
  { h: 'Visible bulging veins', p: 'Twisted, ropy veins that protrude from your calves or thighs.', urgent: false,
    icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 12c3-6 9-6 12 0M9 12c3 6 9 6 12 0"/></svg> },
  { h: 'Night cramps', p: 'Sudden calf cramps waking you up — especially in the early hours.', urgent: false,
    icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zM8 12l3 3 5-6"/></svg> },
  { h: 'Restless legs', p: 'Uncontrollable urge to move legs at night, ruining sleep.', urgent: false,
    icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/><path d="M12 6v6l4 2"/></svg> },
  { h: 'Ankle swelling', p: 'Socks leave deep marks. Ankles puffy by 4 PM, normal by morning.', urgent: false,
    icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/></svg> },
  { h: 'Skin discoloration', p: 'Brown patches around ankles. Skin feels harder, itches.', urgent: true,
    icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2L2 22h20L12 2z"/><path d="M12 9v4M12 17h.01"/></svg> },
  { h: 'Bleeding veins', p: 'Even minor bumps cause prolonged bleeding from a vein.', urgent: true,
    icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2v6M12 14v8M5 12a7 7 0 0114 0"/></svg> },
  { h: 'Open wound / ulcer', p: 'Non-healing wound near the ankle. This is a medical emergency.', urgent: true,
    icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="9"/><path d="M9 9l6 6M15 9l-6 6"/></svg> },
];

function VVWarnings() {
  return (
    <section className="vv-section alt">
      <div className="vv-section-inner">
        <div className="vv-section-head">
          <div className="vv-eyebrow"><span className="dot" /> Don't ignore these</div>
          <h2 className="vv-h2">8 signs your legs are <i>quietly asking for help.</i></h2>
          <div className="vv-h2-hi">8 लक्षण जो बताते हैं — अब डॉक्टर को दिखाने का समय है</div>
          <p className="vv-lede">
            Varicose veins rarely arrive with a bang. They whisper for years before they shout.
            If three or more of these sound familiar, book a free symptom check today.
            <b> Items marked urgent require evaluation within 2 weeks.</b>
          </p>
        </div>

        <div className="vv-warnings">
          {VV_WARNINGS.map((w, i) => (
            <div key={i} className="vv-warn">
              {w.urgent && <div className="vv-warn-urgent">Urgent</div>}
              <div className="vv-warn-icon">{w.icon}</div>
              <div className="vv-warn-h">{w.h}</div>
              <div className="vv-warn-p">{w.p}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ────────────── Comparison Table ──────────────
const VV_COMPARE_ROWS = [
  { feature: 'Procedure type',         old: 'Open surgery (stripping)', conv: 'RFA / standard laser', cheap: 'Sclerotherapy alone', us: '1470nm radial laser' },
  { feature: 'Anaesthesia',            old: 'General', conv: 'Spinal / local', cheap: 'Local', us: 'Tumescent local only' },
  { feature: 'Incision size',          old: '3–5 cm cuts',  conv: '3–4 mm', cheap: 'Needle pricks', us: <b>1–2 mm pinhole</b> },
  { feature: 'Stitches',               old: '5–10 stitches', conv: '0–2', cheap: 'None', us: <b>None — surgical glue</b> },
  { feature: 'Hospital stay',          old: '2–3 nights', conv: '1 night', cheap: 'Day care', us: <b>2 hr walk-in/out</b> },
  { feature: 'Closure rate (long-term)', old: '70–80%', conv: '88–92%', cheap: '50–60%', us: <b>99.2%</b> },
  { feature: 'Recurrence at 5 yrs',    old: '20–25%', conv: '10–15%', cheap: '40%+', us: <b>Under 3%</b> },
  { feature: 'Return to work',         old: '2–3 weeks', conv: '4–7 days', cheap: '2 days', us: <b>24–48 hours</b> },
  { feature: 'Bruising / pain',        old: 'High', conv: 'Moderate', cheap: 'Mild', us: <b>Minimal</b> },
  { feature: 'Insurance covered',      old: 'Yes', conv: 'Yes', cheap: 'Often no', us: <b>Yes · cashless 25+ insurers</b> },
];

function VVCompare() {
  return (
    <section className="vv-section">
      <div className="vv-section-inner">
        <div className="vv-section-head">
          <div className="vv-eyebrow"><span className="dot" /> Side-by-side comparison</div>
          <h2 className="vv-h2">Why <i>1470nm radial laser</i> outperforms every other option.</h2>
          <div className="vv-h2-hi">हमारा 1470nm रेडियल लेज़र बाक़ी सब विकल्पों से बेहतर क्यों है?</div>
          <p className="vv-lede">
            All laser is not the same. The 1470nm wavelength on a radial-tipped fibre delivers heat
            uniformly in 360°, sealing the vein wall completely with less energy. The result —
            higher closure, lower bruising, faster recovery. Compare for yourself.
          </p>
        </div>

        <div className="vv-compare">
          <div className="vv-compare-head">
            <div>Parameter</div>
            <div>Old surgery</div>
            <div>Conventional laser</div>
            <div>Cheap injections</div>
            <div className="featured">1470nm at Flowcare</div>
          </div>
          {VV_COMPARE_ROWS.map((r, i) => (
            <div key={i} className="vv-compare-row">
              <div>{r.feature}</div>
              <div className="vv-compare-cell-bad">{r.old}</div>
              <div className="vv-compare-cell-meh">{r.conv}</div>
              <div className="vv-compare-cell-bad">{r.cheap}</div>
              <div className="featured vv-compare-cell-good">{r.us}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ────────────── Procedure Walkthrough ──────────────
const VV_WALK_STEPS = [
  { time: '0:00', h: 'Arrive & ultrasound mapping', p: 'You walk in. We do a duplex ultrasound to map every faulty perforator vein. You see your own veins on screen.', stage: 0 },
  { time: '0:15', h: 'Local anaesthesia', p: 'Tumescent local — only the leg is numbed. You stay awake, chatting. No fasting, no IV, no general anaesthesia.', stage: 1 },
  { time: '0:30', h: '1-2mm pin-hole access', p: 'A tiny 1.5mm puncture below the knee. The radial laser fibre is threaded into the faulty vein under live ultrasound.', stage: 2 },
  { time: '0:45', h: '1470nm laser ablation', p: 'The laser is fired in slow pull-back. Vein wall collapses & seals from inside. You feel warmth, no pain.', stage: 3 },
  { time: '1:00', h: 'Compression & walk', p: 'Stocking applied. You walk to recovery, sip chai, get discharged in 60 mins. Drive home.', stage: 4 },
];

function VVWalk() {
  const [step, setStep] = React.useState(0);

  React.useEffect(() => {
    const id = setInterval(() => setStep(s => (s + 1) % VV_WALK_STEPS.length), 4500);
    return () => clearInterval(id);
  }, []);

  const cur = VV_WALK_STEPS[step];

  return (
    <section className="vv-section alt">
      <div className="vv-section-inner">
        <div className="vv-section-head">
          <div className="vv-eyebrow"><span className="dot" /> The 60-minute procedure</div>
          <h2 className="vv-h2">From walk-in to walk-out — <i>step-by-step.</i></h2>
          <div className="vv-h2-hi">सिर्फ़ 60 मिनट में — पूरी प्रक्रिया</div>
          <p className="vv-lede">
            No general anaesthesia. No catheter. No urinary tube. No 3-day hospital stay.
            Here's exactly what happens during your day-care laser procedure — every minute,
            timestamped. Click any step to see it animated.
          </p>
        </div>

        <div className="vv-walk">
          <div className="vv-walk-vis">
            <div className="vv-walk-vis-tag">
              <span className="pulse" />
              LIVE · STEP {step + 1} / {VV_WALK_STEPS.length}
            </div>
            <div className="vv-walk-vis-svg">
              <window.VVHeroLeg stage={cur.stage} />
            </div>
            <div className="vv-walk-vis-step">
              <span style={{width:6,height:6,borderRadius:'50%',background:'var(--cyan)'}} />
              T+{cur.time} · MIN {step + 1}
            </div>
            <div className="vv-walk-vis-cap">{cur.h}</div>
          </div>

          <div className="vv-walk-steps">
            {VV_WALK_STEPS.map((s, i) => (
              <div key={i} className={`vv-walk-step ${i === step ? 'active' : ''}`} onClick={() => setStep(i)}>
                <div className="vv-walk-step-num">0{i + 1}</div>
                <div>
                  <div className="vv-walk-step-h">{s.h}</div>
                  <div className="vv-walk-step-p">{s.p}</div>
                </div>
                <div className="vv-walk-step-time">T+{s.time}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────────── Recovery Timeline ──────────────
const VV_RECOVERY = [
  { t: '0 hr',  h: 'Walk out', p: 'Compression stocking on. You walk to the car. No wheelchair, no support.',
    icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12l4 4L19 6"/></svg> },
  { t: '24 hr', h: 'Back to work', p: 'Most patients return to a desk job the very next day. Light walking encouraged.',
    icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 7h18l-2 13H5L3 7zM8 7V5a4 4 0 018 0v2"/></svg> },
  { t: '3 day', h: 'Shower normally', p: 'Stocking removed for a hot shower. Dressings stay dry. Mild bruising fades.',
    icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12c0-3 3-6 7-6s7 3 7 6M12 6V2"/><circle cx="12" cy="16" r="2"/></svg> },
  { t: '1 wk',  h: 'Light exercise', p: 'Yoga, brisk walking, cycling. Avoid heavy weights or running.',
    icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="6" cy="18" r="3"/><circle cx="18" cy="18" r="3"/><path d="M6 18l4-7 5 5 3-9"/></svg> },
  { t: '2 wk',  h: 'Travel & flights', p: 'Domestic flights, road trips OK. Long-haul flights from week 3 with stocking.',
    icon: <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> },
  { t: '6 wk',  h: 'Full activity', p: 'Gym, sports, running, swimming. Stocking optional. Final ultrasound check.',
    icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M9 12l2 2 4-4"/></svg> },
];

function VVRecovery() {
  return (
    <section className="vv-section">
      <div className="vv-section-inner">
        <div className="vv-section-head">
          <div className="vv-eyebrow"><span className="dot" /> Recovery timeline</div>
          <h2 className="vv-h2">Back to your life — <i>fast.</i></h2>
          <div className="vv-h2-hi">रिकवरी टाइमलाइन — कब क्या कर सकते हैं?</div>
          <p className="vv-lede">
            Old vein-stripping surgery meant 3 weeks bed rest, painful bandages, and visible scars.
            With 1470nm laser, you're back at your desk tomorrow and at the gym in two weeks.
            Here's a realistic recovery roadmap for our average patient.
          </p>
        </div>

        <div className="vv-recovery">
          {VV_RECOVERY.map((r, i) => (
            <div key={i} className="vv-recovery-step">
              <div className="vv-recovery-icon">{r.icon}</div>
              <div className="vv-recovery-time">{r.t}</div>
              <div className="vv-recovery-h">{r.h}</div>
              <div className="vv-recovery-p">{r.p}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { VVWarnings, VVCompare, VVWalk, VVRecovery });