// Cerberus Technical Group — single bundled JSX (Babel parallel-loader workaround)
// ════════════════════════════════════════════════════════════════════════════

const { useState, useEffect, useRef } = React;

const ASSETS = {
  icon: (typeof window !== "undefined" && window.__resources?.ctgIcon)  || "assets/ctg-icon.png",
  logo: (typeof window !== "undefined" && window.__resources?.ctgLogo)  || "assets/ctg-logo-full.png",
  jay:  (typeof window !== "undefined" && window.__resources?.teamJay)  || "assets/team-jay.png",
  ryne: (typeof window !== "undefined" && window.__resources?.teamRyne) || "assets/team-ryne.png",
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "animateOps": true,
  "accent": "red",
  "density": "spacious"
}/*EDITMODE-END*/;

// ────────────────────────────────────────────────────────────────────────
// OpsDiagram — animated operations centerpiece. Three domains converge.
// ────────────────────────────────────────────────────────────────────────

// ─────────────────────────────────────────────────────────────────
// OpsDiagram — Cerberus emblem with radar sweep + three-pillar readout.
// The literal brand mark is the centerpiece; three pillars fan out below
// in a coat-of-arms / force-structure feel rather than an abstract network.
// ─────────────────────────────────────────────────────────────────

function OpsDiagram({ animate = true, compact = false }) {
  const W = 1000, H = 800;

  // Three pillar columns, mapped to the three heads of the icon.
  const PILLARS = [
    {
      key: "CYBER",
      sub: "Network · Software · SecOps",
      lines: ["Zero-trust deployments", "Penetration testing", "Threat hunting · IR"],
      color: "var(--steel-2)",
      x: 200,
    },
    {
      key: "TACTICAL",
      sub: "Comms · Hardware · Field",
      lines: ["Resilient mesh comms", "Hardware integration", "Field-grade ops"],
      color: "var(--gold)",
      x: 500,
    },
    {
      key: "INTEL",
      sub: "AI · ISR · Analysis",
      lines: ["LLM evaluation", "Edge inference", "ISR augmentation"],
      color: "var(--brand-2)",
      x: 800,
    },
  ];

  // Radar sweep tick
  const [tick, setTick] = useState(0);
  useEffect(() => {
    if (!animate) return;
    let raf, last = performance.now();
    const step = (now) => {
      setTick(t => t + (now - last) / 1000);
      last = now;
      raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [animate]);

  // Sweep rotates one full revolution every 14s (slow, contemplative).
  const sweepDeg = (tick * (360 / 14)) % 360;

  // Center of the emblem
  const cx = 500, cy = 290;
  const r1 = 220, r2 = 170, r3 = 120, r4 = 70;

  return (
    <div className="ops-frame">
      <div className="corner-tl"></div><div className="corner-tr"></div>
      <div className="corner-bl"></div><div className="corner-br"></div>

      <div className="head-meta">
        <span>EST · <b>2019</b></span>
        <span>·</span>
        <span>CAGE · <b>9PQX3</b></span>
        <span>·</span>
        <span className="indicator"><span className="led"></span>OPERATIONAL</span>
      </div>

      <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
        <defs>
          {/* Radar sweep wedge — strong leading edge, fading trail */}
          <linearGradient id="sweepGrad" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%"  stopColor="var(--brand)" stopOpacity="0" />
            <stop offset="80%" stopColor="var(--brand)" stopOpacity="0.15" />
            <stop offset="100%" stopColor="var(--brand)" stopOpacity="0.55" />
          </linearGradient>
          <radialGradient id="emblemGlow" cx="50%" cy="50%" r="50%">
            <stop offset="0%"  stopColor="rgba(230,0,35,0.16)" />
            <stop offset="70%" stopColor="rgba(230,0,35,0.02)" />
            <stop offset="100%" stopColor="rgba(230,0,35,0)" />
          </radialGradient>
          <mask id="rangeMask">
            <circle cx={cx} cy={cy} r={r1} fill="white" />
            <circle cx={cx} cy={cy} r={r4} fill="black" />
          </mask>
        </defs>

        {/* Background grid */}
        <g opacity="0.5">
          {Array.from({length: 16}).map((_, i) => (
            <line key={"v"+i} x1={i*62.5} y1="0" x2={i*62.5} y2={H}
                  stroke="rgba(255,255,255,0.025)" />
          ))}
          {Array.from({length: 14}).map((_, i) => (
            <line key={"h"+i} x1="0" y1={i*60} x2={W} y2={i*60}
                  stroke="rgba(255,255,255,0.025)" />
          ))}
        </g>

        {/* Emblem glow halo */}
        <circle cx={cx} cy={cy} r={r1 + 30} fill="url(#emblemGlow)" />

        {/* Concentric range rings */}
        {[r1, r2, r3, r4].map((r, i) => (
          <circle key={r} cx={cx} cy={cy} r={r}
                  fill="none"
                  stroke={i === 0 ? "var(--brand)" : "rgba(255,255,255,0.10)"}
                  strokeOpacity={i === 0 ? 0.4 : 0.85}
                  strokeWidth={i === 0 ? 1 : 0.75}
                  strokeDasharray={i === 1 ? "2 6" : "0"} />
        ))}

        {/* Cardinal range marks */}
        {[
          {x: cx, y: cy - r1 - 8, l: "N"},
          {x: cx + r1 + 8, y: cy, l: "E"},
          {x: cx, y: cy + r1 + 14, l: "S"},
          {x: cx - r1 - 8, y: cy, l: "W"},
        ].map((m, i) => (
          <text key={i} x={m.x} y={m.y} textAnchor="middle"
                fontFamily="var(--f-mono)" fontSize="9"
                fill="var(--subtle)" letterSpacing="0.12em">{m.l}</text>
        ))}

        {/* Bearing tick marks every 30° on the outermost ring */}
        {Array.from({length: 12}).map((_, i) => {
          const a = (i * 30) * Math.PI / 180;
          const x1 = cx + Math.cos(a) * (r1 - 4);
          const y1 = cy + Math.sin(a) * (r1 - 4);
          const x2 = cx + Math.cos(a) * (r1 + 4);
          const y2 = cy + Math.sin(a) * (r1 + 4);
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2}
                       stroke="var(--subtle)" strokeWidth="1" opacity="0.55" />;
        })}

        {/* Radar sweep wedge — masked to the ring band */}
        <g transform={`rotate(${sweepDeg} ${cx} ${cy})`} mask="url(#rangeMask)">
          <path d={`M ${cx} ${cy} L ${cx + r1 + 4} ${cy - 60} A ${r1 + 4} ${r1 + 4} 0 0 1 ${cx + r1 + 4} ${cy + 60} Z`}
                fill="url(#sweepGrad)" />
        </g>

        {/* Emblem: Cerberus icon placed as overlay HTML <img> below */}

        {/* Three pillar columns — laid out at the bottom of the frame */}
        {PILLARS.map((p, i) => (
          <g key={p.key} transform={`translate(${p.x}, 600)`}>
            {/* Vertical accent bar */}
            <line x1="0" y1="-30" x2="0" y2="120"
                  stroke={p.color} strokeOpacity="0.4" strokeWidth="0.8" />
            <rect x="-1.5" y="-30" width="3" height="14" fill={p.color} />

            {/* Pillar key */}
            <text textAnchor="middle" y="-6" fontFamily="var(--f-display)"
                  fontWeight="700" fontSize="20" fill={p.color}
                  letterSpacing="0.16em">{p.key}</text>

            {/* Pillar sub */}
            <text textAnchor="middle" y="15" fontFamily="var(--f-mono)"
                  fontSize="10" fill="var(--muted)"
                  letterSpacing="0.08em">{p.sub}</text>

            {/* Capability lines */}
            {p.lines.map((l, j) => (
              <text key={j} textAnchor="middle" y={42 + j * 18}
                    fontFamily="var(--f-mono)" fontSize="11"
                    fill="var(--fg-2)" letterSpacing="0.02em">{l}</text>
            ))}
          </g>
        ))}

        {/* "Posture: mission ready" stamp at top center */}
        <g transform={`translate(${cx}, 92)`}>
          <rect x="-110" y="-13" width="220" height="26" rx="3"
                fill="rgba(7,9,14,0.5)" stroke="var(--border)" />
          <text textAnchor="middle" y="4" fontFamily="var(--f-mono)"
                fontSize="10" fontWeight="600" letterSpacing="0.24em"
                fill="var(--fg-2)">POSTURE · MISSION-READY</text>
        </g>
      </svg>

      {/* The Cerberus icon as an HTML overlay — sized + positioned to sit
          centered inside the radar reticle. Pointer-events off so the SVG
          stays interactive (if anything below it ever needs to be). */}
      <img src={ASSETS.icon} alt=""
           style={{
             position: "absolute",
             top: "36%", left: "50%",
             transform: "translate(-50%, -50%)",
             width: "28%", height: "auto",
             maxWidth: 280,
             pointerEvents: "none",
             filter: "drop-shadow(0 0 32px rgba(230, 0, 35, 0.28))",
           }} />

      <div className="footer-bar">
        <span>FIG · OPERATIONAL POSTURE</span>
        <span>3 PILLARS · 1 PACK</span>
        <span>{animate ? "ACTIVE" : "STATIC"}</span>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────
// Header
// ────────────────────────────────────────────────────────────────────────

function StatusBar() {
  return (
    <div className="status-bar">
      <div className="inner">
        <div style={{display: "flex", gap: 20}}>
          <span>EST · <b>2019</b></span>
          <span>SAM · <b>REGISTERED</b></span>
          <span>CAGE · <b>9PQX3</b></span>
        </div>
        <div style={{display: "flex", gap: 20}}>
          <span className="live">SYSTEMS NOMINAL</span>
          <span>r1 · 16 MAY 2026</span>
        </div>
      </div>
    </div>
  );
}

function Header() {
  const [menuOpen, setMenuOpen] = useState(false);

  // Lock body scroll while the mobile drawer is open
  useEffect(() => {
    if (!menuOpen) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.body.style.overflow = prev; };
  }, [menuOpen]);

  const links = [
    ["#capabilities", "Capabilities"],
    ["#operations",   "Operations"],
    ["#products",     "Products"],
    ["#team",         "Leadership"],
    ["#mission",      "Mission"],
  ];

  return (
    <>
      <header className="site-header">
        <div className="inner">
          <a href="#top" className="brand" onClick={() => setMenuOpen(false)}>
            <img src={ASSETS.icon} alt="" />
            <div>
              <div className="name">Cerberus <span>Technical Group</span></div>
            </div>
          </a>
          <nav>
            {links.map(([h, l]) => <a key={h} href={h}>{l}</a>)}
          </nav>
          <div className="header-cta">
            <span className="indicator"><span className="led"></span>Available</span>
            <a href="#contact" className="btn primary">Engage<span className="arrow">→</span></a>
          </div>
          <button
            type="button"
            className={"hamburger" + (menuOpen ? " is-open" : "")}
            aria-label={menuOpen ? "Close menu" : "Open menu"}
            aria-expanded={menuOpen}
            aria-controls="mobile-nav"
            onClick={() => setMenuOpen(o => !o)}
          >
            <span></span><span></span><span></span>
          </button>
        </div>
      </header>

      {/* Rendered OUTSIDE <header> because the header has backdrop-filter,
          which makes it the containing block for position:fixed children —
          would otherwise trap the drawer inside the header's box. */}
      <div
        id="mobile-nav"
        className={"mobile-nav" + (menuOpen ? " is-open" : "")}
        role="dialog"
        aria-modal="true"
        aria-hidden={!menuOpen}
        onClick={(e) => { if (e.target === e.currentTarget) setMenuOpen(false); }}
      >
        <nav>
          {links.map(([h, l]) => (
            <a key={h} href={h} onClick={() => setMenuOpen(false)}>{l}</a>
          ))}
          <a href="#contact" className="btn primary mobile-nav-cta"
             onClick={() => setMenuOpen(false)}>
            Engage<span className="arrow">→</span>
          </a>
          <div className="mobile-nav-meta">
            <span className="indicator"><span className="led"></span>Available</span>
            <a href="mailto:info@cerberustechgrp.com">info@cerberustechgrp.com</a>
            <a href="tel:+17276196117">727 · 619 · 6117</a>
          </div>
        </nav>
      </div>
    </>
  );
}

// ────────────────────────────────────────────────────────────────────────
// Hero
// ────────────────────────────────────────────────────────────────────────

function Hero({ animate }) {
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="top-grid">
          <div>
            <div className="eyebrow">
              <span className="ord">00</span>One Team · One Fight · Never Quit
            </div>
            <h1 style={{marginTop: 24}}>
              Real-world expertise.<br/>
              <span className="red">Mission-grade outcomes.</span>
            </h1>
            <p className="lede" style={{marginTop: 28}}>
              Cerberus Technical Group is the industry's problem solver — a defense and commercial
              technical group built on hands-on experience across cyber, tactical communications,
              software, hardware integration, AI, and ISR.
              No task too small. No problem too big.
            </p>

            <div style={{display: "flex", flexWrap: "wrap", gap: 10, marginTop: 32}}>
              <span className="pill brand">Federal · Commercial</span>
              <span className="pill steel">CMMC L2 · NIST 800-171</span>
              <span className="pill gold">SAM Registered · CAGE 9PQX3</span>
            </div>

            <div style={{display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap"}}>
              <a href="#contact" className="btn primary">Request a capability brief<span className="arrow">→</span></a>
              <a href="#capabilities" className="btn ghost">Explore capabilities</a>
            </div>

            <div className="meta-bar">
              <div className="meta"><span className="l">Operational domains</span><span className="v">3</span></div>
              <div className="meta"><span className="l">Capability areas</span><span className="v">9</span></div>
              <div className="meta"><span className="l">Mission posture</span><span className="v">Federal + Commercial</span></div>
              <div className="meta"><span className="l">Headquartered</span><span className="v">CONUS</span></div>
            </div>
          </div>

          <div>
            <OpsDiagram animate={animate} />
            <p className="mono" style={{
              textAlign: "center", marginTop: 14,
              color: "var(--subtle)", fontSize: 11, letterSpacing: "0.14em",
              textTransform: "uppercase",
            }}>
              FIG · OPERATIONAL POSTURE · {animate ? "ACTIVE" : "STATIC"}
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────
// Values strip
// ────────────────────────────────────────────────────────────────────────

function ValuesStrip() {
  const items = [
    { n: "01", k: "Do the right thing", v: "Transparency and honesty in every engagement. Trust is the contract." },
    { n: "02", k: "One Team · One Fight", v: "Problem-solvers who carry the mission alongside the customer." },
    { n: "03", k: "Never quit", v: "No task too small. No problem too big. We close it out." },
    { n: "04", k: "People at the core", v: "Invest in our team and our customers. The human element first." },
  ];
  return (
    <section className="section tight">
      <div className="container">
        <div className="grid g-4">
          {items.map(i => (
            <div key={i.n} style={{borderLeft: "1px solid var(--border)", paddingLeft: 22}}>
              <div className="mono" style={{
                color: "var(--brand-2)", fontSize: 12, letterSpacing: "0.18em",
                marginBottom: 12, textTransform: "uppercase",
              }}>{i.n}</div>
              <div style={{
                fontFamily: "var(--f-display)", fontSize: 18, fontWeight: 600,
                lineHeight: 1.25, marginBottom: 10, letterSpacing: "-0.01em",
              }}>{i.k}</div>
              <p className="muted" style={{fontSize: 14, lineHeight: 1.55, margin: 0}}>{i.v}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────
// Section head
// ────────────────────────────────────────────────────────────────────────

function SectionHead({ ord, eyebrow, title, lede, right }) {
  return (
    <div className="section-head">
      <div className="head-l">
        <div className="eyebrow"><span className="ord">{ord}</span>{eyebrow}</div>
        <h2 style={{marginTop: 14}}>{title}</h2>
        {lede && <p className="lede" style={{marginTop: 18}}>{lede}</p>}
      </div>
      {right && <div className="head-r">{right}</div>}
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────
// Capabilities — 6 cards
// ────────────────────────────────────────────────────────────────────────

const CAPABILITIES = [
  {
    n: "01", domain: "CYBER",
    title: "Cyber & Network Security",
    body: "End-to-end network defense — architecture review, zero-trust deployments, penetration testing, and 24/7 monitoring. We secure what the mission depends on.",
    tags: ["Zero-trust", "Network defense", "Pen test", "Threat hunting", "Forensics"],
  },
  {
    n: "02", domain: "DEFENSE",
    title: "Defense & DoD Contracting",
    body: "Prime and subcontract delivery across DoD programs. Compliance-first: CMMC L2, NIST 800-171, supply-chain attestation, and FOCI safeguards built in.",
    tags: ["CMMC L2", "NIST 800-171", "ITAR-aware", "Prime / Sub"],
  },
  {
    n: "03", domain: "TACTICAL",
    title: "Tactical Communications",
    body: "Resilient field comms — mesh VPN overlays, SATCOM integration, RF site engineering, and ruggedized infrastructure for austere environments.",
    tags: ["Mesh VPN", "SATCOM", "RF site eng.", "Field-ready"],
  },
  {
    n: "04", domain: "SOFTWARE",
    title: "Software Engineering",
    body: "Production-grade software for mission systems — Go, Rust, Swift, embedded C. CI/CD pipelines, supply-chain attestation, SBOM by default.",
    tags: ["Go · Rust · Swift", "Embedded", "DevSecOps", "SBOM"],
  },
  {
    n: "05", domain: "HARDWARE",
    title: "Hardware & Electronics Integration",
    body: "Custom hardware platforms — board-level integration, EMC compliance, hardened enclosures, sensor fusion. From prototype to fielded asset.",
    tags: ["Board integration", "EMC", "Ruggedization", "Sensor fusion"],
  },
  {
    n: "06", domain: "INTEL · AI",
    title: "AI Consulting & ISR",
    body: "Applied AI/ML for ISR and analyst augmentation — model evaluation, deployment, edge inference, and red-team validation of AI pipelines.",
    tags: ["LLM eval", "Edge inference", "ISR support", "Red team AI"],
  },
];

function CapabilitiesGrid() {
  return (
    <section className="section" id="capabilities">
      <div className="container">
        <SectionHead
          ord="01"
          eyebrow="Capabilities · Six disciplines · One pack"
          title="The work is technical. The bearing is operational."
          lede="Six capability areas built on real-world experience. Each operates independently and converges with the others — the same way the three heads of Cerberus guard a single gate."
        />

        <div className="grid g-3">
          {CAPABILITIES.map(c => (
            <div key={c.n} className="cap-card">
              <div style={{display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14}}>
                <div className="num">{c.n} · {c.domain}</div>
                <span className="pill plain mono" style={{fontSize: 10}}>{c.domain}</span>
              </div>
              <h3>{c.title}</h3>
              <p>{c.body}</p>
              <div className="tags">
                {c.tags.map((t, i) => <span key={i} className="tag">{t}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────
// Operations — full-width animated diagram, with capability legend
// ────────────────────────────────────────────────────────────────────────

function OperationsSection({ animate }) {
  return (
    <section className="section dense" id="operations">
      <div className="container">
        <SectionHead
          ord="02"
          eyebrow="Operations · Posture & pillars"
          title="Three pillars. One pack. Mission-ready."
          lede="Cyber, Tactical, and Intel: three operational pillars under one roof. The three-headed mark is not decoration — it is the architecture. Each pillar runs independently and reinforces the others."
        />

        <div style={{maxWidth: 900, margin: "0 auto"}}>
          <OpsDiagram animate={animate} />
        </div>

        <div className="grid g-3" style={{marginTop: 56}}>
          <div className="metric">
            <span className="label">Cyber domain</span>
            <span className="num">SOC<span className="u">L2</span></span>
            <p className="sub">Network defense, software supply chain attestation, threat-hunt operations and incident response.</p>
          </div>
          <div className="metric">
            <span className="label">Tactical domain</span>
            <span className="num">FIELD<span className="u">READY</span></span>
            <p className="sub">Comms, hardware integration and mesh overlays engineered for austere environments and rapid stand-up.</p>
          </div>
          <div className="metric">
            <span className="label">Intel domain</span>
            <span className="num">AI<span className="u">/ISR</span></span>
            <p className="sub">Applied AI/ML consulting for ISR augmentation, model evaluation, and edge inference workloads.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────
// Mission, Values, Vision — quote/values band using their copy
// ────────────────────────────────────────────────────────────────────────

function MissionBand() {
  return (
    <section className="section" id="mission">
      <div className="container">
        <SectionHead
          ord="03"
          eyebrow="Mission · Values · Vision"
          title="Built on a “Never Quit” mentality — for our people, our customers, our country."
        />

        <div className="quote-block" style={{marginBottom: 32}}>
          <div className="mono" style={{
            color: "var(--brand-2)", fontSize: 11, letterSpacing: "0.22em",
            textTransform: "uppercase", marginBottom: 18,
          }}>Mission</div>
          <p className="q">
            Cerberus Technical Group is committed to doing the right thing through a “Never Quit” and
            “One Team, One Fight” mentality. We strive to be the industry's problem-solvers — filling
            the gap where no task is too small and no problem is too big.
          </p>
          <p className="fg-muted" style={{
            marginTop: 22, maxWidth: 720, fontSize: 16, lineHeight: 1.7,
          }}>
            Consistently strengthening our core foundation of employees and knowledge base, we
            are becoming better for you, for our families, and for the country we call home. Through
            our devotion to transparency and honesty, it is our utmost commitment to utilize all
            resources and knowledge to do our best for you.
          </p>
        </div>

        <div className="grid g-2">
          <div className="card elev" style={{padding: 36}}>
            <div className="mono" style={{
              color: "var(--brand-2)", fontSize: 11, letterSpacing: "0.22em",
              textTransform: "uppercase", marginBottom: 14,
            }}>Values</div>
            <h3 style={{marginBottom: 14}}>People at the core.</h3>
            <p className="fg-muted" style={{fontSize: 15, lineHeight: 1.65}}>
              Our duty is to prioritize the well-being and growth of our employees, customers,
              and communities above all else. By investing in the personal and professional
              development of our team — and delivering exceptional value to our customers —
              we create positive impact that goes beyond monetary gains. Ethical practices,
              social responsibility, and a people-centric approach guide every decision.
            </p>
          </div>
          <div className="card elev" style={{padding: 36}}>
            <div className="mono" style={{
              color: "var(--brand-2)", fontSize: 11, letterSpacing: "0.22em",
              textTransform: "uppercase", marginBottom: 14,
            }}>Vision</div>
            <h3 style={{marginBottom: 14}}>Vanguard of industry — through real-world expertise.</h3>
            <p className="fg-muted" style={{fontSize: 15, lineHeight: 1.65}}>
              We aspire to pioneer innovative solutions and set new benchmarks through our
              understanding of practical applications. By continuously honing skills and insights
              gained from hands-on experiences, we aim to revolutionize the landscape of our
              industry — solving complex challenges and inspiring a new standard of achievement.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────
// Products — WH-Tactical featured + room for others
// ────────────────────────────────────────────────────────────────────────

function ProductsSection() {
  return (
    <section className="section" id="products">
      <div className="container">
        <SectionHead
          ord="04"
          eyebrow="Products · Shipped from the bench"
          title="Tools we built because the mission needed them."
          lede="Our products start as customer problems. The same engineers who write your statement of work also write the code. Below: what's released, what's in development, and what's classified."
        />

        {/* Two flagship products */}
        <div className="grid g-2">
          {/* Featured: WH-Tactical */}
          <div className="card pd-flag" style={{padding: 0, overflow: "hidden", position: "relative"}}>
            <div style={{
              position: "relative",
              padding: "32px 32px 24px",
              borderBottom: "1px solid var(--border)",
              background: "linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%)",
              minHeight: 340,
            }}>
              <div style={{display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 24}}>
                <span className="pill brand">Released · Pre-alpha</span>
                <span className="mono muted" style={{fontSize: 10, letterSpacing: "0.16em"}}>PROD · 01</span>
              </div>

              {/* Mini topology illustration */}
              <svg viewBox="0 0 600 200" width="100%" style={{maxHeight: 200}}>
                <defs>
                  <linearGradient id="prodBridge" x1="0" x2="1">
                    <stop offset="0%" stopColor="var(--steel-2)" />
                    <stop offset="50%" stopColor="var(--gold)" />
                    <stop offset="100%" stopColor="var(--brand-2)" />
                  </linearGradient>
                </defs>
                <path d="M 80 100 Q 200 60 300 100" stroke="var(--steel-2)" strokeWidth="1.5"
                      fill="none" strokeDasharray="2 8" style={{animation: "flow 2.4s linear infinite"}} />
                <path d="M 300 100 Q 420 140 520 100" stroke="url(#prodBridge)" strokeWidth="1.5"
                      fill="none" strokeDasharray="2 8" style={{animation: "flow 2.4s linear infinite"}} />
                <path d="M 80 100 Q 300 180 520 100" stroke="var(--brand-2)" strokeOpacity="0.4"
                      strokeWidth="1.5" fill="none" />
                <circle cx="80" cy="100" r="18" fill="var(--surface)" stroke="var(--steel-2)" strokeWidth="2" />
                <text x="80" y="105" textAnchor="middle" fontFamily="var(--f-display)" fontWeight="600" fontSize="13" fill="var(--steel-2)">WG</text>
                <text x="80" y="138" textAnchor="middle" fontFamily="var(--f-mono)" fontSize="10" fill="var(--muted)">peer</text>
                <rect x="270" y="80" width="60" height="40" rx="3" fill="var(--surface)" stroke="var(--gold)" strokeWidth="1.5" />
                <rect x="270" y="80" width="60" height="3" fill="var(--gold)" />
                <text x="300" y="105" textAnchor="middle" fontFamily="var(--f-display)" fontWeight="600" fontSize="11" fill="var(--fg)">RELAY</text>
                <circle cx="520" cy="100" r="18" fill="var(--surface)" stroke="var(--brand-2)" strokeWidth="2" />
                <text x="520" y="105" textAnchor="middle" fontFamily="var(--f-display)" fontWeight="600" fontSize="13" fill="var(--brand-2)">OV</text>
                <text x="520" y="138" textAnchor="middle" fontFamily="var(--f-mono)" fontSize="10" fill="var(--muted)">peer</text>
              </svg>

              <h3 style={{marginTop: 24, marginBottom: 4, fontSize: 28}}>WH-Tactical</h3>
              <div className="mono" style={{
                color: "var(--brand-2)", fontSize: 11, letterSpacing: "0.22em",
                textTransform: "uppercase", marginBottom: 12,
              }}>Proprietary network solution</div>
              <p className="fg-muted" style={{fontSize: 15, lineHeight: 1.6}}>
                Cerberus's proprietary self-hosted overlay VPN. Per-peer protocol selection
                (WireGuard or OpenVPN) inside a single overlay network. Built in-house for tactical
                and regulated environments where the control plane must stay on-prem.
              </p>
            </div>
            <div style={{padding: "24px 32px", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap"}}>
              <div style={{display: "flex", gap: 8, flexWrap: "wrap"}}>
                <span className="pill steel">Self-hosted</span>
                <span className="pill steel">macOS · Linux</span>
                <span className="pill steel">AGPL-3.0</span>
              </div>
              <a href="WH-Tactical Architecture.html" className="btn ghost" style={{fontSize: 12}}>
                Read architecture<span className="arrow">→</span>
              </a>
            </div>
          </div>

          {/* Featured: WARHAMMER */}
          <div className="card pd-flag" style={{padding: 0, overflow: "hidden", position: "relative"}}>
            <div style={{
              position: "relative",
              padding: "32px 32px 24px",
              borderBottom: "1px solid var(--border)",
              background: "linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%)",
              minHeight: 340,
            }}>
              <div style={{display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 24}}>
                <span className="pill brand">Flagship · Hardware</span>
                <span className="mono muted" style={{fontSize: 10, letterSpacing: "0.16em"}}>PROD · 02</span>
              </div>

              {/* WARHAMMER connectivity visual — ruggedized device → global link → ops console */}
              <svg viewBox="0 0 600 200" width="100%" style={{maxHeight: 200}}>
                <defs>
                  <linearGradient id="whCommsGrad" x1="0" x2="1">
                    <stop offset="0%" stopColor="var(--brand-2)" />
                    <stop offset="100%" stopColor="var(--steel-2)" />
                  </linearGradient>
                </defs>

                {/* Wireless arcs from the device */}
                {[20, 36, 54].map((r, i) => (
                  <path key={i}
                    d={`M ${130 - r * 0.7} 88 A ${r} ${r} 0 0 1 ${130 + r * 0.7} 88`}
                    fill="none" stroke="var(--brand-2)" strokeWidth="1"
                    strokeOpacity={0.75 - i * 0.18}
                    style={{animation: `flow ${2 + i * 0.4}s linear infinite`}} />
                ))}

                {/* Ruggedized device — chunky rectangle with port row */}
                <g transform="translate(130, 120)">
                  <rect x="-44" y="-22" width="88" height="44" rx="3"
                        fill="var(--surface-2)" stroke="var(--brand-2)" strokeWidth="1.5" />
                  <rect x="-44" y="-22" width="88" height="3" fill="var(--brand-2)" />
                  {/* heat vents */}
                  {[-30, -20, -10, 10, 20, 30].map(x => (
                    <line key={x} x1={x} y1="-14" x2={x} y2="-6"
                          stroke="var(--brand-2)" strokeOpacity="0.4" />
                  ))}
                  {/* port row */}
                  <line x1="-30" y1="14" x2="30" y2="14" stroke="var(--muted)" strokeWidth="3" />
                  <circle r="2" cx="-22" cy="14" fill="var(--good)" />
                  <text textAnchor="middle" y="6" fontFamily="var(--f-mono)" fontSize="8"
                        fill="var(--fg)" letterSpacing="0.18em" fontWeight="600">WARHAMMER</text>
                  <text textAnchor="middle" y="40" fontFamily="var(--f-mono)" fontSize="9"
                        fill="var(--muted)" letterSpacing="0.1em">RUGGED · 1.4 LB</text>
                </g>

                {/* Global link bridge — animated dashes */}
                <path d="M 178 100 Q 300 60 422 100"
                      fill="none" stroke="url(#whCommsGrad)"
                      strokeWidth="1.5" strokeDasharray="3 9"
                      style={{animation: "flow 2.2s linear infinite"}} />
                <text x="300" y="50" textAnchor="middle"
                      fontFamily="var(--f-mono)" fontSize="9"
                      fill="var(--fg-2)" letterSpacing="0.18em">GLOBAL LINK · ENCRYPTED</text>

                {/* Cellular / Wi-Fi badges floating */}
                <g transform="translate(240, 80)">
                  <rect x="-22" y="-9" width="44" height="18" rx="3"
                        fill="var(--bg-2)" stroke="var(--border)" />
                  <text textAnchor="middle" y="3" fontFamily="var(--f-mono)" fontSize="9"
                        fill="var(--brand-2)" letterSpacing="0.06em">4G/LTE</text>
                </g>
                <g transform="translate(360, 80)">
                  <rect x="-22" y="-9" width="44" height="18" rx="3"
                        fill="var(--bg-2)" stroke="var(--border)" />
                  <text textAnchor="middle" y="3" fontFamily="var(--f-mono)" fontSize="9"
                        fill="var(--steel-2)" letterSpacing="0.06em">WiFi 6E</text>
                </g>

                {/* C2 console — a stylized monitor with mini bars */}
                <g transform="translate(470, 100)">
                  <rect x="-52" y="-30" width="104" height="60" rx="3"
                        fill="var(--surface-2)" stroke="var(--steel-2)" strokeWidth="1.5" />
                  <rect x="-52" y="-30" width="104" height="3" fill="var(--steel-2)" />
                  {/* fake telemetry */}
                  <rect x="-44" y="-18" width="22" height="3" fill="var(--steel-2)" opacity="0.7" />
                  <rect x="-44" y="-10" width="36" height="3" fill="var(--steel-2)" opacity="0.5" />
                  <rect x="-44" y="-2"  width="14" height="3" fill="var(--steel-2)" opacity="0.7" />
                  <rect x="-44" y="6"   width="30" height="3" fill="var(--steel-2)" opacity="0.5" />
                  <text textAnchor="middle" y="22" fontFamily="var(--f-mono)" fontSize="8"
                        fill="var(--fg-2)" letterSpacing="0.16em" fontWeight="600">C2 CONSOLE</text>
                </g>

                {/* OTA indicator */}
                <g transform="translate(300, 170)">
                  <rect x="-32" y="-9" width="64" height="18" rx="3"
                        fill="var(--bg-2)" stroke="var(--brand-2)" />
                  <text textAnchor="middle" y="3" fontFamily="var(--f-mono)" fontSize="9"
                        fill="var(--brand-2)" letterSpacing="0.16em" fontWeight="600">OTA UPDATE</text>
                </g>
              </svg>

              <h3 style={{marginTop: 24, marginBottom: 4, fontSize: 28}}>WARHAMMER</h3>
              <div className="mono" style={{
                color: "var(--brand-2)", fontSize: 11, letterSpacing: "0.22em",
                textTransform: "uppercase", marginBottom: 12,
              }}>Remote Command & Control</div>
              <p className="fg-muted" style={{fontSize: 15, lineHeight: 1.6}}>
                Unparalleled remote command and control. A ruggedized, cost-effective C2 platform
                with cloud-based architecture for global accessibility and on-prem-grade data
                security. Industry-level security, web interface, over-the-air updates.
              </p>
            </div>

            {/* Technical specs grid */}
            <div style={{
              padding: "20px 32px",
              borderBottom: "1px solid var(--border)",
              background: "var(--bg-2)",
            }}>
              <div className="mono muted" style={{
                fontSize: 10, letterSpacing: "0.18em",
                textTransform: "uppercase", marginBottom: 12,
              }}>Technical specifications</div>
              <div className="spec-grid" style={{
                fontFamily: "var(--f-mono)",
                fontSize: 11.5,
              }}>
                {[
                  ["Size",      "6\" × 4.25\" × 15\""],
                  ["Weight",    "1.4 lbs"],
                  ["Power",     "USB-C · ~100W"],
                  ["Memory",    "16 GB"],
                  ["Cellular",  "4G / 3G / 2G global"],
                  ["Wi-Fi",     "6E · 802.11AX"],
                  ["Ethernet",  "2× 2.5 GbE"],
                  ["USB-C",     "2× Thunderbolt"],
                  ["USB-A",     "2× 3.2 · 2× 2.0"],
                ].map(([k, v]) => (
                  <div key={k}>
                    <div style={{color: "var(--subtle)", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase"}}>{k}</div>
                    <div style={{color: "var(--fg-2)", marginTop: 2}}>{v}</div>
                  </div>
                ))}
              </div>
            </div>

            <div style={{padding: "20px 32px", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap"}}>
              <div style={{display: "flex", gap: 8, flexWrap: "wrap"}}>
                <span className="pill steel">Ruggedized</span>
                <span className="pill steel">MCOTS</span>
                <span className="pill steel">OTA updates</span>
              </div>
              <a href="mailto:info@cerberustechgrp.com?subject=WARHAMMER%20Inquiry" className="btn ghost" style={{fontSize: 12}}>
                Request spec sheet<span className="arrow">→</span>
              </a>
            </div>
          </div>
        </div>

        {/* In-development row */}
        <div className="grid g-2" style={{marginTop: 24}}>
          <div className="card" style={{padding: 28, display: "flex", flexDirection: "column", justifyContent: "space-between"}}>
            <div>
              <div style={{display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 18}}>
                <span className="pill warn">In development</span>
                <span className="mono muted" style={{fontSize: 10, letterSpacing: "0.16em"}}>PROD · 03</span>
              </div>
              <h3 style={{marginBottom: 8}}>Argos</h3>
              <p className="fg-muted" style={{fontSize: 14, lineHeight: 1.55}}>
                Edge-inference platform for ISR analyst augmentation — model evaluation,
                watchlist enrichment, and on-prem deployment of vision/LLM stacks.
              </p>
            </div>
            <div style={{display: "flex", gap: 6, flexWrap: "wrap", marginTop: 16}}>
              <span className="pill plain mono">AI · ISR</span>
              <span className="pill plain mono">Edge</span>
            </div>
          </div>

          <div className="card" style={{padding: 28, display: "flex", flexDirection: "column", justifyContent: "space-between"}}>
            <div>
              <div style={{display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 18}}>
                <span className="pill plain mono" style={{color: "var(--subtle)"}}>Roadmap</span>
                <span className="mono muted" style={{fontSize: 10, letterSpacing: "0.16em"}}>PROD · 04</span>
              </div>
              <h3 style={{marginBottom: 8}}>Additional capabilities</h3>
              <p className="fg-muted" style={{fontSize: 14, lineHeight: 1.55}}>
                Tooling in development — details available under NDA. Contact us to
                discuss a sponsored prototype or capability sponsorship.
              </p>
            </div>
            <div style={{display: "flex", gap: 6, flexWrap: "wrap", marginTop: 16}}>
              <span className="pill plain mono">Under NDA</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────
// Team — leadership placeholders
// ────────────────────────────────────────────────────────────────────────

const TEAM = [
  { initials: "JM", name: "Jay McCullough",   role: "Co-Founder", photo: ASSETS.jay,
    bio: "Sets the operational bearing across federal and commercial engagements. Leads strategy and program execution." },
  { initials: "RH", name: "Ryne Haxton",      role: "Co-Founder", photo: ASSETS.ryne,
    bio: "Drives engineering and capability development across the cyber and tactical domains." },
  { initials: "AF", name: "Andrew Fearheiley",role: "Co-Founder",
    bio: "Leads Business Development and Product Sales. Carries the mission alongside the customer and grows the bench." },
];

function PlaceholderHead() {
  // Simple cerberus-inspired silhouette as placeholder mark
  return (
    <svg viewBox="0 0 100 100">
      <path d="M30 60 Q30 30 50 30 Q70 30 70 60 L65 78 L35 78 Z"
            fill="var(--surface-3)" stroke="var(--border-strong)" />
      <circle cx="42" cy="52" r="2" fill="var(--brand)" />
      <circle cx="58" cy="52" r="2" fill="var(--brand)" />
    </svg>
  );
}

function TeamSection() {
  return (
    <section className="section" id="team">
      <div className="container">
        <SectionHead
          ord="05"
          eyebrow="Leadership · The people who run the work"
          title="Operators first. Executives second."
          lede="Our leadership comes from the field — operators, engineers, and program managers who solved the same problems they now lead teams to solve. Headshots and bios available on request."
          right={<p>Looking for a fuller bench? <a href="#contact" style={{color: "var(--brand-2)"}}>Request our capability statement</a> for the complete team breakdown including past performance.</p>}
        />

        <div className="grid g-3">
          {TEAM.map((m, i) => (
            <div key={i} className="team-card">
              <div className="photo">
                {m.photo ? (
                  <img src={m.photo} alt={m.name}
                       style={{position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover"}} />
                ) : (
                  <>
                    <div className="badge">[ PHOTO PENDING ]</div>
                    <PlaceholderHead />
                  </>
                )}
              </div>
              <div className="body">
                <div className="name">{m.name}</div>
                <div className="role">{m.role}</div>
                <p className="bio">{m.bio}</p>
              </div>
            </div>
          ))}
        </div>

        <p className="mono muted" style={{
          marginTop: 32, fontSize: 11, letterSpacing: "0.14em",
          textTransform: "uppercase", textAlign: "center",
        }}>
          ★ NAMES + HEADSHOTS WITHHELD ON THIS PAGE · FULL BIOS PROVIDED UNDER REQUEST
        </p>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────
// Metrics strip
// ────────────────────────────────────────────────────────────────────────

function MetricsStrip() {
  const items = [
    { v: "100%", k: "Employee-centric",  s: "Every decision tested against our people-first principle." },
    { v: "24/7",  k: "Mission posture",   s: "On-call, on-mission. We respond when the customer needs us." },
    { v: "0",     k: "Quit calls", s: "“Never Quit” is the standard, not a slogan." },
  ];
  return (
    <section className="section tight">
      <div className="container">
        <div className="grid g-3">
          {items.map((it, i) => (
            <div key={i} className="card elev" style={{padding: 32}}>
              <div className="metric">
                <span className="num" style={{fontSize: 64}}>{it.v}</span>
                <span className="label" style={{marginTop: 8}}>{it.k}</span>
                <p className="sub" style={{marginTop: 8}}>{it.s}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────
// CTA Band — Engage
// ────────────────────────────────────────────────────────────────────────

function CTASection() {
  return (
    <section className="section" id="contact">
      <div className="container">
        <div className="cta-band">
          <div className="eyebrow"><span className="ord">06</span>Engage · Request a brief</div>
          <h2 style={{marginTop: 18, maxWidth: 820}}>
            Tell us about the mission. We'll tell you whether we're the right team.
          </h2>
          <p className="lede" style={{marginTop: 18}}>
            We respond to capability requests within one business day. Whether you're a federal
            program manager scoping a SOW or a commercial CISO with an incident — start the
            conversation. We'll be honest about fit before either side signs anything.
          </p>
          <div className="actions">
            <a href="mailto:info@cerberustechgrp.com" className="btn primary">info@cerberustechgrp.com<span className="arrow">→</span></a>
            <a href="tel:+17276196117" className="btn ghost">727 · 619 · 6117</a>
            <a href="CTG-Capability_Statement.pdf" download className="btn ghost">Download capability statement</a>
          </div>

          <div className="reg-grid" style={{
            marginTop: 48, paddingTop: 32, borderTop: "1px solid var(--border)",
          }}>
            <div>
              <div className="eyebrow" style={{marginBottom: 8, fontSize: 10}}>UEI</div>
              <div className="mono fg-muted">PENDING ASSIGNMENT</div>
            </div>
            <div>
              <div className="eyebrow" style={{marginBottom: 8, fontSize: 10}}>CAGE</div>
              <div className="mono fg-muted">9PQX3</div>
            </div>
            <div>
              <div className="eyebrow" style={{marginBottom: 8, fontSize: 10}}>NAICS</div>
              <div className="mono fg-muted">541512 · 541330 · 541715</div>
            </div>
            <div>
              <div className="eyebrow" style={{marginBottom: 8, fontSize: 10}}>SAM Status</div>
              <div className="mono" style={{color: "var(--good)"}}>● ACTIVE</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────
// Footer
// ────────────────────────────────────────────────────────────────────────

function Footer() {
  return (
    <footer className="site-footer">
      <div className="top">
        <div className="brand-block">
          <img src={ASSETS.logo} alt="Cerberus Technical Group" />
          <p>
            Real-world expertise across cyber, tactical communications, software, hardware, AI,
            and ISR. One team. One fight. Never quit.
          </p>
        </div>
        <div>
          <h5>Capabilities</h5>
          <ul>
            <li><a href="#capabilities">Cyber & Network</a></li>
            <li><a href="#capabilities">Defense / DoD</a></li>
            <li><a href="#capabilities">Tactical Comms</a></li>
            <li><a href="#capabilities">Software</a></li>
            <li><a href="#capabilities">Hardware</a></li>
            <li><a href="#capabilities">AI · ISR</a></li>
          </ul>
        </div>
        <div>
          <h5>Company</h5>
          <ul>
            <li><a href="#mission">Mission</a></li>
            <li><a href="#team">Leadership</a></li>
            <li><a href="#products">Products</a></li>
            <li><a href="#contact">Engage</a></li>
            <li><a href="#contact">Careers</a></li>
          </ul>
        </div>
        <div>
          <h5>Contact</h5>
          <ul>
            <li><a href="mailto:info@cerberustechgrp.com">info@cerberustechgrp.com</a></li>
            <li><a href="https://cerberustechgrp.com">cerberustechgrp.com</a></li>
            <li style={{color: "var(--subtle)", fontSize: 12, marginTop: 4}}>CAGE · 9PQX3</li>
          </ul>
        </div>
      </div>
      <div className="bottom">
        <div>© 2026 Cerberus Technical Group · All rights reserved</div>
        <div>CMMC L2 · NIST 800-171 · SAM Registered</div>
      </div>
    </footer>
  );
}

// ────────────────────────────────────────────────────────────────────────
// App
// ────────────────────────────────────────────────────────────────────────

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply accent override as CSS variable
  useEffect(() => {
    const root = document.documentElement;
    if (t.accent === "red") {
      root.style.setProperty("--brand",   "#c8102e");
      root.style.setProperty("--brand-2", "#e6233e");
    } else if (t.accent === "amber") {
      root.style.setProperty("--brand",   "#c89c5a");
      root.style.setProperty("--brand-2", "#e3b56e");
    } else if (t.accent === "steel") {
      root.style.setProperty("--brand",   "#4a6a8a");
      root.style.setProperty("--brand-2", "#6b8caf");
    } else if (t.accent === "cyan") {
      root.style.setProperty("--brand",   "#0891b2");
      root.style.setProperty("--brand-2", "#06b6d4");
    }
  }, [t.accent]);

  return (
    <>
      <StatusBar />
      <Header />
      <main>
        <Hero animate={t.animateOps} />
        <ValuesStrip />
        <CapabilitiesGrid />
        <OperationsSection animate={t.animateOps} />
        <MissionBand />
        <ProductsSection />
        <TeamSection />
        <MetricsStrip />
        <CTASection />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Diagrams" />
        <TweakToggle label="Animate ops diagram" value={t.animateOps}
                     onChange={(v) => setTweak("animateOps", v)} />
        <TweakSection label="Brand" />
        <TweakRadio  label="Accent" value={t.accent}
                     options={["red", "amber", "steel", "cyan"]}
                     onChange={(v) => setTweak("accent", v)} />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);