﻿// Varicose Veins page — Part 1: Hero, Sticky WA strip, Symptom Checker, CEAP Visualizer

const VV_WA_NUMBER = '919414066632';
const VV_PHONE = '+91 94140 66632';
const VV_DOCTOR_IMG = "/uploads/Dr-Bansal.png";

// ────────────── Animated leg illustration with cycling stages ──────────────
function VVHeroLeg({ stage }) {
  // stage 0: healthy → 1: spider veins → 2: varicose → 3: laser fixing → 4: post-treatment
  const veinColors = {
    0: ['#5BD9DC', '#5BD9DC'],
    1: ['#a47bbf', '#5BD9DC'],
    2: ['#7a3a5a', '#a47bbf'],
    3: ['#f4b942', '#1FC3C7'],
    4: ['#1FC3C7', '#5BD9DC'],
  };
  const [c1, c2] = veinColors[stage] || veinColors[0];
  const showLaser = stage === 3;
  const showSparkles = stage === 4;
  const veinOpacity = stage === 4 ? 0.3 : stage === 0 ? 0.45 : 0.95;

  return (
    <svg viewBox="0 0 280 480" style={{ width: '100%', maxWidth: 280, height: 'auto', filter: 'drop-shadow(0 20px 40px rgba(0,0,0,0.4))' }}>
      <defs>
        <linearGradient id="legGrad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#f4d4b8"/>
          <stop offset="1" stopColor="#d9a878"/>
        </linearGradient>
        <linearGradient id="vGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={c1}/>
          <stop offset="1" stopColor={c2}/>
        </linearGradient>
        <radialGradient id="laserGlow">
          <stop offset="0" stopColor="#f4b942" stopOpacity="0.9"/>
          <stop offset="1" stopColor="#f4b942" stopOpacity="0"/>
        </radialGradient>
      </defs>

      {/* Leg silhouette */}
      <path d="M 110 30 Q 100 70 105 130 Q 95 200 100 280 Q 95 360 110 440 Q 125 450 145 450 Q 165 360 160 280 Q 170 200 160 130 Q 165 70 155 30 Q 140 20 132 20 Q 122 20 110 30 Z"
            fill="url(#legGrad)" opacity="0.95" stroke="#b88858" strokeWidth="0.8"/>

      {/* Healthy reference vein - always faint */}
      <path d="M 130 50 Q 128 130 132 220 Q 128 320 130 420"
            stroke="#1FC3C7" strokeWidth="1.5" fill="none" opacity="0.2" strokeLinecap="round"/>

      {/* Main affected veins */}
      {stage >= 1 && (
        <g opacity={veinOpacity}>
          <path d="M 118 80 Q 112 130 120 180 Q 108 230 118 290 Q 110 350 122 410"
                stroke="url(#vGrad)" strokeWidth={stage === 2 ? 4.5 : stage === 1 ? 2 : 3}
                fill="none" strokeLinecap="round"/>
          <path d="M 138 100 Q 145 150 138 210 Q 148 270 140 330 Q 145 390 138 430"
                stroke="url(#vGrad)" strokeWidth={stage === 2 ? 4 : stage === 1 ? 1.8 : 2.5}
                fill="none" strokeLinecap="round"/>
          {/* Branching */}
          <path d="M 118 180 Q 100 200 95 240" stroke="url(#vGrad)" strokeWidth={stage === 2 ? 3 : 1.5} fill="none" strokeLinecap="round" opacity="0.8"/>
          <path d="M 140 250 Q 158 260 162 300" stroke="url(#vGrad)" strokeWidth={stage === 2 ? 3 : 1.5} fill="none" strokeLinecap="round" opacity="0.8"/>
          {/* Twisted bulges for varicose */}
          {stage === 2 && (
            <g opacity="0.85">
              <circle cx="115" cy="200" r="6" fill="#7a3a5a"/>
              <circle cx="142" cy="270" r="7" fill="#7a3a5a"/>
              <circle cx="120" cy="350" r="5" fill="#7a3a5a"/>
              <ellipse cx="100" cy="220" rx="4" ry="6" fill="#7a3a5a"/>
            </g>
          )}
        </g>
      )}

      {/* Laser catheter - stage 3 */}
      {showLaser && (
        <g>
          <line x1="80" y1="-10" x2="125" y2="200" stroke="#fff" strokeWidth="2.5" strokeLinecap="round"/>
          <line x1="80" y1="-10" x2="125" y2="200" stroke="#1FC3C7" strokeWidth="1" strokeLinecap="round"/>
          <circle cx="125" cy="200" r="14" fill="url(#laserGlow)">
            <animate attributeName="r" values="10;18;10" dur="1.2s" repeatCount="indefinite"/>
          </circle>
          <circle cx="125" cy="200" r="4" fill="#f4b942">
            <animate attributeName="opacity" values="0.6;1;0.6" dur="0.8s" repeatCount="indefinite"/>
          </circle>
          {/* Heat waves */}
          <circle cx="125" cy="200" r="22" fill="none" stroke="#f4b942" strokeWidth="0.8" opacity="0.5">
            <animate attributeName="r" values="14;30;14" dur="1.6s" repeatCount="indefinite"/>
            <animate attributeName="opacity" values="0.6;0;0.6" dur="1.6s" repeatCount="indefinite"/>
          </circle>
        </g>
      )}

      {/* Sparkles - stage 4 healed */}
      {showSparkles && (
        <g>
          {[[80,120],[180,180],[90,300],[170,360],[100,420]].map(([x,y],i) => (
            <g key={i}>
              <circle cx={x} cy={y} r="2.5" fill="#5BD9DC">
                <animate attributeName="opacity" values="0;1;0" dur="2s" begin={`${i*0.3}s`} repeatCount="indefinite"/>
              </circle>
              <path d={`M ${x-5} ${y} L ${x+5} ${y} M ${x} ${y-5} L ${x} ${y+5}`} stroke="#5BD9DC" strokeWidth="1" opacity="0.6">
                <animate attributeName="opacity" values="0;0.8;0" dur="2s" begin={`${i*0.3}s`} repeatCount="indefinite"/>
              </path>
            </g>
          ))}
        </g>
      )}
    </svg>
  );
}

