// Mockup illustrations — fictional sample sites and UI surfaces.
// Pure SVG/HTML; no real imagery. Designed to look like polished product screens.

// HERO MOCKUP — desktop browser frame with a fictional storefront
function HeroDesktopMockup() {
  return (
    <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
      <div className="win-dots">
        <span></span><span></span><span></span>
        <div style={{
          marginLeft: 14, padding: "5px 12px", background: "var(--bg-2)",
          borderRadius: 6, fontFamily: "var(--font-mono)", fontSize: 11,
          color: "var(--ink-3)", flexGrow: 1, maxWidth: 280
        }}>
          aurora-cafe.com.ar
        </div>
      </div>
      <div style={{ flex: 1, display: "flex", flexDirection: "column", padding: "22px 26px", gap: 16 }}>
        {/* tiny nav */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 16, fontWeight: 600, letterSpacing: "-0.02em" }}>
            Aurora <span style={{ color: "var(--accent)" }}>·</span> Café
          </div>
          <div style={{ display: "flex", gap: 14, fontSize: 11, color: "var(--ink-3)" }}>
            <span>Carta</span><span>Eventos</span><span>Reservas</span>
            <span style={{
              padding: "4px 10px", background: "var(--accent)", color: "#050706",
              borderRadius: 999, fontWeight: 600, fontSize: 10
            }}>
              Pedí online
            </span>
          </div>
        </div>

        {/* hero copy */}
        <div style={{ marginTop: 10 }}>
          <div style={{
            fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 600,
            letterSpacing: "-0.03em", lineHeight: 1, color: "var(--ink)"
          }}>
            Café de especialidad,
          </div>
          <div style={{
            fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 600,
            letterSpacing: "-0.03em", lineHeight: 1, color: "var(--accent)", marginTop: 4
          }}>
            tostado en casa.
          </div>
          <div style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 10, maxWidth: 240, lineHeight: 1.5 }}>
            Granos seleccionados de Colombia, Etiopía y Brasil. Servimos desde 2019.
          </div>
        </div>

        {/* product grid */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8, marginTop: "auto" }}>
          {[
            { n: "Espresso Origen", p: "$2.400", c: "linear-gradient(135deg, #5b3210, #2a1607)" },
            { n: "Latte de Avena", p: "$3.100", c: "linear-gradient(135deg, #d4b896, #a08763)" },
            { n: "Granos 250g", p: "$8.900", c: "linear-gradient(135deg, #1a1410, #0a0806)" },
          ].map((x, i) => (
            <div key={i} style={{
              padding: 8,
              border: "1px solid var(--line)",
              borderRadius: 8,
              background: "var(--bg)"
            }}>
              <div style={{
                aspectRatio: "1.3 / 1",
                borderRadius: 5,
                background: x.c,
                marginBottom: 6
              }} />
              <div style={{ fontSize: 9.5, fontWeight: 500, color: "var(--ink)", letterSpacing: "-0.005em" }}>{x.n}</div>
              <div style={{ fontSize: 9, color: "var(--accent)", fontFamily: "var(--font-mono)", marginTop: 1 }}>{x.p}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// HERO MOCKUP — mobile, mini app screen
function HeroMobileMockup() {
  return (
    <div style={{
      width: "100%", height: "100%",
      borderRadius: 22,
      background: "var(--bg)",
      overflow: "hidden",
      display: "flex",
      flexDirection: "column",
      padding: "18px 14px 14px"
    }}>
      {/* status bar */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 9, color: "var(--ink-2)", fontFamily: "var(--font-mono)" }}>
        <span>9:41</span>
        <span style={{ display: "flex", gap: 3, alignItems: "center" }}>
          <span style={{ width: 12, height: 6, border: "1px solid var(--ink-3)", borderRadius: 1, position: "relative" }}>
            <span style={{ position: "absolute", inset: 1, background: "var(--accent)", width: "70%" }}></span>
          </span>
        </span>
      </div>

      <div style={{ marginTop: 16, fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 600, letterSpacing: "-0.02em" }}>
        Hola, Paula<br/>
        <span style={{ color: "var(--ink-3)", fontSize: 11, fontWeight: 400 }}>Tu pedido está listo</span>
      </div>

      <div style={{
        marginTop: 14,
        padding: 12,
        borderRadius: 12,
        background: "var(--accent-soft)",
        border: "1px solid rgba(57,255,20,0.3)"
      }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div style={{ fontSize: 10, color: "var(--ink-3)", fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.05em" }}>
            En camino
          </div>
          <span className="live-dot" style={{ width: 6, height: 6 }}></span>
        </div>
        <div style={{ marginTop: 4, fontSize: 11, fontWeight: 500 }}>Llega en 14 min</div>
      </div>

      <div style={{ marginTop: 14, fontSize: 10, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.06em", fontFamily: "var(--font-mono)" }}>
        Tu pedido
      </div>
      <div style={{ marginTop: 8, display: "flex", flexDirection: "column", gap: 6 }}>
        {["1× Latte de Avena", "1× Medialunas (3)", "Granos 250g"].map((x, i) => (
          <div key={i} style={{
            padding: "8px 10px",
            background: "var(--bg-1)",
            border: "1px solid var(--line)",
            borderRadius: 8,
            fontSize: 10,
            color: "var(--ink-2)"
          }}>
            {x}
          </div>
        ))}
      </div>

      <div style={{
        marginTop: "auto",
        padding: "10px 12px",
        background: "var(--accent)",
        color: "#050706",
        borderRadius: 999,
        fontSize: 11,
        fontWeight: 600,
        textAlign: "center"
      }}>
        Ver mapa →
      </div>
    </div>
  );
}

// PORTFOLIO MOCKUPS — variations
function PortfolioMock({ kind }) {
  if (kind === "ecommerce") {
    return (
      <div style={{ width: "100%", height: "100%", padding: 16, display: "flex", flexDirection: "column", background: "linear-gradient(180deg, var(--bg-2), var(--bg))" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 14, letterSpacing: "-0.02em" }}>NORTE<span style={{ color: "var(--accent)" }}>.</span></div>
          <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
            <div style={{ width: 14, height: 14, borderRadius: 999, background: "var(--bg-3)" }}></div>
            <div style={{
              padding: "3px 8px", background: "var(--accent)", color: "#050706",
              borderRadius: 4, fontSize: 9, fontWeight: 600
            }}>3</div>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8, marginTop: 14, flexGrow: 1 }}>
          {[
            "linear-gradient(135deg, #2a4a3a, #1a2e25)",
            "linear-gradient(135deg, #4a3a2a, #2e251a)",
            "linear-gradient(135deg, #2a3a4a, #1a252e)",
            "linear-gradient(135deg, #3a2a4a, #251a2e)",
            "linear-gradient(135deg, #4a2a2a, #2e1a1a)",
            "linear-gradient(135deg, #2a4a4a, #1a2e2e)",
          ].map((g, i) => (
            <div key={i} style={{
              borderRadius: 6,
              background: g,
              border: "1px solid var(--line)",
              position: "relative"
            }}>
              <div style={{ position: "absolute", bottom: 4, left: 4, right: 4, fontSize: 7, color: "rgba(255,255,255,0.7)", fontFamily: "var(--font-mono)" }}>
                ${(38 + i * 7).toFixed(0)}.000
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }
  if (kind === "dashboard") {
    return (
      <div style={{ width: "100%", height: "100%", padding: 14, background: "linear-gradient(180deg, var(--bg-1), var(--bg))", display: "flex", flexDirection: "column", gap: 10 }}>
        <div style={{ display: "flex", gap: 8 }}>
          <div style={{ flex: 1, padding: 10, background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: 6 }}>
            <div style={{ fontSize: 8, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.06em", fontFamily: "var(--font-mono)" }}>Ventas hoy</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 20, fontWeight: 600, marginTop: 2 }}>$847k</div>
            <div style={{ fontSize: 8, color: "var(--accent)", fontFamily: "var(--font-mono)", marginTop: 2 }}>↑ 12.4%</div>
          </div>
          <div style={{ flex: 1, padding: 10, background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: 6 }}>
            <div style={{ fontSize: 8, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.06em", fontFamily: "var(--font-mono)" }}>Pedidos</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 20, fontWeight: 600, marginTop: 2 }}>134</div>
            <div style={{ fontSize: 8, color: "var(--accent)", fontFamily: "var(--font-mono)", marginTop: 2 }}>↑ 8</div>
          </div>
          <div style={{ flex: 1, padding: 10, background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: 6 }}>
            <div style={{ fontSize: 8, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.06em", fontFamily: "var(--font-mono)" }}>Stock</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 20, fontWeight: 600, marginTop: 2 }}>2.108</div>
            <div style={{ fontSize: 8, color: "#febc2e", fontFamily: "var(--font-mono)", marginTop: 2 }}>3 críticos</div>
          </div>
        </div>
        <div style={{ flex: 1, padding: 12, background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: 6, position: "relative", overflow: "hidden" }}>
          <div style={{ fontSize: 9, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.06em", fontFamily: "var(--font-mono)", marginBottom: 8 }}>Últimos 7 días</div>
          <svg viewBox="0 0 200 80" preserveAspectRatio="none" style={{ width: "100%", height: "calc(100% - 18px)" }}>
            <defs>
              <linearGradient id="cgrad" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor="#39ff14" stopOpacity="0.4" />
                <stop offset="100%" stopColor="#39ff14" stopOpacity="0" />
              </linearGradient>
            </defs>
            <path d="M0,60 L20,55 L40,48 L60,52 L80,40 L100,42 L120,28 L140,32 L160,18 L180,22 L200,10 L200,80 L0,80 Z" fill="url(#cgrad)" />
            <path d="M0,60 L20,55 L40,48 L60,52 L80,40 L100,42 L120,28 L140,32 L160,18 L180,22 L200,10" stroke="#39ff14" strokeWidth="1.5" fill="none" />
          </svg>
        </div>
      </div>
    );
  }
  if (kind === "salon") {
    return (
      <div style={{ width: "100%", height: "100%", background: "linear-gradient(135deg, #2a1d2e, #1a1218)", padding: 14, display: "flex", flexDirection: "column" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 14, fontWeight: 500, color: "#fbe9d7", letterSpacing: "0.02em" }}>SOFIA estilismo</div>
          <div style={{
            padding: "3px 8px", background: "#fbe9d7", color: "#1a1218",
            borderRadius: 4, fontSize: 9, fontWeight: 600
          }}>Reservar</div>
        </div>
        <div style={{ marginTop: 18, fontFamily: "var(--font-display)", fontSize: 20, fontWeight: 500, color: "#fbe9d7", lineHeight: 1, letterSpacing: "-0.02em" }}>
          Tu mejor versión,<br/>en una hora.
        </div>
        <div style={{ marginTop: 12, display: "flex", gap: 6 }}>
          {["Color", "Corte", "Brushing", "Tratamientos"].map((s, i) => (
            <span key={i} style={{
              padding: "4px 8px", border: "1px solid rgba(251,233,215,0.3)",
              borderRadius: 999, fontSize: 9, color: "#fbe9d7"
            }}>{s}</span>
          ))}
        </div>
        <div style={{ marginTop: "auto", padding: 10, background: "rgba(251,233,215,0.06)", border: "1px solid rgba(251,233,215,0.18)", borderRadius: 6 }}>
          <div style={{ fontSize: 9, color: "rgba(251,233,215,0.6)", fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.06em" }}>Próximo turno disp.</div>
          <div style={{ fontSize: 11, color: "#fbe9d7", marginTop: 2, fontWeight: 500 }}>Hoy · 16:30 hs</div>
        </div>
      </div>
    );
  }
  if (kind === "gym") {
    return (
      <div style={{ width: "100%", height: "100%", background: "#050706", padding: 14, display: "flex", flexDirection: "column", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse 60% 80% at 30% 50%, rgba(57,255,20,0.18), transparent 60%)" }}></div>
        <div style={{ position: "relative", display: "flex", justifyContent: "space-between" }}>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 14, fontWeight: 700, letterSpacing: "0.04em", color: "#fff" }}>RAW<span style={{ color: "#39ff14" }}>FIT</span></div>
          <div style={{ fontSize: 9, color: "rgba(255,255,255,0.5)", fontFamily: "var(--font-mono)" }}>Login</div>
        </div>
        <div style={{ position: "relative", marginTop: 22, fontFamily: "var(--font-display)", fontWeight: 700, color: "#fff", fontSize: 26, lineHeight: 0.95, letterSpacing: "-0.04em" }}>
          ENTRENA<br/>SIN EXCUSAS.
        </div>
        <div style={{ position: "relative", marginTop: "auto", display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 6 }}>
          {[
            { n: "Plan Mensual", p: "$32k" },
            { n: "Trimestral", p: "$84k", h: true },
            { n: "Anual", p: "$280k" },
          ].map((x, i) => (
            <div key={i} style={{
              padding: 8,
              background: x.h ? "#39ff14" : "rgba(255,255,255,0.05)",
              color: x.h ? "#050706" : "#fff",
              borderRadius: 5,
              border: x.h ? "none" : "1px solid rgba(255,255,255,0.1)"
            }}>
              <div style={{ fontSize: 8, opacity: 0.7, fontFamily: "var(--font-mono)", textTransform: "uppercase" }}>{x.n}</div>
              <div style={{ fontSize: 12, fontWeight: 700, marginTop: 2, fontFamily: "var(--font-display)" }}>{x.p}</div>
            </div>
          ))}
        </div>
      </div>
    );
  }
  return null;
}

Object.assign(window, { HeroDesktopMockup, HeroMobileMockup, PortfolioMock });