// Flowcare Homepage v2 — Hero with BIG doctor image, form moved below

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

const HERO_HOOKS = {
  flow: {
    en: <>No Cuts. No Stitches. <i className="accent">Just Care That Flows.</i></>,
    hi: 'बिना चीरा, बिना टांका — सिर्फ़ भरोसेमंद इलाज',
  },
  knife: {
    en: <>Heal Without the Knife. <i className="accent">Advanced Laser Care.</i></>,
    hi: 'चीरे के बिना उपचार — एडवांस्ड लेज़र केयर',
  },
  walk: {
    en: <>Walk in with pain. <i className="accent">Walk out with confidence.</i></>,
    hi: 'दर्द लेकर आइए — आत्मविश्वास के साथ जाइए',
  },
};

function FCParticleField() {
  const particles = React.useMemo(() => Array.from({ length: 26 }, (_, i) => ({
    left: Math.random() * 100,
    top: 30 + Math.random() * 70,
    delay: Math.random() * 14,
    size: 1 + Math.random() * 3,
    color: i % 2 === 0 ? 'rgba(31,195,199,0.7)' : 'rgba(91,217,220,0.5)',
  })), []);
  return (
    <div className="fc-particles" aria-hidden="true">
      {particles.map((p, i) => (
        <div key={i} className="fc-particle" style={{
          left: `${p.left}%`, top: `${p.top}%`,
          width: p.size, height: p.size,
          background: p.color,
          boxShadow: `0 0 ${8 + p.size * 2}px ${p.color}`,
          animationDelay: `${p.delay}s`,
        }} />
      ))}
    </div>
  );
}

function FCBrandLogo() {
  // Recreated logo: navy runner + cyan curve
  return (
    <svg viewBox="0 0 32 32" fill="none">
      <circle cx="11" cy="6" r="2.5" fill="#0E2F6B"/>
      <path d="M9 10 C7 12, 6 16, 5 22 L8 22 L9 18 C10 18, 11 19, 11 21 L11 27 L13.5 27 L13.5 19 C13.5 17, 12 15.5, 10 15.5 L11.5 12.5" stroke="#0E2F6B" strokeWidth="1.8" strokeLinecap="round" fill="none"/>
      <path d="M5 24 Q 8 27, 14 26" stroke="#1FC3C7" strokeWidth="2" strokeLinecap="round" fill="none"/>
    </svg>
  );
}
window.FCBrandLogo = FCBrandLogo;

function FCNav({ lang, setLang }) {
  return (
    <header className="fc-nav">
      <div className="fc-nav-inner">
        <a className="fc-brand" href="/homepage/">
          <div className="fc-brand-logo">
            <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>
        </a>
        <nav className="fc-nav-links">
          <a href="/genicular-artery-embolization/">GAE (Knee)</a>
          <a href="/deep-vein-thrombosis-treatment/">DVT</a>
          <a href="/uterine-fibroid-treatment/">Fibroid (UFE)</a>
          <a href="/varicocele-embolization/">Varicocele</a>
          <a href="/varicose-veins-treatment/">Varicose Veins</a>
          <a href="/microwave-ablation-for-thyroid-nodule/">Thyroid (MWA)</a>
        </nav>
        <div className="fc-lang-toggle">
          <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
          <button className={lang === 'hi' ? 'active' : ''} onClick={() => setLang('hi')}>हिं</button>
        </div>
        <button className="fc-nav-cta">
          Book Now
          <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>
        </button>
      </div>
    </header>
  );
}

const SPECIALTIES = [
  { en: 'Varicose Veins Laser', icon: 'M12 2v20M5 8c0 4 7 4 7 8s7 4 7 8' },
  { en: 'RFA · Trigeminal Neuralgia', icon: 'M12 2L4 8v6c0 5 4 9 8 9s8-4 8-9V8z' },
  { en: 'Varicocele Embolization', icon: 'M3 12c4-2 4-6 8-6s4 4 8 2M3 18c4-2 4-6 8-6s4 4 8 2' },
  { en: 'DVT Treatment', icon: 'M4 12h16M8 6l-4 6 4 6M16 6l4 6-4 6' },
  { en: 'Prostate Embolization', icon: 'M12 2a8 8 0 0 1 8 8c0 4-3 8-8 12-5-4-8-8-8-12a8 8 0 0 1 8-8z' },
  { en: 'Uterine Fibroid', icon: 'M6 2c0 6 0 10 6 10s6-4 6-10M9 22V12M15 22V12' },
];

