// /vets — B2B referral portal. Per masterplan §5.5.
// Tone: peer-to-peer, clinical, direct. Core message: "המטופל חוזר אליכם".

const VetsBreadcrumb = () =>
<nav className="vets-breadcrumb container" aria-label="breadcrumb">
    <a href="/index.html">לומיווט</a>
    <span>›</span>
    <span className="cur">לווטרינרים</span>
  </nav>;


const VetsHero = () =>
<section className="vets-hero">
    <div className="container">
      <div className="vets-hero-grid">
        <div>
          <span className="vets-hero-tag">
            <span className="pulse" />
            Referral Network · רשת מפנים
          </span>
          <h1>
            שותפים, <em>לא מתחרים</em>.
          </h1>
          <p className="vets-hero-sub">
            לומיווט הוא מרכז למקרים כירורגיים זעיר-פולשניים: אנדוסקופיה ולפרוסקופיה. אנחנו מבצעים את הפרוצדורה הספציפית בלבד 
          <strong> והמטופל חוזר אליכם</strong> להמשך הטיפול.
          </p>
          <div className="vets-hero-ctas">
            <a className="btn btn-on-dark btn-lg"
          href="https://wa.me/97233035033?text=שלום דניאל, אני וטרינר/ית מ[שם המרפאה] ומתעניין/ת ברשת המפנים 🩺">
              <WhatsappIcon size={20} />
              הצטרפו לרשת המפנים
            </a>
            <a className="btn btn-ghost btn-lg" href="#toolkit" style={{ color: '#fff' }}>
              להורדת חומרי הרשת ↓
            </a>
          </div>
        </div>

        <div className="vets-hero-stats">
          <div className="vets-hero-stat">
            <div className="num"><span className="unit" style={{ marginInlineStart: 0, marginInlineEnd: 6 }}>שעות</span><span dir="ltr">24</span></div>
            <div>
              <div className="lbl">מסירת דוח</div>
              <div className="desc">דוח כירורגי מלא + תמונות + וידאו, ב־24 שעות מהפרוצדורה.</div>
            </div>
          </div>
          <div className="vets-hero-stat">
            <div className="num">100%</div>
            <div>
              <div className="lbl">המטופל חוזר</div>
              <div className="desc">המטופל חוזר אליכם להסרת תפרים, חיסונים, ביקורת - הכל לתיק הרפואי שלכם.</div>
            </div>
          </div>
          <div className="vets-hero-stat">
            <div className="num">WA</div>
            <div>
              <div className="lbl">ערוץ פרו</div>
              <div className="desc">קו WhatsApp מקצועי ישיר לדניאל - בקו נפרד מזה של בעלי חיות המחמד.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>;


const VetsPromise = () =>
<section className="vets-promise" id="promise">
    <div className="container">
      <div className="vets-promise-grid">
        <div className="vets-promise-head">
          <span className="eyebrow">ההתחייבות</span>
          <h2>
            המטופל שלכם
            <strong>חוזר אליכם.</strong>
          </h2>
        </div>
        <div className="vets-promise-body">
          <p>
            המטופל שאתם מפנים ללומיווט <strong>נשאר המטופל שלכם</strong>. אנחנו מבצעים רק את הפרוצדורה
            הכירורגית הספציפית שהפניתם אליה - ומחזירים את המטופל אליכם להסרת תפרים, חיסונים, ביקורת
            שנתית, וכל המשך הטיפול הרגיל.
          </p>
          <p>המסמכים שתקבלו - דוח כירורגי מפורט, תמונות ברזולוציית HD מתוך הפרוצדורה, וקישור פרטי לוידאו מלא - יאפשרו לכם לעקוב אחר ההחלמה ולהמשיך לטפל כשאתם יודעים בדיוק מה נעשה. ללא הפתעות, ללא פערים בתיעוד.


        </p>
          <div className="vets-pull">
            <q>פרוצדורות בתיאום מלא. יחד אנחנו נותנים טיפול ברמה הכי גבוהה.</q>
            <div className="vets-pull-attr">— <strong>ד״ר דניאל דורפמן</strong></div>
          </div>
        </div>
      </div>
    </div>
  </section>;


