// Crest component - generated from geometric primitives, no figurative SVG
function Crest({ size = 120, primary = '#0b1f3a', accent = '#c9a14a', ivory = '#f5efe1' }) {
  return (
    <svg width={size} height={size * 1.15} viewBox="0 0 200 230" style={{ display: 'block' }}>
      <defs>
        <linearGradient id="crestShadow" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={primary} stopOpacity="1" />
          <stop offset="100%" stopColor={primary} stopOpacity="0.85" />
        </linearGradient>
      </defs>
      {/* Shield outline */}
      <path
        d="M 20 20 L 180 20 L 180 130 Q 180 200 100 220 Q 20 200 20 130 Z"
        fill="url(#crestShadow)"
        stroke={accent}
        strokeWidth="3"
      />
      {/* Inner shield border */}
      <path
        d="M 30 30 L 170 30 L 170 128 Q 170 192 100 210 Q 30 192 30 128 Z"
        fill="none"
        stroke={accent}
        strokeWidth="1"
        opacity="0.6"
      />
      {/* Top banner */}
      <rect x="35" y="48" width="130" height="22" fill={accent} />
      <text
        x="100"
        y="64"
        textAnchor="middle"
        fontFamily="'Playfair Display', serif"
        fontWeight="700"
        fontSize="13"
        letterSpacing="3"
        fill={primary}
      >
        EST · MMXX
      </text>
      {/* Center: crossed clubs (lines only - geometric) */}
      <g transform="translate(100, 115)">
        {/* Left club */}
        <line x1="-30" y1="-25" x2="30" y2="35" stroke={ivory} strokeWidth="3" strokeLinecap="round" />
        <rect x="-36" y="-31" width="10" height="14" fill={ivory} transform="rotate(-45 -31 -24)" />
        {/* Right club */}
        <line x1="30" y1="-25" x2="-30" y2="35" stroke={ivory} strokeWidth="3" strokeLinecap="round" />
        <rect x="26" y="-31" width="10" height="14" fill={ivory} transform="rotate(45 31 -24)" />
        {/* Center ball */}
        <circle cx="0" cy="5" r="8" fill={accent} stroke={primary} strokeWidth="1.5" />
        <circle cx="-2" cy="3" r="0.8" fill={primary} opacity="0.4" />
        <circle cx="1" cy="2" r="0.8" fill={primary} opacity="0.4" />
        <circle cx="2" cy="6" r="0.8" fill={primary} opacity="0.4" />
        <circle cx="-1" cy="7" r="0.8" fill={primary} opacity="0.4" />
      </g>
      {/* Bottom roman numeral */}
      <text
        x="100"
        y="180"
        textAnchor="middle"
        fontFamily="'Playfair Display', serif"
        fontStyle="italic"
        fontSize="22"
        fill={accent}
      >
        IV
      </text>
      {/* Bottom dots */}
      <circle cx="80" cy="195" r="2" fill={accent} />
      <circle cx="100" cy="197" r="2" fill={accent} />
      <circle cx="120" cy="195" r="2" fill={accent} />
    </svg>
  );
}

// Course illustration - abstract layered terrain
function CourseArt({ palette = 'marsh', label = '' }) {
  const palettes = {
    marsh: { sky: '#e8dfc8', mid: '#8a9b6e', accent: '#5a7048', water: '#6b8aa8' },
    coastal: { sky: '#ecd9b8', mid: '#c4a574', accent: '#8b6f3e', water: '#7ba0b8' },
    pine: { sky: '#dfd7c0', mid: '#6b7d54', accent: '#3e4f32', water: '#84a098' },
    royal: { sky: '#e6d9a8', mid: '#9c8442', accent: '#5e4f1c', water: '#86a3a8' },
  };
  const p = palettes[palette] || palettes.marsh;
  return (
    <svg viewBox="0 0 400 200" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%', display: 'block' }}>
      <rect width="400" height="200" fill={p.sky} />
      {/* Diagonal hatching */}
      <defs>
        <pattern id={`hatch-${palette}`} patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(45)">
          <line x1="0" y1="0" x2="0" y2="6" stroke={p.mid} strokeWidth="0.5" opacity="0.3" />
        </pattern>
      </defs>
      <rect width="400" height="200" fill={`url(#hatch-${palette})`} />
      {/* Distant ridge */}
      <path d="M 0 110 Q 80 90 160 105 T 320 100 T 400 108 L 400 200 L 0 200 Z" fill={p.mid} opacity="0.4" />
      {/* Mid fairway */}
      <path d="M 0 140 Q 100 120 200 135 T 400 130 L 400 200 L 0 200 Z" fill={p.mid} opacity="0.7" />
      {/* Foreground */}
      <path d="M 0 165 Q 120 150 240 160 T 400 158 L 400 200 L 0 200 Z" fill={p.accent} />
      {/* Water sliver */}
      <path d="M 60 152 Q 130 148 200 152 Q 230 154 260 150" stroke={p.water} strokeWidth="3" fill="none" opacity="0.7" />
      {/* Flag */}
      <line x1="280" y1="110" x2="280" y2="155" stroke="#1a1a1a" strokeWidth="1.2" />
      <path d="M 280 110 L 295 115 L 280 120 Z" fill="#b22234" />
      {/* Label tag */}
      <rect x="12" y="172" width="auto" height="18" fill="#0b1f3a" opacity="0.85" />
      <text x="20" y="184" fontFamily="'JetBrains Mono', monospace" fontSize="9" fill="#f5efe1" letterSpacing="1.5">
        {label}
      </text>
    </svg>
  );
}

Object.assign(window, { Crest, CourseArt });