// mocks.jsx — 9 portfolio cards: 7 real screenshots, 1 reused upload (Olympiad), 1 custom AI/CRM mock (Bluewaters)

const ImageMock = (src) => () => (
  <div className="canvas" style={{background:"#fff"}}>
    <img src={src} alt="" loading="lazy"
      style={{width:"100%",height:"100%",objectFit:"cover",objectPosition:"top",display:"block"}}/>
  </div>
);

// Bluewaters AI QC — dark CRM mock, no real brand marks
const BluewatersMock = () => (
  <div className="canvas" style={{background:"#0b0d12",color:"#e8e8ee",fontFamily:"'Inter Tight',sans-serif"}}>
    <div style={{position:"absolute",inset:0,padding:"14px 18px",display:"flex",flexDirection:"column",gap:10}}>
      <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",fontSize:11}}>
        <div style={{display:"flex",alignItems:"center",gap:8,fontWeight:600,letterSpacing:"-.01em"}}>
          <div style={{width:18,height:18,borderRadius:5,background:"linear-gradient(135deg,#1ec6ff,#2347ff)"}}/>
          <span>Sales QC <span style={{color:"#5b8cff"}}>·</span> agent</span>
        </div>
        <div style={{display:"flex",gap:14,opacity:.6,fontSize:10}}>
          <span>Pipeline</span><span>Calls</span><span style={{opacity:1,color:"#fff"}}>Reviews</span><span>Coaching</span>
        </div>
        <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,opacity:.55,letterSpacing:".1em"}}>● LIVE · CRM SYNCED</div>
      </div>

      <div style={{display:"grid",gridTemplateColumns:"1.4fr 1fr",gap:10,flex:1,minHeight:0}}>
        {/* Left — call evaluation panel */}
        <div style={{borderRadius:8,background:"#13161d",border:"1px solid rgba(255,255,255,.06)",padding:14,display:"flex",flexDirection:"column",gap:10,overflow:"hidden"}}>
          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
            <div>
              <div style={{fontSize:9,opacity:.5,fontFamily:"'JetBrains Mono',monospace",letterSpacing:".1em"}}>CALL #4821 · 14:32 · 18 MIN</div>
              <div style={{fontSize:14,fontWeight:600,marginTop:4,letterSpacing:"-.01em"}}>Demo · Discovery — N. Beridze</div>
            </div>
            <div style={{display:"flex",alignItems:"center",gap:10}}>
              <div style={{fontSize:9,fontFamily:"'JetBrains Mono',monospace",opacity:.55}}>SCORE</div>
              <div style={{position:"relative",width:48,height:48}}>
                <svg viewBox="0 0 48 48" width="48" height="48">
                  <circle cx="24" cy="24" r="20" fill="none" stroke="rgba(255,255,255,.08)" strokeWidth="4"/>
                  <circle cx="24" cy="24" r="20" fill="none" stroke="#1ec6ff" strokeWidth="4"
                    strokeDasharray="125.6" strokeDashoffset="22" strokeLinecap="round"
                    transform="rotate(-90 24 24)"/>
                </svg>
                <div style={{position:"absolute",inset:0,display:"grid",placeItems:"center",fontSize:13,fontWeight:700,letterSpacing:"-.02em"}}>87</div>
              </div>
            </div>
          </div>

          {/* Score chips */}
          <div style={{display:"flex",gap:6,flexWrap:"wrap"}}>
            {[
              ["CLARITY","92","#1ec6ff"],
              ["DISCOVERY","78","#1ec6ff"],
              ["OBJECTIONS","✓ HANDLED","#7cffb0"],
              ["NEXT STEP","✓ SET","#7cffb0"],
              ["PACE","FAST","#ffb35a"],
            ].map(([k,v,c],i)=>(
              <div key={i} style={{padding:"5px 9px",borderRadius:99,border:"1px solid rgba(255,255,255,.08)",fontSize:9,fontFamily:"'JetBrains Mono',monospace",letterSpacing:".06em",display:"flex",gap:6,alignItems:"center"}}>
                <span style={{opacity:.55}}>{k}</span><span style={{color:c}}>{v}</span>
              </div>
            ))}
          </div>

          {/* Transcript bubbles with AI flag */}
          <div style={{display:"flex",flexDirection:"column",gap:6,marginTop:2,fontSize:11,lineHeight:1.45}}>
            <div style={{display:"flex",gap:8,alignItems:"flex-start"}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,opacity:.45,marginTop:3,minWidth:38}}>11:42</div>
              <div style={{flex:1}}>
                <span style={{opacity:.55,fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:".06em"}}>REP →</span>
                <span style={{marginLeft:6}}>"Let me walk you through how the integration handles concurrent updates…"</span>
              </div>
            </div>
            <div style={{display:"flex",gap:8,alignItems:"flex-start"}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,opacity:.45,marginTop:3,minWidth:38}}>11:43</div>
              <div style={{flex:1}}>
                <span style={{opacity:.55,fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:".06em"}}>LEAD ←</span>
                <span style={{marginLeft:6}}>"What about the pricing for our team size?"</span>
              </div>
            </div>
            <div style={{display:"flex",gap:8,alignItems:"flex-start",padding:"6px 8px",borderRadius:6,background:"rgba(30,198,255,.06)",border:"1px solid rgba(30,198,255,.18)"}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,color:"#1ec6ff",marginTop:3,minWidth:38,letterSpacing:".06em"}}>QC ◆</div>
              <div style={{flex:1,fontSize:10,opacity:.92}}>
                <b style={{fontWeight:600}}>Pricing question deflected.</b> Suggest sending tier sheet + booking F/U on Tuesday. Auto-drafted in CRM.
              </div>
            </div>
          </div>
        </div>

        {/* Right — pipeline + actions */}
        <div style={{display:"flex",flexDirection:"column",gap:10,minHeight:0}}>
          <div style={{borderRadius:8,background:"#13161d",border:"1px solid rgba(255,255,255,.06)",padding:12}}>
            <div style={{fontSize:9,opacity:.5,fontFamily:"'JetBrains Mono',monospace",letterSpacing:".1em",marginBottom:8}}>PIPELINE · TODAY</div>
            {[["Discovery","12","42%"],["Demo","9","78%"],["Proposal","6","61%"],["Closed","3","100%"]].map(([n,c,p],i)=>(
              <div key={i} style={{display:"flex",alignItems:"center",gap:8,padding:"4px 0",borderBottom:i<3?"1px solid rgba(255,255,255,.05)":"none",fontSize:11}}>
                <span style={{flex:1}}>{n}</span>
                <span style={{opacity:.55,fontFamily:"'JetBrains Mono',monospace",fontSize:10}}>{c}</span>
                <div style={{width:60,height:4,borderRadius:2,background:"rgba(255,255,255,.06)",overflow:"hidden"}}>
                  <div style={{width:p,height:"100%",background:"#1ec6ff"}}/>
                </div>
              </div>
            ))}
          </div>
          <div style={{borderRadius:8,background:"linear-gradient(160deg,rgba(30,198,255,.18),rgba(35,71,255,.10))",border:"1px solid rgba(30,198,255,.25)",padding:12,display:"flex",flexDirection:"column",gap:6}}>
            <div style={{fontSize:9,opacity:.7,fontFamily:"'JetBrains Mono',monospace",letterSpacing:".1em"}}>QC ◆ AUTOMATIONS</div>
            <div style={{fontSize:11,lineHeight:1.45}}>
              <span style={{display:"inline-block",width:6,height:6,borderRadius:99,background:"#7cffb0",marginRight:6,verticalAlign:"middle"}}/>
              Coaching note pushed to manager
            </div>
            <div style={{fontSize:11,lineHeight:1.45}}>
              <span style={{display:"inline-block",width:6,height:6,borderRadius:99,background:"#7cffb0",marginRight:6,verticalAlign:"middle"}}/>
              Follow-up draft created · CRM
            </div>
            <div style={{fontSize:11,lineHeight:1.45}}>
              <span style={{display:"inline-block",width:6,height:6,borderRadius:99,background:"#ffb35a",marginRight:6,verticalAlign:"middle"}}/>
              Pricing tier sheet · queued
            </div>
          </div>
        </div>
      </div>

      <div style={{display:"flex",gap:6,fontFamily:"'JetBrains Mono',monospace",fontSize:9,opacity:.45,letterSpacing:".06em"}}>
        <span>QC v3 · evals 1.4k/mo</span><span>·</span><span>P95 latency 1.8s</span><span>·</span><span>Reviewed 100%</span>
      </div>
    </div>
  </div>
);

