// S5 - Doctor
const DoctorCard = () => {
  return (
    <section id="about">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">רפואה מתקדמת בגישה אישית</span>
          <h2>הכירו את ד״ר דניאל דורפמן</h2>
        </div>

        <div className="doctor-grid">
          <div className="doctor-photo">
            <img src="assets/doctor-portrait.jpg" alt="ד״ר דניאל דורפמן" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </div>
          <div>
            <p className="lead">
              מנתח וטרינרי עם ניסיון קליני מקליניקות מובילות ברחבי הארץ. הקמתי את LumiVet במטרה להביא את בשורת הרפואה הזעיר-פולשנית לבעלי החיים בישראל.
              <br/><br/>
              כל הליך מתוכנן ומבוצע על ידי באופן אישי, מתוך מחויבות לדיוק מקסימלי, מינימום כאב וחזרה מהירה של חיית המחמד שלכם לחיים בריאים ומאושרים.
              <br/><br/>
              שקיפות, חמלה, וניסיון הם לא פריבילגיה, הם הסטנדרט.
            </p>

            <div className="credentials">
              <div className="credential">
                <div className="credential-icon"><GraduationIcon size={20} /></div>
                <div className="credential-text">
                  <strong>האוניברסיטה העברית בירושלים</strong>
                  בוגר בית הספר לרפואה וטרינרית
                </div>
              </div>
              <div className="credential">
                <div className="credential-icon"><AwardIcon size={20} /></div>
                <div className="credential-text">
                  <strong>הכשרות מתקדמות — אירופה וארה״ב</strong>
                  לפרוסקופיה ואנדוסקופיה וטרינרית
                </div>
              </div>
              <div className="credential">
                <div className="credential-icon"><StethoscopeIcon size={20} /></div>
                <div className="credential-text">
                  <strong>נסיון קליני עשיר</strong>
                  בקליניקות וטרינריות מובילות ברחבי ישראל
                </div>
              </div>
            </div>

            <a href="/about.html" className="btn btn-ghost mt-24" style={{ marginTop: 24 }}>
              קראו את הסיפור המלא
              <ArrowIcon size={18} style={{ transform: 'scaleX(-1)' }} />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

const DrDorfmanSVG = () => (
  <svg viewBox="0 0 400 500" width="100%" height="100%" style={{ display: 'block' }} aria-label="ד״ר דורפמן בחלוק לבן">
    <defs>
      <linearGradient id="bgd" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#F0F4FF"/>
        <stop offset="1" stopColor="#E0E8FF"/>
      </linearGradient>
    </defs>
    <rect width="400" height="500" fill="url(#bgd)"/>
    {/* coat */}
    <path d="M80 500 L80 340 Q80 290 140 270 L260 270 Q320 290 320 340 L320 500 Z" fill="#FFFFFF"/>
    {/* shadow under coat */}
    <path d="M80 500 L80 340 Q80 290 140 270 L260 270 Q320 290 320 340 L320 500 Z" fill="none" stroke="#E4E8F0" strokeWidth="1"/>
    {/* collar V */}
    <path d="M180 270 L200 320 L220 270 Z" fill="#E8EEFF"/>
    {/* navy shirt */}
    <path d="M170 270 L200 330 L230 270 Z" fill="#000E34"/>
    {/* stethoscope */}
    <path d="M165 285 Q155 350 170 400 Q180 420 210 410" stroke="#000E34" strokeWidth="3" fill="none"/>
    <circle cx="213" cy="408" r="10" fill="#0046FF"/>
    <circle cx="213" cy="408" r="5" fill="#001862"/>
    {/* neck */}
    <rect x="180" y="240" width="40" height="40" fill="#E8BFA0"/>
    {/* head */}
    <ellipse cx="200" cy="200" rx="62" ry="68" fill="#F0CBA6"/>
    {/* hair */}
    <path d="M140 190 Q140 120 200 120 Q260 120 260 190 L250 175 Q240 145 200 145 Q160 145 150 175 Z" fill="#2C1810"/>
    {/* beard subtle */}
    <path d="M162 220 Q200 250 238 220 Q232 245 200 255 Q168 245 162 220 Z" fill="#4A2F1E" opacity="0.4"/>
    {/* eyebrows */}
    <path d="M170 180 Q178 176 188 180" stroke="#2C1810" strokeWidth="3" fill="none" strokeLinecap="round"/>
    <path d="M212 180 Q222 176 230 180" stroke="#2C1810" strokeWidth="3" fill="none" strokeLinecap="round"/>
    {/* eyes */}
    <ellipse cx="179" cy="195" rx="4" ry="3.5" fill="#1F2937"/>
    <ellipse cx="221" cy="195" rx="4" ry="3.5" fill="#1F2937"/>
    <circle cx="180" cy="194" r="1" fill="#fff"/>
    <circle cx="222" cy="194" r="1" fill="#fff"/>
    {/* nose */}
    <path d="M196 200 Q194 215 200 222 Q206 215 204 200" stroke="#C89976" strokeWidth="1.5" fill="none"/>
    {/* smile */}
    <path d="M184 230 Q200 240 216 230" stroke="#8B3E2F" strokeWidth="2.2" fill="none" strokeLinecap="round"/>
    {/* LumiVet badge on coat */}
    <rect x="220" y="340" width="70" height="22" rx="4" fill="#F0F4FF" stroke="#0046FF" strokeWidth="1"/>
    <text x="255" y="355" textAnchor="middle" fontSize="11" fill="#0046FF" fontFamily="Fredoka" fontWeight="600">LumiVet</text>
  </svg>
);

window.DoctorCard = DoctorCard;