hanzo.ai/components/zap/ZapFeatures.tsx

'use client'

/**
 * NO TAILWIND. `Band` and `Head` from `components/marketing/band` carry the
 * section frame and the centred head; the cards are gui props over
 * @hanzo/design's tokens.
 *
 * The card's `hover:border-border` is GONE rather than converted, because it
 * named the colour the edge already was: a hover that changes nothing.
 *
 * A `Fit` is one floor and a cap, so it cannot reproduce `md:grid-cols-2
 * lg:grid-cols-4` exactly. 220 lands the WIDEST step — 4-up — on the 1024 it
 * had; the narrower step arrives as 3-up at 768 instead of 2-up.
 */

import React from "react";
import { motion } from "@/components/motion";
import {
  Layers,
  Gauge,
  Network,
  Shield,
  Cpu,
  GitMerge,
  Blocks,
  Workflow,
} from "lucide-react";
import { View, XStack } from '@hanzo/ui'
import { Grid as Columns } from '@hanzo/ui/grid'
import { Band, Head, Words } from '@/components/marketing/band'

const features = [
  {
    icon: Layers,
    title: "One tool server, not one per agent",
    description:
      "Running an MCP server beside every agent duplicates the process, the schema and the idle memory as many times as you have agents. Put the servers behind one endpoint and the agents share them.",
  },
  {
    icon: Gauge,
    title: "The work you removed cannot be slow",
    description:
      "Fewer processes to schedule and no text to turn into objects on either side of a call. That is where the time goes at scale, and the way to get it back is not to do it.",
  },
  {
    icon: Network,
    title: "It carries the protocol you already use",
    description:
      "MCP, A2A and ACP layer on ZAP without changing what your code says. ZAP is underneath them, not instead of them.",
  },
  {
    icon: Blocks,
    title: "The message is already the object",
    description:
      "Structs, lists, text and bytes are laid out on the wire in the shape a reader wants them, eight-byte aligned. Reading a field is a pointer and an offset into the buffer that arrived.",
  },
  {
    icon: Cpu,
    title: "Nothing to collect afterwards",
    description:
      "A reader that walks the buffer in place allocates nothing per message, so there is no garbage to collect and no pause to tune away later.",
  },
  {
    icon: GitMerge,
    title: "Existing MCP servers, wrapped",
    description:
      "Point the daemon at the MCP servers you already run — over stdio, over HTTP, over a Unix socket — and it presents their tools as one federated schema. Agents connect once and see everything.",
  },
  {
    icon: Shield,
    title: "Keys arrive instead of being fetched",
    description:
      "ZAP carries its own key distribution: a service subscribes once and receives the snapshot, then rotations and revocations as they happen. Nothing polls a JWKS endpoint, and a revoked key stops working when it is revoked rather than when a cache expires.",
  },
  {
    icon: Workflow,
    title: "Three implementations, one wire",
    description:
      "Go, Rust and TypeScript, held wire-compatible against a single schema file. The schema is the contract, and an incompatible change bumps its identifier rather than hoping nobody notices.",
  },
];

const ZapFeatures = () => {
  return (
    <Band rule={false} pad="$11">
      <Head
        title="Why bother"
        lede="JSON over HTTP is fine until a hundred agents are calling the same tools. Then the cost is the copies, and the fix is to stop making them."
      />

      <Columns columns={{ min: 220, max: 4 }} gap={24}>
        {features.map((feature, index) => (
          <View
            key={feature.title}
            render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: index * 0.05 }} />}
            display="block"
            rounded="var(--radius-xl)"
            borderWidth={1}
            borderColor="var(--border)"
            background="color-mix(in oklab, var(--secondary) 50%, transparent)"
            p={24}
          >
            <XStack
              width={48}
              height={48}
              items="center"
              justify="center"
              mb={16}
              rounded="var(--radius-lg)"
              bg="$hover"
            >
              <feature.icon width={24} height={24} color="color-mix(in oklab, var(--foreground) 70%, transparent)" />
            </XStack>
            <Words render="h3" mb={8} fontSize="$4" lineHeight="1.5556" weight="600" color="var(--foreground)">
              {feature.title}
            </Words>
            <Words render="p" fontSize="$2" lineHeight="1.4286" color="var(--muted-foreground)">{feature.description}</Words>
          </View>
        ))}
      </Columns>
    </Band>
  );
};

export default ZapFeatures;