// Stylized playable-ad phone mock: device frame, game viewport, scrubber, CTA
// No real game art — uses shape collages as placeholder "game screen"
const PhoneMock = ({ theme = "coral", label = "Playable · v4", tilt = 0, time = 0.42, game = "blocks" }) => {
  const bg = {
    coral: "var(--coral)",
    yellow: "var(--yellow)",
    blue: "var(--blue)",
    mint: "var(--mint)",
    lilac: "var(--lilac)",
    ink: "var(--ink)",
  }[theme];
  const fg = theme === "blue" || theme === "ink" ? "var(--cream)" : "var(--ink)";

  return (
    <div style={{
      width: "100%",
      maxWidth: 320,
      aspectRatio: "9 / 17.5",
      background: "var(--ink)",
      border: "2px solid var(--ink)",
      borderRadius: 44,
      padding: 10,
      position: "relative",
      transform: `rotate(${tilt}deg)`,
      boxShadow: "10px 10px 0 var(--ink)",
    }}>
      {/* Notch */}
      <div style={{
        position: "absolute", top: 14, left: "50%", transform: "translateX(-50%)",
        width: 90, height: 22, background: "var(--ink)", borderRadius: 14, zIndex: 3,
      }}/>
      {/* Screen */}
      <div style={{
        width: "100%", height: "100%", background: bg, borderRadius: 34,
        position: "relative", overflow: "hidden", color: fg,
      }}>
        {/* Status bar */}
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          padding: "14px 26px 6px", fontFamily: "'JetBrains Mono', monospace",
          fontSize: 11, fontWeight: 500,
        }}>
          <span>9:41</span>
          <span style={{opacity:0.7}}>⚡ 100%</span>
        </div>

        {/* Game viewport placeholder */}
        <div style={{
          margin: "18px 16px", height: "54%", background: "var(--ink)", color: "var(--cream)",
          borderRadius: 22, position: "relative", overflow: "hidden",
        }}>
          <GameFrame kind={game} />
          {/* Overlay tap hint */}
          <div style={{
            position: "absolute", bottom: 14, left: "50%", transform: "translateX(-50%)",
            display: "flex", alignItems: "center", justifyContent: "center", gap: 6,
            padding: "8px 16px", background: "var(--cream)", color: "var(--ink)",
            border: "2px solid var(--ink)", borderRadius: 999,
            fontFamily: "'JetBrains Mono', monospace", fontSize: 10, fontWeight: 500,
            letterSpacing: "0.06em", textTransform: "uppercase",
            lineHeight: 1, whiteSpace: "nowrap", width: "max-content",
          }}>
            <span style={{fontSize:11,lineHeight:1}}>▸</span>
            <span style={{lineHeight:1}}>Tap to play</span>
          </div>
        </div>

        {/* Headline area */}
        <div style={{padding: "0 22px"}}>
          <div style={{
            fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700,
            fontSize: 22, letterSpacing: "-0.03em", lineHeight: 1.05,
          }}>
            Can you beat level&nbsp;5?
          </div>
          <div style={{
            marginTop: 6, fontSize: 12, opacity: 0.8,
          }}>
            Quick round · 30 seconds
          </div>
        </div>

        {/* CTA */}
        <div style={{padding: "14px 22px 18px"}}>
          <div style={{
            display: "flex", alignItems: "center", justifyContent: "center",
            padding: "12px 16px", background: "var(--ink)", color: "var(--cream)",
            border: "2px solid var(--ink)", borderRadius: 14, fontWeight: 600, fontSize: 14,
          }}>
            Install to keep playing
          </div>
          {/* Scrubber */}
          <div style={{marginTop: 12, display:"flex", alignItems:"center", gap:8}}>
            <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10}}>0:12</span>
            <div style={{flex:1,height:6,background:"rgba(23,24,43,0.2)",borderRadius:3,position:"relative",border:"1px solid var(--ink)"}}>
              <div style={{position:"absolute",left:0,top:0,bottom:0,width:`${time*100}%`,background:"var(--ink)",borderRadius:3}}/>
              <div style={{position:"absolute",left:`${time*100}%`,top:"50%",transform:"translate(-50%,-50%)",width:14,height:14,background:"var(--cream)",border:"2px solid var(--ink)",borderRadius:"50%"}}/>
            </div>
            <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10}}>0:30</span>
          </div>
        </div>

        {/* Label pill intentionally removed */}
      </div>
    </div>
  );
};

