﻿// Flowcare Homepage v2 — Body sections with animated treatments + India-focused Why

const FC_DOCTOR_IMG = window.FC_DOCTOR_IMG || "/uploads/Dr-Bansal.png";

/* ───────── TREATMENTS — auto-cycling problem → procedure → result ───────── */

// Problem visual: deformed/varicose pattern in red
const VisVaricoseProblem = () => (
  <svg viewBox="0 0 200 200" width="200" height="200" style={{ filter: 'drop-shadow(0 8px 24px rgba(255,90,90,0.4))' }}>
    <defs>
      <radialGradient id="vp-leg" cx="0.5" cy="0.5">
        <stop offset="0" stopColor="#f4cdb8"/>
        <stop offset="1" stopColor="#d8a48a"/>
      </radialGradient>
    </defs>
    <path d="M85,20 Q75,80 80,140 Q82,170 90,180 L120,180 Q128,170 130,140 Q135,80 125,20 Z" fill="url(#vp-leg)" opacity="0.9"/>
    {/* twisted varicose vein */}
    <path d="M105,30 C95,45 115,55 100,70 C85,85 115,95 100,110 C85,125 115,135 100,150 C90,160 110,170 105,180" stroke="#7a1e3e" strokeWidth="6" fill="none" strokeLinecap="round" strokeLinejoin="round" opacity="0.85"/>
    <path d="M105,30 C95,45 115,55 100,70 C85,85 115,95 100,110 C85,125 115,135 100,150 C90,160 110,170 105,180" stroke="#c43e6a" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    {/* bulges */}
    <circle cx="98" cy="62" r="6" fill="#7a1e3e"/>
    <circle cx="106" cy="98" r="7" fill="#7a1e3e"/>
    <circle cx="98" cy="135" r="5.5" fill="#7a1e3e"/>
    {/* pain markers */}
    <text x="40" y="80" fill="#ff6b6b" fontSize="20" fontWeight="700">!</text>
    <text x="155" y="120" fill="#ff6b6b" fontSize="20" fontWeight="700">!</text>
    <circle cx="44" cy="76" r="14" fill="none" stroke="#ff6b6b" strokeWidth="2" opacity="0.5"/>
    <circle cx="159" cy="116" r="14" fill="none" stroke="#ff6b6b" strokeWidth="2" opacity="0.5"/>
  </svg>
);

const VisVaricoseProcedure = () => (
  <svg viewBox="0 0 200 200" width="200" height="200" style={{ filter: 'drop-shadow(0 8px 24px rgba(31,195,199,0.45))' }}>
    <defs>
      <radialGradient id="vpr-leg" cx="0.5" cy="0.5">
        <stop offset="0" stopColor="#f4cdb8"/>
        <stop offset="1" stopColor="#d8a48a"/>
      </radialGradient>
      <linearGradient id="laser-glow" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#1FC3C7"/>
        <stop offset="1" stopColor="#5BD9DC"/>
      </linearGradient>
    </defs>
    <path d="M85,20 Q75,80 80,140 Q82,170 90,180 L120,180 Q128,170 130,140 Q135,80 125,20 Z" fill="url(#vpr-leg)" opacity="0.9"/>
    {/* fading varicose */}
    <path d="M105,30 C95,45 115,55 100,70 C85,85 115,95 100,110 C85,125 115,135 100,150" stroke="#9c5070" strokeWidth="5" fill="none" strokeLinecap="round" opacity="0.4"/>
    {/* laser fiber going in */}
    <line x1="100" y1="160" x2="100" y2="60" stroke="#0E2F6B" strokeWidth="2" strokeDasharray="0"/>
    <circle cx="100" cy="60" r="8" fill="url(#laser-glow)" opacity="0.9">
      <animate attributeName="r" values="8;14;8" dur="1.5s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="0.9;0.4;0.9" dur="1.5s" repeatCount="indefinite"/>
    </circle>
    <circle cx="100" cy="60" r="4" fill="#fff"/>
    {/* heat rings */}
    <circle cx="100" cy="60" r="20" fill="none" stroke="#1FC3C7" strokeWidth="1.5" opacity="0.4">
      <animate attributeName="r" values="14;30;14" dur="2s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="0.6;0;0.6" dur="2s" repeatCount="indefinite"/>
    </circle>
    {/* pinhole entry */}
    <circle cx="100" cy="160" r="3" fill="#0E2F6B"/>
    <text x="115" y="165" fill="#fff" fontSize="9" fontFamily="JetBrains Mono, monospace">1.2mm pin-hole</text>
    <text x="115" y="58" fill="#1FC3C7" fontSize="10" fontWeight="700" fontFamily="JetBrains Mono, monospace">1470nm</text>
  </svg>
);

const VisVaricoseResult = () => (
  <svg viewBox="0 0 200 200" width="200" height="200" style={{ filter: 'drop-shadow(0 8px 24px rgba(31,195,199,0.4))' }}>
    <defs>
      <radialGradient id="vr-leg" cx="0.5" cy="0.5">
        <stop offset="0" stopColor="#f4cdb8"/>
        <stop offset="1" stopColor="#d8a48a"/>
      </radialGradient>
    </defs>
    <path d="M85,20 Q75,80 80,140 Q82,170 90,180 L120,180 Q128,170 130,140 Q135,80 125,20 Z" fill="url(#vr-leg)" opacity="0.95"/>
    {/* clean healthy vein */}
    <line x1="100" y1="30" x2="100" y2="178" stroke="#1FC3C7" strokeWidth="3" opacity="0.6" strokeLinecap="round"/>
    <line x1="100" y1="30" x2="100" y2="178" stroke="#5BD9DC" strokeWidth="1.5" strokeLinecap="round"/>
    {/* checkmark seal */}
    <circle cx="140" cy="50" r="22" fill="#1FC3C7"/>
    <path d="M130,50 L138,58 L150,42" stroke="#fff" strokeWidth="3.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    {/* recovery sparkles */}
    <g opacity="0.8">
      <circle cx="60" cy="60" r="2" fill="#f4b942"/>
      <circle cx="55" cy="100" r="1.5" fill="#f4b942"/>
      <circle cx="155" cy="120" r="2" fill="#f4b942"/>
      <circle cx="150" cy="160" r="1.5" fill="#f4b942"/>
    </g>
    <text x="100" y="195" textAnchor="middle" fill="#1FC3C7" fontSize="11" fontWeight="700" fontFamily="JetBrains Mono, monospace">RECOVERED · 24h</text>
  </svg>
);

// Fibroid problem/procedure/result
const VisFibroidProblem = () => (
  <svg viewBox="0 0 200 200" width="200" height="200" style={{ filter: 'drop-shadow(0 8px 24px rgba(255,90,90,0.4))' }}>
    <defs>
      <radialGradient id="fp-uterus" cx="0.5" cy="0.4">
        <stop offset="0" stopColor="#f5b8c4"/>
        <stop offset="1" stopColor="#c97a8a"/>
      </radialGradient>
    </defs>
    <path d="M70,40 Q60,30 70,20 L130,20 Q140,30 130,40 Q150,80 140,140 Q130,180 100,180 Q70,180 60,140 Q50,80 70,40 Z" fill="url(#fp-uterus)"/>
    {/* fibroids — angry red bulges */}
    <circle cx="85" cy="100" r="22" fill="#7a1e3e" opacity="0.9"/>
    <circle cx="85" cy="100" r="22" fill="none" stroke="#c43e6a" strokeWidth="2"/>
    <circle cx="125" cy="130" r="14" fill="#7a1e3e" opacity="0.85"/>
    <circle cx="125" cy="130" r="14" fill="none" stroke="#c43e6a" strokeWidth="2"/>
    <circle cx="115" cy="80" r="9" fill="#7a1e3e" opacity="0.8"/>
    {/* pain bursts */}
    <text x="35" y="110" fill="#ff6b6b" fontSize="20" fontWeight="700">!</text>
    <text x="160" y="100" fill="#ff6b6b" fontSize="20" fontWeight="700">!</text>
    <text x="100" y="200" textAnchor="middle" fill="#ff6b6b" fontSize="10" fontWeight="700" fontFamily="JetBrains Mono, monospace">3 FIBROIDS DETECTED</text>
  </svg>
);

