// Logo exploration — four figure-based directions for HUMAN-Stiftung
// All marks share a 48×48 viewBox and the same construction language
// (head = circle, body = line, limbs = stroked curves).

// ─── Logo Mark 1: Mensch hält die Welt ────────────────────────────────
// Figure with roots; the right arm is raised high and carries an orb on
// the hand — the dot is no longer a fruit on the crown but the Earth
// being held aloft.  Orb colour is swappable for country variants.
//   accent       — fill colour of the orb (white, country colours, …)
//   accentStroke — optional stroke on the orb (used for the white variant
//                  so it stays visible on light backgrounds)
const Mark1 = ({
  size = 48,
  primary = '#1C5560',
  accent = '#ffffff',
  accentStroke = '#1C5560',
}) => (
  <svg width={size} height={size} viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    {/* Head */}
    <circle cx="24" cy="14" r="6" fill={primary} />
    {/* Trunk / body */}
    <line x1="24" y1="20" x2="24" y2="33" stroke={primary} strokeWidth="3" strokeLinecap="round" />
    {/* Left branch / lower arm — still tree-like */}
    <path d="M 24 23 Q 17 22 14 18" stroke={primary} strokeWidth="3" fill="none" strokeLinecap="round" />
    {/* Right arm — raised high, carries the orb on the hand */}
    <path d="M 24 23 Q 35 14 33 5" stroke={primary} strokeWidth="3" fill="none" strokeLinecap="round" />
    {/* Orb / Erde — held aloft */}
    <circle
      cx="33"
      cy="5"
      r="2.8"
      fill={accent}
      stroke={accentStroke || 'none'}
      strokeWidth={accentStroke ? 1 : 0}
    />
    {/* Legs — standing stance, spreading from hips to feet */}
    <line x1="24" y1="33" x2="18" y2="43" stroke={primary} strokeWidth="3" strokeLinecap="round" />
    <line x1="24" y1="33" x2="30" y2="43" stroke={primary} strokeWidth="3" strokeLinecap="round" />
    {/* Earth arc — the same Earth, here as the ground under the feet.    */}
    {/* Outer halo only renders when accentStroke is set (white variant). */}
    {accentStroke && (
      <path d="M 5 46.5 Q 24 42.5 43 46.5" stroke={accentStroke} strokeWidth="3.2" fill="none" strokeLinecap="round" />
    )}
    <path d="M 5 46.5 Q 24 42.5 43 46.5" stroke={accent} strokeWidth="2" fill="none" strokeLinecap="round" />
  </svg>
);

// ─── Logo Mark 2: Mensch reicht Mensch ─────────────────────────────────
// Two figures meeting on eye-level, hands touching.
// Reading: helping hand / Wir / generations.
const Mark2 = ({ size = 48, primary = '#1C5560', accent = '#C76A3F' }) => (
  <svg width={size} height={size} viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    {/* Left figure — slightly taller */}
    <circle cx="13" cy="14" r="5" fill={primary} />
    <line x1="13" y1="19" x2="13" y2="34" stroke={primary} strokeWidth="3" strokeLinecap="round" />
    {/* Left figure legs */}
    <line x1="13" y1="34" x2="9" y2="42" stroke={primary} strokeWidth="3" strokeLinecap="round" />
    <line x1="13" y1="34" x2="17" y2="42" stroke={primary} strokeWidth="3" strokeLinecap="round" />
    {/* Left figure outer arm (away from partner) */}
    <line x1="13" y1="23" x2="7" y2="27" stroke={primary} strokeWidth="3" strokeLinecap="round" />
    {/* Right figure — slightly smaller, head a bit lower */}
    <circle cx="35" cy="18" r="5" fill={primary} />
    <line x1="35" y1="23" x2="35" y2="36" stroke={primary} strokeWidth="3" strokeLinecap="round" />
    {/* Right figure legs */}
    <line x1="35" y1="36" x2="31" y2="42" stroke={primary} strokeWidth="3" strokeLinecap="round" />
    <line x1="35" y1="36" x2="39" y2="42" stroke={primary} strokeWidth="3" strokeLinecap="round" />
    {/* Right figure outer arm */}
    <line x1="35" y1="26" x2="41" y2="29" stroke={primary} strokeWidth="3" strokeLinecap="round" />
    {/* Reaching arms meet — single curved path between the two */}
    <path d="M 13 24 Q 24 22 35 26" stroke={primary} strokeWidth="3" fill="none" strokeLinecap="round" />
    {/* Accent dot at the meeting point */}
    <circle cx="24" cy="22.7" r="2.2" fill={accent} />
  </svg>
);

