window.SectionScopeOfWork = () => {
  const { Section, Card, Tag, Bullet } = window.BITSUI;
  const {
    Users,
    Chat,
    Calendar,
    Briefcase,
    Book,
    Pin,
    Shield,
    Coins,
    Heart,
    Globe,
    Layers,
    Grid,
    File,
    Flag,
    Map,
    Spark,
    Cpu,
    Diamond,
  } = window.BITSIcons;
  const [active, setActive] = React.useState("alumni");
  const [source, setSource] = React.useState("all");

  // source: "RFP" = listed in BITSAA RFP, "Added" = beyond-RFP additions by us.
  const modules = [
    {
      id: "ai",
      icon: <Layers />,
      name: "Voice Powered Navigation and Support",
      tag: "Core",
      source: "Added",
      summary:
        "Intent parser, action router, context manager. Every voice/text input routes here first.",
      details: [
        "Intent classification across 22 action categories",
        "Clarifying questions instead of error screens",
        "Tool-use layer connecting to all backend services",
        "Conversation memory per user (7-day rolling context)",
      ],
    },
    {
      id: "auth",
      icon: <Shield />,
      name: "Identity & Auth",
      tag: "MVP",
      source: "RFP",
      summary:
        "Role-aware auth with institutional email verification and batch/ID proof flows.",
      details: [
        "JWT auth, email + phone OTP",
        "Alumni verification via batch + ID document upload",
        "Student verification via @pilani.bits-pilani.ac.in domains",
        "Form-based + voice onboarding (never chat-based)",
        "Unclaimed profile claim flow (for migrated AlmaConnect data)",
      ],
    },
    {
      id: "profiles",
      icon: <Users />,
      name: "Profiles & Directory",
      tag: "MVP",
      source: "RFP",
      summary:
        "Rich profiles with work history, projects, skills; filterable directory with AI search.",
      details: [
        "Natural-language directory queries",
        "Contact request + accept flow",
        "Profile Coach suggestions (weekly, one at a time)",
        "Privacy controls per field",
      ],
    },
    {
      id: "feed",
      icon: <Grid />,
      name: "Feed & Social",
      tag: "MVP",
      source: "RFP",
      summary:
        "Multi-modal posts, campus-specific + global feeds, life-event post types.",
      details: [
        "Posts: text, image, video, poll, link, event card, life event",
        "Recency + affinity ranking at launch",
        "AI Post Composer (polish rough thoughts into drafts)",
        "Reactions + threaded replies",
      ],
    },
    {
      id: "chat",
      icon: <Chat />,
      name: "Messaging",
      tag: "MVP",
      source: "RFP",
      summary:
        "1:1 + group chat, real-time via WebSockets, AI-suggested openers on first message.",
      details: [
        "Typing indicators, read receipts, presence",
        "Ice Breaker AI for cold outreach",
        "Meeting Prep AI for mentorship calls",
        "Mute, block, report flows",
      ],
    },
    {
      id: "events",
      icon: <Calendar />,
      name: "Events & RSVPs",
      tag: "MVP",
      source: "RFP",
      summary:
        "Chapter meetups, campus events, BITSian Day. AI event planner creates from natural language.",
      details: [
        "AI Event Planner ('plan a Bangalore chapter meetup next Sat')",
        "Who-to-Meet AI (top 5 connections at this event)",
        "RSVP + waitlist + QR check-in",
        "Attendance auto-captured → Life Event Graph",
      ],
    },
    {
      id: "jobs",
      icon: <Briefcase />,
      name: "Jobs & Referrals",
      tag: "MVP",
      source: "RFP",
      summary:
        "Post jobs, one-tap apply, AI-matched candidates, referral asks to batchmates.",
      details: [
        "Career Pathfinder (visual career paths by degree)",
        "Refer-to-batchmate flow",
        "Hire confirmation → 'Hired a BITSian' life event",
        "Application tracking for posters",
      ],
    },
    {
      id: "academics",
      icon: <Book />,
      name: "Academics (Students + Faculty)",
      tag: "MVP",
      source: "RFP",
      summary:
        "Timetable, attendance, assignments, grades, course materials, AI study groups.",
      details: [
        "Timetable + attendance capture",
        "Assignments with submission + feedback",
        "Study Groups AI (matched by struggle topic)",
        "Grade dashboard + DigiLocker transcript export (Phase 2)",
      ],
    },
    {
      id: "campus",
      icon: <Pin />,
      name: "Campus Visits & Facilities",
      tag: "MVP",
      source: "RFP",
      summary:
        "Guest house booking, gate pass flow, parent campus visit scheduling.",
      details: [
        "Guest house inventory + calendar-based booking",
        "Gate pass request → faculty/warden approval",
        "Parent visit planning with room tier selection",
        "Facilities map (opt-in, privacy-first)",
      ],
    },
    {
      id: "pay",
      icon: <Coins />,
      name: "Fees, Payroll, Payments",
      tag: "MVP",
      source: "RFP",
      summary:
        "Parent fee payments, staff payslips, Razorpay integration (wired post-MVP).",
      details: [
        "Fee schedule + installment payments",
        "Payslip generation + download",
        "Razorpay integration (wired up post-MVP)",
        "Expense claim flow for staff",
      ],
    },
    {
      id: "hr",
      icon: <File />,
      name: "HR & Staff Ops",
      tag: "MVP",
      source: "RFP",
      summary:
        "Leave, attendance, payroll — replaces DarwinBox/Zoho People for institutional staff.",
      details: [
        "Leave request + approval chain",
        "Attendance with geo-fencing",
        "Payslip vault + tax forms",
        "Expense management",
      ],
    },
    {
      id: "cms",
      icon: <Globe />,
      name: "Notifications & CMS",
      tag: "MVP",
      source: "RFP",
      summary:
        "Push, email, WhatsApp Business notifications. Admin-managed announcements.",
      details: [
        "FCM + APNs push",
        "WhatsApp Business API for critical alerts",
        "Announcement composer in admin panel",
        "User notification preferences",
      ],
    },
    {
      id: "admin",
      icon: <Flag />,
      name: "Admin Panel",
      tag: "MVP",
      source: "RFP",
      summary:
        "Next.js web admin for moderation, user management, analytics, content ops.",
      details: [
        "User management (verify, suspend, merge duplicates)",
        "Moderation queue (reports, flags)",
        "Analytics dashboards (DAU, engagement, funnel) — built for 100K+ users, multi-campus",
        "Three moderator tiers — AMP team · chapter leads · campus admins",
        "Bulk alumni invite flow + AlmaConnect / Almabase directory sync",
      ],
    },
    {
      id: "fund",
      icon: <Heart />,
      name: "Fundraising & Giving",
      tag: "MVP",
      source: "RFP",
      summary:
        "Campaign pages, donations, donor recognition — replaces Giveindia/AlmaShines.",
      details: [
        "Campaign creation + goal tracking",
        "Razorpay donation flow (wired post-MVP)",
        "Donor wall + tax receipts",
        "Chapter-level fundraising",
      ],
    },
    {
      id: "whatsapp",
      icon: <Chat />,
      name: "WhatsApp Help Bot & Chat Channel",
      tag: "MVP",
      source: "RFP",
      summary:
        "Two-way conversational bot on WhatsApp Business — platform updates, notifications, and help, delivered where users already live.",
      details: [
        "Opt-in WhatsApp channel per user (pairs to BITS identity)",
        "Platform updates + announcements delivered in-thread",
        "Conversational help bot — routes intents to the same voice-nav engine",
        "Fee-due / event-day / approval alerts with one-tap actions",
        "Conversation handoff to human admin for escalations",
      ],
    },
    {
      id: "bday",
      icon: <Flag />,
      name: "BITSian Day Attendee Heatmap",
      tag: "MVP",
      source: "RFP",
      summary:
        "Dedicated BITSian Day closest-event + check-in surface with live attendee heatmaps — explicitly requested in the Alumni MVP brief.",
      details: [
        "Nearest BITSian Day event auto-surfaced for every alum",
        "One-tap RSVP + QR check-in",
        "Live heatmap of attendees by Batch Division",
        "Live heatmap by current Company",
        "Live heatmap by City they live in",
        "Embeddable view for the stage screen + annual report",
      ],
    },
    {
      id: "deals",
      icon: <Coins />,
      name: "BITSian Deals & Offers",
      tag: "MVP",
      source: "RFP",
      summary:
        "Curated list of BITSian-only offers — partner links, coupon codes, chapter promotions. Distinct from the services Marketplace.",
      details: [
        "Admin-curated deals with coupon codes or partner links",
        "Filter by category (travel, SaaS, retail, finance) + chapter",
        "Click-through tracking + coupon-redemption analytics",
        "BITSian-founded startup self-serve deal submission",
        "Auto-notify eligible cohorts on new high-value deals",
      ],
    },
    {
      id: "faq",
      icon: <Chat />,
      name: "FAQ & Support Form",
      tag: "MVP",
      source: "RFP",
      summary:
        "Parent-facing FAQ library with a structured submit-a-question form that routes to the admin inbox — round-trip in the platform, not over email.",
      details: [
        "Searchable FAQ library per persona",
        "Structured form (topic, child, urgency, attachment)",
        "Admin inbox with assignment, status, canned replies",
        "Response posts back into the parent's notification feed",
        "Aggregated reporting — top question categories surface as FAQ candidates",
      ],
    },
    {
      id: "faculty-appt",
      icon: <Calendar />,
      name: "Faculty Appointment Booking",
      tag: "MVP",
      source: "RFP",
      summary:
        "Faculty publish office-hours / appointment slots; students, parents, and alumni book through the app — part of the RFP's campus visit flow.",
      details: [
        "Faculty-configurable availability calendar",
        "Slot booking with topic + short agenda",
        "Auto-creates gate pass when booking is from off-campus",
        "In-app reminder + WhatsApp confirmation",
        "Faculty-side inbox to accept / reschedule / decline",
      ],
    },
    {
      id: "faculty-inbox",
      icon: <Diamond />,
      name: "Faculty Bookings Inbox",
      tag: "MVP",
      source: "RFP",
      summary:
        "Unified inbox for every booking a faculty member receives — from parents, alumni, mentees. Explicitly listed in the RFP faculty scope.",
      details: [
        "Consolidated view of appointments, mentorship calls, parent meetings",
        "Calendar integration (Google / Outlook)",
        "Bulk accept / decline with custom note",
        "Rescheduling suggestions",
        "Attendance log feeds faculty contribution metrics",
      ],
    },
    {
      id: "troubleshoot",
      icon: <Shield />,
      name: "Troubleshooting Tools & Event Logger",
      tag: "MVP",
      source: "RFP",
      summary:
        "RFP-explicit: basic troubleshooting tools and loggers for identifying issues. Beyond analytics — an operator-grade event stream + diagnostic surface.",
      details: [
        "Structured event log (user action, API call, error, latency)",
        "Per-user session replay pointer for support tickets",
        "Admin console to search / filter / tail logs in real time",
        "Error triage queue with severity, repro steps, stack trace",
        "Health dashboard with uptime, error rate, p95 latency",
      ],
    },
    {
      id: "calendar",
      icon: <Calendar />,
      name: "Academic Calendar · institutional + personal",
      tag: "MVP",
      source: "RFP",
      summary:
        "Unified calendar overlaying institutional events (academic, campus, BITSian Day) with each user's personal events — RFP-requested across Students, Faculty, Parents, Staff.",
      details: [
        "Admin-uploaded common academic calendar",
        "Per-persona event stream (classes, meetings, payments)",
        "Personal events layer (user-created, visible to self only)",
        "Device calendar sync (Google / Apple)",
        "Smart reminders routed to WhatsApp / push / email",
      ],
    },
    {
      id: "docvault",
      icon: <File />,
      name: "Alumni Document Vault · DigiLocker/ERP bridge",
      tag: "MVP",
      source: "RFP",
      summary:
        "Admin-granted access to alumni transcripts, degree certificates, and official documents via the DigiLocker / BITS ERP bridge — explicitly listed in the RFP admin scope.",
      details: [
        "DigiLocker OAuth flow — user-consent, institution-signed",
        "ERP bridge for transcripts not yet in DigiLocker",
        "Admin approval workflow for issuance requests",
        "Download audit log + tamper-proof signatures",
        "Shareable verification link for third parties (employers, visa)",
      ],
    },

    /* ─────── Added beyond RFP ─────── */

    {
      id: "effect",
      icon: <Globe />,
      name: "BITSian Effect — live impact engine",
      tag: "Flagship",
      source: "Added",
      summary:
        "World map + live counters of companies, revenue, jobs, capital raised, non-profits. Embeddable everywhere. Marketing + fundraising + admissions in one surface.",
      details: [
        "Live world map of BITSian spread, zoomable by campus/batch/company",
        "Counters: companies founded, revenue, jobs, capital raised, non-profits, mentorship hours, hires-of-BITSians-by-BITSians",
        "Auto-populated from Life Event Graph + public company/funding feeds",
        "Embeddable widgets for bits.ac.in, admissions microsites, annual report",
        "One-click CSV + branded PNG exports for press kits",
        "BITSian of the Week / Top 100 / chapter leaderboards",
      ],
    },
    {
      id: "life",
      icon: <Spark />,
      name: "Life Event Graph",
      tag: "Added",
      source: "Added",
      summary:
        "Native capture of life events — marriage, new job, trip, hiring, referrals, mentoring. Powers Wrapped + social discovery.",
      details: [
        "Life event post types: married, new job, promoted, had a kid, moved cities, trip, award, new company",
        "One-tap structured actions: 'I hired this BITSian', 'I referred', 'I mentored', 'Partied with'",
        "Auto-capture from existing flows (RSVP, job post, calendar)",
        "Feeds Wrapped, networking nudges, alumni graph",
      ],
    },
    {
      id: "map",
      icon: <Map />,
      name: "Discover BITSians Map",
      tag: "Added",
      source: "Added",
      summary:
        "Opt-in location discovery. 'Visible' toggle with time-box. 'Open to hang out' mode.",
      details: [
        "Default OFF. User explicitly opts in with 2h / 1d / always",
        "City-level by default, precise only with second opt-in",
        "No location history retained",
        "Ice breaker + meetup request flow built on top",
      ],
    },
    {
      id: "market",
      icon: <Briefcase />,
      name: "BITSian Marketplace",
      tag: "Added",
      source: "Added",
      summary:
        "Freelancer + agency directory, portfolios, recommendation chains, in-app hire flow.",
      details: [
        "Service profiles with portfolio + rates",
        "Recommendation chains (who referred them)",
        "Hire request → quote → engagement tracking",
        "Ratings only after completed work",
      ],
    },
    {
      id: "scrapbook",
      icon: <Book />,
      name: "Scrapbook, Living Tribute & The Interview",
      tag: "Added",
      source: "Added",
      summary:
        "Profile-level memory scrapbook, AI-guided Interview, collaborative Living Tribute, Memory Movies.",
      details: [
        "Add-a-memory flows (text, photo, voice)",
        "The Interview · AI-guided story capture",
        "Living Tribute · invite-only collaborative tribute",
        "Memory Movie · AI stitches memories into a reel",
      ],
    },
    {
      id: "lineage",
      icon: <Users />,
      name: "Lineage Tree & BITSian Couples",
      tag: "Added",
      source: "Added",
      summary:
        "BITS family graph across batches + BITSian couples directory.",
      details: [
        "Map siblings, parents, cousins, kids who went to BITS",
        "BITSian Couples · opt-in visibility",
        "Cross-batch reunion nudges",
        "Milestone reminders flow into Wrapped",
      ],
    },
    {
      id: "faculty",
      icon: <Diamond />,
      name: "Faculty Directory & Faculty Pages",
      tag: "Added",
      source: "Added",
      summary:
        "First-class faculty surface — research, courses, mentees, office hours.",
      details: [
        "Directory filterable by campus, department, era",
        "Rich faculty page with courses + alumni taught",
        "One-tap office hours / mentorship request",
        "Alumni thank-you wall tied to pages",
      ],
    },
    {
      id: "news",
      icon: <Globe />,
      name: "BITSian News",
      tag: "Added",
      source: "Added",
      summary:
        "Curated editorial news surface of BITSian press, podcasts, funding, awards.",
      details: [
        "Auto-ingestion from public news + podcast feeds",
        "Chapter-admin editorial queue",
        "Auto-notify the BITSian + close network on publish",
        "Weekly digest email + in-app news tab",
      ],
    },
  ];

  const filtered = modules.filter((m) =>
    source === "all" ? true : m.source === source
  );

  const permissionMatrix = {
    alumni: {
      label: "Alumni",
      features: [
        ["Directory + search", true],
        ["Feed (read + post)", true],
        ["Messaging", true],
        ["Jobs (post + apply)", true],
        ["Events (create + RSVP)", true],
        ["Campus visit booking", true],
        ["Mentoring & referrals", true],
        ["Fundraising", true],
        ["Life events + Wrapped", true],
        ["Discover Map (opt-in)", true],
      ],
    },
    student: {
      label: "Students",
      features: [
        ["Feed (read + post)", true],
        ["Messaging", true],
        ["Academics (full)", true],
        ["Timetable + attendance", true],
        ["Jobs (apply)", true],
        ["Events (RSVP)", true],
        ["Study Groups AI", true],
        ["Directory", true],
        ["Life events", true],
        ["Discover Map (opt-in)", true],
      ],
    },
    faculty: {
      label: "Faculty",
      features: [
        ["Course management", true],
        ["Assignments & grading", true],
        ["Feed + messaging", true],
        ["Jobs (post)", true],
        ["Events", true],
        ["Calendar", true],
        ["Gate pass approval", true],
        ["Directory", true],
        ["Fee management", false],
        ["Payroll (view own)", true],
      ],
    },
    parent: {
      label: "Parents",
      features: [
        ["Fee payment", true],
        ["Campus visit booking", true],
        ["Guest house", true],
        ["Child profile link", true],
        ["Gate pass request", true],
        ["Announcements feed", true],
        ["Directory", false],
        ["Messaging (alumni)", false],
        ["Jobs", false],
        ["Feed posting", false],
      ],
    },
    staff: {
      label: "Staff",
      features: [
        ["Leave management", true],
        ["Attendance", true],
        ["Payslips", true],
        ["Expense claims", true],
        ["Calendar", true],
        ["Announcements", true],
        ["Directory (internal)", true],
        ["Academics", false],
        ["Jobs (post)", false],
        ["Fundraising", false],
      ],
    },
    admin: {
      label: "Admin",
      features: [
        ["User management", true],
        ["Moderation panel", true],
        ["Analytics", true],
        ["Content CMS", true],
        ["Announcements", true],
        ["Feature flags", true],
        ["Role assignment", true],
        ["Data migration ops", true],
        ["All modules (read)", true],
        ["Audit logs", true],
      ],
    },
  };

  const sourceOptions = [
    { id: "all", label: `All (${modules.length})` },
    {
      id: "RFP",
      label: `RFP (${modules.filter((m) => m.source === "RFP").length})`,
    },
    {
      id: "Added",
      label: `Added (${modules.filter((m) => m.source === "Added").length})`,
    },
  ];

  return (
    <Section
      id="scope"
      eyebrow="Scope of Work"
      title={
        <>
          {modules.filter((m) => m.source === "RFP").length} modules from the RFP.{" "}
          <span className="text-bits-goldDeep">
            {modules.filter((m) => m.source === "Added").length} we're adding on top.
          </span>
        </>
      }
      kicker="Every module below is tagged RFP (listed in the BITSAA brief) or Added (beyond-RFP). Toggle to filter. MVP critical path lands July 1; all RFP items ship by September 1; Added items by October 1."
    >
      <div className="mb-5 p-4 rounded-xl bg-bits-gold/10 border border-bits-gold/40">
        <div className="flex items-start gap-3">
          <div className="w-8 h-8 rounded-lg bg-bits-gold/25 text-bits-goldDeep flex items-center justify-center shrink-0">
            <Heart width="16" height="16" />
          </div>
          <div className="text-[13px] text-bits-ink leading-relaxed">
            <span className="font-semibold text-bits-goldDeep uppercase tracking-wider text-[11px] mr-2">
              Goodwill contribution
            </span>
            Every feature tagged <span className="font-semibold">Added</span> sits <em>beyond</em> the BITSAA RFP and ships at <span className="font-semibold">no additional cost</span> — Discover Map, BITSian Marketplace, Life Event Graph, BITSians Wrapped, and every AI moment. This is our contribution to the BITSian community, bundled into the same fixed fee.
          </div>
        </div>
      </div>
      <div className="flex flex-wrap items-center justify-between gap-3 mb-5">
        <div className="flex gap-1.5 p-1 rounded-full bg-bits-mist/70 border border-bits-line">
          {sourceOptions.map((s) => (
            <button
              key={s.id}
              onClick={() => setSource(s.id)}
              className={`px-3.5 py-1.5 rounded-full text-[12px] font-semibold transition-colors ${
                source === s.id
                  ? "bg-bits-deep text-white shadow-sm"
                  : "text-bits-steel hover:text-bits-ink"
              }`}
            >
              {s.label}
            </button>
          ))}
        </div>
        <div className="flex items-center gap-2 text-[11.5px] text-bits-steel">
          <span className="inline-flex items-center gap-1.5">
            <span className="w-2 h-2 rounded-full bg-bits-deep" /> RFP
          </span>
          <span className="inline-flex items-center gap-1.5">
            <span className="w-2 h-2 rounded-full bg-bits-gold" /> Added
          </span>
        </div>
      </div>

      <div className="grid lg:grid-cols-12 gap-6">
        <div className="lg:col-span-8 grid sm:grid-cols-2 gap-4">
          {filtered.map((m) => (
            <details
              key={m.id}
              className={`rounded-xl bg-white border hover:border-bits-gold/50 transition-colors ${
                m.source === "Added"
                  ? "border-bits-gold/40"
                  : "border-bits-line/70"
              }`}
            >
              <summary className="p-4 flex items-start gap-3">
                <div
                  className={`w-9 h-9 rounded-lg flex items-center justify-center shrink-0 ${
                    m.source === "Added"
                      ? "bg-bits-gold/15 text-bits-goldDeep"
                      : "bg-bits-deep/8 text-bits-deep"
                  }`}
                >
                  {m.icon}
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-start justify-between gap-2">
                    <div className="font-semibold text-bits-ink text-[14.5px] leading-snug">
                      {m.name}
                    </div>
                    <Tag tone={m.source === "Added" ? "gold" : "navy"}>
                      {m.source}
                    </Tag>
                  </div>
                  <p className="text-[13px] text-bits-steel mt-1 leading-snug">
                    {m.summary}
                  </p>
                </div>
              </summary>
              <div className="px-4 pb-4 pt-1 border-t border-bits-line/60">
                <ul className="space-y-1.5 pt-3">
                  {m.details.map((d, i) => (
                    <Bullet key={i}>{d}</Bullet>
                  ))}
                </ul>
              </div>
            </details>
          ))}
        </div>

        <div className="lg:col-span-4 space-y-6 lg:sticky lg:top-24 lg:self-start">
          <Card>
            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-goldDeep mb-3">
              Three delivery anchors
            </div>
            <ul className="space-y-2.5">
              <li className="flex gap-2.5">
                <span className="mt-1 w-2 h-2 rounded-full bg-bits-deep shrink-0" />
                <div>
                  <div className="text-[12.5px] font-semibold text-bits-ink">
                    MVP · Jul 1, 2026
                  </div>
                  <div className="text-[11.5px] text-bits-steel">
                    Critical-path RFP. App store live. BITSian Day ready.
                  </div>
                </div>
              </li>
              <li className="flex gap-2.5">
                <span className="mt-1 w-2 h-2 rounded-full bg-bits-navy shrink-0" />
                <div>
                  <div className="text-[12.5px] font-semibold text-bits-ink">
                    RFP complete · Sep 1, 2026
                  </div>
                  <div className="text-[11.5px] text-bits-steel">
                    Every module listed in the brief, shipped.
                  </div>
                </div>
              </li>
              <li className="flex gap-2.5">
                <span className="mt-1 w-2 h-2 rounded-full bg-bits-gold shrink-0" />
                <div>
                  <div className="text-[12.5px] font-semibold text-bits-ink">
                    Additional features · Oct 1, 2026
                  </div>
                  <div className="text-[11.5px] text-bits-steel">
                    AI moments + Map + Marketplace + Life Event Graph.
                  </div>
                </div>
              </li>
            </ul>
          </Card>
        </div>

        <Card className="lg:col-span-12 overflow-hidden">
          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-4">
            <div>
              <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-goldDeep mb-1">
                Permission Matrix
              </div>
              <h3 className="font-serif text-2xl text-bits-ink">
                Role-aware, not role-duplicated
              </h3>
              <p className="text-[13px] text-bits-steel mt-1">
                Tap a role to see what they can do.
              </p>
            </div>
            <div className="flex flex-wrap gap-2">
              {Object.entries(permissionMatrix).map(([k, v]) => (
                <button
                  key={k}
                  onClick={() => setActive(k)}
                  className={`px-3 py-1.5 rounded-full text-[12px] font-semibold border transition-colors ${
                    active === k
                      ? "bg-bits-deep text-white border-bits-deep"
                      : "bg-white text-bits-ink border-bits-line hover:border-bits-deep/40"
                  }`}
                >
                  {v.label}
                </button>
              ))}
            </div>
          </div>

          <div
            className="grid grid-cols-2 md:grid-cols-5 gap-2 fade-in"
            key={active}
          >
            {permissionMatrix[active].features.map(([f, has], i) => (
              <div
                key={i}
                className={`p-3 rounded-lg border text-[13px] flex items-center gap-2 ${
                  has
                    ? "bg-emerald-600/5 border-emerald-600/20 text-bits-ink"
                    : "bg-bits-ink/5 border-bits-line text-bits-steel line-through"
                }`}
              >
                <span
                  className={`w-1.5 h-1.5 rounded-full shrink-0 ${
                    has ? "bg-emerald-600" : "bg-bits-steel/40"
                  }`}
                />
                {f}
              </div>
            ))}
          </div>
        </Card>
      </div>
    </Section>
  );
};