// Direction C — "Grid": Bold technical research-firm energy
const DirectionC = ({ density = "spacious" }) => {
  // Direction C runs with extra breathing room — pull the rhythm of B into the grid.
  const airyVars = density === "spacious" ? {
    "--d-section-py": "180px",
    "--d-card-pad": "56px",
    "--d-h1": "112px",
    "--d-h2": "68px",
    "--d-body": "19px",
    "--d-eyebrow": "13px"
  } : {};
  const cStyles = {
    root: {
      fontFamily: "'Space Grotesk', 'Inter', system-ui, sans-serif",
      background: "#fafaf7",
      color: "#0a0a0a",
      width: "100%",
      overflow: "hidden",
      position: "relative",
      ...airyVars
    },
    nav: {
      display: "grid",
      gridTemplateColumns: "104px 1fr auto",
      alignItems: "stretch",
      padding: 0,
      borderBottom: "1px solid #0a0a0a",
      height: 104
    },
    brand: {
      display: "flex", alignItems: "stretch", justifyContent: "center",
      borderRight: "1px solid #0a0a0a",
      overflow: "hidden"
    },
    navLinks: {
      display: "flex",
      borderLeft: "1px solid #0a0a0a",
      height: "100%"
    },
    navLink: {
      padding: "0 28px",
      borderRight: "1px solid #0a0a0a",
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 12,
      letterSpacing: "0.1em",
      textTransform: "uppercase",
      display: "flex", alignItems: "center"
    },
    cta: {
      background: "var(--tjb-forest)",
      color: "#fafaf7",
      border: 0,
      borderLeft: "1px solid #0a0a0a",
      padding: "0 36px",
      height: "100%",
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 12,
      letterSpacing: "0.12em",
      textTransform: "uppercase",
      fontWeight: 600
    }
  };

  return (
    <div data-density={density} style={cStyles.root}>
      <nav style={cStyles.nav}>
        <div style={cStyles.brand}>
          <img src="assets/tjb-logo.png" alt="TJB.llc — Networking & Cybersecurity"
          style={{
            width: "100%", height: "100%",
            objectFit: "contain",
            mixBlendMode: "multiply",
            display: "block"
          }} />
          
        </div>
        <div style={cStyles.navLinks}>
          {[
          ["Services", "#services"],
          ["Build", "#build"],
          ["Threat model", "#threat-model"],
          ["Industries", "#industries"],
          ["Field", "#field"],
          ["About", "#about"]].
          map(([s, href]) =>
          <a key={s} href={href} style={{ ...cStyles.navLink, textDecoration: "none", color: "inherit" }}>{s}</a>
          )}
          <a key="resources" href="#resources" style={{ ...cStyles.navLink, textDecoration: "none", color: "inherit" }}>Resources</a>
          <a key="portal" href="https://secure.tjb.llc" style={{ ...cStyles.navLink, textDecoration: "none", color: "inherit", gap: 6, display: "flex", alignItems: "center" }}>
            Portal <span aria-hidden="true" style={{ color: "var(--tjb-forest-2)", fontSize: 11 }}>↗</span>
          </a>
          <div style={{ flex: 1 }} />
        </div>
        <a href="#engage" style={{ ...cStyles.cta, textDecoration: "none", display: "flex", alignItems: "center" }}>Engage →</a>
      </nav>

      <HeroC />
      <MarqueeC />
      <ThreatModelC />
      <ServicesC />
      <BuildOutsC />
      <ProcessC />
      <IndustriesC />
      <CaseC />
      <AboutC />
      <EngagementC />
      <ResourcesC />
      <ContactC />
      <FooterC />
    </div>);

};

const CMark = () =>
<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
    <rect x="1" y="1" width="26" height="26" stroke="#0a0a0a" strokeWidth="2" />
    <path d="M6 14h16M14 6v16" stroke="#0a0a0a" strokeWidth="2" />
    <circle cx="14" cy="14" r="3" fill="var(--tjb-forest)" />
  </svg>;


const HeroC = () =>
<section style={{
  position: "relative",
  borderBottom: "1px solid #0a0a0a",
  display: "grid",
  gridTemplateColumns: "1fr 1fr",
  minHeight: 840
}}>
    <div style={{
    padding: "var(--d-section-py) 56px",
    display: "flex", flexDirection: "column", justifyContent: "space-between",
    gap: 56
  }}>
      <div style={{
      display: "flex", justifyContent: "space-between",
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 11, letterSpacing: "0.2em",
      textTransform: "uppercase", color: "#5b6660"
    }}>
        <span>// tjb.llc</span>
        <span>est. 2024 · MSSP</span>
      </div>

      <h1 style={{
      fontSize: "calc(var(--d-h1) * 1.1)",
      lineHeight: 0.92,
      letterSpacing: "-0.04em",
      fontWeight: 600,
      margin: 0,
      textWrap: "balance"
    }}>
        Networking,<br />
        cloud, and the<br />
        <span style={{
        display: "inline-block",
        background: "var(--tjb-forest)",
        color: "#fafaf7",
        padding: "0 0.15em"
      }}>security</span><br />
        that connects them.
      </h1>

      <div style={{
      display: "grid",
      gridTemplateColumns: "1fr 1fr",
      gap: 32
    }}>
        <p style={{ margin: 0, fontSize: "var(--d-body)", lineHeight: 1.55, color: "#1b1f1c" }}>
          TJB is a Managed <strong style={{ background: "rgba(46,204,113,0.25)" }}>Security</strong> Service Provider.
          We analyze the technical risk in your stack — networks, cloud, identity, endpoints — and engineer the response.
        </p>
        <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: "#3b4640" }}>
          TJB is not a help-desk. TJB is not a re-seller. TJB is a risk-led engineering practice for the part of your stack that does not get a second chance.
        </p>
      </div>

      <div style={{ display: "flex", gap: 0 }}>
        <a href="#engage" style={{
        background: "#0a0a0a", color: "#fafaf7",
        border: 0, padding: "20px 28px",
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 12, letterSpacing: "0.14em",
        textTransform: "uppercase", fontWeight: 700,
        textDecoration: "none", display: "inline-flex", alignItems: "center"
      }}>Engage TJB →</a>
        <a href="#threat-model" style={{
        background: "transparent", color: "#0a0a0a",
        border: "1px solid #0a0a0a", borderLeft: 0,
        padding: "20px 28px",
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 12, letterSpacing: "0.14em",
        textTransform: "uppercase",
        textDecoration: "none", display: "inline-flex", alignItems: "center"
      }}>Read the threat model</a>
      </div>
    </div>

    {/* Right column — portrait + signed note */}
    <div style={{ position: "relative", padding: "var(--d-section-py) 56px", display: "flex", flexDirection: "column", justifyContent: "center", gap: 40 }}>
      <PortraitNoteC />
    </div>
  </section>;


