// /procedures hub components

const ProceduresHero = () =>
<section className="proc-hero">
    <div className="container">
      <span className="eyebrow">12 פרוצדורות. שתי משפחות. פילוסופיה אחת.</span>
      <h1>הפרוצדורות שלנו</h1>
      <p className="lead">לפרוסקופיה דרך הבטן, אנדוסקופיה דרך פתחי גוף טבעיים - אותה גישה: פחות חתכים, יותר דיוק, חזרה מהירה לשגרה.

    </p>
      <div className="proc-hero-stats">
        <div><span className="num">3-5 מ״מ</span><span className="lbl">חתכים זעירים בלפרוסקופיה</span></div>
        <div><span className="num">0</span><span className="lbl">חתכים באנדוסקופיה</span></div>
        <div><span className="num">24 שעות</span><span className="lbl">חזרה לשגרה ברוב הפרוצדורות</span></div>
      </div>
    </div>
  </section>;


// === Lap procedures ===
const LAP_PROCEDURES = [
{
  slug: 'gentle-spay',
  title: 'העיקור העדין',
  en: 'Lap Ovariectomy',
  teaser: 'הסטנדרט החדש לעיקור - 1-2 חתכים של 5 מ״מ, חזרה לשגרה ב-24 שעות, בלי צווארון.',
  tag: 'הדגל של לומיווט',
  href: '/gentle-spay.html'
},
{
  slug: 'gastropexy',
  title: 'Lap Gastropexy',
  en: 'גסטרופקסי מניעתי',
  teaser: 'מניעת היפוך קיבה (GDV) בגזעים גדולים. פרוצדורה אחת - מניענ לכל החיים.',
  tag: 'מומלץ לגזעים גדולים',
  href: '/procedure-detail.html'
},
{
  slug: 'cryptorchid',
  title: 'Lap Cryptorchid',
  en: 'אשך טמיר בטני',
  teaser: 'הכוח האמיתי של MIS - חיפוש וכריתה דרך 1-2 חתכים זעירים במקום פתיחת בטן מלאה.',
  tag: 'יתרון משמעותי על הגישה הפתוחה',
  href: '/cryptorchid.html'
},
{
  slug: 'biopsy',
  title: 'Lap Biopsy',
  en: 'ביופסיה לפרוסקופית',
  teaser: 'דגימה מדויקת של כבד, קיבה, לבלב, כליה, מעי או קשר לימפה - אבחנה ודאית בלי לפתוח את הבטן.',
  tag: 'אבחנה אבחנתית',
  href: '/biopsy.html'
},
{
  slug: 'explorative',
  title: 'Exploratory Lap',
  en: 'אבחון פנים־בטני',
  teaser: 'חקירה ויזואלית מלאה של חלל הבטן לפני קבלת החלטות. רואים - ואז מחליטים.',
  tag: 'כשצריך לראות לפני שמחליטים',
  href: '/exploratory-lap.html'
}];


// === Endo procedures ===
const ENDO_PROCEDURES = [
{
  slug: 'rhinoscopy',
  title: 'Rhinoscopy',
  en: 'אנדוסקופיית אף',
  teaser: 'דימום, שיעול כרוני, חשד לגוף זר באף - אבחון וטיפול דרך הנחיר עצמו.',
  tag: 'בלי חתך, באותו יום הביתה',
  href: '#'
},
{
  slug: 'bronchoscopy',
  title: 'Bronchoscopy',
  en: 'ברונכוסקופיה',
  teaser: 'שיעול כרוני, קריסת קנה, חשד לגוף זר בדרכי הנשימה - דגימות BAL וביופסיה דרך הקנה.',
  tag: 'אבחון דרכי הנשימה התחתונות',
  href: '#'
},
{
  slug: 'gastroscopy',
  title: 'Diagnostic Gastroscopy',
  en: 'גסטרוסקופיה אבחנתית',
  teaser: 'הקאות כרוניות, חשד ל-IBD, ירידה במשקל - ביופסיות ושט/קיבה/דאודנום מדויקות.',
  tag: 'תשובות למצבים כרוניים',
  href: '#'
},
{
  slug: 'cystoscopy',
  title: 'Cystoscopy',
  en: 'אנדוסקופיית שלפוחית',
  teaser: 'דם בשתן, אבני שלפוחית, דלקות חוזרות - אבחון ודגימה מדויקת דרך האורתרה.',
  tag: 'אבחנה ישירה בלי פרוצדורה פתוחה',
  href: '#'
},
{
  slug: 'colonoscopy',
  title: 'Colonoscopy',
  en: 'אנדוסקופיית מעי גס',
  teaser: 'שלשולים כרוניים, דם בצואה, חשד למחלת מעי דלקתית - דגימות מדויקות מהמעי הגס דרך פי הטבעת.',
  tag: 'אבחון מערכת עיכול תחתונה',
  href: '#'
},
{
  slug: 'foreign-body',
  title: 'Foreign Body Removal',
  en: 'הוצאת גוף זר',
  teaser: 'גרבי תינוקות, גרעיני אפרסק, צעצועים ועוד - הוצאה דרך הפה במקום ניתוח פתוח.',
  tag: 'הצלת חיים בלי ניתוח',
  href: '#'
}];


