/* Browser window frame + generic image/gradient preview used by data-driven projects */

function BrowserFrame({ url = 'studio.com', children, dark = false }) {
  return (
    <div className="bw" style={dark ? { background: '#111' } : null}>
      <div className="bw-bar" style={dark ? { background: 'linear-gradient(180deg, #2a2a2c, #1c1c1e)', borderBottomColor: 'rgba(255,255,255,0.08)' } : null}>
        <div className="lights">
          <span className="r"></span><span className="y"></span><span className="g"></span>
        </div>
        <div className="url" style={dark ? { background: 'rgba(255,255,255,0.08)', color: '#a1a1a6' } : null}>
          <span className="lock"></span>
          <span>{url}</span>
        </div>
        <div className="actions">
          <span></span><span></span>
        </div>
      </div>
      <div className="bw-body">{children}</div>
    </div>
  );
}

/* Decorative gradient fallback shown when a project has no uploaded image yet. */
function GradientPreview({ palette, kind }) {
  const [c1, c2, c3] = (palette && palette.length === 3) ? palette : ['#ff5b1f', '#ff3a8c', '#7a5cff'];
  return (
    <div className="mock" style={{
      background: `linear-gradient(140deg, ${c1} 0%, ${c2} 60%, ${c3} 100%)`,
      overflow: 'hidden',
    }}>
      <div style={{ position:'absolute', right:'-15%', top:'-20%', width:'60%', aspectRatio:'1', borderRadius:'50%', background:'rgba(255,255,255,0.10)' }}></div>
      <div style={{ position:'absolute', left:'-10%', bottom:'-30%', width:'70%', aspectRatio:'1', borderRadius:'50%', background:'rgba(255,255,255,0.06)' }}></div>
      {kind === 'shop' && (
        <div style={{ position:'absolute', top:'30%', right:'15%', width:'40%', aspectRatio:'1', borderRadius:'16px', background:'rgba(255,255,255,0.12)', transform:'rotate(-8deg)', backdropFilter:'blur(2px)' }}></div>
      )}
      {kind === 'map' && (
        <svg style={{ position:'absolute', inset:0, width:'100%', height:'100%', opacity:.25 }} viewBox="0 0 100 100" preserveAspectRatio="none">
          <path d="M5 80 Q 25 50, 40 60 T 75 40 T 100 20" fill="none" stroke="#fff" strokeWidth="1.5" strokeDasharray="2 2"/>
          <circle cx="40" cy="60" r="2" fill="#fff"/>
          <circle cx="75" cy="40" r="2" fill="#fff"/>
        </svg>
      )}
      {kind === 'studio' && (
        <div style={{ position:'absolute', left:'20%', top:'20%', right:'20%', bottom:'20%', border:'1px solid rgba(255,255,255,0.18)' }}>
          <div style={{ position:'absolute', inset:'15%', border:'1px solid rgba(255,255,255,0.12)' }}></div>
        </div>
      )}
      <div style={{ position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.35) 100%)' }}></div>
    </div>
  );
}

/* Uploaded screenshot when present, gradient fallback otherwise. */
function ImageFrame({ src, palette, kind }) {
  if (src) {
    return (
      <div className="mock">
        <img className="cover-img" src={src} alt="" loading="lazy" />
      </div>
    );
  }
  return <GradientPreview palette={palette} kind={kind} />;
}

Object.assign(window, { BrowserFrame, GradientPreview, ImageFrame });