bootnode/console/app/agents/page.tsx

"use client"

import Link from "next/link"
import { Navbar } from "@/components/navbar"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import {
  ArrowRight,
  Bot,
  CreditCard,
  Globe,
  Layers,
  Radio,
  Rocket,
  Terminal,
  Webhook,
  Zap,
} from "@luxfi/ui/icons"
import { getBrand } from "@/lib/brand"

const apis = [
  {
    number: "01",
    title: "Agentic Signup",
    description:
      "Sign up with an onchain wallet and prepay for compute, powered by x402.",
    icon: Rocket,
  },
  {
    number: "02",
    title: "Node APIs",
    description:
      "Core RPC APIs for 100+ chains with reliable read/write access for agent workflows.",
    icon: Globe,
  },
  {
    number: "03",
    title: "Data APIs",
    description:
      "Get onchain data across assets, including tokens, NFTs, prices, balances, and portfolio views.",
    icon: Layers,
  },
  {
    number: "04",
    title: "Solana APIs",
    description:
      "Use Yellowstone gRPC streams and DAS APIs built for high-throughput Solana applications.",
    icon: Zap,
  },
  {
    number: "05",
    title: "Webhooks",
    description:
      "Push onchain events directly to your backend with managed webhook delivery and signature verification.",
    icon: Webhook,
  },
  {
    number: "06",
    title: "Recipes & Tutorials",
    description:
      "Follow practical crypto development recipes and tutorials to ship integrations faster.",
    icon: Terminal,
  },
]

const compatible = [
  "Claude Code",
  "Codex",
  "Cursor",
  "Openclaw",
  "Hanzo Bot",
]