// ─── Logo Mark 3: Wir-Kreis ────────────────────────────────────────────
// Five figures arranged on a ring (linked arms) around a shared core.
// Reading: community / Wir / Solidarität / „aus vielen ein Kern“.
const Mark3 = ({ size = 48, primary = '#1C5560', accent = '#C76A3F' }) => (
  <svg width={size} height={size} viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    {/* Ring — symbolises the linked arms between the figures */}
    <circle cx="24" cy="24" r="12" stroke={primary} strokeWidth="2.6" fill="none" />
    {/* Five heads on a pentagon at radius 16 from centre */}
    <circle cx="24" cy="8" r="3.6" fill={primary} />
    <circle cx="39.2" cy="19.1" r="3.6" fill={primary} />
    <circle cx="33.4" cy="36.9" r="3.6" fill={primary} />
    <circle cx="14.6" cy="36.9" r="3.6" fill={primary} />
    <circle cx="8.8" cy="19.1" r="3.6" fill={primary} />
    {/* Shared core — Menschlichkeit at the centre */}
    <circle cx="24" cy="24" r="3" fill={accent} />
  </svg>
);

// ─── Logo Mark 4: Mensch trägt Mensch auf den Händen ───────────────────
// Adult lifts a small figure overhead — the hands form an explicit
// horizontal platform between the two figures so both are clearly read
// as separate people.  Reading: empowerment / Förderung / Generationen.
const Mark4 = ({ size = 48, primary = '#1C5560', accent = '#C76A3F' }) => (
  <svg width={size} height={size} viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    {/* Sun / goal — accent above */}
    <circle cx="24" cy="3.5" r="1.8" fill={accent} />

    {/* Child (upper) — sitting on the hand-platform */}
    <circle cx="24" cy="8.5" r="3" fill={primary} />
    <line x1="24" y1="11.5" x2="24" y2="17" stroke={primary} strokeWidth="2.4" strokeLinecap="round" />
    {/* Child arms — small, gently outward */}
    <line x1="24" y1="13.5" x2="20.5" y2="12" stroke={primary} strokeWidth="2.4" strokeLinecap="round" />
    <line x1="24" y1="13.5" x2="27.5" y2="12" stroke={primary} strokeWidth="2.4" strokeLinecap="round" />

    {/* Two hands forming a flat platform under the child's feet —       */}
    {/* drawn as two horizontal bars with a small gap between them so    */}
    {/* both palms are visible as distinct hands.                         */}
    <line x1="14" y1="19" x2="22.6" y2="19" stroke={primary} strokeWidth="3" strokeLinecap="round" />
    <line x1="25.4" y1="19" x2="34" y2="19" stroke={primary} strokeWidth="3" strokeLinecap="round" />

    {/* Adult (lower) — clearly separated below the hand-platform */}
    <circle cx="24" cy="29" r="5" fill={primary} />
    <line x1="24" y1="34" x2="24" y2="40" stroke={primary} strokeWidth="3" strokeLinecap="round" />
    {/* Adult arms curve up from shoulders, AROUND the head, to meet the */}
    {/* hand-platform at its outer ends.                                  */}
    <path d="M 24 34 Q 17 27 14 19" stroke={primary} strokeWidth="3" fill="none" strokeLinecap="round" />
    <path d="M 24 34 Q 31 27 34 19" stroke={primary} strokeWidth="3" fill="none" strokeLinecap="round" />
    {/* Adult legs */}
    <line x1="24" y1="40" x2="20" y2="45" stroke={primary} strokeWidth="3" strokeLinecap="round" />
    <line x1="24" y1="40" x2="28" y2="45" stroke={primary} strokeWidth="3" strokeLinecap="round" />
  </svg>
);

// ─── Wordmark — flexible color ─────────────────────────────────────────
const Wordmark = ({ size = 'lg', color = '#1C5560', subColor = 'rgba(28,85,96,.6)' }) => {
  const fs = { sm: 16, md: 22, lg: 32, xl: 44 }[size] || 32;
  const sub = { sm: 7, md: 9, lg: 11, xl: 14 }[size] || 11;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', color }}>
      <div style={{ fontFamily: "'Lora', Georgia, serif", fontWeight: 600, fontSize: fs, letterSpacing: '0.04em', lineHeight: 1, color }}>
        HUMAN
      </div>
      <div style={{ fontFamily: "'JetBrains Mono', monospace", fontWeight: 500, fontSize: sub, letterSpacing: '0.22em', textTransform: 'uppercase', marginTop: fs * 0.18, color: subColor }}>
        Stiftung
      </div>
    </div>
  );
};

// ─── Lockup — mark + wordmark ──────────────────────────────────────────
const Lockup = ({ Mark, size = 'lg', color = '#1C5560', subColor = 'rgba(28,85,96,.6)', primary, accent, third }) => {
  const markSize = { sm: 28, md: 40, lg: 56, xl: 80 }[size] || 56;
  const gap = { sm: 8, md: 12, lg: 14, xl: 20 }[size] || 14;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap }}>
      <Mark size={markSize} primary={primary} accent={accent} third={third} />
      <Wordmark size={size} color={color} subColor={subColor} />
    </div>
  );
};

Object.assign(window, { Mark1, Mark2, Mark3, Mark4, Wordmark, Lockup });