// Bright-coloured data-centre illustration — server-aisle in vanishing-point
// perspective with vivid LED rows. Rendered with SVG so it scales cleanly and
// can be replaced at any time by dragging a real photo onto the image-slot.
const DataCentreArt = () => {
  // Six rack pairs receding to the vanishing point. Each row of LEDs uses a
  // saturated hue from a curated bright palette; we vary the count so the
  // racks read as live equipment rather than wallpaper.
  const palette = ["#00f5ff", "#ff2bd6", "#ffd400", "#7cff5b", "#ff6a3d", "#5b8cff"];
  const racks = [
  { z: 0.10, hue: 0 },
  { z: 0.22, hue: 1 },
  { z: 0.36, hue: 2 },
  { z: 0.52, hue: 3 },
  { z: 0.70, hue: 4 },
  { z: 0.86, hue: 5 }];

  // Build a single rack face (one side of the aisle).
  const Rack = ({ side, z, hueIdx }) => {
    // side: 'L' or 'R'. Project from foreground (z=0) to vanishing point (z=1).
    const cx = 50; // vanishing-point x %
    const cy = 52; // vanishing-point y %
    const outer = side === "L" ? 0 : 100;
    const inner = side === "L" ? 30 : 70;
    const x1 = outer + (cx - outer) * z;
    const x2 = inner + (cx - inner) * z;
    const yT = 8 + (cy - 8) * z;
    const yB = 96 + (cy - 96) * z;
    const points = `${x1},${yT} ${x2},${yT} ${x2},${yB} ${x1},${yB}`;
    const baseColor = palette[hueIdx % palette.length];
    // LED bar rows — fewer for distant racks.
    const rows = Math.max(3, Math.round(9 * (1 - z)));
    return (
      <g>
        {/* Rack face — dark with a faint vertical gradient */}
        <polygon points={points} fill={`url(#rackFace)`} stroke="#0a0a0a" strokeWidth="0.25" />
        {/* LED rows */}
        {Array.from({ length: rows }).map((_, i) => {
          const t = (i + 0.5) / rows;
          const ry = yT + (yB - yT) * t;
          const rh = Math.max(0.6, (yB - yT) / rows * 0.45);
          // Alternate accent hues per row for variety.
          const c = palette[(hueIdx + i) % palette.length];
          return (
            <g key={i}>
              <rect
                x={Math.min(x1, x2)}
                y={ry - rh / 2}
                width={Math.abs(x2 - x1)}
                height={rh}
                fill={c}
                opacity={0.95 - z * 0.35}
                style={{ filter: `drop-shadow(0 0 ${1.4 - z}px ${c})` }} />
              
              {/* Tiny indicator dots along the bar */}
              {Array.from({ length: Math.max(2, Math.round(8 * (1 - z))) }).map((__, j, arr) => {
                const u = (j + 0.5) / arr.length;
                const dx = Math.min(x1, x2) + Math.abs(x2 - x1) * u;
                return (
                  <circle
                    key={j}
                    cx={dx}
                    cy={ry}
                    r={Math.max(0.22, 0.55 - z * 0.35)}
                    fill="#ffffff"
                    opacity={0.9} />);


              })}
            </g>);

        })}
        {/* Bright outline glow along inner edge — the lit aisle */}
        <line
          x1={x2} y1={yT} x2={x2} y2={yB}
          stroke={baseColor}
          strokeWidth={Math.max(0.25, 0.7 - z * 0.5)}
          opacity={0.85}
          style={{ filter: `drop-shadow(0 0 ${1.6 - z}px ${baseColor})` }} />
        
      </g>);

  };

  return (
    <svg
      viewBox="0 0 100 125"
      preserveAspectRatio="xMidYMid slice"
      style={{ width: "100%", height: "100%", display: "block", background: "#04060a" }}
      role="img"
      aria-label="Stylised data-centre aisle with bright colour LEDs">
      
      <defs>
        <linearGradient id="floor" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#0a0e18" />
          <stop offset="100%" stopColor="#1a0f26" />
        </linearGradient>
        <linearGradient id="ceiling" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#160a22" />
          <stop offset="100%" stopColor="#06080f" />
        </linearGradient>
        <linearGradient id="rackFace" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#0d1118" />
          <stop offset="50%" stopColor="#161a24" />
          <stop offset="100%" stopColor="#0a0d14" />
        </linearGradient>
        <radialGradient id="vp" cx="50%" cy="52%" r="38%">
          <stop offset="0%" stopColor="#ffd87a" stopOpacity="0.95" />
          <stop offset="35%" stopColor="#ff2bd6" stopOpacity="0.45" />
          <stop offset="70%" stopColor="#00f5ff" stopOpacity="0.18" />
          <stop offset="100%" stopColor="#04060a" stopOpacity="0" />
        </radialGradient>
        <linearGradient id="aisleFloor" x1="0.5" y1="1" x2="0.5" y2="0">
          <stop offset="0%" stopColor="#ffd87a" stopOpacity="0.55" />
          <stop offset="50%" stopColor="#ff2bd6" stopOpacity="0.30" />
          <stop offset="100%" stopColor="#00f5ff" stopOpacity="0.10" />
        </linearGradient>
      </defs>

      {/* Ceiling */}
      <polygon points="0,0 100,0 70,52 30,52" fill="url(#ceiling)" />
      {/* Floor */}
      <polygon points="0,125 100,125 70,52 30,52" fill="url(#floor)" />
      {/* Glowing aisle stripe */}
      <polygon points="40,125 60,125 53,52 47,52" fill="url(#aisleFloor)" opacity="0.9" />

      {/* Ceiling light strips */}
      {[0.18, 0.32, 0.48].map((t, i) => {
        const cx = 50,cy = 52;
        const y = cy * t;
        const xl = 0 + (cx - 0) * t;
        const xr = 100 + (cx - 100) * t;
        return (
          <line
            key={i}
            x1={xl + 6} x2={xr - 6}
            y1={y} y2={y}
            stroke={palette[i]}
            strokeWidth={0.6 - i * 0.15}
            opacity={0.8 - i * 0.18}
            style={{ filter: `drop-shadow(0 0 ${1.2 - i * 0.3}px ${palette[i]})` }} />);


      })}

      {/* Racks — back to front so nearer racks overlap correctly */}
      {[...racks].reverse().map((r, i) =>
      <g key={i}>
          <Rack side="L" z={r.z} hueIdx={r.hue} />
          <Rack side="R" z={r.z} hueIdx={(r.hue + 3) % 6} />
        </g>
      )}

      {/* Vanishing-point bloom — sits over everything for the warm core glow */}
      <rect x="0" y="0" width="100" height="125" fill="url(#vp)" style={{ mixBlendMode: "screen" }} />

      {/* Subtle scan-line texture for "photographed" feel */}
      <g opacity="0.08">
        {Array.from({ length: 60 }).map((_, i) =>
        <line key={i} x1="0" x2="100" y1={i * 2.1} y2={i * 2.1} stroke="#ffffff" strokeWidth="0.12" />
        )}
      </g>
    </svg>);

};

// DataCentrePhoto — static <img> pointing at the exported asset file.
const DataCentrePhoto = () => {
  return (
    <div style={{ position: "relative" }}>
      <img
        src="assets/the-floor.webp"
        alt="The Floor"
        style={{
          width: "100%",
          height: "auto",
          display: "block",
          border: "1px solid #0a0a0a",
          background: "#04060a"
        }} />
      <div style={{
        position: "absolute",
        top: 14, left: 14,
        background: "#0a0a0a", color: "#fafaf7",
        padding: "6px 10px",
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 10, letterSpacing: "0.2em",
        fontWeight: 700,
        zIndex: 2
      }}>FIG.01 / THE FLOOR</div>
      <div style={{
        position: "absolute",
        bottom: -1, right: -1,
        background: "var(--tjb-forest)", color: "#fafaf7",
        padding: "8px 14px",
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11, letterSpacing: "0.16em",
        zIndex: 2
      }}>EST. 2024</div>
    </div>);

};