function VVHero() {
  const [stage, setStage] = React.useState(0);
  const stages = [
    { label: 'Healthy', cap: 'How a healthy leg should feel' },
    { label: 'Spider veins', cap: 'Early signs — fine purple lines' },
    { label: 'Varicose', cap: 'Bulging twisted veins' },
    { label: '1470nm Laser', cap: 'Pin-hole laser closes the vein' },
    { label: 'Restored', cap: 'Smooth, flowing — pain gone' },
  ];

  React.useEffect(() => {
    const id = setInterval(() => setStage(s => (s + 1) % stages.length), 3000);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="vv-hero">
      <div className="vv-hero-inner">
        <div className="vv-hero-left">
          <div className="vv-hero-eyebrow">
            <span className="pulse" />
            INDIA'S #1 PIN-HOLE LASER CENTRE · JAIPUR
          </div>
          <h1 className="vv-hero-h1">
            Banish <i>varicose veins</i> in 60 minutes —<br/>
            walk out the same day.
          </h1>
          <div className="vv-hero-h1-hi">
            वेरिकोज़ नसों का बिना चीरा-टांका लेज़र इलाज
          </div>
          <p className="vv-hero-lede">
            1470nm radial-tipped laser closes faulty veins through a 1-2mm pin-hole.
            No general anaesthesia. No hospital stay. No long scars. 99.2% closure
            rate with India's most experienced vascular interventionalist.
          </p>

          <div className="vv-hero-trust">
            <div className="vv-hero-trust-item">
              <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>
              <span><b>10,000+</b> procedures</span>
            </div>

            <div className="vv-hero-trust-item">
              <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>
              <span><b>Same-day</b> discharge</span>
            </div>
          </div>

          <div className="vv-hero-ctas">
            <a className="vv-cta vv-cta-wa" href={`https://wa.me/${VV_WA_NUMBER}?text=${encodeURIComponent("Hi, I'd like to book a varicose vein consultation")}`}>
              <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>
              Chat on WhatsApp
            </a>
            <a className="vv-cta vv-cta-form" href="#checker">
              Free symptom check
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" width="16" height="16"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </a>
            <a className="vv-cta vv-cta-call" href={`tel:${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>
              {VV_PHONE}
            </a>
          </div>

          <div className="vv-hero-stats">
            <div className="vv-hero-stat">
              <div className="vv-hero-stat-k">99.2%</div>
              <div className="vv-hero-stat-v">Closure rate</div>
            </div>
            <div className="vv-hero-stat">
              <div className="vv-hero-stat-k">60min</div>
              <div className="vv-hero-stat-v">Procedure time</div>
            </div>
            <div className="vv-hero-stat">
              <div className="vv-hero-stat-k">2hr</div>
              <div className="vv-hero-stat-v">Walk-in to walk-out</div>
            </div>
            <div className="vv-hero-stat">
              <div className="vv-hero-stat-k">0</div>
              <div className="vv-hero-stat-v">Cuts · stitches · scars</div>
            </div>
          </div>
        </div>

        <div className="vv-hero-vis">
          <div className="vv-hero-vis-tag">
            <span className="pulse" />
            LIVE · TREATMENT ANIMATION
          </div>
          <div className="vv-hero-vis-svg-wrap">
            <VVHeroLeg stage={stage} />
          </div>
          <div className="vv-hero-vis-caption">
            <div className="vv-hero-vis-stage">
              {stages.map((_, i) => <span key={i} className={i === stage ? 'active' : ''} />)}
            </div>
            <div className="vv-hero-vis-cap">
              {stages[stage].cap.split(/(<i>.*?<\/i>)/).map((p, i) =>
                p.startsWith('<i>') ? <i key={i}>{p.slice(3, -4)}</i> : <span key={i}>{p}</span>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────────── Sticky WhatsApp Strip ──────────────
function VVWaStrip() {
  return (
    <div className="vv-wa-strip">
      <div className="vv-wa-strip-inner">
        <div className="vv-wa-strip-icon">
          <svg viewBox="0 0 24 24" fill="#fff"><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>
        </div>
        <div className="vv-wa-strip-text">
          <b>Skip the form. Skip the wait.</b> Send a photo of your veins on WhatsApp — Dr. Bansal's team replies in under 5 minutes with personalised advice.
        </div>

        <a className="vv-wa-strip-cta" href={`https://wa.me/${VV_WA_NUMBER}?text=${encodeURIComponent("Hi, I want to ask about my varicose veins")}`}>
          Start chat
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" width="14" height="14"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
        </a>
      </div>
    </div>
  );
}

// ────────────── Symptom Checker ──────────────
const VV_CHECKER_QS = [
  {
    q: "Where do you notice the most discomfort?",
    qHi: "आपको सबसे ज़्यादा परेशानी कहाँ महसूस होती है?",
    options: [
      { v: 'calf',   l: 'Calves & lower legs' },
      { v: 'thigh',  l: 'Thighs' },
      { v: 'ankle',  l: 'Ankles & feet swelling' },
      { v: 'whole',  l: 'Whole leg, especially evenings' },
    ],
  },
  {
    q: "Which symptoms describe you best?",
    qHi: "इनमें से कौन सा लक्षण आप पर लागू होता है?",
    options: [
      { v: 'visible',  l: 'Visible bulging or twisted veins' },
      { v: 'spider',   l: 'Fine purple/red spider lines' },
      { v: 'aching',   l: 'Aching, heaviness, restless legs' },
      { v: 'skin',     l: 'Skin discoloration or ulcer' },
    ],
  },
  {
    q: "How long have you had these symptoms?",
    qHi: "ये लक्षण कितने समय से हैं?",
    options: [
      { v: 'recent',   l: 'Less than 6 months' },
      { v: 'year',     l: '6 months – 2 years' },
      { v: 'years',    l: '2 – 5 years' },
      { v: 'long',     l: 'More than 5 years' },
    ],
  },
  {
    q: "How does it affect your daily life?",
    qHi: "रोज़मर्रा के काम पर असर?",
    options: [
      { v: 'mild',     l: 'Cosmetic only — looks bother me' },
      { v: 'evening',  l: 'Tired legs by evening' },
      { v: 'work',     l: 'Affects standing/walking at work' },
      { v: 'severe',   l: 'Pain, cramps, sleep disturbance' },
    ],
  },
];

function VVChecker() {
  const [step, setStep] = React.useState(0);
  const [answers, setAnswers] = React.useState({});
  const [done, setDone] = React.useState(false);

  const select = (v) => {
    const next = { ...answers, [step]: v };
    setAnswers(next);
    setTimeout(() => {
      if (step < VV_CHECKER_QS.length - 1) setStep(step + 1);
      else setDone(true);
    }, 250);
  };

  const reset = () => { setStep(0); setAnswers({}); setDone(false); };

  // Calculate severity 0-100
  const severity = React.useMemo(() => {
    const weights = {
      calf: 60, thigh: 50, ankle: 75, whole: 80,
      visible: 75, spider: 35, aching: 60, skin: 95,
      recent: 30, year: 50, years: 70, long: 85,
      mild: 25, evening: 50, work: 75, severe: 95,
    };
    const vals = Object.values(answers).map(v => weights[v] || 0);
    return vals.length ? Math.round(vals.reduce((a,b)=>a+b,0) / vals.length) : 0;
  }, [answers]);

  const stage = severity >= 75 ? 'C4–C6' : severity >= 50 ? 'C2–C3' : 'C1';
  const stageLabel = severity >= 75 ? 'Advanced — needs evaluation now' : severity >= 50 ? 'Moderate — laser candidate' : 'Mild — early intervention helps';

  return (
    <section className="vv-section alt" id="checker">
      <div className="vv-section-inner">
        <div className="vv-section-head">
          <div className="vv-eyebrow"><span className="dot" /> Free 60-second tool</div>
          <h2 className="vv-h2">Are your veins <i>actually serious?</i></h2>
          <div className="vv-h2-hi">अपनी नसों की जाँच खुद करें — सिर्फ़ 60 सेकंड में</div>
          <p className="vv-lede">
            Most people delay treatment because they don't know which CEAP stage they're at. This free
            self-check, designed by Dr. Bansal, gives you a clinically-grounded estimate and a clear next step
            — no appointment, no awkward calls. <b>Your answers stay private.</b>
          </p>
        </div>

        <div className="vv-checker">
          <div className="vv-checker-form">
            <div className="vv-checker-progress">
              {VV_CHECKER_QS.map((_, i) => (
                <span key={i} className={done ? 'done' : i < step ? 'done' : i === step ? 'active' : ''} />
              ))}
            </div>
            {!done ? (
              <>
                <div style={{display:'flex',alignItems:'baseline',gap:10,marginBottom:6}}>
                  <span style={{fontFamily:"'JetBrains Mono', monospace",fontSize:11,letterSpacing:'0.12em',color:'var(--cyan-deep)',fontWeight:700}}>
                    Q{step + 1} / {VV_CHECKER_QS.length}
                  </span>
                </div>
                <div className="vv-checker-q">{VV_CHECKER_QS[step].q}</div>
                <div className="vv-checker-q-hi">{VV_CHECKER_QS[step].qHi}</div>
                <div className="vv-checker-options">
                  {VV_CHECKER_QS[step].options.map((opt, i) => (
                    <button
                      key={opt.v}
                      className={`vv-checker-option ${answers[step] === opt.v ? 'selected' : ''}`}
                      onClick={() => select(opt.v)}
                    >
                      <span className="vv-checker-option-pin">{String.fromCharCode(65 + i)}</span>
                      {opt.l}
                    </button>
                  ))}
                </div>
                <div className="vv-checker-actions">
                  <button className="vv-checker-back" onClick={() => step > 0 && setStep(step - 1)} disabled={step === 0}>
                    ← Back
                  </button>
                  <button className="vv-checker-next" onClick={() => answers[step] && (step < VV_CHECKER_QS.length - 1 ? setStep(step + 1) : setDone(true))}>
                    {step === VV_CHECKER_QS.length - 1 ? 'See my result' : 'Next'}
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" width="14" height="14"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                  </button>
                </div>
              </>
            ) : (
              <div style={{textAlign:'center',padding:'30px 0'}}>
                <div style={{fontSize:48,marginBottom:8}}>✓</div>
                <div style={{fontFamily:"'Cormorant Garamond', serif",fontSize:28,fontWeight:600,color:'var(--navy)',marginBottom:8}}>
                  Assessment complete
                </div>
                <div style={{fontSize:14,color:'var(--light-ink-3)',marginBottom:22}}>See your result on the right →</div>
                <button className="vv-checker-back" onClick={reset}>Retake assessment</button>
              </div>
            )}
          </div>

          <div className="vv-checker-result">
            {!done ? (
              <>
                <div style={{fontSize:11,letterSpacing:'0.18em',textTransform:'uppercase',color:'rgba(255,255,255,0.5)',fontWeight:700,marginBottom:14}}>
                  Your live assessment
                </div>
                <div className="vv-checker-result-h">Answer to see your CEAP stage estimate</div>
                <div className="vv-checker-result-hi">अपना CEAP स्टेज जानें</div>
                <div style={{marginTop:24,padding:'24px',borderRadius:16,background:'rgba(255,255,255,0.04)',border:'1px solid rgba(255,255,255,0.08)'}}>
                  <div style={{fontSize:13,color:'rgba(255,255,255,0.7)',lineHeight:1.6,marginBottom:14}}>
                    <b style={{color:'#fff'}}>What you'll get:</b>
                  </div>
                  <ul style={{listStyle:'none',padding:0,margin:0,display:'grid',gap:10,fontSize:13,color:'rgba(255,255,255,0.75)'}}>
                    <li style={{display:'flex',gap:8}}><span style={{color:'var(--cyan)'}}>✓</span> Estimated CEAP stage (C0–C6)</li>
                    <li style={{display:'flex',gap:8}}><span style={{color:'var(--cyan)'}}>✓</span> Whether laser is right for you</li>
                    <li style={{display:'flex',gap:8}}><span style={{color:'var(--cyan)'}}>✓</span> Personalised next-step advice</li>
                    <li style={{display:'flex',gap:8}}><span style={{color:'var(--cyan)'}}>✓</span> Optional WhatsApp follow-up</li>
                  </ul>
                </div>
              </>
            ) : (
              <>
                <div className="vv-checker-stage-tag">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="14" height="14"><path d="M12 9v2m0 4h.01M5 19h14a2 2 0 001.84-2.75L13.74 4a2 2 0 00-3.48 0L3.16 16.25A2 2 0 005 19z"/></svg>
                  Likely CEAP {stage} — {stageLabel}
                </div>
                <div className="vv-checker-result-h">
                  Your symptoms suggest <i>{severity >= 75 ? 'advanced venous insufficiency' : severity >= 50 ? 'moderate varicose disease' : 'early-stage venous reflux'}</i>
                </div>
                <div className="vv-checker-result-hi">
                  आपके लक्षण {severity >= 75 ? 'गंभीर' : severity >= 50 ? 'मध्यम' : 'शुरुआती'} स्थिति की ओर इशारा करते हैं
                </div>

                <div className="vv-checker-meter">
                  <div className="vv-checker-meter-bar">
                    <div className="vv-checker-meter-fill" style={{width: `${severity}%`}} />
                  </div>
                  <div className="vv-checker-meter-label">
                    <span>Mild · C0-C1</span>
                    <span>Severity {severity}/100</span>
                    <span>Severe · C5-C6</span>
                  </div>
                </div>

                <div className="vv-checker-result-msg">
                  {severity >= 75 ? 'You should see a vascular specialist within the next 2 weeks. At this stage, laser ablation can prevent skin ulceration and requires prompt treatment.' :
                   severity >= 50 ? 'You are an excellent candidate for 1470nm laser ablation. Day-care procedure, 99.2% closure rate, walk in and walk out. Most patients return to work in 24-48 hours.' :
                   'Early-stage symptoms respond beautifully to lifestyle adjustments + minimally invasive treatment. Sclerotherapy or thermal ablation can stop progression entirely.'}
                </div>

                <div className="vv-checker-result-cta">
                  <a className="vv-cta vv-cta-wa" style={{justifyContent:'center'}} href={`https://wa.me/${VV_WA_NUMBER}?text=${encodeURIComponent(`Hi Dr. Bansal, I just took the symptom check and my severity is ${severity}/100 (CEAP ${stage}). I'd like to book a consultation.`)}`}>
                    <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>
                    Send result to Dr. Bansal on WhatsApp
                  </a>
                </div>
              </>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────────── CEAP Visualizer ──────────────
const VV_CEAP_STAGES = [
  { num: 'C0', name: 'No visible signs', sub: 'Symptoms only, nothing visible',
    desc: 'You feel heaviness, restless legs, or tiredness — but examination shows no veins yet. This is the warning whisper that most people ignore.',
    descHi: 'भारीपन या थकान — पर नसें दिखाई नहीं देतीं',
    tx: 'Compression stockings + lifestyle. Catch it now, avoid surgery later.', color: '#5BD9DC',
  },
  { num: 'C1', name: 'Spider veins', sub: 'Telangiectasias — fine purple lines',
    desc: 'Tiny dilated capillaries appear as fine purple, red, or blue web-like lines, usually on thighs or behind knees. Mostly cosmetic, but a sign that deeper veins may be struggling.',
    descHi: 'पतली बैंगनी नसें — ज़्यादातर सौंदर्य की समस्या',
    tx: 'Sclerotherapy or laser cosmetics. 30-min session, no downtime.', color: '#a47bbf',
  },
  { num: 'C2', name: 'Varicose veins', sub: 'Bulging twisted ropes',
    desc: 'Visible bulging, ropy, twisted veins — most often on calves and inner thighs. The most recognisable stage. Treating them now prevents progression.',
    descHi: 'मोटी, मुड़ी हुई दिखाई देने वाली नसें',
    tx: 'Endovenous laser ablation 1470nm. 60-min day-care procedure.', color: '#7a3a5a',
  },
  { num: 'C3', name: 'Edema', sub: 'Swollen ankles & legs',
    desc: 'Persistent swelling that worsens through the day. Usually pits when pressed. Indicates the venous return system is failing — fluid is leaking into tissues.',
    descHi: 'टखनों और पैरों में लगातार सूजन',
    tx: 'Laser ablation + compression. Day-care procedure.', color: '#e87a5d',
  },
  { num: 'C4', name: 'Skin changes', sub: 'Pigmentation, eczema, hardening',
    desc: 'Brown discoloration around ankles, eczema, or thickening of skin. The body is responding to chronic venous hypertension. This stage demands attention.',
    descHi: 'त्वचा का रंग बदलना, सख़्त होना, खुजली',
    tx: 'Urgent laser closure + dermatology. Same-day evaluation.', color: '#c43e6a',
  },
  { num: 'C5', name: 'Healed ulcer', sub: 'Past ulceration, now healed',
    desc: 'You\'ve had a venous ulcer that healed — but the underlying valve disease is still active. Without intervention, recurrence is almost certain.',
    descHi: 'पहले अल्सर हुआ था, अब ठीक — लेकिन वजह अभी भी मौजूद',
    tx: 'Laser ablation prevents recurrence. Day-care procedure.', color: '#a02d52',
  },
  { num: 'C6', name: 'Active ulcer', sub: 'Open wound, urgent care',
    desc: 'An open, non-healing wound — usually near the ankle. This is severe venous insufficiency. Closing the faulty vein is the only durable cure.',
    descHi: 'खुला घाव — तुरंत इलाज की ज़रूरत',
    tx: 'Same-week laser ablation + wound care. Urgent evaluation.', color: '#7a1a3a',
  },
];

function VVCeap() {
  const [active, setActive] = React.useState(2);
  const stage = VV_CEAP_STAGES[active];

  return (
    <section className="vv-section">
      <div className="vv-section-inner">
        <div className="vv-section-head">
          <div className="vv-eyebrow"><span className="dot" /> CEAP classification</div>
          <h2 className="vv-h2">From whisper to wound — <i>seven stages of venous disease.</i></h2>
          <div className="vv-h2-hi">वेरिकोज़ नसों की 7 अवस्थाएँ — आप किस स्टेज पर हैं?</div>
          <p className="vv-lede">
            Vascular surgeons worldwide use the <b>CEAP classification</b> to grade venous disease.
            Knowing your stage tells you whether stockings are enough, or whether laser is now urgent.
            Click any stage to see what it looks like and what we'd recommend.
          </p>
        </div>

        <div className="vv-ceap">
          <div className="vv-ceap-stages">
            {VV_CEAP_STAGES.map((s, i) => (
              <div key={s.num} className={`vv-ceap-stage ${i === active ? 'active' : ''}`} onClick={() => setActive(i)}>
                <div className="vv-ceap-stage-num">{s.num}</div>
                <div>
                  <div className="vv-ceap-stage-name">{s.name}</div>
                  <div className="vv-ceap-stage-sub">{s.sub}</div>
                </div>
                <div className="vv-ceap-stage-arrow">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" width="14" height="14"><path d="M9 5l7 7-7 7"/></svg>
                </div>
              </div>
            ))}
          </div>

          <div className="vv-ceap-detail">
            <div className="vv-ceap-detail-svg">
              <VVHeroLeg stage={Math.min(4, Math.floor(active / 1.6))} />
            </div>
            <div className="vv-ceap-detail-tag">
              <span style={{width:6,height:6,borderRadius:'50%',background:'var(--cyan)'}} />
              Stage {stage.num} · {stage.name}
            </div>
            <div className="vv-ceap-detail-h">{stage.desc.split('.')[0]}.</div>
            <div className="vv-ceap-detail-hi">{stage.descHi}</div>
            <div className="vv-ceap-detail-p">{stage.desc}</div>
            <div className="vv-ceap-detail-tx">
              <b>Recommended:</b> {stage.tx}
            </div>
            <a className="vv-ceap-detail-cta" href={`https://wa.me/${VV_WA_NUMBER}?text=${encodeURIComponent(`Hi, I think I'm at CEAP ${stage.num}. Can you help?`)}`}>
              <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 about CEAP {stage.num}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  VVHero, VVWaStrip, VVChecker, VVCeap, VVHeroLeg,
  VV_WA_NUMBER, VV_PHONE, VV_DOCTOR_IMG,
});
