/* ui.jsx — shared page chrome used across pages */

function PageBanner({ eyebrow, title, sub, icon }) {
  return (
    <div style={{ position:'relative', overflow:'hidden', borderBottom:'1.5px solid var(--line)' }}>
      <div className="page-wrap" style={{ padding:'46px 28px 38px' }}>
        <div className="eyebrow" style={{ marginBottom:14 }}>{eyebrow}</div>
        <div style={{ display:'flex', alignItems:'flex-end', gap:18, flexWrap:'wrap' }}>
          <h1 style={{ fontSize:'clamp(34px,5vw,56px)', maxWidth:760 }}>{title}</h1>
        </div>
        {sub && <p style={{ fontFamily:'var(--serif)', fontStyle:'italic', fontSize:'clamp(17px,2vw,21px)', color:'var(--ink-soft)', maxWidth:620, marginTop:14 }}>{sub}</p>}
      </div>
    </div>
  );
}

function Stars({ value, size=14 }) {
  return (
    <span style={{ display:'inline-flex', alignItems:'center', gap:5, color:'var(--accent)', fontWeight:700, fontSize:13.5 }}>
      <IconStar size={size}/> <span style={{ color:'var(--ink)' }}>{value.toFixed(1)}</span>
    </span>
  );
}

function DiffTag({ diff }) {
  const map = { Easy:'#5c7461', Moderate:'#cf9521', Hard:'#9a3b4f' };
  return <span className="chip" style={{ background:'transparent', borderColor: map[diff], color: map[diff] }}>{diff}</span>;
}

/* photographic placeholder: warm gradient + faint icon, fills its box */
function PhotoPlaceholder({ tint='#c98f5a', icon, label, style }) {
  return (
    <div style={{ position:'relative', background:`linear-gradient(135deg, ${tint}, ${tint}cc)`, overflow:'hidden',
      display:'grid', placeItems:'center', ...style }}>
      <div style={{ position:'absolute', inset:0, opacity:.5, mixBlendMode:'soft-light',
        backgroundImage:'url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2780%27 height=%2780%27%3E%3Cpath d=%27M0 40h80M40 0v80%27 stroke=%27%23fff%27 stroke-width=%270.5%27 opacity=%270.4%27/%3E%3C/svg%3E")' }}/>
      <span style={{ color:'rgba(255,255,255,.85)', display:'flex' }}>{icon}</span>
      {label && <span style={{ position:'absolute', bottom:10, left:12, fontSize:11.5, fontWeight:600, color:'rgba(255,255,255,.8)',
        letterSpacing:'.04em' }}>{label}</span>}
    </div>
  );
}

function PhotoCarousel({ photos, height = 200 }) {
  const [idx, setIdx] = React.useState(0);
  if (!photos || photos.length === 0) return null;

  const nav = (dir, e) => {
    e.stopPropagation();
    setIdx(i => (i + dir + photos.length) % photos.length);
  };

  const btnStyle = {
    position:'absolute', top:'50%', transform:'translateY(-50%)',
    background:'rgba(0,0,0,.45)', color:'#fff', border:'none', borderRadius:'50%',
    width:30, height:30, cursor:'pointer', display:'flex', alignItems:'center',
    justifyContent:'center', fontSize:20, lineHeight:1, padding:0,
  };

  return (
    <div style={{ position:'relative', borderRadius:8, overflow:'hidden', marginTop:10 }}>
      <img src={photos[idx]} alt="Photo" onError={e => e.target.remove()}
        style={{ width:'100%', height, objectFit:'cover', display:'block' }} />
      {photos.length > 1 && <>
        <button style={{ ...btnStyle, left:6 }}  onClick={e => nav(-1, e)}>&#8249;</button>
        <button style={{ ...btnStyle, right:6 }} onClick={e => nav(1,  e)}>&#8250;</button>
        <span style={{ position:'absolute', bottom:6, right:8, background:'rgba(0,0,0,.45)',
          color:'#fff', fontSize:10, fontWeight:600, padding:'2px 7px', borderRadius:10 }}>
          {idx + 1} / {photos.length}
        </span>
      </>}
    </div>
  );
}

Object.assign(window, { PageBanner, Stars, DiffTag, PhotoPlaceholder, PhotoCarousel });