// icons.jsx — minimal stroke icon set for Eme (exported to window)
const Icon = ({ d, size = 24, sw = 1.6, fill = 'none', stroke = 'currentColor', children, vb = 24, style }) => (
  <svg width={size} height={size} viewBox={`0 0 ${vb} ${vb}`} fill={fill} stroke={stroke}
       strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={style}>
    {d ? <path d={d} /> : children}
  </svg>
);

const IconMenu = (p) => (
  <Icon {...p}><line x1="4" y1="8" x2="20" y2="8" /><line x1="4" y1="14" x2="20" y2="14" /></Icon>
);
const IconLeaf = (p) => (
  <Icon {...p}><path d="M20 4C10 4 4 9 4 18c0 1 .5 2 .5 2S6 14 12 11" /><path d="M20 4c0 9-5 15-13 15" /></Icon>
);
// right-pointing triangle, centroid at x≈12.3 → optically centred in a circle
const IconPlay = (p) => (
  <Icon {...p} fill="currentColor" stroke="currentColor" sw={p.sw ?? 2.2} strokeLinejoin="round"><path d="M9.2 6.3 L9.2 17.7 L18.6 12 Z" /></Icon>
);
const IconPause = (p) => (
  <Icon {...p} fill="currentColor" stroke="none"><rect x="6.5" y="5" width="3.6" height="14" rx="1.4" /><rect x="13.9" y="5" width="3.6" height="14" rx="1.4" /></Icon>
);
const IconStop = (p) => (
  <Icon {...p} fill="currentColor" stroke="none"><rect x="6" y="6" width="12" height="12" rx="3.2" /></Icon>
);
const IconFocus = (p) => (
  <Icon {...p}><circle cx="12" cy="12" r="8.3" /><circle cx="12" cy="12" r="3.4" fill="currentColor" stroke="none" /></Icon>
);
const IconChart = (p) => (
  <Icon {...p}><line x1="6" y1="20" x2="6" y2="13" /><line x1="10.7" y1="20" x2="10.7" y2="8" /><line x1="15.3" y1="20" x2="15.3" y2="11" /><line x1="20" y1="20" x2="20" y2="5" /></Icon>
);
// Symmetric cog (Material geometry) — evenly balanced, optically centred.
const IconGear = (p) => (
  <Icon {...p} fill="currentColor" stroke="none">
    <path fillRule="evenodd" clipRule="evenodd" d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" />
  </Icon>
);
const IconChevron = (p) => (
  <Icon {...p}><path d="M9 6l6 6-6 6" /></Icon>
);
const IconCheck = (p) => (
  <Icon {...p}><path d="M5 12.5l4.5 4.5L19 7" /></Icon>
);
const IconLock = (p) => (
  <Icon {...p}><rect x="5" y="11" width="14" height="9" rx="2.4" /><path d="M8 11V8a4 4 0 0 1 8 0v3" /></Icon>
);
const IconFlame = (p) => (
  <Icon {...p}><path d="M12 3c3 3.5 5 6 5 9a5 5 0 0 1-10 0c0-1.4.6-2.6 1.5-3.6C9 10 9.5 11 10 11.5c.4-2 1-4 2-8.5z" /></Icon>
);
const IconClose = (p) => (
  <Icon {...p}><line x1="6" y1="6" x2="18" y2="18" /><line x1="18" y1="6" x2="6" y2="18" /></Icon>
);
const IconVolume = (p) => (
  <Icon {...p}><path d="M5 9v6h3.5L13 19V5L8.5 9z" fill="currentColor" stroke="none" /><path d="M16 9a4 4 0 0 1 0 6" /></Icon>
);
const IconBell = (p) => (
  <Icon {...p}><path d="M18 16V11a6 6 0 0 0-12 0v5l-1.5 2h15z" /><path d="M10 20a2 2 0 0 0 4 0" /></Icon>
);
const IconGlobe = (p) => (
  <Icon {...p}><circle cx="12" cy="12" r="8.3" /><path d="M3.7 12h16.6M12 3.7c2.4 2.3 2.4 14.3 0 16.6M12 3.7c-2.4 2.3-2.4 14.3 0 16.6" /></Icon>
);
const IconWave = (p) => (
  <Icon {...p}><path d="M3 12c1.5-2 3-2 4.5 0S10.5 14 12 12s3-2 4.5 0S19.5 14 21 12" /></Icon>
);
const IconMoon = (p) => (
  <Icon {...p}><path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z" /></Icon>
);
const IconSun = (p) => (
  <Icon {...p}><circle cx="12" cy="12" r="4" /><path d="M12 2.5v2.2M12 19.3v2.2M21.5 12h-2.2M4.7 12H2.5M18.4 5.6l-1.6 1.6M7.2 16.8l-1.6 1.6M18.4 18.4l-1.6-1.6M7.2 7.2 5.6 5.6" /></Icon>
);
const IconDownload = (p) => (
  <Icon {...p}><path d="M12 4v10m0 0l-4-4m4 4l4-4" /><path d="M5 18h14" /></Icon>
);
const IconReset = (p) => (
  <Icon {...p}><path d="M4.5 10a8 8 0 1 1-.6 5" /><path d="M4.5 5v5h5" /></Icon>
);
const IconCloud = (p) => (
  <Icon {...p}><path d="M7 18a4 4 0 0 1-.5-7.97A5.5 5.5 0 0 1 17 9.5a3.8 3.8 0 0 1-.5 8.5z" /></Icon>
);
const IconTrophy = (p) => (
  <Icon {...p}><path d="M7 4h10v4a5 5 0 0 1-10 0V4z" /><path d="M7 6H4v1a3 3 0 0 0 3 3M17 6h3v1a3 3 0 0 1-3 3M9 20h6M12 13v4" /></Icon>
);
// premium & feature icons
// A single, clean 4-point star — refined and minimal (no "turbo"/burst).
const IconSparkle = (p) => (
  <Icon {...p} fill="currentColor" stroke="none"><path d="M12 3c.55 6.1 2.9 8.45 9 9-6.1.55-8.45 2.9-9 9-.55-6.1-2.9-8.45-9-9 6.1-.55 8.45-2.9 9-9z" /></Icon>
);
const IconCrown = (p) => (
  <Icon {...p}><path d="M3 7.5l4 4 5-7 5 7 4-4-1.8 11H4.8z" /><line x1="4.8" y1="21" x2="19.2" y2="21" /></Icon>
);
const IconDevices = (p) => (
  <Icon {...p}><rect x="2.5" y="5" width="12" height="9" rx="1.6" /><path d="M5.5 17.5h6" /><rect x="16" y="8.5" width="5.5" height="11" rx="1.4" /></Icon>
);
const IconTarget = (p) => (
  <Icon {...p}><circle cx="12" cy="12" r="8.3" /><circle cx="12" cy="12" r="4.4" /><circle cx="12" cy="12" r="0.8" fill="currentColor" stroke="none" /></Icon>
);
const IconCalendar = (p) => (
  <Icon {...p}><rect x="4" y="5" width="16" height="15" rx="2.4" /><path d="M4 9.5h16M8 3.5v3M16 3.5v3" /></Icon>
);
const IconStreak = (p) => (
  <Icon {...p}><path d="M12 3c3 3.5 5 6 5 9a5 5 0 0 1-10 0c0-1.4.6-2.6 1.5-3.6C9 10 9.5 11 10 11.5c.4-2 1-4 2-8.5z" /></Icon>
);
const IconClock = (p) => (
  <Icon {...p}><circle cx="12" cy="12" r="8.3" /><path d="M12 7.4V12l3 2" /></Icon>
);
const IconShare = (p) => (
  <Icon {...p}><circle cx="6" cy="12" r="2.6" /><circle cx="17" cy="6" r="2.6" /><circle cx="17" cy="18" r="2.6" /><path d="M8.3 10.8l6.4-3.6M8.3 13.2l6.4 3.6" /></Icon>
);
const IconStar = (p) => (
  <Icon {...p} fill="currentColor" stroke="none"><path d="M12 3.2l2.5 5.4 5.9.6-4.4 4 1.2 5.8L12 21.6 6.8 19l1.2-5.8-4.4-4 5.9-.6z" /></Icon>
);
// Elegant quotation marks — for Personalized Quotes (written reflection).
const IconQuote = (p) => (
  <Icon {...p} fill="currentColor" stroke="none"><path d="M10 7.2c-2.7.5-4.6 2.7-4.6 5.7V17h4.8v-4.8H7.9c0-1.5.9-2.5 2.4-2.9L10 7.2zm8.6 0c-2.7.5-4.6 2.7-4.6 5.7V17h4.8v-4.8h-2.3c0-1.5.9-2.5 2.4-2.9l-.3-2.1z" /></Icon>
);
// Award medal — distinctive accomplishment / reward symbol for Achievements.
const IconAward = (p) => (
  <Icon {...p}><circle cx="12" cy="8.6" r="5.2" /><path d="M9 12.8L7.4 21l4.6-2.5L16.6 21 15 12.8" /></Icon>
);
// Open book — for "Reading".
const IconBook = (p) => (
  <Icon {...p}><path d="M12 6.4C10.3 5.1 7.6 4.5 5 4.5v12.4c2.6 0 5.3.6 7 1.9 1.7-1.3 4.4-1.9 7-1.9V4.5c-2.6 0-5.3.6-7 1.9z" /><path d="M12 6.4v12.3" /></Icon>
);

