// /about — Daniel & LumiVet. Composed per masterplan §5.4 + Handoff "Up next #1".
// Sections: Hero, The Story, Credentials, Philosophy, The Space, Equipment, Location, CTA.

const AboutBreadcrumb = () =>
<nav className="about-breadcrumb container" aria-label="breadcrumb">
    <a href="/index.html">לומיווט</a>
    <span>›</span>
    <span className="cur">ד״ר דניאל ולומיווט</span>
  </nav>;


const AboutHero = () =>
<section className="ab-hero">
    <div className="container">
      <div className="ab-hero-grid">
        <div className="ab-hero-photo">
          <img
          src="https://static.wixstatic.com/media/b1e7f1_56f493e5c832467aa6aaa24359510fc6~mv2.png"
          alt="ד״ר דניאל דורפמן בחלוק לבן בקליניקת לומיווט, תל אביב"
          loading="eager" />
        
          <div className="ab-hero-tag">
            <span className="dot" />
            <div className="tag-text">
              <strong>ד״ר דניאל דורפמן</strong>
              <span>מנתח וטרינרי · לומיווט</span>
            </div>
          </div>
        </div>

        <div className="ab-hero-body">
          <span className="ab-eyebrow">The Evolution of Care</span>
          <h1>
            ד״ר דניאל דורפמן
            <span className="h1-line2">כירורגיה זעיר־פולשנית צריכה להיות הסטנדרט — לא הפריבילגיה.</span>
          </h1>
          <p className="lead">הקמתי את לומיווט אחרי שנים של עבודה בקליניקות וטרינריות מובילות בארץ, מתוך תחושה אחת: יש דרך כירורגית טובה יותר. דרך עדינה יותר. שבעל החיים שלכם יחזור הביתה באותו היום, יכשכש בזנב, וימשיך לחיות את החיים שלו - בלי כאב, בלי צווארון, בלי שבועיים של מנוחה כפויה.



        </p>

          <div className="ab-hero-stamps">
            <div>
              <div className="num"><span dir="ltr">100%</span></div>
              <div className="lbl">פרוצדורות ע״י דניאל באופן אישי</div>
            </div>
            <div>
              <div className="num">עד שעתיים</div>
              <div className="lbl">תגובה ב־WhatsApp</div>
            </div>
            <div>
              <div className="num">ללא</div>
              <div className="lbl">אשפוז ברוב מוחלט של פרוצדורות</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>;


const AboutStory = () => {
  const chapters = [
  {
    n: '01',
    slash: 'החזון',
    title: 'לבעלי החיים שלנו מגיע יותר',
    body: [
    <>בקליניקות ראיתי את אותם דפוסים. כלבה נכנסת לעיקור, יוצאת עם <strong>חתך גדול מידי</strong>, צווארון אליזבטי (קונוס) שמפריע לאכילה ולשגרה, ושבועיים של מנוחה כפויה. כלב גדול עם חשד ל־GDV מגיע בחירום, ולעיתים מאוחר מדי. בעלים שנמנעים מניתוחים בגלל החלמה ארוכה.</>,
    <>בכל פעם הרגשתי שאני מתפשר. שיש דרך טובה יותר, בשאר העולם היא כבר קיימת, אבל לא זמינה לבעלי החיים בישראל. הטכנולוגיה הזעיר-פולשנית הפכה לסטנדרט בבתי חולים ובמרפאות בגרמניה, בארה״ב ובאנגליה. אצלנו היא כמעט ולא קיימת.</>]

  },
  {
    n: '02',
    slash: 'ההכשרה',
    title: 'נסעתי ללמוד איפה שעושים את זה הכי טוב',
    body: [
    <>הקדשתי שנים להכשרות מתקדמות בלפרוסקופיה ואנדוסקופיה וטרינרית - באירופה, בארצות הברית ובארץ. למדתי מהכירורגים שכתבו את הפרוטוקולים, ששינו את הענף. התאמנתי עם המערכות המתקדמות ביותר של <span dir="ltr">Karl Storz</span>, <span dir="ltr">Erbe-ו</span>, ועם מכשור אנדוסקופי גמיש שמאפשר אבחון וטיפול ללא חתך כלל.</>,
    <>ראיתי את ההבדל בעיניים שלי: כלבה שנכנסת בבוקר לניתוח, חוזרת הביתה בצהריים, ומתחילה לרוץ כבר למחרת. זאת לא הבטחה - זאת מציאות יומיומית במרכזים שבהם למדתי.</>]

  },
  {
    n: '03',
    slash: 'לומיווט',
    title: 'בניתי את המקום שאני הייתי רוצה לקחת את הכלב שלי אליו',
    body: [
    <>לומיווט היא לא מרפאה שכונתית שמוסיפה "גם לפרוסקופיה" לרשימת השירותים. זה <strong>מרכז בוטיק שמתמחה בה - בלעדית</strong>. כל פרוצדורה מתוכננת ומבוצעת על ידי באופן אישי, באותו ציוד, באותו פרוטוקול, באותו סטנדרט.</>,
    <>שקיפות, חמלה, וניסיון הם לא פריבילגיה - הם הסטנדרט. כל כלב, חתול, בעלים וווטרינר מפנה שמגיע לכאן צריך להרגיש את זה ברגע הראשון.</>]

  }];


  return (
    <section className="ab-story">
      <div className="container">
        <div className="ab-story-head">
          <span className="eyebrow">הסיפור</span>
          <h2>איך לומיווט נולדה</h2>
        </div>

        <div className="ab-chapters">
          {chapters.map((ch) =>
          <article className="ab-chapter" key={ch.n}>
              <div className="ab-chapter-num">
                {ch.n}
                <span className="slash">{ch.slash}</span>
              </div>
              <div>
                <h3>{ch.title}</h3>
                {ch.body.map((para, i) => <p key={i}>{para}</p>)}
              </div>
            </article>
          )}
        </div>

        <div className="ab-pull">
          <q>טכנולוגיה לא כאלמנט שיווקי - אלא כדי להפחית סבל. זה כל הסיפור.</q>
          <div className="ab-pull-attr">— <strong>ד״ר דניאל דורפמן</strong></div>
        </div>
      </div>
    </section>);

};

