window.SectionArchitecture = () => {
  const { Section, Card, Tag, Bullet } = window.BITSUI;
  const {
    Cpu,
    Layers,
    Shield,
    Stack,
    Cloud,
    Globe,
    Spark,
    Bolt,
    Check,
    Flag,
    Diamond,
    Flame,
  } = window.BITSIcons;

  // Modular Services — the spectrum positioning card.
  const spectrum = [
    {
      label: "Modular Monolith",
      tag: "Too fragile",
      body:
        "Single deployable, shared DB. Fast to ship, but a hot path chokes the whole app. One bad migration takes everything down.",
      tone: "muted",
    },
    {
      label: "Modular Services",
      tag: "Our choice",
      body:
        "Bounded contexts as independently-deployable services sharing a common identity, event bus, and observability plane. Scale selectively. Deploy independently. One service's outage degrades, doesn't kill.",
      tone: "gold",
      highlight: true,
    },
    {
      label: "Full Microservices",
      tag: "Too much tax",
      body:
        "Per-service databases, service meshes, distributed tracing-as-religion. Beautiful in theory, a 40-engineer DevOps tax in practice. Wrong size for this program.",
      tone: "muted",
    },
  ];

  // The 22 bounded contexts, grouped by domain.
  const contexts = [
    {
      group: "Identity & Social",
      nodes: [
        "Identity & Auth",
        "Profiles & Directory",
        "Messaging",
        "Feed & Social",
      ],
    },
    {
      group: "Community & Growth",
      nodes: [
        "Events & RSVPs",
        "BITSian Day Heatmap",
        "Jobs & Referrals",
        "BITSian Deals",
        "Fundraising",
        "BITSian Effect",
      ],
    },
    {
      group: "Academic & Campus",
      nodes: [
        "Academics",
        "Academic Calendar",
        "Campus Visits & Facilities",
        "Faculty Appointments",
        "Faculty Bookings",
      ],
    },
    {
      group: "Ops & Admin",
      nodes: [
        "Fees, Payroll, Payments",
        "HR & Staff Ops",
        "FAQ & Support",
        "Document Vault",
        "Admin Panel",
        "Troubleshooting Logs",
        "Notifications & CMS",
        "WhatsApp Channel",
      ],
    },
  ];

  // Shared rails — the connective tissue every service uses.
  const rails = [
    {
      icon: <Shield />,
      title: "Identity gateway",
      body:
        "Every service validates the same JWT. One auth surface. RBAC for six personas (Alumni, Student, Faculty, Parent, Staff, Admin) + moderator tiers (AMP team, chapter leads, campus admins).",
    },
    {
      icon: <Bolt />,
      title: "Event bus",
      body:
        "Redis Streams (hot-path) + SQS (durable). Services publish domain events — 'job.posted', 'event.rsvped', 'life.hired-bitsian' — others subscribe. No point-to-point coupling.",
    },
    {
      icon: <Cpu />,
      title: "AI orchestrator",
      body:
        "Voice Powered Navigation & Support lives here. Intent parser, tool router, 22 action categories. Every service exposes a typed tool contract — AI never calls a raw API.",
    },
    {
      icon: <Layers />,
      title: "Observability plane",
      body:
        "One lens across all services: structured logs (CloudWatch), distributed traces (OpenTelemetry), metrics (Grafana), error triage (Sentry). The Troubleshooting service reads from this plane.",
    },
  ];

  // Data topology
  const data = [
    {
      k: "Postgres 16 · schema-per-module",
      v: "Single RDS cluster, each service owns its schema. Foreign data wrappers for cross-module reads. Migrations are per-schema, never global.",
    },
    {
      k: "pgvector",
      v: "Embeddings for semantic directory search, feed ranking, and Study Groups AI matching. Sits inside Postgres — no separate vector DB.",
    },
    {
      k: "Redis · cache + pub/sub",
      v: "Session cache, rate limits, Voice-nav context (7-day rolling), real-time presence, event streams.",
    },
    {
      k: "S3 + CloudFront",
      v: "Media, profile photos, assignments, generated documents. Edge-cached for the 62-country alumni base.",
    },
    {
      k: "Meilisearch",
      v: "Full-text across directory, feed, jobs, events. Typo-tolerant, sub-50ms queries at 100K+ users.",
    },
  ];

  // Scalability levers
  const scale = [
    {
      icon: <Stack />,
      title: "Horizontal per service",
      body:
        "Each service is a Fargate task group with auto-scale on CPU + RPS. Feed hot on BITSian Day? Scale Feed without touching Payments. Classic concurrency isolation.",
    },
    {
      icon: <Globe />,
      title: "Read replicas for hot paths",
      body:
        "Feed, Directory, Notifications get read replicas. Write paths stay on primary. 5× read throughput without touching write latency.",
    },
    {
      icon: <Flag />,
      title: "CDN + edge cache",
      body:
        "CloudFront in front of the API for public read paths (profiles, events, deals). Static assets + media fully edge-cached. Dubai + Goa alumni get sub-80ms loads.",
    },
    {
      icon: <Flame />,
      title: "Backpressure + circuit breakers",
      body:
        "Every service has client-side rate limits + circuit breakers to external dependencies (Razorpay, DigiLocker, WhatsApp). One downstream blip never cascades.",
    },
  ];

  // Graceful degradation — what still works if each service dies.
  const degradation = [
    {
      service: "Payments",
      degrades: [
        "Fee submission queued, notifications delayed",
        "Everything else unaffected (feed, academics, events)",
      ],
    },
    {
      service: "WhatsApp Channel",
      degrades: [
        "Falls back to push + email automatically",
        "In-app notifications unaffected",
      ],
    },
    {
      service: "Voice / AI orchestrator",
      degrades: [
        "Form-based UI still works for every action",
        "No hard dependency on AI for core flows",
      ],
    },
    {
      service: "Document Vault (DigiLocker)",
      degrades: [
        "Users see a 'temporarily unavailable, try again' state",
        "Every other service continues normally",
      ],
    },
    {
      service: "Feed",
      degrades: [
        "App opens to Discover tab instead",
        "Messaging, Events, Jobs all unaffected",
      ],
    },
  ];

  // External integration adapters
  const integrations = [
    { k: "DigiLocker + BITS ERP", v: "Document Vault (transcripts, certificates)", kind: "in" },
    { k: "AlmaConnect + Almabase", v: "Migration service (retires post-migration)", kind: "in" },
    { k: "Razorpay", v: "Payments (fees, fundraising, marketplace)", kind: "in" },
    { k: "WhatsApp Business API", v: "Notifications · 2-way bot", kind: "out" },
    { k: "FCM + APNs", v: "Push notifications", kind: "out" },
    { k: "Academic ERP / LMS", v: "Academics (course data, assignments)", kind: "both" },
    { k: "SES / SendGrid", v: "Email (transactional + digest)", kind: "out" },
    { k: "S3 presigned URLs", v: "Media upload/download", kind: "both" },
  ];

  // Scale & global delivery — all live from day one. BITSians span 62 countries;
  // the platform is built to serve every one of them at the same latency tier.
  const regions = [
    {
      phase: "Primary",
      title: "ap-south-1 (Mumbai) · multi-AZ active-active",
      body:
        "Three active AZs. RDS Multi-AZ with automatic failover (<30s). Every service active-active across zones. Sized for 100K+ DAU on day one with 10× headroom.",
    },
    {
      phase: "DR",
      title: "ap-south-2 (Hyderabad) · cross-region standby",
      body:
        "Asynchronous streaming replica live from day one. Cross-region RPO < 5 min, RTO < 15 min. Automated failover tested pre-launch and drilled monthly.",
    },
    {
      phase: "Global edge",
      title: "CloudFront in 400+ POPs · day one",
      body:
        "Every read path + static asset cached at the nearest edge — Dubai, Singapore, London, Bay Area alumni get sub-80ms loads on launch day. Signed-URL media delivery via S3 + CloudFront. Writes land in India for data residency.",
    },
  ];

  return (
    <Section
      id="architecture"
      eyebrow="System Design & Architecture"
      title={
        <>
          Modular Services.{" "}
          <span className="text-bits-goldDeep">
            Bounded contexts, shared rails.
          </span>
        </>
      }
      kicker="The RFP asks for a scalable, secure architecture for a 100K+ user multi-campus community. We don't answer that with a monolith and we don't answer it by overbuying microservices. We answer it with Modular Services — a pragmatic middle — 22 independently-deployable services sharing a common identity, event bus, AI orchestrator, and observability plane. Structural clarity of microservices without the DevOps tax."
    >
      <div className="grid lg:grid-cols-12 gap-6">
        {/* The spectrum — positioning */}
        <Card className="lg:col-span-12">
          <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-goldDeep mb-3 flex items-center gap-2">
            <Diamond width="14" height="14" /> The architecture spectrum · where we sit
          </div>
          <div className="grid md:grid-cols-3 gap-3">
            {spectrum.map((s, i) => (
              <div
                key={i}
                className={`p-4 rounded-xl border transition-colors ${
                  s.highlight
                    ? "bg-gradient-to-br from-bits-cream to-white border-bits-gold shadow-card"
                    : "bg-white border-bits-line/70 opacity-85"
                }`}
              >
                <div className="flex items-center justify-between gap-2 mb-2">
                  <div
                    className={`font-serif text-lg ${
                      s.highlight ? "text-bits-deep" : "text-bits-ink"
                    }`}
                  >
                    {s.label}
                  </div>
                  <Tag tone={s.tone}>{s.tag}</Tag>
                </div>
                <p className="text-[12.5px] text-bits-steel leading-relaxed">
                  {s.body}
                </p>
              </div>
            ))}
          </div>
        </Card>

        {/* 22 bounded contexts — grouped visual */}
        <Card className="lg:col-span-12">
          <div className="flex items-center justify-between mb-5 flex-wrap gap-2">
            <div>
              <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-goldDeep mb-1 flex items-center gap-2">
                <Layers width="14" height="14" /> 22 bounded contexts · 4 domains
              </div>
              <h3 className="font-serif text-2xl text-bits-ink">
                Each service owns its schema, API, and deploy pipeline.
              </h3>
            </div>
            <Tag tone="gold">Independently deployable</Tag>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-3">
            {contexts.map((g, i) => (
              <div
                key={i}
                className="p-4 rounded-xl bg-bits-mist/40 border border-bits-line/70"
              >
                <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-bits-goldDeep mb-3">
                  {g.group}
                </div>
                <ul className="space-y-1.5">
                  {g.nodes.map((n, j) => (
                    <li
                      key={j}
                      className="flex items-center gap-2 text-[12.5px] text-bits-ink"
                    >
                      <span className="w-1.5 h-1.5 rounded-full bg-bits-gold shrink-0" />
                      {n}
                    </li>
                  ))}
                </ul>
                <div className="mt-3 pt-3 border-t border-bits-line/60 text-[10.5px] text-bits-steel">
                  {g.nodes.length} services · shared schema namespace
                </div>
              </div>
            ))}
          </div>
        </Card>

        {/* Shared rails */}
        <Card className="lg:col-span-12 bg-gradient-to-br from-bits-deep to-bits-navy text-white border-transparent">
          <div className="flex items-center justify-between mb-5 flex-wrap gap-2">
            <div>
              <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-gold mb-1 flex items-center gap-2">
                <Spark width="14" height="14" /> Shared rails · the connective tissue
              </div>
              <h3 className="font-serif text-2xl">
                Four rails every service rides on.
              </h3>
              <p className="text-[13px] text-white/75 mt-2 max-w-2xl">
                Rails are common across all 22 services. Services compose; rails
                don't. Changing a service never requires changing a rail — and
                vice versa.
              </p>
            </div>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-3">
            {rails.map((r, i) => (
              <div
                key={i}
                className="p-4 rounded-xl bg-white/5 border border-white/10 backdrop-blur"
              >
                <div className="w-9 h-9 rounded-lg bg-bits-gold/20 text-bits-gold flex items-center justify-center mb-3">
                  {r.icon}
                </div>
                <div className="font-semibold text-[13.5px] mb-2">
                  {r.title}
                </div>
                <p className="text-[12px] text-white/75 leading-relaxed">
                  {r.body}
                </p>
              </div>
            ))}
          </div>
        </Card>

        {/* Data topology */}
        <Card className="lg:col-span-7">
          <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-goldDeep mb-3 flex items-center gap-2">
            <Stack width="14" height="14" /> Data topology · one cluster, many schemas
          </div>
          <h3 className="font-serif text-xl text-bits-ink mb-4">
            Shared infrastructure, isolated ownership.
          </h3>
          <div className="space-y-3">
            {data.map((d, i) => (
              <div
                key={i}
                className="flex items-start gap-3 p-3 rounded-lg bg-bits-mist/40 border border-bits-line/60"
              >
                <span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-bits-gold shrink-0" />
                <div>
                  <div className="text-[13px] font-semibold text-bits-ink">
                    {d.k}
                  </div>
                  <div className="text-[12.5px] text-bits-steel leading-relaxed mt-0.5">
                    {d.v}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </Card>

        {/* Scalability levers */}
        <Card className="lg:col-span-5">
          <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-goldDeep mb-3 flex items-center gap-2">
            <Cloud width="14" height="14" /> Scalability · four levers
          </div>
          <h3 className="font-serif text-xl text-bits-ink mb-4">
            100K+ users, 62 countries, day one.
          </h3>
          <div className="space-y-3">
            {scale.map((s, i) => (
              <div key={i} className="flex items-start gap-3">
                <div className="w-8 h-8 rounded-lg bg-bits-gold/15 text-bits-goldDeep flex items-center justify-center shrink-0">
                  {s.icon}
                </div>
                <div>
                  <div className="text-[13px] font-semibold text-bits-ink">
                    {s.title}
                  </div>
                  <div className="text-[12px] text-bits-steel leading-relaxed mt-0.5">
                    {s.body}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </Card>

        {/* Graceful degradation */}
        <Card className="lg:col-span-12">
          <div className="flex items-center justify-between mb-5 flex-wrap gap-2">
            <div>
              <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-goldDeep mb-1 flex items-center gap-2">
                <Shield width="14" height="14" /> Availability · graceful degradation
              </div>
              <h3 className="font-serif text-2xl text-bits-ink">
                When a service fails, the platform still works.
              </h3>
              <p className="text-[13px] text-bits-steel mt-1.5 max-w-3xl">
                Service independence means a Payments outage doesn't take down the
                Feed. Every service has a documented failure mode and a fallback
                behavior. Below: what still works if each service goes down.
              </p>
            </div>
            <Tag tone="ok">99.999% uptime SLA</Tag>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-3">
            {degradation.map((d, i) => (
              <div
                key={i}
                className="p-4 rounded-xl border border-bits-line/70 bg-white"
              >
                <div className="flex items-center gap-2 mb-2">
                  <span className="w-2 h-2 rounded-full bg-amber-500 shrink-0" />
                  <div className="text-[12px] font-semibold uppercase tracking-wider text-bits-steel">
                    If {d.service} fails
                  </div>
                </div>
                <ul className="space-y-1.5">
                  {d.degrades.map((x, j) => (
                    <li
                      key={j}
                      className="flex items-start gap-2 text-[12.5px] text-bits-ink/85 leading-snug"
                    >
                      <Check
                        width="12"
                        height="12"
                        className="mt-0.5 text-emerald-600 shrink-0"
                      />
                      <span>{x}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </Card>

        {/* External integrations */}
        <Card className="lg:col-span-7">
          <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-goldDeep mb-3 flex items-center gap-2">
            <Globe width="14" height="14" /> Integrations · adapter pattern
          </div>
          <h3 className="font-serif text-xl text-bits-ink mb-3">
            External systems sit behind adapters.
          </h3>
          <p className="text-[13px] text-bits-steel leading-relaxed mb-4">
            Every external dependency is wrapped in an adapter owned by exactly
            one service. Swap the provider without touching the rest of the
            system. Add a new provider in a week.
          </p>
          <div className="grid md:grid-cols-2 gap-2">
            {integrations.map((it, i) => (
              <div
                key={i}
                className="flex items-start gap-2.5 p-2.5 rounded-lg bg-bits-mist/40 border border-bits-line/60"
              >
                <span
                  className={`mt-1 w-1.5 h-1.5 rounded-full shrink-0 ${
                    it.kind === "in"
                      ? "bg-bits-deep"
                      : it.kind === "out"
                      ? "bg-bits-gold"
                      : "bg-emerald-600"
                  }`}
                />
                <div className="min-w-0">
                  <div className="text-[12.5px] font-semibold text-bits-ink truncate">
                    {it.k}
                  </div>
                  <div className="text-[11.5px] text-bits-steel leading-snug truncate">
                    {it.v}
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div className="mt-4 pt-4 border-t border-bits-line/60 flex items-center gap-4 text-[11px] text-bits-steel flex-wrap">
            <span className="inline-flex items-center gap-1.5">
              <span className="w-2 h-2 rounded-full bg-bits-deep" /> Inbound
            </span>
            <span className="inline-flex items-center gap-1.5">
              <span className="w-2 h-2 rounded-full bg-bits-gold" /> Outbound
            </span>
            <span className="inline-flex items-center gap-1.5">
              <span className="w-2 h-2 rounded-full bg-emerald-600" /> Bi-directional
            </span>
          </div>
        </Card>

        {/* Scale & global delivery — day one */}
        <Card className="lg:col-span-5 bg-bits-cream border-bits-gold/30">
          <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-goldDeep mb-3 flex items-center gap-2">
            <Globe width="14" height="14" /> Scale &amp; global delivery · day one
          </div>
          <h3 className="font-serif text-xl text-bits-ink mb-4">
            Multi-AZ primary, cross-region DR, global edge — all live at launch.
          </h3>
          <p className="text-[12.5px] text-bits-steel leading-relaxed mb-4">
            BITSians span 62 countries. The platform is engineered so a Dubai
            alum, a Bay Area alum, and a Pilani student all see the same
            sub-100ms experience from the first commit in production.
          </p>
          <div className="space-y-3">
            {regions.map((r, i) => (
              <div
                key={i}
                className="p-3 rounded-lg bg-white border border-bits-line/70"
              >
                <div className="flex items-center gap-2 mb-1.5">
                  <Tag tone={i === 0 ? "gold" : "navy"}>{r.phase}</Tag>
                </div>
                <div className="text-[13px] font-semibold text-bits-ink">
                  {r.title}
                </div>
                <p className="text-[12px] text-bits-steel leading-relaxed mt-1">
                  {r.body}
                </p>
              </div>
            ))}
          </div>
        </Card>

        {/* The claim — why this approach wins */}
        <Card className="lg:col-span-12">
          <div className="flex items-center justify-between mb-4 flex-wrap gap-2">
            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-goldDeep flex items-center gap-2">
              <Flag width="14" height="14" /> The claim
            </div>
            <Tag tone="gold">Proven at Brillianse scale</Tag>
          </div>
          <div className="grid md:grid-cols-2 gap-6">
            <div>
              <h3 className="font-serif text-2xl text-bits-ink leading-tight mb-3">
                Modular Services is the architecture we shipped Brillianse on — 65 modules, 6 interfaces, 30 days.
              </h3>
              <p className="text-[13.5px] text-bits-steel leading-relaxed">
                The BITSAA RFP is smaller, better-scoped, and has a longer
                runway. The same pattern handles it comfortably. No stack risk,
                no pattern risk — only execution, which is what we do best.
              </p>
            </div>
            <ul className="space-y-2">
              <Bullet>Independently deployable — one service's bad PR doesn't block another's launch</Bullet>
              <Bullet>Horizontally scalable per service — Feed can peak at 100× RPS on BITSian Day without affecting Payments</Bullet>
              <Bullet>Shared rails mean zero "microservice tax" — no service mesh, no per-service DB, no cross-team API governance</Bullet>
              <Bullet>Graceful degradation by design — every service has a documented failure mode and fallback</Bullet>
              <Bullet>Multi-AZ primary + cross-region DR + global edge delivery all live on day one — every BITSian in every country, same latency tier</Bullet>
              <Bullet>Every RFP technical ask (100K+ users, 99.999% uptime, multi-campus, HA/fault tolerance, integration with existing systems) answered structurally</Bullet>
            </ul>
          </div>
        </Card>
      </div>
    </Section>
  );
};
