// mocks.jsx — small abstract visualizations per service. Pure CSS/SVG, no real logos.

function MockShell({ children, label }) {
  return (
    <div style={{
      position:"relative", width:"100%", height:"100%",
      borderRadius:"calc(var(--radius-lg) - 2px)", overflow:"hidden",
      background:"radial-gradient(120% 80% at 30% 0%, rgba(255,159,10,.10), transparent 55%), linear-gradient(180deg,#15151b,#06060a)",
      border:"1px solid var(--line)",
    }}>
      {children}
      {label && (
        <div style={{
          position:"absolute", left:14, top:12, zIndex:5,
          fontSize:10, letterSpacing:".12em", textTransform:"uppercase", color:"var(--fg-dim)",
          padding:"4px 8px", borderRadius:999, border:"1px solid var(--line)",
          background:"rgba(0,0,0,.45)", backdropFilter:"blur(8px)",
        }}>{label}</div>
      )}
    </div>
  );
}

function MockWeb() {
  return (
    <div style={{
      position:"absolute", inset:0,
      borderRadius:14, border:"1px solid var(--line-strong)",
      background:"linear-gradient(180deg,#0a0a0e,#000)", overflow:"hidden",
      boxShadow:"0 20px 60px rgba(0,0,0,.5)",
      display:"flex", flexDirection:"column",
    }}>
      <div style={{ height:22, borderBottom:"1px solid var(--line)", display:"flex", alignItems:"center", padding:"0 10px", gap:6, background:"#0d0d12", flex:"none" }}>
        <i style={{ width:8, height:8, borderRadius:"50%", background:"#3a3a3f", display:"inline-block" }}/>
        <i style={{ width:8, height:8, borderRadius:"50%", background:"#3a3a3f", display:"inline-block" }}/>
        <i style={{ width:8, height:8, borderRadius:"50%", background:"#3a3a3f", display:"inline-block" }}/>
        <div style={{ flex:1, height:10, marginLeft:8, background:"#181820", borderRadius:4 }}/>
      </div>
      <video
        src="assets/web-dev.mp4"
        autoPlay muted loop playsInline preload="metadata"
        style={{ width:"100%", height:"100%", objectFit:"cover", flex:1, display:"block", background:"#000" }}
      />
    </div>
  );
}

function MockFunnel() {
  // Stacked trapezoid funnel
  return (
    <MockShell label="Funnel">
      <svg viewBox="0 0 400 320" style={{ position:"absolute", inset:0, width:"100%", height:"100%" }}>
        <defs>
          <linearGradient id="fg1" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#ff9f0a" stopOpacity=".95"/>
            <stop offset="1" stopColor="#ff9f0a" stopOpacity=".4"/>
          </linearGradient>
        </defs>
        {[
          { y:60,  w:260, h:36, label:"Visitors", v:"128,400" },
          { y:110, w:220, h:36, label:"Leads",    v:"9,820" },
          { y:160, w:180, h:36, label:"MQL",      v:"3,140" },
          { y:210, w:140, h:36, label:"Trials",   v:"948" },
          { y:260, w:96,  h:36, label:"Customers",v:"212" },
        ].map((b,i)=>(
          <g key={i}>
            <rect x={200-b.w/2} y={b.y} width={b.w} height={b.h} rx="6"
              fill={i===0?"url(#fg1)":"rgba(255,255,255,.08)"} stroke="rgba(255,255,255,.12)"/>
            <text x={200} y={b.y+22} textAnchor="middle" fill="#f5f5f7" fontSize="12" fontWeight="600" fontFamily="Inter">{b.label}</text>
            <text x={200} y={b.y+33} textAnchor="middle" fill="#a1a1a6" fontSize="9" fontFamily="Inter">{b.v}</text>
          </g>
        ))}
        <line x1="40" y1="300" x2="360" y2="300" stroke="rgba(255,255,255,.1)"/>
        <text x="40" y="40" fill="#a1a1a6" fontSize="10" fontFamily="Inter" letterSpacing="1">CONVERSION 0.16%</text>
        <text x="360" y="40" fill="#ff9f0a" fontSize="10" fontFamily="Inter" textAnchor="end">↑ 2.4× MoM</text>
      </svg>
    </MockShell>
  );
}

