// Inline SVG icon set — stroke style, 1.75 weight, matches Cupertino feel.

function Icon({ name, size = 20, color = 'currentColor', strokeWidth = 1.75 }) {
  const props = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'mic': return (
      <svg {...props}><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0 0 14 0"/><path d="M12 18v3"/></svg>
    );
    case 'plus': return (
      <svg {...props}><path d="M12 5v14M5 12h14"/></svg>
    );
    case 'chevron-right': return (
      <svg {...props}><path d="M9 6l6 6-6 6"/></svg>
    );
    case 'chevron-down': return (
      <svg {...props}><path d="M6 9l6 6 6-6"/></svg>
    );
    case 'shield': return (
      <svg {...props}><path d="M12 3l8 3v5c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-3z"/><path d="M9 12l2 2 4-4"/></svg>
    );
    case 'queue': return (
      <svg {...props}><circle cx="6" cy="12" r="2.5"/><circle cx="13" cy="12" r="2.5"/><circle cx="20" cy="12" r="2.5"/></svg>
    );
    case 'target': return (
      <svg {...props}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.4" fill={color}/></svg>
    );
    case 'check': return (
      <svg {...props}><path d="M5 12l5 5 9-11"/></svg>
    );
    case 'arrow-right': return (
      <svg {...props}><path d="M5 12h14M13 5l7 7-7 7"/></svg>
    );
    case 'hand-raise': return (
      <svg {...props}><path d="M9 11V5a1.5 1.5 0 0 1 3 0v6"/><path d="M12 11V4a1.5 1.5 0 0 1 3 0v7"/><path d="M15 11V6a1.5 1.5 0 0 1 3 0v8a7 7 0 0 1-14 0v-2a1.5 1.5 0 0 1 3 0v2"/></svg>
    );
    case 'cellular': return (
      <svg width={size} height={size} viewBox="0 0 24 14" fill={color}><rect x="0" y="9" width="3" height="5" rx="0.5"/><rect x="5" y="6" width="3" height="8" rx="0.5"/><rect x="10" y="3" width="3" height="11" rx="0.5"/><rect x="15" y="0" width="3" height="14" rx="0.5"/></svg>
    );
    case 'wifi': return (
      <svg width={size} height={size} viewBox="0 0 24 18" fill={color}><path d="M12 18a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/><path d="M5 10a10 10 0 0 1 14 0l-2 2a7 7 0 0 0-10 0l-2-2zM2 6a14 14 0 0 1 20 0l-2 2a11 11 0 0 0-16 0L2 6z"/></svg>
    );
    case 'battery': return (
      <svg width={size} height={size * 0.5} viewBox="0 0 26 13" fill="none"><rect x="0.5" y="0.5" width="22" height="12" rx="3" stroke={color} strokeOpacity="0.4"/><rect x="2.5" y="2.5" width="18" height="8" rx="1.5" fill={color}/><rect x="23.5" y="4" width="2" height="5" rx="0.5" fill={color} fillOpacity="0.5"/></svg>
    );
    default: return null;
  }
}

function HandWave({ size = 22, color = 'currentColor', animated = false, className = '' }) {
  return (
    <span className={(animated ? 'wave-anim ' : '') + className} style={{ display: 'inline-block', width: size, height: size * (164/175), color }}>
      <svg viewBox="0 0 175 164" fill="none" width="100%" height="100%">
        <path fillRule="evenodd" clipRule="evenodd"
          d="M72.0312 0.283956C68.6538 1.17202 66.0318 3.202 64.4821 6.1281L63.4374 8.10048L63.2172 41.8224C63.0963 60.3695 62.8493 75.412 62.6685 75.2498C62.4877 75.0881 59.9319 63.4185 56.9883 49.3176C53.5961 33.0661 51.3102 23.0234 50.745 21.8873C48.8494 18.079 43.5252 15.3594 38.8931 15.8337C33.4959 16.3865 28.995 20.3386 28.4718 24.9848C28.3241 26.2987 29.7371 36.169 32.9592 56.3257C35.5459 72.5086 37.6621 86.2602 37.6621 86.8849C37.6621 87.51 37.5068 87.9381 37.3167 87.8365C37.1266 87.7348 33.6521 79.9491 29.5958 70.5344C22.7355 54.6119 22.0888 53.2906 20.3355 51.6047C17.5382 48.9156 15.6779 48.1908 11.5652 48.1893C9.13116 48.1886 7.78176 48.3705 6.79687 48.832C2.84159 50.6859 0.33713 53.9652 0.0188751 57.7082C-0.156802 59.7756 0.657508 62.245 12.7987 96.4769C19.9306 116.585 26.1667 133.917 26.6569 134.993C33.4798 149.971 49.3727 160.87 67.7882 163.197C72.722 163.821 83.3449 163.438 88.7952 162.44C100.008 160.388 110.145 156.194 120.621 149.276C128.253 144.235 146.615 128.893 164.274 112.8C173.795 104.124 174.519 103.094 174.5 98.2486C174.486 94.8489 173.492 92.356 171.037 89.5671C167.9 86.0027 161.897 83.6217 157.122 84.0476C152.281 84.4793 150.861 85.3773 139.31 95.3085C128.035 105.001 126.613 105.928 122.992 105.944C120.643 105.954 117.73 104.549 116.706 102.911C115.272 100.619 115.761 95.4765 120.785 60.0313C123.379 41.7351 125.501 26.3614 125.501 25.8673C125.501 22.6577 122.125 18.3321 118.404 16.775C112.966 14.4996 105.69 16.9239 103.07 21.8829C102.433 23.0887 100.652 31.2493 97.0978 49.2362C94.312 63.3356 91.8216 75.0539 91.5631 75.2773C90.8532 75.891 90.2965 74.8793 90.2757 72.9381C90.2659 72.0303 89.5123 57.0916 88.6008 39.7411C87.5175 19.1179 86.7617 7.75017 86.418 6.91089C85.176 3.87621 82.4941 1.56342 78.9513 0.471034C77.2001 -0.068922 73.7298 -0.162828 91.5631 75.2773"
          fill="currentColor"/>
      </svg>
    </span>
  );
}

