// Vision Generation logo mark — original "VG" monogram inside a chevron/crown shape
function VGLogo({ size = 44, variant = 'default' }) {
  const purple = variant === 'light' ? '#FFFFFF' : '#3D1E6D';
  const gold = variant === 'light' ? '#F2E2B0' : '#C8A04A';
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none" aria-label="Vision Generation">
      <defs>
        <linearGradient id={`vg-grad-${variant}`} x1="0" y1="0" x2="64" y2="64">
          <stop offset="0%" stopColor={purple}/>
          <stop offset="100%" stopColor={gold}/>
        </linearGradient>
      </defs>
      {/* Crown / chevron shield outline */}
      <path
        d="M32 4 L58 14 L58 30 C58 46 47 56 32 60 C17 56 6 46 6 30 L6 14 Z"
        fill={`url(#vg-grad-${variant})`}
        opacity="0.12"
      />
      <path
        d="M32 4 L58 14 L58 30 C58 46 47 56 32 60 C17 56 6 46 6 30 L6 14 Z"
        stroke={purple}
        strokeWidth="2"
        fill="none"
      />
      {/* Inner gold star/spark */}
      <path
        d="M32 16 L34.5 24 L42.5 24 L36 29 L38.5 37 L32 32 L25.5 37 L28 29 L21.5 24 L29.5 24 Z"
        fill={gold}
        opacity="0.9"
      />
      {/* "VG" monogram */}
      <text
        x="32" y="52"
        textAnchor="middle"
        fontFamily="Fraunces, serif"
        fontSize="14"
        fontWeight="700"
        fill={purple}
        letterSpacing="0.5"
      >VG</text>
    </svg>
  );
}

function VGWordmark({ variant = 'default', stacked = false }) {
  return (
    <div style={{display:'flex', alignItems:'center', gap: 12}}>
      <img
        src="/welcome/vg-logo.png"
        alt="Vision Generation"
        style={{
          height: 84,
          width: 'auto',
          display: 'block',
          filter: variant === 'light' ? 'brightness(0) invert(1)' : 'none',
        }}
      />
    </div>
  );
}

// Re-usable striped image placeholder
function ImgPh({ label, dark = false, style, className = '', children }) {
  return (
    <div className={`img-ph ${dark ? 'dark' : ''} ${className}`} style={style}>
      <span className="ph-label">{label}</span>
      {children}
    </div>
  );
}

// Decorative gold corner accent
function GoldCorner({ position = 'tr', size = 80 }) {
  const styles = {
    tr: { top: 0, right: 0, transform: 'rotate(0deg)' },
    tl: { top: 0, left: 0, transform: 'rotate(-90deg)' },
    br: { bottom: 0, right: 0, transform: 'rotate(90deg)' },
    bl: { bottom: 0, left: 0, transform: 'rotate(180deg)' },
  };
  return (
    <svg width={size} height={size} viewBox="0 0 80 80" style={{position:'absolute', ...styles[position], pointerEvents:'none'}}>
      <path d="M0 0 L80 0 L80 4 L4 4 L4 80 L0 80 Z" fill="#C8A04A"/>
      <circle cx="76" cy="4" r="3" fill="#C8A04A"/>
    </svg>
  );
}

// Simple line icons for ministries
function Icon({ name, size = 28, color = 'currentColor' }) {
  const props = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'kids':
      return (<svg {...props}><circle cx="12" cy="7" r="3"/><path d="M6 21v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3"/><path d="M9 7h6"/></svg>);
    case 'youth':
      return (<svg {...props}><path d="M3 12l9-8 9 8"/><path d="M5 10v10h14V10"/><path d="M10 20v-5h4v5"/></svg>);
    case 'worship':
      return (<svg {...props}><path d="M9 18V6l9-2v12"/><circle cx="6" cy="18" r="3"/><circle cx="15" cy="16" r="3"/></svg>);
    case 'men':
      return (<svg {...props}><circle cx="12" cy="8" r="4"/><path d="M4 21c1-4 4-6 8-6s7 2 8 6"/></svg>);
    case 'women':
      return (<svg {...props}><circle cx="12" cy="7" r="4"/><path d="M12 11v10"/><path d="M9 18h6"/></svg>);
    case 'groups':
      return (<svg {...props}><circle cx="9" cy="8" r="3"/><circle cx="17" cy="9" r="2.5"/><path d="M3 20c0-3 3-5 6-5s6 2 6 5"/><path d="M14 17c.5-2 2-3 4-3s3 1 3.5 3"/></svg>);
    case 'mission':
      return (<svg {...props}><circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18z"/></svg>);
    case 'discipleship':
      return (<svg {...props}><path d="M4 5h7a3 3 0 0 1 3 3v12"/><path d="M20 5h-7a3 3 0 0 0-3 3v12"/><path d="M4 19h7"/><path d="M13 19h7"/></svg>);
    case 'volunteer':
      return (<svg {...props}><path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.7A4 4 0 0 1 19 11c0 5.5-7 10-7 10z"/></svg>);
    case 'play':
      return (<svg {...props}><circle cx="12" cy="12" r="9"/><path d="M10 8l6 4-6 4z" fill={color}/></svg>);
    case 'arrow':
      return (<svg {...props}><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></svg>);
    case 'pin':
      return (<svg {...props}><path d="M12 21s-7-7.5-7-12a7 7 0 0 1 14 0c0 4.5-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/></svg>);
    case 'clock':
      return (<svg {...props}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>);
    case 'menu':
      return (<svg {...props}><path d="M4 7h16M4 12h16M4 17h16"/></svg>);
    case 'close':
      return (<svg {...props}><path d="M6 6l12 12M18 6L6 18"/></svg>);
    case 'lock':
      return (<svg {...props}><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>);
    case 'mail':
      return (<svg {...props}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>);
    case 'phone':
      return (<svg {...props}><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.7.6 2.5a2 2 0 0 1-.5 2.1L8 9.6a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.8.3 1.6.5 2.5.6a2 2 0 0 1 1.7 2z"/></svg>);
    case 'check':
      return (<svg {...props}><path d="M5 12l5 5 9-11"/></svg>);
    case 'sparkle':
      return (<svg {...props}><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/></svg>);
    case 'globe':
      return (<svg {...props}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>);
    case 'fb':
      return (<svg {...props} fill={color} stroke="none"><path d="M13 22v-8h3l1-4h-4V7c0-1.1.4-2 2-2h2V1.2C16.7 1.1 15.5 1 14.3 1 11.5 1 9.5 2.7 9.5 6v4H6v4h3.5v8z"/></svg>);
    case 'ig':
      return (<svg {...props}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill={color}/></svg>);
    case 'yt':
      return (<svg {...props}><rect x="2" y="5" width="20" height="14" rx="3"/><path d="M10 9l5 3-5 3z" fill={color}/></svg>);
    default: return null;
  }
}

Object.assign(window, { VGLogo, VGWordmark, ImgPh, GoldCorner, Icon });