function MockOps() {
  // Workflow node graph
  return (
    <MockShell label="Workflow">
      <svg viewBox="0 0 400 300" style={{ position:"absolute", inset:0, width:"100%", height:"100%" }}>
        <g stroke="rgba(255,255,255,.18)" fill="none" strokeWidth="1.2">
          <path d="M70,90 C 130,90 130,150 200,150"/>
          <path d="M70,210 C 130,210 130,150 200,150"/>
          <path d="M200,150 C 270,150 270,90 330,90"/>
          <path d="M200,150 C 270,150 270,210 330,210"/>
        </g>
        {[
          { x:40,  y:75,  w:60, h:30, l:"Form" },
          { x:40,  y:195, w:60, h:30, l:"Stripe" },
          { x:170, y:135, w:60, h:30, l:"Logic" },
          { x:300, y:75,  w:60, h:30, l:"CRM" },
          { x:300, y:195, w:60, h:30, l:"Email" },
        ].map((n,i)=>(
          <g key={i}>
            <rect x={n.x} y={n.y} width={n.w} height={n.h} rx="8"
              fill={i===2?"rgba(255,159,10,.18)":"rgba(255,255,255,.06)"}
              stroke={i===2?"#ff9f0a":"rgba(255,255,255,.18)"}/>
            <text x={n.x+n.w/2} y={n.y+19} textAnchor="middle" fill="#f5f5f7" fontSize="11" fontWeight="500" fontFamily="Inter">{n.l}</text>
          </g>
        ))}
        {/* pulse */}
        <circle cx="200" cy="150" r="3" fill="#ff9f0a">
          <animate attributeName="r" values="3;7;3" dur="2s" repeatCount="indefinite"/>
          <animate attributeName="opacity" values="1;0;1" dur="2s" repeatCount="indefinite"/>
        </circle>
      </svg>
    </MockShell>
  );
}

function MockEmail() {
  return (
    <MockShell label="Email">
      <div style={{ position:"absolute", inset:"16% 8% 12% 8%", display:"grid", gridTemplateColumns:"1fr 1fr", gap:10 }}>
        {/* inbox */}
        <div style={{ background:"#0a0a0f", border:"1px solid var(--line)", borderRadius:10, padding:10, display:"flex", flexDirection:"column", gap:6 }}>
          {[1,2,3,4].map((i)=>(
            <div key={i} style={{ display:"flex", gap:6, alignItems:"center", padding:"5px 4px", borderRadius:6, background:i===1?"rgba(255,159,10,.08)":"transparent" }}>
              <div style={{ width:14, height:14, borderRadius:"50%", background:"#222230" }}/>
              <div style={{ flex:1 }}>
                <div style={{ width:"70%", height:5, background:"#f5f5f7", opacity:.85, borderRadius:2, marginBottom:3 }}/>
                <div style={{ width:"50%", height:4, background:"#6e6e73", borderRadius:2 }}/>
              </div>
            </div>
          ))}
        </div>
        {/* chart */}
        <div style={{ background:"#0a0a0f", border:"1px solid var(--line)", borderRadius:10, padding:10, display:"flex", flexDirection:"column" }}>
          <div style={{ display:"flex", justifyContent:"space-between", color:"#a1a1a6", fontSize:8, marginBottom:6 }}>
            <span>OPEN RATE</span><span style={{ color:"#ff9f0a" }}>54.2%</span>
          </div>
          <svg viewBox="0 0 120 80" style={{ flex:1, width:"100%" }}>
            <defs>
              <linearGradient id="emailA" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0" stopColor="#ff9f0a" stopOpacity=".5"/>
                <stop offset="1" stopColor="#ff9f0a" stopOpacity="0"/>
              </linearGradient>
            </defs>
            <path d="M0,60 C 20,50 30,55 45,40 C 60,28 80,38 100,18 L 120,12 L 120,80 L 0,80 Z" fill="url(#emailA)"/>
            <path d="M0,60 C 20,50 30,55 45,40 C 60,28 80,38 100,18 L 120,12" stroke="#ff9f0a" strokeWidth="1.5" fill="none"/>
          </svg>
        </div>
      </div>
    </MockShell>
  );
}

