// StudioPeek — a blurred glimpse of The Solo Content Studio app UI.
// Forked from the real studio-app UI kit: burgundy sidebar + white workspace.

const { useState: useStateSP } = React;

window.StudioPeek = function StudioPeek({ blur = 5, caption = "Pre-launch window opens April 27" }) {
  return (
    <div className="scs-peek" style={{
      position: "relative",
      borderRadius: 22,
      overflow: "hidden",
      background: "var(--white)",
      border: "1px solid var(--border)",
      boxShadow: "0 30px 80px -20px hsl(348 52% 15% / 0.28), 0 2px 6px hsl(348 52% 15% / 0.06)",
      aspectRatio: "16 / 10",
    }}>
      {/* Blurred app content */}
      <div className="scs-peek-grid" style={{
        filter: `blur(${blur}px) saturate(1.05)`,
        WebkitFilter: `blur(${blur}px) saturate(1.05)`,
        position: "absolute", inset: 0,
        display: "grid", gridTemplateColumns: "252px 1fr",
      }}>
        {/* Sidebar — burgundy */}
        <aside style={{
          background: "var(--ink-deep)", position: "relative", overflow: "hidden",
          display: "flex", flexDirection: "column", padding: "20px 14px",
        }}>
          <div style={{
            position: "absolute", top: -60, left: -30, width: "180%", height: 280,
            background: "radial-gradient(ellipse at 30% 20%, hsl(12 72% 55% / 0.12), transparent 70%)",
          }} />
          <div style={{ height: 22, width: 170, background: "hsl(350 10% 90%)", borderRadius: 4, opacity: 0.85, marginBottom: 18 }} />

          {/* Top nav pills */}
          {[1,1].map((_, i) => (
            <div key={i} style={{
              display: "flex", alignItems: "center", gap: 10, padding: "9px 12px",
              margin: "2px 0", borderRadius: 12,
              background: i === 0 ? "hsl(348 40% 18%)" : "transparent",
              position: "relative",
            }}>
              {i === 0 && <span style={{ position:"absolute", left:-14, top:"50%", transform:"translateY(-50%)", width:3, height:20, background:"var(--orange)", borderRadius:"0 3px 3px 0" }} />}
              <span style={{ width: 14, height: 14, borderRadius: 3, background: "hsl(350 15% 45%)" }} />
              <span style={{ flex: 1, height: 10, background: i === 0 ? "hsl(350 10% 90%)" : "hsl(350 15% 55%)", borderRadius: 3 }} />
            </div>
          ))}

          <div style={{ height: 1, background: "hsl(348 40% 18%)", margin: "10px 0" }} />
          <div style={{ width: 120, height: 8, background: "hsl(350 15% 35%)", borderRadius: 2, marginBottom: 10, marginLeft: 4 }} />

          {/* Roster */}
          {window.SPECIALISTS.map((s, i) => (
            <div key={s.num} style={{
              display: "flex", alignItems: "center", gap: 10, padding: "7px 12px",
              margin: "1px 0", borderRadius: 10,
              background: i === 0 ? "hsl(348 40% 18%)" : "transparent",
              opacity: i === 0 ? 1 : 0.85,
            }}>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 9, color: "hsl(350 15% 45%)", width: 14 }}>{s.num}</span>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: s.dot, flexShrink: 0 }} />
              <span style={{ flex: 1, height: 8, background: i === 0 ? "hsl(350 10% 85%)" : "hsl(350 15% 55%)", borderRadius: 2 }} />
              {i === 0 && <span style={{ width: 26, height: 12, background: "hsl(165 30% 60% / 0.3)", borderRadius: 999 }} />}
              {i > 0 && i < 4 && <span style={{ width: 24, height: 12, background: "hsl(350 15% 35%)", borderRadius: 999 }} />}
            </div>
          ))}
        </aside>

        {/* Workspace */}
        <main style={{ background: "var(--white)", position: "relative", display: "flex", flexDirection: "column" }}>
          {/* Topbar */}
          <div style={{
            height: 52, borderBottom: "1px solid var(--border)",
            display: "flex", alignItems: "center", padding: "0 24px", gap: 12,
          }}>
            <div style={{ width: 90, height: 10, background: "var(--cloud)", borderRadius: 3 }} />
            <span style={{ color: "var(--border)", fontSize: 14 }}>/</span>
            <div style={{ width: 140, height: 10, background: "hsl(348 52% 15% / 0.6)", borderRadius: 3 }} />
            <div style={{ flex: 1 }} />
            <div style={{ width: 110, height: 32, background: "var(--orange)", borderRadius: 999 }} />
          </div>

          {/* Main content area */}
          <div style={{ padding: 36, flex: 1, position: "relative",
            background: "radial-gradient(ellipse 80% 60% at 20% 10%, hsla(12, 80%, 90%, 0.35), transparent 60%), radial-gradient(ellipse 60% 60% at 90% 80%, hsla(340, 70%, 92%, 0.4), transparent 60%), var(--white)",
          }}>
            {/* Headline block */}
            <div style={{ maxWidth: 620, marginBottom: 22 }}>
              <div style={{ width: 120, height: 9, background: "var(--muted)", opacity: 0.5, borderRadius: 2, marginBottom: 14 }} />
              <div style={{ height: 22, width: "95%", background: "hsl(348 52% 15% / 0.85)", borderRadius: 4, marginBottom: 10 }} />
              <div style={{ height: 22, width: "78%", background: "hsl(348 52% 15% / 0.85)", borderRadius: 4, marginBottom: 14 }} />
              <div style={{ height: 10, width: "85%", background: "var(--cloud)", borderRadius: 3, marginBottom: 6 }} />
              <div style={{ height: 10, width: "72%", background: "var(--cloud)", borderRadius: 3 }} />
            </div>

            {/* Specialist cards row */}
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14, marginBottom: 22 }}>
              {window.SPECIALISTS.slice(0, 4).map((s) => (
                <div key={s.num} style={{
                  background: `var(--${s.accent}-3)`, border: "1px solid var(--border)",
                  borderRadius: 16, padding: 14, aspectRatio: "1 / 1.1",
                  display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-end", gap: 8,
                }}>
                  <img src={s.portrait} alt="" style={{ width: "75%", height: "auto", objectFit: "contain" }} />
                  <div style={{ height: 8, width: "70%", background: "hsl(348 52% 15% / 0.75)", borderRadius: 2 }} />
                  <div style={{ height: 6, width: "50%", background: "var(--muted)", opacity: 0.5, borderRadius: 2 }} />
                </div>
              ))}
            </div>

            {/* Draft table rows */}
            <div style={{ background: "var(--snow)", borderRadius: 14, padding: 16, border: "1px solid var(--border)" }}>
              {[1,1,1].map((_, i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 14, padding: "10px 4px", borderTop: i ? "1px solid var(--border)" : "none" }}>
                  <span style={{ width: 24, height: 24, borderRadius: "50%", background: window.SPECIALISTS[i].dot }} />
                  <div style={{ flex: 1 }}>
                    <div style={{ height: 9, width: "60%", background: "hsl(348 52% 15% / 0.7)", borderRadius: 2, marginBottom: 5 }} />
                    <div style={{ height: 7, width: "40%", background: "var(--muted)", opacity: 0.5, borderRadius: 2 }} />
                  </div>
                  <div style={{ width: 60, height: 20, background: `var(--${window.SPECIALISTS[i].accent}-3)`, borderRadius: 999 }} />
                </div>
              ))}
            </div>
          </div>
        </main>
      </div>

      {/* Veil + lock pill */}
      <div style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        background: "radial-gradient(ellipse 70% 50% at 50% 50%, hsl(355 10% 97% / 0.35), hsl(355 10% 97% / 0.75) 70%)",
      }} />

      <div style={{
        position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)",
        display: "flex", flexDirection: "column", alignItems: "center", gap: 16,
      }}>
        <div className="scs-peek-caption" style={{
          background: "var(--ink-deep)", color: "#fff",
          padding: "12px 22px", borderRadius: 999,
          display: "inline-flex", alignItems: "center", gap: 12,
          boxShadow: "0 16px 40px hsl(348 52% 15% / 0.35)",
          border: "1px solid hsl(12 72% 55% / 0.3)",
        }}>
          <span style={{
            width: 8, height: 8, borderRadius: "50%",
            background: "var(--orange)",
            boxShadow: "0 0 12px var(--orange)",
            animation: "scsPulse 1.8s ease-in-out infinite",
          }} />
          <span style={{
            fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.14em",
            textTransform: "uppercase", fontWeight: 500,
          }}>{caption}</span>
        </div>
        <div className="scs-peek-glimpse" style={{
          fontFamily: "var(--font-emphasis)", fontStyle: "italic", fontSize: 28,
          color: "var(--ink)", background: "hsl(355 10% 97% / 0.85)",
          padding: "4px 16px", borderRadius: 8,
        }}>A glimpse.</div>
      </div>
    </div>
  );
};