// THE single Premium indicator used everywhere — a small, discreet gold pill. Reuse this
// (never a bespoke per-feature badge) so Premium always looks identical across the app.
function PremiumPill({ label, crown = true }) {
  const gold = (typeof PREMIUM_GOLD === 'string') ? PREMIUM_GOLD : '#D4A23C';
  let i18nTxt = 'Premium';
  try { i18nTxt = useI18n().t('premium'); } catch (e) {}
  const txt = label || i18nTxt;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4, flexShrink: 0, lineHeight: 1,
      padding: '3px 8px', borderRadius: 99, fontSize: 9.5, letterSpacing: 1, fontWeight: 600,
      color: gold, background: gold + '1c', border: '1px solid ' + gold + '44',
    }}>
      {crown && <IconSparkle size={10} />}{txt}
    </span>
  );
}
const IconArrowRight = (p) => (
  <Icon {...p}><path d="M4 12h15M13 6l6 6-6 6" /></Icon>
);
// achievement glyphs (each achievement gets a unique icon)
const IconMedal = (p) => (
  <Icon {...p}><circle cx="12" cy="14.5" r="5.8" /><path d="M8.5 3l2.2 6M15.5 3l-2.2 6" /><path d="M12 12.4l.9 1.8 2 .2-1.5 1.4.4 2-1.8-1-1.8 1 .4-2-1.5-1.4 2-.2z" fill="currentColor" stroke="none" /></Icon>
);
const IconBolt = (p) => (
  <Icon {...p}><path d="M13 2L4 14h6l-1 8 9-12h-6z" /></Icon>
);
const IconShield = (p) => (
  <Icon {...p}><path d="M12 3l7 2.5v5c0 4.6-3 7.7-7 9-4-1.3-7-4.4-7-9v-5z" /><path d="M9 12l2 2 4-4.5" /></Icon>
);
const IconGem = (p) => (
  <Icon {...p}><path d="M6 4h12l3 5-9 11L3 9z" /><path d="M3 9h18M9 4L6 9l6 11 6-11-3-5" /></Icon>
);
const IconHourglass = (p) => (
  <Icon {...p}><path d="M6 3h12M6 21h12M7.5 3c0 5 9 5 9 0M7.5 21c0-5 9-5 9 0" /></Icon>
);
const IconTimer = (p) => (
  <Icon {...p}><circle cx="12" cy="13.5" r="7.3" /><path d="M12 13.5V9M9.6 2.6h4.8" /></Icon>
);
const IconUsers = (p) => (
  <Icon {...p}><circle cx="9" cy="8" r="3.1" /><path d="M3.6 19a5.4 5.4 0 0 1 10.8 0" /><path d="M16 5.3a3.1 3.1 0 0 1 0 5.9M17.5 19a5.4 5.4 0 0 0-3-4.8" /></Icon>
);
const IconHeart = (p) => (
  <Icon {...p} fill="currentColor" stroke="none"><path d="M12 20.4S3.6 14.7 3.6 9.1A4.3 4.3 0 0 1 12 6.9a4.3 4.3 0 0 1 8.4 2.2c0 5.6-8.4 11.3-8.4 11.3z" /></Icon>
);

