/* browser-window.jsx — ChromeWindow: a faux desktop browser frame
   wrapped around any web preview. Rendered onto a neutral workshop gray. */

window.ChromeWindow = function ChromeWindow({
  url = "crowdcaskd.club",
  tabs = [{ title: "CrowdCask'd" }],
  activeIndex = 0,
  width = "100%",
  height = 820,
  children,
}) {
  return (
    <div style={{
      width, margin: "0 auto",
      background: "#E7E2D7",
      borderRadius: 12,
      boxShadow: "0 30px 80px rgba(0,0,0,0.5), 0 10px 30px rgba(0,0,0,0.35)",
      overflow: "hidden",
      border: "1px solid rgba(243,235,220,0.08)",
    }}>
      {/* Tab strip */}
      <div style={{
        display: "flex", alignItems: "flex-end", gap: 4,
        padding: "8px 12px 0", background: "#C9C3B7",
        borderBottom: "1px solid rgba(0,0,0,0.1)",
      }}>
        <div style={{ display: "flex", gap: 8, alignSelf: "center", marginBottom: 8, marginRight: 8 }}>
          <span style={{ width: 12, height: 12, borderRadius: 999, background: "#FF5F57" }} />
          <span style={{ width: 12, height: 12, borderRadius: 999, background: "#FEBC2E" }} />
          <span style={{ width: 12, height: 12, borderRadius: 999, background: "#28C840" }} />
        </div>
        {tabs.map((t, i) => (
          <div key={i} style={{
            padding: "8px 14px 10px",
            background: i === activeIndex ? "#F3EBDC" : "rgba(243,235,220,0.25)",
            borderTopLeftRadius: 8, borderTopRightRadius: 8,
            fontFamily: "Inter Tight, system-ui", fontSize: 12,
            color: i === activeIndex ? "#1B0E08" : "rgba(27,14,8,0.55)",
            borderTop: "1px solid rgba(0,0,0,0.08)",
            borderLeft: "1px solid rgba(0,0,0,0.08)",
            borderRight: "1px solid rgba(0,0,0,0.08)",
            minWidth: 160, maxWidth: 220, whiteSpace: "nowrap",
            overflow: "hidden", textOverflow: "ellipsis",
          }}>{t.title}</div>
        ))}
        <div style={{ flex: 1 }} />
      </div>

      {/* Address bar */}
      <div style={{
        display: "flex", alignItems: "center", gap: 10,
        padding: "8px 14px", background: "#F3EBDC",
        borderBottom: "1px solid rgba(0,0,0,0.08)",
      }}>
        <div style={{ display: "flex", gap: 6, color: "rgba(27,14,8,0.4)" }}>
          <span>←</span><span>→</span><span>↻</span>
        </div>
        <div style={{
          flex: 1, padding: "6px 12px", background: "rgba(27,14,8,0.06)",
          borderRadius: 6, fontFamily: "Inter Tight, system-ui", fontSize: 12.5,
          color: "rgba(27,14,8,0.7)", display: "flex", alignItems: "center", gap: 8,
        }}>
          <span style={{ fontSize: 10, opacity: 0.5 }}>🔒</span>
          <span style={{ opacity: 0.5 }}>https://</span>{url}
        </div>
        <div style={{ display: "flex", gap: 8, color: "rgba(27,14,8,0.35)", fontSize: 14 }}>
          <span>⋮</span>
        </div>
      </div>

      {/* Content */}
      <div style={{
        height: typeof height === "number" ? height - 88 : height,
        overflowY: "auto", overflowX: "hidden", background: "#FFF",
      }}>
        {children}
      </div>
    </div>
  );
};