/* global React */
const Ico = {
  Moon: () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z" fill="currentColor"/></svg>,
  Friends: () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><circle cx="9" cy="8" r="3.2" fill="currentColor"/><circle cx="17" cy="10" r="2.5" fill="currentColor"/><path d="M3 19c0-3 2.7-5 6-5s6 2 6 5" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round"/><path d="M14 19c0-2 1.5-4 4-4s4 1.5 4 3.5" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round"/></svg>,
  Confidence: () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="m12 2 2.8 6.3 6.8.6-5.1 4.5 1.5 6.6L12 16.6 5.9 20l1.5-6.6-5-4.5 6.8-.6L12 2Z" fill="currentColor"/></svg>,
  Sibling: () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 21s-7-4.5-7-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 6.5-7 11-7 11h-4Z" fill="currentColor"/></svg>,
  Share: () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M8.5 12H17M12 7.5l5 4.5-5 4.5" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/><circle cx="5" cy="12" r="2" fill="currentColor"/></svg>,
  Magic: () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="m6 3 1.2 2.8L10 7 7.2 8.2 6 11l-1.2-2.8L2 7l2.8-1.2L6 3Zm12 8 1.5 3.5 3.5 1.5-3.5 1.5L18 21l-1.5-3.5L13 16l3.5-1.5L18 11Z" fill="currentColor"/><path d="M11 9 21 19" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/></svg>,
};

const Star = ({ color = "#f5c43a", size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
    <path d="m12 2 2.8 6.3 6.8.6-5.1 4.5 1.5 6.6L12 16.6 5.9 20l1.5-6.6-5-4.5 6.8-.6L12 2Z"/>
  </svg>
);

const AppStoreBadge = () => (
  <a className="store-badge" href="#">
    <svg width="22" height="26" viewBox="0 0 24 28" fill="currentColor"><path d="M18.7 19.3c-.8 1.2-1.7 2.5-3 2.5-1.4 0-1.8-.8-3.3-.8s-2 .8-3.3.9C7.8 21.8 6.8 20.4 6 19.2 4.3 16.8 3 12.3 4.7 9.3c.9-1.5 2.4-2.5 4.1-2.5 1.3 0 2.5.9 3.3.9.8 0 2.3-1.1 3.8-.9.7 0 2.5.3 3.6 2-.1.1-2.2 1.3-2.1 3.8 0 3 2.6 4 2.7 4-.1.1-.4 1.4-1.4 2.7ZM13 3.5c.7-.8 2-1.5 3-1.5 0 1.2-.3 2.4-1 3.2-.7.9-1.8 1.5-3 1.4 0-1.2.6-2.4 1-3.1Z"/></svg>
    <div>
      <div className="store-sub">Download on the</div>
      <div className="store-name">App Store</div>
    </div>
  </a>
);
const PlayStoreBadge = () => (
  <a className="store-badge" href="#" style={{background:"#1a1028"}}>
    <svg width="22" height="26" viewBox="0 0 24 28" fill="none"><path d="M3 3v22l11-11L3 3Z" fill="#ff5f88"/><path d="m3 3 11 11L17 11 3 3Z" fill="#3fa8ff"/><path d="m3 25 11-11 3 3L3 25Z" fill="#2aac6a"/><path d="m14 14 7-4v8l-7-4Z" fill="#f5c43a"/></svg>
    <div>
      <div className="store-sub">Get it on</div>
      <div className="store-name">Google Play</div>
    </div>
  </a>
);

window.Ico = Ico;
window.Star = Star;
window.AppStoreBadge = AppStoreBadge;
window.PlayStoreBadge = PlayStoreBadge;