const VisFibroidProcedure = () => (
  <svg viewBox="0 0 200 200" width="200" height="200" style={{ filter: 'drop-shadow(0 8px 24px rgba(31,195,199,0.45))' }}>
    <defs>
      <radialGradient id="fpr-uterus" cx="0.5" cy="0.4">
        <stop offset="0" stopColor="#f5b8c4"/>
        <stop offset="1" stopColor="#c97a8a"/>
      </radialGradient>
    </defs>
    <path d="M70,40 Q60,30 70,20 L130,20 Q140,30 130,40 Q150,80 140,140 Q130,180 100,180 Q70,180 60,140 Q50,80 70,40 Z" fill="url(#fpr-uterus)" opacity="0.9"/>
    {/* shrinking fibroids */}
    <circle cx="85" cy="100" r="16" fill="#9c5070" opacity="0.7"/>
    <circle cx="125" cy="130" r="10" fill="#9c5070" opacity="0.7"/>
    {/* catheter snake */}
    <path d="M30,180 Q60,160 75,130 Q85,108 85,100" stroke="#0E2F6B" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
    <circle cx="85" cy="100" r="6" fill="#1FC3C7">
      <animate attributeName="r" values="6;10;6" dur="1.4s" repeatCount="indefinite"/>
    </circle>
    {/* particles flowing */}
    <g fill="#1FC3C7" opacity="0.8">
      <circle cx="50" cy="170" r="2"/>
      <circle cx="60" cy="155" r="2"/>
      <circle cx="72" cy="135" r="2.5"/>
      <circle cx="80" cy="115" r="2.5"/>
    </g>
    <text x="100" y="200" textAnchor="middle" fill="#1FC3C7" fontSize="10" fontWeight="700" fontFamily="JetBrains Mono, monospace">PVA · BLOOD SUPPLY BLOCKED</text>
  </svg>
);

const VisFibroidResult = () => (
  <svg viewBox="0 0 200 200" width="200" height="200" style={{ filter: 'drop-shadow(0 8px 24px rgba(31,195,199,0.4))' }}>
    <defs>
      <radialGradient id="fr-uterus" cx="0.5" cy="0.4">
        <stop offset="0" stopColor="#fbcfd8"/>
        <stop offset="1" stopColor="#e89cad"/>
      </radialGradient>
    </defs>
    <path d="M70,40 Q60,30 70,20 L130,20 Q140,30 130,40 Q150,80 140,140 Q130,180 100,180 Q70,180 60,140 Q50,80 70,40 Z" fill="url(#fr-uterus)"/>
    {/* tiny remnants */}
    <circle cx="85" cy="100" r="4" fill="#e89cad" opacity="0.5"/>
    <circle cx="125" cy="130" r="3" fill="#e89cad" opacity="0.5"/>
    {/* check seal */}
    <circle cx="145" cy="55" r="22" fill="#1FC3C7"/>
    <path d="M135,55 L143,63 L155,47" stroke="#fff" strokeWidth="3.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    {/* sparkles */}
    <circle cx="55" cy="60" r="2" fill="#f4b942"/>
    <circle cx="160" cy="120" r="1.5" fill="#f4b942"/>
    <circle cx="50" cy="140" r="2" fill="#f4b942"/>
    <text x="100" y="200" textAnchor="middle" fill="#1FC3C7" fontSize="10" fontWeight="700" fontFamily="JetBrains Mono, monospace">SHRUNK 50% · UTERUS INTACT</text>
  </svg>
);

// Varicocele problem/procedure/result
const VisVaricoceleProblem = () => (
  <svg viewBox="0 0 200 200" width="200" height="200" style={{ filter: 'drop-shadow(0 8px 24px rgba(255,90,90,0.4))' }}>
    <defs>
      <radialGradient id="vcp-sac" cx="0.5" cy="0.5">
        <stop offset="0" stopColor="#f4cdb8"/>
        <stop offset="1" stopColor="#d8a48a"/>
      </radialGradient>
    </defs>
    <ellipse cx="100" cy="120" rx="55" ry="60" fill="url(#vcp-sac)"/>
    {/* tangled veins like worms */}
    <path d="M75,90 C70,100 90,105 80,115 C70,125 95,130 85,140 C75,150 95,160 90,170" stroke="#7a1e3e" strokeWidth="5" fill="none" strokeLinecap="round" opacity="0.9"/>
    <path d="M120,90 C115,100 130,105 120,115 C110,125 130,130 120,140 C115,150 130,160 125,170" stroke="#7a1e3e" strokeWidth="5" fill="none" strokeLinecap="round" opacity="0.9"/>
    <path d="M100,100 C90,110 110,120 100,130 C90,140 105,155 100,170" stroke="#c43e6a" strokeWidth="4" fill="none" strokeLinecap="round" opacity="0.8"/>
    <text x="35" y="120" fill="#ff6b6b" fontSize="20" fontWeight="700">!</text>
    <text x="155" y="120" fill="#ff6b6b" fontSize="20" fontWeight="700">!</text>
    <text x="100" y="195" textAnchor="middle" fill="#ff6b6b" fontSize="10" fontWeight="700" fontFamily="JetBrains Mono, monospace">REFLUX · GRADE III</text>
  </svg>
);

const VisVaricoceleProcedure = () => (
  <svg viewBox="0 0 200 200" width="200" height="200" style={{ filter: 'drop-shadow(0 8px 24px rgba(31,195,199,0.45))' }}>
    <defs>
      <radialGradient id="vcpr-sac" cx="0.5" cy="0.5">
        <stop offset="0" stopColor="#f4cdb8"/>
        <stop offset="1" stopColor="#d8a48a"/>
      </radialGradient>
    </defs>
    <ellipse cx="100" cy="120" rx="55" ry="60" fill="url(#vcpr-sac)" opacity="0.9"/>
    <path d="M75,90 C70,100 90,105 80,115 C70,125 95,130 85,140" stroke="#9c5070" strokeWidth="4" fill="none" strokeLinecap="round" opacity="0.5"/>
    <path d="M120,90 C115,100 130,105 120,115 C110,125 130,130 120,140" stroke="#9c5070" strokeWidth="4" fill="none" strokeLinecap="round" opacity="0.5"/>
    {/* coil */}
    <g transform="translate(100,110)">
      <path d="M-10,-10 Q0,-20 10,-10 T-5,5 Q5,10 0,18" stroke="#0E2F6B" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
      <circle cx="0" cy="0" r="14" fill="none" stroke="#1FC3C7" strokeWidth="1.5" opacity="0.5">
        <animate attributeName="r" values="14;22;14" dur="1.6s" repeatCount="indefinite"/>
      </circle>
    </g>
    {/* catheter */}
    <path d="M40,30 Q60,60 90,100" stroke="#0E2F6B" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
    <text x="100" y="195" textAnchor="middle" fill="#1FC3C7" fontSize="10" fontWeight="700" fontFamily="JetBrains Mono, monospace">COIL · DEPLOYED</text>
  </svg>
);

const VisVaricoceleResult = () => (
  <svg viewBox="0 0 200 200" width="200" height="200" style={{ filter: 'drop-shadow(0 8px 24px rgba(31,195,199,0.4))' }}>
    <defs>
      <radialGradient id="vcr-sac" cx="0.5" cy="0.5">
        <stop offset="0" stopColor="#fcdcc6"/>
        <stop offset="1" stopColor="#e0b298"/>
      </radialGradient>
    </defs>
    <ellipse cx="100" cy="120" rx="55" ry="60" fill="url(#vcr-sac)"/>
    {/* clean healthy veins */}
    <path d="M85,80 L85,170" stroke="#1FC3C7" strokeWidth="2.5" strokeLinecap="round"/>
    <path d="M115,80 L115,170" stroke="#1FC3C7" strokeWidth="2.5" strokeLinecap="round"/>
    <path d="M100,90 L100,170" stroke="#5BD9DC" strokeWidth="2" strokeLinecap="round"/>
    {/* check */}
    <circle cx="140" cy="60" r="20" fill="#1FC3C7"/>
    <path d="M131,60 L138,67 L149,52" stroke="#fff" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    <text x="100" y="195" textAnchor="middle" fill="#1FC3C7" fontSize="10" fontWeight="700" fontFamily="JetBrains Mono, monospace">FERTILITY · RESTORED</text>
  </svg>
);

