// S4 - CostPlanner
const CostPlanner = () => {
  const [animal, setAnimal] = React.useState('dog'); // dog | cat
  const [weight, setWeight] = React.useState(15);
  const [addons, setAddons] = React.useState({ cbc: false, urine: false, probnp: false, third: false });
  const [showIncludes, setShowIncludes] = React.useState(false);

  const addonPrices = { cbc: 500, urine: 200, probnp: 200, third: animal === 'cat' ? 200 : 1600 };
  const addonsList = React.useMemo(() => {
    const list = [
      { id: 'cbc', title: 'בדיקת דם מלאה', desc: 'בדיקת דם לפני הפרוצדורה — חובה, אפשר להגיע עם בדיקה מהוטרינר הרגיל שלכם (3 חודשים מקס׳).' },
      { id: 'urine', title: 'בדיקת שתן מלאה', desc: 'בדיקת שתן מקיפה להערכת תפקוד כליות ודרכי שתן לפני ההרדמה.' },
    ];
    if (animal === 'cat') {
      list.push({ id: 'probnp', title: 'בדיקת Pro-BNP', desc: 'סמן דם לאיתור מחלת לב נסתרת בחתולים — נפוצה ולרוב ללא תסמינים. מומלץ לפני הרדמה.' });
      list.push({ id: 'third', title: 'בדיקת T4 (תריס)', desc: 'בדיקת תפקוד בלוטת התריס — מומלצת לחתולות מבוגרות לאיתור היפר-תירואידיזם.' });
    } else {
      list.push({ id: 'third', title: 'Lap Gastropexy COMBO', desc: 'מניעת GDV בגזעים גדולים — חיסכון של 20%' });
    }
    return list;
  }, [animal]);

  const basePrice = React.useMemo(() => {
    const w = parseFloat(weight) || 0;
    if (w <= 10) return 1950;
    if (w <= 20) return 2150;
    if (w <= 30) return 2450;
    if (w <= 40) return 2800;
    return 3200;
  }, [weight]);

  const total = React.useMemo(() => {
    let t = basePrice;
    if (addons.cbc) t += addonPrices.cbc;
    if (addons.urine) t += addonPrices.urine;
    if (animal === 'cat' && addons.probnp) t += addonPrices.probnp;
    if (addons.third) t += addonPrices.third;
    return t;
  }, [basePrice, addons, animal]);

  const fmt = (n) => new Intl.NumberFormat('he-IL').format(n);

  const waMessage = `שלום, אני מתעניין/ת בעיקור עדין ל${animal === 'dog' ? 'כלבה' : 'חתולה'} שלי (${weight} ק״ג). ראיתי במחשבון מחיר של ${fmt(total)} ₪. אשמח להצעה מדויקת 🐾`;
  const waLink = `https://wa.me/97233035033?text=${encodeURIComponent(waMessage)}`;

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

        <div className="planner-wrap">
          <div className="planner-form">
            <h3>פרטי המטופל/ת</h3>

            <div className="field-group">
              <label className="field-label">סוג החיה</label>
              <div className="segment">
                <button className={animal === 'dog' ? 'on' : ''} onClick={() => setAnimal('dog')}>
                  🐕 כלבה
                </button>
                <button className={animal === 'cat' ? 'on' : ''} onClick={() => setAnimal('cat')}>
                  🐈 חתולה
                </button>
              </div>
            </div>

            <div className="field-group">
              <label className="field-label">משקל בק״ג</label>
              <div className="weight-row">
                <input
                  type="number"
                  className="weight-input"
                  min="1" max="80" step="0.5"
                  value={weight}
                  onChange={(e) => setWeight(e.target.value)}
                />
                <span className="weight-unit">ק״ג</span>
              </div>
              <input
                type="range"
                className="weight-slider"
                min="1" max="80" step="0.5"
                value={weight}
                onChange={(e) => setWeight(parseFloat(e.target.value))}
              />
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: '#6B7280', marginTop: 4 }}>
                <span>1 ק״ג</span>
                <span>40 ק״ג</span>
                <span>80 ק״ג</span>
              </div>
            </div>

            <div className="field-group">
              <label className="field-label">תוספות אופציונליות</label>
              <div className="addons">
                {addonsList.map(a => (
                  <label key={a.id} className={`addon ${addons[a.id] ? 'checked' : ''}`}>
                    <input type="checkbox" style={{ display: 'none' }}
                      checked={addons[a.id]}
                      onChange={() => setAddons({ ...addons, [a.id]: !addons[a.id] })}
                    />
                    <span className="check">
                      {addons[a.id] && <CheckIcon size={14} stroke={3} />}
                    </span>
                    <div style={{ flex: 1 }}>
                      <div className="addon-title">{a.title}</div>
                      <div className="addon-desc">{a.desc}</div>
                    </div>
                    <span className="addon-price">+{fmt(addonPrices[a.id])} ₪</span>
                  </label>
                ))}
              </div>
            </div>
          </div>

          <div className="planner-result">
            <div className="price-label">מחיר מוערך</div>
            <div className="price-amount">
              <span className="currency">₪</span>
              <span className="count-up">{fmt(total)}</span>
            </div>
            <div className="price-range">
              מחיר בסיס: {fmt(basePrice)} ₪ · משקל: {weight} ק״ג
            </div>

            <div className="includes">
              <button className="includes-header" onClick={() => setShowIncludes(!showIncludes)}
                      style={{ background: 'transparent', color: '#fff', width: '100%' }}>
                <span>מה כלול במחיר?</span>
                <ChevronDownIcon size={18} style={{ transform: showIncludes ? 'rotate(180deg)' : 'none', transition: 'transform .2s' }} />
              </button>
              {showIncludes && (
                <ul className="includes-list">
                  <li><CheckIcon size={18} className="check-icon" /> כל חומרי ההרדמה + ניטור מתקדם</li>
                  <li><CheckIcon size={18} className="check-icon" /> הפרוצדורה הכירורגית המלאה</li>
                  <li><CheckIcon size={18} className="check-icon" /> תרופות להחלמה (משככי כאב + אנטיביוטיקה)</li>
                  <li><CheckIcon size={18} className="check-icon" /> מעקב WhatsApp צמוד של ד״ר דורפמן ב־48 שעות הראשונות</li>
                  <li><CheckIcon size={18} className="check-icon" /> ללא תוספות נסתרות</li>
                </ul>
              )}
            </div>

            <a href={waLink} className="btn btn-primary btn-lg" style={{ justifyContent: 'center' }}>
              <WhatsappIcon size={20} />
              קבלו את ההצעה המדויקת ב־WhatsApp
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};
window.CostPlanner = CostPlanner;