// ambient sound glyphs
const SoundGlyph = ({ kind, size = 26 }) => {
  const props = { size, sw: 1.7, stroke: 'currentColor', fill: 'none' };
  switch (kind) {
    case 'rain': return <Icon {...props}><path d="M6 11a5 5 0 0 1 9.5-2A3.5 3.5 0 0 1 16 16H7" /><path d="M8 19l-1 2M12 19l-1 2M16 19l-1 2" /></Icon>;
    case 'forest': return <Icon {...props}><path d="M12 3l4 6h-2.5l3 5H8l3-5H8.5z" /><line x1="12" y1="14" x2="12" y2="21" /></Icon>;
    case 'ocean': return <Icon {...props}><path d="M3 14c1.5-2 3-2 4.5 0S10.5 16 12 14s3-2 4.5 0S19.5 16 21 14" /><path d="M3 18c1.5-2 3-2 4.5 0S10.5 20 12 18s3-2 4.5 0S19.5 20 21 18" /></Icon>;
    case 'river': return <Icon {...props}><path d="M5 6c4 2 10-2 14 0M5 12c4 2 10-2 14 0M5 18c4 2 10-2 14 0" /></Icon>;
    case 'wind': return <Icon {...props}><path d="M3 9h11a2.5 2.5 0 1 0-2.5-2.5M3 14h14a2.5 2.5 0 1 1-2.5 2.5M3 12h6" /></Icon>;
    case 'mountainwind': return <Icon {...props}><path d="M2 19l5.5-8 3.5 5 3-4.5L21 19z" /><path d="M3 7h7a1.8 1.8 0 1 0-1.8-1.8" /></Icon>;
    case 'night': return <Icon {...props}><path d="M19 14.5A7 7 0 1 1 10 5.2a5.6 5.6 0 0 0 9 9.3z" /><path d="M16.5 4.5l.5 1.4 1.4.5-1.4.5-.5 1.4-.5-1.4L14.6 6l1.4-.5z" fill="currentColor" stroke="none" /></Icon>;
    case 'nightforest': return <Icon {...props}><path d="M9 3l3.5 5.2H10l2.6 4H6.4l2.6-4H6.5z" /><line x1="9" y1="12.2" x2="9" y2="21" /><path d="M20.5 6.6A3.4 3.4 0 1 1 16.4 3a2.7 2.7 0 0 0 4.1 3.6z" /></Icon>;
    case 'fire': return <Icon {...props}><path d="M12 3c3 3.5 5 6 5 9a5 5 0 0 1-10 0c0-1.4.6-2.6 1.5-3.6C9 10 9.5 11 10 11.5c.4-2 1-4 2-8.5z" /></Icon>;
    case 'coffee': return <Icon {...props}><path d="M4 9h12v4a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z" /><path d="M16 10h2.4a2.6 2.6 0 0 1 0 5.2H16" /><path d="M7.5 3.4c-.6.8-.6 1.6 0 2.4M11 3.4c-.6.8-.6 1.6 0 2.4" /></Icon>;
    case 'classroom': return <Icon {...props}><rect x="4" y="4" width="16" height="11" rx="1.6" /><path d="M7 18.5h10M12 15v3.5" /><path d="M7.5 11l2.2-3 1.8 2 1.5-1.6 3.5 2.6" /></Icon>;
    case 'library': return <Icon {...props}><path d="M12 6.5C10.5 5 8 5 6 5.4v11C8 16 10.5 16 12 17.4M12 6.5C13.5 5 16 5 18 5.4v11C16 16 13.5 16 12 17.4M12 6.5v11" /></Icon>;
    case 'stream': return <Icon {...props}><path d="M4 7c3 1.8 8-1.8 11 0M4 12c3 1.8 8-1.8 11 0M4 17c3 1.8 8-1.8 11 0" /><circle cx="18.5" cy="8" r=".7" fill="currentColor" stroke="none" /><circle cx="18.5" cy="15" r=".7" fill="currentColor" stroke="none" /></Icon>;
    case 'train': return <Icon {...props}><rect x="5" y="4" width="14" height="13" rx="3" /><path d="M5 11h14M9 4v7M15 4v7" /><circle cx="9" cy="14" r="1" fill="currentColor" stroke="none" /><circle cx="15" cy="14" r="1" fill="currentColor" stroke="none" /><path d="M7 20l1.5-2M17 20l-1.5-2" /></Icon>;
    case 'thunder': return <Icon {...props}><path d="M6 14a4 4 0 0 1-.5-7.97A5.5 5.5 0 0 1 16 6.5a3.6 3.6 0 0 1 1.2 7" /><path d="M12 12l-2 3.5h2.6L11 19.5" /></Icon>;
    case 'whitenoise': return <Icon {...props}><path d="M3 12h2l1.5-5 2 9 2-12 2 14 2-8 1.5 2H22" /></Icon>;
    case 'brownnoise': return <Icon {...props}><path d="M3 12c1-3 2 3 3 0s2 3 3 0 2 3 3 0 2 3 3 0 2 3 3 0" /></Icon>;
    case 'pinknoise': return <Icon {...props}><path d="M3 12c1.2-4 2.4 4 3.6 0s2.4 3 3.6 0 2.4 3.5 3.6 0 2.4 2.5 3.6 0" /><path d="M3 16h18" opacity=".5" /></Icon>;
    case 'clock': return <Icon {...props}><circle cx="12" cy="12" r="8.3" /><path d="M12 7.4V12l3 2" /></Icon>;
    case 'countdown': return <Icon {...props}><path d="M7 3h10M7 21h10" /><path d="M8 3c0 4 8 5 8 9s-8 5-8 9M16 3c0 4-8 5-8 9s8 5 8 9" /></Icon>;
    case 'deepspace': return <Icon {...props}><circle cx="12" cy="12" r="5" /><ellipse cx="12" cy="12" rx="9.4" ry="3.4" transform="rotate(-22 12 12)" /><circle cx="4.5" cy="5" r=".7" fill="currentColor" stroke="none" /><circle cx="20" cy="19" r=".7" fill="currentColor" stroke="none" /></Icon>;
    case 'campfire': return <Icon {...props}><path d="M12 3c3 3.5 5 6 5 9a5 5 0 0 1-10 0c0-1.4.6-2.6 1.5-3.6C9 10 9.5 11 10 11.5c.4-2 1-4 2-8.5z" /><path d="M5 20.5l14-3M19 20.5l-14-3" /></Icon>;
    case 'desertwind': return <Icon {...props}><path d="M2 18c3-3 6 1 9-1.5S18 13 22 15" /><path d="M3 8h9a2 2 0 1 0-2-2M3 12h6a1.7 1.7 0 1 1-1.7 1.7" /></Icon>;
    case 'jungle': return <Icon {...props}><path d="M12 21c0-7 1-11 6-15M12 21c0-7-1-11-6-15" /><path d="M12 9c2.5-3 6-3.5 8-3-1 2.5-3.5 4.5-6.5 4.2M12 12c-2.5-3-6-3-8-2.6 1 2.5 3.5 4 6.5 3.8" /></Icon>;
    case 'waterfall': return <Icon {...props}><path d="M5 4v9M9.5 4v11M14.5 4v11M19 4v9" /><path d="M4 18c1.6-1.6 3.2-1.6 4.8 0s3.2 1.6 4.8 0 3.2-1.6 4.8 0" /></Icon>;
    case 'snowstorm': return <Icon {...props}><path d="M3 8h10a2.2 2.2 0 1 0-2.2-2.2M3 13h7" /><circle cx="7" cy="18" r=".8" fill="currentColor" stroke="none" /><circle cx="13" cy="19.5" r=".8" fill="currentColor" stroke="none" /><circle cx="18" cy="17" r=".8" fill="currentColor" stroke="none" /></Icon>;
    default: return null;
  }
};

Object.assign(window, {
  IconMenu, IconLeaf, IconPlay, IconPause, IconStop, IconFocus, IconChart, IconGear,
  IconChevron, IconCheck, IconLock, IconFlame, IconClose, IconVolume, IconBell,
  IconGlobe, IconWave, IconMoon, IconSun, IconDownload, IconReset, IconCloud, IconTrophy, SoundGlyph,
  IconSparkle, IconCrown, IconDevices, IconTarget, IconCalendar, IconStreak, IconClock,
  IconShare, IconStar, IconArrowRight,
  IconMedal, IconBolt, IconShield, IconGem, IconHourglass, IconTimer, IconUsers, IconHeart,
  IconQuote, IconAward, IconBook, PremiumPill,
});

  