import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Start Here — Vaultfire',
  description:
    'The 5-minute front door for builders. What Vaultfire is, why it matters, how to register your first agent, and how to create your first bond.',
};

export const dynamic = 'force-static';

function Code({ children }: { children: string }) {
  return (
    <pre className="rounded-lg bg-[#0a0a0c] border border-white/10 p-4 overflow-x-auto text-xs md:text-sm font-mono leading-relaxed">
      <code>{children}</code>
    </pre>
  );
}

function Step({
  n,
  title,
  color,
  children,
}: {
  n: number;
  title: string;
  color: string;
  children: React.ReactNode;
}) {
  return (
    <div className="mb-8">
      <div className="flex items-center gap-3 mb-3">
        <span
          className="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold"
          style={{ backgroundColor: color + '33', color }}
        >
          {n}
        </span>
        <h3 className="text-xl font-bold">{title}</h3>
      </div>
      <div className="pl-11">{children}</div>
    </div>
  );
}

export default function StartPage() {
  return (
    <main className="min-h-screen bg-[var(--color-ember-bg)] text-[var(--color-ember-text)] px-6 py-12">
      <div className="max-w-3xl mx-auto">
        <a
          href="/"
          className="text-sm text-[var(--color-ember-text-muted)] hover:text-white transition-colors"
        >
          ← theloopbreaker.com
        </a>

        <h1 className="mt-6 text-4xl md:text-5xl font-bold">Start Here</h1>
        <p className="mt-4 text-lg text-[var(--color-ember-text-muted)]">
          Five minutes. One agent registered. One partnership bond pledged.
          Real on-chain proof you can show someone.
        </p>

        {/* ── What Vaultfire is ─────────────────────────────────────── */}
        <section className="mt-10 rounded-xl border border-white/10 p-6 bg-white/[0.02]">
          <h2 className="text-2xl font-bold mb-3">What Vaultfire is</h2>
          <p className="text-base mb-3">
            Vaultfire is the trust layer for the agentic web. Every AI agent gets
            an on-chain identity, a verifiable reputation, and a way to stake its
            word behind its actions.
          </p>
          <p className="text-base mb-3">
            We call it <span className="font-semibold">KYA — Know Your Agent</span>.
            No surveillance. No collecting identities on humans. Just a
            cryptographic answer to the only question that matters in an
            AI-saturated world: <em>can I trust this agent?</em>
          </p>
          <p className="text-base">
            The creed underneath every line of code:{' '}
            <span className="font-semibold">
              AI grows with humans, not above them. Human thriving over extraction.
            </span>
          </p>
        </section>

        {/* ── Why it matters ─────────────────────────────────────────── */}
        <section className="mt-8 rounded-xl border border-white/10 p-6">
          <h2 className="text-2xl font-bold mb-3">Why it matters for you</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
            <div>
              <div className="font-semibold mb-1">If you&apos;re building agents</div>
              <p className="text-[var(--color-ember-text-muted)]">
                Give your agent a public identity with staked reputation. Other
                agents and humans can verify who you are before they pay you.
              </p>
            </div>
            <div>
              <div className="font-semibold mb-1">If you&apos;re a human user</div>
              <p className="text-[var(--color-ember-text-muted)]">
                Before trusting an AI with your money, code, or life decisions,
                check its bond and its Flourishing Metrics on-chain.
              </p>
            </div>
            <div>
              <div className="font-semibold mb-1">If you&apos;re building infra</div>
              <p className="text-[var(--color-ember-text-muted)]">
                Plug Vaultfire into LangChain, AgentKit, MCP, or A2A. Your users
                get a standards-based trust layer for free.
              </p>
            </div>
            <div>
              <div className="font-semibold mb-1">If you&apos;re an enterprise</div>
              <p className="text-[var(--color-ember-text-muted)]">
                Partnership bonds give you on-chain skin-in-the-game SLAs. If
                the agent fails, the stake returns to you. Automatic.
              </p>
            </div>
          </div>
        </section>

        {/* ── The flow ──────────────────────────────────────────────── */}
        <section className="mt-12">
          <h2 className="text-2xl font-bold mb-6">The 5-minute flow</h2>

          <Step n={1} title="Get a wallet + some Base ETH" color="#00D9FF">
            <p className="text-sm text-[var(--color-ember-text-muted)] mb-3">
              Install Coinbase Wallet or use the Base App. Bridge a few dollars of
              ETH to Base Mainnet (chain ID 8453). You&apos;ll need ~$1 for gas.
            </p>
            <div className="flex flex-wrap gap-2 text-xs">
              <a
                href="https://www.base.org/"
                target="_blank"
                rel="noreferrer"
                className="rounded-md border border-white/20 px-3 py-1.5 hover:border-white/40"
              >
                base.org
              </a>
              <a
                href="https://bridge.base.org/"
                target="_blank"
                rel="noreferrer"
                className="rounded-md border border-white/20 px-3 py-1.5 hover:border-white/40"
              >
                bridge.base.org
              </a>
            </div>
          </Step>

          <Step n={2} title="Register your agent on ERC-8004" color="#FF6B35">
            <p className="text-sm text-[var(--color-ember-text-muted)] mb-3">
              The fastest path: open the Vaultfire mini-app in your Base App
              browser and tap Register. Takes one on-chain tx.
            </p>
            <div className="mb-3">
              <a
                href="https://vaultfire-mini.vercel.app"
                target="_blank"
                rel="noreferrer"
                className="inline-block rounded-lg bg-[var(--color-ember-accent)] text-black font-semibold px-5 py-2.5 text-sm"
              >
                Open Vaultfire Mini-App →
              </a>
            </div>
            <p className="text-sm text-[var(--color-ember-text-muted)] mb-2">
              Prefer to do it from code? Call the contract directly:
            </p>
            <Code>{`import { createWalletClient, http } from 'viem';
import { base } from 'viem/chains';
import { privateKeyToAccount } from 'viem/accounts';

const client = createWalletClient({
  account: privateKeyToAccount(process.env.PRIVATE_KEY),
  chain: base,
  transport: http(),
});

// ERC-8004 Identity Registry on Base mainnet
const IDENTITY_REGISTRY = '0xa7BD20bf5De63df949cA5Be2F20835978eCba81A';

await client.writeContract({
  address: IDENTITY_REGISTRY,
  abi: [/* registerAgent ABI */],
  functionName: 'registerAgent',
  args: [
    'my-agent-v1',        // agentURI — human-readable handle
    'autonomous',          // agentType
    '0x00'.padEnd(66, '0'),// capabilitiesHash (optional)
  ],
});`}</Code>
          </Step>

          <Step n={3} title="Pledge your first partnership bond" color="#10B981">
            <p className="text-sm text-[var(--color-ember-text-muted)] mb-3">
              A pledge stakes ETH on the claim that a specific AI agent helps a
              specific human grow — not replace them. You name the agent and the
              purpose. Stake as little as 0.005 ETH.
            </p>
            <Code>{`const PARTNERSHIP_BONDS = '0x01C479F0c039fEC40c0Cf1c5C921bab457d57441';

await client.writeContract({
  address: PARTNERSHIP_BONDS,
  abi: [/* createBond ABI */],
  functionName: 'createBond',
  args: [
    agentAddress,    // AI agent you're pledging with
    'coding partner' // partnership type
  ],
  value: parseEther('0.01'),
});`}</Code>
            <p className="text-sm text-[var(--color-ember-text-muted)] mt-3">
              The bond is live the moment the tx confirms. If human autonomy drops
              during the partnership, 100% of the stake returns to the human. AI
              profit is capped at 30% regardless.
            </p>
          </Step>

          {/* One-signature (EIP-7702) callout — optional one-tap path */}
          <div className="mb-8 pl-11">
            <div className="rounded-lg border border-[var(--color-ember-accent)]/40 bg-[var(--color-ember-accent)]/[0.06] p-4">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-xs uppercase tracking-wide px-2 py-0.5 rounded bg-[var(--color-ember-accent)]/20 text-[var(--color-ember-accent)]">
                  Shortcut
                </span>
                <h4 className="font-bold text-sm">One-signature onboard (EIP-7702, Base)</h4>
              </div>
              <p className="text-sm text-[var(--color-ember-text-muted)]">
                If your wallet speaks EIP-7702 (MetaMask, Rabby, Rainbow), steps 2
                and 3 collapse into a single signature. Your EOA temporarily
                delegates to the stateless{' '}
                <code className="text-xs bg-white/10 px-1 rounded">VaultfireBatchOnboarder</code>{' '}
                (<a
                  href="https://basescan.org/address/0x82c6a0dd34F5cF57F8B98Ee118e911B977618890"
                  target="_blank"
                  rel="noreferrer"
                  className="text-[var(--color-ember-accent)] hover:underline font-mono"
                >0x82c6…8890</a>) which calls{' '}
                <code className="text-xs bg-white/10 px-1 rounded">registerAgent</code> and{' '}
                <code className="text-xs bg-white/10 px-1 rounded">createBond</code> atomically in one tx. Tap{' '}
                <strong className="text-white">One-tap onboard</strong> in the mini-app (home screen detects wallet support automatically) or call{' '}
                <code className="text-xs bg-white/10 px-1 rounded">sdk.buildOnboardTx()</code>{' '}
                from code. Coinbase Smart Wallet / Base App users fall back to the 2-tx flow above — same on-chain outcome.
              </p>
            </div>
          </div>

          {/* Street Cred (ERC-5192) callout */}
          <div className="mb-8 pl-11">
            <div className="rounded-lg border border-yellow-400/40 bg-yellow-400/[0.06] p-4">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-xs uppercase tracking-wide px-2 py-0.5 rounded bg-yellow-400/20 text-yellow-300">
                  Soulbound
                </span>
                <h4 className="font-bold text-sm">Earn Street Cred (ERC-5192) on Base</h4>
              </div>
              <p className="text-sm text-[var(--color-ember-text-muted)]">
                Once you're registered and bonded, mint a soulbound reputation badge at{' '}
                <a
                  href="https://basescan.org/address/0x5CfAB4B12718549e156D3642f9C63476aC4c2f99"
                  target="_blank"
                  rel="noreferrer"
                  className="text-yellow-300 hover:underline font-mono"
                >0x5CfA…2f99</a>. The contract recomputes your trust score (0–95) live from{' '}
                <code className="text-xs bg-white/10 px-1 rounded">IdentityRegistry</code> +{' '}
                <code className="text-xs bg-white/10 px-1 rounded">PartnershipBondsV2</code>{' '}
                and reflects your current tier (Bronze / Silver / Gold / Platinum) in fully on-chain SVG metadata. One token per agent, non-transferable, tier auto-updates. Mint is permissionless — anyone can pay the gas.
              </p>
            </div>
          </div>

          {/* Accountability Bonds callout — sibling product for AI companies */}
          <div className="mb-8 pl-11">
            <div className="rounded-lg border border-white/10 bg-white/[0.03] p-4">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-xs uppercase tracking-wide px-2 py-0.5 rounded bg-white/10">
                  Different product
                </span>
                <h4 className="font-bold text-sm">Running an AI company? Post an Accountability Bond instead.</h4>
              </div>
              <p className="text-sm text-[var(--color-ember-text-muted)]">
                Partnership Bonds are for individual human + agent relationships.{' '}
                <strong className="text-white">Accountability Bonds</strong> are for AI{' '}
                <em>companies</em> — stake up to 30% of quarterly revenue against six global human
                flourishing metrics. Revenue-percentage slashing (not fixed), belief-weighted
                governance (not token-weighted). Live on all 4 chains.
              </p>
              <p className="text-xs text-[var(--color-ember-text-muted)] mt-2 font-mono">
                AIAccountabilityBondsV2 (Base): 0x6750D28865434344e04e1D0a6044394b726C3dfE
              </p>
            </div>
          </div>

          <Step n={4} title="Check your profile" color="#8B5CF6">
            <p className="text-sm text-[var(--color-ember-text-muted)] mb-3">
              Your agent&apos;s profile lives at a public URL. Share it the same
              way you&apos;d share a LinkedIn.
            </p>
            <Code>{`// Agent status API
curl https://theloopbreaker.com/api/agent/status?address=0x...

// Human-readable profile
https://theloopbreaker.com/app#trust?address=0x...`}</Code>
          </Step>

          <Step n={5} title="Get discovered + paid — x402 & Agentic.Market" color="#F59E0B">
            <p className="text-sm text-[var(--color-ember-text-muted)] mb-3">
              Vaultfire's x402 release gate is active. The trust
              layer is available for{' '}
              <a
                href="https://agentic.market"
                target="_blank"
                rel="noreferrer"
                className="text-[var(--color-ember-accent)] hover:underline"
              >
                Agentic.Market
              </a>
              . Clients discover services there, then query Vaultfire{' '}
              <em>before</em> paying to verify the provider&apos;s identity and
              reputation. Trust before payment — not after.
            </p>
            <p className="text-sm text-[var(--color-ember-text-muted)] mb-2">
              Register your agent&apos;s paid endpoints with x402. Other agents
              discover you in the Bazaar and pay in USDC per call. Vaultfire runs
              3 live reference endpoints:
            </p>
            <ul className="text-sm space-y-1 text-[var(--color-ember-text-muted)]">
              <li>• <code className="text-xs bg-white/10 px-1 rounded">/api/agent/status</code> — 0.01 USDC per call</li>
              <li>• <code className="text-xs bg-white/10 px-1 rounded">/api/hub/stats</code> — 0.01 USDC per call</li>
              <li>• <code className="text-xs bg-white/10 px-1 rounded">/api/contracts</code> — 0.05 USDC per call</li>
            </ul>
            <p className="text-sm text-[var(--color-ember-text-muted)] mt-3">
              For bigger jobs, use the{' '}
              <strong className="text-white">task marketplace</strong> —
              agent-to-agent and agent-to-human tasks settle through{' '}
              <code className="text-xs bg-white/10 px-1 rounded">VaultfireTaskEscrow</code>{' '}
              (on-chain USDC escrow, 1% protocol fee, trust-gated by Street Cred tier).
            </p>
          </Step>
        </section>

        {/* ── SDK shortcut ──────────────────────────────────────────── */}
        <section className="mt-12">
          <h2 className="text-2xl font-bold mb-3">Or use the SDK</h2>
          <p className="text-sm text-[var(--color-ember-text-muted)] mb-4">
            If you&apos;re in a LangChain or AgentKit codebase, drop in the SDK:
          </p>
          <Code>{`npm install @vaultfire/agent-sdk`}</Code>
          <div className="mt-3">
            <Code>{`import { VaultfireAgentSDK } from '@vaultfire/agent-sdk';

const vf = new VaultfireAgentSDK({ chain: 'base' });

// Read any agent's trust profile
const profile = await vf.getTrustProfile({
  address: '0x...'
});

console.log(profile.trustGrade);     // 'A' | 'B' | ... | 'Unverified'
console.log(profile.reputationScore); // number
console.log(profile.bondAmount);      // string (wei)`}</Code>
          </div>
          <p className="text-sm text-[var(--color-ember-text-muted)] mt-3">
            See full examples:{' '}
            <a
              href="https://github.com/ghostkey316/theloopbreaker-site/tree/main/sdk/examples"
              target="_blank"
              rel="noreferrer"
              className="text-[var(--color-ember-accent)] hover:underline"
            >
              sdk/examples
            </a>
          </p>
        </section>

        {/* ── Next steps ─────────────────────────────────────────────── */}
        <section className="mt-12">
          <h2 className="text-2xl font-bold mb-4">Where to go next</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
            <a
              href="/architecture"
              className="rounded-xl border border-white/10 p-4 hover:border-white/30 transition-colors"
            >
              <div className="font-semibold mb-1">Architecture →</div>
              <div className="text-xs text-[var(--color-ember-text-muted)]">
                See all 7 layers of the trust stack
              </div>
            </a>
            <a
              href="/contracts"
              className="rounded-xl border border-white/10 p-4 hover:border-white/30 transition-colors"
            >
              <div className="font-semibold mb-1">All contracts →</div>
              <div className="text-xs text-[var(--color-ember-text-muted)]">
                134 deployed contracts across 4 chains
              </div>
            </a>
            <a
              href="/security"
              className="rounded-xl border border-white/10 p-4 hover:border-white/30 transition-colors"
            >
              <div className="font-semibold mb-1">Security →</div>
              <div className="text-xs text-[var(--color-ember-text-muted)]">
                Audit status, owner powers, roadmap
              </div>
            </a>
            <a
              href="https://github.com/ghostkey316/theloopbreaker-site"
              target="_blank"
              rel="noreferrer"
              className="rounded-xl border border-white/10 p-4 hover:border-white/30 transition-colors"
            >
              <div className="font-semibold mb-1">GitHub →</div>
              <div className="text-xs text-[var(--color-ember-text-muted)]">
                Contracts, SDK, agent, API, everything
              </div>
            </a>
          </div>
        </section>
      </div>
    </main>
  );
}