const MOCKS = [
  { c: ImageMock("uploads/villa-haven.png"),      title: "Villa Haven",        tag: "Real estate",          url: "st0ckitch.github.io/villa-haven-core", year:"2025", role:"Web · UI" },
  { c: ImageMock("uploads/hmspace.png"),          title: "HMSpace",            tag: "Workspace · Brand",    url: "st0ckitch.github.io/union",             year:"2025", role:"Web · Brand" },
  { c: ImageMock("uploads/union-doors.png"),      title: "Union Doors",        tag: "Manufacturing",        url: "st0ckitch.github.io/union/union",       year:"2025", role:"Web · Catalog" },
  { c: ImageMock("uploads/gtrip.png"),            title: "Gtrip",              tag: "Travel · Booking",     url: "gtrip.ge",                               year:"2025", role:"Web · Booking" },
  { c: ImageMock("uploads/modx.png"),             title: "ModX",               tag: "Brand · Web",          url: "modx.ge",                                year:"2024", role:"Web · CMS" },
  { c: ImageMock("uploads/translate-ucraft.png"), title: "Translate · Ucraft", tag: "AI · Localization",    url: "translate.ucraft.io",                    year:"2025", role:"Product · UI" },
  { c: BluewatersMock,                             title: "Bluewaters AI QC",   tag: "AI · Sales · CRM",     url: "bluewaters.ge",                          year:"2026", role:"AI QC · CRM integration" },
  { c: ImageMock("uploads/fc-algeti.png"),        title: "FC Algeti",          tag: "Sports club",          url: "fc-algeti.ge",                           year:"2024", role:"Web · Brand" },
  { c: ImageMock("uploads/new-step-georgia.jpg"), title: "New Step Georgia",   tag: "Education · Contests", url: "newstep.ge",                             year:"2026", role:"Platform · Web · Brand" },
];

window.MOCKS = MOCKS;