/* Abstract decorative shapes — simple primitives only (circles, rects, lines, arcs).
   No hand-drawn people. Used for hero, page banners, team avatars. */

const { useMemo } = React;

// ---- Hero art: layered organic composition ----
function PPHeroArt() {
  return (
    <svg viewBox="0 0 500 600" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <defs>
        <linearGradient id="pp-h-grad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="var(--bg-card)" />
          <stop offset="1" stopColor="var(--bg)" />
        </linearGradient>
        <radialGradient id="pp-h-sun" cx="0.7" cy="0.3" r="0.5">
          <stop offset="0" stopColor="var(--hot)" stopOpacity="0.6" />
          <stop offset="1" stopColor="var(--hot)" stopOpacity="0" />
        </radialGradient>
      </defs>

      <rect width="500" height="600" fill="url(#pp-h-grad)" />

      {/* Glow */}
      <ellipse cx="380" cy="160" rx="240" ry="200" fill="url(#pp-h-sun)" />

      {/* Stacked arcs - "supporting layers" metaphor */}
      <g fill="none" strokeWidth="1.5">
        {Array.from({ length: 8 }).map((_, i) => (
          <circle
            key={i}
            cx="250"
            cy="540"
            r={120 + i * 38}
            stroke="var(--accent)"
            strokeOpacity={0.08 + i * 0.04}
          />
        ))}
      </g>

      {/* Solid disc */}
      <circle cx="250" cy="540" r="110" fill="var(--accent)" />
      <circle cx="250" cy="540" r="78" fill="var(--hot)" />
      <circle cx="250" cy="540" r="42" fill="var(--bg-elev)" />

      {/* Floating geometry */}
      <g>
        <circle cx="120" cy="180" r="36" fill="var(--ink)" />
        <circle cx="380" cy="380" r="14" fill="var(--accent-deep)" />
        <rect x="80" y="320" width="58" height="58" rx="12" fill="var(--hot)" transform="rotate(-12 109 349)" />
        <line x1="200" y1="80" x2="440" y2="80" stroke="var(--accent)" strokeWidth="1.5" />
        <line x1="200" y1="92" x2="380" y2="92" stroke="var(--accent)" strokeWidth="1.5" opacity="0.5" />
      </g>

      {/* Caption */}
      <text x="32" y="572" fill="var(--ink-mute)" fontFamily="IBM Plex Mono, monospace" fontSize="11" letterSpacing="2">
        EST · 1989 · LUBRANIEC
      </text>
    </svg>
  );
}

// ---- Section banner (small decorative strip) ----
function PPBanner({ tone = "warm" }) {
  return (
    <svg viewBox="0 0 1200 180" width="100%" height="180" preserveAspectRatio="xMidYMid slice" aria-hidden="true" style={{ display: "block", borderRadius: "var(--r-lg)" }}>
      <defs>
        <linearGradient id={`pp-b-${tone}`} x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stopColor="var(--bg-card)" />
          <stop offset="1" stopColor="var(--bg)" />
        </linearGradient>
      </defs>
      <rect width="1200" height="180" fill={`url(#pp-b-${tone})`} />
      {Array.from({ length: 18 }).map((_, i) => (
        <circle key={i} cx={70 + i * 64} cy="90" r={6 + (i % 5) * 4} fill={i % 3 === 0 ? "var(--hot)" : "var(--accent)"} opacity={0.6 - (i % 4) * 0.1} />
      ))}
      <line x1="0" y1="170" x2="1200" y2="170" stroke="var(--accent)" />
    </svg>
  );
}

