/* Patterns tab — grid backdrops, cover treatment, atmosphere, gradients */

const truncate = (s, n) => (s.length > n ? s.slice(0, n - 1) + "…" : s);

const PatternsTab = () => {
  const coverBase = `radial-gradient(70% 60% at 80% 30%, ${BRAND.dark.navyAccent} 0%, ${BRAND.dark.navy} 55%, ${BRAND.dark.navyDeep} 100%)`;
  const upperGlow = `radial-gradient(circle at 100% 0%, ${BRAND.primary[500]} 0%, transparent 45%) · 33% opacity · 40px blur`;
  const lowerGlow = `radial-gradient(circle at 0% 100%, ${BRAND.semantic.danger} 0%, transparent 50%) · 22% opacity · 50px blur`;

  return (
    <div className="space-y-12">
      {/* Grid backdrop */}
      <section>
        <SectionEyebrow number="13" label="Grid Backdrop" />
        <div className="grid md:grid-cols-2 gap-4">
          <Card padding={0} style={{ overflow: "hidden" }}>
            <div style={{ background: BRAND.surface.card, height: 240, position: "relative" }}>
              <div className="absolute inset-0" style={{
                backgroundImage: `linear-gradient(to right, ${BRAND.surface.grid} 1px, transparent 1px), linear-gradient(to bottom, ${BRAND.surface.grid} 1px, transparent 1px)`,
                backgroundSize: "40px 40px",
              }} />
            </div>
            <div className="px-5 py-4" style={{ borderTop: `1px solid ${BRAND.surface.border}` }}>
              <div style={{ fontSize: 14, fontWeight: 700, color: BRAND.ink.body }}>Light variant</div>
              <div className="font-mono mt-1" style={{ fontSize: 12, color: BRAND.ink.subtle }}>
                40px · #E8EAEC 1px stroke
              </div>
            </div>
          </Card>
          <Card padding={0} style={{ overflow: "hidden", border: `1px solid ${BRAND.dark.navyAccent}` }}>
            <div style={{ background: BRAND.dark.navy, height: 240, position: "relative" }}>
              <div className="absolute inset-0" style={{
                backgroundImage: `linear-gradient(to right, ${BRAND.primary[500]} 1px, transparent 1px), linear-gradient(to bottom, ${BRAND.primary[500]} 1px, transparent 1px)`,
                backgroundSize: "40px 40px",
                opacity: 0.18,
              }} />
            </div>
            <div className="px-5 py-4" style={{ background: BRAND.dark.navyDeep, borderTop: `1px solid ${BRAND.dark.navyAccent}` }}>
              <div style={{ fontSize: 14, fontWeight: 700, color: "#FFFFFF" }}>Dark variant</div>
              <div className="font-mono mt-1" style={{ fontSize: 12, color: BRAND.dark.slateMuted }}>
                40px · #4353FF @ 18% opacity
              </div>
            </div>
          </Card>
        </div>
        <div className="mt-4 rounded-xl p-5 flex gap-4" style={{ background: BRAND.surface.callout, borderLeft: `4px solid ${BRAND.primary[500]}` }}>
          <div style={{ fontSize: 14, color: BRAND.ink.body, lineHeight: 1.6 }}>
            <strong style={{ color: BRAND.primary[700] }}>The rule.</strong> The grid is felt, not seen. If you can read the grid lines without looking for them, opacity is too high.
          </div>
        </div>
      </section>

      {/* Cover treatment */}
      <section>
        <SectionEyebrow number="14" label="Cover Treatment" />
        <div
          className="relative overflow-hidden rounded-2xl"
          style={{ background: coverBase, height: 360, border: `1px solid ${BRAND.dark.navyAccent}` }}
        >
          <div className="absolute inset-0 pointer-events-none" style={{
            backgroundImage: `linear-gradient(to right, ${BRAND.primary[500]} 1px, transparent 1px), linear-gradient(to bottom, ${BRAND.primary[500]} 1px, transparent 1px)`,
            backgroundSize: "48px 48px",
            opacity: 0.15,
          }} />
          <div className="absolute pointer-events-none" style={{
            right: -60, top: -80, width: 380, height: 380,
            background: BRAND.primary[500], opacity: 0.33, filter: "blur(40px)", borderRadius: "50%",
          }} />
          <div className="absolute pointer-events-none" style={{
            left: -80, bottom: -100, width: 420, height: 420,
            background: BRAND.semantic.danger, opacity: 0.22, filter: "blur(50px)", borderRadius: "50%",
          }} />
          <div className="relative px-10 py-14 md:px-14 md:py-16">
            <div className="font-mono mb-6" style={{ fontSize: 12, fontWeight: 700, letterSpacing: "0.22em", color: BRAND.primary[300] }}>
              BLADESTACK.IO · COVER SPECIMEN
            </div>
            <div style={{ fontSize: 56, fontWeight: 700, letterSpacing: "-0.025em", color: "#fff", lineHeight: 1.02 }}>
              Authorization Strategy
            </div>
            <div style={{ fontSize: 56, fontWeight: 700, letterSpacing: "-0.025em", color: BRAND.primary[300], lineHeight: 1.02 }}>
              Quarterly Review
            </div>
          </div>
        </div>
        <div className="grid md:grid-cols-3 gap-4 mt-4">
          {[
            { label: "BASE GRADIENT", css: `radial-gradient(70% 60% at 80% 30%, #1B1D3A 0%, #0A0E27 55%, #050817 100%)` },
            { label: "UPPER GLOW",    css: `radial-gradient(circle at 100% 0%, #4353FF 0%, transparent 45%) · opacity 0.33 · blur(40px)` },
            { label: "ACCENT GLOW",   css: `radial-gradient(circle at 0% 100%, #DC2626 0%, transparent 50%) · opacity 0.22 · blur(50px)` },
          ].map((s) => (
            <Card key={s.label}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", color: BRAND.primary[500], marginBottom: 10 }}>
                {s.label}
              </div>
              <div className="font-mono" style={{ fontSize: 12, color: BRAND.ink.muted, lineHeight: 1.6, wordBreak: "break-word" }}>
                {s.css}
              </div>
            </Card>
          ))}
        </div>
      </section>

      {/* Atmosphere */}
      <section>
        <SectionEyebrow number="15" label="Atmosphere" />
        <p className="mb-4 max-w-2xl" style={{ fontSize: 14, color: BRAND.ink.muted, lineHeight: 1.6 }}>
          At most one blurred radial per surface. Never on surfaces with tables or dense numerics. The glow is a depth cue, not decoration.
        </p>
        <div className="grid md:grid-cols-2 gap-4">
          {[
            { label: "Primary Glow", hex: BRAND.primary[500] },
            { label: "Secondary Glow", hex: BRAND.secondary[500] },
          ].map((g) => (
            <Card key={g.label} padding={0} style={{ overflow: "hidden" }}>
              <div style={{ position: "relative", height: 220, background: BRAND.surface.card }}>
                <div className="absolute inset-0" style={{
                  backgroundImage: `linear-gradient(to right, ${BRAND.surface.grid} 1px, transparent 1px), linear-gradient(to bottom, ${BRAND.surface.grid} 1px, transparent 1px)`,
                  backgroundSize: "40px 40px",
                }} />
                <div className="absolute pointer-events-none" style={{
                  left: "30%", top: "20%", width: 260, height: 260,
                  background: g.hex, opacity: 0.28, filter: "blur(40px)", borderRadius: "50%",
                }} />
              </div>
              <div className="px-5 py-4" style={{ borderTop: `1px solid ${BRAND.surface.border}` }}>
                <div style={{ fontSize: 14, fontWeight: 700, color: BRAND.ink.body }}>{g.label}</div>
                <div className="font-mono mt-1" style={{ fontSize: 12, color: BRAND.ink.subtle }}>
                  260px radial · 40px blur · 28% opacity
                </div>
              </div>
            </Card>
          ))}
        </div>
      </section>

      {/* Gradients */}
      <section>
        <SectionEyebrow number="16" label="Gradients" />
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {GRADIENT_TOKENS.map((g) => (
            <Card key={g.name} padding={0} style={{ overflow: "hidden" }}>
              <div style={{ height: 120, background: g.css }} />
              <div className="px-4 py-3" style={{ borderTop: `1px solid ${BRAND.surface.border}` }}>
                <div className="flex items-baseline justify-between gap-3">
                  <div style={{ fontSize: 14, fontWeight: 700, color: BRAND.ink.body }}>{g.name}</div>
                  <div style={{ fontSize: 11, color: BRAND.ink.subtle, textAlign: "right" }}>{g.role}</div>
                </div>
                <div className="font-mono mt-2" style={{ fontSize: 11, color: BRAND.ink.muted, lineHeight: 1.5, wordBreak: "break-word" }}>
                  {truncate(g.css, 80)}
                </div>
              </div>
            </Card>
          ))}
        </div>
      </section>
    </div>
  );
};

window.PatternsTab = PatternsTab;