window.SectionProductTool = () => {
  const { Section, Card, Tag, Bullet } = window.BITSUI;
  const { Compass, Chat, Cpu, Layers } = window.BITSIcons;

  const pillars = [
    {
      icon: Compass,
      title: "Brainstorm features, together",
      body: "A shared space where BITS shapes what to build next: drop an idea, sketch a flow, prioritise a backlog. Full flexibility: nothing needs to route through a ticket queue or a change-request form. Your team drives the roadmap alongside ours.",
    },
    {
      icon: Layers,
      title: "Direct access to stand-up notes",
      body: "Every day, what the team picked up, what shipped, what's blocked, all visible to BITS in real time. No status-report theatre, no waiting for a weekly call. You always know exactly where the build stands.",
    },
    {
      icon: Cpu,
      title: "Talk to the codebase, in plain language",
      body: "Ask how any part of MyBITS is built (“how does referral approval work?”, “where does verification happen?”) and get a clear, grounded answer straight from the actual code. Full transparency into how everything is built, without needing an engineer to translate.",
    },
  ];

  return (
    <Section
      id="buildwithyou"
      eyebrow="How We Build With You"
      title={
        <>
          A product-management tool, yours at{" "}
          <span className="text-bits-goldDeep">no additional cost</span>.
        </>
      }
      kicker="You get active help shaping features during Year 1 hypercare and the ongoing AMC, because BITS builds alongside the team, with full visibility, from day one. You get access to a custom product-management tool for free, for the life of the engagement."
    >
      <div className="grid lg:grid-cols-12 gap-6">
        <Card className="lg:col-span-12">
          <div className="grid md:grid-cols-3 gap-6">
            {pillars.map((p, i) => {
              const Icon = p.icon;
              return (
                <div key={i} className="flex flex-col">
                  <div className="w-11 h-11 rounded-xl bg-bits-deep/8 text-bits-deep flex items-center justify-center mb-4">
                    <Icon width="20" height="20" />
                  </div>
                  <div className="font-serif text-[20px] text-bits-ink leading-snug mb-2">
                    {p.title}
                  </div>
                  <p className="text-[13.5px] text-bits-ink/80 leading-relaxed">
                    {p.body}
                  </p>
                </div>
              );
            })}
          </div>
        </Card>

        <Card className="lg:col-span-7 bg-gradient-to-br from-bits-deep to-bits-navy text-white border-transparent">
          <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-gold mb-4">
            <Chat width="14" height="14" /> Why it matters for BITS
          </div>
          <p className="font-serif text-[22px] leading-[1.35] text-white">
            The RFP asks that BITS be able to maintain and extend the platform
            independently.{" "}
            <span className="text-bits-gold">
              This is how that promise becomes real
            </span>
            : full visibility into the build the whole way through, not a
            handover document at the end.
          </p>
        </Card>

        <Card className="lg:col-span-5">
          <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-goldDeep mb-3">
            What it replaces
          </div>
          <ul className="space-y-1.5">
            <Bullet>Opaque vendor status calls and weekly slide decks</Bullet>
            <Bullet>Change-request forms for every small idea</Bullet>
            <Bullet>“Only the vendor understands the code” lock-in</Bullet>
            <Bullet>Knowledge that walks out the door at handover</Bullet>
          </ul>
          <div className="mt-5 flex flex-wrap gap-2">
            <Tag tone="gold">Free access</Tag>
            <Tag tone="navy">Full transparency</Tag>
            <Tag tone="muted">Life of engagement</Tag>
          </div>
        </Card>
      </div>
    </Section>
  );
};