function MockSocial() {
  // Phone w/ feed grid
  return (
    <MockShell label="Social grid">
      <div style={{
        position:"absolute", left:"50%", top:"50%", transform:"translate(-50%,-50%)",
        width:"42%", aspectRatio:"9/19", background:"#000", borderRadius:24, padding:8,
        border:"6px solid #1a1a20", boxShadow:"0 30px 60px rgba(0,0,0,.5)",
      }}>
        <div style={{ height:14, display:"flex", alignItems:"center", justifyContent:"space-between", padding:"0 6px", color:"#fff", fontSize:8 }}>
          <span>9:41</span><span style={{ opacity:.5 }}>● ● ●</span>
        </div>
        <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:2, marginTop:6 }}>
          {Array.from({length:9}).map((_,i)=>(
            <div key={i} style={{
              aspectRatio:"1/1",
              background:["#1a1a22","#252531","#1f1f29","#161620","#2a2a36","#1c1c26","#212129","#1a1a22","#22222c"][i],
              borderRadius:2,
              backgroundImage: i%2===0
                ? "radial-gradient(circle at 30% 30%, rgba(255,159,10,.4), transparent 60%)"
                : "linear-gradient(135deg, rgba(94,92,230,.3), transparent 70%)"
            }}/>
          ))}
        </div>
      </div>
      {/* chip overlays */}
      <div style={{ position:"absolute", left:"6%", top:"22%", padding:"4px 10px", borderRadius:999, background:"rgba(0,0,0,.5)", border:"1px solid var(--line)", color:"#f5f5f7", fontSize:10, fontWeight:500 }}>IG</div>
      <div style={{ position:"absolute", right:"8%", top:"30%", padding:"4px 10px", borderRadius:999, background:"rgba(0,0,0,.5)", border:"1px solid var(--line)", color:"#f5f5f7", fontSize:10, fontWeight:500 }}>TikTok</div>
      <div style={{ position:"absolute", left:"8%", bottom:"22%", padding:"4px 10px", borderRadius:999, background:"rgba(0,0,0,.5)", border:"1px solid var(--line)", color:"#f5f5f7", fontSize:10, fontWeight:500 }}>LinkedIn</div>
      <div style={{ position:"absolute", right:"6%", bottom:"28%", padding:"4px 10px", borderRadius:999, background:"rgba(0,0,0,.5)", border:"1px solid var(--line)", color:"#f5f5f7", fontSize:10, fontWeight:500 }}>YouTube</div>
    </MockShell>
  );
}

function MockContent() {
  return (
    <MockShell label="Production still">
      <svg viewBox="0 0 400 320" style={{ position:"absolute", inset:0, width:"100%", height:"100%" }}>
        <defs>
          <radialGradient id="spot" cx=".55" cy=".4" r=".5">
            <stop offset="0" stopColor="#ff9f0a" stopOpacity=".5"/>
            <stop offset="1" stopColor="#ff9f0a" stopOpacity="0"/>
          </radialGradient>
        </defs>
        <rect width="400" height="320" fill="url(#spot)"/>
        {/* softbox */}
        <rect x="40" y="40" width="70" height="100" rx="4" fill="#1a1a22" stroke="rgba(255,255,255,.15)"/>
        <rect x="48" y="48" width="54" height="84" fill="#f5f5f7" opacity=".25"/>
        {/* stand */}
        <line x1="75" y1="140" x2="75" y2="270" stroke="rgba(255,255,255,.2)" strokeWidth="2"/>
        {/* talent silhouette */}
        <g transform="translate(220,80)" fill="#f5f5f7" opacity=".85">
          <circle cx="0" cy="20" r="22"/>
          <path d="M-40,180 C-40,90 40,90 40,180 Z"/>
        </g>
        {/* camera */}
        <g transform="translate(310,180)" fill="#1a1a22" stroke="rgba(255,255,255,.2)">
          <rect x="0" y="0" width="60" height="36" rx="3"/>
          <circle cx="48" cy="18" r="14" fill="#000" stroke="rgba(255,255,255,.3)"/>
          <circle cx="48" cy="18" r="6" fill="#ff9f0a"/>
        </g>
        {/* tripod */}
        <line x1="340" y1="36" x2="340" y2="280" stroke="rgba(255,255,255,.2)" strokeWidth="2"/>
        <path d="M320,280 L340,260 L360,280" stroke="rgba(255,255,255,.2)" strokeWidth="2" fill="none"/>
        {/* floor line */}
        <line x1="20" y1="280" x2="380" y2="280" stroke="rgba(255,255,255,.1)"/>
        <text x="380" y="305" textAnchor="end" fill="#a1a1a6" fontSize="9" fontFamily="Inter" letterSpacing="1">SET A · TAKE 03</text>
      </svg>
    </MockShell>
  );
}

