/* global React */
// Stylized portrait of supervisor "加瀬豪" — SVG so we don't depend on a real photo.
function Portrait({ size = 220 }) {
  return (
    <svg viewBox="0 0 220 220" width={size} height={size} aria-label="加瀬豪 監修者ポートレート">
      <defs>
        <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#1f47a0"/>
          <stop offset="100%" stopColor="#0a1f44"/>
        </linearGradient>
        <linearGradient id="suit" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#1a2540"/>
          <stop offset="100%" stopColor="#0a1325"/>
        </linearGradient>
        <linearGradient id="skin" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#f0d3b8"/>
          <stop offset="100%" stopColor="#d9b291"/>
        </linearGradient>
        <clipPath id="circle"><circle cx="110" cy="110" r="110"/></clipPath>
      </defs>
      <g clipPath="url(#circle)">
        <rect width="220" height="220" fill="url(#bg)"/>
        {/* shoulders / suit */}
        <path d="M-20 230 C 20 170, 60 160, 110 158 C 160 160, 200 170, 240 230 Z" fill="url(#suit)"/>
        {/* shirt */}
        <path d="M75 185 L110 165 L145 185 L145 230 L75 230 Z" fill="#f4f6f9"/>
        {/* tie */}
        <path d="M105 165 L115 165 L118 200 L110 215 L102 200 Z" fill="#5a7fb8"/>
        {/* neck */}
        <path d="M95 145 L125 145 L125 168 L95 168 Z" fill="url(#skin)"/>
        <path d="M95 165 L125 165 L125 168 L95 168 Z" fill="#b8967a" opacity=".5"/>
        {/* head */}
        <ellipse cx="110" cy="105" rx="38" ry="44" fill="url(#skin)"/>
        {/* hair */}
        <path d="M70 95 C 70 55, 150 55, 150 95 C 150 80, 142 70, 130 68 C 130 60, 95 55, 80 75 C 75 80, 70 88, 70 95 Z" fill="#1a1a1a"/>
        <path d="M72 100 C 75 85, 90 78, 110 78 C 130 78, 145 85, 148 100 L 145 92 C 135 86, 122 84, 110 84 C 95 84, 82 88, 75 95 Z" fill="#0c0c0c"/>
        {/* brows */}
        <path d="M86 100 q 7 -3 14 0" stroke="#1a1a1a" strokeWidth="2.6" fill="none" strokeLinecap="round"/>
        <path d="M120 100 q 7 -3 14 0" stroke="#1a1a1a" strokeWidth="2.6" fill="none" strokeLinecap="round"/>
        {/* eyes */}
        <ellipse cx="93" cy="110" rx="3" ry="2.2" fill="#0c0c0c"/>
        <ellipse cx="127" cy="110" rx="3" ry="2.2" fill="#0c0c0c"/>
        {/* nose */}
        <path d="M110 113 L 106 128 Q 110 131 114 128 Z" fill="#c79a7a" opacity=".35"/>
        {/* mouth */}
        <path d="M100 138 q 10 4 20 0" stroke="#8a4f3b" strokeWidth="2" fill="none" strokeLinecap="round"/>
        {/* subtle cheek */}
        <ellipse cx="86" cy="125" rx="6" ry="3.5" fill="#e89c8a" opacity=".25"/>
        <ellipse cx="134" cy="125" rx="6" ry="3.5" fill="#e89c8a" opacity=".25"/>
        {/* lapel highlight */}
        <path d="M70 230 L100 175 L110 178 L110 230 Z" fill="#243358" opacity=".7"/>
        <path d="M150 230 L120 175 L110 178 L110 230 Z" fill="#243358" opacity=".7"/>
      </g>
    </svg>
  );
}

// Larger hero version
function HeroPortrait() {
  return (
    <div style={{ position: "relative", width: "100%", height: "100%", display:"flex", justifyContent:"center", alignItems:"end" }}>
      <svg viewBox="0 0 380 540" width="100%" style={{ maxWidth: 460, height: "auto", filter: "drop-shadow(0 20px 40px rgba(0,0,0,.4))" }}>
        <defs>
          <linearGradient id="hsuit" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#1a2540"/>
            <stop offset="100%" stopColor="#06101f"/>
          </linearGradient>
          <linearGradient id="hskin" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#f0d3b8"/>
            <stop offset="100%" stopColor="#d9b291"/>
          </linearGradient>
        </defs>
        {/* suit body */}
        <path d="M40 540 C 60 380, 100 350, 190 348 C 280 350, 320 380, 340 540 Z" fill="url(#hsuit)"/>
        {/* shirt */}
        <path d="M140 400 L190 360 L240 400 L240 540 L140 540 Z" fill="#f4f6f9"/>
        {/* tie */}
        <path d="M180 360 L200 360 L208 460 L190 500 L172 460 Z" fill="#3a5a92"/>
        <path d="M180 360 L200 360 L204 380 L184 380 Z" fill="#5a7fb8"/>
        {/* neck */}
        <path d="M165 320 L215 320 L215 365 L165 365 Z" fill="url(#hskin)"/>
        <path d="M165 360 L215 360 L215 365 L165 365 Z" fill="#b8967a" opacity=".5"/>
        {/* head */}
        <ellipse cx="190" cy="240" rx="62" ry="76" fill="url(#hskin)"/>
        {/* hair (side-parted, professional) */}
        <path d="M125 220 C 125 130, 255 125, 255 220 C 255 200, 248 175, 230 168 C 230 145, 175 135, 150 165 C 138 178, 128 200, 125 220 Z" fill="#1a1a1a"/>
        <path d="M128 230 C 132 200, 155 188, 190 188 C 225 190, 248 200, 252 232 L 245 215 C 230 205, 210 200, 188 200 C 165 200, 145 208, 132 222 Z" fill="#0a0a0a"/>
        {/* brows */}
        <path d="M155 230 q 14 -5 28 0" stroke="#1a1a1a" strokeWidth="4" fill="none" strokeLinecap="round"/>
        <path d="M198 230 q 14 -5 28 0" stroke="#1a1a1a" strokeWidth="4" fill="none" strokeLinecap="round"/>
        {/* eyes */}
        <ellipse cx="167" cy="248" rx="4.5" ry="3" fill="#0a0a0a"/>
        <ellipse cx="213" cy="248" rx="4.5" ry="3" fill="#0a0a0a"/>
        {/* nose */}
        <path d="M190 252 L 184 280 Q 190 285 196 280 Z" fill="#c79a7a" opacity=".4"/>
        {/* mouth */}
        <path d="M174 298 q 16 5 32 0" stroke="#8a4f3b" strokeWidth="3" fill="none" strokeLinecap="round"/>
        {/* cheeks */}
        <ellipse cx="148" cy="278" rx="10" ry="6" fill="#e89c8a" opacity=".22"/>
        <ellipse cx="232" cy="278" rx="10" ry="6" fill="#e89c8a" opacity=".22"/>
        {/* lapel */}
        <path d="M40 540 L150 400 L160 408 L160 540 Z" fill="#243358" opacity=".55"/>
        <path d="M340 540 L230 400 L220 408 L220 540 Z" fill="#243358" opacity=".55"/>
        {/* arms folded suggestion */}
        <path d="M70 540 L120 460 L 150 470 L 150 540 Z" fill="#0a1325"/>
        <path d="M310 540 L260 460 L 230 470 L 230 540 Z" fill="#0a1325"/>
      </svg>
    </div>
  );
}

window.Portrait = Portrait;
window.HeroPortrait = HeroPortrait;