/* === KitBlock ===
 * Field-kit teaser. Asymmetric two-column, neon amber accent (the moon),
 * a "kit contents" tagged list, a single secondary CTA.
 */

const KitBlock = () => (
  <section id="kits" style={{
    padding: "120px 32px",
    background: "linear-gradient(180deg, var(--obsidian-void) 0%, #0B1530 100%)",
    borderTop: "1px solid var(--obsidian-fog)",
    borderBottom: "1px solid var(--obsidian-fog)",
    position: "relative", overflow: "hidden",
  }}>
    {/* moon glow corner */}
    <div style={{
      position: "absolute", top: -160, right: -160, width: 480, height: 480,
      borderRadius: "50%",
      background: "radial-gradient(circle, rgba(244,185,66,0.20), transparent 60%)",
      pointerEvents: "none",
    }}/>
    <div className="ol-kit-grid" style={{ maxWidth: 1280, margin: "0 auto",
                  display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center",
                  position: "relative" }}>
      <div>
        <Eyebrow color="var(--neon-amber)">// Section 02 · Field Kits //</Eyebrow>
        <h2 className="ol-block-title" style={{
          fontFamily: "var(--font-display)", fontSize: 64, lineHeight: 0.95,
          textTransform: "uppercase", margin: "12px 0 20px",
          color: "var(--fg-1)",
        }}>
          A kit you can <span style={{ color: "var(--neon-amber)", textShadow: "var(--glow-amber)" }}>actually carry</span>
        </h2>
        <p style={{
          fontFamily: "var(--font-body)", fontSize: 17, lineHeight: 1.55,
          color: "var(--fg-2)", maxWidth: 520, margin: "0 0 28px",
        }}>
          Curated by working operators. Included with specific courses, or built out separately as a gear refresher.
        </p>
        <div style={{ display: "flex", gap: 14, alignItems: "center" }}>
          <Button variant="secondary" onClick={() => { window.location.href = "kits.html"; }}>View kits →</Button>
          <span style={{
            fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-3)",
            letterSpacing: "0.18em", textTransform: "uppercase"
          }}>Get quote</span>
        </div>
      </div>

      <div style={{
        position: "relative",
        background: "rgba(7,4,14,0.7)",
        border: "1px solid var(--obsidian-fog)",
        padding: 28,
      }}>
        <CornerTicks corners="tl tr bl br" color="var(--neon-amber)" size={18}/>
        <div style={{
          fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--fg-3)",
          letterSpacing: "0.28em", textTransform: "uppercase", marginBottom: 16
        }}>// OL-K1.7 · DOWN RANGE KIT MANIFEST //</div>
        <div style={{
          fontFamily: "var(--font-mono)", fontSize: 9.5, color: "var(--fg-3)",
          letterSpacing: "0.16em", textTransform: "uppercase", marginBottom: 16, marginTop: -8,
        }}>// In partnership with Cossack Consulting //</div>

        {[
          { code: "FP-01", name: "Faraday Phone Pouch", spec: "Mission Darkness · cell/WiFi/BT/GPS" },
          { code: "GP-02", name: "GrapheneOS Pixel", spec: "Pre-flashed · Ad-ID stripped" },
          { code: "YK-03", name: "YubiKey 5 NFC", spec: "Hardware MFA · FIPS-validated" },
          { code: "UB-04", name: "USB Data Blocker (×2)", spec: "Power-only pass-through" },
          { code: "TR-05", name: "Travel Router", spec: "GL.iNet Beryl · VPN-bonded" },
          { code: "RF-06", name: "Handheld RF Detector", spec: "Pre-meeting room sweep" },
        ].map((item) => (
          <div key={item.code} style={{
            display: "grid", gridTemplateColumns: "60px 1fr auto", gap: 16,
            padding: "12px 0", borderBottom: "1px dashed var(--obsidian-fog)",
            alignItems: "center",
          }}>
            <span style={{
              fontFamily: "var(--font-mono)", fontSize: 10,
              color: "var(--neon-amber)", letterSpacing: "0.16em",
            }}>{item.code}</span>
            <span style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--fg-1)" }}>{item.name}</span>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--fg-3)", letterSpacing: "0.1em" }}>{item.spec}</span>
          </div>
        ))}

        {/* Truncation marker — signals the manifest goes on past what's shown. */}
        <div style={{
          fontFamily: "var(--font-mono)", fontSize: 10,
          color: "var(--fg-3)", letterSpacing: "0.28em",
          textTransform: "uppercase", textAlign: "center",
          padding: "16px 0 4px",
        }}>
          // +14 more · contact for full manifest //
        </div>
      </div>
    </div>

    <div style={{ maxWidth: 1280, margin: "72px auto 0", position: "relative" }}>
      <div style={{
        fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--fg-3)",
        letterSpacing: "0.28em", textTransform: "uppercase", marginBottom: 20,
      }}>// Buy outright · no training requested //</div>
      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
        gap: 20,
      }}>
        {STANDALONE_KITS.map((k) => <KitCard key={k.title} {...k} />)}
      </div>
    </div>
  </section>
);

