window.SectionRFPCoverage = () => {
  const { Section, Card, Tag } = window.BITSUI;
  const { Check, Users, Book, Shield, Heart, Flag, Diamond } = window.BITSIcons;
  const [active, setActive] = React.useState("alumni");

  // Each persona lists every RFP-stated feature + a one-line pointer to the module
  // that ships it. Tick = in scope. All ticked = 100% coverage.
  const personas = {
    alumni: {
      icon: <Users />,
      label: "Alumni",
      phase: "MVP → Phase 1 → Phase 3 · launch Jul 1 · BITSian Day",
      features: [
        ["User onboarding, authentication & verification", "Identity & Auth · inc. migration/ingestion of AlmaConnect + Almabase profiles"],
        ["BITSian Day closest event & check-in", "Events & RSVPs · BITSian Day Attendee Heatmap by Batch / Company / City"],
        ["Global directory (alumni / students / faculty)", "Profiles & Directory · privacy-first, field-level controls"],
        ["Profile management with privacy controls", "Profiles & Directory · email, phone, social links — granular"],
        ["1:1 messaging with approval flow", "Messaging · consent-based, spam-free"],
        ["Community feed (posts, jobs)", "Feed & Social · multi-modal, recency + affinity ranking"],
        ["Basic analytics & logging", "Admin Panel + Troubleshooting Tools module"],
        ["Admin panel for moderation", "Admin Panel · moderation queue + chapter-level leads"],
        ["Notification system (push + email, user prefs)", "Notifications & CMS · per-channel preferences"],
        ["Campus visit — guest house, gate pass, faculty appointment", "Campus Visits & Facilities · inc. faculty appointment slots"],
        ["Jobs and referral system + admin tracking dashboard", "Jobs & Referrals · refer-to-batchmate, tracking"],
        ["Search & recommendation system across pages", "Profiles & Directory · AI semantic search"],
        ["Deals & Marketplace (BITSian offers, coupon codes)", "BITSian Deals · partner offers + coupons"],
        ["Advanced events (ticketing, QR check-in)", "Events & RSVPs · RSVP + waitlist + QR check-in"],
        ["Donations and fundraising", "Fundraising & Giving · campaigns + Razorpay"],
        ["Moderation dashboards (AMP team, chapter leads, admins)", "Admin Panel · three-tier moderator roles"],
      ],
    },
    students: {
      icon: <Book />,
      label: "Students",
      phase: "MVP · day-one feature-complete for student life",
      features: [
        ["User onboarding & authentication", "Identity & Auth · verified @pilani.bits-pilani.ac.in"],
        ["Profile management (academic + interest details)", "Profiles & Directory"],
        ["1:1 messaging (approval-based)", "Messaging"],
        ["Community feed (posts, jobs)", "Feed & Social"],
        ["Academic access (courses, materials, updates)", "Academics · course dashboard"],
        ["Assignment submission (upload + track)", "Academics · assignment flow with feedback"],
        ["Notification system (deadlines, jobs, announcements)", "Notifications & CMS"],
        ["Jobs & referral access (apply to jobs/internships)", "Jobs & Referrals · one-tap apply"],
        ["Academic Calendar with personal events", "Academic Calendar · institutional + personal events overlay"],
      ],
    },
    faculty: {
      icon: <Diamond />,
      label: "Faculty",
      phase: "MVP · course ops + campus interactions",
      features: [
        ["User onboarding & authentication (institutional)", "Identity & Auth"],
        ["Profile management (department, research, privacy)", "Profiles & Directory · faculty pages"],
        ["1:1 messaging (approval-based)", "Messaging"],
        ["Community feed + view postings + approve/decline applications", "Feed & Social + Jobs"],
        ["Academic tools (course mgmt, assignment uploads, resources)", "Academics"],
        ["Notification system", "Notifications & CMS"],
        ["View faculty bookings made by parents / alumni", "Faculty Bookings Inbox"],
        ["Academic Calendar with personal events", "Academic Calendar"],
      ],
    },
    parents: {
      icon: <Heart />,
      label: "Parents",
      phase: "MVP · finance + campus visit + support",
      features: [
        ["User onboarding & authentication (linked to student)", "Identity & Auth · parent-to-child linkage"],
        ["Profile management (access to student info)", "Profiles & Directory · parent surface"],
        ["Finance section (fee payments, transaction tracking)", "Fees, Payroll, Payments · Razorpay"],
        ["Campus visit scheduling with digital gate pass", "Campus Visits & Facilities"],
        ["Campus hotel / guest house booking", "Campus Visits & Facilities"],
        ["Notification system (payments, approvals, updates)", "Notifications & CMS"],
        ["FAQs page with form to send question", "FAQ & Support · form → admin inbox"],
        ["Academic Calendar with personal events", "Academic Calendar"],
      ],
    },
    staff: {
      icon: <Users />,
      label: "Staff",
      phase: "MVP · replaces DarwinBox/Zoho People for institutional staff",
      features: [
        ["User onboarding & authentication (role-based)", "Identity & Auth"],
        ["Profile & personal details", "Profiles & Directory · staff surface"],
        ["Leave management (apply, track, approve)", "HR & Staff Ops"],
        ["Payroll & compensation (salary, structure)", "Fees, Payroll, Payments"],
        ["Payslip access (view + download)", "HR & Staff Ops · payslip vault"],
        ["Notification system", "Notifications & CMS"],
        ["Academic Calendar with personal events", "Academic Calendar"],
      ],
    },
    admin: {
      icon: <Shield />,
      label: "Admin",
      phase: "MVP · central governance for AMP team, chapter leads & admins",
      features: [
        ["Admin panel (users, content, activity)", "Admin Panel"],
        ["User verification & access control", "Admin Panel · verify, suspend, role mgmt"],
        ["Content moderation (posts, messages, reports)", "Admin Panel · moderation queue"],
        ["Basic analytics & logging", "Admin Panel + Troubleshooting Tools"],
        ["Notification management (system-wide alerts)", "Notifications & CMS · announcement composer"],
        ["Update alumni directory / invite alums", "Admin Panel · AlmaConnect + Almabase bulk ops"],
        ["Approve campus hotel bookings / gate passes", "Campus Visits & Facilities · approval chain"],
        ["View sent messages from FAQ section", "FAQ & Support · admin inbox"],
        ["View fee payment status", "Fees, Payroll, Payments · admin dashboard"],
        ["Upload academic calendar common events", "Academic Calendar · admin composer"],
        ["Approve gate passes, parental visits, track late-comings", "Campus Visits & Facilities"],
        ["Provide access to Alumni documents — transcripts via DigiLocker/ERP", "Document Vault · DigiLocker/ERP bridge"],
      ],
    },
  };

  const keys = Object.keys(personas);
  const total = keys.reduce((s, k) => s + personas[k].features.length, 0);

  return (
    <Section
      id="coverage"
      eyebrow="RFP Coverage"
      title={
        <>
          Every RFP feature, per persona.{" "}
          <span className="text-bits-goldDeep">100% mapped.</span>
        </>
      }
      kicker={`The BITSAA RFP is structured persona-first — Alumni, Students, Faculty, Parents, Staff, Admin. This section mirrors that structure exactly. ${total} RFP-stated features, every one tied to a module. Tap any persona to verify coverage in seconds.`}
    >
      <div className="flex flex-wrap gap-2 mb-6">
        {keys.map((k) => {
          const p = personas[k];
          const isActive = active === k;
          return (
            <button
              key={k}
              onClick={() => setActive(k)}
              className={`inline-flex items-center gap-2 px-4 py-2 rounded-full border text-[12.5px] font-semibold transition-colors ${
                isActive
                  ? "bg-bits-deep text-white border-bits-deep"
                  : "bg-white text-bits-ink border-bits-line hover:border-bits-deep/40"
              }`}
            >
              <span
                className={`${
                  isActive ? "text-bits-gold" : "text-bits-goldDeep"
                }`}
              >
                {p.icon}
              </span>
              {p.label}
              <span
                className={`text-[10.5px] font-bold num px-1.5 py-0.5 rounded-full ${
                  isActive
                    ? "bg-bits-gold/25 text-white"
                    : "bg-bits-mist text-bits-steel"
                }`}
              >
                {p.features.length}
              </span>
            </button>
          );
        })}
      </div>

      <Card className="lg:col-span-12 fade-in" key={active}>
        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-5">
          <div>
            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-goldDeep mb-1 flex items-center gap-2">
              {personas[active].icon} {personas[active].label} coverage
            </div>
            <h3 className="font-serif text-2xl text-bits-ink leading-tight">
              {personas[active].features.length}/
              {personas[active].features.length} RFP features covered.
            </h3>
            <p className="text-[12.5px] text-bits-steel mt-1">
              {personas[active].phase}
            </p>
          </div>
          <Tag tone="ok">
            <Check width="12" height="12" />
            All shipped
          </Tag>
        </div>

        <div className="grid md:grid-cols-2 gap-3">
          {personas[active].features.map(([feat, where], i) => (
            <div
              key={i}
              className="flex items-start gap-3 p-3.5 rounded-xl bg-emerald-600/5 border border-emerald-600/20"
            >
              <div className="w-6 h-6 rounded-full bg-emerald-600/15 text-emerald-700 flex items-center justify-center shrink-0 mt-0.5">
                <Check width="14" height="14" />
              </div>
              <div className="flex-1 min-w-0">
                <div className="text-[13.5px] font-semibold text-bits-ink leading-snug">
                  {feat}
                </div>
                <div className="text-[12px] text-bits-steel mt-1 leading-snug">
                  {where}
                </div>
              </div>
            </div>
          ))}
        </div>
      </Card>
    </Section>
  );
};