window.SectionExecutiveSummary = () => {
  const { Section, Card, Tag } = window.BITSUI;

  return (
    <Section
      id="summary"
      eyebrow="Executive Summary"
      title={
        <>
          A single AI-native platform for every{" "}
          <span className="text-bits-goldDeep">BITSian</span> — alumni, students,
          faculty, parents, staff, and admins.
        </>
      }
      kicker="Submitted to BITSAA in response to the BITS Pilani Unified App RFP. Scope combines MVP + Phase 1 into one release, targeted for BITSian Day 2026. This proposal is backed by a finished PRD, a 65-screen interactive prototype, and a three-anchor delivery plan."
    >
      <div className="grid md:grid-cols-12 gap-6">
        <Card className="md:col-span-7 overflow-hidden">
          <div className="relative z-10">
            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-goldDeep mb-3">
              The pitch in one paragraph
            </div>
            <p className="font-serif text-[22px] md:text-[26px] leading-[1.3] text-bits-ink">
              Every BITS constituency currently uses a different tool — AlmaConnect for
              alumni, institutional portals for students, spreadsheets for parents,
              HR software for staff.{" "}
              <span className="bg-bits-gold/20 px-1 rounded">
                We collapse the stack into one conversational surface
              </span>{" "}
              where language is the interface, the AI routes intent to the right
              service, and every stakeholder gets a tailored view of the same
              institutional graph.
            </p>
            <div className="mt-6 flex flex-wrap gap-2">
              <Tag tone="navy">Mobile-first</Tag>
              <Tag tone="navy">Voice-powered</Tag>
              <Tag tone="navy">English-only MVP</Tag>
              <Tag tone="gold">MVP · Jul 1, 2026</Tag>
              <Tag tone="gold">RFP · Sep 1</Tag>
              <Tag tone="gold">Added · Oct 1</Tag>
              <Tag tone="muted">React Native + Node + AWS</Tag>
            </div>
          </div>
        </Card>

        <Card className="md:col-span-5 bg-gradient-to-br from-bits-deep to-bits-navy text-white border-transparent">
          <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-gold mb-4">
            Signal numbers
          </div>
          <div className="grid grid-cols-2 gap-6">
            <div>
              <div className="font-serif text-4xl text-bits-gold num leading-none">
                65
              </div>
              <div className="text-[13px] text-white/90 font-medium mt-1">
                Screens designed
              </div>
              <div className="text-[12px] text-white/60">Interactive prototype, v3</div>
            </div>
            <div>
              <div className="font-serif text-4xl text-bits-gold num leading-none">
                14
              </div>
              <div className="text-[13px] text-white/90 font-medium mt-1">
                Modules in MVP
              </div>
              <div className="text-[12px] text-white/60">+ 7 in Phase 2 roadmap</div>
            </div>
            <div>
              <div className="font-serif text-4xl text-bits-gold num leading-none">
                3
              </div>
              <div className="text-[13px] text-white/90 font-medium mt-1">
                Delivery anchors
              </div>
              <div className="text-[12px] text-white/60">
                Jul 1 · Sep 1 · Oct 1
              </div>
            </div>
            <div>
              <div className="font-serif text-4xl text-bits-gold num leading-none">
                6
              </div>
              <div className="text-[13px] text-white/90 font-medium mt-1">
                Stakeholder groups
              </div>
              <div className="text-[12px] text-white/60">One unified codebase</div>
            </div>
          </div>
        </Card>
      </div>
    </Section>
  );
};