/* Voice tab — voice & person, casing & names, copy patterns, numbers & symbols, cultural identity */
const VoiceTab = () => {
  const voiceCards = [
    {
      eyebrow: "VOICE",
      title: "Engineer-first. Precise. Declarative.",
      body: "Allergic to marketing hedging. Hedged claims read as weakness — every load-bearing assertion is committed to.",
    },
    {
      eyebrow: "PERSON",
      title: "Third person, we, you.",
      body: "Third person (“bladestack.io,” “the firm”) in formal contexts. First-person plural (“we”) in advisory and customer-facing copy. Second person (“you”) for CTAs and contact moments. Avoid “us” as a marketing flourish.",
    },
    {
      eyebrow: "CADENCE",
      title: "Short and declarative.",
      body: "Numbered enumerations replace prose blocks wherever possible. Tables and matrices replace paragraphs wherever possible.",
    },
  ];

  const casingRows = [
    ["Headlines on light", "Sentence case", "Restraint over decoration"],
    ["Section titles", "Sentence case, never Title Case", "Tables earn the page"],
    ["Eyebrows", "ALL CAPS · 0.18em tracking", "01 · PRINCIPLES"],
    ["Wordmark", "ALL CAPS · 0.25em tracking", "BLADESTACK"],
    ["Company name", "Lowercase, canonical", "bladestack.io"],
    ["Internal abbreviation", "Caps — tables and signatures only", "BSIO"],
    ["Product names", "One word, lowercase-led", "bladeRAMP"],
  ];

  const numberPairs = [
    { write: "Up to 50%", avoid: "significant" },
    { write: "72hr window", avoid: "fast turnaround" },
    { write: "FedRAMP Rev. 5", avoid: "the latest standard" },
  ];

  const marketingQuotes = [
    "The only accredited FedRAMP 3PAO that performs exclusively advisory work. Zero assessments means zero conflicts.",
    "Not auditors who learned cloud; engineers who learned compliance. We don't hire technical writers or desk jockeys.",
    "Drop your coordinates below. Name, organization, what you're trying to accomplish. We try our best to respond to every inquiry, and we respond with substance. No templated replies, no handoff to a call center.",
  ];

  return (
    <div className="space-y-12">
      {/* Voice & person */}
      <section>
        <SectionEyebrow number="05" label="Voice & Person" />
        <div className="grid md:grid-cols-3 gap-4">
          {voiceCards.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: 20, fontWeight: 700, letterSpacing: "-0.015em", color: BRAND.ink.body, lineHeight: 1.25 }}>
                {c.title}
              </div>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: BRAND.ink.muted, marginTop: 12 }}>{c.body}</p>
            </Card>
          ))}
        </div>
        <div className="mt-4 rounded-xl p-5" 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> Specificity is the voice. “Up to 50%” beats “significant.” A claim the copy will not commit to is a claim the copy does not make.
          </div>
        </div>
      </section>

      {/* Casing & names */}
      <section>
        <SectionEyebrow number="06" label="Casing & Names" />
        <Card padding={0} style={{ overflow: "hidden" }}>
          <table className="w-full" style={{ borderCollapse: "collapse" }}>
            <thead>
              <tr style={{ background: BRAND.primary[500], color: "#FFFFFF" }}>
                {["Context", "Casing", "Example"].map((h) => (
                  <th key={h} style={{ padding: "12px 16px", textAlign: "left", fontSize: 12, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase" }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {casingRows.map((row, i) => (
                <tr key={row[0]} style={{ background: i % 2 === 0 ? BRAND.surface.card : BRAND.surface.callout }}>
                  <td style={{ padding: "12px 16px", fontSize: 14, color: BRAND.ink.body, fontWeight: 700 }}>{row[0]}</td>
                  <td style={{ padding: "12px 16px", fontSize: 14, color: BRAND.ink.muted }}>{row[1]}</td>
                  <td className="font-mono" style={{ padding: "12px 16px", fontSize: 13, color: BRAND.primary[700] }}>{row[2]}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>
        <p className="mt-3" style={{ fontSize: 12, color: BRAND.ink.subtle }}>
          The wordmark “BLADESTACK” is the only place the brand uses spaced all-caps. Product names are typeset as one word: bladeRAMP, bladestack.io.
        </p>
      </section>

      {/* Copy patterns */}
      <section>
        <SectionEyebrow number="07" label="Copy Patterns" />
        <p className="mb-4 max-w-2xl" style={{ fontSize: 14, color: BRAND.ink.muted, lineHeight: 1.6 }}>
          Six named rhetorical labels structure the brand's claims. Each opens a sentence in bold, then delivers the claim in plain register.
        </p>
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
          {COPY_PATTERNS.map((p) => (
            <div key={p.label} className="rounded-xl p-5" 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] }}>{p.label}</strong> {p.body}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Numbers & symbols */}
      <section>
        <SectionEyebrow number="08" label="Numbers & Symbols" />
        <div className="grid md:grid-cols-2 gap-4">
          <Card>
            <div style={{ fontSize: 16, fontWeight: 700, color: BRAND.ink.body, marginBottom: 4 }}>Numbers</div>
            <p style={{ fontSize: 13, color: BRAND.ink.muted, lineHeight: 1.6, marginBottom: 16 }}>
              Lean into specificity. Numerals replace words for any count of two or more in body copy.
            </p>
            <div className="space-y-3">
              {numberPairs.map((pair) => (
                <div key={pair.write} className="flex items-center gap-3 rounded-lg px-3 py-2.5" style={{ background: BRAND.surface.canvas, border: `1px solid ${BRAND.surface.border}` }}>
                  <span className="inline-flex items-center gap-2" style={{ color: BRAND.semantic.success }}>
                    <Check size={14} />
                  </span>
                  <span style={{ fontSize: 14, fontWeight: 700, color: BRAND.ink.body }}>{pair.write}</span>
                  <span className="inline-flex items-center gap-2 ml-auto" style={{ color: BRAND.ink.light }}>
                    <XIcon size={14} />
                  </span>
                  <span style={{ fontSize: 14, color: BRAND.ink.light, textDecoration: "line-through" }}>{pair.avoid}</span>
                </div>
              ))}
            </div>
          </Card>
          <Card>
            <div style={{ fontSize: 16, fontWeight: 700, color: BRAND.ink.body, marginBottom: 4 }}>Symbols</div>
            <p style={{ fontSize: 13, color: BRAND.ink.muted, lineHeight: 1.6, marginBottom: 16 }}>
              Emoji: never. No exceptions. Unicode symbols are limited to the middot in section eyebrows and the multiplier in stat blocks. Everything else is a Lucide icon.
            </p>
            <div className="grid grid-cols-2 gap-3">
              <div className="rounded-lg p-4" style={{ background: BRAND.surface.canvas, border: `1px solid ${BRAND.surface.border}` }}>
                <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: "0.18em", color: BRAND.primary[500], textTransform: "uppercase" }}>
                  01 · PRINCIPLES
                </div>
                <div className="font-mono mt-3" style={{ fontSize: 11, color: BRAND.ink.subtle }}>middot · eyebrows</div>
              </div>
              <div className="rounded-lg p-4" style={{ background: BRAND.surface.canvas, border: `1px solid ${BRAND.surface.border}` }}>
                <div style={{ fontSize: 32, fontWeight: 700, letterSpacing: "-0.04em", color: BRAND.primary[500], lineHeight: 1 }}>3×</div>
                <div className="font-mono mt-2" style={{ fontSize: 11, color: BRAND.ink.subtle }}>multiplier × stat blocks</div>
              </div>
            </div>
          </Card>
        </div>
      </section>

      {/* Cultural identity */}
      <section>
        <SectionEyebrow number="09" label="Cultural Identity" />
        <div
          className="relative overflow-hidden rounded-2xl"
          style={{
            background: `radial-gradient(70% 60% at 80% 30%, ${BRAND.dark.navyAccent} 0%, ${BRAND.dark.navy} 55%, ${BRAND.dark.navyDeep} 100%)`,
            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: "40px 40px",
            opacity: 0.18,
          }} />
          <div className="relative grid lg:grid-cols-[1.1fr_0.9fr] gap-8 p-6 md:p-10">
            <div>
              <div className="font-mono" style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.2em", color: BRAND.primary[300] }}>
                WAY OF THE BLADE · MARKETING REGISTER ONLY
              </div>
              <h2 style={{ fontSize: 32, fontWeight: 700, letterSpacing: "-0.02em", color: "#FFFFFF", lineHeight: 1.15, marginTop: 16 }}>
                The samurai lives in copy, never in pixels.
              </h2>
              <div className="space-y-3 mt-6">
                {marketingQuotes.map((q) => (
                  <div key={q} className="rounded-lg p-4" style={{ background: "rgba(255,255,255,0.06)", borderLeft: `4px solid ${BRAND.primary[400]}` }}>
                    <p style={{ fontSize: 14, color: "#FFFFFF", lineHeight: 1.6 }}>“{q}”</p>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <div className="rounded-lg p-5" style={{ background: BRAND.dark.slate, border: `1px solid ${BRAND.dark.navyAccent}` }}>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", color: BRAND.primary[300], marginBottom: 12 }}>
                  WHERE IT LIVES
                </div>
                <p style={{ fontSize: 13.5, color: "#FFFFFF", lineHeight: 1.6 }}>
                  Marketing copy (“our cyber-samurais embed with your engineering teams”), internal titles (Chief Technology Samurai, Chief Operations Ronin), and product names.
                </p>
                <div className="flex flex-wrap gap-2 mt-4">
                  {["bladeRAMP", "HANZO", "GENJI"].map((name) => (
                    <span key={name} className="font-mono rounded-md px-2 py-1" style={{ color: BRAND.primary[300], background: "rgba(67,83,255,0.12)", border: `1px solid ${BRAND.dark.navyAccent}`, fontSize: 11, fontWeight: 700 }}>
                      {name}
                    </span>
                  ))}
                </div>
              </div>
              <div className="rounded-lg p-5 mt-3" style={{ background: BRAND.dark.slate, border: `1px solid ${BRAND.dark.navyAccent}` }}>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", color: BRAND.dark.slateMuted, marginBottom: 12 }}>
                  WHERE IT DOES NOT
                </div>
                <p style={{ fontSize: 13.5, color: BRAND.dark.slateMuted, lineHeight: 1.6 }}>
                  Advisory deliverables, dashboards, and formal proposals use the engineering register exclusively. No samurai language, no katana metaphors.
                </p>
              </div>
            </div>
          </div>
        </div>
        <div className="mt-4 rounded-xl p-5" 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] }}>Design rule.</strong> Samurai is voice, not pixels. No katana imagery in the visual layer — no swords, no cherry blossoms.
          </div>
        </div>
      </section>
    </div>
  );
};

window.VoiceTab = VoiceTab;