// ============================================================
// Qubi mockups — phone frame, Qubi.to link page, the physical
// "Qubito" 3D cube QR, and module screens. Retro / print look.
// ============================================================
const Q = window.Q;

// ---------- Believable QR code (3 finders + pseudo-random data) ----------
const QRSvg = ({ size = 150, color = Q.ink, bg = "#fff", logo = true }) => {
  const N = 25;
  const m = []; // module matrix
  for (let r = 0; r < N; r++) { m[r] = []; for (let c = 0; c < N; c++) m[r][c] = 0; }
  const finder = (or, oc) => {
    for (let r = 0; r < 7; r++) for (let c = 0; c < 7; c++) {
      const edge = r === 0 || r === 6 || c === 0 || c === 6;
      const core = r >= 2 && r <= 4 && c >= 2 && c <= 4;
      m[or + r][oc + c] = (edge || core) ? 1 : 0;
    }
  };
  finder(0, 0); finder(0, N - 7); finder(N - 7, 0);
  // timing lines
  for (let i = 8; i < N - 8; i++) { m[6][i] = i % 2 === 0 ? 1 : 0; m[i][6] = i % 2 === 0 ? 1 : 0; }
  // pseudo-random data
  let seed = 7;
  const rnd = () => { seed = (seed * 1103515245 + 12345) & 0x7fffffff; return seed / 0x7fffffff; };
  for (let r = 0; r < N; r++) for (let c = 0; c < N; c++) {
    const inFinder = (r < 8 && c < 8) || (r < 8 && c > N - 9) || (r > N - 9 && c < 8);
    if (inFinder || r === 6 || c === 6) continue;
    if (rnd() > 0.52) m[r][c] = 1;
  }
  // clear center for logo
  if (logo) for (let r = 9; r <= 15; r++) for (let c = 9; c <= 15; c++) m[r][c] = 0;

  const cell = size / N;
  const rects = [];
  for (let r = 0; r < N; r++) for (let c = 0; c < N; c++) if (m[r][c])
    rects.push(<rect key={r + "-" + c} x={(c * cell).toFixed(2)} y={(r * cell).toFixed(2)} width={cell + 0.4} height={cell + 0.4} fill={color} rx={cell * 0.18} />);

  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ display: "block" }}>
      <rect width={size} height={size} fill={bg} />
      {rects}
      {logo && (
        <g transform={`translate(${size / 2 - cell * 3.4}, ${size / 2 - cell * 3.4}) scale(${(cell * 6.8) / 120})`}>
          <QubiCube size={120} color={Q.orange} face={bg} />
        </g>
      )}
    </svg>
  );
};

// ---------- The Qubito: physical 3D cube QR standee ----------
const QubitoCube = ({ s = 210, spin = true, style = {} }) => {
  const half = s / 2;
  const faceBase = {
    position: "absolute", width: s, height: s, left: 0, top: 0,
    border: `3px solid ${Q.ink}`, boxSizing: "border-box",
  };
  return (
    <div style={{ width: s, height: s, perspective: 1100, ...style }}>
      <style>{`
        @keyframes qubitospin { 0%{transform:rotateX(-24deg) rotateY(-28deg)} 50%{transform:rotateX(-24deg) rotateY(-44deg)} 100%{transform:rotateX(-24deg) rotateY(-28deg)} }
        @keyframes qubitofloat { 0%,100%{margin-top:0} 50%{margin-top:-14px} }
      `}</style>
      <div style={{ width: s, height: s, position: "relative", transformStyle: "preserve-3d", animation: spin ? "qubitospin 7s ease-in-out infinite, qubitofloat 4s ease-in-out infinite" : "none", transform: "rotateX(-24deg) rotateY(-28deg)" }}>
        {/* FRONT — the QR */}
        <div style={{ ...faceBase, background: Q.card, transform: `translateZ(${half}px)`, display: "flex", alignItems: "center", justifyContent: "center" }}>
          <QRSvg size={s * 0.78} color={Q.ink} bg={Q.card} />
        </div>
        {/* TOP — orange brand cap */}
        <div style={{ ...faceBase, background: Q.orange, transform: `rotateX(90deg) translateZ(${half}px)`, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 6 }}>
          <QubiCube size={s * 0.34} color={Q.cream} face={Q.orange} />
        </div>
        {/* RIGHT — call to action side */}
        <div style={{ ...faceBase, background: Q.ink, transform: `rotateY(90deg) translateZ(${half}px)`, display: "flex", alignItems: "center", justifyContent: "center" }}>
          <div className="poster" style={{ color: Q.cream, fontSize: s * 0.16, transform: "rotate(-90deg)", whiteSpace: "nowrap", letterSpacing: "0.04em" }}>QUBI.TO</div>
        </div>
      </div>
    </div>
  );
};

