window.SectionStudio = () => {
  const { Section, Card, Tag, Bullet } = window.BITSUI;
  const {
    Spark,
    Bolt,
    Shield,
    Users,
    Check,
    Layers,
    Cpu,
    Flag,
    Flame,
    Diamond,
    Chat,
    Globe,
    Briefcase,
    Grid,
  } = window.BITSIcons;

  const people = [
    {
      name: "Vishnu Saran",
      role: "Founder, VoiceQube · BITS alumnus · Proposal lead",
      body:
        "BITSian himself and author of VoiceQube's thesis — software at the speed of thought. Owns end-to-end delivery: PRD, architecture, agentic orchestration, stakeholder engagement. Personally drives the AI-augmented pipeline that shipped Brillianse in 1 month and Altfolio in 4.",
      tags: ["BITSian", "Architecture", "Product", "AI orchestration"],
    },
    {
      name: "Satya Teja",
      role: "BITSian alumnus · Product + Backend lead",
      body:
        "BITSian himself — skin in the game. Co-leads product definition and backend architecture. His combination of institutional empathy (he's been the user) and deep engineering chops is why parents, students, and alumni flows will feel designed by an insider, not an agency.",
      tags: ["BITSian", "Backend", "Product"],
    },
    {
      name: "VoiceQube engineering",
      role: "20-person AI-augmented senior team",
      body:
        "The team behind Brillianse, Altfolio, Aramco-Watson, Northway and Ansyr.AI. Full-stack + mobile full-stack + solution architects + PMs + QA automation — all operating at the VoiceQube cadence: AI agents execute, senior engineers review, nothing ships without a green test suite and a human QA pass. Deep benches in the exact stacks BITSAA's RFP lists — Node.js / Django / Spring Boot, Flutter / React Native, React / Angular — plus AWS multi-region ops at 99.999% uptime.",
      tags: ["Full-stack", "Mobile", "QA automation", "Voice + AI"],
    },
  ];

  // Omnipresent AI — the 5-stage loop from the VoiceQube thesis
  const omnipresent = [
    {
      title: "AI-Augmented Design",
      body:
        "Designers author the visual system once. AI agents extend icon sets, generate variants, and render clickable prototypes in minutes — three full visual passes become cheap.",
    },
    {
      title: "AI-Driven Specification & Architecture",
      body:
        "Senior architects author the PRD. AI agents stress-test the spec, surface missing edge cases, and scaffold API contracts + schema before a single feature lands.",
    },
    {
      title: "AI-Powered Testing & QA",
      body:
        "Failing tests first. AI generates unit, integration, and E2E coverage. Browser-agent regression runs nightly. A human QA engineer walks golden paths before any gate closes.",
    },
    {
      title: "AI-Orchestrated Deployment",
      body:
        "GitHub Actions auto-deploys dev → staging → prod on every merge. Infra-as-code, zero manual steps, rollback in one click.",
    },
    {
      title: "AI-Enhanced Monitoring & Feedback",
      body:
        "Observability + anomaly detection + user-telemetry loops feed back into the backlog. The system learns from itself, not from quarterly retros.",
    },
  ];

  // Real case studies pulled from VoiceQube's "Software at the Speed of Thought" deck.
  const caseStudies = [
    {
      flagship: true,
      client: "Brillianse",
      headline: "Full institutional LMS — shipped in 1 month flat.",
      metric: "1 month · 65+ modules",
      metricSub: "6 interfaces + built-in video conferencing",
      body:
        "Our most recent production launch. 65+ modules, built-in video conferencing, six distinct interfaces (learner, instructor, admin, parent, org, analytics) — production grade, in 30 days. The closest analogue to what BITSAA is asking for, built end-to-end by the same team.",
      stack: ["React", "React Native", "WebRTC", "Node", "PostgreSQL", "AWS"],
      outcome: "The BITSAA RFP is smaller and better-scoped than Brillianse. 22 weeks is a comfortable runway with quality headroom, not a stretch.",
    },
    {
      client: "Altfolio",
      headline: "Fractional Investment Platform — delivered in 4 months.",
      metric: "15 → 4 months",
      metricSub: "73% faster than industry baseline",
      body:
        "A complex fractional investment platform spanning a web app for investors, mobile apps for accessibility, and an admin dashboard for compliance + control. Complex financial workflows, strict security posture, multiple user classes.",
      stack: ["React", "React Native", "Nest.js", "MongoDB", "MySQL", "Figma", "AWS"],
      outcome: "Launch-ready, robust, market-ready — shipped at a fraction of the anticipated timeline.",
    },
    {
      client: "Aramco",
      headline: "IBM Watson Chatbot across 17 office buildings.",
      metric: "98% accuracy",
      metricSub: "250+ request types automated",
      body:
        "Aramco had 17 office buildings with heavy call-centre traffic for plumbing, electrical, and facilities tickets. We deployed an on-site IBM Watson chat + voice interface that registered tickets, answered FAQs, and retrieved ticket status — all via one voice command.",
      stack: ["IBM Watson", "NLP/NLU", "Voice intent", "Enterprise integration"],
      outcome: "250+ request types identified at 98% accuracy · ticket generated with a single voice command.",
    },
    {
      client: "Northway",
      headline: "World's first voice-based golf app.",
      metric: "Voice-native",
      metricSub: "Andy North voice clone (2× U.S. Open champion)",
      body:
        "We built the world's first golf app driven entirely by voice. Voice navigation on the course, a voice-driven training module, shot recommendations, real-time distance — all hands-free. Every interaction conversational, keeping the golfer focused on play.",
      stack: ["Conversational AI", "Voice cloning", "React Native", "Real-time AI"],
      outcome: "Proof that sports tech can be reimagined when voice becomes the primary interface.",
    },
    {
      client: "Ansyr.AI",
      headline: "Multilingual voice concierge SDK — a VoiceQube product.",
      metric: "Weeks, not months",
      metricSub: "Zero-latency voice concierge for any SaaS",
      body:
        "Plug-and-play SDK that embeds a natural, voice-driven assistant into any product. Users handle queries, navigate complex SaaS features, and complete e-commerce conversions — all through simple conversation.",
      stack: ["Voice SDK", "Multilingual NLU", "Realtime streaming"],
      outcome: "Deployed across multiple enterprise SaaS products; a VoiceQube Inc. product.",
    },
  ];

  const cadence = [
    {
      phase: "Sprint 1 · W1–W2",
      title: "System design + UI/UX + infra setup",
      ships: [
        "PRD locked, architecture signed off, schema + API surface approved",
        "AWS + Terraform envs live (dev/staging/prod)",
        "Design system + tokens exported to React Native",
        "CI/CD green from W1 — every PR auto-deploys",
      ],
      uat: "BITSAA walkthrough of architecture + live prototype · Gate 2 signed",
    },
    {
      phase: "Sprint 2 · W3–W4",
      title: "Core backend services + app shell",
      ships: [
        "Auth, profiles, directory, feed (backend)",
        "React Native app shell + navigation + home + feed screen",
        "Voice Powered Navigation v1 — intent parser + tool router",
        "E2E test harness green across shipped services",
      ],
      uat: "Internal alpha · 3 stakeholder testers walk end-to-end",
    },
    {
      phase: "Sprint 3 · W5–W6",
      title: "Social + messaging + events + jobs",
      ships: [
        "Chat (1:1 + group), events, jobs, mentoring flows",
        "Feed with multi-modal posts and reactions",
        "Admin panel v1 (user mgmt + moderation queue)",
        "Browser-agent regression suite live",
      ],
      uat: "Bi-weekly UAT · 6 stakeholders across alumni, student, faculty",
    },
    {
      phase: "Sprint 4 · W7–W8",
      title: "Parent + campus + HR + fees",
      ships: [
        "Parent dashboard, fee schedule, campus visit booking, guest house",
        "Gate pass + approval flow",
        "HR: leave, attendance, payslips",
        "Full MVP UAT with parent + staff cohort",
      ],
      uat: "Bi-weekly UAT · parent + staff cohort",
    },
    {
      phase: "Sprint 5 · W9–W10",
      title: "MVP launch — Jul 1",
      ships: [
        "iOS + Android in stores",
        "App-store review pre-submitted at W8",
        "BITSian Day-ready",
        "OWASP security pass + go-live runbook",
      ],
      uat: "Full UAT with 6–8 BITSAA volunteers · Gate 3 signed",
    },
    {
      phase: "Sprint 6 · W11–W14",
      title: "Phase 2 RFP — beyond the critical path",
      ships: [
        "WhatsApp help bot + 2-way alerts",
        "BITSian Day attendee heatmap + QR check-in",
        "Deals & Offers + FAQ/Support forms",
        "Faculty appointment booking + Faculty bookings inbox",
        "Document Vault · DigiLocker / ERP bridge",
      ],
      uat: "Bi-weekly UAT · alumni + parent cohort reviews",
    },
    {
      phase: "Sprint 7 · W15–W18",
      title: "Full RFP complete — Sep 1",
      ships: [
        "Fundraising, CMS, analytics dashboards",
        "AlmaConnect + Almabase migration fully executed",
        "Razorpay wired for fees + fundraising",
        "Admin moderation tiers (AMP team · chapter leads · campus admins)",
        "Entire RFP scope shipped and UAT-approved",
      ],
      uat: "RFP sign-off review · Gate 4 signed",
    },
    {
      phase: "Sprint 8 · W19–W22",
      title: "Added features + hardening — Oct 1",
      ships: [
        "BITSian Effect dashboard + embeds",
        "Discover Map + Marketplace + Scrapbook + Living Tribute",
        "Life Event Graph + BITSians Wrapped + Lineage Tree",
        "11 AI moments + BITSian News + final polish",
        "Production hardening + full docs + handover",
      ],
      uat: "Final UAT + launch · Added done Oct 1",
    },
  ];

  const guardrails = [
    {
      icon: <Bolt />,
      title: "Automated E2E test suite green on every PR",
      body:
        "Nothing merges with a red suite. Backend + API + mobile golden paths covered. Browser-agent regression runs nightly against staging.",
    },
    {
      icon: <Shield />,
      title: "Final human QA pass before every gate",
      body:
        "Automation catches regressions; a human walks golden paths on real devices before any gate closes. No exceptions.",
    },
    {
      icon: <Layers />,
      title: "TDD + architectural simulation",
      body:
        "Failing tests first. Architecture stress-tested under synthetic load, partial failures, and authz attacks before the first feature lands.",
    },
    {
      icon: <Cpu />,
      title: "AI executes, humans review",
      body:
        "Agents write scaffolding — CRUD, migrations, screens, tests. Every PR carries spec + diff + tests. A senior engineer reviews and merges.",
    },
    {
      icon: <Diamond />,
      title: "Bi-weekly UAT with real stakeholders",
      body:
        "Every two weeks, 6–8 BITSAA-nominated volunteers walk the new surface. Feedback feeds into the next sprint immediately.",
    },
    {
      icon: <Flame />,
      title: "A fixed-fee model forces discipline",
      body:
        "We eat the cost of delay. Incentives align with quality — we don't ship half-baked code to hit a milestone; we ship clean code to close a gate.",
    },
  ];

  const faqs = [
    {
      q: "How does iteration and testing work at this pace?",
      a: "Every sprint (2 weeks) ends with a green automated E2E suite, a browser-agent regression pass, a manual QA walk-through on real devices, and a UAT session with 6–8 BITSAA volunteers. Feedback is captured inline in the live build and rolled into the next sprint the same day. Iteration doesn't cost us weeks — the agentic pipeline turns feedback around in hours.",
    },
    {
      q: "How is this speed possible without compromising quality?",
      a: "Because AI is an omnipresent layer across design, specification, testing, deployment, and monitoring — not a bolt-on. Senior humans author the PRD and architecture with care. AI agents execute scaffolding under spec. Every line of code carries a test before it lands. This is the pipeline that shipped Altfolio (15 → 4 months, 73% faster) and Brillianse (65+ modules in 30 days). It is quality-by-pipeline, not quality-by-heroics.",
    },
    {
      q: "What proves you can actually deliver in this window?",
      a: "Five production references, all shipped at or under our claimed pace. Brillianse · 65+ module LMS with video conferencing, 1 month. Altfolio · fractional investment platform, 4 months. Aramco · IBM Watson chatbot across 17 buildings, 98% accuracy, 250+ automated requests. Northway · the world's first voice-native golf app, with Andy North voice cloning. Ansyr.AI — our own shipped voice-concierge SDK. The BITSAA RFP is within our comfortable baseline, not a stretch.",
    },
    {
      q: "What about references and credentials?",
      a: "Vishnu Saran (VoiceQube founder, BITS alumnus) is available for reference calls with any of the clients above. Satya Teja — another BITSian alumnus — co-leads product and backend, giving BITSAA two inside advocates on the delivery team. Full team bios + named references + case studies can be shared under MSA. Contact: vishnu@voiceqube.com · +91 7780218615.",
    },
  ];

  return (
    <Section
      id="studio"
      eyebrow="The Studio"
      title={<>VoiceQube. Software at the speed of thought.</>}
      kicker="How we deliver a 22-module institutional platform plus 8 beyond-RFP products in 22 weeks, without compromising quality — and why BITSAA should believe us. This section answers the concerns you raised directly, with six production references behind every claim."
    >
      <div className="grid lg:grid-cols-12 gap-6">
        {/* Thesis hero */}
        <Card className="lg:col-span-12 bg-gradient-to-br from-bits-deep via-bits-navy to-bits-deep text-white border-transparent relative overflow-hidden">
          <div className="absolute -right-40 -top-40 w-[500px] h-[500px] rounded-full bg-bits-gold/15 blur-3xl pointer-events-none" />
          <div className="relative grid md:grid-cols-12 gap-8">
            <div className="md:col-span-7">
              <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-gold mb-3">
                <Bolt width="14" height="14" /> The thesis
              </div>
              <h3 className="font-serif text-3xl md:text-4xl leading-[1.05] tracking-tight">
                Speed is no longer optional in software — it is survival.
              </h3>
              <p className="text-[14px] text-white/80 mt-4 leading-relaxed max-w-xl">
                Markets shift in weeks. Customer needs evolve overnight. The gap
                between idea and execution determines who leads and who lags.
                Traditional cycles are too slow, too manual, too fragmented.
                VoiceQube collapses that gap by embedding AI into every layer
                of engineering — design, spec, code, test, deploy, monitor —
                compressing delivery into cycles that move at the pace of
                business decisions.
              </p>
              <p className="text-[14px] text-white/90 mt-4 leading-relaxed max-w-xl font-medium">
                This is <span className="text-bits-gold">software at the speed of thought.</span>{" "}
                Faster GTM. Fewer bottlenecks. Higher reliability.
              </p>
            </div>
            <div className="md:col-span-5 border-l border-white/10 pl-8">
              <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-gold mb-3">
                What it means in practice
              </div>
              <ul className="space-y-2">
                {[
                  "Feedback in a stakeholder call → live in staging same day",
                  "A new feature ask → scoped, spec'd, scaffolded within a sprint",
                  "A bug report → test case + fix + deploy within hours",
                  "Quality enforced by the pipeline, not by heroics",
                ].map((x, i) => (
                  <li
                    key={i}
                    className="flex items-start gap-2 text-[13px] text-white/90 leading-relaxed"
                  >
                    <span className="mt-1.5 w-1 h-1 rounded-full bg-bits-gold shrink-0" />
                    <span>{x}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </Card>

        {/* Omnipresent AI — the 5-stage loop */}
        <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">
                <Cpu width="14" height="14" /> Omnipresent AI · the 5-stage loop
              </div>
              <h3 className="font-serif text-2xl text-bits-ink">
                AI is not a standalone module. AI is the omnipresent layer.
              </h3>
              <p className="text-[13px] text-bits-steel mt-1.5 max-w-3xl">
                AI powers every process involved in software engineering — not
                as a feature, but as the connective tissue of the pipeline.
              </p>
            </div>
            <Tag tone="gold">5 stages · one continuous loop</Tag>
          </div>
          <div className="grid md:grid-cols-5 gap-3">
            {omnipresent.map((s, i) => (
              <div
                key={i}
                className="relative 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">
                  {String(i + 1).padStart(2, "0")}
                </div>
                <div className="font-semibold text-bits-ink text-[13px] mt-3 leading-snug">
                  {s.title}
                </div>
                <p className="text-[12px] text-bits-steel leading-relaxed mt-2">
                  {s.body}
                </p>
              </div>
            ))}
          </div>
        </Card>

        {/* Track record — flagship case */}
        {caseStudies.filter((c) => c.flagship).map((c, i) => (
          <Card
            key={i}
            className="lg:col-span-12 border-bits-gold/40 bg-gradient-to-br from-white to-bits-cream/40"
          >
            <div className="flex flex-col lg:flex-row gap-6">
              <div className="flex-1">
                <div className="flex items-center gap-2 mb-3">
                  <Tag tone="gold">
                    <Flag width="12" height="12" /> Flagship proof
                  </Tag>
                  <Tag tone="navy">{c.client}</Tag>
                </div>
                <h3 className="font-serif text-3xl text-bits-ink leading-tight">
                  {c.headline}
                </h3>
                <p className="text-[14px] text-bits-steel mt-3 leading-relaxed max-w-2xl">
                  {c.body}
                </p>
                <p className="text-[13.5px] text-bits-ink mt-3 leading-relaxed max-w-2xl font-medium">
                  {c.outcome}
                </p>
                <div className="mt-4 flex flex-wrap gap-1.5">
                  {c.stack.map((s, j) => (
                    <span
                      key={j}
                      className="inline-flex items-center px-2 py-0.5 rounded-full border border-bits-line bg-white text-[10.5px] font-semibold text-bits-ink"
                    >
                      {s}
                    </span>
                  ))}
                </div>
              </div>
              <div className="lg:w-[300px] flex flex-col justify-center">
                <div className="p-6 rounded-2xl bg-bits-deep text-white">
                  <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-gold mb-3">
                    Delivery metric
                  </div>
                  <div className="font-serif text-4xl text-bits-gold num leading-none">
                    {c.metric}
                  </div>
                  <div className="text-[12.5px] text-white/80 mt-2 leading-relaxed">
                    {c.metricSub}
                  </div>
                </div>
              </div>
            </div>
          </Card>
        ))}

        {/* Other case studies */}
        <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">
                <Flag width="14" height="14" /> Track record
              </div>
              <h3 className="font-serif text-2xl text-bits-ink">
                Production references — every claim is backed.
              </h3>
            </div>
            <Tag tone="navy">Reference calls available</Tag>
          </div>
          <div className="grid md:grid-cols-2 gap-4">
            {caseStudies.filter((c) => !c.flagship).map((c, i) => (
              <div
                key={i}
                className="p-5 rounded-xl border border-bits-line bg-white hover:border-bits-gold/50 transition-colors"
              >
                <div className="flex items-start justify-between gap-3 mb-3">
                  <Tag tone="navy">{c.client}</Tag>
                  <div className="text-right">
                    <div className="font-serif text-lg text-bits-goldDeep num leading-none">
                      {c.metric}
                    </div>
                    <div className="text-[10.5px] text-bits-steel mt-1 max-w-[180px] leading-snug">
                      {c.metricSub}
                    </div>
                  </div>
                </div>
                <div className="font-semibold text-bits-ink text-[15px] leading-snug">
                  {c.headline}
                </div>
                <p className="text-[12.5px] text-bits-steel mt-2 leading-relaxed">
                  {c.body}
                </p>
                <p className="text-[12.5px] text-bits-ink mt-2 leading-relaxed font-medium">
                  {c.outcome}
                </p>
                <div className="mt-3 flex flex-wrap gap-1.5">
                  {c.stack.map((s, j) => (
                    <span
                      key={j}
                      className="inline-flex items-center px-2 py-0.5 rounded-full border border-bits-line bg-bits-mist/50 text-[10px] font-semibold text-bits-ink"
                    >
                      {s}
                    </span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </Card>

        {/* The people */}
        <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">
                <Users width="14" height="14" /> The people
              </div>
              <h3 className="font-serif text-2xl text-bits-ink">
                Named humans on the delivery.
              </h3>
            </div>
            <Tag tone="navy">Available for a reference call</Tag>
          </div>
          <div className="grid md:grid-cols-3 gap-4">
            {people.map((p, i) => (
              <div
                key={i}
                className="p-5 rounded-xl border border-bits-line bg-white hover:border-bits-gold/50 transition-colors"
              >
                <div className="font-serif text-xl text-bits-ink leading-tight">
                  {p.name}
                </div>
                <div className="text-[12px] text-bits-goldDeep font-semibold mt-1">
                  {p.role}
                </div>
                <p className="text-[13px] text-bits-steel mt-3 leading-relaxed">
                  {p.body}
                </p>
                <div className="mt-4 flex flex-wrap gap-1.5">
                  {p.tags.map((t, j) => (
                    <span
                      key={j}
                      className="inline-flex items-center px-2 py-0.5 rounded-full border border-bits-line bg-bits-mist/50 text-[10.5px] font-semibold text-bits-ink"
                    >
                      {t}
                    </span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </Card>

        {/* Bi-weekly delivery cadence */}
        <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">
                <Flag width="14" height="14" /> Bi-weekly cadence — what ships, when
              </div>
              <h3 className="font-serif text-2xl text-bits-ink">
                Eight sprints, each closes a gate with UAT.
              </h3>
              <p className="text-[13px] text-bits-steel mt-1.5">
                You asked for the breakdown. Here it is. Every sprint is two
                weeks, every sprint ends with something demo-able, every sprint
                is UAT'd with a real BITSAA stakeholder cohort.
              </p>
            </div>
          </div>
          <div className="grid md:grid-cols-2 gap-3">
            {cadence.map((c, i) => (
              <div
                key={i}
                className="p-4 rounded-xl border border-bits-line bg-white hover:border-bits-gold/50 transition-colors"
              >
                <div className="flex items-center justify-between gap-2">
                  <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-bits-goldDeep">
                    {c.phase}
                  </div>
                  <span className="text-[10px] font-semibold uppercase tracking-[0.14em] text-bits-steel num">
                    Sprint {String(i + 1).padStart(2, "0")}
                  </span>
                </div>
                <div className="font-semibold text-bits-ink text-[14.5px] mt-2">
                  {c.title}
                </div>
                <ul className="mt-3 space-y-1.5">
                  {c.ships.map((s, 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-bits-goldDeep shrink-0" />
                      <span>{s}</span>
                    </li>
                  ))}
                </ul>
                <div className="mt-3 pt-3 border-t border-bits-line/60 text-[11.5px] text-bits-steel leading-relaxed">
                  <span className="text-bits-goldDeep font-semibold">UAT · </span>
                  {c.uat}
                </div>
              </div>
            ))}
          </div>
        </Card>

        {/* Quality guardrails */}
        <Card className="lg:col-span-12 bg-bits-cream border-bits-gold/30">
          <div className="flex items-center gap-2 mb-5">
            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-goldDeep flex items-center gap-2">
              <Shield width="14" height="14" /> Quality at speed — the guardrails
            </div>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
            {guardrails.map((g, i) => (
              <div key={i} className="flex items-start gap-3">
                <div className="w-9 h-9 rounded-lg bg-bits-gold/20 text-bits-goldDeep flex items-center justify-center shrink-0">
                  {g.icon}
                </div>
                <div>
                  <div className="font-semibold text-bits-ink text-[14px] leading-snug">
                    {g.title}
                  </div>
                  <p className="text-[12.5px] text-bits-steel mt-1.5 leading-relaxed">
                    {g.body}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </Card>

        {/* FAQ — direct answers */}
        <Card className="lg:col-span-12">
          <div className="flex items-center gap-2 mb-5">
            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-goldDeep flex items-center gap-2">
              <Spark width="14" height="14" /> FAQ
            </div>
          </div>
          <div className="grid md:grid-cols-2 gap-4">
            {faqs.map((f, i) => (
              <div
                key={i}
                className="p-5 rounded-xl border border-bits-line bg-white"
              >
                <div className="font-serif text-[17px] text-bits-ink leading-snug">
                  {f.q}
                </div>
                <p className="text-[13px] text-bits-steel mt-3 leading-relaxed">
                  {f.a}
                </p>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </Section>
  );
};