/* Assets tab - logo lockups and developer implementation snippets */

const SnippetDemo = ({ label, code, description, children }) => (
  <div
    className="grid xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)] gap-4 items-stretch"
  >
    <Card padding={0} style={{ overflow: "hidden" }}>
      <div className="px-4 py-3" style={{ borderBottom: `1px solid ${BRAND.surface.border}` }}>
        <div className="font-mono" style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.16em", color: BRAND.primary[500] }}>
          EXAMPLE
        </div>
        <div style={{ fontSize: 14, fontWeight: 700, color: BRAND.ink.body, marginTop: 6 }}>{label}</div>
        <p style={{ fontSize: 12.5, color: BRAND.ink.muted, lineHeight: 1.5, marginTop: 5 }}>{description}</p>
      </div>
      <div className="p-4" style={{ background: BRAND.surface.canvas }}>
        {children}
      </div>
    </Card>
    <CodeBlock label={label} code={code} />
  </div>
);

const AssetsTab = () => {
  const logoLightMarkup = `<img
  src="assets/logo-black-text.png"
  alt="Bladestack"
  width="1230"
  height="328"
  style="height:auto;max-width:100%;"
/>`;

  const logoDarkMarkup = `<img
  src="assets/logo-white-text.png"
  alt="Bladestack"
  width="1230"
  height="328"
  style="height:auto;max-width:100%;"
/>`;

  const tokenCss = `:root {
  --bsio-primary-500: #4353FF;
  --bsio-secondary-500: #5BC9B1;
  --bsio-canvas: #EFEFEF;
  --bsio-card: #FFFFFF;
  --bsio-grid: #E8EAEC;
  --bsio-ink: #0F172A;
  --bsio-navy-deep: #050817;
  --bsio-navy: #0A0E27;
}`;

  const lightGridCss = `.bsio-grid-light {
  background-color: #FFFFFF;
  background-image:
    linear-gradient(to right, #E8EAEC 1px, transparent 1px),
    linear-gradient(to bottom, #E8EAEC 1px, transparent 1px);
  background-size: 40px 40px;
}`;

  const darkGridCss = `.bsio-grid-dark {
  background-color: #0A0E27;
  background-image:
    linear-gradient(to right, rgba(67, 83, 255, 0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(67, 83, 255, 0.18) 1px, transparent 1px);
  background-size: 40px 40px;
}`;

  const reactGrid = `const GridBackdrop = ({
  children,
  color = "#E8EAEC",
  size = 40,
  opacity = 1,
}) => (
  <div style={{ position: "relative" }}>
    <div
      style={{
        position: "absolute",
        inset: 0,
        pointerEvents: "none",
        opacity,
        backgroundImage:
          \`linear-gradient(to right, \${color} 1px, transparent 1px),
           linear-gradient(to bottom, \${color} 1px, transparent 1px)\`,
        backgroundSize: \`\${size}px \${size}px\`,
      }}
    />
    <div style={{ position: "relative" }}>{children}</div>
  </div>
);`;

  const tokenPreviewVars = {
    "--bsio-primary-500": BRAND.primary[500],
    "--bsio-secondary-500": BRAND.secondary[500],
    "--bsio-canvas": BRAND.surface.canvas,
    "--bsio-card": BRAND.surface.card,
    "--bsio-grid": BRAND.surface.grid,
    "--bsio-ink": BRAND.ink.body,
    "--bsio-navy-deep": BRAND.dark.navyDeep,
    "--bsio-navy": BRAND.dark.navy,
  };

  const logoRules = [
    "Use black text on white, canvas, and other light surfaces.",
    "Use white text on navy, slate, and other dark surfaces.",
    "Preserve the full lockup, aspect ratio, and transparent background.",
    "Do not recolor, crop, compress horizontally, or rebuild the icon in text.",
  ];

  return (
    <div className="space-y-12">
      <section>
        <SectionEyebrow number="25" label="Logos" />
        <p className="mb-4 max-w-2xl" style={{ fontSize: 14, color: BRAND.ink.muted, lineHeight: 1.6 }}>
          The symbol and wordmark are a single lockup. Choose the text color by surface; the triangle field stays in the approved blue-to-teal treatment.
        </p>
        <div className="grid lg:grid-cols-2 gap-4">
          <Card padding={0} style={{ overflow: "hidden" }}>
            <div
              className="relative flex items-center justify-center px-8 py-12"
              style={{
                minHeight: 260,
                backgroundColor: BRAND.surface.card,
                backgroundImage: `linear-gradient(to right, ${BRAND.surface.grid} 1px, transparent 1px), linear-gradient(to bottom, ${BRAND.surface.grid} 1px, transparent 1px)`,
                backgroundSize: "40px 40px",
              }}
            >
              <img
                src="assets/logo-black-text.png"
                alt="Bladestack logo with black text for light backgrounds"
                style={{ display: "block", width: "100%", maxWidth: 720, height: "auto" }}
              />
            </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 surface logo</div>
              <div className="font-mono mt-1" style={{ fontSize: 12, color: BRAND.ink.subtle }}>
                assets/logo-black-text.png
              </div>
              <p style={{ fontSize: 13, color: BRAND.ink.muted, lineHeight: 1.55, marginTop: 10 }}>
                Black wordmark for white, canvas, and pale brand surfaces.
              </p>
            </div>
          </Card>

          <Card padding={0} style={{ overflow: "hidden", border: `1px solid ${BRAND.dark.navyAccent}` }}>
            <div
              className="relative flex items-center justify-center px-8 py-12"
              style={{
                minHeight: 260,
                backgroundColor: BRAND.dark.navy,
                backgroundImage: `linear-gradient(to right, rgba(67,83,255,0.18) 1px, transparent 1px), linear-gradient(to bottom, rgba(67,83,255,0.18) 1px, transparent 1px)`,
                backgroundSize: "40px 40px",
              }}
            >
              <img
                src="assets/logo-white-text.png"
                alt="Bladestack logo with white text for dark backgrounds"
                style={{ display: "block", width: "100%", maxWidth: 720, height: "auto" }}
              />
            </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 surface logo</div>
              <div className="font-mono mt-1" style={{ fontSize: 12, color: BRAND.dark.slateMuted }}>
                assets/logo-white-text.png
              </div>
              <p style={{ fontSize: 13, color: BRAND.dark.slateMuted, lineHeight: 1.55, marginTop: 10 }}>
                White wordmark for navy, slate, and other dark brand surfaces.
              </p>
            </div>
          </Card>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-3 mt-4">
          {logoRules.map((rule, i) => (
            <Card key={rule} padding={18}>
              <div className="font-mono" style={{ fontSize: 11, fontWeight: 700, color: BRAND.primary[500], letterSpacing: "0.16em" }}>
                {String(i + 1).padStart(2, "0")}
              </div>
              <p style={{ fontSize: 13, color: BRAND.ink.muted, lineHeight: 1.55, marginTop: 8 }}>{rule}</p>
            </Card>
          ))}
        </div>
      </section>

      <section>
        <SectionEyebrow number="26" label="Developer Snippets" />
        <p className="mb-4 max-w-2xl" style={{ fontSize: 14, color: BRAND.ink.muted, lineHeight: 1.6 }}>
          These snippets recreate the guide's common brand surfaces without pulling in this guide's React runtime. Each example shows the rendered result beside the code.
        </p>
        <div className="space-y-5">
          <SnippetDemo
            label="LOGO / LIGHT HTML"
            code={logoLightMarkup}
            description="Places the black-text lockup on a light surface while preserving the source asset's aspect ratio."
          >
            <div
              className="flex items-center justify-center rounded-lg px-6 py-10"
              style={{
                minHeight: 220,
                backgroundColor: BRAND.surface.card,
                backgroundImage: `linear-gradient(to right, ${BRAND.surface.grid} 1px, transparent 1px), linear-gradient(to bottom, ${BRAND.surface.grid} 1px, transparent 1px)`,
                backgroundSize: "40px 40px",
                border: `1px solid ${BRAND.surface.border}`,
              }}
            >
              <img
                src="assets/logo-black-text.png"
                alt="Bladestack"
                width="1230"
                height="328"
                style={{ height: "auto", maxWidth: "100%", display: "block" }}
              />
            </div>
          </SnippetDemo>

          <SnippetDemo
            label="LOGO / DARK HTML"
            code={logoDarkMarkup}
            description="Places the white-text lockup on a navy surface where the wordmark needs dark-background contrast."
          >
            <div
              className="flex items-center justify-center rounded-lg px-6 py-10"
              style={{
                minHeight: 220,
                backgroundColor: BRAND.dark.navy,
                backgroundImage: `linear-gradient(to right, rgba(67, 83, 255, 0.18) 1px, transparent 1px), linear-gradient(to bottom, rgba(67, 83, 255, 0.18) 1px, transparent 1px)`,
                backgroundSize: "40px 40px",
                border: `1px solid ${BRAND.dark.navyAccent}`,
              }}
            >
              <img
                src="assets/logo-white-text.png"
                alt="Bladestack"
                width="1230"
                height="328"
                style={{ height: "auto", maxWidth: "100%", display: "block" }}
              />
            </div>
          </SnippetDemo>

          <SnippetDemo
            label="CSS / TOKENS"
            code={tokenCss}
            description="Defines the minimum portable CSS variables needed to recreate BSIO color, surface, ink, and dark-mode primitives."
          >
            <div style={tokenPreviewVars}>
              <div
                className="rounded-lg p-4"
                style={{
                  background: "var(--bsio-card)",
                  color: "var(--bsio-ink)",
                  border: `1px solid ${BRAND.surface.border}`,
                  boxShadow: "0 1px 0 rgba(15,23,42,0.03)",
                }}
              >
                <div className="flex flex-wrap gap-2">
                  {[
                    ["Primary", "var(--bsio-primary-500)"],
                    ["Secondary", "var(--bsio-secondary-500)"],
                    ["Grid", "var(--bsio-grid)"],
                    ["Navy", "var(--bsio-navy)"],
                  ].map((swatch) => (
                    <div key={swatch[0]} className="flex items-center gap-2 rounded-md px-2.5 py-2" style={{ background: "var(--bsio-canvas)", border: `1px solid ${BRAND.surface.border}` }}>
                      <span className="inline-block rounded" style={{ width: 18, height: 18, background: swatch[1], border: `1px solid ${BRAND.surface.border}` }} />
                      <span style={{ fontSize: 12, fontWeight: 700, color: "var(--bsio-ink)" }}>{swatch[0]}</span>
                    </div>
                  ))}
                </div>
                <button className="inline-flex items-center gap-2 rounded-lg px-4 py-2 mt-4" style={{ background: "var(--bsio-primary-500)", color: "#FFFFFF", fontSize: 13, fontWeight: 700 }}>
                  Tokenized action <ChevronRight size={14} strokeWidth={2.25} />
                </button>
              </div>
            </div>
          </SnippetDemo>

          <SnippetDemo
            label="CSS / LIGHT GRID"
            code={lightGridCss}
            description="Paints a subtle 40px grid on a white surface for brand pages, panels, and quiet background sections."
          >
            <div
              className="rounded-lg p-5"
              style={{
                minHeight: 220,
                backgroundColor: "#FFFFFF",
                backgroundImage: "linear-gradient(to right, #E8EAEC 1px, transparent 1px), linear-gradient(to bottom, #E8EAEC 1px, transparent 1px)",
                backgroundSize: "40px 40px",
                border: `1px solid ${BRAND.surface.border}`,
              }}
            >
              <div className="rounded-lg p-4" style={{ width: "min(100%, 320px)", background: BRAND.surface.card, border: `1px solid ${BRAND.surface.border}` }}>
                <div style={{ fontSize: 15, fontWeight: 700, color: BRAND.ink.body }}>Light technical surface</div>
                <p style={{ fontSize: 13, color: BRAND.ink.muted, lineHeight: 1.55, marginTop: 8 }}>
                  The grid creates structure without turning into decoration.
                </p>
              </div>
            </div>
          </SnippetDemo>

          <SnippetDemo
            label="CSS / DARK GRID"
            code={darkGridCss}
            description="Paints the dark brand grid for covers, technical headers, and dark application states."
          >
            <div
              className="rounded-lg p-5"
              style={{
                minHeight: 220,
                backgroundColor: "#0A0E27",
                backgroundImage: "linear-gradient(to right, rgba(67, 83, 255, 0.18) 1px, transparent 1px), linear-gradient(to bottom, rgba(67, 83, 255, 0.18) 1px, transparent 1px)",
                backgroundSize: "40px 40px",
                border: `1px solid ${BRAND.dark.navyAccent}`,
              }}
            >
              <div className="rounded-lg p-4" style={{ width: "min(100%, 340px)", background: BRAND.dark.navyDeep, border: `1px solid ${BRAND.dark.navyAccent}` }}>
                <div className="font-mono" style={{ fontSize: 11, fontWeight: 700, color: BRAND.primary[300], letterSpacing: "0.16em" }}>DEPLOY STATUS</div>
                <div style={{ fontSize: 18, fontWeight: 700, color: "#FFFFFF", marginTop: 8 }}>Preview ready</div>
                <p style={{ fontSize: 13, color: BRAND.dark.slateMuted, lineHeight: 1.55, marginTop: 8 }}>
                  Dark grids work best with compact technical content.
                </p>
              </div>
            </div>
          </SnippetDemo>

          <SnippetDemo
            label="REACT / GRID BACKDROP"
            code={reactGrid}
            description="Wraps any children with an absolutely positioned grid layer so content stays readable above the pattern."
          >
            <GridBackdrop color={BRAND.surface.grid} size={40} opacity={1} className="rounded-lg overflow-hidden" style={{ minHeight: 220, background: BRAND.surface.card, border: `1px solid ${BRAND.surface.border}` }}>
              <div className="p-5">
                <div className="rounded-lg p-4" style={{ maxWidth: 360, background: "rgba(255,255,255,0.9)", border: `1px solid ${BRAND.surface.border}`, boxShadow: "0 12px 32px rgba(15,23,42,0.08)" }}>
                  <div style={{ fontSize: 15, fontWeight: 700, color: BRAND.ink.body }}>Wrapped content</div>
                  <p style={{ fontSize: 13, color: BRAND.ink.muted, lineHeight: 1.55, marginTop: 8 }}>
                    The grid is behind the children and ignores pointer events.
                  </p>
                </div>
              </div>
            </GridBackdrop>
          </SnippetDemo>
        </div>
      </section>
    </div>
  );
};

window.AssetsTab = AssetsTab;