// Shared icon set — line-style SVG, currentColor
const Icon = {
  Menu:    (p={}) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><path d="M3 7h18M3 12h18M3 17h12" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>,
  X:       (p={}) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/></svg>,
  Arrow:   (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" {...p}><path d="M5 12h14m0 0l-6-6m6 6l-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  Back:    (p={}) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" {...p}><path d="M15 6l-6 6 6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  Star:    (p={}) => <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M12 2l2.9 6.9L22 10l-5.5 4.8L18 22l-6-3.6L6 22l1.5-7.2L2 10l7.1-1.1L12 2z"/></svg>,
  Phone:   (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" {...p}><path d="M5 3h4l2 5-3 2a12 12 0 006 6l2-3 5 2v4a2 2 0 01-2 2A18 18 0 013 5a2 2 0 012-2z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  Mail:    (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" {...p}><rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" strokeWidth="1.8"/><path d="M3 7l9 6 9-6" stroke="currentColor" strokeWidth="1.8"/></svg>,
  Pin:     (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" {...p}><path d="M12 22s7-7.5 7-13a7 7 0 10-14 0c0 5.5 7 13 7 13z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/><circle cx="12" cy="9" r="2.5" stroke="currentColor" strokeWidth="1.8"/></svg>,
  Cal:     (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" {...p}><rect x="3" y="5" width="18" height="16" rx="2" stroke="currentColor" strokeWidth="1.8"/><path d="M3 10h18M8 3v4M16 3v4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>,
  Users:   (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" {...p}><circle cx="9" cy="8" r="3.5" stroke="currentColor" strokeWidth="1.8"/><path d="M2 21a7 7 0 0114 0M16 11a3 3 0 100-6M22 21a6 6 0 00-4-5.7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>,
  Ruler:   (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" {...p}><rect x="2" y="8" width="20" height="8" rx="1.5" stroke="currentColor" strokeWidth="1.8" transform="rotate(-45 12 12)"/><path d="M7 12l1 1M10 9l1 1M13 6l1 1M16 9l1 1M19 6l1 1" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" transform="rotate(-45 12 12)"/></svg>,
  Check:   (p={}) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" {...p}><path d="M4 12l5 5L20 6" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  Heart:   (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" {...p}><path d="M12 21s-7-4.5-9.5-9A5 5 0 0112 6a5 5 0 019.5 6c-2.5 4.5-9.5 9-9.5 9z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/></svg>,
  Sparkle: (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" {...p}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5L18 18M6 18l2.5-2.5M15.5 8.5L18 6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>,
  Home:    (p={}) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><path d="M3 11l9-7 9 7v9a1 1 0 01-1 1h-5v-7H10v7H4a1 1 0 01-1-1v-9z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/></svg>,
  Grid:    (p={}) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><rect x="3" y="3" width="7" height="7" rx="1.5" stroke="currentColor" strokeWidth="1.8"/><rect x="14" y="3" width="7" height="7" rx="1.5" stroke="currentColor" strokeWidth="1.8"/><rect x="3" y="14" width="7" height="7" rx="1.5" stroke="currentColor" strokeWidth="1.8"/><rect x="14" y="14" width="7" height="7" rx="1.5" stroke="currentColor" strokeWidth="1.8"/></svg>,
  Chat:    (p={}) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><path d="M21 12a8 8 0 11-3-6.2L21 4l-1 4a8 8 0 011 4z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/></svg>,
  Spark:   (p={}) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><path d="M12 3l1.8 5.5L19 10l-5.2 1.5L12 17l-1.8-5.5L5 10l5.2-1.5L12 3z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/></svg>,
  Search:  (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" {...p}><circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="1.8"/><path d="M16.5 16.5L21 21" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>,
  Play:    (p={}) => <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M8 5l11 7-11 7V5z"/></svg>,
  Instagram: (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" {...p}><rect x="3" y="3" width="18" height="18" rx="5" stroke="currentColor" strokeWidth="1.8"/><circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.8"/><circle cx="17.2" cy="6.8" r="1.1" fill="currentColor"/></svg>,
  TikTok:    (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" {...p}><path d="M14 3v10.5a3.5 3.5 0 11-3.5-3.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/><path d="M14 3c.5 2.5 2.5 4.5 5 4.8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  Facebook:  (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" {...p}><path d="M15 3h-2.5A3.5 3.5 0 009 6.5V10H6.5v3H9v8h3v-8h2.5l.5-3H12V7a1 1 0 011-1h2V3z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/></svg>,
  YouTube:   (p={}) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" {...p}><rect x="2" y="6" width="20" height="12" rx="3" stroke="currentColor" strokeWidth="1.8"/><path d="M10 9.5l5 2.5-5 2.5v-5z" fill="currentColor"/></svg>,
};

// trust badges (Google + Trustpilot pills)
function TrustBadge({ kind }) {
  if (kind === "google") return (
    <div className="pill pill-glass" style={{height: 32, padding: "0 12px", gap: 8}}>
      <svg width="14" height="14" viewBox="0 0 48 48"><path fill="#FFC107" d="M43.6 20H42V20H24v8h11.3a12 12 0 11-3.3-13.4l5.7-5.7A20 20 0 1044 24c0-1.3-.1-2.7-.4-4z"/><path fill="#FF3D00" d="M6.3 14.7l6.6 4.8A12 12 0 0124 12c3 0 5.8 1.1 7.9 3l5.7-5.7A20 20 0 006.3 14.7z"/><path fill="#4CAF50" d="M24 44a20 20 0 0013.6-5.3l-6.3-5.3A12 12 0 0112.7 28l-6.5 5A20 20 0 0024 44z"/><path fill="#1976D2" d="M43.6 20H42V20H24v8h11.3a12 12 0 01-4 5.4l6.2 5.3C37 38 44 32 44 24c0-1.3-.1-2.7-.4-4z"/></svg>
      <span style={{fontSize:12,fontWeight:700}}>4.9</span>
      <span style={{color:"var(--gold)",fontSize:12}}>★★★★★</span>
    </div>
  );
  if (kind === "trustpilot") return (
    <div className="pill pill-glass" style={{height: 32, padding: "0 12px", gap: 8}}>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="#00B67A"><path d="M12 2l2.9 6.9L22 10l-5.5 4.8L18 22l-6-3.6L6 22l1.5-7.2L2 10l7.1-1.1L12 2z"/></svg>
      <span style={{fontSize:12,fontWeight:700}}>4.8</span>
      <span style={{fontSize:11,color:"var(--ink-2)"}}>Trustpilot</span>
    </div>
  );
}

// Star row
function Stars({ n=5, size=14 }) {
  return (
    <span style={{display:"inline-flex",gap:1,color:"var(--gold)"}}>
      {[0,1,2,3,4].map(i=> <Icon.Star key={i} width={size} height={size} style={{opacity: i<n?1:0.25}} />)}
    </span>
  );
}

Object.assign(window, { Icon, TrustBadge, Stars });