function FCHero({ hookKey }) {
  const hook = HERO_HOOKS[hookKey] || HERO_HOOKS.flow;
  const [stats, setStats] = React.useState([0, 0, 0, 0]);
  const targets = [10000, 18, 1271, 100];

  React.useEffect(() => {
    const dur = 1800; const start = performance.now();
    const tick = (now) => {
      const t = Math.min(1, (now - start) / dur);
      const ease = 1 - Math.pow(1 - t, 3);
      setStats(targets.map((v) => Math.round(v * ease)));
      if (t < 1) requestAnimationFrame(tick);
    };
    requestAnimationFrame(tick);
  }, []);

  const fmt = (n) => n >= 1000 ? n.toLocaleString('en-IN') : n;

  return (
    <section className="fc-hero">
      <div className="fc-hero-grid">
        <div>
          <div className="fc-eyebrow"><span className="fc-dot" /> Pin-Hole Laser · 1470nm Radial · Jaipur</div>
          <h1 className="fc-hero-hook">{hook.en}</h1>
          <div className="fc-hero-hook-hi">{hook.hi}</div>

          <div className="fc-specs">
            {SPECIALTIES.map((s, i) => (
              <div key={i} className="fc-spec">
                <div className="fc-spec-dot">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d={s.icon} />
                  </svg>
                </div>
                <span>{s.en}</span>
              </div>
            ))}
          </div>

          <div className="fc-stats">
            <div>
              <div className="fc-stat-k">{fmt(stats[0])}<span>+</span></div>
              <div className="fc-stat-v">SUCCESSFUL<br />PROCEDURES</div>
            </div>
            <div>
              <div className="fc-stat-k">{fmt(stats[1])}<span>+</span></div>
              <div className="fc-stat-v">YEARS OF<br />EXPERTISE</div>
            </div>
            <div>
              <div className="fc-stat-k">{fmt(stats[2])}<span>+</span></div>
              <div className="fc-stat-v">5-STAR<br />REVIEWS</div>
            </div>
            <div>
              <div className="fc-stat-k">{fmt(stats[3])}<span>%</span></div>
              <div className="fc-stat-v">NO-SURGERY<br />SOLUTIONS</div>
            </div>
          </div>
        </div>

        {/* BIG DOCTOR HERO PORTRAIT */}
        <div className="fc-hero-doctor-frame">
          <div className="fc-hero-doctor-bg" />

          <div className="fc-hero-doctor-name-block">
            <div className="fc-hero-doctor-name">Dr. Rajendra Bansal</div>
            <div className="fc-hero-doctor-cred">MBBS · DMRD · DNB · FVIR</div>
            <div className="fc-hero-doctor-role">
              Interventional Radiologist · Founder, Flowcare · 18+ years
            </div>
          </div>

          <div className="fc-hero-doctor-tags">
            <div className="fc-hero-doctor-tag">
              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/></svg>
              <span><b>4.9</b> · 1,271 Google reviews</span>
            </div>
            <div className="fc-hero-doctor-tag">
              <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>
              <span><b>10,000+</b> procedures</span>
            </div>
          </div>

          {/* Floating procedure pills */}
          <div className="fc-doc-pill fc-doc-pill--1">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M12 2v20M5 8c0 4 7 4 7 8"/></svg>
            <div>
              <div>1470nm Radial Laser</div>
              <div className="fc-doc-pill-mini">Endovenous · 45 min</div>
            </div>
          </div>
          <div className="fc-doc-pill fc-doc-pill--2">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><circle cx="12" cy="12" r="9"/><path d="M9 12l2 2 4-4"/></svg>
            <div>
              <div>Same-Day Discharge</div>
              <div className="fc-doc-pill-mini">Local anaesthesia</div>
            </div>
          </div>
          <div className="fc-doc-pill fc-doc-pill--3">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M3 12c4-2 4-6 8-6s4 4 8 2"/></svg>
            <div>
              <div>Image-Guided</div>
              <div className="fc-doc-pill-mini">Ultrasound · DSA · MRI</div>
            </div>
          </div>

          <div className="fc-hero-doctor-img">
            <img src={FC_DOCTOR_IMG} alt="Dr. Rajendra Bansal" />
          </div>

          <div className="fc-hero-doctor-cta">
            <div>
              <div className="fc-hero-doctor-cta-h">Talk to Dr. Bansal — free consultation</div>
              <div className="fc-hero-doctor-cta-sub">Same-day callback · Confidential · No surgery in 90% of cases</div>
            </div>
            <div className="fc-hero-doctor-cta-arrow">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FCLeadForm() {
  return (
    <div className="fc-form-row">
      <div className="fc-form">
        <div>
          <div className="fc-form-eyebrow"><span className="pulse" /> Free Consultation</div>
          <div className="fc-form-h">Get a callback in <i>15 minutes</i>.</div>
          <div className="fc-form-sub">Confidential · DPDP-compliant · No spam, no pushy follow-ups.</div>
        </div>

        <div className="fc-form-grid">
          <div className="fc-field">
            <label>Full Name</label>
            <input type="text" placeholder="Priya Sharma" defaultValue="" />
          </div>
          <div className="fc-field">
            <label>Mobile Number</label>
            <div className="fc-field-row">
              <div className="fc-field-prefix">+91</div>
              <input type="tel" placeholder="98765 43210" maxLength="10" />
            </div>
          </div>
          <div className="fc-field">
            <label>Condition</label>
            <select defaultValue="">
              <option value="" disabled>Select your concern…</option>
              <option>Varicose Veins</option>
              <option>Uterine Fibroid</option>
              <option>Varicocele</option>
              <option>Deep Vein Thrombosis</option>
              <option>Trigeminal Neuralgia</option>
              <option>Prostate Issues</option>
              <option>Heavy Bleeding</option>
              <option>Other</option>
            </select>
          </div>

          <div className="fc-consent">
            <input type="checkbox" id="fc-consent" defaultChecked />
            <label htmlFor="fc-consent">
              I agree to the <a>Privacy Policy</a> and consent to be contacted via call / WhatsApp by Flowcare. (DPDP Act 2023 compliant)
            </label>
          </div>

          <div className="fc-form-cta-wrap">
            <button className="fc-form-cta">
              Book Free Consultation
              <svg width="18" height="18" 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-form-trust-text">
              <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg> 256-bit secure</span>
              <span>·</span>
              <span>OTP verified</span>
              <span>·</span>
              <span>Reply in 15 min</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function FCTrustBar() {
  return (
    <>
      <FCLeadForm />
      <div className="fc-trust-bar">
        <div className="fc-trust-inner">
          <div className="fc-trust-claim">
            <span>10,000+ successful procedures</span> — India's leading hub for 1470nm Radial Laser, performed personally by Dr. Bansal.
          </div>
          <div className="fc-trust-logos">
            <div className="fc-trust-logo">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2l9 4v9c0 4-4 7-9 7S3 19 3 15V6z"/><path d="M9 12l2 2 4-4"/></svg>
              <b>NABH</b>Accredited
            </div>
            <div className="fc-trust-logo">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="12" cy="12" r="10"/><path d="M9 12l2 2 4-4"/></svg>
              <b>MCI</b>Reg. 28492
            </div>
            <div className="fc-trust-logo">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/></svg>
              <b>ISO 9001</b>Certified
            </div>
            <div className="fc-trust-logo">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M5 4h14v16H5z"/><path d="M3 8h18M3 14h18"/></svg>
              <b>DPDP</b>Compliant
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

window.FCNav = FCNav;
window.FCHero = FCHero;
window.FCTrustBar = FCTrustBar;
window.FCParticleField = FCParticleField;
window.HERO_HOOKS = HERO_HOOKS;