// Abstract partner portraits rendered as SVG — silhouettes + geometry, no stock imagery.

const P_COMMON = {
  strokeLinecap: "round",
  strokeLinejoin: "round",
};

const Portrait = ({ kind = "a", accent = "#A52525" }) => {
  const g = "#B8963E";
  const ink = "#E8E6E1";
  const mute = "rgba(232,230,225,0.08)";

  const Inner = () => {
    switch (kind) {
      case "a":
        // Caroline — crisp silhouette, monogram block
        return (
          <g>
            <rect x="0" y="0" width="200" height="230" fill="none" />
            <path d="M100 38c-22 0-38 16-38 38 0 18 9 30 20 36-26 8-42 28-46 58-1 8 0 14 4 18h120c4-4 5-10 4-18-4-30-20-50-46-58 11-6 20-18 20-36 0-22-16-38-38-38z"
                  fill="#1b1b20" stroke="rgba(232,230,225,0.18)" strokeWidth="1" />
            <line x1="24" y1="184" x2="176" y2="184" stroke={accent} strokeWidth="1" opacity=".55" />
            <text x="18" y="26" fill={g} fontFamily="'Bodoni Moda', serif" fontSize="14" letterSpacing="4">C.P.</text>
            <text x="176" y="26" textAnchor="end" fill="rgba(232,230,225,0.35)" fontFamily="'JetBrains Mono', monospace" fontSize="9" letterSpacing="3">PARTNER · 042</text>
          </g>
        );
      case "b":
        // Victoria — silhouette with profile line
        return (
          <g>
            <path d="M60 230V120c0-22 18-40 40-40s40 18 40 40v110" fill="#1b1b20" stroke="rgba(232,230,225,0.16)" />
            <circle cx="100" cy="64" r="26" fill="#1b1b20" stroke="rgba(232,230,225,0.18)" />
            <path d="M72 100c6 6 16 10 28 10s22-4 28-10" stroke={accent} strokeWidth="1" fill="none" opacity=".7" />
            <line x1="24" y1="184" x2="176" y2="184" stroke={accent} strokeWidth="1" opacity=".55" />
            <text x="18" y="26" fill={g} fontFamily="'Bodoni Moda', serif" fontSize="14" letterSpacing="4">V.R.</text>
            <text x="176" y="26" textAnchor="end" fill="rgba(232,230,225,0.35)" fontFamily="'JetBrains Mono', monospace" fontSize="9" letterSpacing="3">PARTNER · 018</text>
          </g>
        );
      case "c":
        // Marcus — angular block silhouette
        return (
          <g>
            <path d="M58 230V124c0-14 10-26 24-30l18-6 18 6c14 4 24 16 24 30v106" fill="#1b1b20" stroke="rgba(232,230,225,0.16)" />
            <rect x="74" y="40" width="52" height="52" fill="#1b1b20" stroke="rgba(232,230,225,0.2)" />
            <line x1="74" y1="66" x2="126" y2="66" stroke={accent} strokeWidth="1" opacity=".6" />
            <line x1="24" y1="184" x2="176" y2="184" stroke={accent} strokeWidth="1" opacity=".55" />
            <text x="18" y="26" fill={g} fontFamily="'Bodoni Moda', serif" fontSize="14" letterSpacing="4">M.W.</text>
            <text x="176" y="26" textAnchor="end" fill="rgba(232,230,225,0.35)" fontFamily="'JetBrains Mono', monospace" fontSize="9" letterSpacing="3">PARTNER · 073</text>
          </g>
        );
      case "d":
        // Diane — softer silhouette
        return (
          <g>
            <path d="M54 230V130c0-28 20-50 46-50s46 22 46 50v100" fill="#1b1b20" stroke="rgba(232,230,225,0.16)" />
            <path d="M74 74c0-18 12-32 26-32s26 14 26 32v12H74z" fill="#1b1b20" stroke="rgba(232,230,225,0.2)" />
            <path d="M82 120c4 4 10 6 18 6s14-2 18-6" stroke={accent} fill="none" opacity=".6" />
            <line x1="24" y1="184" x2="176" y2="184" stroke={accent} strokeWidth="1" opacity=".55" />
            <text x="18" y="26" fill={g} fontFamily="'Bodoni Moda', serif" fontSize="14" letterSpacing="4">D.K.</text>
            <text x="176" y="26" textAnchor="end" fill="rgba(232,230,225,0.35)" fontFamily="'JetBrains Mono', monospace" fontSize="9" letterSpacing="3">PARTNER · 029</text>
          </g>
        );
    }
  };

  return (
    <svg viewBox="0 0 200 230" preserveAspectRatio="xMidYMid meet">
      <defs>
        <pattern id={"ln"+kind} width="3" height="3" patternUnits="userSpaceOnUse">
          <rect width="3" height="3" fill="transparent"/>
          <line x1="0" y1="0" x2="0" y2="3" stroke="rgba(232,230,225,0.035)"/>
        </pattern>
      </defs>
      <rect width="200" height="230" fill={`url(#ln${kind})`} />
      <Inner />
    </svg>
  );
};

window.Portrait = Portrait;