function MockPlan() {
  // calendar board
  const colors = ["#ff9f0a","#5e5ce6","#30d158","#0a84ff","#bf5af2"];
  return (
    <MockShell label="Content calendar">
      <div style={{ position:"absolute", inset:"18% 8% 12% 8%", display:"flex", flexDirection:"column", gap:6 }}>
        <div style={{ display:"grid", gridTemplateColumns:"60px repeat(7,1fr)", gap:6, color:"#6e6e73", fontSize:9, letterSpacing:".06em" }}>
          <span></span>{["M","T","W","T","F","S","S"].map((d,i)=>(<span key={i} style={{ textAlign:"center" }}>{d}</span>))}
        </div>
        {["Brand","Educate","Product","Social"].map((pillar,r)=>(
          <div key={r} style={{ display:"grid", gridTemplateColumns:"60px repeat(7,1fr)", gap:6, alignItems:"center" }}>
            <div style={{ color:"#a1a1a6", fontSize:9, fontWeight:500 }}>{pillar}</div>
            {Array.from({length:7}).map((_,c)=>{
              const has = (r+c)%3===0 || (r===0&&c===2) || (r===2&&c===5);
              return (
                <div key={c} style={{
                  height:18, borderRadius:4,
                  background: has ? colors[r % colors.length] : "rgba(255,255,255,.04)",
                  opacity: has ? .9 : 1,
                  border: has ? "none" : "1px solid var(--line)"
                }}/>
              );
            })}
          </div>
        ))}
      </div>
    </MockShell>
  );
}

function MockVideo() {
  return (
    <MockShell label="Edit timeline">
      <div style={{ position:"absolute", inset:"14% 7% 12% 7%", display:"flex", flexDirection:"column", gap:8 }}>
        <div style={{
          aspectRatio:"16/9", borderRadius:8, border:"1px solid var(--line-strong)",
          background:"linear-gradient(135deg, #1a1a24, #08080d)", position:"relative", overflow:"hidden",
        }}>
          <div style={{
            position:"absolute", left:"50%", top:"50%", transform:"translate(-50%,-50%)",
            width:36, height:36, borderRadius:"50%", background:"rgba(0,0,0,.6)",
            border:"1px solid var(--line-strong)", display:"flex", alignItems:"center", justifyContent:"center",
          }}>
            <svg width="12" height="12" viewBox="0 0 12 12"><path d="M3 2 L10 6 L3 10 Z" fill="#fff"/></svg>
          </div>
          <div style={{ position:"absolute", left:10, bottom:8, padding:"3px 6px", borderRadius:4, background:"rgba(255,159,10,.9)", color:"#000", fontSize:9, fontWeight:700, letterSpacing:".05em" }}>HOOK</div>
        </div>
        {/* tracks */}
        {[
          { label:"V1", color:"#ff9f0a", segs:[20,15,30,10,18] },
          { label:"V2", color:"#5e5ce6", segs:[10,40,12,20] },
          { label:"A1", color:"#30d158", segs:[35,20,28] },
        ].map((tr,i)=>(
          <div key={i} style={{ display:"grid", gridTemplateColumns:"22px 1fr", gap:6, alignItems:"center" }}>
            <span style={{ color:"#a1a1a6", fontSize:9, fontWeight:600 }}>{tr.label}</span>
            <div style={{ display:"flex", gap:3, height:12 }}>
              {tr.segs.map((w,j)=>(
                <div key={j} style={{ flex:w, background:tr.color, opacity:.6, borderRadius:2 }}/>
              ))}
            </div>
          </div>
        ))}
        {/* waveform */}
        <div style={{ display:"flex", gap:1, height:14, alignItems:"center" }}>
          {Array.from({length:60}).map((_,i)=>(
            <div key={i} style={{
              flex:1, background:"#6e6e73",
              height: `${20 + Math.sin(i*0.7)*40 + Math.cos(i*0.3)*30}%`,
              minHeight:1, borderRadius:1, opacity:.6,
            }}/>
          ))}
        </div>
      </div>
    </MockShell>
  );
}

Object.assign(window, {
  MockShell, MockWeb, MockFunnel, MockOps, MockEmail, MockSocial, MockContent, MockPlan, MockVideo
});