/* global React */

function Sparkle({ size = 14, color = 'currentColor' }) {
  return (
    <svg className="sparkle" viewBox="0 0 100 100" fill={color} style={{ width: size, height: size }}>
      <path d="M50 2 L54 46 L98 50 L54 54 L50 98 L46 54 L2 50 L46 46 Z" />
    </svg>
  );
}

function BeautyMark({ children = 'Beauty', size = 12 }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 10,
      color: 'var(--rb-rose)', fontFamily: 'var(--font-sans)', fontWeight: 300,
      fontSize: size, letterSpacing: '0.42em', textTransform: 'uppercase',
      paddingLeft: '0.42em',
    }}>
      <span style={{ width: 28, height: 1, background: 'currentColor', opacity: 0.8 }}></span>
      {children}
      <span style={{ width: 28, height: 1, background: 'currentColor', opacity: 0.8 }}></span>
    </span>
  );
}

function WhatsAppIcon({ size = 20 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor">
      <path d="M17.5 14.4c-.3-.15-1.8-.87-2-.97-.27-.1-.47-.15-.67.15s-.77.97-.94 1.16c-.17.2-.35.22-.64.07-.3-.15-1.26-.46-2.4-1.47-.88-.79-1.48-1.76-1.65-2.06-.18-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.66-1.61-.91-2.2-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.07 2.88 1.21 3.07.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.69.62.71.23 1.36.2 1.87.12.57-.09 1.76-.72 2.01-1.42.25-.69.25-1.29.17-1.41-.07-.13-.27-.2-.57-.35zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.1-1.3c1.5.8 3.1 1.2 4.9 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
    </svg>
  );
}

function Icon({ name, size = 20, stroke = 1.5, color = 'currentColor' }) {
  const paths = {
    calendar: <><rect x="3.5" y="5" width="17" height="15" rx="2"/><path d="M3.5 9.5h17M8 3v4M16 3v4"/></>,
    clock: <><circle cx="12" cy="12" r="8.5"/><path d="M12 7v5l3 2"/></>,
    pin: <><path d="M21 10c0 6.5-9 11-9 11s-9-4.5-9-11a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></>,
    user: <><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.6-7 8-7s8 3 8 7"/></>,
    heart: <path d="M12 21s-7-4.5-7-10.5A4.5 4.5 0 0 1 12 6a4.5 4.5 0 0 1 7 4.5C19 16.5 12 21 12 21z"/>,
    menu: <path d="M4 7h16M4 12h16M4 17h10"/>,
    arrowRight: <path d="M5 12h14M13 6l6 6-6 6"/>,
    arrowLeft: <path d="M19 12H5M11 6l-6 6 6 6"/>,
    arrowDown: <path d="M12 5v14M6 13l6 6 6-6"/>,
    chevronRight: <path d="M9 6l6 6-6 6"/>,
    chevronDown: <path d="M6 9l6 6 6-6"/>,
    check: <path d="M5 12.5l4.5 4.5L19 7.5"/>,
    close: <path d="M6 6 L18 18 M18 6 L6 18"/>,
    phone: <path d="M22 16.92V20a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3.08a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.8a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.35 1.84.59 2.8.72a2 2 0 0 1 1.73 2.01z"/>,
    mail: <><path d="M3 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7"/><path d="M3 7l9 6 9-6M3 7l9-4 9 4"/></>,
    instagram: <><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="0.8" fill={color}/></>,
    gift: <><rect x="3" y="8" width="18" height="13" rx="1.5"/><path d="M3 12h18M12 8v13M12 8s-1.2-4-3.5-4S6 6 7 7.5C8 9 12 8 12 8zM12 8s1.2-4 3.5-4S18 6 17 7.5C16 9 12 8 12 8z"/></>,
    star: <path d="M12 3l2.6 5.6 6 .9-4.4 4.3 1.1 6-5.3-2.9-5.3 2.9 1.1-6-4.4-4.3 6-.9z"/>,
    sparkles: <><path d="M12 3v6M12 15v6M3 12h6M15 12h6"/><path d="M5.5 5.5l3.5 3.5M15 15l3.5 3.5M5.5 18.5L9 15M15 9l3.5-3.5"/></>,
    leaf: <path d="M12 21c-7 0-9-5-9-9 6 0 14-4 18-9 0 7-2 18-9 18zM12 21l9-18"/>,
    scissors: <><circle cx="6" cy="7" r="3"/><circle cx="6" cy="17" r="3"/><path d="M20 4 L8.6 8.6M8.6 15.4 L20 20M11 12l9-4M9.5 13.5L20 4"/></>,
    hand: <path d="M9 11V4.5a1.5 1.5 0 1 1 3 0V11M12 11V3.5a1.5 1.5 0 1 1 3 0V11M15 11V5a1.5 1.5 0 1 1 3 0v8a8 8 0 1 1-16 0V9a1.5 1.5 0 1 1 3 0v4"/>,
    droplet: <path d="M12 2.5c-3.5 4-7 8-7 11.5a7 7 0 0 0 14 0c0-3.5-3.5-7.5-7-11.5z"/>,
    foot: <path d="M8 4c-1.5 0-2.5 1.5-2.5 4S6.5 14 8 14s2.5-2.5 2.5-6S9.5 4 8 4zM14 7c-1 0-1.7 1-1.7 2.5S13 13 14 13s1.7-1.5 1.7-3S15 7 14 7zM17 10c-.7 0-1.2.7-1.2 1.7s.5 2.3 1.2 2.3 1.2-1.3 1.2-2.3S17.7 10 17 10zM7 16c-1.5 0-2.5 2-2.5 4s1 3 3 3 3.5-1 4-3 .5-4-1-4z"/>,
    bag: <><path d="M5 8h14l-1 12.5a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/></>,
    facebook: <path d="M14 9.5V8a1.5 1.5 0 0 1 1.5-1.5H17V3.5h-2.5A4.5 4.5 0 0 0 10 8v1.5H7v3h3V21h4v-8.5h2.5l.5-3z"/>,
    google: <path d="M21 12.2c0-.7-.06-1.4-.18-2H12v3.8h5.05c-.22 1.16-.88 2.14-1.88 2.8v2.32h3.04C19.94 17.43 21 15 21 12.2zM12 21c2.55 0 4.69-.84 6.25-2.28l-3.04-2.32c-.84.56-1.92.9-3.21.9-2.47 0-4.56-1.66-5.31-3.9H3.6v2.4A8.99 8.99 0 0 0 12 21zM6.69 13.4A5.4 5.4 0 0 1 6.4 12c0-.49.08-.96.22-1.4V8.2H3.6A8.99 8.99 0 0 0 3 12c0 1.45.35 2.83.96 4.05l2.73-2.65zM12 7.36c1.39 0 2.64.48 3.62 1.42l2.71-2.71C16.69 4.5 14.55 3.6 12 3.6c-3.55 0-6.63 2.04-8.4 5l2.73 2.4c.75-2.24 2.84-3.64 5.67-3.64z"/>,
  };
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
      {paths[name]}
    </svg>
  );
}

Object.assign(window, { Sparkle, BeautyMark, WhatsAppIcon, Icon });