const PortraitNoteC = () =>
<div style={{
  display: "grid",
  gridTemplateRows: "auto auto",
  gap: 32,
  maxWidth: 540,
  margin: "0 auto",
  width: "100%"
}}>
    {/* Data-centre photo slot — drop a real image here. The wrapper sizes
    itself to the photo's natural aspect so nothing is cropped. */}
    <DataCentrePhoto />

    {/* Signed note — personal, hand-written feel */}
    <div style={{
    borderTop: "1px solid #0a0a0a",
    paddingTop: 24,
    display: "grid", gap: 18
  }}>
      <div style={{
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 11, letterSpacing: "0.2em",
      color: "var(--tjb-forest-2)"
    }}>// FROM THE DESK</div>
      <p style={{
      margin: 0,
      fontFamily: "'Instrument Serif', serif",
      fontStyle: "italic",
      fontSize: 22,
      lineHeight: 1.45,
      color: "#0a0a0a",
      textWrap: "pretty"
    }}>
        Most security work is monitoring theater — dashboards sold in place of attention, alerts surfaced without context, tickets answered without thought. TJB does different work: we analyze the technical risk in your environment, engineer the controls that close it, and react when those controls catch something. Principal-led. No tier-one queue.
      </p>
      <div style={{
      display: "flex", alignItems: "center", justifyContent: "space-between",
      marginTop: 8
    }}>
        <span style={{
        fontFamily: "'Instrument Serif', serif",
        fontStyle: "italic",
        fontSize: 26,
        color: "var(--tjb-forest)",
        letterSpacing: "-0.01em"
      }}>— Tim Brewer</span>
        <span style={{
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 10, letterSpacing: "0.18em",
        color: "#5b6660"
      }}>PRINCIPAL · FOUNDER</span>
      </div>
    </div>
  </div>;


const MarqueeC = () => {
  const items = ["NETWORK", "CLOUD", "ENDPOINT", "IDENTITY", "SIEM", "FIREWALL", "BACKUP", "ANALYSIS", "INCIDENT", "RESPONSE"];
  return (
    <div style={{
      borderBottom: "1px solid #0a0a0a",
      display: "flex",
      overflow: "hidden"
    }}>
      {items.map((s, i) =>
      <div key={s} style={{
        flex: 1,
        padding: "20px 16px",
        borderRight: i < items.length - 1 ? "1px solid #0a0a0a" : "none",
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 12,
        letterSpacing: "0.16em",
        textAlign: "center",
        background: i % 2 === 0 ? "#fafaf7" : "#f0ece2"
      }}>{s}</div>
      )}
    </div>);

};

const SectionHeadC = ({ idx, kicker, title, sub }) =>
<div style={{
  display: "grid",
  gridTemplateColumns: "280px 1fr",
  borderBottom: "1px solid #0a0a0a"
}}>
    <div style={{
    borderRight: "1px solid #0a0a0a",
    padding: "56px 40px",
    display: "flex", flexDirection: "column",
    justifyContent: "space-between", gap: 32,
    background: "#0a0a0a", color: "#fafaf7",
    minHeight: 260
  }}>
      <div style={{
      fontSize: 104, fontWeight: 700,
      letterSpacing: "-0.04em", lineHeight: 1,
      color: "var(--tjb-signal)"
    }}>{idx}</div>
      <div style={{
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 12, letterSpacing: "0.2em",
      textTransform: "uppercase"
    }}>§ {kicker}</div>
    </div>
    <div style={{ padding: "64px 72px" }}>
      <h2 style={{
      fontSize: "var(--d-h2)",
      fontWeight: 600,
      letterSpacing: "-0.025em",
      lineHeight: 1.05,
      margin: 0, textWrap: "balance"
    }}>{title}</h2>
      {sub && <p style={{ margin: "24px 0 0", fontSize: 17, lineHeight: 1.6, color: "#3b4640", maxWidth: 760 }}>{sub}</p>}
    </div>
  </div>;


const ThreatModelC = () =>
<section id="threat-model" style={{ borderBottom: "1px solid #0a0a0a" }}>
    <SectionHeadC
    idx="01"
    kicker="The MSSP difference"
    title="An MSP keeps your laptops working. An MSSP analyzes the technical risk — then closes it."
    sub="TJB is not a 24/7 watch desk. We do three things, and we do them in order: analyze the risk in your environment, engineer the controls that close it, and react when those controls catch something." />
  
    <div style={{
    display: "grid",
    gridTemplateColumns: "repeat(3, 1fr)"
  }}>
      {[
    ["Analyze", "Every layer of your stack mapped — endpoint, identity, firewall, cloud. Technical risk named, prioritized by exploitability, and put on a written register.", "→ Risk register"],
    ["Engineer", "Out-of-the-box controls catch the easy stuff. TJB replaces them with segmentation, conditional access, detections, and backups built for your environment.", "→ Tuned controls"],
    ["React", "Containment, eviction, lessons — full incident response by an engineer who actually knows your environment, not a tier-one queue reading off a runbook.", "→ Same-day IR"]].
    map(([t, d, m], i) =>
    <div key={t} style={{
      padding: "var(--d-card-pad)",
      display: "flex", flexDirection: "column", gap: 18,
      minHeight: 360
    }}>
          <div style={{
        display: "flex", justifyContent: "space-between",
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11, letterSpacing: "0.2em",
        color: "var(--tjb-forest-2)"
      }}>
            <span>STEP 0{i + 1}</span><span>—</span>
          </div>
          <h3 style={{
        fontSize: 48, fontWeight: 600,
        letterSpacing: "-0.03em",
        margin: 0
      }}>{t}.</h3>
          <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, color: "#3b4640", flex: 1 }}>{d}</p>
          <div style={{
        paddingTop: 16, borderTop: "1px solid rgba(10,10,10,0.15)",
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11, letterSpacing: "0.1em",
        color: "#0a0a0a"
      }}>{m}</div>
        </div>
    )}
    </div>
  </section>;


const ServicesC = () => {
  const services = [
  ["NET", "Network Design & Mgmt", "Segmented architectures and zero-trust access. SD-WAN that does not fold when a circuit blinks.", ["Cisco", "Meraki", "Juniper", "Ubiquiti", "Palo Alto"]],
  ["CLD", "Azure & M365", "Conditional access, Entra ID, Defender for Cloud — and backups proven by restoring them, not by trusting the dashboard.", ["Azure", "M365", "Entra", "Intune", "Defender"]],
  ["SIM", "SIEM & Detection", "Aggregated logs and correlated alerts tuned for signal, not vendor defaults.", ["Sentinel", "Wazuh", "Graylog", "Rapid7"]],
  ["EDR", "Managed Endpoint", "Deployment, policy tuning, and host quarantine that fires before the user notices. After-hours response on retainer.", ["SentinelOne", "Defender", "CrowdStrike"]],
  ["IAM", "Identity & Access", "Phishing-resistant authentication, conditional access, privileged access management. Most breaches start at the login page — we close it first.", ["Entra ID", "Okta", "Duo", "YubiKey"]],
  ["VLN", "Vulnerability Mgmt", "Continuous scanning, prioritized by exploitability, and closed — not shipped back to you as a PDF.", ["Tenable", "Qualys", "Defender"]],
  ["FW", "Firewall Mgmt", "Rules with reasons behind them. Segmentation, IDS/IPS, VPN — reviewed quarterly, not only on day one.", ["Juniper", "Palo Alto", "Meraki MX"]],
  ["BCP", "Backup & DR", "Tested restores. Immutable storage. Runbooks rehearsed before they are needed.", ["Veeam", "Datto", "Azure Backup"]],
  ["IR", "Incident Response", "When containment is the priority, TJB mobilizes — forensics, eviction, post-incident lessons. Standing retainer or emergency engagement.", ["Velociraptor", "KAPE", "M365 audit", "Sentinel"]]];

  return (
    <section id="services" style={{ borderBottom: "1px solid #0a0a0a" }}>
      <SectionHeadC
        idx="02"
        kicker="Services"
        title="Nine disciplines. One standard."
        sub="Every engagement starts from the risk register, not from the service catalog. Pick what TJB needs to own — we integrate the rest. Incident response sits in every retainer; standing emergency engagement is available on call. We do not sell GRC consulting or audit work; if that is what you need we will point you to a specialist partner." />
      
      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(3, 1fr)"
      }}>
        {services.map((s, i) =>
        <article key={s[0]} style={{
          padding: "var(--d-card-pad)",
          minHeight: 380,
          display: "flex", flexDirection: "column", gap: 16
        }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
              <div style={{
              background: "var(--tjb-forest)", color: "#fafaf7",
              padding: "4px 8px",
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 11, letterSpacing: "0.16em",
              fontWeight: 700
            }}>{s[0]}</div>
              <span style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 10, color: "#5b6660", letterSpacing: "0.14em"
            }}>0{i + 1}</span>
            </div>
            <h3 style={{
            fontSize: 26, fontWeight: 600,
            letterSpacing: "-0.02em",
            margin: 0, lineHeight: 1.1
          }}>{s[1]}</h3>
            <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: "#3b4640", flex: 1 }}>{s[2]}</p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
              {s[3].map((t) =>
            <span key={t} style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 10, letterSpacing: "0.06em",
              padding: "3px 7px",
              border: "1px solid #0a0a0a"
            }}>{t}</span>
            )}
            </div>
          </article>
        )}
      </div>
    </section>);

};