const TREATMENTS_DATA = [
  {
    title: 'Varicose Veins Laser',
    hi: 'वैरिकोज़ वेन्स',
    desc: 'A 1.2mm laser fiber enters the diseased vein and seals it from within. Blood reroutes naturally to healthy veins.',
    specs: [
      ['Procedure', 'EVLA · 1470nm'],
      ['Duration', '~45 minutes'],
      ['Recovery', 'Walk in 24h'],
      ['Success', '98.4%'],
    ],
    frames: [
      { label: 'Twisted, painful veins', vis: VisVaricoseProblem },
      { label: '1470nm laser seals from inside', vis: VisVaricoseProcedure },
      { label: 'Healthy veins · invisible scar', vis: VisVaricoseResult },
    ],
  },
  {
    title: 'Uterine Fibroid Embolization',
    hi: 'बच्चेदानी की गांठ',
    desc: 'A catheter blocks the artery feeding the fibroid. The fibroid shrinks, the uterus stays intact — no hysterectomy.',
    specs: [
      ['Procedure', 'UAE · Microspheres'],
      ['Duration', '~60 minutes'],
      ['Shrinkage', '40–60% in 6 mo'],
      ['Fertility', 'Preserved'],
    ],
    frames: [
      { label: 'Heavy bleeding, pain, pressure', vis: VisFibroidProblem },
      { label: 'PVA particles cut blood supply', vis: VisFibroidProcedure },
      { label: 'Fibroid shrinks · uterus intact', vis: VisFibroidResult },
    ],
  },
  {
    title: 'Varicocele Embolization',
    hi: 'वैरिकोसील',
    desc: 'A pin-hole entry into pelvic veins guides precise coil placement. Reflux stops, fertility and comfort are restored.',
    specs: [
      ['Procedure', 'Coil Embolization'],
      ['Anesthesia', 'Local · No GA'],
      ['Discharge', 'Same day'],
      ['Pain Score', '< 2 / 10'],
    ],
    frames: [
      { label: 'Tangled veins · grade III reflux', vis: VisVaricoceleProblem },
      { label: 'Coil deployed via pin-hole', vis: VisVaricoceleProcedure },
      { label: 'Healthy flow · fertility back', vis: VisVaricoceleResult },
    ],
  },
];

const STAGE_LABELS = ['01 PROBLEM', '02 PROCEDURE', '03 RESULT'];

function FCTreatmentCard({ data }) {
  const [stage, setStage] = React.useState(0);
  const [paused, setPaused] = React.useState(false);

  React.useEffect(() => {
    if (paused) return;
    const t = setTimeout(() => setStage((s) => (s + 1) % 3), 5000);
    return () => clearTimeout(t);
  }, [stage, paused]);

  return (
    <div className="fc-treatment" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <div className="fc-treatment-vis">
        <div className="fc-treatment-tag"><span className="pulse" /> Live Animation</div>
        {data.frames.map((f, i) => (
          <div key={i} className={`fc-treatment-frame ${stage === i ? 'active' : ''}`}>
            <f.vis />
            <div className="fc-treatment-frame-label">{f.label}</div>
          </div>
        ))}
        <div className="fc-treatment-stages">
          {STAGE_LABELS.map((l, i) => (
            <div
              key={i}
              className={`fc-stage-pill ${stage === i ? 'active' : ''}`}
              onClick={() => { setStage(i); setPaused(true); setTimeout(() => setPaused(false), 100); }}
              style={{ cursor: 'pointer' }}
            >
              {l}
            </div>
          ))}
        </div>
      </div>
      <div className="fc-treatment-body">
        <div className="fc-treatment-h">{data.title}</div>
        <div className="fc-treatment-hi">{data.hi}</div>
        <p className="fc-treatment-p">{data.desc}</p>
        <div className="fc-treatment-specs">
          {data.specs.map(([k, v]) => (
            <div key={k}><span>{k}</span><b>{v}</b></div>
          ))}
        </div>
        <a className="fc-treatment-cta">
          Learn more
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
        </a>
      </div>
    </div>
  );
}

function FCTreatments() {
  return (
    <section className="fc-section" id="treatments">
      <div className="fc-section-head">
        <div className="fc-eyebrow"><span className="fc-dot" /> Flagship Procedures</div>
        <h2 className="fc-h2">See it happen.<br/><i>Problem. Procedure. Result.</i></h2>
        <div className="fc-h2-hi">समस्या से समाधान तक</div>
        <p className="fc-lede">
          Watch each procedure unfold in three stages — what's wrong, how we fix it, and how you heal. Each animation cycles automatically; click any stage to focus.
        </p>
      </div>
      <div className="fc-treatments">
        {TREATMENTS_DATA.map((t, i) => (
          <FCTreatmentCard key={i} data={t} />
        ))}
      </div>
    </section>
  );
}

/* ───────── CONDITIONS — interactive body map ───────── */

// x/y are % positions over the body silhouette (0-100)
const CONDITIONS = [
  { en: 'Chronic Headache', hi: 'सिरदर्द', x: 50, y: 6, region: 'Head',
    ic: 'M12 2a8 8 0 0 1 8 8c0 5-4 8-8 8s-8-3-8-8a8 8 0 0 1 8-8zM8 11l2 2M16 11l-2 2',
    desc: 'Recurring tension or migraine pain — diagnosed with neuro evaluation, imaging where needed, and a stepped care plan.',
    chips: ['Neuro consult', 'MRI if needed', 'Lifestyle plan'] },
  { en: 'Face Pain', hi: 'चेहरे का दर्द', x: 50, y: 11, region: 'Head',
    ic: 'M12 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zM9 9h.01M15 9h.01M9 14s1 2 3 2 3-2 3-2',
    desc: 'Trigeminal neuralgia and dental-origin facial pain — interventional pain management with image guidance.',
    chips: ['Nerve block', 'Day-care', 'No incision'] },
  { en: 'Cervical Pain', hi: 'गर्दन का दर्द', x: 50, y: 16, region: 'Neck',
    ic: 'M8 3v8c0 4 8 4 8 0V3M6 21h12',
    desc: 'Neck pain radiating to shoulder or arm. Treated with physiotherapy, pain interventions, and surgery only if essential.',
    chips: ['Physio first', 'Pain mgmt', 'Day-care option'] },
  { en: 'Heart Concerns', hi: 'दिल की समस्या', x: 46, y: 26, region: 'Chest',
    ic: 'M12 21s-7-4.5-9-9c-1.5-3.5 1-7 4-7 2 0 3 1 5 3 2-2 3-3 5-3 3 0 5.5 3.5 4 7-2 4.5-9 9-9 9z',
    desc: 'Cardiac evaluation, ECG, 2D-echo and stress testing — onsite cardiology with same-day reports.',
    chips: ['ECG + Echo', 'Same-day report', 'Cashless'] },
  { en: 'Fatty Liver', hi: 'फैटी लिवर', x: 56, y: 35, region: 'Abdomen',
    ic: 'M4 8c4-4 12-4 16 0v8c-4 4-12 4-16 0z',
    desc: 'Reversible early-stage liver disease. Tracked with FibroScan, lipid panels and a structured 12-week diet plan.',
    chips: ['FibroScan', 'Diet plan', 'Reversible'] },
  { en: 'Heavy Bleeding', hi: 'अत्यधिक रक्तस्राव', x: 50, y: 42, region: 'Abdomen',
    ic: 'M12 3l5 6c2 3 2 7 0 9a5 5 0 0 1-10 0c-2-2-2-6 0-9z',
    desc: 'Menorrhagia and fibroid-related bleeding. Uterine artery embolisation or hysteroscopy — uterus-sparing where possible.',
    chips: ['Uterus-sparing', 'No open surgery', '1-day stay'] },
  { en: 'Painful Periods', hi: 'मासिक धर्म दर्द', x: 50, y: 46, region: 'Pelvis',
    ic: 'M12 2v4M5 5l3 3M19 5l-3 3M3 12h4M17 12h4M12 9a4 4 0 1 0 0 8 4 4 0 0 0 0-8z',
    desc: 'Endometriosis, adenomyosis and PCOS care. Hormonal, dietary and minimally invasive options under one roof.',
    chips: ['Hormone panel', 'Diet plan', 'MIS surgery'] },
  { en: 'Prostate Issues', hi: 'प्रोस्टेट', x: 50, y: 50, region: 'Pelvis',
    ic: 'M12 3a6 6 0 0 1 6 6v2c0 4-3 7-6 7s-6-3-6-7V9a6 6 0 0 1 6-6z',
    desc: 'BPH and prostate-related urinary symptoms — PSA tracking, uroflow and PAE for non-surgical relief.',
    chips: ['PAE', 'No catheter', 'Day-care'] },
  { en: 'Scrotal Swelling', hi: 'अंडकोष सूजन', x: 50, y: 54, region: 'Pelvis',
    ic: 'M12 4a4 4 0 0 1 4 4v3a4 4 0 0 1-8 0V8a4 4 0 0 1 4-4z',
    desc: 'Varicocele and hydrocele treated with embolisation — pinhole, no scar, back to work in 48 hours.',
    chips: ['Pinhole', 'No stitches', '48hr recovery'] },
  { en: 'Back Pain', hi: 'कमर दर्द', x: 50, y: 38, region: 'Spine',
    ic: 'M12 3v18M9 7l3-3 3 3M9 17l3 3 3-3',
    desc: 'Slip disc, sciatica and chronic lower back pain. Image-guided injections and rehab — surgery as last resort.',
    chips: ['Image-guided', 'Same-day relief', 'Rehab plan'] },
  { en: 'Joint Pain', hi: 'जोड़ों का दर्द', x: 32, y: 32, region: 'Limbs',
    ic: 'M12 2v8M12 14v8M9 11l-7 1M22 12l-8 0',
    desc: 'Knee, shoulder and hip pain. Genicular nerve blocks, PRP and joint injections to delay or avoid replacement.',
    chips: ['PRP', 'Nerve block', 'Avoid surgery'] },
  { en: 'Varicose Veins', hi: 'वैरिकोज़ नस', x: 42, y: 78, region: 'Legs',
    ic: 'M12 3v18M5 9c2 0 3 3 7 3s5-3 7-3M5 15c2 0 3 3 7 3s5-3 7-3',
    desc: 'Bulging, painful leg veins — treated with laser ablation in under 60 minutes. Walk in, walk out, no scars.',
    chips: ['Laser ablation', '60 min', 'No scar'] },
  { en: 'Leg Swelling', hi: 'पैर की सूजन', x: 58, y: 80, region: 'Legs',
    ic: 'M9 3v6c0 2 1 3 1 5s-2 4-2 6 1 2 4 2 4-2 4-2',
    desc: 'Lymphedema, DVT and venous insufficiency. Doppler, compression, and minimally invasive vein procedures.',
    chips: ['Doppler study', 'Compression', 'MIS option'] },
  { en: 'Diabetic Foot', hi: 'डायबिटिक फुट', x: 42, y: 92, region: 'Feet',
    ic: 'M5 12c4-2 8 0 14-4M5 16c4-2 8 0 14-4M9 18h2M14 18h2',
    desc: 'Wound healing, angioplasty for limb salvage and offloading footwear — multi-disciplinary diabetic foot clinic.',
    chips: ['Limb salvage', 'Wound care', 'Custom footwear'] },
  { en: 'Leg Ulcer', hi: 'पैर का घाव', x: 58, y: 92, region: 'Feet',
    ic: 'M5 5l14 14M5 19l14-14M9 12h6',
    desc: 'Non-healing ulcers from venous or arterial disease. Advanced dressings, NPWT and vascular intervention.',
    chips: ['NPWT', 'Vascular', 'Healing in weeks'] },
];

function FCConditions() {
  const [active, setActive] = React.useState(0);
  const c = CONDITIONS[active];

  // auto-rotate
  React.useEffect(() => {
    const t = setInterval(() => setActive(a => (a + 1) % CONDITIONS.length), 4500);
    return () => clearInterval(t);
  }, []);

  return (
    <section className="fc-section" id="conditions">
      <div className="fc-section-head">
        <div className="fc-eyebrow"><span className="fc-dot" /> What we treat</div>
        <h2 className="fc-h2">Common concerns,<br/><i>quietly solved.</i></h2>
        <div className="fc-h2-hi">रोज़मर्रा की तकलीफ़ों का सटीक इलाज</div>
        <p className="fc-lede">
          Tap any pin on the body to learn how we treat it — every condition links to a clinical page with stories from real patients.
        </p>
      </div>

      <div className="fc-bodymap-wrap">
        {/* LEFT — body map */}
        <div className="fc-bodymap">
          <div className="fc-bodymap-eyebrow"><span className="pulse"></span> Interactive · Tap a pin</div>

          {/* Body silhouette SVG */}
          <svg className="fc-bodymap-svg" viewBox="0 0 200 380" fill="none" preserveAspectRatio="xMidYMid meet">
            <defs>
              <linearGradient id="bodyGrad" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="#0E2F6B" stopOpacity="0.08"/>
                <stop offset="100%" stopColor="#1FC3C7" stopOpacity="0.12"/>
              </linearGradient>
              <linearGradient id="bodyOutline" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="#0E2F6B" stopOpacity="0.45"/>
                <stop offset="100%" stopColor="#0E2F6B" stopOpacity="0.25"/>
              </linearGradient>
            </defs>
            {/* Stylised front-facing human silhouette */}
            <path
              d="M100 14 c-12 0 -20 9 -20 20 c0 8 4 14 8 18 c-2 2 -4 5 -6 9 c-3 6 -10 8 -18 12 c-6 3 -10 7 -10 14 c0 10 4 26 7 38 c2 8 3 14 3 22 l-2 30 c-1 10 -3 18 -5 26 c-3 12 -5 24 -6 36 c-1 10 -1 22 0 32 c1 8 3 18 6 28 c2 8 4 16 4 24 c0 8 4 12 11 12 c7 0 10 -4 10 -12 c0 -10 -1 -22 -2 -34 c-1 -10 -1 -22 0 -32 c1 -10 3 -22 5 -32 l3 -18 l4 18 c2 10 4 22 5 32 c1 10 1 22 0 32 c-1 12 -2 24 -2 34 c0 8 3 12 10 12 c7 0 11 -4 11 -12 c0 -8 2 -16 4 -24 c3 -10 5 -20 6 -28 c1 -10 1 -22 0 -32 c-1 -12 -3 -24 -6 -36 c-2 -8 -4 -16 -5 -26 l-2 -30 c0 -8 1 -14 3 -22 c3 -12 7 -28 7 -38 c0 -7 -4 -11 -10 -14 c-8 -4 -15 -6 -18 -12 c-2 -4 -4 -7 -6 -9 c4 -4 8 -10 8 -18 c0 -11 -8 -20 -20 -20 z"
              fill="url(#bodyGrad)" stroke="url(#bodyOutline)" strokeWidth="1.2" strokeLinejoin="round"
            />
            {/* center spine line */}
            <line x1="100" y1="58" x2="100" y2="180" stroke="#0E2F6B" strokeOpacity="0.15" strokeWidth="0.8" strokeDasharray="2 3"/>

            {/* Connector line from active pin to side */}
            <line
              x1={c.x * 2} y1={c.y * 3.8}
              x2={c.x > 50 ? 200 : 0} y2={c.y * 3.8}
              stroke="#F4B942" strokeWidth="0.8" strokeDasharray="2 3" opacity="0.6"
            />
          </svg>

          {/* Pins overlay */}
          {CONDITIONS.map((cond, i) => (
            <button
              key={i}
              className={`fc-pin ${active === i ? 'is-active' : ''}`}
              style={{ left: `${cond.x}%`, top: `${cond.y + 8}%` }}
              onClick={() => setActive(i)}
              aria-label={cond.en}
            >
              <span className="fc-pin-ring"></span>
              <span className="fc-pin-dot">{String(i + 1).padStart(2, '0')}</span>
              <span className="fc-pin-tooltip">{cond.en}</span>
            </button>
          ))}

          <div className="fc-bodymap-legend">
            <div className="fc-bodymap-legend-item">
              <span className="fc-bodymap-legend-dot" style={{ background: '#1FC3C7' }}></span>
              <span><b>{CONDITIONS.length}</b> conditions</span>
            </div>
            <div className="fc-bodymap-legend-item">
              <span className="fc-bodymap-legend-dot" style={{ background: '#F4B942' }}></span>
              <span>Currently viewing <b>{c.region}</b></span>
            </div>
            <div className="fc-bodymap-legend-item">
              <span><b>92%</b> day-care</span>
            </div>
          </div>
        </div>

        {/* RIGHT — detail card + chip strip */}
        <div className="fc-cond-detail">
          <div className="fc-cond-hero" key={active}>
            <div className="fc-cond-hero-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
                <path d={c.ic}/>
              </svg>
            </div>
            <div className="fc-cond-hero-eyebrow">{String(active + 1).padStart(2, '0')} · {c.region}</div>
            <div className="fc-cond-hero-name">{c.en}</div>
            <div className="fc-cond-hero-hi">{c.hi}</div>
            <p className="fc-cond-hero-desc">{c.desc}</p>
            <div className="fc-cond-hero-meta">
              {c.chips.map((chip, i) => <span key={i} className="fc-cond-hero-chip">{chip}</span>)}
            </div>
            <button className="fc-cond-hero-cta">
              Learn more
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
            </button>
          </div>

          <div className="fc-cond-strip">
            {CONDITIONS.map((cond, i) => (
              <div
                key={i}
                className={`fc-cond-chip ${active === i ? 'is-active' : ''}`}
                onClick={() => setActive(i)}
              >
                <span className="fc-cond-chip-pin">{String(i + 1).padStart(2, '0')}</span>
                <span>{cond.en}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────── DIAGNOSTICS — vibrant with icons ───────── */

const TESTS = [
  { name: 'Color Doppler', ic: 'M3 12c2-3 5-3 7 0s5 3 7 0M3 18c2-3 5-3 7 0s5 3 7 0' },
  { name: '2D Echo', ic: 'M3 12a9 9 0 0 1 18 0M6 12a6 6 0 0 1 12 0M9 12a3 3 0 0 1 6 0' },
  { name: 'Penile Doppler', ic: 'M12 2v6M9 6h6M5 14h14l-2 7H7z' },
  { name: 'Angiography', ic: 'M3 12c4-2 6 2 10 0s6-4 8-2M3 18c4-2 6 2 10 0' },
  { name: 'Ultrasound', ic: 'M5 12a7 7 0 0 1 14 0M8 12a4 4 0 0 1 8 0M11 12a1 1 0 0 1 2 0M19 19l-3-3' },
  { name: 'Mammography', ic: 'M5 8a7 7 0 0 1 14 0v8H5z M9 12a3 3 0 0 1 6 0' },
  { name: 'X-Ray', ic: 'M5 5h14v14H5z M9 9l6 6M15 9l-6 6' },
  { name: 'CBC', ic: 'M12 2L4 7v10l8 5 8-5V7z' },
  { name: 'Lipid Profile', ic: 'M12 4l4 8h-8z M12 12v8M8 20h8' },
  { name: 'Thyroid Profile', ic: 'M12 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM8 11l-2 10h12l-2-10' },
  { name: 'HbA1c', ic: 'M5 12a7 7 0 0 1 14 0c0 5-7 9-7 9s-7-4-7-9z' },
  { name: 'KFT', ic: 'M9 3a4 5 0 0 0 0 10 4 5 0 0 0 0-10zM15 11a4 5 0 0 0 0 10 4 5 0 0 0 0-10z' },
  { name: 'LFT', ic: 'M5 7c4-3 10-3 14 0v10c-4 3-10 3-14 0z' },
  { name: 'PSA', ic: 'M12 3v6M9 6h6M6 13h12l-1 8H7z' },
  { name: 'Testosterone', ic: 'M14 2l4 4-3 3-4-4zM4 12l8-8M4 16l4 4M4 20l3-3' },
  { name: 'Vit D & B12', ic: 'M5 12a7 7 0 0 1 14 0M12 5v14' },
  { name: 'Double Marker', ic: 'M12 3a9 9 0 0 1 9 9c0 6-9 9-9 9s-9-3-9-9a9 9 0 0 1 9-9z' },
  { name: 'NT Scan', ic: 'M12 3a4 4 0 0 1 4 4v3c0 2 2 3 2 6s-3 4-6 4-6-1-6-4 2-4 2-6V7a4 4 0 0 1 4-4z' },
  { name: 'HIV Test', ic: 'M12 3l8 4v6c0 4-4 7-8 8-4-1-8-4-8-8V7z M9 11l2 2 4-4' },
  { name: 'FNAC', ic: 'M14 4l4 4-10 10H4v-4z M16 6l2-2' },
  { name: 'Biopsy', ic: 'M5 5h14v6H5z M5 13h6v6H5z M13 13h6v6h-6z' },
];

function FCServices() {
  return (
    <section className="fc-section" id="services">
      <div className="fc-section-head">
        <div className="fc-eyebrow"><span className="fc-dot" /> In-house Diagnostics</div>
        <h2 className="fc-h2">A full pathology &amp; <i>imaging suite</i> under one roof.</h2>
        <div className="fc-h2-hi">सारी जाँच — एक ही छत के नीचे</div>
        <p className="fc-lede">
          Searching for a reliable diagnostics, interventional, and pain clinic in Jaipur? Flowcare combines advanced 1470nm laser technology with personalised care — and runs over 200 tests in-house, often with same-day reports.
        </p>
      </div>
      <div className="fc-services-grid">
        {TESTS.map((t, i) => (
          <div key={i} className="fc-test">
            <div className="fc-test-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d={t.ic} /></svg>
            </div>
            {t.name}
          </div>
        ))}
      </div>
    </section>
  );
}

/* ───────── WHY FLOWCARE — India-focused ───────── */

const WHY_CARDS = [
  {
    icon: 'M12 2L4 7v6c0 5 4 9 8 9s8-4 8-9V7zM9 12l2 2 4-4',
    title: 'No Cuts, No Stitches',
    hi: 'बिना चीरा, बिना टांका',
    desc: 'Every procedure is image-guided through a 1.2mm pin-hole — no general anaesthesia, no scars, no scary recovery. You walk in and walk out the same day.',
    statK: '1.2mm',
    statV: 'PIN-HOLE',
  },
  {
    icon: 'M3 12c2-4 4-4 6 0s4 4 6 0 4-4 6 0M3 17c2-4 4-4 6 0s4 4 6 0 4-4 6 0',
    title: '1470nm Radial Laser',
    hi: '1470nm रेडियल लेज़र',
    desc: 'Among the first centres in North India to install the 1470nm Biolitec system — plus EVLA, RFA, and VenaSeal glue. Sealed veins, less heat, FDA / CE / CDSCO approved.',
    statK: '4',
    statV: 'LASER MODALITIES',
  },
  {
    icon: 'M12 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM6 22v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2M2 9l3 3-3 3M22 9l-3 3 3 3',
    title: 'Multi-Disciplinary Pain Mastery',
    hi: 'हर तरह के दर्द का इलाज',
    desc: 'A single non-surgical pain clinic covering 15+ chronic pain conditions — face pain, headache, cervical, back, joints, leg ulcers, abdominal pain — all under one team.',
    statK: '15+',
    statV: 'PAIN CONDITIONS',
  },
  {
    icon: 'M3 3h7v7H3z M14 3h7v7h-7z M3 14h7v7H3z M14 14h7v7h-7z M10 7h4M7 10v4M17 10v4M10 17h4',
    title: 'Diagnose &amp; Treat Under One Roof',
    hi: 'जाँच और इलाज — एक ही छत के नीचे',
    desc: 'Color Doppler, 2D Echo, Penile Doppler, Angiography, Mammography, FNAC, Biopsy and 200+ pathology tests on-site. No running between labs — same-day reports, then straight to treatment.',
    statK: '200+',
    statV: 'TESTS · IN-HOUSE',
  },
  {
    icon: 'M3 21V8l9-5 9 5v13M9 21v-7h6v7M3 21h18M7 11h.01M11 11h.01M15 11h.01',
    title: 'Multi-Hospital Network',
    hi: 'सबसे बड़े अस्पतालों से जुड़ाव',
    desc: 'Empanelled and operating across Jaipur\'s top centres — Narayana, Manipal, Eternal, Mahatma Gandhi, Fortis, Apollo Spectra, Bhandari, Ridhi-Sidhi. You pick the hospital that suits you.',
    statK: '8',
    statV: 'PARTNER HOSPITALS',
  },
  {
    icon: 'M12 2a4 4 0 0 1 4 4v2H8V6a4 4 0 0 1 4-4zM5 11h14l-1 10H6z',
    title: 'Family-Friendly OT',
    hi: 'परिवार के लिए जगह',
    desc: 'Spouse or attendant stays with you in the procedure room — pre, during, and after. We understand Indian families want to be together when it matters.',
    statK: '100%',
    statV: 'COMFORT',
  },
];

function FCWhy() {
  return (
    <section className="fc-why" id="why">
      <div className="fc-why-inner">
        <div className="fc-section-head">
          <div className="fc-eyebrow"><span className="fc-dot" /> Why Flowcare</div>
          <h2 className="fc-h2">Built for <i>Indian patients,</i><br/>by an Indian doctor.</h2>
          <div className="fc-h2-hi">भारतीय परिवारों के लिए — भारत में बना</div>
          <p className="fc-lede">
            World-class technology, but priced, paperworked, and explained for India. From cashless insurance to family-friendly OT rules — every detail is built for how Indian families actually receive care.
          </p>
        </div>

        <div className="fc-why-grid">
          {WHY_CARDS.map((c, i) => (
            <div key={i} className="fc-why-card">
              <div className="fc-why-card-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d={c.icon}/></svg>
              </div>
              <div className="fc-why-card-h">{c.title}</div>
              <div className="fc-why-card-hi">{c.hi}</div>
              <div className="fc-why-card-p">{c.desc}</div>
              <div className="fc-why-card-stat">
                <div className="fc-why-card-stat-k">{c.statK}</div>
                <div className="fc-why-card-stat-v">{c.statV}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ───────── DOCTOR PROFILE ───────── */

function FCDoctor() {
  return (
    <section className="fc-doctor-section" id="about">
      <div className="fc-doctor-grid">
        <div className="fc-doctor-photo-wrap">
          <img src={FC_DOCTOR_IMG} alt="Dr. Rajendra Bansal — Interventional Radiologist, Jaipur" />
          <div className="fc-doctor-badge">
            <div>
              <div className="fc-doctor-badge-name">Dr. Rajendra Bansal</div>
              <div className="fc-doctor-badge-cred">MBBS · DMRD · DNB · FVIR</div>
            </div>
            <div className="fc-doctor-badge-rating">
              <div className="fc-doctor-badge-stars">★ 4.9</div>
              <div className="fc-doctor-badge-rating-v">1,271 reviews</div>
            </div>
          </div>
        </div>

        <div>
          <div className="fc-eyebrow"><span className="fc-dot" /> Meet your doctor</div>
          <h2 className="fc-h2">A radiologist's hands.<br/><i>A humanist's heart.</i></h2>
          <div className="fc-h2-hi">रेडियोलॉजिस्ट का हुनर। मानवीय संवेदना।</div>
          <p className="fc-lede">
            Dr. Bansal trained at SMS Medical College, Sir Ganga Ram Hospital, and Medanta Medicity before founding Flowcare in 2018 to bring world-class interventional radiology to Rajasthan. He has personally performed over 10,000 image-guided procedures and presented at AIIMS, RSNA, and CIRSE.
          </p>

          <div className="fc-doctor-creds">
            <div className="fc-doctor-cred"><span>MBBS</span><b>SMS Medical College, Jaipur</b></div>
            <div className="fc-doctor-cred"><span>DMRD</span><b>SMS Medical College — Diploma in Medical Radio-Diagnosis</b></div>
            <div className="fc-doctor-cred"><span>DNB</span><b>St. Stephen's Hospital, New Delhi</b></div>
            <div className="fc-doctor-cred"><span>FVIR</span><b>Sir Ganga Ram Hospital — Vascular &amp; Interventional Radiology</b></div>
            <div className="fc-doctor-cred"><span>HOD</span><b>Interventional Radiology · Narayana Multispeciality, Jaipur</b></div>
            <div className="fc-doctor-cred"><span>Member</span><b>IRIA · ISVIR · CIRSE · RSNA</b></div>
          </div>

          <div className="fc-doctor-pubs">
            <div className="fc-doctor-pub">→ 24 publications</div>
            <div className="fc-doctor-pub">→ Speaker · CIRSE 2024</div>
            <div className="fc-doctor-pub">→ Best IR Award · IRIA 2023</div>
            <div className="fc-doctor-pub">→ Ex-Faculty · AIIMS Jodhpur</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────── TESTIMONIALS ───────── */

function FCTestimonials() {
  return (
    <div className="fc-testimonials">
      <section className="fc-section" id="results">
        <div className="fc-section-head">
          <div className="fc-google-bar">
            <svg viewBox="0 0 24 24"><path fill="#4285F4" d="M22 12c0-.7-.1-1.3-.2-2H12v3.7h5.6c-.2 1.3-1 2.4-2 3.1v2.6h3.3c2-1.8 3.1-4.4 3.1-7.4z"/><path fill="#34A853" d="M12 22c2.7 0 5-.9 6.6-2.4l-3.3-2.6c-.9.6-2 1-3.3 1-2.6 0-4.7-1.7-5.5-4H3.2v2.5C4.8 19.9 8.1 22 12 22z"/><path fill="#FBBC05" d="M6.5 14c-.2-.6-.3-1.3-.3-2s.1-1.4.3-2V7.5H3.2C2.4 8.9 2 10.4 2 12s.4 3.1 1.2 4.5z"/><path fill="#EA4335" d="M12 6.4c1.5 0 2.8.5 3.8 1.5l2.9-2.9C16.9 3.5 14.7 2.5 12 2.5 8.1 2.5 4.8 4.7 3.2 7.9L6.5 10c.8-2.3 2.9-3.6 5.5-3.6z"/></svg>
            <b>4.9</b><span>· 1,271 Google reviews</span>
            <span style={{ color: 'var(--gold, #f4b942)' }}>★★★★★</span>
          </div>
          <div className="fc-eyebrow"><span className="fc-dot" /> Patient stories</div>
          <h2 className="fc-h2">Real outcomes,<br/><i>told in their words.</i></h2>
          <div className="fc-h2-hi">मरीज़ों की ज़बानी, उनकी कहानी</div>
        </div>

        <div className="fc-test-grid">
          <div className="fc-test-card fc-test-card--big">
            <div className="fc-test-quote-mark">"</div>
            <p className="fc-test-text">
              I lived with varicose veins and constant heaviness for 8 years. Three surgeons recommended open surgery. Dr. Bansal did the laser procedure in 40 minutes — I walked home the same evening. Three months later, my legs feel like they did at 25.
            </p>
            <div className="fc-test-stars">★★★★★</div>
            <div className="fc-test-attr">
              <div className="fc-test-avatar">SM</div>
              <div>
                <div className="fc-test-name">Sunita Mehra, 47</div>
                <div className="fc-test-meta">Varicose Veins · Jodhpur · 2 months ago</div>
              </div>
            </div>
          </div>

          <div className="fc-test-card">
            <div className="fc-test-quote-mark">"</div>
            <p className="fc-test-text" style={{ fontSize: 18 }}>
              Heavy bleeding for years. After UFE, no hysterectomy needed. I'm back to work and gym in two weeks.
            </p>
            <div className="fc-test-stars">★★★★★</div>
            <div className="fc-test-attr">
              <div className="fc-test-avatar" style={{ background: 'linear-gradient(135deg, #c98a9b, #e89cad)' }}>RK</div>
              <div>
                <div className="fc-test-name">Ritu Khandelwal, 38</div>
                <div className="fc-test-meta">Fibroid · Jaipur</div>
              </div>
            </div>
          </div>

          <div className="fc-test-card">
            <div className="fc-test-quote-mark">"</div>
            <p className="fc-test-text" style={{ fontSize: 18 }}>
              Trigeminal neuralgia took my smile away. RFA gave it back — with no medication, no scars.
            </p>
            <div className="fc-test-stars">★★★★★</div>
            <div className="fc-test-attr">
              <div className="fc-test-avatar" style={{ background: 'linear-gradient(135deg, #8b7bb5, #c98a9b)' }}>VA</div>
              <div>
                <div className="fc-test-name">Vikram Agarwal, 54</div>
                <div className="fc-test-meta">Trigeminal Neuralgia · Ajmer</div>
              </div>
            </div>
          </div>

          <div className="fc-test-card">
            <div className="fc-test-quote-mark">"</div>
            <p className="fc-test-text" style={{ fontSize: 18 }}>
              Painless varicocele embolization — back to work in 2 days. My fertility report improved within 4 months.
            </p>
            <div className="fc-test-stars">★★★★★</div>
            <div className="fc-test-attr">
              <div className="fc-test-avatar" style={{ background: 'linear-gradient(135deg, #1FC3C7, #5BD9DC)' }}>AS</div>
              <div>
                <div className="fc-test-name">Arjun Singh, 31</div>
                <div className="fc-test-meta">Varicocele · Udaipur</div>
              </div>
            </div>
          </div>

          <div className="fc-test-card">
            <div className="fc-test-quote-mark">"</div>
            <p className="fc-test-text" style={{ fontSize: 18 }}>
              I was scared of surgery for my mother's DVT. Dr. Bansal's team treated her with thrombolysis — she's walking now.
            </p>
            <div className="fc-test-stars">★★★★★</div>
            <div className="fc-test-attr">
              <div className="fc-test-avatar" style={{ background: 'linear-gradient(135deg, #f4b942, #f2c5a8)' }}>NS</div>
              <div>
                <div className="fc-test-name">Neha Sharma, 32</div>
                <div className="fc-test-meta">DVT · for her mother · Kota</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ───────── HOSPITALS ───────── */

function FCHospitals() {
  const items = [
    ['Narayana', 'Multispeciality · Jaipur'],
    ['Manipal Hospital', 'Jaipur'],
    ['Eternal', 'Heart Care'],
    ['Mahatma Gandhi', 'Hospital'],
    ['Fortis', 'Diagnostics'],
    ['Apollo', 'Spectra'],
    ['Bhandari', 'Hospital'],
    ['Ridhi-Sidhi', 'Hospital'],
  ];
  const all = [...items, ...items];
  return (
    <div className="fc-hospitals">
      <div className="fc-hospitals-eyebrow">Associated &amp; Empanelled Hospitals</div>
      <div className="fc-marquee">
        <div className="fc-marquee-track">
          {all.map(([n, s], i) => (
            <div key={i} className="fc-hospital-logo">{n}<small>{s}</small></div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ───────── FAQ ───────── */

const FAQS = [
  ['Is laser treatment for varicose veins permanent?', 'Yes. The treated vein is permanently sealed and absorbed by the body. Recurrence rate at our centre is under 2% over 5 years — well below the 20–25% seen with traditional vein stripping.'],
  ['How soon can I return to work after the procedure?', 'Most patients return to a desk job the next morning. We advise avoiding heavy lifting and long flights for 5–7 days. You will be walking within an hour of the procedure.'],
  ['Will my insurance cover the treatment?', 'Yes — varicose veins, fibroids, varicocele, and DVT treatments are covered by every major Indian insurer (Star, Niva Bupa, HDFC ERGO, ICICI Lombard) and CGHS / ECHS. Our team handles cashless paperwork end-to-end.'],
  ['Is the 1470nm radial laser approved in India?', 'Yes. The technology is FDA, CE, and CDSCO approved. Flowcare was among the first centres in North India to install it, in 2018.'],
  ['Will fibroid embolization affect my ability to have children?', 'No. UFE preserves the uterus and does not damage ovaries. Many women conceive naturally after the procedure. Dr. Bansal will counsel you fully based on imaging.'],
  ['What is the cost of varicose veins laser treatment in Jaipur?', 'Treatment for one leg starts at ₹65,000 inclusive of laser, sclerotherapy follow-up, and compression stockings. We offer 0% EMI plans and cashless options.'],
  ['Do I need general anesthesia?', 'For 95% of our procedures — no. We use local anesthesia (lignocaine) at the pinhole site only. You stay awake and alert throughout.'],
  ['How is Flowcare different from a regular hospital?', 'We are a dedicated interventional radiology centre — every machine, every protocol, and every minute of Dr. Bansal\'s time is focused on minimally invasive treatment. No general OT chaos, no inpatient wards.'],
];

function FCFaq() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="fc-faq" id="faq">
      <div className="fc-faq-grid">
        <div>
          <div className="fc-eyebrow"><span className="fc-dot" /> Questions, answered</div>
          <h2 className="fc-h2" style={{ fontSize: 56 }}>Before you book,<br/><i>here's what most people ask.</i></h2>
          <p className="fc-lede">
            Cannot find your question? Call <b>+91 90019 08900</b> — Dr. Bansal's coordinator answers in under 2 hours.
          </p>
        </div>
        <div className="fc-faq-list">
          {FAQS.map(([q, a], i) => (
            <div key={i} className={`fc-faq-item ${open === i ? 'open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="fc-faq-q">
                {q}
                <div className="fc-faq-toggle">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>
                </div>
              </div>
              <div className="fc-faq-a">{a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ───────── BLOG ───────── */

const POSTS = [
  { cat: 'Vascular', title: 'Why your "spider veins" are not just cosmetic — and when to act', time: '6 min read', date: 'Apr 14, 2026',
    art: <svg viewBox="0 0 200 200" className="fc-post-img-shape"><defs><linearGradient id="p1" x1="0" x2="1"><stop offset="0" stopColor="#1FC3C7"/><stop offset="1" stopColor="#5BD9DC"/></linearGradient></defs><path d="M30,20 C50,60 30,80 60,100 C90,120 50,160 80,180" stroke="url(#p1)" strokeWidth="6" fill="none" strokeLinecap="round"/><path d="M120,30 C140,70 120,110 150,140 C170,160 140,180 160,180" stroke="url(#p1)" strokeWidth="5" fill="none" strokeLinecap="round" opacity="0.7"/></svg> },
  { cat: "Women's Health", title: 'Fibroid treatment without losing your uterus — a clinical guide', time: '8 min read', date: 'Apr 02, 2026',
    art: <svg viewBox="0 0 200 200" className="fc-post-img-shape"><circle cx="100" cy="100" r="60" fill="#5BD9DC" opacity="0.7"/><circle cx="80" cy="90" r="22" fill="#0E2F6B"/><circle cx="120" cy="120" r="14" fill="#0E2F6B" opacity="0.8"/></svg> },
  { cat: 'Pain Management', title: 'Trigeminal neuralgia: 4 signs your jaw pain is actually a nerve', time: '5 min read', date: 'Mar 24, 2026',
    art: <svg viewBox="0 0 200 200" className="fc-post-img-shape"><path d="M70,40 C120,30 160,70 160,120 C160,160 130,180 90,170 C50,160 40,120 50,80 Z" fill="#1FC3C7" opacity="0.8"/><path d="M100,80 L110,90 L100,110 L120,120" stroke="#f4b942" strokeWidth="4" fill="none" strokeLinecap="round"/></svg> },
];

function FCBlog() {
  return (
    <div className="fc-blog">
      <div className="fc-blog-inner">
        <div className="fc-section-head">
          <div className="fc-eyebrow"><span className="fc-dot" /> Health Hub</div>
          <h2 className="fc-h2">Plain-language medicine,<br/><i>written by doctors.</i></h2>
        </div>
        <div className="fc-blog-grid">
          {POSTS.map((p, i) => (
            <article key={i} className="fc-post">
              <div className="fc-post-img">
                <div className="fc-post-cat">{p.cat}</div>
                {p.art}
              </div>
              <div className="fc-post-body">
                <div className="fc-post-meta"><span>{p.date}</span><span>·</span><span>{p.time}</span></div>
                <h3 className="fc-post-h">{p.title}</h3>
                <a className="fc-post-cta">Read more →</a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ───────── FINAL CTA ───────── */

function FCFinalCta() {
  return (
    <section className="fc-final" id="contact">
      <div className="fc-final-inner">
        <div>
          <div className="fc-eyebrow" style={{ color: 'rgba(255,255,255,0.7)' }}>
            <span className="fc-dot" style={{ background: '#1FC3C7', boxShadow: '0 0 10px #1FC3C7' }} />
            Ready when you are
          </div>
          <h2 className="fc-final-h">Your first step is<br/><i>a conversation.</i></h2>
          <div className="fc-final-hi">पहला कदम — एक बातचीत।</div>
          <p className="fc-final-lede">
            K-48/49, Income Tax Colony, SL Marg, Tonk Road, Jaipur 302015.<br/>
            Mon–Fri 9 AM – 8 PM &nbsp;·&nbsp; Sat 9 AM – 7 PM &nbsp;·&nbsp; Sunday by appointment.
          </p>
          <div className="fc-final-actions">
            <button className="fc-final-cta">
              Book Free Consultation
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </button>
            <div className="fc-final-phone">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
              +91 90019 08900
            </div>
          </div>
        </div>
        <div className="fc-qr-card">
          <div className="fc-qr-eyebrow">Or scan to WhatsApp</div>
          <div className="fc-qr">
            <svg viewBox="0 0 100 100" width="170" height="170">
              <rect width="100" height="100" fill="#fff"/>
              {Array.from({ length: 14 * 14 }, (_, i) => {
                const x = (i % 14) * 7 + 1;
                const y = Math.floor(i / 14) * 7 + 1;
                const on = ((i * 31) ^ (i >> 3)) % 3 !== 0;
                return on ? <rect key={i} x={x} y={y} width="6" height="6" fill="#0E2F6B" /> : null;
              })}
              <rect x="2" y="2" width="22" height="22" fill="#fff"/>
              <rect x="2" y="2" width="22" height="22" fill="none" stroke="#0E2F6B" strokeWidth="3"/>
              <rect x="9" y="9" width="8" height="8" fill="#0E2F6B"/>
              <rect x="76" y="2" width="22" height="22" fill="#fff"/>
              <rect x="76" y="2" width="22" height="22" fill="none" stroke="#0E2F6B" strokeWidth="3"/>
              <rect x="83" y="9" width="8" height="8" fill="#0E2F6B"/>
              <rect x="2" y="76" width="22" height="22" fill="#fff"/>
              <rect x="2" y="76" width="22" height="22" fill="none" stroke="#0E2F6B" strokeWidth="3"/>
              <rect x="9" y="83" width="8" height="8" fill="#0E2F6B"/>
            </svg>
          </div>
          <div className="fc-qr-h">Chat with the team</div>
          <div className="fc-qr-sub">Reply within 15 minutes · Mon–Sat</div>
        </div>
      </div>
    </section>
  );
}

/* ───────── FOOTER ───────── */

function FCFooter() {
  return (
    <footer className="fc-footer">
      <div className="fc-footer-inner">
        <div className="fc-footer-brand">
          <div className="fc-brand">
            <div className="fc-brand-logo">
              <window.FCBrandLogo />
            </div>
            <div className="fc-brand-copy">
              <div className="fc-brand-name">
                <span className="fc-flow">flow</span><span className="fc-care">care</span>
              </div>
              <div className="fc-brand-sub">Diagnostics &amp; Intervention · Jaipur</div>
            </div>
          </div>
          <div className="fc-footer-tag">
            India's leading hub for 1470nm radial laser and image-guided interventional radiology.
          </div>
          <div className="fc-footer-contact">
            <div><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>K-48/49, Income Tax Colony,<br/>SL Marg, Tonk Road, Jaipur 302015</div>
            <div><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>+91 90019 08900</div>
            <div><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 4h16v16H4z"/><path d="M22 6l-10 7L2 6"/></svg>care@flowcare.co.in</div>
           
          </div>
        </div>

        <div>
          <div className="fc-footer-h">Treatments</div>
          <div className="fc-footer-list">
            <a>Varicose Veins</a><a>Uterine Fibroid</a><a>Varicocele</a>
            <a>Deep Vein Thrombosis</a><a>Trigeminal Neuralgia</a><a>Prostate Embolization</a>
          </div>
        </div>
        <div>
          <div className="fc-footer-h">Conditions</div>
          <div className="fc-footer-list">
            <a>Leg Pain &amp; Swelling</a><a>Heavy Menses</a><a>Diabetic Foot</a>
            <a>Chronic Headache</a><a>Joint Pain</a><a>Fatty Liver</a>
          </div>
        </div>
        <div>
          <div className="fc-footer-h">Clinic</div>
          <div className="fc-footer-list">
            <a>About Dr. Bansal</a><a>Tech &amp; Equipment</a><a>Insurance</a>
            <a>Health Hub</a><a>Careers</a><a>Contact</a>
          </div>
        </div>
        <div>
          <div className="fc-footer-h">Legal</div>
          <div className="fc-footer-list">
            <a>Privacy Policy</a><a>Terms of Service</a><a>Medical Disclaimer</a>
            <a>Refund Policy</a><a>DPDP Compliance</a><a>Cookie Settings</a>
          </div>
        </div>
      </div>

      <div className="fc-footer-bottom">
        <div>© 2026 Flowcare Clinic · Interventional Radiology in Jaipur</div>
        <div className="fc-footer-compliance">
          <span>NABH</span><span>MCI · 28492</span><span>ISO 9001</span><span>DPDP COMPLIANT</span>
        </div>
        <div className="fc-footer-socials">
          <a><svg viewBox="0 0 24 24" fill="currentColor"><path d="M22 5.8a8.5 8.5 0 0 1-2.36.64 4.13 4.13 0 0 0 1.81-2.27 8.21 8.21 0 0 1-2.6 1A4.1 4.1 0 0 0 11.4 9.1c0 .32 0 .63.1.93A11.7 11.7 0 0 1 3 4.8a4.1 4.1 0 0 0 1.27 5.5A4 4 0 0 1 2.5 9.8v.05A4.1 4.1 0 0 0 5.8 14a4.1 4.1 0 0 1-1.86.07 4.1 4.1 0 0 0 3.83 2.85A8.23 8.23 0 0 1 2 18.7 11.65 11.65 0 0 0 8.3 20.5c7.55 0 11.68-6.25 11.68-11.67 0-.18 0-.35-.01-.53A8.34 8.34 0 0 0 22 5.8z"/></svg></a>
          <a><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.16c3.2 0 3.58.01 4.85.07 3.25.15 4.77 1.69 4.92 4.92.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.15 3.23-1.66 4.77-4.92 4.92-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-3.26-.15-4.77-1.69-4.92-4.92C2.18 15.58 2.16 15.2 2.16 12s.02-3.58.07-4.85c.15-3.23 1.66-4.77 4.92-4.92C8.42 2.18 8.8 2.16 12 2.16zM12 7.16a4.84 4.84 0 1 0 0 9.68 4.84 4.84 0 0 0 0-9.68zm0 7.99a3.16 3.16 0 1 1 0-6.32 3.16 3.16 0 0 1 0 6.32zm5.04-9.4a1.13 1.13 0 1 0 0 2.27 1.13 1.13 0 0 0 0-2.27z"/></svg></a>
          <a><svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14zM8 17v-7H5.5v7H8zm-1.25-8.27a1.45 1.45 0 1 0 0-2.9 1.45 1.45 0 0 0 0 2.9zM18.5 17v-3.85c0-2.36-1.27-3.46-2.96-3.46-1.37 0-1.98.75-2.32 1.28V10H10.7c.03.7 0 7 0 7h2.52v-3.9c0-.23.02-.45.08-.62.18-.45.6-.92 1.3-.92.92 0 1.28.7 1.28 1.72V17h2.62z"/></svg></a>
          <a><svg viewBox="0 0 24 24" fill="currentColor"><path d="M21.6 7.2a2.5 2.5 0 0 0-1.76-1.76C18.27 5 12 5 12 5s-6.27 0-7.84.44A2.5 2.5 0 0 0 2.4 7.2 26 26 0 0 0 2 12c0 1.78.13 3.18.4 4.8a2.5 2.5 0 0 0 1.76 1.76C5.73 19 12 19 12 19s6.27 0 7.84-.44a2.5 2.5 0 0 0 1.76-1.76c.27-1.62.4-3.02.4-4.8s-.13-3.18-.4-4.8zM10 15V9l5 3-5 3z"/></svg></a>
        </div>
      </div>
    </footer>
  );
}

/* ───────── FLOATING ───────── */

function FCFloating() {
  const [showCookie, setShowCookie] = React.useState(true);
  return (
    <>
      <button className="fc-floating-call" onClick={() => alert('Calling +91 90019 08900')}>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
        Call now
      </button>
      <a className="fc-floating-wa" href="#">
        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.6 14.2c-.3-.1-1.7-.8-2-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-.9 1.2-.2.2-.3.2-.6.1-.3-.1-1.2-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.1.2-.3.3-.4.1-.2 0-.3 0-.4 0-.1-.7-1.7-1-2.3-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5 0 1.5 1.1 2.9 1.2 3.1.1.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.7-.7 2-1.4.2-.7.2-1.3.2-1.4-.1-.2-.3-.2-.5-.3zM12 2C6.5 2 2 6.5 2 12c0 1.7.5 3.4 1.4 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/></svg>
      </a>
      {showCookie && (
        <div className="fc-cookie">
          <div className="fc-cookie-text">
            <b>We respect your privacy.</b> Flowcare uses cookies to improve your experience and personalise content. Compliant with India's DPDP Act 2023. <a style={{ color: 'var(--cyan-deep, #0a8a8d)', cursor: 'pointer', fontWeight: 600 }}>Read more</a>
          </div>
          <button className="fc-cookie-btn" onClick={() => setShowCookie(false)}>Decline</button>
          <button className="fc-cookie-btn fc-cookie-btn--primary" onClick={() => setShowCookie(false)}>Accept all</button>
        </div>
      )}
    </>
  );
}

Object.assign(window, {
  FCTreatments, FCConditions, FCServices, FCWhy, FCDoctor,
  FCTestimonials, FCHospitals, FCFaq, FCBlog, FCFinalCta,
  FCFooter, FCFloating,
});
