// Generative SVG portrait + image abstractions for cards.
// Uses brand accent + paper tones; intentionally editorial, not photographic.

const Portrait = ({ accent = "#b4321f" }) => (
  <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
    <defs>
      <linearGradient id="bg-pg" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#d6cdb8" />
        <stop offset="100%" stopColor="#a89c80" />
      </linearGradient>
      <linearGradient id="silh" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#3a3d40" />
        <stop offset="100%" stopColor="#16181a" />
      </linearGradient>
      <pattern id="halftone" x="0" y="0" width="6" height="6" patternUnits="userSpaceOnUse">
        <circle cx="3" cy="3" r="0.7" fill="rgba(20,20,20,0.18)" />
      </pattern>
    </defs>
    <rect width="400" height="500" fill="url(#bg-pg)" />
    <rect width="400" height="500" fill="url(#halftone)" />
    {/* Accent bar */}
    <rect x="0" y="0" width="14" height="500" fill={accent} />
    {/* Silhouette — abstract shoulders + head */}
    <g transform="translate(200, 230)">
      <ellipse cx="0" cy="-30" rx="62" ry="76" fill="url(#silh)" />
      <path d="M -130 240 Q -130 90 0 90 Q 130 90 130 240 Z" fill="url(#silh)" />
      {/* collar/shirt suggestion */}
      <path d="M -38 110 L 0 175 L 38 110 L 38 240 L -38 240 Z" fill="#16181a" />
      <path d="M -38 110 L 0 175 L 38 110" stroke="rgba(255,255,255,0.08)" strokeWidth="1" fill="none" />
    </g>
    {/* Crop marks */}
    <g stroke="rgba(20,20,20,0.5)" strokeWidth="1">
      <line x1="20" y1="20" x2="36" y2="20" />
      <line x1="20" y1="20" x2="20" y2="36" />
      <line x1="380" y1="20" x2="364" y2="20" />
      <line x1="380" y1="20" x2="380" y2="36" />
      <line x1="20" y1="480" x2="36" y2="480" />
      <line x1="20" y1="480" x2="20" y2="464" />
      <line x1="380" y1="480" x2="364" y2="480" />
      <line x1="380" y1="480" x2="380" y2="464" />
    </g>
  </svg>
);

const PostArt1 = ({ accent }) => (
  <svg viewBox="0 0 400 320" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
    <rect width="400" height="320" fill="#1f2a30" />
    {/* Ascending bars: DRG efficiency over time */}
    {[40, 70, 60, 100, 130, 110, 150, 180, 200, 240].map((h, i) => (
      <rect key={i} x={20 + i * 36} y={300 - h} width="22" height={h} fill={i < 5 ? "#d8d3c7" : accent} opacity={i < 5 ? 0.55 : 1} />
    ))}
    {/* baseline */}
    <line x1="0" y1="300" x2="400" y2="300" stroke="rgba(255,255,255,0.4)" strokeWidth="1" />
    {/* axis labels */}
    <text x="20" y="30" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="2" fill="#d8d3c7" opacity="0.55">FIG.01 — DRG INDEX 2012–2024</text>
    <text x="380" y="316" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.5" fill="#d8d3c7" opacity="0.55" textAnchor="end">QUELLE: BFS</text>
  </svg>
);

const PostArt2 = ({ accent }) => (
  <svg viewBox="0 0 400 320" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
    <rect width="400" height="320" fill="#ebe4d6" />
    {/* Network nodes — care coordination */}
    <g stroke="#16181a" strokeWidth="0.7" fill="none" opacity="0.4">
      <line x1="80" y1="80" x2="200" y2="160" />
      <line x1="320" y1="80" x2="200" y2="160" />
      <line x1="80" y1="240" x2="200" y2="160" />
      <line x1="320" y1="240" x2="200" y2="160" />
      <line x1="80" y1="80" x2="320" y2="80" />
      <line x1="80" y1="240" x2="320" y2="240" />
      <line x1="80" y1="80" x2="80" y2="240" />
      <line x1="320" y1="80" x2="320" y2="240" />
    </g>
    {[[80,80],[320,80],[80,240],[320,240]].map(([x,y],i)=>(
      <circle key={i} cx={x} cy={y} r="14" fill="#16181a" />
    ))}
    <circle cx="200" cy="160" r="22" fill={accent} />
    <text x="200" y="164" textAnchor="middle" fontFamily="Source Serif 4, serif" fontStyle="italic" fontSize="14" fill="#fff">CN</text>
    <text x="20" y="305" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="2" fill="#3a3d40">FIG.02 — INTEGRATED CARE NETWORK</text>
  </svg>
);

const PostArt3 = ({ accent }) => (
  <svg viewBox="0 0 400 320" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
    <rect width="400" height="320" fill={accent} />
    {/* Big "%" symbol */}
    <text x="200" y="220" textAnchor="middle" fontFamily="Source Serif 4, serif" fontStyle="italic" fontSize="280" fill="#faf6ee" opacity="0.95">%</text>
    <text x="20" y="305" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="2" fill="#faf6ee" opacity="0.7">FIG.03 — TARIFE 2026</text>
  </svg>
);

const PostArt4 = ({ accent }) => (
  <svg viewBox="0 0 400 320" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
    <rect width="400" height="320" fill="#16181a" />
    {/* Concentric rings — population health */}
    {[140, 110, 80, 50, 25].map((r, i) => (
      <circle key={i} cx="200" cy="160" r={r} fill="none"
        stroke={i === 0 ? accent : "#d8d3c7"}
        strokeWidth={i === 0 ? 2 : 1}
        opacity={i === 0 ? 1 : 0.4 - i * 0.05} />
    ))}
    <circle cx="200" cy="160" r="6" fill={accent} />
    <text x="20" y="305" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="2" fill="#d8d3c7" opacity="0.55">FIG.04 — VERSORGUNGSDICHTE</text>
  </svg>
);

window.Portrait = Portrait;
window.PostArt1 = PostArt1;
window.PostArt2 = PostArt2;
window.PostArt3 = PostArt3;
window.PostArt4 = PostArt4;
