// components.jsx — small shared UI bits
const { useState, useEffect, useRef, useMemo } = React;

// inline SVG icons (1 = stroked, calm)
const Icon = ({ name, size=16, stroke=1.5 }) => {
  const s = { width:size, height:size, fill:'none', stroke:'currentColor', strokeWidth:stroke, strokeLinecap:'round', strokeLinejoin:'round' };
  switch(name){
    case 'arrow':   return <svg viewBox="0 0 24 24" {...s}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case 'pin':     return <svg viewBox="0 0 24 24" {...s}><path d="M12 22s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12z"/><circle cx="12" cy="10" r="2.5"/></svg>;
    case 'phone':   return <svg viewBox="0 0 24 24" {...s}><path d="M5 4h3l2 5-2 1a12 12 0 0 0 6 6l1-2 5 2v3a2 2 0 0 1-2 2A17 17 0 0 1 3 6a2 2 0 0 1 2-2z"/></svg>;
    case 'mail':    return <svg viewBox="0 0 24 24" {...s}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 7 9-7"/></svg>;
    case 'globe':   return <svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>;
    case 'cal':     return <svg viewBox="0 0 24 24" {...s}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></svg>;
    case 'ig':      return <svg viewBox="0 0 24 24" {...s}><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=".5" fill="currentColor"/></svg>;
    case 'star':    return <svg viewBox="0 0 24 24" fill="currentColor" stroke="none" style={{width:size,height:size}}><path d="M12 2.5l2.9 6.2 6.6.8-4.9 4.6 1.3 6.7L12 17.5 6.1 20.8l1.3-6.7L2.5 9.5l6.6-.8z"/></svg>;
    case 'heart':   return <svg viewBox="0 0 24 24" {...s}><path d="M12 21s-7-4.5-9.5-9A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 6c-2.5 4.5-9.5 9-9.5 9z"/></svg>;
    case 'heart-fill': return <svg viewBox="0 0 24 24" fill="currentColor" stroke="none" style={{width:size,height:size}}><path d="M12 21s-7-4.5-9.5-9A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 6c-2.5 4.5-9.5 9-9.5 9z"/></svg>;
    case 'search':  return <svg viewBox="0 0 24 24" {...s}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>;
    case 'crosshair': return <svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="2"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/></svg>;
    case 'plus':    return <svg viewBox="0 0 24 24" {...s}><path d="M12 5v14M5 12h14"/></svg>;
    case 'minus':   return <svg viewBox="0 0 24 24" {...s}><path d="M5 12h14"/></svg>;
    case 'filter':  return <svg viewBox="0 0 24 24" {...s}><path d="M3 5h18M6 12h12M10 19h4"/></svg>;
    case 'list':    return <svg viewBox="0 0 24 24" {...s}><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>;
    case 'map':     return <svg viewBox="0 0 24 24" {...s}><path d="m3 6 6-2 6 2 6-2v14l-6 2-6-2-6 2zM9 4v16M15 6v16"/></svg>;
  }
  return null;
};

const Stars = ({ rating, size=12 }) => {
  const full = Math.round(rating);
  return (
    <span className="stars" aria-label={`${rating} stars`} style={{display:'inline-flex',gap:1}}>
      {Array.from({length:5}).map((_,i)=>(
        <span key={i} style={{opacity: i<full ? 1 : .25, display:'inline-flex'}}>
          <Icon name="star" size={size}/>
        </span>
      ))}
    </span>
  );
};

const Pill = ({ children, active, ...p }) => (
  <span className={`pill ${active?'active':''}`} {...p}>{children}</span>
);

// shared placeholder — renders an image if `image` is provided, otherwise label box
const Placeholder = ({ label, image, style, className = '' }) => (
  <div className={`ph ${className}`.trim()} style={style}>
    {image
      ? <img src={image} alt={label} style={{width:'100%',height:'100%',objectFit:'cover',borderRadius:'inherit',display:'block'}}/>
      : <span>[ {label} ]</span>
    }
  </div>
);

if (typeof window !== 'undefined') {
  Object.assign(window, { Icon, Stars, Pill, Placeholder });
}