/* Faux-UI mini-mockups — tiny rendered interfaces used as community thumbnails.
 * Each fills its parent frame (position:absolute inset:0). Colors come from the
 * Claude Design token palette (--cds-*). Exported on window.CommunityThumbs. */

const TF = "var(--cds-font-sans)";
const MONO = "var(--cds-font-mono)";

function fill(extra) {
  return { position: "absolute", inset: 0, ...extra };
}

/* ── 1. Orders / analytics dashboard ───────────────────────────── */
function AnalyticsThumb() {
  const bars = [38, 52, 44, 70, 60, 88, 76];
  return (
    <div style={fill({ background: "#fff", padding: 14, display: "flex", flexDirection: "column", gap: 10, fontFamily: TF })}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ fontSize: 10, fontWeight: 700, color: "var(--cds-gray-800)" }}>Orders</div>
        <div style={{ display: "flex", gap: 4 }}>
          {["7d", "30d", "All"].map((l, i) => (
            <span key={l} style={{ fontSize: 7.5, padding: "2px 6px", borderRadius: 5, background: i === 1 ? "var(--cds-gray-800)" : "var(--cds-gray-60)", color: i === 1 ? "#fff" : "var(--cds-gray-500)", fontWeight: 600 }}>{l}</span>
          ))}
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 7 }}>
        {[["Revenue", "$48.2k", "var(--cds-mineral)"], ["Orders", "1,284", "var(--cds-blue-400)"], ["Refunds", "2.1%", "var(--cds-clay)"]].map(([k, v, c]) => (
          <div key={k} style={{ border: "1px solid var(--cds-gray-80)", borderRadius: 7, padding: "7px 8px" }}>
            <div style={{ fontSize: 6.5, color: "var(--cds-gray-450)", fontWeight: 600 }}>{k}</div>
            <div style={{ fontSize: 12, fontWeight: 700, color: "var(--cds-gray-900)", marginTop: 2 }}>{v}</div>
            <div style={{ width: 18, height: 2.5, borderRadius: 2, background: c, marginTop: 4 }} />
          </div>
        ))}
      </div>
      <div style={{ flex: 1, border: "1px solid var(--cds-gray-80)", borderRadius: 8, padding: "9px 9px 7px", display: "flex", alignItems: "flex-end", gap: 5 }}>
        {bars.map((h, i) => (
          <div key={i} style={{ flex: 1, height: `${h}%`, borderRadius: "3px 3px 1px 1px", background: i === 5 ? "var(--cds-clay)" : "var(--cds-gray-150)" }} />
        ))}
      </div>
    </div>
  );
}

/* ── 2. Music / ambient player ─────────────────────────────────── */
function PlayerThumb() {
  return (
    <div style={fill({ background: "linear-gradient(150deg,#2b2433,#43304a 60%,#623f55)", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 11, fontFamily: TF, padding: 16 })}>
      <div style={{ width: 78, height: 78, borderRadius: 14, background: "linear-gradient(135deg,var(--cds-clay),var(--cds-peach) 70%,var(--cds-heather))", boxShadow: "0 10px 24px #0006" }} />
      <div style={{ textAlign: "center" }}>
        <div style={{ fontSize: 11, fontWeight: 700, color: "#fff" }}>Tidal Drift</div>
        <div style={{ fontSize: 8, color: "#ffffffa6", marginTop: 2 }}>Ambient Loops · Focus</div>
      </div>
      <div style={{ width: "72%", height: 3, borderRadius: 2, background: "#ffffff2e", position: "relative" }}>
        <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: "42%", background: "#fff", borderRadius: 2 }} />
        <div style={{ position: "absolute", left: "42%", top: "50%", width: 7, height: 7, borderRadius: "50%", background: "#fff", transform: "translate(-50%,-50%)" }} />
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 16, color: "#fff" }}>
        <span style={{ fontSize: 13, opacity: 0.7 }}>◁◁</span>
        <span style={{ width: 26, height: 26, borderRadius: "50%", background: "#fff", color: "#43304a", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 10 }}>▶</span>
        <span style={{ fontSize: 13, opacity: 0.7 }}>▷▷</span>
      </div>
    </div>
  );
}

/* ── 3. Pitch deck slide ───────────────────────────────────────── */
function DeckThumb() {
  return (
    <div style={fill({ background: "var(--cds-gray-900)", padding: 18, display: "flex", flexDirection: "column", justifyContent: "center", fontFamily: TF })}>
      <div style={{ fontSize: 7.5, letterSpacing: "0.18em", color: "var(--cds-clay)", fontWeight: 700, textTransform: "uppercase" }}>Series A · 2026</div>
      <div style={{ fontFamily: "var(--cds-font-voice)", fontSize: 23, lineHeight: 1.05, color: "#fff", marginTop: 9, fontWeight: 500 }}>Logistics,<br />reimagined.</div>
      <div style={{ width: 30, height: 3, background: "var(--cds-clay)", borderRadius: 2, margin: "12px 0 9px" }} />
      <div style={{ display: "flex", gap: 16 }}>
        {[["3.4×", "ARR growth"], ["$12M", "raised"], ["48", "markets"]].map(([n, l]) => (
          <div key={l}>
            <div style={{ fontSize: 12, fontWeight: 700, color: "#fff" }}>{n}</div>
            <div style={{ fontSize: 6.5, color: "#ffffff80", marginTop: 1 }}>{l}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ── 4. Kanban board ───────────────────────────────────────────── */
function KanbanThumb() {
  const cols = [
    { t: "Backlog", c: "var(--cds-gray-300)", cards: [55, 30] },
    { t: "Doing", c: "var(--cds-blue-400)", cards: [40, 60] },
    { t: "Done", c: "var(--cds-mineral)", cards: [48] },
  ];
  return (
    <div style={fill({ background: "var(--cds-gray-30)", padding: 12, display: "flex", gap: 8, fontFamily: TF })}>
      {cols.map((col) => (
        <div key={col.t} style={{ flex: 1, display: "flex", flexDirection: "column", gap: 6 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: col.c }} />
            <span style={{ fontSize: 7.5, fontWeight: 700, color: "var(--cds-gray-700)" }}>{col.t}</span>
          </div>
          {col.cards.map((w, i) => (
            <div key={i} style={{ background: "#fff", border: "1px solid var(--cds-gray-80)", borderRadius: 6, padding: "7px 7px", display: "flex", flexDirection: "column", gap: 4, boxShadow: "var(--cds-shadow-sm)" }}>
              <div style={{ height: 3, width: `${w + 25}%`, borderRadius: 2, background: "var(--cds-gray-200)" }} />
              <div style={{ height: 3, width: `${w}%`, borderRadius: 2, background: "var(--cds-gray-100)" }} />
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 2 }}>
                <span style={{ fontSize: 5.5, padding: "1.5px 4px", borderRadius: 4, background: col.c, color: "#fff", fontWeight: 700, opacity: 0.85 }}>{["UI", "API", "QA"][i % 3]}</span>
                <span style={{ width: 9, height: 9, borderRadius: "50%", background: "var(--cds-peach)" }} />
              </div>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

/* ── 5. Chat / messaging ───────────────────────────────────────── */
function ChatThumb() {
  return (
    <div style={fill({ background: "#fff", display: "flex", flexDirection: "column", fontFamily: TF })}>
      <div style={{ display: "flex", alignItems: "center", gap: 7, padding: "10px 12px", borderBottom: "1px solid var(--cds-gray-70)" }}>
        <span style={{ width: 22, height: 22, borderRadius: "50%", background: "var(--cds-heather)" }} />
        <div>
          <div style={{ fontSize: 9, fontWeight: 700, color: "var(--cds-gray-800)" }}>Nora Pike</div>
          <div style={{ fontSize: 6.5, color: "var(--cds-mineral)", fontWeight: 600 }}>● online</div>
        </div>
      </div>
      <div style={{ flex: 1, padding: "10px 12px", display: "flex", flexDirection: "column", gap: 7, background: "var(--cds-gray-20)" }}>
        <div style={{ alignSelf: "flex-start", maxWidth: "72%", background: "#fff", border: "1px solid var(--cds-gray-80)", borderRadius: "10px 10px 10px 3px", padding: "6px 8px", fontSize: 7.5, color: "var(--cds-gray-700)" }}>Did the new build ship?</div>
        <div style={{ alignSelf: "flex-end", maxWidth: "72%", background: "var(--cds-clay)", borderRadius: "10px 10px 3px 10px", padding: "6px 8px", fontSize: 7.5, color: "#fff" }}>Just pushed it ✦ take a look</div>
        <div style={{ alignSelf: "flex-start", background: "#fff", border: "1px solid var(--cds-gray-80)", borderRadius: "10px 10px 10px 3px", padding: "7px 9px", display: "flex", gap: 3 }}>
          {[0, 1, 2].map((i) => <span key={i} style={{ width: 4, height: 4, borderRadius: "50%", background: "var(--cds-gray-300)" }} />)}
        </div>
      </div>
      <div style={{ padding: "8px 12px", borderTop: "1px solid var(--cds-gray-70)", display: "flex", gap: 6, alignItems: "center" }}>
        <div style={{ flex: 1, height: 16, borderRadius: 8, background: "var(--cds-gray-50)", border: "1px solid var(--cds-gray-80)" }} />
        <span style={{ width: 16, height: 16, borderRadius: "50%", background: "var(--cds-clay)", color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 8 }}>↑</span>
      </div>
    </div>
  );
}

/* ── 6. Code editor ────────────────────────────────────────────── */
function EditorThumb() {
  const tokens = [
    [["#c678dd", "const"], ["#e5e5e5", " draw"], ["#56b6c2", " = "], ["#98c379", "(ctx) => {"]],
    [["#5c6370", "  // raymarch"]],
    [["#e5e5e5", "  for "], ["#56b6c2", "("], ["#d19a66", "let i=0"], ["#56b6c2", "; "], ["#d19a66", "i<64"], ["#56b6c2", ")"]],
    [["#e5e5e5", "    march"], ["#56b6c2", "("], ["#d19a66", "ray"], ["#56b6c2", ", "], ["#98c379", "dist"], ["#56b6c2", ")"]],
    [["#c678dd", "  return "], ["#98c379", "field"]],
    [["#98c379", "}"]],
  ];
  return (
    <div style={fill({ background: "#21252b", display: "flex", flexDirection: "column", fontFamily: MONO })}>
      <div style={{ display: "flex", gap: 5, padding: "9px 12px", alignItems: "center" }}>
        {["#ff5f56", "#ffbd2e", "#27c93f"].map((c) => <span key={c} style={{ width: 7, height: 7, borderRadius: "50%", background: c }} />)}
        <span style={{ fontSize: 7, color: "#7d8595", marginLeft: 6, fontFamily: TF }}>field.js</span>
      </div>
      <div style={{ flex: 1, padding: "4px 0 10px", display: "flex", flexDirection: "column", gap: 4 }}>
        {tokens.map((line, i) => (
          <div key={i} style={{ display: "flex", fontSize: 8, lineHeight: 1.2 }}>
            <span style={{ width: 22, textAlign: "right", paddingRight: 8, color: "#4b5263", flexShrink: 0 }}>{i + 1}</span>
            <span>{line.map(([c, t], j) => <span key={j} style={{ color: c }}>{t}</span>)}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ── 7. Shader / generative field ──────────────────────────────── */
function ShaderThumb() {
  const dots = [];
  for (let i = 0; i < 46; i++) {
    const x = (i * 53) % 100;
    const y = (i * 37 + (i % 5) * 11) % 100;
    const s = 2 + ((i * 7) % 9);
    const hue = (i * 47) % 360;
    dots.push(
      <span key={i} style={{ position: "absolute", left: `${x}%`, top: `${y}%`, width: s, height: s, borderRadius: "50%", background: `hsl(${hue} 80% 65% / 0.85)`, filter: "blur(0.3px)" }} />
    );
  }
  return (
    <div style={fill({ background: "radial-gradient(circle at 30% 25%,#3a1f5e,#150b29 70%)", overflow: "hidden", fontFamily: MONO })}>
      {dots}
      <div style={{ position: "absolute", left: 12, bottom: 11, fontSize: 7, color: "#ffffffb0", letterSpacing: "0.1em" }}>flow_field.glsl · 60fps</div>
    </div>
  );
}

/* ── 8. Weather ────────────────────────────────────────────────── */
function WeatherThumb() {
  return (
    <div style={fill({ background: "linear-gradient(165deg,#7db7e8,#4a86c5 55%,#37618f)", padding: 16, display: "flex", flexDirection: "column", justifyContent: "space-between", fontFamily: TF, color: "#fff" })}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <div>
          <div style={{ fontSize: 9, fontWeight: 600, opacity: 0.9 }}>Lisbon</div>
          <div style={{ fontSize: 30, fontWeight: 300, lineHeight: 1, marginTop: 2 }}>21°</div>
          <div style={{ fontSize: 7.5, opacity: 0.85, marginTop: 2 }}>Partly cloudy</div>
        </div>
        <div style={{ width: 34, height: 34, borderRadius: "50%", background: "radial-gradient(circle,#fff6d6,#ffd86b)", boxShadow: "0 0 18px #ffe49a99" }} />
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", background: "#ffffff24", borderRadius: 9, padding: "8px 6px", backdropFilter: "blur(2px)" }}>
        {[["9a", "19°"], ["12p", "22°"], ["3p", "23°"], ["6p", "20°"], ["9p", "17°"]].map(([h, t]) => (
          <div key={h} style={{ textAlign: "center", display: "flex", flexDirection: "column", gap: 3, alignItems: "center" }}>
            <span style={{ fontSize: 6.5, opacity: 0.8 }}>{h}</span>
            <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#ffe49a" }} />
            <span style={{ fontSize: 7.5, fontWeight: 600 }}>{t}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ── 9. Onboarding form ────────────────────────────────────────── */
function FormThumb() {
  return (
    <div style={fill({ background: "#fff", padding: 18, display: "flex", flexDirection: "column", gap: 10, fontFamily: TF })}>
      <div style={{ display: "flex", gap: 4 }}>
        {[0, 1, 2].map((i) => <div key={i} style={{ flex: 1, height: 3, borderRadius: 2, background: i === 0 ? "var(--cds-clay)" : "var(--cds-gray-100)" }} />)}
      </div>
      <div>
        <div style={{ fontFamily: "var(--cds-font-voice)", fontSize: 16, fontWeight: 500, color: "var(--cds-gray-900)" }}>Create your account</div>
        <div style={{ fontSize: 7.5, color: "var(--cds-gray-450)", marginTop: 3 }}>Step 1 of 3 · takes a minute</div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
        {["Full name", "Email address"].map((p, i) => (
          <div key={p}>
            <div style={{ fontSize: 6.5, color: "var(--cds-gray-500)", fontWeight: 600, marginBottom: 3 }}>{p}</div>
            <div style={{ height: 18, borderRadius: 7, border: `1px solid ${i === 1 ? "var(--cds-clay)" : "var(--cds-gray-100)"}`, background: i === 1 ? "var(--cds-orange-30)" : "var(--cds-gray-20)" }} />
          </div>
        ))}
      </div>
      <div style={{ height: 20, borderRadius: 8, background: "var(--cds-gray-900)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 8, fontWeight: 600, marginTop: 2 }}>Continue →</div>
    </div>
  );
}

/* ── 10. Photo / moodboard grid ────────────────────────────────── */
function GalleryThumb() {
  const tiles = [
    "linear-gradient(135deg,var(--cds-clay),var(--cds-peach))",
    "linear-gradient(135deg,var(--cds-mineral),var(--cds-cactus))",
    "linear-gradient(135deg,var(--cds-plum),var(--cds-heather))",
    "linear-gradient(135deg,var(--cds-blue-400),var(--cds-blue-150))",
    "linear-gradient(135deg,var(--cds-yellow-200),var(--cds-peach))",
    "linear-gradient(135deg,var(--cds-magenta-300),var(--cds-magenta-100))",
  ];
  return (
    <div style={fill({ background: "#fff", padding: 12, display: "flex", flexDirection: "column", gap: 8, fontFamily: TF })}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span style={{ fontSize: 9, fontWeight: 700, color: "var(--cds-gray-800)" }}>Moodboard</span>
        <span style={{ fontSize: 6.5, color: "var(--cds-gray-400)" }}>24 shots</span>
      </div>
      <div style={{ flex: 1, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gridAutoRows: "1fr", gap: 5 }}>
        {tiles.map((g, i) => (
          <div key={i} style={{ borderRadius: 6, background: g, gridColumn: i === 0 ? "span 2" : "auto", gridRow: i === 0 ? "span 2" : "auto" }} />
        ))}
      </div>
    </div>
  );
}

/* ── 11. Habit / streak grid ───────────────────────────────────── */
function HabitThumb() {
  const weeks = 14, days = 7;
  const cells = [];
  for (let w = 0; w < weeks; w++) {
    for (let d = 0; d < days; d++) {
      const v = (w * 7 + d * 3) % 11;
      const lvl = v > 7 ? 3 : v > 4 ? 2 : v > 2 ? 1 : 0;
      const bg = ["var(--cds-gray-80)", "var(--cds-aqua-150)", "var(--cds-aqua-300)", "var(--cds-aqua-450)"][lvl];
      cells.push(<div key={`${w}-${d}`} style={{ background: bg, borderRadius: 2 }} />);
    }
  }
  return (
    <div style={fill({ background: "#fff", padding: 15, display: "flex", flexDirection: "column", gap: 11, fontFamily: TF })}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <div>
          <div style={{ fontSize: 9, fontWeight: 700, color: "var(--cds-gray-800)" }}>Writing streak</div>
          <div style={{ fontSize: 6.5, color: "var(--cds-gray-450)", marginTop: 2 }}>98 days this year</div>
        </div>
        <div style={{ fontSize: 18, fontWeight: 700, color: "var(--cds-aqua-450)" }}>17🔥</div>
      </div>
      <div style={{ flex: 1, display: "grid", gridTemplateColumns: `repeat(${weeks},1fr)`, gridTemplateRows: `repeat(${days},1fr)`, gridAutoFlow: "column", gap: 3 }}>
        {cells}
      </div>
    </div>
  );
}

/* ── 12. Terminal ──────────────────────────────────────────────── */
function TerminalThumb() {
  const lines = [
    [["#27c93f", "➜ "], ["#56b6c2", "claude "], ["#e5e5e5", "build --watch"]],
    [["#7d8595", "  compiling 142 modules…"]],
    [["#98c379", "  ✓ done in 0.8s"]],
    [["#27c93f", "➜ "], ["#56b6c2", "claude "], ["#e5e5e5", "deploy"]],
    [["#d19a66", "  ⠋ uploading bundle"]],
    [["#98c379", "  ✓ live at clay.app ↗"]],
  ];
  return (
    <div style={fill({ background: "#16181d", padding: 14, fontFamily: MONO, display: "flex", flexDirection: "column", gap: 6, justifyContent: "center" })}>
      {lines.map((line, i) => (
        <div key={i} style={{ fontSize: 8, lineHeight: 1.2 }}>
          {line.map(([c, t], j) => <span key={j} style={{ color: c }}>{t}</span>)}
        </div>
      ))}
      <div style={{ width: 6, height: 9, background: "#27c93f", marginTop: 1 }} />
    </div>
  );
}

/* ── 13. Map / route ───────────────────────────────────────────── */
function MapThumb() {
  return (
    <div style={fill({ background: "var(--cds-gray-30)", fontFamily: TF, overflow: "hidden" })}>
      <svg viewBox="0 0 200 130" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
        <rect width="200" height="130" fill="#e8eae3" />
        <path d="M0 40 H200 M0 88 H200 M55 0 V130 M135 0 V130" stroke="#d6d8cf" strokeWidth="6" fill="none" />
        <path d="M-5 110 C40 95 60 70 95 60 S150 35 210 18" stroke="#bcd1ca" strokeWidth="9" fill="none" opacity="0.6" />
        <path d="M22 118 C55 90 70 72 105 60 S160 30 178 22" stroke="var(--cds-clay)" strokeWidth="3.5" fill="none" strokeLinecap="round" strokeDasharray="0.1 8" />
        <circle cx="22" cy="118" r="5" fill="#fff" stroke="var(--cds-clay)" strokeWidth="3" />
        <circle cx="178" cy="22" r="6" fill="var(--cds-clay)" />
      </svg>
      <div style={{ position: "absolute", left: 12, top: 12, background: "#fff", borderRadius: 8, padding: "6px 9px", boxShadow: "var(--cds-shadow-md)" }}>
        <div style={{ fontSize: 9, fontWeight: 700, color: "var(--cds-gray-800)" }}>14 min</div>
        <div style={{ fontSize: 6.5, color: "var(--cds-gray-450)" }}>3.2 km · fastest</div>
      </div>
    </div>
  );
}

/* ── 14. Tarot / decorative card draw ──────────────────────────── */
function TarotThumb() {
  return (
    <div style={fill({ background: "radial-gradient(circle at 50% 30%,#2b2150,#140d2b 75%)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--cds-font-voice)", overflow: "hidden" })}>
      {[-1, 0, 1].map((i) => (
        <div key={i} style={{ position: "absolute", width: 52, height: 84, borderRadius: 7, background: i === 0 ? "linear-gradient(160deg,#3a2c66,#241845)" : "#1c1338", border: `1px solid ${i === 0 ? "var(--cds-yellow-200)" : "#473a78"}`, transform: `translateX(${i * 42}px) rotate(${i * 9}deg) scale(${i === 0 ? 1.12 : 0.95})`, zIndex: i === 0 ? 2 : 1, boxShadow: i === 0 ? "0 10px 26px #0008" : "none", display: "flex", alignItems: "center", justifyContent: "center" }}>
          {i === 0 && <span style={{ color: "var(--cds-yellow-200)", fontSize: 22 }}>✦</span>}
        </div>
      ))}
      <div style={{ position: "absolute", bottom: 12, fontSize: 8, letterSpacing: "0.22em", color: "#cabdf0", textTransform: "uppercase" }}>The Star</div>
    </div>
  );
}

const CommunityThumbs = {
  analytics: AnalyticsThumb,
  player: PlayerThumb,
  deck: DeckThumb,
  kanban: KanbanThumb,
  chat: ChatThumb,
  editor: EditorThumb,
  shader: ShaderThumb,
  weather: WeatherThumb,
  form: FormThumb,
  gallery: GalleryThumb,
  habit: HabitThumb,
  terminal: TerminalThumb,
  map: MapThumb,
  tarot: TarotThumb,
};

window.CommunityThumbs = CommunityThumbs;