/* ============== Real screenshot slots (Sentinela + Lumine) ============== */

const SystemSlot = ({ src, name, url, color }) => {
  return (
    <div className="sysslot">
      <div className="sysslot-chrome">
        <div className="sysslot-dots"><span></span><span></span><span></span></div>
        <div className="sysslot-url">
          <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" strokeWidth="2" style={{ opacity: 0.5 }}>
            <rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" />
          </svg>
          {url}
        </div>
        <div className="sysslot-status">
          <span className="sys-dot" style={{ background: color, boxShadow: `0 0 8px ${color}` }} />
          {name}
        </div>
      </div>
      <div style={{ width: "100%", aspectRatio: "16 / 10", background: "#0a1224", overflow: "hidden" }}>
        <img src={src} alt={name} style={{ width: "100%", height: "100%", objectFit: "contain", display: "block" }} />
      </div>
      <style>{slotStyles}</style>
    </div>
  );
};

const SentinelaSlot = () => (
  <SystemSlot
    src="sentinela.png"
    name="Sentinela · LIVE"
    url="sentinela.app/operacao"
    color="#7adf9b"
  />
);

const LumineSlot = () => (
  <SystemSlot
    src="lumine.png"
    name="Lumine · LIVE"
    url="lumine.app/casos"
    color="#ffc278"
  />
);

const slotStyles = `
.sysslot {
  width: 100%;
  max-width: 640px;
  border-radius: 14px;
  overflow: hidden;
  background: #0a1224;
  border: 1px solid rgba(138, 175, 255, 0.18);
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(138, 175, 255, 0.04),
    0 0 60px -10px rgba(91, 141, 239, 0.3);
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
  transition: transform 0.6s var(--ease-out);
  position: relative;
  z-index: 1;
}
.sysslot:hover { transform: perspective(1400px) rotateY(-2deg) rotateX(0deg); }
.sysslot-chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.3);
  border-bottom: 1px solid rgba(138, 175, 255, 0.1);
  font-size: 11px;
}
.sysslot-dots { display: flex; gap: 6px; }
.sysslot-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.15); }
.sysslot-url {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
}
.sysslot-status {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  white-space: nowrap;
}
.sys-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  animation: livePulse 1.4s infinite;
}
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

@media (max-width: 600px) {
  .sysslot { transform: none; }
  .sysslot:hover { transform: none; }
}
`;

window.SentinelaSlot = SentinelaSlot;
window.LumineSlot = LumineSlot;