window.SectionResources = () => {
  const { Section, Card, Tag, Bullet } = window.BITSUI;
  const { Cpu, Users, Shield, Spark, Check, Layers, Book, Bolt } = window.BITSIcons;
  const [selected, setSelected] = React.useState(null);

  // 20-engineer AI-augmented team. PRD + architecture handled by experienced
  // architects with deep care; product + delivery held by PMs; implementation
  // executed by full-stack + mobile full-stack engineers augmented with AI agents.
  const roles = [
    {
      name: "Solution Architect (Lead)",
      count: 1,
      kind: "Architect",
      allocation: "Full-time",
      focus: "PRD stewardship, system design, architectural stress-testing",
      phases: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
      note:
        "Owns the PRD and architecture end-to-end. Runs architectural stress-test simulations (load, failure modes, integration breakage) before a single line of feature code lands. Reviews every non-trivial PR.",
    },
    {
      name: "Solution Architect (Data + AI)",
      count: 1,
      kind: "Architect",
      allocation: "Full-time",
      focus: "Data model, voice nav + support, security + auth architecture",
      phases: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
      note:
        "Owns schema, event model, embedding strategy, intent-router taxonomy, tool-use design. Authors eval harness and jailbreak hardening plan.",
    },
    {
      name: "Product Manager (Lead)",
      count: 1,
      kind: "PM",
      allocation: "Full-time",
      focus: "BITSAA relationship, gate reviews, scope integrity",
      phases: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
      note:
        "Runs weekly gate reviews with BITSAA + BITS IT. Owns scope integrity across MVP / RFP / added-features anchors. Writes release notes + UAT scripts.",
    },
    {
      name: "Product Manager (Delivery)",
      count: 1,
      kind: "PM",
      allocation: "Full-time",
      focus: "Sprint planning, backlog grooming, dependency tracking",
      phases: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
      note:
        "Runs Agile ceremonies (standup, planning, retro). Tracks client-side dependencies (AlmaConnect export, brand assets, UAT volunteers). Owns ticket hygiene.",
    },
    {
      name: "Full-Stack Engineers",
      count: 4,
      kind: "Engineer",
      allocation: "Full-time",
      focus: "Backend services, admin web, API contracts, integrations",
      phases: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
      note:
        "Build 14 service modules + admin + integrations. Work with AI-agent orchestration (Claude, Cursor-style flows) for bulk scaffolding, writing tests first (TDD), and handling CRUD/migration volume. Senior humans own schema + security decisions.",
    },
    {
      name: "Mobile Full-Stack Engineers",
      count: 11,
      kind: "Engineer",
      allocation: "Full-time",
      focus: "React Native app, 65 screens, offline + push + biometrics",
      phases: [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
      note:
        "React Native + Expo. Translate prototype 1:1, wire real APIs, handle native quirks (notifications, biometrics, deep-linking). Own app store submission and release cycles. Agent-assisted for repetitive screen plumbing.",
    },
    {
      name: "QA + Automation Engineer",
      count: 1,
      kind: "QA",
      allocation: "Full-time",
      focus: "E2E automated testing (API + backend), browser-agent frontend testing",
      phases: [0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
      note:
        "Owns E2E API + backend tests, integration harness, browser-agent-driven frontend regression. Runs final manual pass across golden paths before QA approval at each gate.",
    },
  ];

  const teamTotal = roles.reduce((s, r) => s + r.count, 0);

  const weekLabels = [
    "W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8",
    "W9", "W10", "W11", "W12", "W13", "W14", "W15", "W16",
    "W17", "W18", "W19", "W20", "W21", "W22",
  ];

  const processStages = [
    {
      phase: "01",
      title: "PRD by experienced architects",
      body:
        "The PRD is authored — not transcribed — by senior solution architects. Every user story is stress-tested against edge cases, integration surface, failure modes, and data shape before it is approved. No stub text; no 'we'll figure it out later'.",
    },
    {
      phase: "02",
      title: "Architecture sign-off + simulation",
      body:
        "Schema, API surface, event model, and Voice Powered Navigation & Support topology are finalized on paper, then stress-tested via architectural simulation — synthetic load, partial-failure scenarios, integration breakage, authz escalation attempts — before feature code begins.",
    },
    {
      phase: "03",
      title: "Test-Driven Development (TDD)",
      body:
        "Every module starts with a failing test. Unit, integration, and contract tests are written before the implementation. AI agents draft the first pass; humans tighten the assertions. No untested code ships to main.",
    },
    {
      phase: "04",
      title: "Agentic orchestration for implementation",
      body:
        "AI agents execute the bulk of implementation against architect-authored specifications: CRUD, data migrations, admin screens, form flows, test fixtures. Each PR carries the spec, the diff, and the test suite. A human lead reviews and merges.",
    },
    {
      phase: "05",
      title: "E2E automated testing — API + backend",
      body:
        "Every service has E2E coverage: happy path, error paths, auth boundaries, rate limits. The test harness runs on every PR and nightly against staging. No gate closes with a red suite.",
    },
    {
      phase: "06",
      title: "Automated frontend testing via browser agents",
      body:
        "Browser-agent scripts drive the React Native app + admin panel across every golden path. Screenshot diffs catch visual regressions; action replays catch behavioral ones. Runs on every build.",
    },
    {
      phase: "07",
      title: "Final manual QA round",
      body:
        "Before any gate closes, a human QA engineer runs the full release checklist end-to-end on real devices — a final round of manual verification the automation cannot replace. Only then does QA approve the gate.",
    },
    {
      phase: "08",
      title: "CI/CD + sprint + Agile delivery",
      body:
        "GitHub Actions auto-deploys every merged PR through dev → staging → prod. Two-week sprints with standup, planning, retro. Gate reviews every Friday. Change requests routed through SOW addenda, never quietly absorbed.",
    },
  ];

  const kindTone = {
    Architect: "gold",
    PM: "navy",
    Engineer: "navy",
    QA: "gold",
  };

  return (
    <Section
      id="resources"
      eyebrow="Team & Process"
      title={<>20-engineer AI Augmented Software Development team. Senior judgment at every gate.</>}
      kicker="This is not a junior-heavy build-by-headcount quote. Twenty senior engineers — two solution architects, two product managers, four full-stack engineers, eleven mobile full-stack engineers, and a QA + automation lead — operate with AI agent assistance at every layer: PRD stress-testing, TDD scaffolding, E2E test generation, browser-agent regression, and final manual QA before any gate closes. The mobile bench is deep by design — 65 screens across six user classes, native platform work, and app-store cycles need parallelism, not heroics."
    >
      <div className="grid lg:grid-cols-12 gap-6">
        <Card className="lg:col-span-4 bg-gradient-to-br from-bits-deep to-bits-navy text-white border-transparent">
          <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-gold mb-3">
            <Spark width="14" height="14" /> How we staff
          </div>
          <h3 className="font-serif text-3xl leading-tight">
            20 engineers. AI augmented. Human owned.
          </h3>
          <p className="text-[13.5px] text-white/75 mt-3 leading-relaxed">
            Experienced architects handle PRD + architecture phases with care.
            Engineering is AI-augmented at every layer — from scaffolding to
            test generation to regression. Every gate closes only after a
            human QA pass.
          </p>
          <div className="mt-6 grid grid-cols-2 gap-4">
            <div>
              <div className="font-serif text-3xl text-bits-gold num leading-none">
                {teamTotal}
              </div>
              <div className="text-[12px] text-white/80 mt-1">Engineers on team</div>
            </div>
            <div>
              <div className="font-serif text-3xl text-bits-gold num leading-none">
                2+2
              </div>
              <div className="text-[12px] text-white/80 mt-1">Architects + PMs</div>
            </div>
            <div>
              <div className="font-serif text-3xl text-bits-gold num leading-none">
                4+3
              </div>
              <div className="text-[12px] text-white/80 mt-1">Full-stack + Mobile</div>
            </div>
            <div>
              <div className="font-serif text-3xl text-bits-gold num leading-none">
                16w
              </div>
              <div className="text-[12px] text-white/80 mt-1">Build window</div>
            </div>
          </div>
        </Card>

        <Card className="lg:col-span-8 overflow-hidden">
          <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-bits-goldDeep mb-4">
            Allocation by week — click a role for detail
          </div>
          <div className="scroll-x overflow-x-auto">
            <table className="w-full min-w-[720px] text-[12.5px]">
              <thead>
                <tr className="text-left">
                  <th className="pb-2 font-semibold text-bits-steel w-[240px]">
                    Role
                  </th>
                  <th className="pb-2 font-semibold text-bits-steel w-[60px]">
                    Count
                  </th>
                  {weekLabels.map((w) => (
                    <th
                      key={w}
                      className="pb-2 font-semibold text-bits-steel text-center num w-[34px]"
                    >
                      {w}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {roles.map((r, i) => (
                  <tr
                    key={i}
                    onClick={() => setSelected(i === selected ? null : i)}
                    className={`cursor-pointer border-t border-bits-line/60 ${
                      selected === i ? "bg-bits-cream" : "hover:bg-bits-mist/40"
                    }`}
                  >
                    <td className="py-2.5 pr-2">
                      <div className="font-semibold text-bits-ink">{r.name}</div>
                      <div className="text-[11px] text-bits-steel">{r.focus}</div>
                    </td>
                    <td>
                      <Tag tone={kindTone[r.kind]}>× {r.count}</Tag>
                    </td>
                    {r.phases.map((p, j) => (
                      <td key={j} className="text-center">
                        <div
                          className={`mx-auto w-5 h-5 rounded-md ${
                            p === 1
                              ? r.kind === "Architect"
                                ? "bg-bits-gold"
                                : r.kind === "QA"
                                  ? "bg-bits-goldDeep"
                                  : "bg-bits-deep"
                              : "bg-bits-line/50"
                          }`}
                          title={p === 1 ? "Active" : "Idle"}
                        />
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {selected !== null && (
            <div className="mt-4 p-4 rounded-lg bg-bits-cream border border-bits-gold/30 fade-in">
              <div className="flex items-center justify-between gap-4 mb-2">
                <div className="font-semibold text-bits-ink text-[14px]">
                  {roles[selected].name}
                </div>
                <div className="flex items-center gap-2">
                  <Tag tone={kindTone[roles[selected].kind]}>
                    {roles[selected].kind}
                  </Tag>
                  <Tag tone="muted">× {roles[selected].count}</Tag>
                  <Tag tone="muted">{roles[selected].allocation}</Tag>
                </div>
              </div>
              <p className="text-[13px] text-bits-steel leading-relaxed">
                {roles[selected].note}
              </p>
            </div>
          )}
        </Card>

        <Card className="lg:col-span-12">
          <div className="flex items-center justify-between mb-5">
            <div>
              <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-goldDeep mb-1 flex items-center gap-2">
                <Bolt width="14" height="14" /> Process — AI Augmented Software Development
              </div>
              <h3 className="font-serif text-2xl text-bits-ink">
                Eight stages. Every gate must close cleanly.
              </h3>
            </div>
            <Tag tone="navy">TDD · Agentic · CI/CD · Agile</Tag>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-3">
            {processStages.map((s, i) => (
              <div
                key={i}
                className="p-4 rounded-xl border border-bits-line bg-white hover:border-bits-gold/50 transition-colors"
              >
                <div className="font-serif text-3xl text-bits-gold num leading-none">
                  {s.phase}
                </div>
                <div className="font-semibold text-bits-ink text-[13.5px] mt-3 leading-snug">
                  {s.title}
                </div>
                <p className="text-[12.5px] text-bits-steel leading-relaxed mt-2">
                  {s.body}
                </p>
              </div>
            ))}
          </div>
        </Card>

        <Card className="lg:col-span-6">
          <div className="flex items-center gap-3 mb-3">
            <div className="w-9 h-9 rounded-lg bg-bits-gold/15 text-bits-goldDeep flex items-center justify-center">
              <Layers />
            </div>
            <h3 className="font-serif text-xl text-bits-ink">Engineering best practices</h3>
          </div>
          <ul className="space-y-1.5">
            <Bullet>Test-Driven Development — failing test first, code second</Bullet>
            <Bullet>Agentic orchestration — AI agents execute spec-driven work under human review</Bullet>
            <Bullet>CI/CD — GitHub Actions auto-deploy dev → staging → prod on every merge</Bullet>
            <Bullet>Sprint planning — two-week sprints, standup + planning + retro</Bullet>
            <Bullet>Agile delivery — gate reviews weekly, scope integrity held by PM</Bullet>
            <Bullet>Code review — every PR reviewed by a senior engineer before merge</Bullet>
            <Bullet>Pair programming via agents — architect pairs with AI agent for high-stakes modules</Bullet>
          </ul>
        </Card>

        <Card className="lg:col-span-6">
          <div className="flex items-center gap-3 mb-3">
            <div className="w-9 h-9 rounded-lg bg-bits-deep/8 text-bits-deep flex items-center justify-center">
              <Shield />
            </div>
            <h3 className="font-serif text-xl text-bits-ink">Quality gates at every release</h3>
          </div>
          <ul className="space-y-1.5">
            <Bullet>E2E automated tests — API + backend, green on every PR</Bullet>
            <Bullet>Browser-agent automated frontend tests — visual + behavioral regression</Bullet>
            <Bullet>Architectural simulation — load, failure, authz stress-tested before feature code</Bullet>
            <Bullet>Security scan — OWASP top-10 pass before each gate close</Bullet>
            <Bullet>AI eval harness — replay suite, hallucination scoring, jailbreak probes</Bullet>
            <Bullet>Final manual QA — human walks golden paths on real devices before gate approval</Bullet>
            <Bullet>UAT with BITS stakeholders — 6–8 volunteers across groups, per gate</Bullet>
          </ul>
        </Card>
      </div>
    </Section>
  );
};