// ---------- Phone frame (retro) ----------
const PhoneFrame = ({ children, width = 280, tilt = 0, style = {} }) => {
  const height = width * (620 / 290);
  return (
    <div style={{
      width, height, borderRadius: width * 0.13,
      background: Q.ink, padding: 7,
      transform: `rotate(${tilt}deg)`,
      position: "relative",
      border: `2.5px solid ${Q.ink}`,
      boxShadow: `8px 10px 0 rgba(43,27,18,.32)`,
      ...style,
    }}>
      <div style={{
        position: "absolute", top: 15, left: "50%", transform: "translateX(-50%)",
        width: 70, height: 8, background: "#000", borderRadius: 999, zIndex: 5, opacity: .5,
      }} />
      <div style={{ width: "100%", height: "100%", borderRadius: width * 0.1, background: Q.card, overflow: "hidden", position: "relative" }}>
        {children}
      </div>
    </div>
  );
};

// ---------- Qubi.to link page content ----------
const QubiLinkPage = ({ name = "La Salvaje", handle = "lasalvaje", accent = Q.orange, emoji = "💈" }) => {
  const links = [
    { label: "WhatsApp", ic: "💬", solid: true },
    { label: "Ver carta", ic: "🍔" },
    { label: "Cómo llegar", ic: "📍" },
    { label: "Reservá tu mesa", ic: "🗓️" },
    { label: "Instagram", ic: "📸" },
  ];
  return (
    <div style={{ width: "100%", height: "100%", background: Q.cream, padding: "40px 16px 16px", overflow: "hidden", fontFamily: "var(--body)" }}>
      {/* top accent bar */}
      <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 70, background: accent }} />
      {/* avatar — rounded square (cube vibe) */}
      <div style={{ position: "relative", width: 62, height: 62, borderRadius: 16, background: Q.card, border: `2.5px solid ${Q.ink}`, margin: "12px auto 0", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 30, boxShadow: `3px 3px 0 ${Q.ink}` }}>{emoji}</div>
      <div style={{ textAlign: "center", marginTop: 10 }}>
        <div className="display" style={{ fontSize: 19, fontWeight: 800 }}>{name}</div>
        <div style={{ fontFamily: "var(--mono)", color: Q.muted, fontSize: 11, marginTop: 2 }}>Qubi.to/{handle}</div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 9, marginTop: 16 }}>
        {links.map((b, i) => (
          <div key={i} style={{
            background: b.solid ? accent : Q.card, color: b.solid ? Q.cream : Q.ink,
            padding: "11px 14px", borderRadius: 12, fontWeight: 700, fontSize: 13.5,
            border: `2.5px solid ${Q.ink}`, boxShadow: `3px 3px 0 ${Q.ink}`,
            display: "flex", alignItems: "center", gap: 10,
          }}><span style={{ fontSize: 16 }}>{b.ic}</span>{b.label}</div>
        ))}
      </div>
      <div style={{ position: "absolute", bottom: 12, left: 0, right: 0, textAlign: "center", fontSize: 10, color: Q.muted, fontFamily: "var(--mono)" }}>
        hecho con <b style={{ color: accent }}>Qubi.to</b>
      </div>
    </div>
  );
};

// ---------- Chat mockup (Qubi.chat) ----------
const ChatMockup = ({ width = 270, tilt = 0, style = {} }) => {
  const msgIn = { alignSelf: "flex-start", maxWidth: "82%", background: Q.card, padding: "7px 11px", borderRadius: 12, borderTopLeftRadius: 3, border: `2px solid ${Q.ink}`, fontSize: 11.5, lineHeight: 1.35 };
  const msgOut = { alignSelf: "flex-end", maxWidth: "85%", background: Q.teal, color: "#fff", padding: "7px 11px", borderRadius: 12, borderTopRightRadius: 3, border: `2px solid ${Q.ink}`, fontSize: 11.5, lineHeight: 1.35 };
  return (
    <PhoneFrame width={width} tilt={tilt} style={style}>
      <div style={{ background: Q.teal, color: "#fff", padding: "40px 12px 11px", display: "flex", alignItems: "center", gap: 9, borderBottom: `2.5px solid ${Q.ink}` }}>
        <div style={{ width: 34, height: 34, borderRadius: 9, background: Q.cream, border: `2px solid ${Q.ink}`, display: "flex", alignItems: "center", justifyContent: "center" }}>
          <QubiCube size={26} color={Q.teal} face={Q.cream} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 800, fontSize: 13 }}>La Salvaje · Qubi</div>
          <div style={{ fontSize: 10, opacity: .85 }}>en línea · responde al toque</div>
        </div>
      </div>
      <div style={{ background: Q.cream, padding: "12px 10px", height: "calc(100% - 86px)", display: "flex", flexDirection: "column", gap: 7 }}>
        <div style={msgIn}>Hola! Tienen lugar hoy a las 18?</div>
        <div style={msgOut}>¡Hola! 👋 Sí, queda un turno a las 18:15 con Lucas. ¿Te lo reservo?</div>
        <div style={msgIn}>Dale, sí 🙌</div>
        <div style={msgOut}>Listo ✅ <b>Turno confirmado</b> hoy 18:15.</div>
        <div style={msgIn}>Cortan barba también?</div>
        <div style={msgOut}>Claro 💈 corte + barba <b>$8.500</b>. ¿Lo sumo?</div>
        <div style={{ ...msgIn, fontStyle: "italic", color: Q.muted, border: "none", background: "transparent", padding: "2px 8px" }}>escribiendo…</div>
      </div>
    </PhoneFrame>
  );
};

