// S2 - Split Comparison + Stats
const SplitComparison = () => {
  const [stats, setStats] = React.useState({ t: 0, s: 0, z: 0, a: 0 });
  const sectionRef = React.useRef(null);

  React.useEffect(() => {
    if (!sectionRef.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          animateStats();
          io.disconnect();
        }
      });
    }, { threshold: 0.3 });
    io.observe(sectionRef.current);
    return () => io.disconnect();
  }, []);

  const animateStats = () => {
    const targets = { t: 90, s: 4, z: 10, a: 0 };
    const duration = 1400;
    const start = performance.now();
    const tick = (now) => {
      const p = Math.min(1, (now - start) / duration);
      const e = 1 - Math.pow(1 - p, 3);
      setStats({
        t: Math.round(targets.t * e),
        s: Math.round(targets.s * e * 10) / 10,
        z: Math.round(targets.z * e),
        a: 0
      });
      if (p < 1) requestAnimationFrame(tick);
    };
    requestAnimationFrame(tick);
  };

  return (
    <section className="section-surface" ref={sectionRef}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">הבדל שרואים, הבדל שמרגישים</span>
          <h2>כירורגיה מסורתית מול הסטנדרט של לומיווט</h2>
          <p className="subtitle mt-8">אותה המטרה הרפואית - פרוצדורה שונה לגמרי. ההבדל הוא לא רק בגודל החתך, אלא בכל מה שקורה אחריו.</p>
        </div>

        <div className="compare-grid">
          <div className="compare-card">
            <h3>
              <span className="tag">מסורתי</span>
              כירורגיה פתוחה
            </h3>
            <div className="compare-visual" style={{ background: '#EDE7E0' }}>
              <img src="https://static.wixstatic.com/media/b1e7f1_79c2eeae03574641b36ade224d401f45~mv2.png" alt="חתך גדול מסורתי" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', position: 'absolute', inset: 0 }} />
            </div>
            <div className="compare-metrics">
              <div className="compare-metric">
                <span className="label">גודל חתך</span>
                <span className="value">עד 15 ס״מ</span>
              </div>
              <div className="compare-metric">
                <span className="label">חזרה לשגרה</span>
                <span className="value">שבועיים</span>
              </div>
              <div className="compare-metric">
                <span className="label">צווארון אליזבטי</span>
                <span className="value">חובה</span>
              </div>
            </div>
          </div>

          <div className="compare-card highlight">
            <h3>
              <span className="tag">לומיווט</span>
              העיקור העדין
            </h3>
            <div className="compare-visual">
              <img src="https://static.wixstatic.com/media/b1e7f1_b39a643bc49a43b0ba98db8033522829~mv2.png" alt="חתכים זעירים של העיקור העדין" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', position: 'absolute', inset: 0 }} />
            </div>
            <div className="compare-metrics">
              <div className="compare-metric">
                <span className="label">גודל חתך</span>
                <span className="value">3-5 מ״מ × 1-2</span>
              </div>
              <div className="compare-metric">
                <span className="label">חזרה לשגרה</span>
                <span className="value">פחות מ-24 שעות</span>
              </div>
              <div className="compare-metric">
                <span className="label">צווארון אליזבטי</span>
                <span className="value">לא נדרש</span>
              </div>
            </div>
          </div>
        </div>

        <div className="stats-row">
          <div className="stat">
            <div className="num"><span className="count-up">{stats.t}</span><span className="unit">%</span></div>
            <div className="stat-label">פחות טראומה לרקמות</div>
          </div>
          <div className="stat">
            <div className="num" style={{ direction: 'rtl' }}>פי <span className="count-up">{stats.s}</span></div>
            <div className="stat-label">מהיר יותר לחזרה לשגרה</div>
          </div>
          <div className="stat">
            <div className="num" style={{ direction: 'rtl' }}>פי <span className="count-up">{stats.z}</span></div>
            <div className="stat-label">הגדלה בראייה הכירורגית (HD)</div>
          </div>
          <div className="stat">
            <div className="num">0</div>
            <div className="stat-label">ימי אשפוז</div>
          </div>
        </div>
        <p className="stats-footnote">
          ״פי 4 מהיר יותר״ = זמן חזרה לפעילות יומיומית מלאה לעומת עיקור פתוח מסורתי. מקור: מחקר השוואתי + נתוני הקליניקה המארחת.
        </p>
      </div>
    </section>);

};

