// Gentle Spay - page sections

// Hero
const GSHero = ({ waUrl }) => {
  const [voice, setVoice] = React.useState(() => window.__gsVoice || 'direct');
  React.useEffect(() => {
    const handler = () => setVoice(window.__gsVoice || 'direct');
    window.addEventListener('gs-voice-change', handler);
    return () => window.removeEventListener('gs-voice-change', handler);
  }, []);
  const copy = window.GS_VOICE_COPY && window.GS_VOICE_COPY[voice] || {
    eyebrow: '★ הדגל של לומיווט', h1a: 'העיקור', h1b: 'העדין',
    sub: 'אותה הפרוצדורה. ללא כאב מיותר. ללא צווארון. חזרה לשגרה ב־24 שעות.'
  };
  return (
    <section className="gs-hero">
    <div className="container">
      <div className="gs-hero-grid">
        <div>
          <span className="gs-flag-badge">{copy.eyebrow}</span>
          <h1 style={{ fontFamily: "Fredoka" }}>{copy.h1a}<br />{copy.h1b}</h1>
          <p className="gs-hero-sub">{copy.sub}</p>
          <div className="gs-hero-bullets">
            <div className="gs-hero-bullet"><span className="check"><CheckIcon size={14} /></span>1-2 חתכים של 3-5 מ״מ במקום חתך של עד 15 ס״מ</div>
            <div className="gs-hero-bullet"><span className="check"><CheckIcon size={14} /></span>חזרה מלאה לשגרה תוך 24 שעות</div>
            <div className="gs-hero-bullet"><span className="check"><CheckIcon size={14} /></span>ללא צווארון אליזבטי, ללא אשפוז</div>
            <div className="gs-hero-bullet"><span className="check"><CheckIcon size={14} /></span>מעקב WhatsApp צמוד 48 שעות עם ד״ר דורפמן</div>
          </div>
          <div className="hero-ctas">
            <a href={waUrl} className="btn btn-primary btn-lg">
              <WhatsappIcon size={20} />
              קבלו הצעת מחיר ב-WhatsApp
            </a>
            <a href="#cost" className="btn btn-ghost">חישוב מחיר אישי</a>
          </div>
        </div>
        <div>
          <div className="gs-hero-image">
            <img src="assets/gentle-spay-hero.jpg" alt="כלבה וחתול רגועים יחד — חזרה מהירה לשגרה אחרי העיקור העדין" />
            <div className="gs-hero-card">
              <div className="num">24h</div>
              <div className="label">חזרה מלאה לשגרה<br /><strong style={{ color: 'var(--navy)' }}>אחרי הפרוצדורה</strong></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>);

};

// What + Why
const GSWhatWhy = () =>
<section className="gs-what">
    <div className="container">
      <div className="section-head" style={{ maxWidth: 780 }}>
        <span className="eyebrow">מה זה ולמה זה שונה</span>
        <h2>לא רק חתך קטן יותר - פרוצדורה אחרת לגמרי</h2>
      </div>
      <div className="gs-what-grid mt-32" style={{ marginTop: 48 }}>
        <div>
          <p>העיקור המסורתי דורש חתך של עד <strong>15 ס״מ בבטן</strong> — וזה מה שמייצר את הכאב, את הצווארון, ואת ההחלמה הארוכה.</p>
          <p>העיקור העדין של לומיווט מתבצע דרך <strong>1-2 חתכים של 3-5 מ״מ בלבד</strong>, עם מצלמת HD והגדלה פי 10. הראייה הכירורגית בהירה יותר מאשר בעין בלתי אמושת — מה שמתורגם לפחות פגיעה ברקמות, פחות איבוד דם, ויותר דיוק.</p>
          <p>התוצאה: הכלבה/החתולה שלכם חוזרת לשגרה מלאה בתוך 24 שעות. בלי תפרים גדולים. בלי צווארון. בלי שבועיים של מנוחה כפויה.</p>
        </div>
        <div>
          <div className="gs-what-quote">
            חתך של 3-5 מ״מ, 24 שעות חזרה לשגרה - זה לא הבטחה, זה הסטנדרט של לומיווט.
            <span className="attribution">— ד״ר דניאל דורפמן</span>
          </div>
        </div>
      </div>
    </div>
  </section>;


