// Decorative placeholder image with hue variant + caption + svg patterns
window.PH=function PH({hue,label,small,svg,img}){
  if(img){
    return (
      <div className={"ph "+(hue||"")} style={{padding:0}}>
        <img src={img} alt={label||""} loading="lazy"
          onError={e=>{e.target.style.display="none"}}/>
      </div>
    );
  }
  return (
    <div className={"ph "+(hue||"")}>
      {svg||null}
      <span>{label||""}</span>
      {small?<small>{small}</small>:null}
    </div>
  );
};
const wrap={position:"absolute",inset:0,width:"100%",height:"100%"};
window.PHart={
  waves:(
    <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice" style={{...wrap,opacity:.55}}>
      <circle cx="320" cy="80" r="50" fill="#fff" fillOpacity=".5"/>
      <path d="M0 320 Q100 280 200 320 T400 320 V500 H0Z" fill="#fff" fillOpacity=".25"/>
      <path d="M0 380 Q100 340 200 380 T400 380 V500 H0Z" fill="#fff" fillOpacity=".2"/>
      <path d="M0 440 Q100 410 200 440 T400 440 V500 H0Z" fill="#fff" fillOpacity=".3"/>
    </svg>
  ),
  palm:(
    <svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice" style={{...wrap,opacity:.5}}>
      <circle cx="80" cy="80" r="60" fill="#fff" fillOpacity=".4"/>
      <g stroke="#fff" strokeWidth="3" fill="none" opacity=".7">
        <path d="M280 360 V200"/>
        <path d="M280 200 Q220 140 160 160"/>
        <path d="M280 200 Q340 140 380 170"/>
        <path d="M280 200 Q240 130 250 80"/>
        <path d="M280 200 Q320 140 340 90"/>
      </g>
    </svg>
  ),
  hills:(
    <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice" style={{...wrap,opacity:.45}}>
      <circle cx="320" cy="100" r="40" fill="#fff" fillOpacity=".55"/>
      <path d="M0 360 Q120 220 240 320 T400 280 V500 H0Z" fill="#fff" fillOpacity=".25"/>
      <path d="M0 420 Q150 300 280 380 T400 360 V500 H0Z" fill="#fff" fillOpacity=".4"/>
    </svg>
  )
};