// Vonex CCM Demo — embeds the real high-fidelity prototype
// (vonex-prototype/index.html) inside a Chrome-style browser frame.

// ─── Browser chrome ─────────────────────────────────────────────────
const Chrome = ({ url, title, children }) => (
  <div style={{width:'100%',height:'100%',display:'flex',flexDirection:'column',background:'#dadce0',fontFamily:'Inter,sans-serif'}}>
    {/* Top bar with tab */}
    <div style={{height:32,background:'#dadce0',display:'flex',alignItems:'flex-end',padding:'0 8px',gap:0,flexShrink:0}}>
      <div style={{height:28,background:'#fff',borderTopLeftRadius:8,borderTopRightRadius:8,padding:'0 12px',display:'flex',alignItems:'center',gap:8,minWidth:200,maxWidth:280}}>
        <div style={{width:14,height:14,borderRadius:'50%',background:'linear-gradient(135deg,#a855f7,#22d3ee)',flexShrink:0,display:'flex',alignItems:'center',justifyContent:'center',fontSize:8,color:'#fff',fontWeight:700}}>V</div>
        <div style={{fontSize:11,color:'#3c4043',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis',flex:1}}>{title}</div>
        <div style={{fontSize:14,color:'#5f6368',cursor:'pointer',lineHeight:1}}>×</div>
      </div>
      <div style={{width:24,height:28,display:'flex',alignItems:'center',justifyContent:'center',color:'#5f6368',fontSize:14}}>+</div>
    </div>
    {/* URL bar */}
    <div style={{height:36,background:'#fff',borderBottom:'1px solid #dadce0',display:'flex',alignItems:'center',padding:'0 12px',gap:8,flexShrink:0}}>
      <div style={{display:'flex',gap:6,color:'#5f6368'}}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
      </div>
      <div style={{flex:1,height:22,background:'#f1f3f4',borderRadius:11,display:'flex',alignItems:'center',padding:'0 10px',gap:6,fontSize:11,color:'#3c4043'}}>
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
        {url}
      </div>
      <div style={{display:'flex',gap:6,alignItems:'center',color:'#5f6368'}}>
        <div style={{width:18,height:18,borderRadius:'50%',background:'#9aa0a6',color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',fontSize:9,fontWeight:600}}>L</div>
        <div style={{fontSize:16,lineHeight:1}}>⋮</div>
      </div>
    </div>
    {/* App content */}
    <div style={{flex:1,minHeight:0,position:'relative',background:'#fff'}}>{children}</div>
  </div>
);

// ─── Component ──────────────────────────────────────────────────────
const VonexDemo = () => (
  <Chrome url="https://ccm.vonex.com.br" title="CCM — Atendimento e Conversas">
    <iframe
      src="vonex-prototype/index.html"
      title="CCM Atendimentos — Vonex"
      style={{width:'100%',height:'100%',border:0,display:'block'}}
    />
  </Chrome>
);

Object.assign(window, { VonexDemo });
