/* global React, HeartRow, Panel, Badge, Chapter, StatLine, CounterHUD, PixelBtn, QuestLog, PixelImagePlaceholder, PixelSprite, PixelCharacter, Typewriter, PixelDivider */

// ============================================================================
// RAID — ENTERPRISE VR (Pharma client)
// ============================================================================

const PHARMA_HIGHLIGHTS = [
  {
    icon: "sword",
    title: "TEAM LEAD",
    body: "Managed a team of four engineers across the build — sprint planning, code review, architecture calls, and unblocking. Shipped alongside them, not above them.",
  },
  {
    icon: "gem",
    title: "WATCH",
    body: "Designed and built an in-VR wrist watch that lets the user slect chapters, track progress, edit settings, and more — all without breaking immersion by taking off the headset.",
  },
  {
    icon: "chest",
    title: "COGNITIVE3D",
    body: "Integrated Cognitive3D session recording so every training run is replayable: gaze, hand, and event data captured for clinical review.",
  },
];

const PHARMA_INTEGRATIONS = [
  { name: "Cognitive3D", note: "Session recording + heatmaps" },
  { name: "SkillsVR Enterprise", note: "Auth + content delivery" },
  { name: "Meta Quest / PICO", note: "Multi-headset deployment" },
  { name: "Unity 6 LTS", note: "Engine target" },
];

function EnterpriseVR() {
  return (
    <section id="pharma" className="stone-bg" style={{ paddingTop: 80, paddingBottom: 100 }}>
      <div className="wrap">
        <Chapter
          tag="★ FEATURED PROJECT II"
          title="ENTERPRISE VR"
          sub="A 50-module VR training program for a Fortune 500 pharmaceutical company."
        />

        <Panel variant="dark" style={{ marginBottom: 32 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
            <div>
              <div className="px-sm" style={{ color: "var(--gold)", marginBottom: 6 }}>★ FORTUNE 500 PHARMA</div>
              <div style={{ fontSize: 22, color: "var(--parchment-2)" }}>Built on top of the CCK — fifty modules, one shared toolchain.</div>
            </div>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <CounterHUD icon="✦" label="MODULES" value="50" />
              <CounterHUD icon="◆" label="TEAM" value="4 ENG" />
              <CounterHUD icon="★" label="ROLE" value="LEAD + DEV" />
            </div>
          </div>
        </Panel>

        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 32 }} className="mines-grid">
          <div className="stack">
            <Panel>
              <div className="px-sm" style={{ marginBottom: 12 }}>▸ THE BRIEF</div>
              <p style={{ fontSize: 21, lineHeight: 1.55, marginBottom: 14 }}>
                A Fortune 500 pharmaceutical client needed a VR training program covering fifty distinct surgical and procedural modules.
              </p>
              <p style={{ fontSize: 21, lineHeight: 1.55, marginBottom: 0 }}>
                I led a team of four engineers and built modules myself - splitting time between architecture, hands-on Unity work, and feature ownership for the cross-cutting systems that all fifty modules depend on.
              </p>
            </Panel>

            <Panel variant="simple">
              <div className="px-sm" style={{ marginBottom: 10 }}>▸ WHAT I OWNED</div>
              <QuestLog entries={[
                { done: true, text: "Led 4-engineer team — planning, review, architecture" },
                { done: true, text: "Built modules end-to-end alongside the team" },
                { done: true, text: "Integrated Cognitive3D for full session replay" },
                { done: true, text: "Wired SkillsVR Enterprise auth + delivery into every module" },
                { done: true, text: "Standardised the module template so all 50 ship the same way" },
              ]} />
            </Panel>
          </div>

          <div className="stack">
            {PHARMA_HIGHLIGHTS.map((h, i) => (
              <Panel key={i} variant="simple" tight>
                <div style={{ display: "flex", alignItems: "flex-start", gap: 14 }}>
                  <div style={{ flexShrink: 0, padding: 6, background: "var(--parchment-3)", boxShadow: "0 0 0 3px var(--ink)" }}>
                    <PixelSprite kind={h.icon} size={36} />
                  </div>
                  <div style={{ flex: 1 }}>
                    <div className="px-xs" style={{ marginBottom: 6 }}>{h.title}</div>
                    <p style={{ fontSize: 19, lineHeight: 1.5, margin: 0 }}>{h.body}</p>
                  </div>
                </div>
              </Panel>
            ))}
          </div>
        </div>

        <div style={{ marginTop: 40 }}>
          <PixelDivider>STACK & INTEGRATIONS</PixelDivider>
          <div className="grid-2" style={{ marginTop: 24 }}>
            {PHARMA_INTEGRATIONS.map((it, i) => (
              <Panel key={i} variant="simple" tight>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12 }}>
                  <div className="px-xs">{it.name}</div>
                  <div style={{ fontSize: 18, color: "var(--ink-soft)" }}>{it.note}</div>
                </div>
              </Panel>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { EnterpriseVR });