// Brand Sheet — RedGone
// Color system, type ramp, pillow shadow recipe, glass recipe, gradient

const BrandSheet = () => {
  const swatches = [
    { name: "white-pure", hex: "#FDFDFC", role: "Primary background" },
    { name: "white-soft", hex: "#F7F6F4", role: "Hover / section breaks" },
    { name: "white-elevated", hex: "#FFFFFF", role: "Pillow cards" },
    { name: "midnight", hex: "#0A1628", role: "Primary type & icons" },
    { name: "midnight-soft", hex: "#3A4556", role: "Secondary type" },
    { name: "gray-whisper", hex: "#E8E6E2", role: "Hairline dividers" },
  ];
  const reds = [
    { name: "red-deep", hex: "#B91C2C", role: "Dense end of gradient" },
    { name: "red-core", hex: "#E63946", role: "Severity high · brand" },
    { name: "orange-warn", hex: "#F4811F", role: "Mid-severity warning" },
    { name: "yellow-caution", hex: "#F4C430", role: "Low-severity flag" },
    { name: "success-mint", hex: "#34D399", role: "Score deltas only" },
  ];

  const typeRows = [
    { label: "Hero numeral", sample: "92", style: { fontSize: 96, letterSpacing: "-0.04em", fontWeight: 600 }, klass: "serif", note: "Manrope 600 · 96–144 · -0.04em" },
    { label: "H1", sample: "Compliance overview", style: { fontSize: 40, fontWeight: 600, letterSpacing: "-0.02em" }, note: "Inter 600 · 40 · -0.02em" },
    { label: "H2", sample: "Recent risks detected", style: { fontSize: 28, fontWeight: 600, letterSpacing: "-0.015em" }, note: "Inter 600 · 28 · -0.015em" },
    { label: "H3", sample: "Top issue patterns", style: { fontSize: 20, fontWeight: 600 }, note: "Inter 600 · 20" },
    { label: "Body", sample: "Calm white pillows floating in soft order, with red risk appearing as ghostly glass that gets purified into clarity.", style: { fontSize: 15, fontWeight: 400, lineHeight: 1.55 }, note: "Inter 400 · 15 · 1.55" },
    { label: "Small", sample: "Updated 2 minutes ago", style: { fontSize: 13, fontWeight: 500 }, note: "Inter 500 · 13" },
    { label: "Micro caps", sample: "FCA MODE · ACTIVE", style: { fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase" }, note: "Inter 600 · 11 · 0.08em" },
    { label: "Mono", sample: "14:32 · 482ms · v0.3.1", klass: "mono", style: { fontSize: 13 }, note: "JetBrains Mono · 13" },
  ];

  const Swatch = ({ s, dark }) => (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <div style={{
        height: 88, borderRadius: 14, background: s.hex,
        border: "1px solid rgba(10,22,40,0.05)",
        boxShadow: "inset 0 0 0 0.5px rgba(10,22,40,0.02)",
      }}/>
      <div>
        <div style={{ fontSize: 12, fontWeight: 600, color: "var(--midnight)" }}>--{s.name}</div>
        <div className="mono" style={{ fontSize: 11, color: "var(--midnight-soft)", marginTop: 2 }}>{s.hex}</div>
        <div style={{ fontSize: 11, color: "var(--midnight-soft)", marginTop: 4 }}>{s.role}</div>
      </div>
    </div>
  );

  return (
    <div style={{
      width: 1280, padding: 56, background: "var(--white-pure)",
      display: "flex", flexDirection: "column", gap: 32,
    }}>
      {/* Header */}
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", borderBottom: "1px solid var(--gray-whisper)", paddingBottom: 24 }}>
        <div>
          <div className="micro" style={{ marginBottom: 10 }}>Brand sheet · v1.0</div>
          <div className="serif" style={{ fontSize: 64, fontWeight: 600, letterSpacing: "-0.04em", lineHeight: 1 }}>RedGone</div>
          <div className="body" style={{ marginTop: 12, color: "var(--midnight-soft)", maxWidth: 640 }}>
            Calm white pillows floating in soft order, with red risk appearing as ghostly glass that gets purified into clarity.
          </div>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
          <AngelRobot size={140} view="front"/>
        </div>
      </div>

      {/* Color */}
      <div className="pillow" style={{ padding: 32 }}>
        <div className="micro" style={{ marginBottom: 6 }}>01 · Color</div>
        <div className="h2" style={{ marginBottom: 24 }}>Whites & structure</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 20 }}>
          {swatches.map(s => <Swatch key={s.name} s={s} />)}
        </div>
        <div className="h2" style={{ margin: "32px 0 24px" }}>Red & alerts</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 20 }}>
          {reds.map(s => <Swatch key={s.name} s={s} />)}
        </div>
      </div>

      {/* Gradient */}
      <div className="pillow" style={{ padding: 32 }}>
        <div className="micro" style={{ marginBottom: 6 }}>02 · Signature gradient</div>
        <div className="h2" style={{ marginBottom: 20 }}>Red purification</div>
        <div style={{
          height: 140, borderRadius: 16,
          background: "linear-gradient(135deg, #B91C2C 0%, #E63946 35%, #F4811F 70%, #F4C430 100%)",
          position: "relative", overflow: "hidden",
        }}>
          <div className="mono" style={{
            position: "absolute", left: 20, top: 16, color: "#FFFFFF", fontSize: 11, opacity: 0.85,
          }}>linear-gradient(135deg, #B91C2C 0%, #E63946 35%, #F4811F 70%, #F4C430 100%)</div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16, marginTop: 16 }}>
          <div style={{ height: 60, borderRadius: 10, background: "linear-gradient(135deg, #B91C2C 0%, #E63946 35%, #F4811F 70%, #F4C430 100%)", opacity: 0.08 }}/>
          <div style={{ height: 60, borderRadius: 10, background: "linear-gradient(135deg, #B91C2C 0%, #E63946 35%, #F4811F 70%, #F4C430 100%)", opacity: 0.4 }}/>
          <div style={{ height: 60, borderRadius: 10, background: "linear-gradient(135deg, #B91C2C 0%, #E63946 35%, #F4811F 70%, #F4C430 100%)" }}/>
        </div>
        <div className="micro" style={{ marginTop: 10, color: "var(--midnight-soft)" }}>8% ambient · 40% emphasis · 100% flood</div>
      </div>

      {/* Surfaces */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
        <div className="pillow" style={{ padding: 32 }}>
          <div className="micro" style={{ marginBottom: 6 }}>03 · Pillow surface</div>
          <div className="h2" style={{ marginBottom: 18 }}>The calm world</div>
          <div style={{ background: "var(--white-pure)", padding: 28, borderRadius: 16, border: "1px solid var(--gray-whisper)" }}>
            <div className="pillow" style={{ padding: 24 }}>
              <div className="h3">Pillow card</div>
              <div className="small" style={{ color: "var(--midnight-soft)", marginTop: 6 }}>
                Triple-layered shadow over slightly-off background.
              </div>
            </div>
          </div>
          <pre className="mono" style={{ fontSize: 11, lineHeight: 1.6, color: "var(--midnight-soft)", margin: "16px 0 0", whiteSpace: "pre-wrap" }}>
{`background: #FFFFFF;
border-radius: 20px;
box-shadow:
  0 1px 2px rgba(10,22,40,.04),
  0 8px 24px rgba(10,22,40,.06),
  0 24px 48px rgba(10,22,40,.04);
border: 1px solid rgba(10,22,40,.03);`}
          </pre>
        </div>

        <div className="pillow" style={{ padding: 32 }}>
          <div className="micro" style={{ marginBottom: 6 }}>04 · Glass surface</div>
          <div className="h2" style={{ marginBottom: 18 }}>The risk world</div>
          <div style={{
            background: "var(--white-pure)", padding: 28, borderRadius: 16,
            border: "1px solid var(--gray-whisper)", position: "relative", overflow: "hidden",
          }}>
            <div style={{
              position: "absolute", inset: 0,
              background: "linear-gradient(135deg, #B91C2C 0%, #E63946 35%, #F4811F 70%, #F4C430 100%)",
              opacity: 0.08,
            }}/>
            <div className="glass-red" style={{ padding: 24, position: "relative" }}>
              <div className="micro" style={{ color: "var(--red-deep)" }}>REVIEW · 3 issues</div>
              <div className="h3" style={{ marginTop: 6 }}>Risk glass panel</div>
              <div className="small" style={{ color: "var(--midnight-soft)", marginTop: 6 }}>
                Translucent red, blurred, floating over pillows.
              </div>
            </div>
          </div>
          <pre className="mono" style={{ fontSize: 11, lineHeight: 1.6, color: "var(--midnight-soft)", margin: "16px 0 0", whiteSpace: "pre-wrap" }}>
{`background: rgba(230,57,70,.08);
backdrop-filter: blur(24px) saturate(180%);
border: 1px solid rgba(230,57,70,.18);
border-radius: 20px;
box-shadow:
  0 1px 2px rgba(230,57,70,.04),
  0 8px 32px rgba(230,57,70,.12);`}
          </pre>
        </div>
      </div>

      {/* Type ramp */}
      <div className="pillow" style={{ padding: 32 }}>
        <div className="micro" style={{ marginBottom: 6 }}>05 · Typography</div>
        <div className="h2" style={{ marginBottom: 20 }}>Type ramp</div>
        <div style={{ display: "flex", flexDirection: "column" }}>
          {typeRows.map((r, i) => (
            <div key={i} style={{
              display: "grid", gridTemplateColumns: "160px 1fr 220px",
              alignItems: "baseline", padding: "18px 0",
              borderTop: i === 0 ? "none" : "1px solid var(--gray-whisper)",
            }}>
              <div className="micro">{r.label}</div>
              <div className={r.klass || ""} style={r.style}>{r.sample}</div>
              <div className="mono" style={{ fontSize: 11, color: "var(--midnight-soft)", textAlign: "right" }}>{r.note}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Severity & icons */}
      <div className="pillow" style={{ padding: 32 }}>
        <div className="micro" style={{ marginBottom: 6 }}>06 · Severity & motion</div>
        <div className="h2" style={{ marginBottom: 20 }}>Risk language</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 20 }}>
          {[
            { lvl: "High", color: "#E63946", op: 0.15, copy: "Implied guarantee · regulatory citation" },
            { lvl: "Mid",  color: "#F4811F", op: 0.10, copy: "Performance language · needs hedge" },
            { lvl: "Low",  color: "#F4C430", op: 0.07, copy: "Tone · clarity · soft suggestion" },
          ].map(s => (
            <div key={s.lvl} style={{
              padding: 20, borderRadius: 16,
              background: `rgba(230, 57, 70, ${s.op})`,
              border: `1px solid rgba(230, 57, 70, ${s.op + 0.1})`,
              backdropFilter: "blur(24px) saturate(180%)",
            }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <span style={{ width: 10, height: 10, borderRadius: 999, background: s.color, boxShadow: `0 0 0 4px ${s.color}22` }}/>
                <span className="micro" style={{ color: "var(--midnight)" }}>Severity · {s.lvl}</span>
              </div>
              <div className="small" style={{ marginTop: 10, color: "var(--midnight-soft)" }}>{s.copy}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Neumorphism controls */}
      <div className="pillow" style={{ padding: 32 }}>
        <div className="micro" style={{ marginBottom: 6 }}>07 · Soft neumorphism</div>
        <div className="h2" style={{ marginBottom: 20 }}>Pillow UI controls</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
          <div style={{ padding: 28, borderRadius: 16, background: "var(--white-pure)", boxShadow: "var(--neu-in)" }}>
            <div className="micro" style={{ marginBottom: 14 }}>Buttons</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 12, alignItems: "center" }}>
              <button className="neu-btn neu-btn-primary">Send</button>
              <button className="neu-btn">Save draft</button>
              <button className="neu-btn neu-btn-gradient">Fix all with RedGone →</button>
              <button className="neu-btn neu-btn-sm">Ignore</button>
            </div>
          </div>
          <div style={{ padding: 28, borderRadius: 16, background: "var(--white-pure)", boxShadow: "var(--neu-in)" }}>
            <div className="micro" style={{ marginBottom: 14 }}>Inputs · toggles · chips</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <input className="neu-input" placeholder="Tell RedGone why" style={{ width: "100%" }}/>
              <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
                <div className="neu-toggle on"><div className="knob"/></div>
                <div className="neu-toggle"><div className="knob"/></div>
                <div className="neu-checkbox on"/>
                <div className="neu-checkbox"/>
                <div className="neu-chip">Suggested chip</div>
              </div>
              <div style={{ display: "flex", gap: 10 }}>
                <div className="neu-tab on"><span style={{width:8,height:8,borderRadius:999,background:"var(--midnight)"}}/>Active tab</div>
                <div className="neu-tab"><span style={{width:8,height:8,borderRadius:999,background:"#F4811F"}}/>Inactive</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Footer */}
      <div style={{ display: "flex", justifyContent: "space-between", color: "var(--midnight-soft)", fontSize: 12 }}>
        <div className="mono">redgone · brand sheet · 04.2026</div>
        <div className="mono">red chaos → white order</div>
      </div>
    </div>
  );
};

window.BrandSheet = BrandSheet;