// Angel Shine logo - elegant wing with sparkles, matching flyer aesthetic
const Logo = ({ size = 40, color = "var(--brand)" }) => (
  <svg width={size} height={size * 0.85} viewBox="0 0 80 68" fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    {/* Wing - layered feathers */}
    <path d="M8 44c4-14 14-26 30-30 6-1.5 12-1 16 1-2 6-7 10-13 12-3 1-7 1-10 0M14 48c4-10 12-18 22-22M22 50c4-7 10-13 18-16M30 52c4-5 9-9 14-11" />
    {/* Sparkles */}
    <path d="M62 18l1.5 4 4 1.5-4 1.5L62 29l-1.5-4-4-1.5 4-1.5z" fill={color} stroke="none" opacity="0.9"/>
    <path d="M70 32l.8 2 2 .8-2 .8L70 37.6l-.8-2-2-.8 2-.8z" fill={color} stroke="none" opacity="0.7"/>
    <circle cx="56" cy="10" r="1.5" fill={color} stroke="none"/>
  </svg>
);

const LogoMark = ({ stacked = true, color = "var(--brand)" }) => (
  <div className={`logo-mark ${stacked ? 'stacked' : 'inline'}`}>
    <Logo color={color} size={stacked ? 56 : 40} />
    <div className="logo-text" style={{ color }}>
      <div className="logo-name">ANGEL SHINE</div>
      <div className="logo-sub">HOME CLEANING LLC</div>
    </div>
  </div>
);

window.Logo = Logo;
window.LogoMark = LogoMark;