const TraditionalCutSVG = () =>
<svg viewBox="0 0 320 200" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
    <rect width="320" height="200" fill="#E5D9C7" />
    {/* belly shape */}
    <ellipse cx="160" cy="110" rx="130" ry="60" fill="#F0E0C6" />
    <ellipse cx="160" cy="120" rx="115" ry="45" fill="#F8EDD8" />
    {/* 15cm incision */}
    <line x1="80" y1="110" x2="240" y2="110" stroke="#BF124D" strokeWidth="5" strokeLinecap="round" />
    {/* suture marks */}
    {[90, 110, 130, 150, 170, 190, 210, 230].map((x, i) =>
  <React.Fragment key={i}>
        <line x1={x} y1="100" x2={x} y2="120" stroke="#8B0B38" strokeWidth="1.4" strokeLinecap="round" />
        <line x1={x - 3} y1="103" x2={x + 3} y2="117" stroke="#8B0B38" strokeWidth="1.4" strokeLinecap="round" />
      </React.Fragment>
  )}
    <text x="160" y="175" textAnchor="middle" fontSize="13" fill="#000E34" fontFamily="Fredoka" fontWeight="500">15 ס״מ</text>
    {/* ruler */}
    <g transform="translate(80, 86)">
      <line x1="0" y1="0" x2="160" y2="0" stroke="#000E34" strokeWidth="1" strokeDasharray="3 2" />
      <line x1="0" y1="-4" x2="0" y2="4" stroke="#000E34" strokeWidth="1" />
      <line x1="160" y1="-4" x2="160" y2="4" stroke="#000E34" strokeWidth="1" />
    </g>
  </svg>;


const LumivetCutSVG = () =>
<svg viewBox="0 0 320 200" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
    <rect width="320" height="200" fill="#E8EEFF" />
    <ellipse cx="160" cy="110" rx="130" ry="60" fill="#F0F4FF" />
    <ellipse cx="160" cy="120" rx="115" ry="45" fill="#F8FAFF" />
    {/* 3 tiny 5mm incisions */}
    {[125, 160, 195].map((x, i) =>
  <g key={i}>
        <circle cx={x} cy="110" r="9" fill="none" stroke="#0046FF" strokeWidth="1.2" strokeDasharray="2 2" opacity="0.5" />
        <line x1={x - 2.5} y1="110" x2={x + 2.5} y2="110" stroke="#0046FF" strokeWidth="2.5" strokeLinecap="round" />
      </g>
  )}
    {/* zoom callout */}
    <g transform="translate(220, 50)">
      <circle cx="0" cy="0" r="26" fill="#fff" stroke="#0046FF" strokeWidth="1.5" />
      <line x1="2.5" y1="-1" x2="-2.5" y2="-1" stroke="#0046FF" strokeWidth="3" strokeLinecap="round" />
      <line x1="18" y1="18" x2="32" y2="32" stroke="#0046FF" strokeWidth="3" strokeLinecap="round" />
      <text x="0" y="14" textAnchor="middle" fontSize="10" fill="#0046FF" fontFamily="Fredoka" fontWeight="600">5 מ״מ</text>
    </g>
    <text x="160" y="175" textAnchor="middle" fontSize="13" fill="#000E34" fontFamily="Fredoka" fontWeight="500">2-3 × 5 מ״מ</text>
  </svg>;


window.SplitComparison = SplitComparison;