// ---- Team avatar: deterministic geometric portrait (no human drawings) ----
function PPAvatar({ hue = 1, name = "" }) {
  // Take initials so the avatar still reads as a person
  const initials = useMemo(() => {
    const parts = name.replace(/^(mgr|dr|MA|PhD)\.?\s*/i, "").trim().split(/\s+/);
    return parts.slice(0, 2).map((p) => p[0] || "").join("").toUpperCase();
  }, [name]);

  const palettes = [
    ["#c97b4e", "#f7e3d2"],
    ["#8b6f47", "#efe8dc"],
    ["#6a5232", "#e8d5b5"],
    ["#a78b5f", "#f4e7d1"],
    ["#7e5a3a", "#ead4ba"],
    ["#b88555", "#f1dec3"],
    ["#9c6f3d", "#ecdcc0"],
    ["#5d4126", "#e3d0b3"],
  ];
  const [c1, c2] = palettes[(hue - 1) % palettes.length];

  return (
    <svg viewBox="0 0 240 240" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <rect width="240" height="240" fill={c2} />
      {/* big sun behind */}
      <circle cx="180" cy="80" r="56" fill={c1} opacity="0.45" />
      {/* base arc */}
      <circle cx="120" cy="270" r="120" fill={c1} />
      {/* foreground dot */}
      <circle cx="120" cy="160" r="34" fill={c2} />
      {/* initials */}
      <text
        x="120" y="172"
        textAnchor="middle"
        fontFamily="Source Serif 4, Georgia, serif"
        fontSize="32"
        fontStyle="italic"
        fill={c1}
      >
        {initials}
      </text>
      {/* dots */}
      <circle cx="36" cy="48" r="4" fill={c1} />
      <circle cx="208" cy="200" r="6" fill={c1} opacity="0.7" />
    </svg>
  );
}

// ---- Logo mark ----
function PPLogoMark() {
  return (
    <svg viewBox="0 0 48 48" width="48" height="48" aria-hidden="true">
      <rect width="48" height="48" rx="12" fill="var(--ink)" />
      <circle cx="32" cy="16" r="6" fill="var(--hot)" />
      <circle cx="16" cy="32" r="11" fill="var(--accent)" />
      <circle cx="16" cy="32" r="4" fill="var(--bg)" />
    </svg>
  );
}

// ---- Map illustration (Lubraniec area schematic; abstract, not a real map) ----
function PPMapArt() {
  return (
    <svg viewBox="0 0 600 460" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true" style={{ display: "block" }}>
      <defs>
        <pattern id="pp-grid" width="32" height="32" patternUnits="userSpaceOnUse">
          <path d="M32 0 L0 0 0 32" fill="none" stroke="var(--rule)" strokeWidth="0.5" />
        </pattern>
      </defs>
      <rect width="600" height="460" fill="var(--bg-card)" />
      <rect width="600" height="460" fill="url(#pp-grid)" />
      {/* river */}
      <path d="M -20 320 Q 120 280, 240 320 T 480 290 T 640 330" fill="none" stroke="var(--accent)" strokeOpacity="0.4" strokeWidth="22" strokeLinecap="round" />
      {/* roads */}
      <line x1="0" y1="200" x2="600" y2="220" stroke="var(--ink-mute)" strokeWidth="1.5" strokeDasharray="4 6" />
      <line x1="280" y1="0" x2="320" y2="460" stroke="var(--ink-mute)" strokeWidth="1.5" strokeDasharray="4 6" />
      {/* communes */}
      {[
        { x: 120, y: 140, l: "Boniewo" },
        { x: 220, y: 100, l: "Brześć Kuj." },
        { x: 400, y: 130, l: "Izbica Kuj." },
        { x: 480, y: 360, l: "Choceń" },
      ].map((s, i) => (
        <g key={i}>
          <circle cx={s.x} cy={s.y} r="7" fill="var(--accent)" />
          <text x={s.x + 14} y={s.y + 4} fontFamily="IBM Plex Mono, monospace" fontSize="10" fill="var(--ink-soft)" letterSpacing="0.5">
            {s.l}
          </text>
        </g>
      ))}
      {/* main pin */}
      <g>
        <circle cx="300" cy="240" r="22" fill="var(--hot)" opacity="0.18" />
        <circle cx="300" cy="240" r="12" fill="var(--hot)" />
        <circle cx="300" cy="240" r="4" fill="#fff" />
        <text x="300" y="216" textAnchor="middle" fontFamily="Source Serif 4, Georgia, serif" fontSize="18" fontStyle="italic" fill="var(--ink)">
          Lubraniec
        </text>
        <text x="300" y="276" textAnchor="middle" fontFamily="IBM Plex Mono, monospace" fontSize="10" letterSpacing="1" fill="var(--ink-mute)">
          PLAC DR. M. SZULCA 4
        </text>
      </g>

      {/* compass */}
      <g transform="translate(540, 60)">
        <circle r="22" fill="var(--bg-elev)" stroke="var(--rule)" />
        <text textAnchor="middle" y="-6" fontFamily="IBM Plex Mono, monospace" fontSize="10" fill="var(--ink-mute)">N</text>
        <line x1="0" y1="-12" x2="0" y2="12" stroke="var(--ink)" strokeWidth="1" />
      </g>
    </svg>
  );
}