// A playful shape-collage used as the "game" placeholder
const GameFrame = ({ kind = "blocks" }) => {
  if (kind === "blocks") {
    return (
      <div style={{position:"absolute",inset:0,background:"var(--blue)"}}>
        {/* ground */}
        <div style={{position:"absolute",left:0,right:0,bottom:0,height:"28%",background:"var(--mint)"}}/>
        {/* sun */}
        <div style={{position:"absolute",top:18,right:20,width:44,height:44,borderRadius:"50%",background:"var(--yellow)",border:"2px solid var(--ink)"}}/>
        {/* blocks */}
        <div style={{position:"absolute",bottom:"28%",left:"18%",width:38,height:38,background:"var(--coral)",border:"2px solid var(--ink)",borderRadius:6,transform:"rotate(-6deg)"}}/>
        <div style={{position:"absolute",bottom:"28%",left:"38%",width:38,height:60,background:"var(--yellow)",border:"2px solid var(--ink)",borderRadius:6}}/>
        <div style={{position:"absolute",bottom:"28%",left:"60%",width:38,height:44,background:"var(--lilac)",border:"2px solid var(--ink)",borderRadius:6,transform:"rotate(4deg)"}}/>
        {/* character */}
        <div style={{position:"absolute",bottom:"38%",left:"48%",width:30,height:30,background:"var(--cream)",border:"2px solid var(--ink)",borderRadius:"50%"}}>
          <div style={{position:"absolute",top:9,left:6,width:4,height:4,background:"var(--ink)",borderRadius:"50%"}}/>
          <div style={{position:"absolute",top:9,right:6,width:4,height:4,background:"var(--ink)",borderRadius:"50%"}}/>
        </div>
        {/* score */}
        <div style={{position:"absolute",top:14,left:16,padding:"4px 10px",background:"var(--cream)",color:"var(--ink)",border:"2px solid var(--ink)",borderRadius:999,fontFamily:"'JetBrains Mono',monospace",fontSize:10,fontWeight:600}}>
          ★ 0240
        </div>
      </div>
    );
  }
  if (kind === "match") {
    // match-3 grid
    const colors = ["var(--coral)","var(--yellow)","var(--blue)","var(--mint)","var(--lilac)"];
    const cells = [];
    const seed = [1,3,0,2,4, 0,2,1,4,3, 3,1,3,3,0, 2,4,0,1,2];
    for (let i=0;i<20;i++){
      cells.push(<div key={i} style={{background:colors[seed[i]],border:"2px solid var(--ink)",borderRadius:8}}/>);
    }
    return (
      <div style={{position:"absolute",inset:0,background:"var(--lilac)",padding:16,display:"grid",gridTemplateColumns:"repeat(5,1fr)",gap:6,alignContent:"center"}}>
        {cells}
      </div>
    );
  }
  if (kind === "runner") {
    return (
      <div style={{position:"absolute",inset:0,background:"var(--coral)"}}>
        <div style={{position:"absolute",left:0,right:0,bottom:0,height:"20%",background:"var(--ink)"}}/>
        <div style={{position:"absolute",left:"22%",bottom:"20%",width:46,height:46,background:"var(--yellow)",border:"2px solid var(--ink)",borderRadius:"50%"}}/>
        <div style={{position:"absolute",left:"56%",bottom:"20%",width:28,height:54,background:"var(--mint)",border:"2px solid var(--ink)",borderRadius:6}}/>
        <div style={{position:"absolute",left:"78%",bottom:"20%",width:36,height:36,background:"var(--blue)",border:"2px solid var(--ink)",borderRadius:6,transform:"rotate(45deg)"}}/>
        <div style={{position:"absolute",top:24,left:16,padding:"4px 10px",background:"var(--cream)",color:"var(--ink)",border:"2px solid var(--ink)",borderRadius:999,fontFamily:"'JetBrains Mono',monospace",fontSize:10,fontWeight:600}}>0:28</div>
      </div>
    );
  }
  return null;
};

window.PhoneMock = PhoneMock;
window.GameFrame = GameFrame;