// ---------- Agenda mockup ----------
const AgendaMockup = ({ width = 270, tilt = 0, style = {} }) => {
  const slots = [
    { t: "09:00", n: "Martín G.", svc: "Corte clásico" },
    { t: "10:30", n: "Juliana", svc: "Corte + barba" },
    { t: "12:00", n: "Disponible", svc: "—", empty: true },
    { t: "14:30", n: "Diego R.", svc: "Solo barba" },
    { t: "18:15", n: "Vos!", svc: "Corte + barba", you: true },
  ];
  return (
    <PhoneFrame width={width} tilt={tilt} style={style}>
      <div style={{ padding: "40px 13px 13px", height: "100%", background: Q.cream }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div>
            <div className="eyebrow" style={{ fontSize: 10, color: Q.muted }}>JUEVES</div>
            <div className="display" style={{ fontSize: 22, fontWeight: 800 }}>22 mayo</div>
          </div>
          <div style={{ background: Q.mustard, color: Q.ink, padding: "5px 10px", borderRadius: 999, fontSize: 11, fontWeight: 800, border: `2px solid ${Q.ink}` }}>8 turnos</div>
        </div>
        <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 7 }}>
          {slots.map((s, i) => (
            <div key={i} style={{
              background: s.you ? Q.mustard : s.empty ? "transparent" : Q.card,
              border: s.empty ? `2px dashed ${Q.line}` : `2px solid ${Q.ink}`,
              borderRadius: 11, padding: "8px 10px", display: "flex", alignItems: "center", gap: 9, fontSize: 11,
              boxShadow: s.empty ? "none" : `2px 2px 0 ${Q.ink}`,
            }}>
              <div style={{ fontFamily: "var(--mono)", fontWeight: 700, width: 36 }}>{s.t}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 800 }}>{s.n} {s.you && <span style={{ background: Q.orange, color: "#fff", fontSize: 8, padding: "1px 5px", borderRadius: 4, marginLeft: 3, border: `1px solid ${Q.ink}` }}>NUEVO</span>}</div>
                <div style={{ fontSize: 9.5, color: Q.muted }}>{s.svc}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ position: "absolute", left: 13, right: 13, bottom: 13, background: Q.ink, color: Q.cream, padding: 10, borderRadius: 11, fontSize: 11.5, fontWeight: 800, textAlign: "center" }}>+ Sacar turno</div>
      </div>
    </PhoneFrame>
  );
};

// ---------- Food mockup ----------
const FoodMockup = ({ width = 270, tilt = 0, style = {} }) => {
  const items = [
    { n: "Cuarto de libra", d: "200g + cheddar + papas", p: "$6.900", e: "🍔" },
    { n: "Doble pollo crispy", d: "Crispy + alioli", p: "$7.400", e: "🍗" },
    { n: "Veggie del barrio", d: "Garbanzo + palta", p: "$6.200", e: "🥗" },
  ];
  return (
    <PhoneFrame width={width} tilt={tilt} style={style}>
      <div style={{ height: "100%", background: Q.cream }}>
        <div style={{ background: Q.orange, padding: "40px 13px 14px", color: Q.cream, borderBottom: `2.5px solid ${Q.ink}` }}>
          <div style={{ fontSize: 10, fontWeight: 700, opacity: .92 }}>🍔 La Burguería</div>
          <div className="display" style={{ fontSize: 19, fontWeight: 800, marginTop: 2 }}>Pedí lo tuyo</div>
          <div style={{ display: "flex", gap: 6, marginTop: 9, flexWrap: "wrap" }}>
            {["Burgers", "Pizzas", "Bebidas"].map((c, i) => <span key={i} style={{ background: "rgba(255,255,255,.22)", padding: "3px 9px", borderRadius: 999, fontSize: 10, fontWeight: 700, border: "1.5px solid rgba(255,255,255,.5)" }}>{c}</span>)}
          </div>
        </div>
        <div style={{ padding: "11px 12px", display: "flex", flexDirection: "column", gap: 8 }}>
          {items.map((f, i) => (
            <div key={i} style={{ display: "flex", gap: 10, alignItems: "center", background: Q.card, borderRadius: 12, padding: 8, border: `2px solid ${Q.ink}`, boxShadow: `2px 2px 0 ${Q.ink}` }}>
              <div style={{ width: 42, height: 42, borderRadius: 9, background: Q.orangeTint || "#FBE3D5", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 21, border: `2px solid ${Q.ink}` }}>{f.e}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontWeight: 800, fontSize: 12 }}>{f.n}</div>
                <div style={{ fontSize: 9.5, color: Q.muted, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{f.d}</div>
                <div style={{ fontFamily: "var(--mono)", fontWeight: 700, fontSize: 11, marginTop: 1 }}>{f.p}</div>
              </div>
              <div style={{ background: Q.ink, color: Q.cream, width: 25, height: 25, borderRadius: 999, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16, fontWeight: 700 }}>+</div>
            </div>
          ))}
        </div>
        <div style={{ position: "absolute", left: 13, right: 13, bottom: 13, background: Q.orange, color: Q.cream, padding: "10px 12px", borderRadius: 12, fontSize: 11.5, fontWeight: 800, display: "flex", justifyContent: "space-between", border: `2.5px solid ${Q.ink}` }}>
          <span>Ver pedido · 2</span><span>$13.100 →</span>
        </div>
      </div>
    </PhoneFrame>
  );
};