export default function AgentsPage() {
  const brand = getBrand()

  return (
    <div className="flex min-h-screen flex-col">
      <Navbar />

      {/* Hero */}
      <section className="relative overflow-hidden border-b bg-gradient-to-b from-background to-muted/20">
        <div className="absolute inset-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />
        <div className="container relative py-24 md:py-32 lg:py-40">
          <div className="mx-auto flex max-w-4xl flex-col items-center text-center">
            <Badge variant="secondary" className="mb-4">
              <Bot className="mr-1 h-3 w-3" />
              Crypto for Agents
            </Badge>
            <h1 className="text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl">
              Pay, trade, build apps.{" "}
              <span
                className="bg-clip-text text-transparent"
                style={{
                  backgroundImage: `linear-gradient(to right, ${brand.colors.accent}, ${brand.colors.accentEnd})`,
                }}
              >
                In 1 prompt.
              </span>
            </h1>
            <p className="mt-6 max-w-2xl text-lg text-muted-foreground md:text-xl">
              Agents can sign up and pay autonomously. No human required.
              Install the {brand.name} skills to start building.
            </p>

            {/* Install Command — open standard */}
            <div className="mt-10 w-full max-w-xl">
              <div className="rounded-lg border bg-card p-1">
                <div className="flex items-center gap-2 rounded-md bg-muted px-4 py-3 font-mono text-sm">
                  <span className="text-muted-foreground select-none">$</span>
                  <code className="flex-1 text-left">
                    npx skills add {brand.skillsOrg}/skills --yes
                  </code>
                </div>
              </div>
              <p className="mt-3 text-sm text-muted-foreground">
                Works with{" "}
                {compatible.map((name, i) => (
                  <span key={name}>
                    <span className="font-medium text-foreground">{name}</span>
                    {i < compatible.length - 1 ? ", " : ""}
                  </span>
                ))}
                .{" "}
                <span className="text-muted-foreground">
                  Skills install to{" "}
                  <code className="text-xs bg-muted rounded px-1 py-0.5">~/.hanzo/skills/</code>{" "}
                  and auto-link to all agents.
                </span>
              </p>
            </div>

            {/* Payment Options */}
            <div className="mt-8 flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-6">
              <div className="flex items-center gap-2 text-sm text-muted-foreground">
                <CreditCard className="h-4 w-4" />
                <span>Pay with credit card via your account</span>
              </div>
              <div className="flex items-center gap-2 text-sm text-muted-foreground">
                <Globe className="h-4 w-4" />
                <span>Or USDC via x402 — no account needed</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* APIs for every AI agent */}
      <section className="py-24">
        <div className="container">
          <div className="mx-auto max-w-2xl text-center">
            <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
              APIs for every AI agent
            </h2>
            <p className="mt-4 text-lg text-muted-foreground">
              Everything an agent needs to interact with 100+ blockchains,
              from signup to settlement.
            </p>
          </div>
          <div className="mt-16 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {apis.map((api) => (
              <Card key={api.number} className="group h-full transition-colors hover:border-foreground/20">
                <CardHeader>
                  <div className="flex items-center gap-3">
                    <span
                      className="flex h-10 w-10 items-center justify-center rounded-lg font-mono text-sm font-bold"
                      style={{
                        background: `linear-gradient(135deg, ${brand.colors.accent}20, ${brand.colors.accentEnd}20)`,
                        color: brand.colors.accent,
                      }}
                    >
                      {api.number}
                    </span>
                    <api.icon className="h-5 w-5 text-muted-foreground" />
                  </div>
                  <CardTitle className="mt-4">{api.title}</CardTitle>
                  <CardDescription>{api.description}</CardDescription>
                </CardHeader>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Run Locally */}
      <section className="border-y bg-muted/30 py-24">
        <div className="container">
          <div className="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16">
            <div className="flex flex-col justify-center">
              <Badge variant="secondary" className="mb-4 w-fit">
                <Terminal className="mr-1 h-3 w-3" />
                Run Locally
              </Badge>
              <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
                Run locally for free
              </h2>
              <p className="mt-4 text-lg text-muted-foreground">
                Boot up a local agent with a single command. Connect to the
                Hanzo Bot cloud and start using {brand.name}, or any of our
                partner networks — Lux, Zoo, and Pars.
              </p>
              <div className="mt-8 space-y-4">
                <div className="flex gap-4">
                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-muted">
                    <Zap className="h-5 w-5 text-yellow-500" />
                  </div>
                  <div>
                    <h3 className="font-semibold">Zero Config</h3>
                    <p className="text-sm text-muted-foreground">
                      One command to install. Auto-connects to hanzo.bot cloud.
                    </p>
                  </div>
                </div>
                <div className="flex gap-4">
                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-muted">
                    <Radio className="h-5 w-5 text-green-500" />
                  </div>
                  <div>
                    <h3 className="font-semibold">Open Standard</h3>
                    <p className="text-sm text-muted-foreground">
                      Uses the open Agent Skills spec. Works with any compatible agent.
                    </p>
                  </div>
                </div>
                <div className="flex gap-4">
                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-muted">
                    <Bot className="h-5 w-5 text-blue-500" />
                  </div>
                  <div>
                    <h3 className="font-semibold">~/.hanzo/skills/</h3>
                    <p className="text-sm text-muted-foreground">
                      Single canonical location. Symlinked to Claude, Cursor, Codex, and all agents automatically.
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div className="flex flex-col justify-center">
              <div className="space-y-4">
                <div className="rounded-lg border bg-card p-1">
                  <div className="rounded-md bg-muted px-4 py-3 font-mono text-sm">
                    <p className="text-muted-foreground"># Install skills (open standard)</p>
                    <p className="mt-1"><span className="text-muted-foreground select-none">$ </span>npx skills add {brand.skillsOrg}/skills --yes</p>
                  </div>
                </div>
                <div className="rounded-lg border bg-card p-1">
                  <div className="rounded-md bg-muted px-4 py-3 font-mono text-sm">
                    <p className="text-muted-foreground"># Or use Hanzo Bot directly</p>
                    <p className="mt-1"><span className="text-muted-foreground select-none">$ </span>npx @hanzo/bot skills add {brand.skillsOrg}/skills</p>
                  </div>
                </div>
                <div className="rounded-lg border bg-card p-1">
                  <div className="rounded-md bg-muted px-4 py-3 font-mono text-sm">
                    <p className="text-muted-foreground"># Run a local agent</p>
                    <p className="mt-1"><span className="text-muted-foreground select-none">$ </span>npx @hanzo/bot</p>
                  </div>
                </div>
                <div className="rounded-lg border bg-card p-1">
                  <div className="rounded-md bg-muted px-4 py-3 font-mono text-sm">
                    <p className="text-muted-foreground"># Skills live in one place, visible to all agents</p>
                    <p className="mt-1"><span className="text-muted-foreground select-none">$ </span>ls ~/.hanzo/skills/</p>
                    <p className="mt-0.5 text-muted-foreground">  {brand.skillsOrg}-skills/</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-24">
        <div className="container">
          <div
            className="relative overflow-hidden rounded-3xl px-6 py-20 sm:px-12 sm:py-28"
            style={{
              backgroundImage: `linear-gradient(to right, ${brand.colors.accent}, ${brand.colors.accentEnd})`,
            }}
          >
            <div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff1a_1px,transparent_1px),linear-gradient(to_bottom,#ffffff1a_1px,transparent_1px)] bg-[size:14px_24px]" />
            <div className="relative mx-auto max-w-2xl text-center">
              <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
                Launch your own bot
              </h2>
              <p className="mt-4 text-lg text-white/80">
                Deploy an AI agent on hanzo.bot cloud, or run it locally and connect
                to any blockchain. Powered by Hanzo AI.
              </p>
              <div className="mt-10 flex flex-col justify-center gap-4 sm:flex-row">
                <Button
                  size="xl"
                  className="bg-white text-foreground hover:bg-white/90"
                  asChild
                >
                  <a href="https://hanzo.bot" target="_blank" rel="noopener noreferrer">
                    Launch on hanzo.bot
                    <ArrowRight className="ml-2 h-4 w-4" />
                  </a>
                </Button>
                <Button
                  size="xl"
                  variant="outline"
                  className="border-white/30 bg-transparent text-white hover:bg-white/10"
                  asChild
                >
                  <a href="https://hanzo.ai" target="_blank" rel="noopener noreferrer">
                    Learn more at hanzo.ai
                  </a>
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  )
}