/* Overview tab — hero card, 3-card row, six numbered principles */
const OverviewTab = () => {
  const heroBg = {
    background: `
      radial-gradient(70% 60% at 80% 30%, ${BRAND.dark.navyAccent} 0%, ${BRAND.dark.navy} 55%, ${BRAND.dark.navyDeep} 100%)
    `,
  };
  const heroGrid = {
    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,
  };

  const cards = [
    {
      eyebrow: "AESTHETIC",
      title: "Light-first, technical.",
      body: "Quiet surfaces, restrained color, and a 40px grid you feel rather than see. Imagery is technical or absent.",
    },
    {
      eyebrow: "COLOR STRATEGY",
      title: "One signature, one accent.",
      body: "Primary 500 carries every surface. Secondary 500 handles the second data series and supporting CTAs. No third hue.",
    },
    {
      eyebrow: "VOICE",
      title: "Engineer-first, precise.",
      body: "Declarative sentences. Numbered enumerations over prose. Technical without being cold. No hedging.",
    },
  ];

  return (
    <div className="space-y-12">
      {/* Hero */}
      <section>
        <SectionEyebrow number="01" label="Brand System" />
        <div
          className="relative overflow-hidden rounded-2xl"
          style={{ ...heroBg, border: `1px solid ${BRAND.dark.navyAccent}`, minHeight: 360 }}
        >
          <div className="absolute inset-0 pointer-events-none" style={heroGrid} />
          {/* upper-right primary glow */}
          <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%",
            }}
          />
          {/* lower-left red glow */}
          <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-16 md:py-20">
            <div
              className="font-mono mb-6"
              style={{
                fontSize: 12,
                fontWeight: 700,
                letterSpacing: "0.22em",
                color: BRAND.primary[300],
              }}
            >
              BLADESTACK.IO · BRAND SYSTEM
            </div>
            <h1
              className="text-white"
              style={{ fontSize: 64, fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.02 }}
            >
              Brand & Style
            </h1>
            <h2
              style={{
                fontSize: 64,
                fontWeight: 700,
                letterSpacing: "-0.025em",
                lineHeight: 1.02,
                color: BRAND.primary[300],
              }}
            >
              Guidelines
            </h2>
            <p className="mt-6 max-w-xl" style={{ color: BRAND.dark.slateMuted, fontSize: 15, lineHeight: 1.6 }}>
              One signature blue. One secondary teal. A 40px grid felt, not seen. This document defines the surfaces, type, components, and patterns that carry the brand.
            </p>
          </div>
        </div>
      </section>

      {/* Three positioning cards */}
      <section>
        <SectionEyebrow number="02" label="Positioning" />
        <div className="grid md:grid-cols-3 gap-4">
          {cards.map((c) => (
            <Card key={c.eyebrow}>
              <div
                style={{
                  fontSize: 11,
                  fontWeight: 700,
                  letterSpacing: "0.18em",
                  color: BRAND.primary[500],
                  marginBottom: 14,
                }}
              >
                {c.eyebrow}
              </div>
              <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.015em", color: BRAND.ink.body, lineHeight: 1.2 }}>
                {c.title}
              </div>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: BRAND.ink.muted, marginTop: 12 }}>{c.body}</p>
            </Card>
          ))}
        </div>
      </section>

      {/* Six principles */}
      <section>
        <SectionEyebrow number="03" label="Design Principles" />
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
          {PRINCIPLES.map((p) => (
            <Card key={p.n}>
              <div className="flex items-start gap-4">
                <div
                  className="flex items-center justify-center font-mono shrink-0"
                  style={{
                    width: 48,
                    height: 48,
                    borderRadius: 10,
                    background: BRAND.primary[50],
                    color: BRAND.primary[500],
                    fontSize: 18,
                    fontWeight: 700,
                    letterSpacing: "-0.01em",
                  }}
                >
                  {p.n}
                </div>
                <div className="flex-1">
                  <div style={{ fontSize: 16, fontWeight: 700, color: BRAND.ink.body, lineHeight: 1.3 }}>
                    {p.title}
                  </div>
                  <p style={{ fontSize: 13.5, lineHeight: 1.6, color: BRAND.ink.muted, marginTop: 8 }}>{p.body}</p>
                </div>
              </div>
            </Card>
          ))}
        </div>
      </section>
    </div>
  );
};

window.OverviewTab = OverviewTab;