// BuildOutsC — Project & advisory work. Distinct from the ongoing
// managed-services grid (ServicesC) above: these are scoped, one-off
// engagements TJB takes on alongside or independent of a retainer.
// Layout is a dense ledger to read as complementary, not a duplicate
// 3×3 card grid.
const BuildOutsC = () => {
  const rows = [
    {
      code: "HST",
      title: "Secure managed hosting",
      lede: "Hardened VPS, dedicated, or co-location. Patched OS, encrypted backups, monitored from day one.",
      stack: ["Linux", "Windows", "Websites", "Cloud Apps"],
      deliverable: "Hosted workload + runbook"
    },
    {
      code: "DEV",
      title: "Bespoke software development",
      lede: "Internal tooling, integrations, and automation written to your spec. Code you own, code that's documented, code reviewed against the same security bar as the rest of your stack.",
      stack: ["Python", "Node", ".NET", "Go", "Rust", "APIs", "SQL"],
      deliverable: "Source repo + handoff docs"
    },
    {
      code: "CLD·D",
      title: "Cloud design & setup",
      lede: "Tenant build-outs, landing zones, M365 onboarding, lift-and-shift. Done once, done right — not patched together quarter after quarter.",
      stack: ["Azure", "AWS", "M365", "Terraform"],
      deliverable: "Tenant + IaC repo"
    },
    {
      code: "PHY",
      title: "Physical security assessment & advisement",
      lede: "Door access, camera coverage, server-room controls, badge audits. On-site walk-throughs with a written remediation plan and vendor-neutral recommendations.",
      stack: ["On-site", "ACS", "CCTV", "Badge audit"],
      deliverable: "Site survey + remediation plan"
    },
    {
      code: "AWR",
      title: "Security awareness training",
      lede: "Phishing simulations, role-based training, and reportable metrics. Built around the threats your people will actually see — not generic videos.",
      stack: ["Ninjio", "Hoxhunt", "Wizer"],
      deliverable: "Program + quarterly report"
    },
    {
      code: "PEN",
      title: "Penetration testing",
      lede: "External, internal, and assumed-breach engagements. Findings prioritized by exploit chain and business impact, not raw CVSS score.",
      stack: ["Nessus", "Burp", "Caldera", "Bloodhound"],
      deliverable: "Findings report + retest"
    },
    {
      code: "MAIL",
      title: "Email security & DMARC",
      lede: "Tenant hardening, SPF / DKIM / DMARC enforcement, attachment & link policies, banner and quarantine review. Closes the front door most attackers still walk through.",
      stack: ["M365", "Proofpoint", "Mimecast"],
      deliverable: "Enforced DMARC + policy set"
    }
  ];

  return (
    <section id="build" style={{ borderBottom: "1px solid #0a0a0a", background: "#f0ece2" }}>
      <SectionHeadC
        idx="03"
        kicker="Build & advise"
        title="Other work that sits alongside the retainer."
        sub="Discrete, scoped engagements — designed, quoted, and delivered against written success criteria. Take one in isolation, or stack several into a single program. Every build ships with the documentation and handoff a future engineer will actually be able to read." />

      <div style={{
        display: "grid",
        gridTemplateColumns: "92px 1fr 1.4fr 0.9fr 0.9fr",
        gap: 0,
        padding: "18px 56px",
        borderBottom: "1px solid #0a0a0a",
        background: "#0a0a0a",
        color: "#fafaf7",
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 10,
        letterSpacing: "0.2em",
        textTransform: "uppercase"
      }}>
        <span style={{ color: "var(--tjb-signal)" }}>// code</span>
        <span>Capability</span>
        <span>What it is</span>
        <span>Tooling</span>
        <span style={{ textAlign: "right" }}>Deliverable</span>
      </div>

      <ol style={{ margin: 0, padding: 0, listStyle: "none" }}>
        {rows.map((r, i) => {
          const isLast = i === rows.length - 1;
          return (
            <li key={r.code} style={{
              display: "grid",
              gridTemplateColumns: "92px 1fr 1.4fr 0.9fr 0.9fr",
              gap: 0,
              padding: "32px 56px",
              borderBottom: isLast ? "none" : "1px solid rgba(10,10,10,0.15)",
              alignItems: "start"
            }}>
              <div style={{ display: "flex", alignItems: "flex-start", gap: 8 }}>
                <span style={{
                  background: "var(--tjb-forest)", color: "#fafaf7",
                  padding: "4px 8px",
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: 11, letterSpacing: "0.12em",
                  fontWeight: 700, whiteSpace: "nowrap"
                }}>{r.code}</span>
              </div>

              <div style={{ paddingRight: 32 }}>
                <div style={{
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: 10, letterSpacing: "0.18em",
                  color: "#5b6660", marginBottom: 8
                }}>0{i + 1} / 0{rows.length}</div>
                <h3 style={{
                  fontSize: 26, fontWeight: 600,
                  letterSpacing: "-0.02em",
                  margin: 0, lineHeight: 1.15,
                  textWrap: "balance"
                }}>{r.title}.</h3>
              </div>

              <p style={{
                margin: 0,
                fontSize: 14, lineHeight: 1.6,
                color: "#1b1f1c",
                paddingRight: 32,
                textWrap: "pretty"
              }}>{r.lede}</p>

              <div style={{
                display: "flex", flexWrap: "wrap", gap: 6,
                alignSelf: "start"
              }}>
                {r.stack.map((t) =>
                  <span key={t} style={{
                    fontFamily: "'JetBrains Mono', monospace",
                    fontSize: 10, letterSpacing: "0.06em",
                    padding: "3px 7px",
                    border: "1px solid #0a0a0a",
                    background: "transparent"
                  }}>{t}</span>
                )}
              </div>

              <div style={{
                textAlign: "right",
                fontFamily: "'JetBrains Mono', monospace",
                fontSize: 11, letterSpacing: "0.08em",
                color: "#0a0a0a",
                lineHeight: 1.5
              }}>
                <div style={{
                  fontSize: 9, letterSpacing: "0.2em",
                  color: "var(--tjb-forest-2)",
                  textTransform: "uppercase",
                  marginBottom: 6
                }}>ships with</div>
                {r.deliverable}
              </div>
            </li>
          );
        })}
      </ol>

      <div style={{
        borderTop: "1px solid #0a0a0a",
        display: "grid",
        gridTemplateColumns: "1fr auto",
        alignItems: "center",
        padding: "24px 56px",
        gap: 24,
        background: "#0a0a0a",
        color: "#fafaf7"
      }}>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 12, letterSpacing: "0.16em",
          textTransform: "uppercase"
        }}>
          // Pricing sized to scope. We do not bill discovery calls.
        </div>
        <a href="#engage" style={{
          background: "var(--tjb-signal)", color: "#0a0a0a",
          padding: "14px 22px",
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 12, letterSpacing: "0.14em",
          textTransform: "uppercase", fontWeight: 700,
          textDecoration: "none"
        }}>
          Scope a project →
        </a>
      </div>
    </section>
  );
};