// Use the proper hand-wave SVG via img since the path above has bad transcription
function HandWaveImg({ size = 22, animated = false, color = null }) {
  // color=null → use the red logo file. color set → use mask color override via filter.
  const filter = color ? null : null;
  return (
    <span className={animated ? 'wave-anim' : ''} style={{ display: 'inline-block', width: size, height: size * (164/175), color: color || 'var(--d-red)' }}>
      <svg viewBox="0 0 175 164" width="100%" height="100%" fill="none">
        <path fillRule="evenodd" clipRule="evenodd"
          d="M72.0312 0.283956C68.6538 1.17202 66.0318 3.202 64.4821 6.1281L63.4374 8.10048L63.2172 41.8224C63.0963 60.3695 62.8493 75.412 62.6685 75.2498C62.4877 75.0881 59.9319 63.4185 56.9883 49.3176C53.5961 33.0661 51.3102 23.0234 50.745 21.8873C48.8494 18.079 43.5252 15.3594 38.8931 15.8337C33.4959 16.3865 28.995 20.3386 28.4718 24.9848C28.3241 26.2987 29.7371 36.169 32.9592 56.3257C35.5459 72.5086 37.6621 86.2602 37.6621 86.8849C37.6621 87.51 37.5068 87.9381 37.3167 87.8365C37.1266 87.7348 33.6521 79.9491 29.5958 70.5344C22.7355 54.6119 22.0888 53.2906 20.3355 51.6047C17.5382 48.9156 15.6779 48.1908 11.5652 48.1893C9.13116 48.1886 7.78176 48.3705 6.79687 48.832C2.84159 50.6859 0.33713 53.9652 0.0188751 57.7082C-0.156802 59.7756 0.657508 62.245 12.7987 96.4769C19.9306 116.585 26.1667 133.917 26.6569 134.993C33.4798 149.971 49.3727 160.87 67.7882 163.197C72.722 163.821 83.3449 163.438 88.7952 162.44C100.008 160.388 110.145 156.194 120.621 149.276C128.253 144.235 146.615 128.893 164.274 112.8C173.795 104.124 174.519 103.094 174.5 98.2486C174.486 94.8489 173.492 92.356 171.037 89.5671C167.9 86.0027 161.897 83.6217 157.122 84.0476C152.281 84.4793 150.861 85.3773 139.31 95.3085C128.035 105.001 126.613 105.928 122.992 105.944C120.643 105.954 117.73 104.549 116.706 102.911C115.272 100.619 115.761 95.4765 120.785 60.0313C123.379 41.7351 125.501 26.3614 125.501 25.8673C125.501 22.6577 122.125 18.3321 118.404 16.775C112.966 14.4996 105.69 16.9239 103.07 21.8829C102.433 23.0887 100.652 31.2493 97.0978 49.2362C94.312 63.3356 91.8216 75.0539 91.5631 75.2773C90.8532 75.891 90.2965 74.8793 90.2757 72.9381C90.2659 72.0303 89.5123 57.0916 88.6008 39.7411C87.5175 19.1179 86.7617 7.75017 86.418 6.91089C85.176 3.87621 82.4941 1.56342 78.9513 0.471034C77.2001 -0.068922 73.7298 -0.162828 72.0312 0.283956Z"
          fill="currentColor"/>
      </svg>
    </span>
  );
}

function StoreBadge({ kind, label, sub }) {
  const apple = (
    <svg viewBox="0 0 384 512" width="22" height="22" fill="currentColor"><path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zM256.6 110c30.1-35.7 27.4-68.2 26.5-79.9-26.6 1.5-57.4 18.1-74.9 38.5-19.3 21.9-30.6 49-28.2 78.3 28.8 2.2 55.1-12.6 76.6-36.9z"/></svg>
  );
  const google = (
    <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M3.609 1.814 13.792 12 3.61 22.186a.996.996 0 0 1-.61-.92V2.734a1 1 0 0 1 .609-.92zm10.89 10.893 2.302 2.302-10.937 6.333 8.635-8.635zm3.199-3.199 2.807 1.626a1 1 0 0 1 0 1.732l-2.808 1.626L15.198 12l2.5-2.492zM5.864 2.658 16.802 8.99l-2.302 2.303-8.636-8.635z"/></svg>
  );
  return (
    <button className="store-badge" type="button">
      <span className="glyph">{kind === 'apple' ? apple : google}</span>
      <span className="col">
        <span className="top">{sub}</span>
        <span className="bot">{label}</span>
      </span>
    </button>
  );
}

Object.assign(window, { Icon, HandWave, HandWaveImg, StoreBadge });