// ---- Service category icon (geometric only) ----
function PPServiceIcon({ idx }) {
  const variants = [
    // 0 — concentric circles
    <g key="a">
      <circle cx="24" cy="24" r="18" stroke="currentColor" strokeWidth="1.5" fill="none" />
      <circle cx="24" cy="24" r="10" stroke="currentColor" strokeWidth="1.5" fill="none" />
      <circle cx="24" cy="24" r="3" fill="currentColor" />
    </g>,
    // 1 — overlapping rounded squares
    <g key="b">
      <rect x="6" y="6" width="24" height="24" rx="6" stroke="currentColor" strokeWidth="1.5" fill="none" />
      <rect x="18" y="18" width="24" height="24" rx="6" stroke="currentColor" strokeWidth="1.5" fill="none" />
    </g>,
    // 2 — three dots in arc (sound wave-like)
    <g key="c">
      <path d="M6 30 Q24 6 42 30" stroke="currentColor" strokeWidth="1.5" fill="none" />
      <circle cx="6" cy="30" r="3" fill="currentColor" />
      <circle cx="24" cy="14" r="3" fill="currentColor" />
      <circle cx="42" cy="30" r="3" fill="currentColor" />
    </g>,
    // 3 — book lines
    <g key="d">
      <rect x="8" y="10" width="32" height="28" rx="2" stroke="currentColor" strokeWidth="1.5" fill="none" />
      <line x1="14" y1="18" x2="34" y2="18" stroke="currentColor" strokeWidth="1.5" />
      <line x1="14" y1="24" x2="34" y2="24" stroke="currentColor" strokeWidth="1.5" />
      <line x1="14" y1="30" x2="26" y2="30" stroke="currentColor" strokeWidth="1.5" />
    </g>,
    // 4 — sparkle / sensory
    <g key="e">
      <path d="M24 6 L26 22 L42 24 L26 26 L24 42 L22 26 L6 24 L22 22 Z" fill="currentColor" />
    </g>,
    // 5 — seedling
    <g key="f">
      <line x1="24" y1="42" x2="24" y2="20" stroke="currentColor" strokeWidth="1.5" />
      <path d="M24 22 Q12 18 12 8 Q24 12 24 22 Z" fill="currentColor" />
      <path d="M24 22 Q36 18 36 8 Q24 12 24 22 Z" fill="currentColor" opacity="0.5" />
    </g>,
  ];
  return (
    <svg viewBox="0 0 48 48" width="48" height="48" aria-hidden="true" style={{ color: "var(--accent-deep)" }}>
      {variants[idx % variants.length]}
    </svg>
  );
}

Object.assign(window, { PPHeroArt, PPBanner, PPAvatar, PPLogoMark, PPMapArt, PPServiceIcon });