const VetsFlow = () => {
  const steps = [
  { n: '01', title: 'אתם מפנים', desc: 'הודעת WhatsApp לדניאל או שיחה ישירה. מתאמים מועד תוך שעתיים.', meta: 'WhatsApp · טלפון · אימייל' },
  { n: '02', title: 'הלקוח מגיע', desc: 'מבוצעת הפרוצדורה הספציפית בלבד. ללא חיסונים, ללא בדיקות שגרתיות, ללא שירותים מקבילים.', meta: 'Scope מוגדר מראש' },
  { n: '03', title: 'המטופל חוזר אליכם', desc: 'באותו יום, המטופל חוזר עם חבילת מסמכים מלאה - דוח, תמונות, וידאו.', meta: 'ללא אשפוז' },
  { n: '04', title: 'אתם ממשיכים', desc: 'הסרת תפרים, ביקורת, המשך תיק רפואי. המטופל נשאר שלכם, אנחנו רק הוספנו פרק.', meta: 'התיק נשאר שלכם' }];

  return (
    <section className="vets-flow" id="model">
      <div className="container">
        <div className="vets-flow-head">
          <span className="eyebrow">איך זה עובד</span>
          <h2>מודל השותפות — 4 שלבים</h2>
          <p>תהליך פשוט וברור. אנחנו ערוץ כירורגי מקצועי — לא מרפאה מתחרה.</p>
        </div>

        <div className="vets-flow-steps">
          {steps.map((s) =>
          <article className="vets-flow-step" key={s.n}>
              <div className="num"><strong>{s.n}</strong></div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <div className="meta">
                <CheckIcon size={14} />
                {s.meta}
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

};

const VetsCases = () => {
  const cases = [
  {
    cat: 'lap',
    tag: 'לפרוסקופיה',
    title: 'Cryptorchid בטני',
    en: 'Lap Cryptorchidectomy',
    desc: 'אשך טמיר אינטרה־אבדומינלי. אנדוסקופיה אבחנתית + הסרה דרך 2 פורטים של 5 מ״מ, ללא פתיחה ואיתור אבדומינלי.',
    why: 'MIS חוסכת חיתוך בטני גדול ושבוע אשפוז'
  },
  {
    cat: 'lap',
    tag: 'לפרוסקופיה',
    title: 'ביופסיה פנים־בטנית',
    en: 'Lap Biopsy',
    desc: 'כבד, מעי, טחול, כליה, לבלב, בלוטות לימפה. ביופסיה מדויקת ואיכותית בהגדלה פי 10.',
    why: 'אבחון חד־פרוצדורי ללא פתיחה בטנית'
  },
  {
    cat: 'endo',
    tag: 'אנדוסקופיה',
    title: 'גוף זר GI',
    en: 'Foreign Body Removal',
    desc: 'הוצאה אנדוסקופית של גופים זרים מהוושט והקיבה - גם אצלכם במרפאה.',
    why: 'חוסכת פרוצדורה בטנית פתוחה'
  },
  {
    cat: 'lap',
    tag: 'לפרוסקופיה',
    title: 'Gastropexy מניעתית',
    en: 'Lap Gastropexy',
    desc: 'מניעת GDV בגזעים גדולים וענקיים. ניתן בשילוב עם עיקור.',
    why: 'מורידה סיכון GDV מ־1:4 לכמעט אפס'
  },
  {
    cat: 'endo',
    tag: 'אנדוסקופיה',
    title: 'Rhinoscopy',
    en: 'Rinoscopy',
    desc: 'דימום מהאף, שיעול כרוני, חשד לגוף זר. אנדוסקופ גמיש - גם אצלכם במרפאה.',
    why: 'אבחון ויזואלי + ביופסיה ללא חתך'
  },
  {
    cat: 'lap',
    tag: 'לפרוסקופיה',
    title: 'עיקור עדין (Lap OVE)',
    en: 'Laparoscopic Ovariectomy',
    desc: 'פרוצדורת הדגל שלנו. 1–3 חתכים של 3-5 מ״מ, חזרה לשגרה ב־24 שעות, ללא צווארון.',
    why: 'אלטרנטיבה לעיקור פתוח לבעלים שמבקשים MIS'
  },
  {
    cat: 'endo',
    tag: 'אנדוסקופיה',
    title: 'Bronchoscopy',
    en: 'ברונכוסקופיה',
    desc: 'אבחון דרכי נשימה תחתונות - שיעול כרוני, חשד לגוף זר, קריסת קנה. דגימות BAL וביופסיה מדויקת - גם אצלכם במרפאה.',
    why: 'אבחנה ויזואלית של דרכי הנשימה ללא חתך'
  },
  {
    cat: 'endo',
    tag: 'אנדוסקופיה',
    title: 'גסטרוסקופיה אבחנתית',
    en: 'Diagnostic Gastroscopy',
    desc: 'הקאות כרוניות, חשד ל־IBD, ירידה במשקל לא מוסברת. ביופסיות ושט/קיבה/דאודנום דיאגנוסטיות ומדויקות- גם אצלכם במרפאה.',
    why: 'אבחון מערכת עיכול עליונה בלי חתך'
  },
  {
    cat: 'endo',
    tag: 'אנדוסקופיה',
    title: 'Cystoscopy',
    en: 'ציסטוסקופיה',
    desc: 'דם בשתן, זיהומים חוזרים, אבני שלפוחית. אבחון ויזואלי + ביופסיה + הוצאת אבנים קטנות- גם אצלכם במרפאה.',
    why: 'אבחון וטיפול בשלפוחית - דרך האורתרה, ללא חתך'
  }];

  return (
    <section className="vets-cases" id="refer">
      <div className="container">
        <div className="vets-cases-head">
          <span className="eyebrow">מתי כדאי להפנות</span>
          <h2>9 פרוצדורות שאנחנו עושים הכי טוב</h2>
          <p>אם המקרה שלכם נופל באחת מהקטגוריות האלה - שווה שיחה קצרה בוואטסאפ לפני שאתם מתכננים פרוצדורה.</p>
        </div>

        <div className="vets-cases-grid">
          {cases.map((c, i) =>
          <article className="vets-case" key={i}>
              <div className="vets-case-head">
                <span className={`vets-case-cat ${c.cat}`}>{c.tag}</span>
                <span className="vets-case-icon">{String(i + 1).padStart(2, '0')}</span>
              </div>
              <h4>{c.title}</h4>
              <div className="vets-case-en">{c.en}</div>
              <p>{c.desc}</p>
              <div className="vets-case-why">
                <ArrowIcon size={14} style={{ transform: 'scaleX(-1)', flexShrink: 0, marginTop: 2 }} />
                <span>{c.why}</span>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

};

const VetsGet = () => {
  const items = [
  {
    title: 'דוח כירורגי מלא',
    desc: 'PDF בעברית/באנגלית, פורמט מקצועי, כולל תמונות ברזולוציית HD מתוך הפרוצדורה.',
    tag: 'בתוך 24 שעות'
  },
  {
    title: 'וידאו מלא של הפרוצדורה',
    desc: 'קישור פרטי, רזולוציית HD. סטנדרט, לא תוספת.',
    tag: 'כסטנדרט'
  },
  {
    title: 'ערוץ WhatsApp מקצועי',
    desc: 'ערוץ תקשורת ייעודי לוטרינרים - לא אותו קו של בעלי החיות. תשובה ישירה מדניאל.',
    tag: 'ישירות לדניאל'
  },
  {
    title: 'המטופל חוזר אליכם',
    desc: 'הסרת תפרים, חיסונים, המשך טיפול - התיק הרפואי נשאר שלכם.',
    tag: 'ללא תחרות'
  },
  {
    title: 'תמיכה פוסט־אופ',
    desc: 'תמיכה טלפונית אם עולה שאלה רפואית, דניאל זמין.',
    tag: '48 שעות'
  }];

  return (
    <section className="vets-get">
      <div className="container">
        <div className="vets-get-grid">
          <div className="vets-get-side">
            <span className="eyebrow">מה אתם מקבלים</span>
            <h2>חמישה דברים שאנחנו מבטיחים בכל הפנייה</h2>
            <p>תיעוד, תקשורת, והמחויבות להחזיר את המטופל אליכם. אנחנו לוקחים את שלושת אלה ברצינות.


            </p>
          </div>

          <div className="vets-get-list">
            {items.map((it, i) =>
            <div className="vets-get-item" key={i}>
                <div className="ic"><CheckIcon size={20} /></div>
                <div>
                  <h4>{it.title}</h4>
                  <p>{it.desc}</p>
                </div>
                <span className="tag">{it.tag}</span>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

};

const VetsToolkit = () => {
  const downloads = [
  {
    type: 'PDF', size: '1.4MB',
    title: 'דוח כירורגי לדוגמה',
    desc: 'מה שהמרפאה שלכם תקבל אחרי כל פרוצדורה עם תמונות HD.'
  },
  {
    type: 'PDF', size: '420KB',
    title: 'פלייר למטופל',
    desc: 'לחלוקה בקליניקה. הפלייר מסביר רק על הפרוצדורה - המרפאה שלכם נשארת במרכז.'
  },
  {
    type: 'PDF', size: '680KB',
    title: 'תרשים החלטה — מתי להפנות?',
    desc: 'דף אחד להדפסה בחדר הרופא. סיוע מהיר בהחלטה.'
  },
  {
    type: 'PDF', size: '210KB',
    title: 'טופס קונסנט עברי',
    desc: 'לחתימת הבעלים לפני הגעה — מקל על הזרימה ביום הפרוצדורה.'
  }];

  return (
    <section className="vets-kit" id="toolkit">
      <div className="container">
        <div className="vets-kit-head">
          <span className="eyebrow on-dark">דוגמאות לתוצרים</span>
          <h2>B2B Toolkit — להורדה מיידית</h2>
          <p>ארבע דוגמאות לשיתופי פעולה בעברית, בפורמט PDF, עם לוגו לומיווט. רוצים גרסה עם הלוגו של המרפאה שלכם כ־co-branding? רק תבקשו.


          </p>
        </div>

        <div className="vets-kit-grid">
          {downloads.map((d, i) =>
          <a key={i} href="#" className="vets-kit-card"
          onClick={(e) => {e.preventDefault();alert('הורדה — הקובץ עדיין בהכנה. לקבלה ישירה: WhatsApp לדניאל.');}}>
              <div className="filetype">{d.type}</div>
              <div>
                <h4>{d.title}</h4>
                <p>{d.desc}</p>
              </div>
              <div className="filesize">
                {d.size}
                <ArrowIcon size={14} style={{ transform: 'rotate(90deg)' }} />
              </div>
            </a>
          )}
        </div>

        <div className="vets-kit-note">
          <strong>הערה.</strong> חומרים אלה נשלחים גם כקובץ אחד מאוחד ב־WhatsApp לאחר שיחת היכרות קצרה.
          לא נדרשת הרשמה מוקדמת.
        </div>
      </div>
    </section>);

};

const VetsDr = () =>
<section className="vets-dr">
    <div className="container">
      <div className="vets-dr-row">
        <div className="vets-dr-photo">
          <img
          src="https://static.wixstatic.com/media/b1e7f1_56f493e5c832467aa6aaa24359510fc6~mv2.png"
          alt="ד״ר דניאל דורפמן" />
        
        </div>
        <div>
          <span className="eyebrow">המנתח שיבצע</span>
          <h2>ד״ר דניאל דורפמן</h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--navy)', opacity: 0.85, maxWidth: '54ch' }}>הכשרה מתקדמת בכירורגיה זעיר־פולשנית באירופה ובארה״ב. מבצע אישית כל פרוצדורה בלומיווט, ומגיע גם לקליניקות שותפות ברחבי הארץ - כדי שהמטופל לא יצטרך לעזוב את המרפאה שלכם.


        </p>
          <div className="vets-dr-cred">
            <div className="cred-item">
              <span className="cred-lbl">השכלה</span>
              <span className="cred-val">בוגר רפואה וטרינרית, האוניברסיטה העברית</span>
            </div>
            <div className="cred-item">
              <span className="cred-lbl">הכשרות מתקדמות</span>
              <span className="cred-val">אירופה · ארה״ב · ישראל</span>
            </div>
            <div className="cred-item">
              <span className="cred-lbl">תפקיד נוסף</span>
              <span className="cred-val">מנתח אורח בקליניקות שותפות בארץ</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>;


const VetsEquipment = () => {
  const items = [
  { brand: 'KARL STORZ', origin: 'Tuttlingen, Germany', desc: 'מערך לפרוסקופיה ואנדוסקופיה Full HD · הגדלה אופטית פי 10.', uses: 'OVE · Gastropexy · Cryptorchid · GI · Rhinoscopy', img: 'assets/karl-storz-tower.png', imgVariant: 'tower' },
  { brand: 'ERBE TriSect', origin: 'Tübingen, Germany', desc: 'מערך אלקטרוכירורגי דו־קוטבי לסגירת כלי דם וחיתוך באותו מהלך.', uses: 'Vessel sealing · המוסטזיס', img: 'assets/erbe-vio3.png', imgVariant: 'erbe' }];

  return (
    <section className="vets-equip">
      <div className="container">
        <div className="vets-equip-head">
          <span className="eyebrow">הציוד</span>
          <h2>סטנדרט אוניברסיטאי.</h2>
          <p>זהה לציוד שתמצאו במרכזי המומחים באירופה ובארה״ב - התנאי שמאפשר את התוצאות הקליניות שאנחנו מתחייבים אליהן.</p>
        </div>
        <div className="vets-equip-cards">
          {items.map((it, i) =>
          <div className="vets-equip-card" key={i}>
              <div className={`vets-equip-photo vets-equip-photo--${it.imgVariant}`}>
                <img src={it.img} alt={it.brand} />
              </div>
              <div className="brand-row">
                <span className="brand">{it.brand}</span>
                <span className="origin">{it.origin}</span>
              </div>
              <p>{it.desc}</p>
              <div className="uses">{it.uses}</div>
            </div>
          )}
        </div>
      </div>
    </section>);
};

const VetsFaq = () => {
  const items = [
  {
    q: 'מה בדיוק נכלל בפרוצדורה? האם יש חיוב על בדיקות נלוות או רק על ה־MIS?',
    a: 'החיוב הוא רק על הפרוצדורה הספציפית שהפניתם אליה — כולל הרדמה, צוות, ציוד, וחומרים. בדיקות שגרתיות (CBC, ביו, ECG) נעשות במרפאה שלכם לפני ההגעה — אנחנו לא עושים אותן כפול. אם נדרשת בדיקה חירום ביום הפרוצדורה — תיאום מיידי איתכם לפני חיוב.'
  },
  {
    q: 'מה קורה אם יש סיבוך בזמן הפרוצדורה? מי מתקשר למפנה?',
    a: 'דניאל מתקשר אליכם אישית, באותה השעה. לא צוות, לא לקוח, לא אחרי. סיבוכים מתועדים במלואם בדוח. אם נדרשת המשך טיפול — מתאמים יחד מה הדרך הנכונה (חזרה אליכם, הפנייה למרכז נוסף, אשפוז).'
  },
  {
    q: 'האם אפשר להיות נוכח בפרוצדורה או לצפות בסטרימינג?',
    a: 'כן בשני המקרים. ניתן להגיע פיזית — בלומיווט יש אזור צפייה מבוקר. אפשר גם סטרימינג HD פרטי לוואטסאפ או לזום בזמן הפרוצדורה. מבקשים זאת מראש בתיאום.'
  },
  {
    q: 'מה המדיניות לגבי חיסונים / טיפולים אחרים שהלקוח מבקש "דרך אגב"?',
    a: 'אנחנו לא נותנים אותם. נקודה. אם לקוח מבקש — אנחנו אומרים בנימוס: "זה אצל הוטרינר שלכם, וזה בדיוק איך זה צריך להיות." זה לא נוקשות — זו ההתחייבות שלנו אליכם.'
  },
  {
    q: 'האם יש הנחה ללקוחות המפנים?',
    a: 'אין הנחות אישיות — המחיר שקוף וזהה לכל לקוח. אבל אצל 3+ הפניות בחודש: גרסת B2B Toolkit עם הלוגו של המרפאה שלכם כ־co-branding, ופלייר ייעודי לחלוקה.'
  },
  {
    q: 'איך מתחילים? יש חוזה?',
    a: 'אין חוזה. אנחנו מציעים שיחת זום של 15–30 דקות (או פגישה במרפאה שלכם אם תרצו) — להכיר, להבין את הסוג של מקרים שאתם רואים, ולחתום על אישור הצטרפות חד־עמודי. אחרי זה אתם בקבוצת WhatsApp הפרו ויכולים להפנות מיידית.'
  }];

  return (
    <section className="vets-faq">
      <div className="container">
        <div className="vets-faq-wrap">
          <div className="vets-faq-head">
            <span className="eyebrow">FAQ Pro</span>
            <h2>שש שאלות של ווטרינרים מפנים</h2>
          </div>
          <div className="faq-list">
            {items.map((it, i) => <VetsFaqItem key={i} {...it} />)}
          </div>
        </div>
      </div>
    </section>);

};

const VetsFaqItem = ({ q, a }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div className={`faq-item ${open ? 'open' : ''}`}>
      <button className="faq-q" onClick={() => setOpen(!open)}>
        <span>{q}</span>
        <span className="chev"><ChevronDownIcon size={18} /></span>
      </button>
      <div className="faq-a" style={{ maxHeight: open ? 500 : 0 }}>
        <p>{a}</p>
      </div>
    </div>);

};

const VetsClosingCTA = () =>
<section className="vets-cta-pro">
    <div className="container">
      <span className="eyebrow on-dark">בואו נכיר</span>
      <h2>שיחה של 15 דקות. אפס מחויבות.</h2>
      <p>אנחנו מציעים שיחת היכרות קצרה לפני שמתחילים לעבוד יחד - להבין איפה אנחנו יכולים לעזור, ואיפה זה לא רלוונטי. אם זה מתאים - נמשיך. אם לא - לפחות הכרנו.


    </p>
      <div className="ctas">
        <a className="btn btn-on-dark btn-lg"
      href="https://wa.me/97233035033?text=שלום דניאל, אני וטרינר/ית מ[שם המרפאה] ומתעניין/ת בשיחת היכרות לרשת המפנים 🩺">
          <WhatsappIcon size={20} />
          קבעו שיחה ב־WhatsApp
        </a>
        <a className="cta-phone" href="tel:+97233035033">
          <PhoneIcon size={20} />
          03-303-5033
        </a>
      </div>
    </div>
  </section>;


Object.assign(window, {
  VetsBreadcrumb,
  VetsHero,
  VetsPromise,
  VetsFlow,
  VetsCases,
  VetsGet,
  VetsToolkit,
  VetsDr,
  VetsEquipment,
  VetsFaq,
  VetsClosingCTA
});