const ProcessC = () =>
<section id="process" style={{ borderBottom: "1px solid #0a0a0a", background: "#0a0a0a", color: "#fafaf7" }}>
    <div style={{
    display: "grid",
    gridTemplateColumns: "240px 1fr",
    borderBottom: "1px solid rgba(255,255,255,0.2)"
  }}>
      <div style={{
      borderRight: "1px solid rgba(255,255,255,0.2)",
      padding: 32,
      display: "flex", flexDirection: "column",
      justifyContent: "space-between", gap: 24
    }}>
        <div style={{
        fontSize: 80, fontWeight: 700,
        letterSpacing: "-0.04em", lineHeight: 1,
        color: "var(--tjb-signal)"
      }}>04</div>
        <div style={{
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11, letterSpacing: "0.2em",
        textTransform: "uppercase", color: "rgba(255,255,255,0.6)"
      }}>§ Engagement</div>
      </div>
      <div style={{ padding: "32px 56px" }}>
        <h2 style={{
        fontSize: "var(--d-h2)", fontWeight: 600,
        letterSpacing: "-0.025em", lineHeight: 1.05,
        margin: 0, textWrap: "balance"
      }}>
          How an engagement runs — <span style={{ color: "var(--tjb-signal)" }}>four phases</span>.
        </h2>
      </div>
    </div>
    <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)" }}>
      {[
    ["t=0d", "Posture review", "30-minute intake. We map what you run, who has access, what's logged."],
    ["t=14d", "Written brief", "A plain-English plan with priorities, costs, and what we're not doing yet."],
    ["t=30d", "Stand-up", "Tooling deployed. Logs flowing. First detections tuned. Backups verified."],
    ["t=∞", "Operate", "Monthly review. Quarterly tabletop. Reachable when it matters. No mystery invoices."]].
    map(([t, h, d], i) =>
    <div key={t} style={{
      padding: "var(--d-card-pad)",
      display: "flex", flexDirection: "column", gap: 16,
      minHeight: 340
    }}>
          <div style={{
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11, letterSpacing: "0.16em",
        color: "var(--tjb-signal)"
      }}>{t}</div>
          <h3 style={{
        fontSize: 32, fontWeight: 600,
        letterSpacing: "-0.025em",
        margin: 0
      }}>{h}</h3>
          <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: "rgba(255,255,255,0.7)" }}>{d}</p>
        </div>
    )}
    </div>
  </section>;


const IndustriesC = () => {
  const items = [
  ["Healthcare", "PHI handling · device segmentation · M365 hardening"],
  ["Legal", "Client-data isolation · M365 · phishing-resistant identity"],
  ["Financial services", "Transaction monitoring · fraud-aware controls"],
  ["Manufacturing", "OT/IT separation · ransomware resilience"],
  ["Public sector", "Lean budgets · cloud migrations · device fleets"],
  ["Professional services", "M&A integrations · scaling · mobile workforce"]];

  return (
    <section id="industries" style={{ borderBottom: "1px solid #0a0a0a" }}>
      <SectionHeadC
        idx="05"
        kicker="Industries"
        title="Where regulators are watching."
        sub="Small and mid-market organizations in environments where a quiet breach is an existential one." />
      
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)" }}>
        {items.map((it, i) =>
        <div key={it[0]} style={{
          padding: "var(--d-card-pad)",
          background: i % 2 === 0 ? "transparent" : "rgba(20,61,43,0.04)",
          minHeight: 280,
          display: "flex", flexDirection: "column",
          justifyContent: "space-between", gap: 24
        }}>
            <div style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 11, letterSpacing: "0.2em",
            color: "var(--tjb-forest-2)"
          }}>0{i + 1} · sector</div>
            <div>
              <h3 style={{ fontSize: 32, fontWeight: 600, letterSpacing: "-0.025em", margin: "0 0 8px" }}>{it[0]}</h3>
              <p style={{ margin: 0, fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#3b4640", letterSpacing: "0.05em" }}>{it[1]}</p>
            </div>
          </div>
        )}
      </div>
    </section>);

};

const CaseC = () =>
<section id="field" style={{ borderBottom: "1px solid #0a0a0a" }}>
    <SectionHeadC
    idx="06"
    kicker="Field record"
    title="Recent engagements."
    sub="Posture work under standing retainer, hardening projects, and incident response — by name, with the work that mattered." />
  
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}>
      <CaseCardC
      clientName="MSB Communications"
      sectorTag="TELECOM · MANAGED COMMS"
      timeframe="STANDING ENGAGEMENT · 2024 – present"
      accent={false}
      lede={<>
          MSBC faced technical risk that many SMBs face. They had done just enough. But after what TJB engineered for MSBC, all incidents responded to were small, and auditors mentioned that their <mark style={{ background: "var(--tjb-signal)", padding: "0 4px" }}>incident response</mark>, among other things, was one of the most prepared set of processes for an audit they had seen.
        </>}
      note="// Nine passing audit cycles thanks to TJB."
      metrics={[
      ["3", "Sites segmented"],
      ["100%", "MFA enforced"],
      ["12", "Incidents handled"]]
      } />
    
      <CaseCardC
      clientName="GOVERNANCE Ltd"
      sectorTag="GRC PARTNER · TECHNICAL ARM"
      timeframe="PARTNERSHIP · 2024 – present"
      accent={true}
      lede={<>
          TJB is the <mark style={{ background: "var(--tjb-signal)", padding: "0 4px" }}>technical-security arm</mark> behind GOVERNANCE Ltd's GRC work — we close the technical gaps their audits surface, build the controls behind their policies, and mobilize incident response when their clients need hands on the keyboard.
        </>}
      note="// Joint engagements across healthcare and communications."
      metrics={[
      ["2", "Joint engagements"],
      ["20", "Audits supported"],
      ["12", "IR mobilizations"]]
      } />
    
    </div>
  </section>;


const CaseCardC = ({ clientName, sectorTag, timeframe, lede, note, metrics, accent }) =>
<div style={{
  padding: "var(--d-card-pad)",
  display: "flex", flexDirection: "column", gap: 28,
  background: accent ? "var(--tjb-forest)" : "transparent",
  color: accent ? "#fafaf7" : "#0a0a0a",
  minHeight: 540
}}>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
      <span style={{
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 11, letterSpacing: "0.2em",
      color: accent ? "var(--tjb-signal)" : "var(--tjb-forest-2)"
    }}>{sectorTag}</span>
      <span style={{
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 10, letterSpacing: "0.18em",
      color: accent ? "rgba(255,255,255,0.55)" : "#5b6660"
    }}>{timeframe}</span>
    </div>
    <h3 style={{
    fontSize: 44, fontWeight: 600,
    letterSpacing: "-0.025em",
    lineHeight: 1.05,
    margin: 0
  }}>{clientName}</h3>
    <p style={{
    fontSize: 20, lineHeight: 1.45,
    letterSpacing: "-0.005em",
    margin: 0,
    color: accent ? "rgba(255,255,255,0.92)" : "#0a0a0a",
    textWrap: "pretty",
    flex: 1
  }}>{lede}</p>
    <div style={{
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 12, letterSpacing: "0.1em",
    color: accent ? "rgba(255,255,255,0.55)" : "#5b6660"
  }}>{note}</div>
    <div style={{
    display: "grid",
    gridTemplateColumns: `repeat(${metrics.length}, 1fr)`,
    borderTop: accent ? "1px solid rgba(255,255,255,0.25)" : "1px solid rgba(10,10,10,0.15)",
    paddingTop: 24,
    gap: 24
  }}>
      {metrics.map(([n, l]) =>
    <div key={l}>
          <div style={{
        fontSize: 40, fontWeight: 700,
        letterSpacing: "-0.03em", lineHeight: 1,
        color: accent ? "var(--tjb-signal)" : "var(--tjb-forest)"
      }}>{n}</div>
          <div style={{
        marginTop: 8,
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11, letterSpacing: "0.12em",
        textTransform: "uppercase",
        color: accent ? "rgba(255,255,255,0.65)" : "#5b6660"
      }}>{l}</div>
        </div>
    )}
    </div>
  </div>;