// Comparison Table — full 6 rows
const GSComparisonTable = () => {
  const rows = [
  ['גודל חתך', 'עד 15 ס״מ', '5 מ״מ'],
  ['טראומה לרקמות', 'משמעותית', '90% פחות'],
  ['חזרה לשגרה', 'שבועיים', '24 שעות'],
  ['צווארון אליזבטי', 'חובה', 'לא נדרש'],
  ['ראייה כירורגית', 'בעין בלתי אמושת', 'HD + הגדלה פי 10'],
  ['אופי הפרוצדורה', 'ניתוח', 'פרוצדורה זעיר-פולשנית']];

  return (
    <section className="gs-comparison">
      <div className="container">
        <div className="section-head center">
          <span className="eyebrow">השוואה מלאה</span>
          <h2>ראש בראש: עיקור מסורתי מול העיקור העדין</h2>
        </div>
        <div className="gs-table-wrap mt-32" style={{ marginTop: 40 }}>
          <table className="gs-table">
            <thead>
              <tr>
                <th>פרמטר</th>
                <th>עיקור מסורתי</th>
                <th className="lumi">העיקור העדין</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) =>
              <tr key={i}>
                  <td className="row-label">{r[0]}</td>
                  <td className="trad">{r[1]}</td>
                  <td className="lumi">{r[2]}</td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </section>);

};

