window.SectionTechStack = () => {
  const { Section, Card, Tag, Bullet } = window.BITSUI;
  const { Cpu, Cloud, Stack, Globe, Shield, Layers, Spark } = window.BITSIcons;

  const layers = [
    {
      name: "Client",
      icon: <Globe />,
      items: [
        { k: "React Native (Expo)", v: "iOS + Android single codebase, TypeScript, Zustand state" },
        { k: "Next.js", v: "Admin panel (web), SSR, shared TS types with mobile" },
        { k: "Web fallback", v: "Parents, guest browsing (Next.js, shared components)" },
      ],
    },
    {
      name: "Voice Powered Navigation & Support",
      icon: <Spark />,
      items: [
        { k: "Claude API (Opus + Sonnet)", v: "Intent parser, tool-use router" },
        { k: "Context manager", v: "Redis-backed 7-day rolling context" },
        { k: "Tool registry", v: "22 action categories → backend service calls" },
        { k: "Eval harness", v: "Replay suite, regression scoring, cost tracking" },
      ],
    },
    {
      name: "API / services",
      icon: <Layers />,
      items: [
        { k: "Node.js + TypeScript", v: "Hono framework, fast cold starts" },
        { k: "14 service modules", v: "Auth, profile, feed, jobs, events, etc." },
        { k: "Real-time", v: "WebSockets (chat, presence, notifications)" },
        { k: "Search", v: "Meilisearch (directory + feed full-text)" },
      ],
    },
    {
      name: "Data",
      icon: <Stack />,
      items: [
        { k: "PostgreSQL 16", v: "Primary relational store (RDS)" },
        { k: "pgvector", v: "Embeddings for semantic directory search" },
        { k: "Redis", v: "Sessions, cache, rate limits, pub/sub" },
        { k: "S3 + CloudFront", v: "Media, profile photos, assignments" },
      ],
    },
    {
      name: "Infra",
      icon: <Cloud />,
      items: [
        { k: "AWS", v: "ECS Fargate, RDS, ElastiCache, S3, SES, CloudFront" },
        { k: "Terraform", v: "All infra as code, multi-env (dev/staging/prod)" },
        { k: "GitHub Actions", v: "CI/CD, auto-deploy on merge" },
        { k: "Observability", v: "CloudWatch + Sentry + Grafana dashboards" },
      ],
    },
    {
      name: "Integrations",
      icon: <Cpu />,
      items: [
        { k: "Razorpay", v: "Payments (fees, fundraising, marketplace)" },
        { k: "WhatsApp Business API", v: "Notifications, 2-way DMs for critical alerts" },
        { k: "FCM + APNs", v: "Push notifications" },
        { k: "AlmaConnect + Almabase migration", v: "Data pipeline + dedup + claim flow for both legacy sources" },
        { k: "DigiLocker + BITS ERP", v: "Transcript signing + alumni document vault" },
        { k: "SES / SendGrid", v: "Transactional + digest email" },
      ],
    },
  ];

  const aiFlow = [
    { at: 0, label: "User input", sub: "text or voice, any surface" },
    { at: 1, label: "Intent parser", sub: "Claude Sonnet, 22 action categories" },
    { at: 2, label: "Clarify?", sub: "if ambiguous, ask back in-line" },
    { at: 3, label: "Tool router", sub: "maps intent → backend service" },
    { at: 4, label: "Service execution", sub: "CRUD, search, auth, payment" },
    { at: 5, label: "Response generator", sub: "Claude, grounded in result" },
    { at: 6, label: "Render", sub: "chat bubble + structured card" },
  ];

  return (
    <Section
      id="tech"
      eyebrow="Technical Implementation"
      title={<>The stack, end to end.</>}
      kicker="Built for 100K+ users across Pilani, Goa, Hyderabad, and Dubai campuses — multi-region, 99.999% uptime SLA, and every framework aligned to the RFP's own suggested list (Node.js / Django / Spring Boot on the backend, Flutter or React Native on mobile, React or Angular on the web). Every layer is deliberately conservative — proven tech, operational maturity, easy to hire for (or hand off to BITS IT when we sunset the engagement)."
    >
      <Card className="mb-6 bg-gradient-to-br from-bits-deep to-bits-navy text-white border-transparent">
        <div className="grid md:grid-cols-4 gap-4">
          <div>
            <div className="text-[10px] font-semibold uppercase tracking-[0.18em] text-bits-gold mb-1">Scale target</div>
            <div className="font-serif text-2xl leading-tight">100K+ users</div>
            <div className="text-[11.5px] text-white/70 mt-1">150–180k existing, growing 8–10k / year</div>
          </div>
          <div>
            <div className="text-[10px] font-semibold uppercase tracking-[0.18em] text-bits-gold mb-1">Availability</div>
            <div className="font-serif text-2xl leading-tight num">99.999%</div>
            <div className="text-[11.5px] text-white/70 mt-1">Multi-AZ AWS, automated failover, &lt;5 min MTTR</div>
          </div>
          <div>
            <div className="text-[10px] font-semibold uppercase tracking-[0.18em] text-bits-gold mb-1">Footprint</div>
            <div className="font-serif text-2xl leading-tight">4 campuses</div>
            <div className="text-[11.5px] text-white/70 mt-1">Pilani · Goa · Hyderabad · Dubai · multi-region-ready</div>
          </div>
          <div>
            <div className="text-[10px] font-semibold uppercase tracking-[0.18em] text-bits-gold mb-1">Compliance</div>
            <div className="font-serif text-2xl leading-tight">OWASP + DPDP</div>
            <div className="text-[11.5px] text-white/70 mt-1">Modern security standards, role-based access, encrypted at rest + in transit</div>
          </div>
        </div>
      </Card>
      <div className="grid lg:grid-cols-3 gap-4">
        {layers.map((l, i) => (
          <Card key={i}>
            <div className="flex items-center gap-3 mb-4">
              <div className="w-9 h-9 rounded-lg bg-bits-deep/8 text-bits-deep flex items-center justify-center">
                {l.icon}
              </div>
              <h3 className="font-serif text-xl text-bits-ink">{l.name}</h3>
            </div>
            <div className="space-y-2.5">
              {l.items.map((it, j) => (
                <div key={j} className="flex items-start gap-3">
                  <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">
                      {it.k}
                    </div>
                    <div className="text-[12.5px] text-bits-steel leading-relaxed">
                      {it.v}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </Card>
        ))}

        <Card className="lg:col-span-3 bg-gradient-to-br from-bits-cream to-white border-bits-gold/30">
          <div className="flex items-center justify-between mb-6">
            <div>
              <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-goldDeep mb-1">
                Voice Powered Navigation & Support · flow
              </div>
              <h3 className="font-serif text-2xl text-bits-ink">
                Every input travels the same pipe
              </h3>
            </div>
            <Tag tone="gold">
              <Spark width="12" height="12" /> Core brain
            </Tag>
          </div>
          <div className="relative scroll-x overflow-x-auto pb-4">
            <div className="flex items-start gap-3 min-w-[900px]">
              {aiFlow.map((n, i) => (
                <React.Fragment key={i}>
                  <div className="flex-1 min-w-[120px]">
                    <div className="rounded-xl bg-white border border-bits-line px-3 py-3">
                      <div className="text-[10px] font-semibold text-bits-goldDeep num uppercase tracking-wider">
                        Step {String(i + 1).padStart(2, "0")}
                      </div>
                      <div className="text-[13px] font-semibold text-bits-ink mt-1">
                        {n.label}
                      </div>
                      <div className="text-[11.5px] text-bits-steel mt-0.5 leading-snug">
                        {n.sub}
                      </div>
                    </div>
                  </div>
                  {i < aiFlow.length - 1 && (
                    <div className="flex-shrink-0 pt-5 text-bits-goldDeep">
                      <svg
                        width="22"
                        height="22"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="1.5"
                        strokeLinecap="round"
                      >
                        <path d="M5 12h14M13 5l7 7-7 7" />
                      </svg>
                    </div>
                  )}
                </React.Fragment>
              ))}
            </div>
          </div>
        </Card>

        <Card className="lg:col-span-2">
          <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-goldDeep mb-3">
            Scale targets (year 1)
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-5">
            {[
              { v: "100k", k: "Registered users", h: "alumni + students + family" },
              { v: "20k", k: "DAU target", h: "stretch at 12 months" },
              { v: "99.9%", k: "Uptime SLA", h: "excl. planned maint" },
              { v: "<300ms", k: "P95 AI response", h: "intent → first token" },
            ].map((s, i) => (
              <div key={i}>
                <div className="font-serif text-3xl text-bits-deep num leading-none">
                  {s.v}
                </div>
                <div className="text-[12.5px] font-semibold text-bits-ink mt-1">
                  {s.k}
                </div>
                <div className="text-[11.5px] text-bits-steel">{s.h}</div>
              </div>
            ))}
          </div>
        </Card>

        <Card>
          <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">Security posture</h3>
          </div>
          <ul className="space-y-1.5">
            <Bullet>Encryption at rest (RDS) + in transit (TLS 1.3)</Bullet>
            <Bullet>JWT with short TTL + refresh rotation</Bullet>
            <Bullet>Row-level access policies on sensitive tables</Bullet>
            <Bullet>OWASP top-10 audit pre-launch (W9)</Bullet>
            <Bullet>Audit log for all admin + AI tool-use actions</Bullet>
            <Bullet>PII redaction in AI prompts for logging</Bullet>
          </ul>
        </Card>
      </div>
    </Section>
  );
};