const AboutC = () =>
<section id="about" style={{ borderBottom: "1px solid #0a0a0a" }}>
    <SectionHeadC
    idx="07"
    kicker="About"
    title="Operator-led. Engineered, not assembled."
    sub="Every engagement is principal-led. No tier-one queue to be handed off to. No vendor recommended that TJB would not run itself. No alert delivered without context." />
  
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr" }}>
      <div style={{
      padding: "var(--d-card-pad)",
      display: "flex", flexDirection: "column", gap: 16
    }}>
        <img src="assets/the-founder.webp" alt="Tim Brewer — Founder" style={{ width: "100%", height: "auto", aspectRatio: "1/1", objectFit: "cover", border: "1px solid #0a0a0a", background: "#f0ece2", display: "block" }} />
        <div>
          <div style={{ fontSize: 20, fontWeight: 600 }}>Tim Brewer</div>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#5b6660", letterSpacing: "0.14em", textTransform: "uppercase", marginTop: 4 }}>Principal · Founder</div>
        </div>
      </div>
      <div style={{
      padding: "var(--d-card-pad)",
      display: "flex", flexDirection: "column", gap: 20
    }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.2em", color: "var(--tjb-forest-2)" }}>// background</div>
        <p style={{ margin: 0, fontSize: 16, lineHeight: 1.6 }}>15+ years across network engineering, cloud architecture, and incident response. Hands kept on tools — Cisco to Juniper to Rapid7 — not abstracted away into slide decks.

      </p>
        <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: "#3b4640" }}>
          Founded in 2024 after watching small organizations get sold software they did not need and miss the breach they did. TJB exists to do the work that quietly keeps that from happening.
        </p>
      </div>
      <div style={{
      padding: "var(--d-card-pad)",
      display: "flex", flexDirection: "column", gap: 20
    }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.2em", color: "var(--tjb-forest-2)" }}>// principles</div>
        <ul style={{ margin: 0, paddingLeft: 18, fontSize: 15, lineHeight: 1.8 }}>
          <li>No mystery invoices.</li>
          <li>No vendor TJB would not run itself.</li>
          <li>No alert delivered without tuning.</li>
          <li>No client TJB cannot pick up the phone for.</li>
        </ul>
      </div>
    </div>
  </section>;


const EngagementC = () => {
  const models = [
  {
    tag: "RTN",
    kind: "Retainer",
    lede: "Ongoing security operations. Best for organizations that need continuous monitoring, monthly hardening work, and a known number to call when something is wrong.",
    includes: [
    "Continuous monitoring & detection",
    "Quarterly hardening sprints",
    "Monthly written report",
    "Defined response SLA",
    "Standing incident-response coverage"],

    response: "Tier-1 alerts triaged within 15 min.",
    foot: "Sized to seats, sites, and risk profile. Multi-year discount available.",
    accent: false
  },
  {
    tag: "PRJ",
    kind: "Project",
    lede: "A defined piece of work with a start and an end. Cloud migration, M365 hardening, network re-design, SIEM build-out, identity rollout.",
    includes: [
    "Written scope & success criteria",
    "Fixed-fee or T&M, your choice",
    "Hand-off documentation",
    "30-day post-launch support",
    "Optional retainer to follow"],

    response: "Project kickoff within 2 weeks of signed scope.",
    foot: "Quoted from a written scope. We do not bill discovery calls.",
    accent: false
  },
  {
    tag: "IR",
    kind: "Incident",
    lede: "Something is happening right now. Active intrusion, suspected compromise, ransomware. Engage TJB and we mobilize — forensics, eviction, recovery.",
    includes: [
    "Mobilization within 1 hour",
    "Containment & forensic capture",
    "Eviction & tenant rebuild",
    "Written post-incident report",
    "Carry-over to retainer if desired"],

    response: "Boots on the keyboard in under an hour.",
    foot: "Hourly during the incident, with a not-to-exceed before we start.",
    accent: true
  }];

  return (
    <section id="engagement" style={{ borderBottom: "1px solid #0a0a0a" }}>
      <SectionHeadC
        idx="08"
        kicker="Engagement models"
        title="Three ways to work with TJB."
        sub="Every engagement starts with a written scope. We do not publish rates because they are sized to the work — retainers scale with seats and risk, projects are quoted from scope, incidents are billed by the hour with a not-to-exceed agreed before we start." />
      
      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(3, 1fr)"
      }}>
        {models.map((m, i) =>
        <article key={m.tag} style={{
          padding: "var(--d-card-pad)",
          borderRight: i < models.length - 1 ? "1px solid #0a0a0a" : "none",
          display: "flex", flexDirection: "column", gap: 20,
          background: m.accent ? "#0a0a0a" : "transparent",
          color: m.accent ? "#fafaf7" : "#0a0a0a",
          minHeight: 540
        }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
              <div style={{
              background: m.accent ? "var(--tjb-signal)" : "var(--tjb-forest)",
              color: m.accent ? "#0a0a0a" : "#fafaf7",
              padding: "4px 8px",
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 11, letterSpacing: "0.16em",
              fontWeight: 700
            }}>{m.tag}</div>
              <span style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 10, letterSpacing: "0.14em",
              color: m.accent ? "rgba(250,250,247,0.6)" : "#5b6660"
            }}>0{i + 1} / 03</span>
            </div>

            <h3 style={{
            fontSize: 40, fontWeight: 600,
            letterSpacing: "-0.025em",
            margin: 0, lineHeight: 1.0
          }}>{m.kind}.</h3>

            <p style={{
            margin: 0, fontSize: 15, lineHeight: 1.55,
            color: m.accent ? "rgba(250,250,247,0.78)" : "#3b4640"
          }}>{m.lede}</p>

            <div style={{
            borderTop: `1px solid ${m.accent ? "rgba(250,250,247,0.2)" : "#0a0a0a"}`,
            paddingTop: 16,
            display: "flex", flexDirection: "column", gap: 10
          }}>
              <div style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 10, letterSpacing: "0.2em",
              textTransform: "uppercase",
              color: m.accent ? "rgba(250,250,247,0.55)" : "#5b6660"
            }}>// Included</div>
              {m.includes.map((t) =>
            <div key={t} style={{
              display: "grid",
              gridTemplateColumns: "14px 1fr",
              gap: 10,
              fontSize: 14, lineHeight: 1.45
            }}>
                  <span style={{
                fontFamily: "'JetBrains Mono', monospace",
                color: m.accent ? "var(--tjb-signal)" : "var(--tjb-forest)",
                fontWeight: 700
              }}>+</span>
                  <span>{t}</span>
                </div>
            )}
            </div>

            <div style={{
            marginTop: "auto",
            display: "flex", flexDirection: "column", gap: 8,
            paddingTop: 16,
            borderTop: `1px solid ${m.accent ? "rgba(250,250,247,0.2)" : "#0a0a0a"}`
          }}>
              <div style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 10, letterSpacing: "0.2em",
              textTransform: "uppercase",
              color: m.accent ? "rgba(250,250,247,0.55)" : "#5b6660"
            }}>// Response</div>
              <p style={{
              margin: 0, fontSize: 14, lineHeight: 1.5,
              color: m.accent ? "#fafaf7" : "#0a0a0a",
              fontWeight: 500
            }}>{m.response}</p>
              <p style={{
              margin: 0, fontSize: 12, lineHeight: 1.5,
              fontStyle: "italic",
              color: m.accent ? "rgba(250,250,247,0.55)" : "#5b6660"
            }}>{m.foot}</p>
            </div>
          </article>
        )}
      </div>
    </section>);

};