const AboutCredentials = () => {
  const creds = [
  {
    icon: <GraduationIcon size={24} />,
    title: 'בוגר רפואה וטרינרית — האוניברסיטה העברית',
    text: 'בית הספר לרפואה וטרינרית על שם קורט, האוניברסיטה העברית בירושלים.'
  },
  {
    icon: <AwardIcon size={24} />,
    title: 'הכשרות מתקדמות - אירופה וארה״ב',
    text: 'לפרוסקופיה ואנדוסקופיה וטרינרית במרכזי הכשרה מובילים באירופה ובארצות הברית.'
  },
  {
    icon: <StethoscopeIcon size={24} />,
    title: 'ניסיון קליני עשיר בכירורגיה',
    text: 'שנים של עבודה כמנתח בקליניקות וטרינריות מובילות ברחבי הארץ.'
  },
  {
    icon: <MicroscopeIcon size={24} />,
    title: 'מגיע עד מרפאת האם',
    text: 'מבצע פרוצדורות זעיר־פולשניות בקליניקות שותפות ברחבי ישראל - בלי להוציא אתכם ממסגרת המרפאה אליה אתם רגילים.'
  }];

  return (
    <section className="ab-creds" id="credentials">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">הכשרה ונסיון</span>
          <h2>הרקע הקליני</h2>
        </div>
        <div className="ab-creds-grid">
          {creds.map((c, i) =>
          <div className="ab-cred" key={i}>
              <div className="ab-cred-icon">{c.icon}</div>
              <div className="ab-cred-text">
                <h4>{c.title}</h4>
                <p>{c.text}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

const AboutPhilosophy = () => {
  const principles = [
  {
    n: '01',
    title: 'שקיפות רפואית',
    text: 'המחיר ידוע מראש. הסיכונים ידועים מראש. התוצאות מדידות. אתם לא צריכים להתקשר כדי לקבל הצעה - היא באתר, במחשבון, ובוואטסאפ, בשפה ברורה.'
  },
  {
    n: '02',
    title: 'טראומה מינימלית',
    text: 'טכנולוגיה היא אמצעי, לא הצהרה. רזולוציית HD, ההגדלה פי 10 ומכשור 3-5 מ״מ משרתים מטרה אחת - להפחית כאב, סיבוכים וזמן החלמה. '
  },
  {
    n: '03',
    title: 'חזרה למשפחה',
    text: 'בעל החיים הוא חלק מהמשפחה. ההחלמה היא של כולם - לא רק שלו. לכן הוא יוצא מהקליניקה באותו יום, בלי צווארון וחוזר לשגרה  תוך 24 שעות.'
  }];

  return (
    <section className="ab-philo" id="philosophy">
      <div className="container">
        <span className="eyebrow on-dark">סטנדרט לומיווט</span>
        <h2>שלושה עקרונות שמנחים כל פרוצדורה</h2>
        <p className="ab-philo-sub">כל החלטה - מהציוד שאנחנו קונים ועד הניסוח של הודעת ה־WhatsApp הראשונה - נובעת מעקרונות אלה.


        </p>
        <div className="ab-philo-grid">
          {principles.map((p) =>
          <div className="ab-philo-card" key={p.n}>
              <div className="principle-num">{p.n}</div>
              <h3>{p.title}</h3>
              <p>{p.text}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

};

const AboutSpace = () => {
  const photos = [
  {
    n: '01',
    title: 'קבלה רגועה',
    caption: 'מינימליסטית, שקטה, ללא ריחות של חיטוי. אזור המתנה נפרד, ספסל מרופד, מים ופינוקים.',
    label: 'reception'
  },
  {
    n: '02',
    title: 'חדר פרוצדורה',
    caption: 'שולחן כירורגי עם בקרת חום אקטיבית, מסכי HD של Karl Storz, מערך הרדמה עם מעקב רציף לב/לחץ/חמצן.',
    label: 'procedure room — HD + Karl Storz'
  },
  {
    n: '03',
    title: 'יחידת התעוררות',
    caption: 'תאים מרופדים, חימום פעיל, צוות שמלווה כל מטופל עד היציאה הביתה. ההורים מקבלים תמונה ב־WhatsApp ברגע ההתעוררות.',
    label: 'recovery suite'
  }];

  return (
    <section className="ab-space" id="the-space">
      <div className="container">
        <div className="ab-space-intro">
          <div>
            <span className="eyebrow">המרחב שלנו</span>
            <h2>תוכנן לשלושה דברים: שקט, סטריליות, דיוק.</h2>
          </div>
          <p>
            כשאתם מגיעים ללומיווט אתם נכנסים למרחב שתוכנן בקפידה. <strong style={{ color: 'var(--brand)' }}>שקט לבעלים</strong>, סטריליות לחיית המחמד, דיוק לצוות. הציוד מסוג הזה שאתם רואים בבתי חולים של בני אדם. זה לא במקרה - זה הסטנדרט של לומיווט.
          </p>
        </div>

        <div className="ab-space-grid">
          {photos.map((p) =>
          <article className="ab-space-card" key={p.n}>
              <div className="ab-space-photo placeholder">
                <span style={{ position: 'relative', zIndex: 1 }}>[ {p.label} ]<br />real clinic photo</span>
              </div>
              <div className="ab-space-body">
                <div className="num">{p.n} / 03</div>
                <h4>{p.title}</h4>
                <p>{p.caption}</p>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

};

const AboutEquipment = () =>
<section className="ab-equip" id="equipment">
    <div className="container">
      <div className="ab-equip-head">
        <span className="eyebrow">הציוד</span>
        <h2>אותו ציוד. אותם פרוטוקולים. סטנדרט אוניברסיטאי.</h2>
        <p>מערכת הציוד בלומיווט זהה לזו של מרכזי המומחים האוניברסיטאיים בגרמניה, אנגליה וארה״ב. זה לא מותרות — זה התנאי שמאפשר חתך של 3-5 מ״מ וחזרה לשגרה ב־24 שעות.


      </p>
      </div>

      <div className="ab-equip-grid">
        <div className="ab-equip-card">
          <div className="ab-equip-photo ab-equip-photo--tower">
            <img src="assets/karl-storz-tower.png" alt="Karl Storz HD tower" />
          </div>
          <div className="equip-mark">
            <span className="equip-brand">KARL STORZ</span>
            <span className="equip-origin">Tuttlingen, Germany</span>
          </div>
          <h4>מערך לפרוסקופיה ב־Full HD</h4>
          <p>
            מצלמת <span dir="ltr">3-Chip HD</span> עם הגדלה אופטית פי 10, מקור אור LED קר, מגדל אינסופלציה ומכשור מיקרו־כירורגי של 3-5 מ״מ. זה הסטנדרט של מרכזי ההפנייה המובילים בעולם - וזה גם הסטנדרט שלנו.
          </p>
          <ul className="equip-uses">
            <li>העיקור העדין (Lap OVE)</li>
            <li>גסטרופקסי מניעתית</li>
            <li>אשך טמיר בטני (Cryptorchid)</li>
            <li>ביופסיה לפרוסקופית</li>
          </ul>
        </div>

        <div className="ab-equip-card">
          <div className="ab-equip-photo ab-equip-photo--erbe">
            <img src="assets/erbe-vio3.png" alt="Erbe VIO 3" />
          </div>
          <div className="equip-mark">
            <span className="equip-brand">ERBE</span>
            <span className="equip-origin">Tübingen, Germany</span>
          </div>
          <h4>מערך אלקטרוכירורגי לסגירת כלי דם</h4>
          <p>סגירת כלי דם בי-פולרית מבוקרת וחיתוך באותו מהלך, ללא תפרים פנימיים, ללא תפיסות או משיכות. זה מה שמאפשר פרוצדורות עדינות עם איבוד דם מינימלי וזמן הרדמה מקוצר.


        </p>
          <ul className="equip-uses">
            <li>סגירת כלי דם</li>
            <li>הסרת גידולים פנימיים</li>
            <li>ביופסיות עם המוסטזיס מיידי</li>
            <li>תמיכה בכל פרוצדורות הלפרוסקופיה</li>
          </ul>
        </div>
      </div>
    </div>
  </section>;


const AboutLocation = () =>
<section className="ab-loc" id="location">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow">המיקום</span>
        <h2>בלב תל אביב — דיזנגוף 255</h2>
      </div>

      <div className="ab-loc-grid">
        <div className="ab-loc-info">
          <div>
            <div className="addr">דיזנגוף 255, תל אביב</div>
            <div className="addr-sub">בניין חדש מותאם נגישות — חניות בקרבת מקום</div>
          </div>

          <div className="ab-loc-rows">
            <div className="ab-loc-row">
              <div className="ic"><ClockIcon size={20} /></div>
              <div>
                <span className="lbl">שעות פעילות</span>
                <span className="val">
                  א׳–ה׳ · 09:00–20:00<br />
                  ו׳ · 09:00–14:00<br />
                  <span style={{ color: 'var(--brand)' }}>מענה WhatsApp עד 22:00</span>
                </span>
              </div>
            </div>

            <div className="ab-loc-row">
              <div className="ic"><PhoneIcon size={20} /></div>
              <div>
                <span className="lbl">טלפון</span>
                <span className="val"><a href="tel:+97233035033">03-303-5033</a></span>
              </div>
            </div>

            <div className="ab-loc-row">
              <div className="ic"><MessageIcon size={20} /></div>
              <div>
                <span className="lbl">אימייל</span>
                <span className="val"><a href="mailto:Daniel@lumivet.co.il">Daniel@lumivet.co.il</a></span>
              </div>
            </div>

            <div className="ab-loc-row">
              <div className="ic"><MapIcon size={20} /></div>
              <div>
                <span className="lbl">הגעה</span>
                <span className="val">
                  קו 5, 36, 39, 8, 2 · חניון בני דן (5 דק׳)<br />
                  בניין נגיש - ללא מדרגות
                </span>
              </div>
            </div>
          </div>

          <div className="ab-loc-actions">
            <a href="https://www.google.com/maps/dir/?api=1&destination=Dizengoff+255+Tel+Aviv"
          target="_blank" rel="noopener" className="btn btn-secondary btn-sm">
              <MapIcon size={16} /> נווטו אלינו
            </a>
            <a href="https://wa.me/97233035033?text=שלום, אני רוצה לתאם ביקור בקליניקה"
          className="btn btn-wa btn-sm">
              <WhatsappIcon size={16} /> WhatsApp
            </a>
          </div>
        </div>

        <div className="ab-loc-map">
          <iframe
          src="https://www.google.com/maps?q=Dizengoff%20255%2C%20Tel%20Aviv&output=embed&hl=iw&z=16"
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
          title="לומיווט — דיזנגוף 255, תל אביב" />
        
        </div>
      </div>
    </div>
  </section>;


Object.assign(window, {
  AboutBreadcrumb,
  AboutHero,
  AboutStory,
  AboutCredentials,
  AboutPhilosophy,
  AboutSpace,
  AboutEquipment,
  AboutLocation
});