// S1 - Hero
const Hero = () => {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-grid">
          <div>
            <span className="eyebrow">סטנדרט חדש בוטרינריה מתקדמת</span>
            <h1 style={{ color: '#000E34' }}>3-5 מ״מ, 24 שעות, בלי צווארון</h1>
            <p className="lead">
              כירורגיה זעיר-פולשנית בהובלת ד”ר דניאל דורפמן: טכנולוגיה מתקדמת ודיוק מקסימלי לחזרה מהירה לשגרה עם מינימום כאב
            </p>
            <div className="hero-ctas">
              <a href="https://wa.me/97233035033?text=שלום, אני מתעניין/ת בעיקור עדין לכלב/ה שלי 🐾"
              className="btn btn-primary btn-lg">
                <WhatsappIcon size={20} />
                שלחו לנו הודעה
              </a>
              <a href="#how-it-works" className="btn btn-ghost">
                למדו איך זה עובד
                <ChevronDownIcon size={18} />
              </a>
            </div>
            <div className="trust-strip">
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <ShieldIcon size={20} style={{ color: '#0046FF' }} />
                <span><strong>ציוד מבית Karl Storz</strong> · ברמת בית חולים</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <MapIcon size={20} style={{ color: '#0046FF' }} />
                <span><strong>דיזנגוף 255</strong> · תל אביב</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <ClockIcon size={20} style={{ color: '#0046FF' }} />
                <span><strong>מענה Whatsapp</strong> · תוך 2 שעות</span>
              </div>
            </div>
          </div>
          <div className="hero-media">
            <div className="dog-illus">
              <img src="https://static.wixstatic.com/media/b1e7f1_d20bf4ae1c69491b9484b64f24039e60~mv2.png" alt="כלב רגוע" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 40%', display: 'block' }} />
            </div>
            <div className="hero-badge">
              <span className="pulse-dot"></span>
              נולה · 24 שעות אחרי
            </div>
            <div className="hero-card-floating">
              <div className="avatar">ד</div>
              <div className="text">
                <strong>ד״ר דניאל דורפמן</strong>
                <span style={{ color: '#6B7280' }}>עונה ב־WhatsApp עכשיו</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

};

// SVG stock dog illustration (placeholder-style warm silhouette)
const DogSVG = () =>
<svg viewBox="0 0 400 440" width="100%" style={{ display: 'block' }} aria-label="כלב רגוע - תמונת סטוק">
    <defs>
      <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#E8EEFF" />
        <stop offset="1" stopColor="#F8F6F2" />
      </linearGradient>
      <linearGradient id="dogFur" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#E8C287" />
        <stop offset="1" stopColor="#C9944F" />
      </linearGradient>
      <linearGradient id="ground" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#DCD3C3" />
        <stop offset="1" stopColor="#C4B79F" />
      </linearGradient>
    </defs>
    <rect width="400" height="440" fill="url(#sky)" />
    {/* soft sun */}
    <circle cx="330" cy="80" r="48" fill="#FFF3E0" opacity="0.7" />
    {/* ground */}
    <ellipse cx="200" cy="430" rx="260" ry="60" fill="url(#ground)" />
    {/* grass blades */}
    {[40, 90, 130, 340, 370].map((x, i) =>
  <path key={i} d={`M${x} 400 Q${x + 4} 380 ${x + 8} 400`} stroke="#8FA573" strokeWidth="2" fill="none" />
  )}
    {/* dog body */}
    <ellipse cx="200" cy="320" rx="88" ry="58" fill="url(#dogFur)" />
    {/* back leg */}
    <ellipse cx="140" cy="370" rx="18" ry="28" fill="#B78540" />
    <ellipse cx="260" cy="370" rx="18" ry="28" fill="#B78540" />
    {/* tail - slightly wagging */}
    <path d="M280 290 Q330 260 340 230" stroke="url(#dogFur)" strokeWidth="22" strokeLinecap="round" fill="none" />
    {/* chest */}
    <ellipse cx="158" cy="300" rx="30" ry="40" fill="#F0D89E" />
    {/* head */}
    <ellipse cx="140" cy="230" rx="58" ry="56" fill="url(#dogFur)" />
    {/* snout */}
    <ellipse cx="108" cy="250" rx="28" ry="22" fill="#F0D89E" />
    {/* ears */}
    <path d="M100 185 Q80 165 92 215 Z" fill="#9B6B2A" />
    <path d="M180 190 Q195 170 188 225 Z" fill="#9B6B2A" />
    {/* eye */}
    <circle cx="135" cy="225" r="4" fill="#0F172A" />
    <circle cx="134" cy="223" r="1.4" fill="#fff" />
    {/* nose */}
    <ellipse cx="88" cy="246" rx="6" ry="4" fill="#1F2937" />
    {/* mouth - smile */}
    <path d="M95 258 Q108 268 122 260" stroke="#1F2937" strokeWidth="2" fill="none" strokeLinecap="round" />
    {/* tongue hint */}
    <path d="M108 262 Q112 272 115 262" fill="#F4A2A2" />
  </svg>;


window.Hero = Hero;