const ResourcesC = () => {
  const items = [
    {
      tag: "NET",
      idx: "01",
      title: "Managed Network Security",
      kicker: "Service brief",
      lede: "Your network has more exposure than you think. Risk-calibrated managed network security so you can stop guessing about your exposure and start knowing.",
      pages: "1 page · PDF",
      file: "assets/TJB-Network-Security-OnePager.pdf",
      contents: [
        "Network risk assessment — prioritised findings & roadmap",
        "Managed firewall & perimeter — continuous rule management",
        "Network monitoring & detection — 24/7 NTA, IDS/IPS",
        "Vulnerability management — risk-tiered remediation"
      ]
    },
    {
      tag: "CLD",
      idx: "02",
      title: "Managed Cloud Security",
      kicker: "Service brief",
      lede: "Your cloud provider secures the infrastructure. The rest is on you. Continuous cloud security operations so your environment stays assessed, monitored, and controlled — not just deployed.",
      pages: "1 page · PDF",
      file: "assets/TJB-Cloud-Security-OnePager.pdf",
      contents: [
        "Cloud risk assessment — config, IAM, data, monitoring",
        "Cloud Security Posture Management (CSPM)",
        "Identity & access — least-privilege, MFA, stale removal",
        "24/7 monitoring across AWS, Azure, and GCP"
      ]
    },
    {
      tag: "SEC",
      idx: "03",
      title: "Managed Cybersecurity",
      kicker: "Service brief",
      lede: "You have the tools. Do you have the operation behind them? Risk-based managed cybersecurity that turns security investment into security resilience — continuously, not periodically.",
      pages: "1 page · PDF",
      file: "assets/TJB-Cybersecurity-OnePager.pdf",
      contents: [
        "Cybersecurity risk assessment — benchmarked to your sector",
        "Managed detection & response — 24/7 triage & containment",
        "Phishing & social-engineering defence — DMARC/DKIM/SPF",
        "Incident response — containment, recovery, post-incident review"
      ]
    }
  ];

  return (
    <section id="resources" style={{ borderBottom: "1px solid #0a0a0a" }}>
      <SectionHeadC
        idx="09"
        kicker="Resources"
        title="Service briefs — one page each."
        sub="Risk-calibrated managed security operations, by discipline. The challenge in your environment, what TJB delivers, and why operators choose us. Send to your team before the posture review." />

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)" }}>
        {items.map((r, i) =>
          <article key={r.tag} style={{
            padding: "var(--d-card-pad)",
            borderRight: i < items.length - 1 ? "1px solid #0a0a0a" : "none",
            display: "flex", flexDirection: "column", gap: 22,
            minHeight: 440
          }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
              <div style={{
                background: "var(--tjb-forest)", color: "#fafaf7",
                padding: "4px 8px",
                fontFamily: "'JetBrains Mono', monospace",
                fontSize: 11, letterSpacing: "0.16em",
                fontWeight: 700
              }}>{r.tag}</div>
              <span style={{
                fontFamily: "'JetBrains Mono', monospace",
                fontSize: 10, letterSpacing: "0.14em",
                color: "#5b6660"
              }}>{r.idx} / 03 · {r.pages}</span>
            </div>

            <h3 style={{
              fontSize: 30, fontWeight: 600,
              letterSpacing: "-0.025em",
              margin: 0, lineHeight: 1.05
            }}>{r.title}.</h3>

            <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: "#3b4640" }}>{r.lede}</p>

            <div style={{
              borderTop: "1px solid rgba(10,10,10,0.15)",
              paddingTop: 16,
              display: "flex", flexDirection: "column", gap: 10
            }}>
              <div style={{
                fontFamily: "'JetBrains Mono', monospace",
                fontSize: 10, letterSpacing: "0.2em",
                textTransform: "uppercase",
                color: "#5b6660"
              }}>// What we deliver</div>
              {r.contents.map((t) =>
                <div key={t} style={{
                  display: "grid",
                  gridTemplateColumns: "14px 1fr",
                  gap: 10,
                  fontSize: 13, lineHeight: 1.45
                }}>
                  <span style={{
                    fontFamily: "'JetBrains Mono', monospace",
                    color: "var(--tjb-forest)",
                    fontWeight: 700
                  }}>+</span>
                  <span>{t}</span>
                </div>
              )}
            </div>

            <a href={r.file} target="_blank" rel="noopener" style={{
              marginTop: "auto",
              display: "inline-flex", alignItems: "center", justifyContent: "space-between",
              background: "#0a0a0a", color: "#fafaf7",
              padding: "16px 20px",
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 12, letterSpacing: "0.14em",
              textTransform: "uppercase", fontWeight: 700,
              textDecoration: "none"
            }}>
              <span>Download PDF</span><span aria-hidden="true">↓</span>
            </a>
          </article>
        )}
      </div>

      <div style={{
        borderTop: "1px solid #0a0a0a",
        display: "grid",
        gridTemplateColumns: "1fr auto",
        alignItems: "center",
        padding: "28px 56px",
        gap: 24,
        background: "#f0ece2"
      }}>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 12, letterSpacing: "0.16em",
          textTransform: "uppercase",
          color: "#0a0a0a"
        }}>
          // Need a tailored brief or a deck for your board? Email and we’ll send one over.
        </div>
        <a href="mailto:hello@tjb.llc?subject=Tailored%20brief%20request" style={{
          background: "var(--tjb-forest)", color: "#fafaf7",
          padding: "14px 22px",
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 12, letterSpacing: "0.14em",
          textTransform: "uppercase", fontWeight: 700,
          textDecoration: "none"
        }}>
          Request a tailored brief →
        </a>
      </div>
    </section>);

};


const ContactC = () =>
<section id="engage" style={{ borderBottom: "1px solid #0a0a0a" }}>
    <SectionHeadC idx="10" kicker="Engage" title="Start with a 30-minute posture review." sub="No deck, no sales engineer — just questions. We send a written brief the next day." />
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1.5fr" }}>
      <div style={{
      padding: "var(--d-card-pad)",
      background: "#0a0a0a", color: "#fafaf7",
      display: "flex", flexDirection: "column", justifyContent: "space-between",
      gap: 24
    }}>
        <div style={{
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11, letterSpacing: "0.2em",
        color: "var(--tjb-signal)"
      }}>// direct</div>
        <div style={{ display: "grid", gap: 24 }}>
          <ContactRowC k="Email" v="hello@tjb.llc" />
          <ContactRowC k="Phone" v="+1 (806) 583-5001" />
          <ContactRowC k="Area" v="West Texas · remote-capable" />
          <ContactRowC k="Hours" v="M-F 10-6 CT (excluding US Federal holidays)" />
        </div>
        <div style={{
        paddingTop: 24,
        borderTop: "1px solid rgba(255,255,255,0.15)",
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11, letterSpacing: "0.14em",
        color: "rgba(255,255,255,0.5)"
      }}>RESPONSE SLA · 1 BUSINESS DAY</div>
      </div>
      <ContactFormC />
    </div>
  </section>;


