// Wander — shared UI primitives & icons

const Icon = {
  pin:    (p={}) => <svg viewBox="0 0 24 24" width={p.size||22} height={p.size||22} fill="none" stroke={p.color||'currentColor'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s7-7 7-13a7 7 0 10-14 0c0 6 7 13 7 13z"/><circle cx="12" cy="9" r="2.5"/></svg>,
  play:   (p={}) => <svg viewBox="0 0 24 24" width={p.size||18} height={p.size||18} fill={p.color||'currentColor'}><path d="M7 5v14l12-7z"/></svg>,
  pause:  (p={}) => <svg viewBox="0 0 24 24" width={p.size||18} height={p.size||18} fill={p.color||'currentColor'}><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg>,
  search: (p={}) => <svg viewBox="0 0 24 24" width={p.size||20} height={p.size||20} fill="none" stroke={p.color||'currentColor'} strokeWidth="2" strokeLinecap="round"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>,
  download:(p={}) => <svg viewBox="0 0 24 24" width={p.size||20} height={p.size||20} fill="none" stroke={p.color||'currentColor'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 4v12m0 0l-4-4m4 4l4-4M5 20h14"/></svg>,
  heart:  (p={}) => <svg viewBox="0 0 24 24" width={p.size||20} height={p.size||20} fill={p.filled?(p.color||'currentColor'):'none'} stroke={p.color||'currentColor'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 21s-7-4.5-9-9a5 5 0 019-3 5 5 0 019 3c-2 4.5-9 9-9 9z"/></svg>,
  user:   (p={}) => <svg viewBox="0 0 24 24" width={p.size||20} height={p.size||20} fill="none" stroke={p.color||'currentColor'} strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></svg>,
  compass:(p={}) => <svg viewBox="0 0 24 24" width={p.size||20} height={p.size||20} fill="none" stroke={p.color||'currentColor'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M14.5 9.5L13 13l-3.5 1.5L11 11z" fill={p.color||'currentColor'}/></svg>,
  star:   (p={}) => <svg viewBox="0 0 24 24" width={p.size||14} height={p.size||14} fill={p.color||'currentColor'}><path d="M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7-6.2-3.8-6.2 3.8 1.6-7L2 9.5l7.1-.6L12 2z"/></svg>,
  arrow:  (p={}) => <svg viewBox="0 0 24 24" width={p.size||18} height={p.size||18} fill="none" stroke={p.color||'currentColor'} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14m-6-6l6 6-6 6"/></svg>,
  back:   (p={}) => <svg viewBox="0 0 24 24" width={p.size||18} height={p.size||18} fill="none" stroke={p.color||'currentColor'} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M19 12H5m6 6l-6-6 6-6"/></svg>,
  close:  (p={}) => <svg viewBox="0 0 24 24" width={p.size||18} height={p.size||18} fill="none" stroke={p.color||'currentColor'} strokeWidth="2.2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>,
  filter: (p={}) => <svg viewBox="0 0 24 24" width={p.size||18} height={p.size||18} fill="none" stroke={p.color||'currentColor'} strokeWidth="2" strokeLinecap="round"><path d="M3 5h18M6 12h12M10 19h4"/></svg>,
  check:  (p={}) => <svg viewBox="0 0 24 24" width={p.size||16} height={p.size||16} fill="none" stroke={p.color||'currentColor'} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5L20 6"/></svg>,
  audio:  (p={}) => <svg viewBox="0 0 24 24" width={p.size||16} height={p.size||16} fill="none" stroke={p.color||'currentColor'} strokeWidth="2" strokeLinecap="round"><path d="M11 5L6 9H3v6h3l5 4V5z"/><path d="M16 9a4 4 0 010 6"/></svg>,
  video:  (p={}) => <svg viewBox="0 0 24 24" width={p.size||16} height={p.size||16} fill="none" stroke={p.color||'currentColor'} strokeWidth="2" strokeLinejoin="round"><rect x="3" y="6" width="13" height="12" rx="2"/><path d="M16 10l5-3v10l-5-3"/></svg>,
  ar:     (p={}) => <svg viewBox="0 0 24 24" width={p.size||16} height={p.size||16} fill="none" stroke={p.color||'currentColor'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 8V5a2 2 0 012-2h3M21 8V5a2 2 0 00-2-2h-3M3 16v3a2 2 0 002 2h3M21 16v3a2 2 0 01-2 2h-3"/><path d="M12 7l5 3v5l-5 3-5-3v-5l5-3z"/><path d="M12 7v9M7 10l5 3 5-3"/></svg>,
  quiz:   (p={}) => <svg viewBox="0 0 24 24" width={p.size||16} height={p.size||16} fill="none" stroke={p.color||'currentColor'} strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="12" r="9"/><path d="M9.5 9.5a2.5 2.5 0 015 0c0 2-2.5 2-2.5 4"/><circle cx="12" cy="17" r="0.6" fill={p.color||'currentColor'}/></svg>,
  text:   (p={}) => <svg viewBox="0 0 24 24" width={p.size||16} height={p.size||16} fill="none" stroke={p.color||'currentColor'} strokeWidth="2" strokeLinecap="round"><path d="M5 5h14M5 12h14M5 19h9"/></svg>,
  sparkle:(p={}) => <svg viewBox="0 0 24 24" width={p.size||16} height={p.size||16} fill={p.color||'currentColor'}><path d="M12 2l1.8 5.5L19 9l-5.2 1.5L12 16l-1.8-5.5L5 9l5.2-1.5L12 2z"/></svg>,
  skip:   (p={}) => <svg viewBox="0 0 24 24" width={p.size||18} height={p.size||18} fill={p.color||'currentColor'}><path d="M5 5v14l9-7-9-7z"/><rect x="16" y="5" width="3" height="14" rx="1"/></svg>,
  back15: (p={}) => <svg viewBox="0 0 24 24" width={p.size||22} height={p.size||22} fill="none" stroke={p.color||'currentColor'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12a9 9 0 109-9V1"/><path d="M3 12L1 10m2 2l2-2"/><text x="12" y="15" fontSize="7" fontFamily="ui-sans-serif,system-ui" fontWeight="700" fill={p.color||'currentColor'} stroke="none" textAnchor="middle">15</text></svg>,
  fwd15:  (p={}) => <svg viewBox="0 0 24 24" width={p.size||22} height={p.size||22} fill="none" stroke={p.color||'currentColor'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12a9 9 0 11-9-9V1"/><path d="M21 12l2-2m-2 2l-2-2"/><text x="12" y="15" fontSize="7" fontFamily="ui-sans-serif,system-ui" fontWeight="700" fill={p.color||'currentColor'} stroke="none" textAnchor="middle">15</text></svg>,
  trophy: (p={}) => <svg viewBox="0 0 24 24" width={p.size||20} height={p.size||20} fill="none" stroke={p.color||'currentColor'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M8 4h8v6a4 4 0 01-8 0V4z"/><path d="M8 6H5v2a3 3 0 003 3M16 6h3v2a3 3 0 01-3 3"/><path d="M10 16h4v3h-4z"/><path d="M8 21h8"/></svg>,
  loc:    (p={}) => <svg viewBox="0 0 24 24" width={p.size||22} height={p.size||22} fill="none" stroke={p.color||'currentColor'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/></svg>,
  globe:  (p={}) => <svg viewBox="0 0 24 24" width={p.size||22} height={p.size||22} fill="none" stroke={p.color||'currentColor'} strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a13 13 0 010 18M12 3a13 13 0 000 18"/></svg>,
};

const formatIcon = (f, size=14, color) => ({
  audio: <Icon.audio size={size} color={color}/>,
  video: <Icon.video size={size} color={color}/>,
  ar:    <Icon.ar    size={size} color={color}/>,
  text:  <Icon.text  size={size} color={color}/>,
  quiz:  <Icon.quiz  size={size} color={color}/>,
}[f]);

function TourArt({ tour, h=180, rounded=22, hideChip=false, chipTop=14 }) {
  const [c1,c2] = Array.isArray(tour.hero) ? tour.hero : ['#FFC93C','#F5A623'];
  return (
    <div style={{ height:h, borderRadius:rounded, position:'relative', overflow:'hidden', background:`linear-gradient(135deg,${c1} 0%,${c2} 100%)` }}>
      <div style={{ position:'absolute', top:-20, right:-30, width:140, height:140, borderRadius:'50%', background:'rgba(255,255,255,0.18)' }}/>
      <div style={{ position:'absolute', bottom:-40, left:-20, width:110, height:110, borderRadius:'50%', background:'rgba(0,0,0,0.08)' }}/>
      <div style={{ position:'absolute', bottom:18, right:24, width:48, height:48, borderRadius:14, background:'rgba(255,255,255,0.22)', transform:'rotate(20deg)' }}/>
      <div style={{ position:'absolute', top:'50%', left:'50%', transform:'translate(-50%,-50%)', fontSize:h*0.42, lineHeight:1, filter:'drop-shadow(0 6px 14px rgba(0,0,0,0.18))', animation:'wFloat 4s ease-in-out infinite' }}>{tour.emoji}</div>
      {!hideChip && (
        <div style={{ position:'absolute', top:chipTop, left:14 }}>
          {tour.tier==='free'
            ? <span className="w-chip w-chip--free">FREE</span>
            : <span className="w-chip w-chip--pro">PRO · ${tour.price}</span>}
        </div>
      )}
    </div>
  );
}

function TabBar({ active, onChange }) {
  const tabs = [
    { id:'map',     label:'Map',    I:Icon.pin },
    { id:'browse',  label:'Browse', I:Icon.compass },
    { id:'saved',   label:'Saved',  I:Icon.heart },
    { id:'profile', label:'You',    I:Icon.user },
  ];
  return (
    <div style={{ position:'absolute', bottom:18, left:16, right:16, height:64, borderRadius:32, background:'rgba(255,253,246,0.92)', backdropFilter:'blur(20px) saturate(180%)', WebkitBackdropFilter:'blur(20px) saturate(180%)', boxShadow:'0 6px 28px rgba(26,24,18,0.12), inset 0 0 0 1px rgba(232,227,213,0.6)', display:'flex', alignItems:'center', justifyContent:'space-around', padding:'0 8px', zIndex:100 }}>
      {tabs.map(t => {
        const on = active===t.id;
        return (
          <button key={t.id} onClick={()=>onChange(t.id)} style={{ background:'none', border:'none', cursor:'pointer', display:'flex', flexDirection:'column', alignItems:'center', gap:2, padding:'6px 12px', borderRadius:20, color:on?'var(--w-ink)':'var(--w-mute)', fontFamily:'inherit' }}>
            <div style={{ padding:6, borderRadius:14, background:on?'var(--w-yellow)':'transparent', transition:'all .2s' }}>
              <t.I size={20} color={on?'var(--w-yellow-ink)':'var(--w-mute)'}/>
            </div>
            <span style={{ fontSize:10.5, fontWeight:700, letterSpacing:0.2 }}>{t.label}</span>
          </button>
        );
      })}
    </div>
  );
}

function Rating({ value, reviews, size=12, color='var(--w-yellow-deep)' }) {
  return (
    <span style={{ display:'inline-flex', alignItems:'center', gap:4, fontSize:size+1, fontWeight:600, color:'var(--w-ink)' }}>
      <Icon.star size={size} color={color}/> {value}
      {reviews!==undefined && <span style={{ color:'var(--w-mute)', fontWeight:500 }}>· {reviews.toLocaleString()}</span>}
    </span>
  );
}

Object.assign(window, { Icon, formatIcon, TourArt, TabBar, Rating });
