// Atomic building blocks: placeholders, icons, chips

const Icon = ({name, className}) => {
  const paths = {
    heart: <path d="M8 13.5s-5-3.2-5-7A3 3 0 018 4a3 3 0 015 2.5c0 3.8-5 7-5 7z"/>,
    search: <g><circle cx="7" cy="7" r="5"/><path d="M10.5 10.5L14 14"/></g>,
    cart: <g><path d="M2 3h2l2 9h8l2-7H5"/><circle cx="7" cy="14" r="1"/><circle cx="13" cy="14" r="1"/></g>,
    user: <g><circle cx="8" cy="6" r="3"/><path d="M2 14c0-3 3-5 6-5s6 2 6 5"/></g>,
    arrow: <path d="M3 8h10m-4-4l4 4-4 4"/>,
    arrowL: <path d="M13 8H3m4-4L3 8l4 4"/>,
    close: <path d="M3 3l10 10M13 3L3 13"/>,
    check: <path d="M3 8l3 3 7-7"/>,
    truck: <g><rect x="1" y="4" width="9" height="7"/><path d="M10 6h4l2 2v3h-6"/><circle cx="4" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/></g>,
    shield: <path d="M8 1l6 3v5c0 4-6 7-6 7s-6-3-6-7V4l6-3z"/>,
    leaf: <path d="M14 2s-10 0-10 7a5 5 0 005 5c7 0 5-12 5-12zM4 14c0-4 4-8 10-12"/>,
    hand: <g><path d="M4 9V4a1.5 1.5 0 013 0v5"/><path d="M7 9V3a1.5 1.5 0 013 0v6"/><path d="M10 9V4a1.5 1.5 0 013 0v7c0 2.5-2 4-4 4H6c-2 0-4-1.5-4-4l1-3"/></g>,
    atelier: <g><path d="M2 13V6l6-3 6 3v7"/><path d="M6 13V9h4v4"/></g>,
    return: <g><path d="M3 6h8a3 3 0 010 6H6"/><path d="M5 3L2 6l3 3"/></g>,
    pin: <g><path d="M8 1a5 5 0 00-5 5c0 4 5 9 5 9s5-5 5-9a5 5 0 00-5-5z"/><circle cx="8" cy="6" r="2"/></g>,
    star: <path d="M7 1l1.8 3.7 4.1.6-3 2.9.7 4.1L7 10.4 3.4 12.3 4.1 8.2 1.1 5.3l4.1-.6z"/>,
    plus: <path d="M8 3v10M3 8h10"/>,
    minus: <path d="M3 8h10"/>,
    chev: <path d="M4 6l4 4 4-4"/>,
    menu: <path d="M2 4h12M2 8h12M2 12h12"/>,
    lock: <g><rect x="3.5" y="7" width="9" height="7" rx="0.5"/><path d="M5.5 7V4.5a2.5 2.5 0 015 0V7"/></g>,
  };
  return <svg className={"ico "+(className||"")} viewBox="0 0 16 16">{paths[name]}</svg>;
};

// Product image slot: real photo if `src` provided, otherwise tonal placeholder.
// If `src` fails to load, gracefully falls back to the tonal placeholder with label.
const Ph = ({tone="default", label, center, className="", src, src2, alt}) => {
  const [failed, setFailed] = React.useState(false);
  React.useEffect(()=>{ setFailed(false); }, [src]);
  if (src && !failed) {
    return (
      <div className={`ph has-img ${className}`}>
        <img src={src} alt={alt||label||""} loading="lazy" referrerPolicy="no-referrer" onError={()=>setFailed(true)}/>
        {src2 && <img className="alt" src={src2} alt="" loading="lazy" referrerPolicy="no-referrer" onError={(e)=>{e.currentTarget.style.display='none'}}/>}
      </div>
    );
  }
  return (
    <div className={`ph ${tone} ${className}`}>
      {label && <div className="label">{label}</div>}
      {center && <div className="centerlabel">{center}</div>}
    </div>
  );
};

const Stars = ({n=5, of=5}) => (
  <span className="stars" aria-label={`${n} of ${of}`}>
    {Array.from({length:of}).map((_,i)=> <Icon key={i} name="star" />)}
  </span>
);

const Flag = ({kind, children}) => (
  <span className={`flag ${kind||""}`}>{children}</span>
);

const Swatch = ({c}) => <span className={`swatch ${c}`} />;

// Simple router + app state
const AppContext = React.createContext(null);
const useApp = () => React.useContext(AppContext);

Object.assign(window, { Icon, Ph, Stars, Flag, Swatch, AppContext, useApp });