// S6 - Recovery Stories
const Stories = () => {
  const stories = [
  {
    name: 'נולה',
    breed: 'גולדן רטריבר · 3 שנים',
    procedure: 'העיקור העדין (Lap OVE)',
    owner: 'שני, רמת גן',
    quote: 'הבאתי אותה בבוקר עם החרדה שלי, והחזרנו אותה בערב ישר לפארק. 24 שעות אחר כך היא כבר רצה אחרי הכדור. אני עדיין לא מאמינה.',
    color: '#E8C287',
    img: 'assets/story-nola.jpg'
  },
  {
    name: 'אווה',
    breed: 'דוברמן · 2 שנים',
    procedure: 'העיקור העדין (Lap OVE)',
    owner: 'יובל, תל אביב',
    quote: 'חיפשנו חלופה לעיקור הפתוח כי פחדנו מההחלמה. שני חתכים זעירים, בלי צווארון, בלי תפרים חיצוניים. למחרת בבוקר היא כבר ביקשה לצאת לטיול כרגיל.',
    color: '#C9B8A0',
    img: 'assets/story-1.jpg'
  },
  {
    name: 'צ׳ארלי',
    breed: 'פקינז · 4 שנים',
    procedure: 'Lap Cryptorchid (אשך טמיר)',
    owner: 'עדי ונועם, הרצליה',
    quote: 'הווטרינר שלנו הפנה אותנו ללומיווט כי זה "המקרה שהוא עושה מצוין". יום אחד, שני חתכים של 5 מ״מ, בלי צווארון, בלי דרמה. חזרנו לתפרים — והוא הראה לנו את הסרטון של הפרוצדורה.',
    color: '#E4A8A8',
    img: 'assets/story-3.jpg'
  }];


  return (
    <section>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">אחרי 24 שעות</span>
          <h2>בלי צווארון, בלי סבל: החזרה המהירה לשגרה בעיניים של הבעלים</h2>
          <p className="subtitle mt-8">שלושה סיפורים, 3 פרוצדורה.  ככה נראות 24 השעות הראשונות אחרי כירורגיה זעיר-פולשנית.</p>
        </div>
        <div className="stories-wrap">
          <div className="stories-track">
            {stories.map((s, i) =>
            <article className="story-card" key={i}>
                <div className="story-photo" style={{ background: `linear-gradient(160deg, ${s.color}, #F8F6F2)` }}>
                  <img src={s.img} alt={s.name} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', position: 'absolute', inset: 0 }} />
                </div>
                <div className="story-body">
                  <div className="story-meta">
                    <strong style={{ color: '#000E34', fontWeight: 600 }}>{s.name}</strong>
                    <span>·</span>
                    <span>{s.breed}</span>
                  </div>
                  <span className="story-proc-tag">{s.procedure}</span>
                  <p className="story-quote">{s.quote}</p>
                  <div className="story-owner">— {s.owner}</div>
                  <span className="story-example-tag">
                    <span style={{ width: 8, height: 8, background: '#D9D9D9', borderRadius: '50%' }}></span>
                    מאי 2026
                  </span>
                </div>
              </article>
            )}
          </div>
        </div>
      </div>
    </section>);

};

const StoryDogSVG = ({ color }) =>
<svg viewBox="0 0 320 240" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
    <rect width="320" height="240" fill="transparent" />
    <ellipse cx="160" cy="230" rx="200" ry="30" fill="rgba(0,0,0,0.08)" />
    {/* body */}
    <ellipse cx="180" cy="170" rx="64" ry="42" fill={color} />
    {/* head */}
    <circle cx="130" cy="140" r="42" fill={color} />
    {/* snout */}
    <ellipse cx="108" cy="150" rx="20" ry="15" fill="#F8EDD8" />
    {/* ears */}
    <path d="M100 112 Q88 95 100 132 Z" fill="#8B5A2B" opacity="0.7" />
    <path d="M158 115 Q168 98 158 135 Z" fill="#8B5A2B" opacity="0.7" />
    {/* eye */}
    <circle cx="130" cy="135" r="3" fill="#000E34" />
    <circle cx="129" cy="134" r="1" fill="#fff" />
    {/* nose */}
    <ellipse cx="94" cy="148" rx="5" ry="3.5" fill="#1F2937" />
    {/* happy mouth */}
    <path d="M98 158 Q108 168 122 160" stroke="#1F2937" strokeWidth="1.8" fill="none" strokeLinecap="round" />
    {/* tongue */}
    <ellipse cx="111" cy="163" rx="3.5" ry="2" fill="#F4A2A2" />
    {/* tail - wagging */}
    <path d="M240 160 Q270 140 278 120" stroke={color} strokeWidth="18" strokeLinecap="round" fill="none" />
  </svg>;


window.Stories = Stories;