// Our Tech — what we run, written like a spec sheet, not marketing.
// Three columns: Pipeline (DCC/render), Generative stack, Finishing.

const TECH_GROUPS = [
  {
    label: "Pipeline · DCC",
    rows: [
      ["Comp",        "Nuke 15 · Fusion"],
      ["3D",          "Houdini 20 · Blender 4"],
      ["Render",      "Karma · Redshift · Cycles"],
      ["Tracking",    "3DEqualizer · SynthEyes"],
      ["Roto/Paint",  "Silhouette · Mocha Pro"],
    ],
  },
  {
    label: "Generative · AI",
    rows: [
      ["Video",       "Veo · Runway · Kling"],
      ["Image",       "Flux · SDXL · Imagen"],
      ["Conditioning","ControlNet · IP-Adapter · LoRA"],
      ["Inference",   "ComfyUI · in-house wrappers"],
      ["Audio",       "ElevenLabs · UDIO (where licensed)"],
    ],
  },
  {
    label: "Finishing · Delivery",
    rows: [
      ["Online",      "Resolve Studio 19"],
      ["Color",       "ACES · DaVinci YRGB · CDL"],
      ["Editorial",   "Premiere · After Effects · Avid"],
      ["Mastering",   "DCP · IMF · ProRes · DNxHR"],
      ["QC",          "Tektronix scope · waveform pass"],
    ],
  },
];

const NUMBERS = [
  { v: "5", lbl: "Rooms", sub: "Capabilities under one roof" },
  { v: "4K", lbl: "Mastering", sub: "Through to UHD HDR delivery" },
  { v: "ACES", lbl: "Color", sub: "Standard pipeline, every job" },
  { v: "EXR", lbl: "Native", sub: "Half-float, multi-channel" },
];

const TechSection = () => (
  <SectionWrap id="tech" label="Our Tech">
    <SectionHeader
      index="02"
      eyebrow="Our Tech"
      title={<>What we<br />actually run.</>}
      meta="STACK · v.2026.Q1"
    />

    {/* Big numbers row */}
    <div style={{
      display: "grid",
      gridTemplateColumns: "repeat(4, 1fr)",
      gap: 0,
      marginBottom: 96,
      borderTop: "1px solid var(--jh-rule-strong)",
      borderBottom: "1px solid var(--jh-rule-strong)",
    }}>
      {NUMBERS.map((n, i) => (
        <div key={i} style={{
          padding: "32px 24px",
          borderRight: i < NUMBERS.length - 1 ? "1px solid var(--jh-rule)" : "none",
          display: "flex", flexDirection: "column", gap: 8,
        }}>
          <span style={{
            fontFamily: "var(--jh-font-display)",
            fontWeight: 900,
            fontSize: 72,
            lineHeight: 0.9,
            letterSpacing: "-0.03em",
            color: "var(--jh-fg)",
          }}>{n.v}</span>
          <span style={{
            fontFamily: "var(--jh-font-mono)",
            fontSize: 11,
            letterSpacing: "0.22em",
            textTransform: "uppercase",
            color: "var(--jh-amber)",
          }}>{n.lbl}</span>
          <span style={{
            fontFamily: "var(--jh-font-serif)",
            fontStyle: "italic",
            fontSize: 13,
            color: "var(--jh-fg-3)",
          }}>{n.sub}</span>
        </div>
      ))}
    </div>

    {/* Three-column spec sheet */}
    <div style={{
      display: "grid",
      gridTemplateColumns: "repeat(3, 1fr)",
      gap: 0,
    }}>
      {TECH_GROUPS.map((g, i) => (
        <div key={i} style={{
          padding: "0 32px",
          borderRight: i < TECH_GROUPS.length - 1 ? "1px solid var(--jh-rule)" : "none",
          paddingLeft: i === 0 ? 0 : 32,
          paddingRight: i === TECH_GROUPS.length - 1 ? 0 : 32,
        }}>
          <h3 style={{
            fontFamily: "var(--jh-font-mono)",
            fontWeight: 500,
            fontSize: 11,
            letterSpacing: "0.32em",
            textTransform: "uppercase",
            color: "var(--jh-amber)",
            margin: "0 0 24px 0",
          }}>{g.label}</h3>
          <dl style={{ margin: 0 }}>
            {g.rows.map(([k, v], j) => (
              <div key={j} style={{
                display: "grid",
                gridTemplateColumns: "100px 1fr",
                gap: 16,
                padding: "16px 0",
                borderTop: "1px solid var(--jh-rule)",
                borderBottom: j === g.rows.length - 1 ? "1px solid var(--jh-rule)" : "none",
                alignItems: "baseline",
              }}>
                <dt style={{
                  fontFamily: "var(--jh-font-mono)",
                  fontSize: 11,
                  letterSpacing: "0.18em",
                  textTransform: "uppercase",
                  color: "var(--jh-fg-3)",
                  margin: 0,
                }}>{k}</dt>
                <dd style={{
                  fontFamily: "var(--jh-font-serif)",
                  fontSize: 15,
                  color: "var(--jh-fg)",
                  margin: 0,
                  lineHeight: 1.4,
                }}>{v}</dd>
              </div>
            ))}
          </dl>
        </div>
      ))}
    </div>

    <p style={{
      marginTop: 48,
      fontFamily: "var(--jh-font-serif)",
      fontStyle: "italic",
      fontSize: 16,
      color: "var(--jh-fg-2)",
      maxWidth: "72ch",
    }}>
      The list above is what the projects actually need. We swap tools when the job changes — Maya, Mistika, OpenColorIO configs, custom training pipelines for archival recovery — happy to read your sup's pipeline doc and match it.
    </p>
  </SectionWrap>
);
window.TechSection = TechSection;