const STANDALONE_KITS = [
  {
    tag: "SC-TS",
    title: "Sovereign Citizen — Tech Stack",
    summary: "The self-hosted freedom-tech stack, source and configs only. No batteries included — bring your own hardware and stand it up yourself. Included with Pipe Hitter Tools.",
    meta: "Self-hosted · BYO hardware",
    partner: "pht",
    cta: "Learn more →",
    href: "sovereign-citizen-tech-stack.html",
  },
  {
    tag: "SC-HW",
    title: "Sovereign Citizen — Hardware",
    summary: "The same stack, pre-installed on a mini computer. Unbox, power on, connect. Everything configured before it ships.",
    meta: "Pre-configured mini PC",
    partner: "pht",
  },
  {
    tag: "TT-01",
    title: "Technical Travel",
    summary: "The Technical Travel kit on its own — hostile-network hardware and sterilization gear, no course attached.",
    meta: "Standalone · no training required",
    partner: "cossack",
  },
];

const PARTNER_LABEL = {
  cossack: "// In partnership with Cossack Consulting //",
  pht: "// Powered by Pipe Hitter Tools //",
};

const KitCard = ({ tag, title, summary, meta, partner, cta = "Buy →", href }) => (
  <div style={{
    position: "relative",
    background: "rgba(7,4,14,0.7)",
    border: "1px solid var(--obsidian-fog)",
    padding: "22px 22px 20px",
    display: "flex", flexDirection: "column", gap: 12,
  }}>
    <CornerTicks corners="tl br" color="var(--neon-amber)" size={14}/>
    <Eyebrow color="var(--neon-amber)">// {tag} //</Eyebrow>
    <h4 style={{
      fontFamily: "var(--font-display)", fontSize: 24, lineHeight: 1.05,
      textTransform: "uppercase", margin: 0, color: "var(--fg-1)",
    }}>{title}</h4>
    {partner && (
      <div style={{
        fontFamily: "var(--font-mono)", fontSize: 9.5,
        color: partner === "pht" ? "var(--neon-amber)" : "var(--fg-3)",
        letterSpacing: "0.16em", textTransform: "uppercase", marginTop: -8,
      }}>{PARTNER_LABEL[partner]}</div>
    )}
    <p style={{
      fontFamily: "var(--font-body)", fontSize: 13.5, lineHeight: 1.5,
      color: "var(--fg-2)", margin: 0, flex: 1,
    }}>{summary}</p>
    <div style={{
      fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--fg-3)",
      letterSpacing: "0.16em", textTransform: "uppercase",
      borderTop: "1px dashed var(--obsidian-fog)", paddingTop: 12,
    }}>{meta}</div>
    <Button variant="secondary" onClick={href ? () => { window.location.href = href; } : undefined}>{cta}</Button>
  </div>
);

Object.assign(window, { KitBlock });