// ContactFormC — POSTs to /send.php (SendGrid bridge). In the static preview
// there's no PHP runtime, so a non-200 falls back to a friendly note rather
// than throwing. Loading + success + error states are inline so the user
// never leaves the page.
const ContactFormC = () => {
  const [state, setState] = React.useState({ status: 'idle', error: '' });

  const onSubmit = async (e) => {
    e.preventDefault();
    if (state.status === 'sending') return;
    const form = e.currentTarget;
    const fd = new FormData(form);
    const payload = Object.fromEntries(fd.entries());
    setState({ status: 'sending', error: '' });
    try {
      const r = await fetch('assets/send.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const j = await r.json().catch(() => ({}));
      if (r.ok && j.ok) {
        setState({ status: 'sent', error: '' });
        form.reset();
      } else {
        setState({ status: 'error', error: j.error || 'Could not send. Please email hello@tjb.llc.' });
      }
    } catch (_) {
      setState({ status: 'error', error: 'Network error. Please email hello@tjb.llc.' });
    }
  };

  if (state.status === 'sent') {
    return (
      <div style={{
        padding: "var(--d-card-pad)",
        display: "flex", flexDirection: "column", justifyContent: "center",
        gap: 20
      }}>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 11, letterSpacing: "0.2em",
          color: "var(--tjb-forest-2)"
        }}>// received</div>
        <h3 style={{
          fontSize: 40, fontWeight: 600, letterSpacing: "-0.025em",
          margin: 0, lineHeight: 1.05
        }}>Brief request received.</h3>
        <p style={{ margin: 0, fontSize: 16, lineHeight: 1.55, color: "#3b4640", maxWidth: 480 }}>
          We'll reply within one business day with questions and a proposed time. If it's urgent, call <strong>+1 (806) 583-5001</strong>.
        </p>
      </div>);

  }

  return (
    <form onSubmit={onSubmit} style={{
      padding: "var(--d-card-pad)",
      display: "grid", gap: 20
    }}>
      {/* Honeypot — kept off-screen, bots fill it, humans don't see it. */}
      <div style={{ position: "absolute", left: "-9999px", top: "auto", width: 1, height: 1, overflow: "hidden" }} aria-hidden="true">
        <label>Website<input type="text" name="website" tabIndex={-1} autoComplete="off" /></label>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
        <FieldC name="name" label="Name" placeholder="Jane Doe" required />
        <FieldC name="company" label="Company" placeholder="Acme Co." />
        <FieldC name="email" label="Email" type="email" placeholder="jane@acme.com" required />
        <FieldC name="headcount" label="Headcount" placeholder="10 – 200" />
      </div>
      <FieldC name="message" label="What's the trigger?" placeholder="A breach, a strange login, a Tuesday that didn't sit right…" textarea required />

      <div style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        marginTop: 8, gap: 16, flexWrap: "wrap"
      }}>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 11, letterSpacing: "0.14em",
          color: state.status === 'error' ? "#c44545" : "#5b6660"
        }}>
          {state.status === 'error' ? `// ${state.error}` : '// encrypted in transit'}
        </div>
        <button type="submit" disabled={state.status === 'sending'} style={{
          background: "var(--tjb-forest)", color: "#fafaf7",
          border: 0, padding: "16px 28px",
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 12, letterSpacing: "0.14em",
          fontWeight: 700, textTransform: "uppercase",
          cursor: state.status === 'sending' ? "wait" : "pointer",
          opacity: state.status === 'sending' ? 0.7 : 1
        }}>
          {state.status === 'sending' ? 'Sending…' : 'Request brief →'}
        </button>
      </div>
    </form>);

};


const ContactRowC = ({ k, v }) =>
<div>
    <div style={{
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 10, letterSpacing: "0.2em",
    textTransform: "uppercase",
    color: "rgba(255,255,255,0.5)",
    marginBottom: 6
  }}>{k}</div>
    <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: "-0.01em" }}>{v}</div>
  </div>;


const FieldC = ({ label, placeholder, type = "text", textarea, name, required }) =>
<label style={{ display: "block" }}>
    <span style={{
    display: "block",
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 10, letterSpacing: "0.2em",
    textTransform: "uppercase",
    color: "var(--tjb-forest-2)",
    marginBottom: 8
  }}>{label}{required ? <span style={{ color: "#c44545", marginLeft: 4 }}>*</span> : null}</span>
    {textarea ?
  <textarea name={name} rows={3} placeholder={placeholder} required={required} style={{
    width: "100%", padding: 14,
    border: "1px solid #0a0a0a", background: "transparent",
    fontFamily: "'Space Grotesk', sans-serif",
    fontSize: 15, color: "#0a0a0a",
    outline: "none", resize: "vertical"
  }} /> :
  <input name={name} type={type} placeholder={placeholder} required={required} style={{
    width: "100%", padding: 14,
    border: "1px solid #0a0a0a", background: "transparent",
    fontFamily: "'Space Grotesk', sans-serif",
    fontSize: 16, color: "#0a0a0a",
    outline: "none"
  }} />}
  </label>;


const FooterC = () =>
<footer style={{
  display: "grid",
  gridTemplateColumns: "2fr 1fr 1fr 1fr"
}}>
    {[
  <div key="brand" style={{ padding: 0, position: "relative", display: "flex", flexDirection: "column" }}>
        <div style={{
      width: 180, height: 180,
      display: "flex", alignItems: "center", justifyContent: "center"
    }}>
          <img src="assets/tjb-logo.png" alt="TJB.llc — Networking & Cybersecurity"
      style={{
        width: "100%", height: "100%",
        objectFit: "contain",
        mixBlendMode: "multiply",
        display: "block"
      }} />
      
        </div>
        <div style={{ padding: "0 32px 32px" }}>
        <p style={{
        marginTop: 16, fontSize: 13, lineHeight: 1.6,
        color: "#3b4640", maxWidth: 320
      }}>
          A Managed Security Service Provider.<br />Est. 2024.
        </p>
        <div style={{
        marginTop: 24,
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11, letterSpacing: "0.16em",
        color: "#5b6660"
      }}>© 2026 TJB.LLC · ALL RIGHTS RESERVED</div>
        </div>
      </div>,
  ...[
  ["Services", [
  ["Network", "#services"],
  ["Cloud", "#services"],
  ["Detection", "#services"],
  ["Endpoint", "#services"],
  ["Identity", "#services"],
  ["Vulnerability", "#services"],
  ["Firewall", "#services"],
  ["Backup", "#services"],
  ["Incident Response", "#services"]]],

  ["Company", [
  ["About", "#about"],
  ["Build & advise", "#build"],
  ["Industries", "#industries"],
  ["Field record", "#field"],
  ["Resources", "#resources"]]],

  ["Connect", [
  ["hello@tjb.llc", "mailto:hello@tjb.llc"],
  ["Engage", "#engage"],
  ["Client portal ↗", "https://secure.tjb.llc"]]]].

  map(([h, items], i) =>
  <div key={h} style={{
    padding: 32
  }}>
          <div style={{
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 11, letterSpacing: "0.2em",
      textTransform: "uppercase", color: "var(--tjb-forest-2)",
      marginBottom: 14
    }}>{h}</div>
          <div style={{ display: "grid", gap: 8, fontSize: 13 }}>
            {items.map((it) => {
        if (Array.isArray(it)) {
          const [label, href] = it;
          return <a key={label} href={href} style={{ color: "inherit", textDecoration: "none", borderBottom: "1px solid transparent" }}
          onMouseEnter={(e) => e.currentTarget.style.borderBottomColor = "#0a0a0a"}
          onMouseLeave={(e) => e.currentTarget.style.borderBottomColor = "transparent"}>{label}</a>;
        }
        return <span key={it}>{it}</span>;
      })}
          </div>
        </div>
  )]
  }
  </footer>;


window.DirectionC = DirectionC;