// Elegant placeholder portrait illustrations — soft, editorial
// Easy to swap with real photos later by changing the src

const PortraitPlaceholder = ({ variant = "hero", className, style }) => {
  const variants = {
    hero: (
      <svg viewBox="0 0 400 520" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%", display: "block" }}>
        <defs>
          <linearGradient id="bgHero" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#e6ebe0" />
            <stop offset="1" stopColor="#c9d5bf" />
          </linearGradient>
          <linearGradient id="skinHero" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#e8c9a8" />
            <stop offset="1" stopColor="#d4a87f" />
          </linearGradient>
          <linearGradient id="hairHero" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#4a3726" />
            <stop offset="1" stopColor="#2a1f15" />
          </linearGradient>
        </defs>
        <rect width="400" height="520" fill="url(#bgHero)" />
        {/* soft leaves background */}
        <g opacity="0.3">
          <path d="M30 80 Q60 60 80 90 Q60 110 30 80z" fill="#8ba384" />
          <path d="M340 420 Q370 400 390 430 Q370 450 340 420z" fill="#8ba384" />
          <path d="M350 120 Q380 100 400 130" stroke="#8ba384" strokeWidth="2" fill="none" />
          <path d="M20 440 Q50 420 70 450" stroke="#8ba384" strokeWidth="2" fill="none" />
        </g>
        {/* body/shoulders */}
        <path d="M80 520 Q80 400 160 380 Q200 375 240 380 Q320 400 320 520 Z" fill="#fbf8f2" />
        <path d="M80 520 Q80 400 160 380 Q200 375 240 380 Q320 400 320 520 Z" fill="#f5efe3" opacity="0.6" />
        {/* neck */}
        <path d="M175 370 Q175 400 200 405 Q225 400 225 370 Z" fill="url(#skinHero)" />
        {/* face */}
        <ellipse cx="200" cy="280" rx="70" ry="85" fill="url(#skinHero)" />
        {/* hair */}
        <path d="M130 260 Q125 180 200 170 Q275 180 270 260 Q275 300 265 320 Q255 280 250 240 Q245 220 240 225 Q235 280 230 310 L220 310 Q218 250 210 235 Q208 275 205 310 L195 310 Q192 250 190 235 Q185 275 180 310 L170 310 Q165 280 160 240 Q155 220 150 225 Q145 280 140 320 Q130 300 130 260 Z" fill="url(#hairHero)" />
        {/* hair loose strands */}
        <path d="M145 320 Q140 380 155 420" stroke="#2a1f15" strokeWidth="8" fill="none" strokeLinecap="round" />
        <path d="M255 320 Q260 380 250 430" stroke="#2a1f15" strokeWidth="8" fill="none" strokeLinecap="round" />
        {/* eyes */}
        <ellipse cx="178" cy="285" rx="5" ry="3" fill="#2a1f15" />
        <ellipse cx="222" cy="285" rx="5" ry="3" fill="#2a1f15" />
        {/* brows */}
        <path d="M170 274 Q178 271 187 274" stroke="#3a2a1a" strokeWidth="2.5" fill="none" strokeLinecap="round" />
        <path d="M213 274 Q222 271 230 274" stroke="#3a2a1a" strokeWidth="2.5" fill="none" strokeLinecap="round" />
        {/* nose */}
        <path d="M200 295 Q197 315 200 322 Q203 324 206 322" stroke="#b88863" strokeWidth="1.5" fill="none" strokeLinecap="round" />
        {/* lips */}
        <path d="M188 340 Q200 335 212 340 Q200 348 188 340 Z" fill="#c2795f" />
        <path d="M188 340 Q200 345 212 340" stroke="#a55e43" strokeWidth="1" fill="none" />
        {/* earrings hint */}
        <circle cx="136" cy="295" r="3" fill="#d4a574" />
        <circle cx="264" cy="295" r="3" fill="#d4a574" />
      </svg>
    ),
    square: (
      <svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%", display: "block" }}>
        <defs>
          <linearGradient id="bgSq" x1="0" x2="1" y1="0" y2="1">
            <stop offset="0" stopColor="#f5efe3" />
            <stop offset="1" stopColor="#ece3d1" />
          </linearGradient>
        </defs>
        <rect width="400" height="400" fill="url(#bgSq)" />
        {/* plate with food */}
        <circle cx="200" cy="200" r="140" fill="#fbf8f2" stroke="#ece3d1" strokeWidth="2" />
        <circle cx="200" cy="200" r="120" fill="none" stroke="#e6d9c0" strokeWidth="1" />
        {/* greens */}
        <g>
          <path d="M150 180 Q130 160 120 180 Q115 200 135 205 Q150 200 150 180z" fill="#6b8762" />
          <path d="M140 170 L160 200" stroke="#3f5339" strokeWidth="1.5" fill="none" />
          <path d="M155 195 Q140 210 130 230 Q125 245 145 243 Q165 235 155 195z" fill="#8ba384" />
        </g>
        {/* tomato */}
        <circle cx="230" cy="175" r="22" fill="#c9764e" />
        <circle cx="225" cy="170" r="5" fill="#e8a584" opacity="0.7" />
        <path d="M225 158 Q230 152 235 158" stroke="#556e4e" strokeWidth="2" fill="none" />
        {/* grain */}
        <ellipse cx="210" cy="230" rx="30" ry="14" fill="#e8c9a8" />
        <ellipse cx="205" cy="228" rx="4" ry="2" fill="#d4a87f" opacity="0.6" />
        <ellipse cx="215" cy="232" rx="4" ry="2" fill="#d4a87f" opacity="0.6" />
        {/* avocado */}
        <ellipse cx="160" cy="240" rx="18" ry="12" fill="#8ba384" transform="rotate(-25 160 240)" />
        <ellipse cx="160" cy="240" rx="8" ry="5" fill="#556e4e" transform="rotate(-25 160 240)" />
        {/* seeds */}
        <circle cx="250" cy="220" r="2" fill="#4a3726" />
        <circle cx="258" cy="225" r="2" fill="#4a3726" />
        <circle cx="245" cy="230" r="2" fill="#4a3726" />
      </svg>
    ),
    portrait: (
      <svg viewBox="0 0 320 400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%", display: "block" }}>
        <defs>
          <linearGradient id="bgP" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#f5efe3" />
            <stop offset="1" stopColor="#e6ebe0" />
          </linearGradient>
          <linearGradient id="skinP" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#e8c9a8" />
            <stop offset="1" stopColor="#d4a87f" />
          </linearGradient>
        </defs>
        <rect width="320" height="400" fill="url(#bgP)" />
        {/* coat */}
        <path d="M60 400 Q60 300 130 285 Q160 282 190 285 Q260 300 260 400 Z" fill="#ffffff" />
        <path d="M130 285 L160 340 L190 285" stroke="#ece3d1" strokeWidth="2" fill="none" />
        {/* neck */}
        <path d="M143 280 Q143 300 160 304 Q177 300 177 280 Z" fill="url(#skinP)" />
        {/* face */}
        <ellipse cx="160" cy="210" rx="55" ry="68" fill="url(#skinP)" />
        {/* hair pulled back */}
        <path d="M105 200 Q100 130 160 122 Q220 130 215 200 Q215 170 210 160 Q205 150 200 155 L160 150 L120 155 Q115 150 110 160 Q105 170 105 200z" fill="#3a2818" />
        {/* bun */}
        <ellipse cx="160" cy="135" rx="30" ry="18" fill="#2a1f15" />
        {/* eyes */}
        <ellipse cx="142" cy="216" rx="4" ry="2.5" fill="#2a1f15" />
        <ellipse cx="178" cy="216" rx="4" ry="2.5" fill="#2a1f15" />
        <path d="M134 207 Q142 204 150 207" stroke="#3a2a1a" strokeWidth="2" fill="none" strokeLinecap="round" />
        <path d="M170 207 Q178 204 186 207" stroke="#3a2a1a" strokeWidth="2" fill="none" strokeLinecap="round" />
        {/* smile */}
        <path d="M148 258 Q160 265 172 258" stroke="#a55e43" strokeWidth="2" fill="none" strokeLinecap="round" />
        {/* lips */}
        <path d="M150 255 Q160 252 170 255 Q160 261 150 255" fill="#c2795f" />
        {/* stethoscope */}
        <path d="M140 305 Q135 330 155 340" stroke="#2a2520" strokeWidth="2" fill="none" />
        <path d="M180 305 Q185 330 165 340" stroke="#2a2520" strokeWidth="2" fill="none" />
        <circle cx="160" cy="350" r="10" fill="#c9d5bf" stroke="#556e4e" strokeWidth="1.5" />
      </svg>
    )
  };

  return <div className={className} style={style}>{variants[variant] || variants.hero}</div>;
};

Object.assign(window, { PortraitPlaceholder });