const CategoryLap = () =>
<section className="proc-category proc-category-lap">
    <div className="container">
      <div className="category-header">
        <div className="category-icon">
          <LapIcon />
        </div>
        <div>
          <span className="eyebrow">קטגוריה א׳</span>
          <h2>לפרוסקופיה</h2>
          <p className="lead">
            כירורגיה זעיר-פולשנית דרך 1-3 חתכים של 3-5 מ״מ בבטן. מצלמת HD ומכשור מיקרו-כירורגי מחליפים חתך פתוח של עד 15 ס״מ.
            <strong> 5 פרוצדורות.</strong>
          </p>
        </div>
      </div>
      <div className="proc-grid">
        {LAP_PROCEDURES.map((p) => <ProcedureCard key={p.slug} variant="lap" {...p} />)}
      </div>
    </div>
  </section>;


const CategoryEndo = () =>
<section className="proc-category proc-category-endo">
    <div className="container">
      <div className="category-header">
        <div className="category-icon">
          <EndoIcon />
        </div>
        <div>
          <span className="eyebrow">קטגוריה ב׳</span>
          <h2>אנדוסקופיה</h2>
          <p className="lead">
            אבחון וטיפול דרך פתחי גוף טבעיים - אף, קנה וסמפונות, ושט, קיבה, מעי, שלפוחית. ללא חתך כלל. מכשיר גמיש עם מצלמה ותעלה.
            <strong> 6 פרוצדורות.</strong>
          </p>
        </div>
      </div>
      <div className="proc-grid">
        {ENDO_PROCEDURES.map((p) => <ProcedureCard key={p.slug} variant="endo" {...p} />)}
      </div>
    </div>
  </section>;


const ProcedureCard = ({ variant, title, en, teaser, tag, href, slug }) =>
<a className={`proc-card proc-card-${variant}`} href={href}>
    <div className="proc-card-top">
      <span className="proc-card-tag">{tag}</span>
      <span className="proc-card-arrow" aria-hidden="true">←</span>
    </div>
    <div className="proc-card-body">
      <h3>{title}</h3>
      <div className="proc-card-en">{en}</div>
      <p>{teaser}</p>
    </div>
    <div className="proc-card-foot">
      <span>קראו עוד</span>
    </div>
  </a>;


const LapIcon = () =>
<svg viewBox="0 0 64 64" fill="none" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
    <circle cx="32" cy="32" r="30" stroke="currentColor" strokeWidth="1.5" opacity="0.25" />
    <path d="M16 32 L28 32 M36 32 L48 32" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
    <circle cx="22" cy="32" r="2.5" fill="currentColor" />
    <circle cx="32" cy="22" r="2.5" fill="currentColor" />
    <circle cx="42" cy="32" r="2.5" fill="currentColor" />
    <circle cx="32" cy="32" r="12" stroke="currentColor" strokeWidth="1.5" strokeDasharray="2 3" />
  </svg>;


const EndoIcon = () =>
<svg viewBox="0 0 64 64" fill="none" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 22 Q24 10 36 26 Q44 38 54 36" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" fill="none" />
    <circle cx="54" cy="36" r="5" fill="currentColor" />
    <circle cx="54" cy="36" r="2" fill="#fff" />
    <path d="M10 22 L6 18 M10 22 L6 26" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
  </svg>;


window.ProceduresHero = ProceduresHero;
window.CategoryLap = CategoryLap;
window.CategoryEndo = CategoryEndo;