// ---------- Club mockup (loyalty stamps) ----------
const ClubMockup = ({ width = 270, tilt = 0, style = {} }) => {
  const filled = 7, total = 10;
  return (
    <PhoneFrame width={width} tilt={tilt} style={style}>
      <div style={{ height: "100%", background: Q.cream, padding: "40px 13px 13px", position: "relative" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 11 }}>
          <div>
            <div className="eyebrow" style={{ fontSize: 9.5, color: Q.muted }}>MI TARJETA</div>
            <div className="display" style={{ fontSize: 18, fontWeight: 800 }}>Café Compás</div>
          </div>
          <div style={{ width: 34, height: 34, borderRadius: 9, background: Q.berry, border: `2px solid ${Q.ink}`, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16 }}>☕</div>
        </div>
        <div style={{ background: Q.berry, borderRadius: 14, padding: "12px 13px 14px", color: "#fff", border: `2.5px solid ${Q.ink}`, boxShadow: `3px 3px 0 ${Q.ink}` }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 9 }}>
            <div className="eyebrow" style={{ fontSize: 9.5 }}>SELLOS</div>
            <div style={{ fontSize: 10, fontWeight: 800, background: "rgba(255,255,255,.25)", padding: "2px 8px", borderRadius: 999 }}>{filled}/{total}</div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 5 }}>
            {Array.from({ length: total }).map((_, i) => (
              <div key={i} style={{ aspectRatio: "1", borderRadius: 999, background: i < filled ? Q.cream : "transparent", border: i < filled ? `2px solid ${Q.ink}` : "1.5px dashed rgba(255,255,255,.6)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11 }}>{i < filled ? "☕" : ""}</div>
            ))}
          </div>
          <div style={{ marginTop: 9, fontSize: 11, fontWeight: 700 }}>¡Te faltan {total - filled} para tu café gratis! 🎉</div>
        </div>
        <div style={{ marginTop: 9, background: Q.card, borderRadius: 12, padding: "9px 12px", display: "flex", alignItems: "center", justifyContent: "space-between", border: `2px solid ${Q.ink}`, boxShadow: `2px 2px 0 ${Q.ink}` }}>
          <div>
            <div className="eyebrow" style={{ fontSize: 9, color: Q.muted }}>PUNTOS</div>
            <div className="display" style={{ fontSize: 22, fontWeight: 800, color: Q.berry, lineHeight: 1 }}>320</div>
          </div>
          <div style={{ textAlign: "right", fontSize: 10.5 }}>
            <div style={{ color: Q.muted }}>Próx. premio</div>
            <div style={{ fontWeight: 800 }}>en 80 pts</div>
          </div>
        </div>
        <div style={{ position: "absolute", left: 13, right: 13, bottom: 13, background: Q.ink, color: Q.cream, padding: 10, borderRadius: 11, fontSize: 11.5, fontWeight: 800, textAlign: "center" }}>Canjear premios →</div>
      </div>
    </PhoneFrame>
  );
};

window.QRSvg = QRSvg;
window.QubitoCube = QubitoCube;
window.PhoneFrame = PhoneFrame;
window.QubiLinkPage = QubiLinkPage;
window.ChatMockup = ChatMockup;
window.AgendaMockup = AgendaMockup;
window.FoodMockup = FoodMockup;
window.ClubMockup = ClubMockup;