// Journey - 5 steps
const GSJourney = () => {
  const steps = [
  { n: '1', title: 'הודעה ב-WhatsApp', desc: 'מענה אישי מדניאל בתוך שעתיים. בלי בוט, בלי טופס.' },
  { n: '2', title: 'שיחת ייעוץ', desc: '10-15 דקות. כל השאלות נענות. מחיר מדויק.' },
  { n: '3', title: 'יום הפרוצדורה', desc: 'הכלבה מגיעה בבוקר. פרוצדורה של 45-60 דקות.' },
  { n: '4', title: 'חזרה הביתה', desc: 'בערב אותו היום. ללא אשפוז, ללא צווארון.' },
  { n: '5', title: 'מעקב', desc: '24 שעות, שבוע, חודש — הכל ב-WhatsApp ישירות עם דניאל.' }];

  return (
    <section className="gs-journey">
      <div className="container">
        <div className="section-head center">
          <span className="eyebrow">המסלול</span>
          <h2>מהודעה ראשונה - עד חזרה הביתה</h2>
          <p className="subtitle mt-8">חמישה שלבים. ביקור פיזי אחד במרפאה. השאר ב-WhatsApp.</p>
        </div>
        <div className="gs-journey-track">
          {steps.map((s, i) =>
          <div className="gs-journey-step" key={i}>
              <div className="num-badge">{s.n}</div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

};

// Equipment
const GSEquipment = () =>
<section className="gs-equipment">
    <div className="container">
      <div className="gs-equipment-row">
        <div className="gs-equipment-text">
          <span className="eyebrow on-dark">הציוד שלנו</span>
          <h2>הסטנדרט של בתי החולים האוניברסיטאיים</h2>
          <p>אותו ציוד שמשמש את המרכזים הכירורגיים המובילים בעולם - Karl Storz ו-Erbe מגרמניה. לא פשרות, לא חיקויים.</p>
        </div>
        <div className="gs-equipment-scene-wrap">
          <div className="gs-equipment-scene">
            <img className="gs-equipment-img--tower" src="assets/karl-storz-tower.png" alt="Karl Storz HD tower" />
            <img className="gs-equipment-img--erbe" src="assets/erbe-vio3.png" alt="Erbe VIO 3" />
          </div>
          <div className="gs-equipment-caption">
            <span>Karl Storz<em>גרמניה</em></span>
            <span className="sep">·</span>
            <span>Erbe VIO 3<em>אלקטרוכירורגיה</em></span>
          </div>
        </div>
      </div>
    </div>
  </section>;


// FAQ for gentle-spay (10 questions)
const GSFaq = () => {
  const items = [
  { q: 'מה זה עיקור לפרוסקופי?', a: 'עיקור לפרוסקופי (העיקור העדין) הוא הוצאת השחלות דרך 1-2 חתכים זעירים של 5 מ״מ בבטן, עם מצלמת HD והגדלה פי 10. במקום חתך פתוח של עד 15 ס״מ.' },
  { q: 'למה זה עדיף על עיקור מסורתי?', a: 'פחות טראומה לרקמות, פחות כאב, חזרה מלאה לשגרה ב-24 שעות במקום שבועיים, ללא צווארון אליזבטני (קונוס), ועם ראייה כירורגית מדויקת בהרבה.' },
  { q: 'באיזה גיל כדאי לעקר?', a: 'בדרך כלל החל מגיל 6 חודשים. דניאל ייתן המלצה ספציפית לכלבה/לחתולה שלכם בשיחת הייעוץ - תלוי בגזע, במשקל ובמצב כללי.' },
  { q: 'כמה זמן לוקחת הפרוצדורה עצמה?', a: 'פחות מ-45 דקות בממוצע. הכלבה מגיעה בבוקר, ובאותו יום היא בבית.' },
  { q: 'האם הכלבה/החתולה תצטרך אשפוז?', a: 'לא. בכמעט 100% מהמקרים הכלבה/החתולה חוזרת הביתה באותו היום, בערב.' },
  { q: 'מה לגבי הצווארון האליזבטני (קונוס)?', a: 'לא נדרש. החתכים זעירים מכדי שכלבה תוכל "להגיע" אליהם, וההחלמה מהירה כל-כך שאין זמן לסיבוכים.' },
  { q: 'מה כלול במחיר?', a: 'הכל: חומרי הרדמה, הפרוצדורה, תרופות אחרי הפרוצדורה, ומעקב WhatsApp צמוד של ד״ר דורפמן ב-48 השעות הראשונות. ללא תוספות נסתרות.' },
  { q: 'מה הסיכונים?', a: 'בכל פרוצדורה כירורגית יש סיכונים. בלפרוסקופיה הסיכונים נמוכים יותר מאשר בכירורגיה פתוחה - פחות איבוד דם, פחות זיהומים, פחות סיבוכי הרדמה. דניאל יסקור איתכם את כל הסיכונים בשיחת הייעוץ.' },
  { q: 'האם צריך בדיקות דם לפני?', a: 'בדיקת דם לפני הפרוצדורה היא חובה. אפשר להגיע עם בדיקה מהוטרינר הרגיל שלכם (שנעשתה עד 3 חודשים לפני העיקור העדין), או לבצע אצלנו בתוספת תשלום.' },
  { q: 'מתי אפשר לטייל עם הכלבה שוב?', a: 'מטיול קצר באותו ערב, ולשגרה מלאה - לעיתים כבר אחרי 24 שעות.' }];

  return (
    <section id="faq">
      <div className="container">
        <div className="section-head center">
          <span className="eyebrow">שאלות נפוצות</span>
          <h2>10 שאלות שנשאלות לפני העיקור העדין</h2>
        </div>
        <div className="faq-list" style={{ maxWidth: 880, margin: '40px auto 0' }}>
          {items.map((it, i) => <GSFaqItem key={i} q={it.q} a={it.a} />)}
        </div>
      </div>
    </section>);

};

const GSFaqItem = ({ 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="faq-icon">{open ? '−' : '+'}</span>
      </button>
      {open && <div className="faq-a">{a}</div>}
    </div>);

};

// Single big recovery story
const GSStory = () =>
<section className="gs-story">
    <div className="container">
      <div className="section-head center">
        <span className="eyebrow">אחרי 24 שעות</span>
        <h2>הסיפור של נולה</h2>
      </div>
      <div className="gs-story-card mt-32" style={{ marginTop: 40 }}>
        <div className="gs-story-photo">
          <img src="assets/story-nola.jpg" alt="נולה — אחרי העיקור העדין" />
          <span className="timestamp">24 שעות אחרי</span>
        </div>
        <div className="gs-story-body">
          <span className="eyebrow">נולה · גולדן רטריבר · בת 3 שנים</span>
          <h3>"אני עדיין לא מאמינה."</h3>
          <blockquote>הבאתי אותה בבוקר עם החרדה שלי, והחזרנו אותה למחרת ישר לפארק. 24 שעות אחר כך היא כבר רצה אחרי הכדור.

        </blockquote>
          <div className="owner">- שני, רמת גן</div>
          <span className="gs-story-tag"><span className="dot"></span>2026</span>
        </div>
      </div>
    </div>
  </section>;


window.GSHero = GSHero;
window.GSWhatWhy = GSWhatWhy;
window.GSComparisonTable = GSComparisonTable;
window.GSJourney = GSJourney;
window.GSEquipment = GSEquipment;
window.GSFaq = GSFaq;
window.GSStory = GSStory;