'use client';
import { useState } from 'react';
import { useWalletAuth } from '../lib/WalletAuthContext';
import type { Page } from '../page';

type Step = 'connect' | 'identity' | 'vns' | 'bond' | 'partnership' | 'done';

const PRESET_CAPABILITIES = [
  'Data Processing', 'Inference', 'Validation', 'Monitoring', 'Integration', 'Research',
  'Price Feeds', 'DeFi Analytics', 'NLP', 'Computer Vision', 'Code Generation', 'Trading',
  'Security Audit', 'Cross-Chain Bridge', 'XTMP Messaging', 'Content Creation',
];

export default function Register({ onNavigate }: { onNavigate: (p: Page) => void }) {
  const { isUnlocked, address, connect } = useWalletAuth();
  const [step, setStep] = useState<Step>(isUnlocked ? 'identity' : 'connect');
  const [agentName, setAgentName] = useState('');
  const [agentType, setAgentType] = useState('autonomous');
  const [agentDesc, setAgentDesc] = useState('');
  const [vnsName, setVnsName] = useState('');
  const [bondAmount, setBondAmount] = useState('0.001');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  // Capabilities state
  const [capabilities, setCapabilities] = useState<string[]>([]);
  const [capInput, setCapInput] = useState('');

  // Tx hashes for each step
  const [identityTxHash, setIdentityTxHash] = useState('');
  const [vnsTxHash, setVnsTxHash] = useState('');
  const [bondTxHash, setBondTxHash] = useState('');
  const [partnerTxHash, setPartnerTxHash] = useState('');

  // Partnership bond state
  const [partnerAddr, setPartnerAddr] = useState('');
  const [partnerBondAmount, setPartnerBondAmount] = useState('0.01');
  const [partnershipType, setPartnershipType] = useState('collaboration');

  const shortAddr = address ? `${address.slice(0, 6)}...${address.slice(-4)}` : '';

  const steps: { id: Step; label: string; num: string }[] = [
    { id: 'connect', label: 'Connect', num: '1' },
    { id: 'identity', label: 'Identity', num: '2' },
    { id: 'vns', label: 'VNS', num: '3' },
    { id: 'bond', label: 'Bond', num: '4' },
    { id: 'partnership', label: 'Partner', num: '5' },
    { id: 'done', label: 'Done', num: '✓' },
  ];

  const currentIdx = steps.findIndex(s => s.id === step);

  // Capabilities helpers
  function togglePresetCapability(cap: string) {
    setCapabilities(prev =>
      prev.includes(cap) ? prev.filter(c => c !== cap) : [...prev, cap]
    );
  }

  function addCustomCapability() {
    const trimmed = capInput.trim();
    if (!trimmed) return;
    const alreadyExists = capabilities.some(c => c.toLowerCase() === trimmed.toLowerCase());
    if (!alreadyExists) {
      setCapabilities(prev => [...prev, trimmed]);
    }
    setCapInput('');
  }

  function removeCapability(cap: string) {
    setCapabilities(prev => prev.filter(c => c !== cap));
  }

  /* ── Step 2: Register identity via ERC-8004 ── */
  async function handleIdentityRegister() {
    if (!address || !agentName) return;
    setLoading(true);
    setError('');
    try {
      const res = await fetch('/api/agent/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: agentName,
          walletAddress: address,
          description: agentDesc,
          identityType: agentType === 'autonomous' ? 'agent' : agentType,
          chain: 'base',
        }),
      });
      const data = await res.json();
      if (!data.success || !data.txData) {
        setError(data.error || 'Failed to build transaction');
        return;
      }
      // Send via MetaMask
      const eth = (window as any).ethereum;
      if (!eth) { setError('No wallet detected. Install MetaMask.'); return; }
      const txHash = await eth.request({
        method: 'eth_sendTransaction',
        params: [{
          from: address,
          to: data.txData.to,
          data: data.txData.data,
          value: data.txData.value,
          gas: data.txData.gasEstimate,
        }],
      });
      setIdentityTxHash(txHash);
      setStep('vns');
    } catch (e: any) {
      if (e?.code === 4001) setError('Transaction rejected by user');
      else setError(e?.message || 'Transaction failed');
    } finally {
      setLoading(false);
    }
  }

  /* ── Step 3: Claim VNS name ── */
  async function handleVnsClaim() {
    if (!address || !vnsName) { setStep('bond'); return; }
    setLoading(true);
    setError('');
    try {
      const eth = (window as any).ethereum;
      if (!eth) { setError('No wallet detected'); return; }
      // VaultfireNameService.registerName(string) → selector 0x0830602b
      const nameHex = Array.from(new TextEncoder().encode(vnsName))
        .map((b: number) => b.toString(16).padStart(2, '0')).join('');
      const nameLen = vnsName.length.toString(16).padStart(64, '0');
      const paddedName = nameHex.padEnd(Math.ceil(nameHex.length / 64) * 64, '0');
      const offset = '0000000000000000000000000000000000000000000000000000000000000020';
      const calldata = '0x0830602b' + offset + nameLen + paddedName;

      const txHash = await eth.request({
        method: 'eth_sendTransaction',
        params: [{
          from: address,
          to: '0x1437c4081233A4f0B6907dDf5374Ed610cBD6B25', // VaultfireNameService on Base
          data: calldata,
          value: '0x0',
        }],
      });
      setVnsTxHash(txHash);
      setStep('bond');
    } catch (e: any) {
      if (e?.code === 4001) setError('Transaction rejected');
      else setError(e?.message || 'VNS claim failed');
    } finally {
      setLoading(false);
    }
  }

  /* ── Step 4: Create accountability bond ── */
  async function handleBondCreate() {
    if (!address) return;
    setLoading(true);
    setError('');
    try {
      const res = await fetch('/api/agent/bond', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          walletAddress: address,
          agentAddress: address,
          amountEth: parseFloat(bondAmount),
          chain: 'base',
        }),
      });
      const data = await res.json();
      if (!data.success || !data.txData) {
        setError(data.error || 'Failed to build bond transaction');
        return;
      }
      const eth = (window as any).ethereum;
      if (!eth) { setError('No wallet detected'); return; }
      const txHash = await eth.request({
        method: 'eth_sendTransaction',
        params: [{
          from: address,
          to: data.txData.to,
          data: data.txData.data,
          value: data.txData.value,
        }],
      });
      setBondTxHash(txHash);
      setStep('partnership');
    } catch (e: any) {
      if (e?.code === 4001) setError('Transaction rejected');
      else setError(e?.message || 'Bond creation failed');
    } finally {
      setLoading(false);
    }
  }

  /* ── Step 5: Create partnership bond ── */
  async function handlePartnershipBond() {
    if (!partnerAddr || !address) return;
    setLoading(true);
    setError('');
    try {
      const res = await fetch('/api/agent/bond', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          walletAddress: address,
          agentAddress: partnerAddr,
          amountEth: parseFloat(partnerBondAmount),
          partnershipType: `${partnershipType}:${agentName}`,
          chain: 'base',
        }),
      });
      const data = await res.json();
      if (data.txData && (window as any).ethereum) {
        const txHash = await (window as any).ethereum.request({
          method: 'eth_sendTransaction',
          params: [{
            from: address,
            to: data.txData.to,
            data: data.txData.data,
            value: data.txData.value,
          }],
        });
        setPartnerTxHash(txHash);
      }
      setStep('done');
    } catch (e: any) {
      if (e?.code === 4001) setError('Transaction rejected');
      else setError(e?.message || 'Partnership bond failed');
    } finally {
      setLoading(false);
    }
  }

  // ── Styles ──
  const inputStyle = {
    width: '100%', padding: '10px 14px', borderRadius: 10,
    border: '1px solid rgba(255,255,255,0.1)', backgroundColor: 'rgba(255,255,255,0.04)',
    color: '#F4F4F5', fontSize: 14, outline: 'none', boxSizing: 'border-box' as const,
  };

  const btnPrimary = (enabled: boolean) => ({
    padding: '11px 24px', borderRadius: 10, border: 'none',
    background: enabled ? 'linear-gradient(135deg, #FF6B35, #E55A24)' : '#27272a',
    color: enabled ? '#fff' : '#52525b', fontSize: 13, fontWeight: 700 as const,
    cursor: enabled ? 'pointer' : 'default' as const,
    boxShadow: enabled ? '0 0 16px rgba(255,107,53,0.25)' : 'none',
    transition: 'all 0.15s ease',
    flexShrink: 0,
  });

  const btnSecondary = {
    padding: '11px 20px', borderRadius: 10,
    border: '1px solid rgba(255,255,255,0.1)', backgroundColor: 'transparent',
    color: '#a1a1aa', fontSize: 13, fontWeight: 600 as const, cursor: 'pointer' as const,
    transition: 'all 0.15s ease',
    flexShrink: 0,
  };

  const glassCard = {
    borderRadius: 16,
    border: '1px solid rgba(255,107,53,0.2)',
    background: 'linear-gradient(135deg, rgba(255,107,53,0.04) 0%, rgba(9,9,11,0.8) 100%)',
    backdropFilter: 'blur(12px)',
    padding: '28px 28px',
    position: 'relative' as const,
    overflow: 'hidden' as const,
  };

  // Bond tier helper
  const getBondTier = (amt: string) => {
    const n = parseFloat(amt);
    if (n >= 0.5) return { tier: 'Platinum', color: '#E5E4E2' };
    if (n >= 0.1) return { tier: 'Gold', color: '#FFD700' };
    if (n >= 0.01) return { tier: 'Silver', color: '#C0C0C0' };
    return { tier: 'Bronze', color: '#CD7F32' };
  };
  const bondTier = getBondTier(bondAmount);

  const partnershipTypeDescriptions: Record<string, string> = {
    collaboration: 'Both agents co-author outputs, sharing stake and reputation.',
    delegation: 'You delegate tasks to the partner agent on your behalf.',
    'service-provider': 'Partner agent provides a service you consume on-chain.',
    'data-sharing': 'Both agents share verified data streams with bonded trust.',
    'oracle-consumer': 'Partner is an oracle; you consume its signed data feeds.',
  };

  return (
    <>
      <style>{`
        @keyframes pulse-glow {
          0%, 100% { box-shadow: 0 0 8px rgba(255,107,53,0.4), 0 0 0 3px rgba(255,107,53,0.15); }
          50% { box-shadow: 0 0 18px rgba(255,107,53,0.7), 0 0 0 5px rgba(255,107,53,0.2); }
        }
        @keyframes ring-spin {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }
        @keyframes fade-in-up {
          from { opacity: 0; transform: translateY(12px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @keyframes celebrate {
          0%, 100% { transform: scale(1); }
          50% { transform: scale(1.06); }
        }
        .reg-card { animation: fade-in-up 0.25s ease; }
        .step-active { animation: pulse-glow 2s ease-in-out infinite; }
        .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); }
        .btn-secondary:hover { border-color: rgba(255,255,255,0.2); color: #F4F4F5; }
        @media (min-width: 900px) {
          .register-layout { display: grid; grid-template-columns: 1fr 260px; gap: 28px; align-items: start; }
          .sidebar-panel { display: block !important; }
        }
        @media (max-width: 899px) {
          .sidebar-panel { display: none !important; }
        }
      `}</style>

      <div style={{ padding: 'clamp(40px, 6vw, 80px) 24px', maxWidth: 960, margin: '0 auto' }}>
        {/* Header */}
        <div style={{ marginBottom: 36 }}>
          <h1 style={{ fontSize: 28, fontWeight: 800, color: '#F4F4F5', letterSpacing: '-0.02em', marginBottom: 8 }}>
            Register an Agent
          </h1>
          <p style={{ fontSize: 14, color: '#71717a' }}>
            On-chain identity via ERC-8004. Any framework, any agent type.
          </p>
        </div>

        {/* ── Enhanced Step Progress Bar ── */}
        <div style={{ marginBottom: 40 }}>
          {/* Label row */}
          <div style={{ display: 'flex', marginBottom: 8 }}>
            {steps.map((s, i) => (
              <div key={s.id} style={{
                flex: i < steps.length - 1 ? 1 : 'none',
                paddingRight: i < steps.length - 1 ? 0 : undefined,
                minWidth: 0,
              }}>
                <span style={{
                  fontSize: 10, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase' as const,
                  color: i === currentIdx ? '#FF6B35' : i < currentIdx ? '#10b981' : '#3f3f46',
                  display: 'block',
                  textAlign: 'center',
                  whiteSpace: 'nowrap' as const,
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                }}>
                  {s.label}
                </span>
              </div>
            ))}
          </div>

          {/* Circles + connector row */}
          <div style={{ display: 'flex', alignItems: 'center' }}>
            {steps.map((s, i) => (
              <div key={s.id} style={{ display: 'flex', alignItems: 'center', flex: i < steps.length - 1 ? 1 : 'none' }}>
                {/* Step circle */}
                <div
                  className={i === currentIdx ? 'step-active' : ''}
                  style={{
                    width: 36, height: 36, borderRadius: '50%', flexShrink: 0,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 12, fontWeight: 800,
                    backgroundColor: i < currentIdx
                      ? 'rgba(16,185,129,0.15)'
                      : i === currentIdx
                      ? 'rgba(255,107,53,0.15)'
                      : 'rgba(255,255,255,0.03)',
                    border: i < currentIdx
                      ? '1.5px solid rgba(16,185,129,0.5)'
                      : i === currentIdx
                      ? '1.5px solid rgba(255,107,53,0.6)'
                      : '1.5px solid rgba(255,255,255,0.06)',
                    color: i < currentIdx ? '#10b981' : i === currentIdx ? '#FF6B35' : '#3f3f46',
                    transition: 'all 0.3s ease',
                  }}>
                  {i < currentIdx ? (
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#10b981" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M20 6L9 17l-5-5" />
                    </svg>
                  ) : s.num}
                </div>

                {/* Connector */}
                {i < steps.length - 1 && (
                  <div style={{
                    flex: 1, height: 2, marginLeft: 4, marginRight: 4,
                    background: i < currentIdx
                      ? 'linear-gradient(90deg, rgba(16,185,129,0.6), rgba(255,107,53,0.3))'
                      : i === currentIdx - 1
                      ? 'linear-gradient(90deg, rgba(16,185,129,0.6), rgba(255,107,53,0.15))'
                      : 'rgba(255,255,255,0.05)',
                    borderRadius: 2,
                    transition: 'all 0.4s ease',
                  }} />
                )}
              </div>
            ))}
          </div>
        </div>

        {/* ── Main layout: content + sidebar ── */}
        <div className="register-layout">
          {/* ── Main content column ── */}
          <div>
            {/* Error Banner */}
            {error && (
              <div style={{
                padding: '12px 16px', borderRadius: 12, marginBottom: 20,
                border: '1px solid rgba(239,68,68,0.3)',
                backgroundColor: 'rgba(239,68,68,0.08)',
                display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#EF4444" strokeWidth="2.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                <span style={{ fontSize: 12, color: '#EF4444', fontWeight: 600, flex: 1 }}>{error}</span>
                <button onClick={() => setError('')} style={{
                  background: 'none', border: 'none', color: '#EF4444', cursor: 'pointer', fontSize: 16, lineHeight: 1, padding: 0,
                }}>×</button>
              </div>
            )}

            {/* ══ Step: Connect ══ */}
            {step === 'connect' && (
              <div className="reg-card" style={glassCard}>
                {/* Decorative top gradient */}
                <div style={{
                  position: 'absolute', top: 0, left: 0, right: 0, height: 2,
                  background: 'linear-gradient(90deg, transparent, #FF6B35, transparent)',
                }} />

                <div style={{ textAlign: 'center', padding: '12px 0 4px' }}>
                  {/* Icon */}
                  <div style={{
                    width: 64, height: 64, borderRadius: 20, margin: '0 auto 20px',
                    background: 'linear-gradient(135deg, rgba(255,107,53,0.15), rgba(255,107,53,0.05))',
                    border: '1px solid rgba(255,107,53,0.25)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#FF6B35" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
                      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
                    </svg>
                  </div>

                  <h2 style={{ fontSize: 20, fontWeight: 700, color: '#F4F4F5', marginBottom: 8 }}>Connect Your Wallet</h2>
                  <p style={{ fontSize: 14, color: '#a1a1aa', marginBottom: 28, maxWidth: 360, margin: '0 auto 24px' }}>
                    Your wallet is your identity. No sign-up, no email — just your keys.
                  </p>

                  {/* Wallet provider icons */}
                  <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginBottom: 28 }}>
                    {[
                      { abbr: 'MM', name: 'MetaMask', color: '#E2761B', bg: 'rgba(226,118,27,0.1)' },
                      { abbr: 'CB', name: 'Coinbase', color: '#0052FF', bg: 'rgba(0,82,255,0.1)' },
                      { abbr: 'WC', name: 'WalletConnect', color: '#3B99FC', bg: 'rgba(59,153,252,0.1)' },
                    ].map(w => (
                      <div key={w.abbr} style={{
                        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
                      }}>
                        <div style={{
                          width: 52, height: 52, borderRadius: 14,
                          background: w.bg, border: `1px solid ${w.color}30`,
                          display: 'flex', alignItems: 'center', justifyContent: 'center',
                          fontSize: 13, fontWeight: 800, color: w.color, letterSpacing: '0.02em',
                        }}>{w.abbr}</div>
                        <span style={{ fontSize: 10, color: '#52525b' }}>{w.name}</span>
                      </div>
                    ))}
                  </div>

                  {isUnlocked ? (
                    <div>
                      <div style={{
                        display: 'inline-flex', alignItems: 'center', gap: 8,
                        padding: '10px 20px', borderRadius: 10,
                        border: '1px solid rgba(16,185,129,0.3)',
                        backgroundColor: 'rgba(16,185,129,0.08)',
                        color: '#10b981', fontSize: 14, fontWeight: 600, marginBottom: 20,
                      }}>
                        <div style={{ width: 8, height: 8, borderRadius: '50%', backgroundColor: '#10b981' }} />
                        Connected: {shortAddr}
                      </div>
                      <br />
                      <button onClick={() => setStep('identity')} className="btn-primary" style={btnPrimary(true)}>
                        Continue to Identity →
                      </button>
                    </div>
                  ) : (
                    <button onClick={connect} className="btn-primary" style={btnPrimary(true)}>
                      Connect Wallet
                    </button>
                  )}

                  {/* Why connect note */}
                  <div style={{
                    marginTop: 24, padding: '14px 16px', borderRadius: 12,
                    background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.06)',
                    textAlign: 'left',
                  }}>
                    <div style={{ fontSize: 11, fontWeight: 700, color: '#71717a', letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 8 }}>Why connect?</div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                      {[
                        'Your address becomes your agent\'s on-chain owner',
                        'Sign transactions directly — no custody, no middleman',
                        'All registration data is verifiable on Base mainnet',
                      ].map((text, i) => (
                        <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#FF6B35" strokeWidth="2.5" style={{ marginTop: 2, flexShrink: 0 }}><path d="M20 6L9 17l-5-5"/></svg>
                          <span style={{ fontSize: 12, color: '#a1a1aa', lineHeight: 1.5 }}>{text}</span>
                        </div>
                      ))}
                    </div>
                    <div style={{
                      marginTop: 12, paddingTop: 12, borderTop: '1px solid rgba(255,255,255,0.06)',
                      fontSize: 11, color: '#52525b', display: 'flex', alignItems: 'center', gap: 6,
                    }}>
                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#52525b" strokeWidth="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                      Est. gas for full registration: ~$0.50 in ETH on Base
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* ══ Step: Identity ══ */}
            {step === 'identity' && (
              <div className="reg-card" style={glassCard}>
                <div style={{
                  position: 'absolute', top: 0, left: 0, right: 0, height: 2,
                  background: 'linear-gradient(90deg, transparent, #FF6B35, transparent)',
                }} />

                <h2 style={{ fontSize: 18, fontWeight: 700, color: '#F4F4F5', marginBottom: 4 }}>Register Agent Identity</h2>
                <p style={{ fontSize: 13, color: '#71717a', marginBottom: 24 }}>
                  Submit your agent&apos;s identity to the ERC-8004 Identity Registry on Base. This transaction will be signed in your wallet.
                </p>

                {!isUnlocked && (
                  <div style={{
                    padding: 12, borderRadius: 10, marginBottom: 16,
                    border: '1px solid rgba(255,107,53,0.2)',
                    backgroundColor: 'rgba(255,107,53,0.06)',
                  }}>
                    <span style={{ fontSize: 12, color: '#FF6B35' }}>Connect your wallet first to register.</span>
                  </div>
                )}

                <div style={{ display: 'grid', gap: 20, gridTemplateColumns: '1fr 1fr' }}>
                  {/* Left: form */}
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                    <div>
                      <label style={{ fontSize: 12, fontWeight: 600, color: '#a1a1aa', marginBottom: 6, display: 'block' }}>Agent Name *</label>
                      <input value={agentName} onChange={e => setAgentName(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''))}
                        placeholder="e.g. atlas-agent-001" style={inputStyle} />
                      <div style={{ fontSize: 11, color: '#52525b', marginTop: 4 }}>3–32 chars, lowercase, hyphens ok</div>
                    </div>
                    <div>
                      <label style={{ fontSize: 12, fontWeight: 600, color: '#a1a1aa', marginBottom: 6, display: 'block' }}>Agent Type</label>
                      <select value={agentType} onChange={e => setAgentType(e.target.value)}
                        style={{ ...inputStyle, backgroundColor: '#111113' }}>
                        <option value="autonomous">Autonomous Agent</option>
                        <option value="assistant">Assistant Agent</option>
                        <option value="service">Service Agent</option>
                        <option value="oracle">Oracle Agent</option>
                        <option value="validator">Validator Agent</option>
                      </select>
                    </div>
                    <div>
                      <label style={{ fontSize: 12, fontWeight: 600, color: '#a1a1aa', marginBottom: 6, display: 'block' }}>Description</label>
                      <textarea value={agentDesc} onChange={e => setAgentDesc(e.target.value)}
                        placeholder="What does this agent do?" rows={3}
                        style={{ ...inputStyle, resize: 'vertical' as const }} />
                    </div>

                    {/* ── Capabilities Section ── */}
                    <div>
                      <label style={{ fontSize: 12, fontWeight: 600, color: '#a1a1aa', marginBottom: 2, display: 'block' }}>
                        Capabilities
                        <span style={{ fontSize: 11, fontWeight: 400, color: '#52525b', marginLeft: 6 }}>(What can your agent do?)</span>
                      </label>

                      {/* Preset capability pills */}
                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 10, marginBottom: 10 }}>
                        {PRESET_CAPABILITIES.map(cap => {
                          const isActive = capabilities.includes(cap);
                          return (
                            <button
                              key={cap}
                              type="button"
                              onClick={() => togglePresetCapability(cap)}
                              style={{
                                fontSize: 12,
                                padding: '6px 14px',
                                borderRadius: 100,
                                cursor: 'pointer',
                                transition: 'all 0.15s',
                                border: isActive
                                  ? '1px solid rgba(255,107,53,0.3)'
                                  : '1px solid rgba(255,255,255,0.08)',
                                backgroundColor: isActive
                                  ? 'rgba(255,107,53,0.12)'
                                  : 'rgba(255,255,255,0.03)',
                                color: isActive ? '#FF6B35' : '#71717a',
                                fontWeight: isActive ? 700 : 400,
                              }}
                            >
                              {cap}
                            </button>
                          );
                        })}
                      </div>

                      {/* Custom capability input */}
                      <div style={{ display: 'flex', gap: 8, alignItems: 'stretch' }}>
                        <input
                          value={capInput}
                          onChange={e => setCapInput(e.target.value)}
                          onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); addCustomCapability(); } }}
                          placeholder="Add custom capability..."
                          style={{
                            flex: 1,
                            padding: '8px 12px',
                            borderRadius: 10,
                            border: '1px solid rgba(255,255,255,0.1)',
                            backgroundColor: 'rgba(255,255,255,0.04)',
                            color: '#F4F4F5',
                            fontSize: 12,
                            outline: 'none',
                            boxSizing: 'border-box' as const,
                          }}
                        />
                        <button
                          type="button"
                          onClick={addCustomCapability}
                          style={{
                            padding: '8px 14px',
                            borderRadius: 10,
                            border: '1px solid rgba(255,107,53,0.3)',
                            backgroundColor: 'rgba(255,107,53,0.1)',
                            color: '#FF6B35',
                            fontSize: 12,
                            fontWeight: 700,
                            cursor: 'pointer',
                            flexShrink: 0,
                            transition: 'all 0.15s',
                          }}
                        >
                          Add
                        </button>
                      </div>

                      {/* Selected capabilities as removable tags */}
                      {capabilities.length > 0 && (
                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 10 }}>
                          {capabilities.map(cap => (
                            <div
                              key={cap}
                              style={{
                                display: 'inline-flex',
                                alignItems: 'center',
                                gap: 5,
                                padding: '4px 10px',
                                borderRadius: 100,
                                border: '1px solid rgba(255,107,53,0.2)',
                                backgroundColor: 'rgba(255,107,53,0.1)',
                                fontSize: 11,
                                color: '#FF8C5A',
                                fontWeight: 600,
                              }}
                            >
                              {cap}
                              <button
                                type="button"
                                onClick={() => removeCapability(cap)}
                                style={{
                                  background: 'none',
                                  border: 'none',
                                  color: '#FF8C5A',
                                  cursor: 'pointer',
                                  fontSize: 13,
                                  lineHeight: 1,
                                  padding: 0,
                                  marginLeft: 2,
                                  opacity: 0.7,
                                  display: 'flex',
                                  alignItems: 'center',
                                }}
                              >
                                ×
                              </button>
                            </div>
                          ))}
                        </div>
                      )}
                    </div>
                  </div>

                  {/* Right: live preview */}
                  <div>
                    <div style={{ fontSize: 11, fontWeight: 700, color: '#52525b', letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 10 }}>Live Preview</div>
                    <div style={{
                      borderRadius: 14, border: '1px solid rgba(255,255,255,0.08)',
                      background: 'rgba(255,255,255,0.02)', padding: '16px',
                      minHeight: 160,
                    }}>
                      {/* Trust ring icon */}
                      <div style={{
                        width: 40, height: 40, borderRadius: 12, marginBottom: 12,
                        background: agentName ? 'linear-gradient(135deg, rgba(255,107,53,0.2), rgba(229,90,36,0.1))' : 'rgba(255,255,255,0.03)',
                        border: agentName ? '1px solid rgba(255,107,53,0.3)' : '1px solid rgba(255,255,255,0.06)',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontSize: 14, fontWeight: 800, color: '#FF6B35',
                        transition: 'all 0.2s ease',
                      }}>
                        {agentName ? agentName[0].toUpperCase() : '?'}
                      </div>
                      <div style={{ fontSize: 14, fontWeight: 700, color: agentName ? '#F4F4F5' : '#3f3f46', marginBottom: 6 }}>
                        {agentName || 'agent-name'}
                      </div>
                      <div style={{
                        display: 'inline-flex', alignItems: 'center', gap: 4,
                        padding: '3px 8px', borderRadius: 6,
                        background: 'rgba(255,107,53,0.1)', border: '1px solid rgba(255,107,53,0.2)',
                        fontSize: 10, fontWeight: 700, color: '#FF6B35', letterSpacing: '0.04em',
                        textTransform: 'uppercase', marginBottom: 8,
                      }}>
                        {agentType}
                      </div>

                      {/* Capabilities preview in the live card */}
                      {capabilities.length > 0 && (
                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginBottom: 8 }}>
                          {capabilities.slice(0, 4).map(cap => (
                            <div
                              key={cap}
                              style={{
                                padding: '2px 7px',
                                borderRadius: 100,
                                border: '1px solid rgba(255,107,53,0.15)',
                                backgroundColor: 'rgba(255,107,53,0.07)',
                                fontSize: 9,
                                fontWeight: 600,
                                color: '#FF8C5A',
                                letterSpacing: '0.02em',
                              }}
                            >
                              {cap}
                            </div>
                          ))}
                          {capabilities.length > 4 && (
                            <div style={{
                              padding: '2px 7px',
                              borderRadius: 100,
                              border: '1px solid rgba(255,255,255,0.08)',
                              backgroundColor: 'rgba(255,255,255,0.03)',
                              fontSize: 9,
                              fontWeight: 600,
                              color: '#52525b',
                            }}>
                              +{capabilities.length - 4} more
                            </div>
                          )}
                        </div>
                      )}

                      {agentDesc && (
                        <div style={{ fontSize: 11, color: '#71717a', lineHeight: 1.5 }}>
                          {agentDesc.length > 80 ? agentDesc.slice(0, 80) + '…' : agentDesc}
                        </div>
                      )}
                      {!agentDesc && (
                        <div style={{ fontSize: 11, color: '#3f3f46', fontStyle: 'italic' }}>Description will appear here…</div>
                      )}
                      <div style={{ marginTop: 12, paddingTop: 10, borderTop: '1px solid rgba(255,255,255,0.05)', fontSize: 10, color: '#3f3f46', fontFamily: 'var(--font-mono)' }}>
                        owner: {address ? shortAddr : '0x…'}
                      </div>
                    </div>
                  </div>
                </div>

                {/* On-chain disclaimer */}
                <div style={{
                  padding: '12px 14px', borderRadius: 10, marginTop: 20,
                  backgroundColor: 'rgba(234,179,8,0.04)',
                  border: '1px solid rgba(234,179,8,0.15)',
                  display: 'flex', alignItems: 'flex-start', gap: 8,
                }}>
                  <span style={{ fontSize: 12, flexShrink: 0 }}>⚠️</span>
                  <p style={{ fontSize: 11, color: '#a1a1aa', lineHeight: 1.5, margin: 0 }}>
                    This action creates a real on-chain transaction on Base mainnet. Gas fees apply.
                    Transactions are irreversible. This is alpha software — use at your own risk.
                  </p>
                </div>

                <div style={{ display: 'flex', gap: 10, paddingTop: 20 }}>
                  <button onClick={() => setStep('connect')} className="btn-secondary" style={btnSecondary}>Back</button>
                  <button
                    onClick={handleIdentityRegister}
                    disabled={!agentName || agentName.length < 3 || !isUnlocked || loading}
                    className="btn-primary"
                    style={{
                      ...btnPrimary(!!agentName && agentName.length >= 3 && isUnlocked),
                      opacity: loading ? 0.6 : 1,
                    }}
                  >
                    {loading ? 'Signing…' : 'Register on ERC-8004 →'}
                  </button>
                </div>
              </div>
            )}

            {/* ══ Step: VNS ══ */}
            {step === 'vns' && (
              <div className="reg-card" style={glassCard}>
                <div style={{
                  position: 'absolute', top: 0, left: 0, right: 0, height: 2,
                  background: 'linear-gradient(90deg, transparent, #FF6B35, transparent)',
                }} />

                {identityTxHash && (
                  <div style={{
                    padding: '10px 14px', borderRadius: 10, marginBottom: 20,
                    border: '1px solid rgba(16,185,129,0.2)',
                    backgroundColor: 'rgba(16,185,129,0.06)',
                    display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap',
                  }}>
                    <div style={{ width: 7, height: 7, borderRadius: '50%', backgroundColor: '#10b981', flexShrink: 0 }} />
                    <span style={{ fontSize: 12, color: '#10b981', fontWeight: 600 }}>Identity registered</span>
                    <a href={`https://basescan.org/tx/${identityTxHash}`} target="_blank" rel="noopener noreferrer"
                      style={{ fontSize: 11, color: '#FF8C5A', marginLeft: 'auto', textDecoration: 'none' }}>
                      View tx →
                    </a>
                  </div>
                )}

                <h2 style={{ fontSize: 18, fontWeight: 700, color: '#F4F4F5', marginBottom: 8 }}>Claim a .vns Name</h2>
                <p style={{ fontSize: 13, color: '#71717a', marginBottom: 8 }}>
                  Optional. A human-readable name for your agent, registered on-chain via VaultfireNameService.
                </p>

                {/* ENS analogy note */}
                <div style={{
                  padding: '10px 14px', borderRadius: 10, marginBottom: 20,
                  background: 'rgba(255,107,53,0.04)', border: '1px solid rgba(255,107,53,0.12)',
                  display: 'flex', alignItems: 'center', gap: 8,
                }}>
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#FF6B35" strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                  <span style={{ fontSize: 12, color: '#a1a1aa' }}>
                    Your agent&apos;s human-readable name. Like ENS, but for AI. Resolves to your agent&apos;s on-chain record.
                  </span>
                </div>

                {/* VNS input with suffix */}
                <div style={{ marginBottom: 16 }}>
                  <label style={{ fontSize: 12, fontWeight: 600, color: '#a1a1aa', marginBottom: 6, display: 'block' }}>Name</label>
                  <div style={{ display: 'flex', alignItems: 'stretch' }}>
                    <input value={vnsName} onChange={e => setVnsName(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''))}
                      placeholder="my-agent"
                      style={{ ...inputStyle, borderRadius: '10px 0 0 10px', borderRight: 'none', flex: 1 }} />
                    <div style={{
                      padding: '10px 14px', borderRadius: '0 10px 10px 0',
                      border: '1px solid rgba(255,107,53,0.3)',
                      backgroundColor: 'rgba(255,107,53,0.1)', color: '#FF6B35',
                      fontSize: 14, fontWeight: 700, display: 'flex', alignItems: 'center',
                      flexShrink: 0,
                    }}>.vns</div>
                  </div>
                </div>

                {/* Preview */}
                {vnsName ? (
                  <div style={{
                    padding: '14px 16px', borderRadius: 12, marginBottom: 16,
                    background: 'rgba(255,107,53,0.06)', border: '1px solid rgba(255,107,53,0.15)',
                    display: 'flex', alignItems: 'center', gap: 10,
                  }}>
                    <div style={{
                      width: 36, height: 36, borderRadius: 10, flexShrink: 0,
                      background: 'rgba(255,107,53,0.15)', border: '1px solid rgba(255,107,53,0.3)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 13, fontWeight: 800, color: '#FF6B35',
                    }}>{vnsName[0].toUpperCase()}</div>
                    <div>
                      <div style={{ fontSize: 15, fontWeight: 700, color: '#FF6B35', fontFamily: 'var(--font-mono)' }}>
                        {vnsName}.vns
                      </div>
                      <div style={{ fontSize: 11, color: '#71717a', marginTop: 2 }}>Resolves to → {address ? shortAddr : '0x…'}</div>
                    </div>
                  </div>
                ) : (
                  <div style={{
                    padding: '12px 16px', borderRadius: 12, marginBottom: 16,
                    background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.05)',
                    fontSize: 12, color: '#3f3f46', fontStyle: 'italic',
                  }}>
                    Enter a name above to preview your .vns address…
                  </div>
                )}

                {vnsName && (
                  <div style={{
                    padding: '12px 14px', borderRadius: 10, marginBottom: 12,
                    backgroundColor: 'rgba(234,179,8,0.04)',
                    border: '1px solid rgba(234,179,8,0.15)',
                    display: 'flex', alignItems: 'flex-start', gap: 8,
                  }}>
                    <span style={{ fontSize: 12, flexShrink: 0 }}>⚠️</span>
                    <p style={{ fontSize: 11, color: '#a1a1aa', lineHeight: 1.5, margin: 0 }}>
                      VNS names are permanent on-chain registrations. Once registered, names cannot be
                      transferred or deleted. Gas fees apply on Base mainnet.
                    </p>
                  </div>
                )}

                <div style={{ display: 'flex', gap: 10 }}>
                  <button onClick={() => setStep('identity')} className="btn-secondary" style={btnSecondary}>Back</button>
                  <button onClick={vnsName ? handleVnsClaim : () => setStep('bond')}
                    disabled={loading}
                    className="btn-primary"
                    style={{ ...btnPrimary(true), opacity: loading ? 0.6 : 1 }}>
                    {loading ? 'Signing…' : vnsName ? 'Claim VNS Name →' : 'Skip →'}
                  </button>
                </div>
              </div>
            )}

            {/* ══ Step: Bond ══ */}
            {step === 'bond' && (
              <div className="reg-card" style={glassCard}>
                <div style={{
                  position: 'absolute', top: 0, left: 0, right: 0, height: 2,
                  background: 'linear-gradient(90deg, transparent, #FF6B35, transparent)',
                }} />

                {(identityTxHash || vnsTxHash) && (
                  <div style={{
                    padding: '10px 14px', borderRadius: 10, marginBottom: 20,
                    border: '1px solid rgba(16,185,129,0.2)',
                    backgroundColor: 'rgba(16,185,129,0.06)',
                    display: 'flex', alignItems: 'center', gap: 8,
                  }}>
                    <div style={{ width: 7, height: 7, borderRadius: '50%', backgroundColor: '#10b981', flexShrink: 0 }} />
                    <span style={{ fontSize: 12, color: '#10b981', fontWeight: 600 }}>
                      {vnsTxHash ? 'VNS name claimed' : 'Identity registered'}
                    </span>
                  </div>
                )}

                <h2 style={{ fontSize: 18, fontWeight: 700, color: '#F4F4F5', marginBottom: 8 }}>Create an Accountability Bond</h2>

                {/* Yield pool notice */}
                <div style={{
                  padding: '12px 14px', borderRadius: 10, marginBottom: 16,
                  backgroundColor: 'rgba(239,68,68,0.06)',
                  border: '1px solid rgba(239,68,68,0.2)',
                  display: 'flex', alignItems: 'flex-start', gap: 8,
                }}>
                  <span style={{ fontSize: 13, flexShrink: 0 }}>✅</span>
                  <div>
                    <p style={{ fontSize: 12, color: '#86EFAC', fontWeight: 700, marginBottom: 2 }}>Accountability Bonds — LIVE</p>
                    <p style={{ fontSize: 11, color: '#a1a1aa', lineHeight: 1.5, margin: 0 }}>
                      AIAccountabilityBondsV2 is live on all 4 chains. Yield pool funded and operational.
                      AI companies stake 30% of quarterly revenue tied to 6 global human flourishing metrics.
                    </p>
                  </div>
                </div>

                {/* Skin-in-the-game explainer */}
                <div style={{
                  padding: '10px 14px', borderRadius: 10, marginBottom: 20,
                  background: 'rgba(255,107,53,0.04)', border: '1px solid rgba(255,107,53,0.12)',
                  display: 'flex', alignItems: 'center', gap: 8,
                }}>
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#FF6B35" strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                  <span style={{ fontSize: 12, color: '#a1a1aa' }}>
                    Bonds are slashable stake — your agent&apos;s skin in the game. Higher bonds unlock higher Street Cred tiers.
                  </span>
                </div>

                <p style={{ fontSize: 13, color: '#71717a', marginBottom: 16 }}>
                  Stake ETH to back your agent. Signed in your wallet.
                </p>

                {/* Tier selector */}
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 16 }}>
                  {[
                    { amount: '0.001', tier: 'Bronze', color: '#CD7F32', minUsd: '~$0.30' },
                    { amount: '0.01', tier: 'Silver', color: '#C0C0C0', minUsd: '~$3' },
                    { amount: '0.1', tier: 'Gold', color: '#FFD700', minUsd: '~$30' },
                  ].map(b => (
                    <button key={b.amount} onClick={() => setBondAmount(b.amount)} style={{
                      padding: '14px 10px', borderRadius: 12, textAlign: 'center', cursor: 'pointer',
                      border: bondAmount === b.amount ? `1.5px solid ${b.color}50` : '1px solid rgba(255,255,255,0.06)',
                      backgroundColor: bondAmount === b.amount ? `${b.color}10` : 'rgba(255,255,255,0.02)',
                      transition: 'all 0.15s ease',
                      position: 'relative' as const,
                    }}>
                      {bondAmount === b.amount && (
                        <div style={{
                          position: 'absolute', top: -1, right: -1, width: 18, height: 18, borderRadius: '0 12px 0 6px',
                          background: b.color, display: 'flex', alignItems: 'center', justifyContent: 'center',
                        }}>
                          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#000" strokeWidth="3"><path d="M20 6L9 17l-5-5"/></svg>
                        </div>
                      )}
                      <div style={{ fontSize: 16, fontWeight: 800, color: b.color }}>{b.amount}</div>
                      <div style={{ fontSize: 10, color: '#71717a', marginTop: 2 }}>ETH</div>
                      <div style={{ fontSize: 11, fontWeight: 700, color: b.color, marginTop: 6 }}>{b.tier}</div>
                      <div style={{ fontSize: 9, color: '#52525b', marginTop: 2 }}>{b.minUsd}</div>
                    </button>
                  ))}
                </div>

                {/* Active tier badge */}
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16,
                  padding: '10px 14px', borderRadius: 10,
                  background: `${bondTier.color}08`, border: `1px solid ${bondTier.color}25`,
                }}>
                  <div style={{ width: 10, height: 10, borderRadius: '50%', background: bondTier.color, flexShrink: 0 }} />
                  <span style={{ fontSize: 12, color: '#a1a1aa' }}>Current selection:</span>
                  <span style={{ fontSize: 13, fontWeight: 700, color: bondTier.color }}>{bondTier.tier} Tier</span>
                  <span style={{ fontSize: 12, color: '#71717a', marginLeft: 'auto' }}>{bondAmount} ETH</span>
                </div>

                {/* Summary */}
                <div style={{
                  padding: 16, borderRadius: 12,
                  border: '1px solid rgba(255,255,255,0.06)',
                  backgroundColor: 'rgba(255,255,255,0.02)',
                  marginBottom: 16,
                }}>
                  <div style={{ fontSize: 12, color: '#71717a', marginBottom: 10, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase' as const }}>Summary</div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                    <span style={{ fontSize: 13, color: '#a1a1aa' }}>Agent</span>
                    <span style={{ fontSize: 13, color: '#F4F4F5', fontWeight: 600 }}>{agentName}</span>
                  </div>
                  {vnsName && (
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                      <span style={{ fontSize: 13, color: '#a1a1aa' }}>VNS Name</span>
                      <span style={{ fontSize: 13, color: '#FF6B35', fontWeight: 600 }}>{vnsName}.vns</span>
                    </div>
                  )}
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <span style={{ fontSize: 13, color: '#a1a1aa' }}>Bond</span>
                    <span style={{ fontSize: 13, color: '#F4F4F5', fontWeight: 600 }}>{bondAmount} ETH</span>
                  </div>
                </div>

                {/* Disclaimer */}
                <div style={{
                  padding: '12px 14px', borderRadius: 10, marginBottom: 16,
                  backgroundColor: 'rgba(234,179,8,0.04)',
                  border: '1px solid rgba(234,179,8,0.15)',
                  display: 'flex', alignItems: 'flex-start', gap: 8,
                }}>
                  <span style={{ fontSize: 12, flexShrink: 0 }}>⚠️</span>
                  <p style={{ fontSize: 11, color: '#a1a1aa', lineHeight: 1.5, margin: 0 }}>
                    Bonding requires staking real ETH. Your bond can be slashed if you violate Vaultfire
                    protocol rules. This is an irreversible on-chain transaction on Base mainnet.
                  </p>
                </div>

                <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                  <button onClick={() => setStep('vns')} className="btn-secondary" style={btnSecondary}>Back</button>
                  <button onClick={() => setStep('partnership')} className="btn-secondary" style={btnSecondary}>Skip (yield pool not funded)</button>
                  <button onClick={handleBondCreate} disabled={loading} style={{
                    ...btnPrimary(true), opacity: 0.4, cursor: 'not-allowed',
                  }} title="Create Accountability Bond">{loading ? 'Signing…' : 'Create Bond'}</button>
                </div>
              </div>
            )}

            {/* ══ Step: Partnership Bond ══ */}
            {step === 'partnership' && (
              <div className="reg-card" style={glassCard}>
                <div style={{
                  position: 'absolute', top: 0, left: 0, right: 0, height: 2,
                  background: 'linear-gradient(90deg, transparent, #FF6B35, transparent)',
                }} />

                {bondTxHash && (
                  <div style={{
                    padding: '10px 14px', borderRadius: 10, marginBottom: 20,
                    border: '1px solid rgba(16,185,129,0.2)',
                    backgroundColor: 'rgba(16,185,129,0.06)',
                    display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap',
                  }}>
                    <div style={{ width: 7, height: 7, borderRadius: '50%', backgroundColor: '#10b981', flexShrink: 0 }} />
                    <span style={{ fontSize: 12, color: '#10b981', fontWeight: 600 }}>Accountability bond created</span>
                    <a href={`https://basescan.org/tx/${bondTxHash}`} target="_blank" rel="noopener noreferrer"
                      style={{ fontSize: 11, color: '#FF8C5A', marginLeft: 'auto', textDecoration: 'none' }}>
                      View tx →
                    </a>
                  </div>
                )}

                <h2 style={{ fontSize: 18, fontWeight: 700, color: '#F4F4F5', marginBottom: 8 }}>Create a Partnership Bond</h2>
                <p style={{ fontSize: 13, color: '#71717a', marginBottom: 20 }}>
                  Optional. Establish a verified working relationship with another agent by staking ETH on AIPartnershipBondsV2.
                </p>

                {/* Handshake diagram */}
                <div style={{
                  padding: '16px', borderRadius: 14, marginBottom: 24,
                  background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.06)',
                  display: 'flex', alignItems: 'center', gap: 0,
                }}>
                  {/* Your agent */}
                  <div style={{ flex: 1, textAlign: 'center' }}>
                    <div style={{
                      width: 44, height: 44, borderRadius: 13, margin: '0 auto 8px',
                      background: 'linear-gradient(135deg, rgba(255,107,53,0.2), rgba(255,107,53,0.05))',
                      border: '1.5px solid rgba(255,107,53,0.4)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 15, fontWeight: 800, color: '#FF6B35',
                    }}>
                      {agentName ? agentName[0].toUpperCase() : 'Y'}
                    </div>
                    <div style={{ fontSize: 12, fontWeight: 600, color: '#F4F4F5' }}>{agentName || 'Your Agent'}</div>
                    <div style={{ fontSize: 10, color: '#52525b', fontFamily: 'var(--font-mono)', marginTop: 2 }}>{shortAddr || '0x…'}</div>
                  </div>

                  {/* Connector */}
                  <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
                    <div style={{ fontSize: 10, fontWeight: 700, color: '#FF6B35', letterSpacing: '0.06em', textTransform: 'uppercase' }}>
                      {partnershipType}
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
                      <div style={{ flex: 1, height: 1, background: 'linear-gradient(90deg, rgba(255,107,53,0.4), rgba(255,107,53,0.1))' }} />
                      <div style={{
                        width: 28, height: 28, borderRadius: '50%', flexShrink: 0,
                        background: 'rgba(255,107,53,0.15)', border: '1px solid rgba(255,107,53,0.3)',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                      }}>
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#FF6B35" strokeWidth="2" strokeLinecap="round">
                          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                        </svg>
                      </div>
                      <div style={{ flex: 1, height: 1, background: 'linear-gradient(90deg, rgba(255,107,53,0.1), rgba(255,107,53,0.4))' }} />
                    </div>
                    <div style={{ fontSize: 10, color: '#52525b' }}>{partnerBondAmount} ETH staked</div>
                  </div>

                  {/* Partner agent */}
                  <div style={{ flex: 1, textAlign: 'center' }}>
                    <div style={{
                      width: 44, height: 44, borderRadius: 13, margin: '0 auto 8px',
                      background: partnerAddr ? 'linear-gradient(135deg, rgba(99,102,241,0.2), rgba(99,102,241,0.05))' : 'rgba(255,255,255,0.03)',
                      border: partnerAddr ? '1.5px solid rgba(99,102,241,0.4)' : '1.5px dashed rgba(255,255,255,0.1)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 15, fontWeight: 800, color: partnerAddr ? '#818CF8' : '#3f3f46',
                      transition: 'all 0.2s ease',
                    }}>
                      {partnerAddr ? partnerAddr[2]?.toUpperCase() : '?'}
                    </div>
                    <div style={{ fontSize: 12, fontWeight: 600, color: partnerAddr ? '#F4F4F5' : '#3f3f46' }}>
                      {partnerAddr ? 'Partner' : 'Enter address'}
                    </div>
                    <div style={{ fontSize: 10, color: '#52525b', fontFamily: 'var(--font-mono)', marginTop: 2 }}>
                      {partnerAddr ? `${partnerAddr.slice(0, 6)}…${partnerAddr.slice(-4)}` : '0x…'}
                    </div>
                  </div>
                </div>

                <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                  <div>
                    <label style={{ fontSize: 12, fontWeight: 600, color: '#a1a1aa', marginBottom: 6, display: 'block' }}>
                      Partner Agent Address *
                    </label>
                    <input value={partnerAddr} onChange={e => setPartnerAddr(e.target.value)}
                      placeholder="0x… (the agent you want to partner with)"
                      style={inputStyle} />
                  </div>

                  {/* Partnership type with descriptions */}
                  <div>
                    <label style={{ fontSize: 12, fontWeight: 600, color: '#a1a1aa', marginBottom: 8, display: 'block' }}>
                      Partnership Type
                    </label>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                      {[
                        { value: 'collaboration', label: 'Collaboration' },
                        { value: 'delegation', label: 'Delegation' },
                        { value: 'service-provider', label: 'Service Provider' },
                        { value: 'data-sharing', label: 'Data Sharing' },
                        { value: 'oracle-consumer', label: 'Oracle Consumer' },
                      ].map(opt => (
                        <button key={opt.value} onClick={() => setPartnershipType(opt.value)} style={{
                          padding: '10px 14px', borderRadius: 10, textAlign: 'left', cursor: 'pointer',
                          border: partnershipType === opt.value ? '1.5px solid rgba(255,107,53,0.4)' : '1px solid rgba(255,255,255,0.06)',
                          background: partnershipType === opt.value ? 'rgba(255,107,53,0.08)' : 'rgba(255,255,255,0.02)',
                          transition: 'all 0.15s ease',
                        }}>
                          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                            <div style={{
                              width: 6, height: 6, borderRadius: '50%', flexShrink: 0,
                              background: partnershipType === opt.value ? '#FF6B35' : '#3f3f46',
                              transition: 'background 0.15s ease',
                            }} />
                            <span style={{ fontSize: 13, fontWeight: 600, color: partnershipType === opt.value ? '#F4F4F5' : '#a1a1aa' }}>
                              {opt.label}
                            </span>
                          </div>
                          {partnershipType === opt.value && (
                            <p style={{ fontSize: 11, color: '#71717a', marginTop: 4, marginLeft: 14, lineHeight: 1.5 }}>
                              {partnershipTypeDescriptions[opt.value]}
                            </p>
                          )}
                        </button>
                      ))}
                    </div>
                  </div>

                  <div>
                    <label style={{ fontSize: 12, fontWeight: 600, color: '#a1a1aa', marginBottom: 8, display: 'block' }}>
                      Bond Amount (ETH)
                    </label>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
                      {[
                        { amount: '0.01', tier: 'Bronze', color: '#CD7F32' },
                        { amount: '0.05', tier: 'Silver', color: '#C0C0C0' },
                        { amount: '0.1', tier: 'Gold', color: '#FFD700' },
                        { amount: '0.5', tier: 'Platinum', color: '#E5E4E2' },
                      ].map(b => (
                        <button key={b.amount} onClick={() => setPartnerBondAmount(b.amount)} style={{
                          padding: '10px 8px', borderRadius: 10, textAlign: 'center', cursor: 'pointer',
                          border: partnerBondAmount === b.amount ? `1.5px solid ${b.color}50` : '1px solid rgba(255,255,255,0.06)',
                          backgroundColor: partnerBondAmount === b.amount ? `${b.color}10` : 'rgba(255,255,255,0.02)',
                          transition: 'all 0.15s ease',
                        }}>
                          <div style={{ fontSize: 14, fontWeight: 700, color: b.color }}>{b.amount}</div>
                          <div style={{ fontSize: 9, color: '#71717a', marginTop: 2 }}>{b.tier}</div>
                        </button>
                      ))}
                    </div>
                  </div>

                  {/* Summary Card */}
                  <div style={{
                    padding: 16, borderRadius: 12,
                    border: '1px solid rgba(255,255,255,0.06)',
                    backgroundColor: 'rgba(255,255,255,0.02)',
                  }}>
                    <div style={{ fontSize: 11, color: '#71717a', marginBottom: 10, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase' as const }}>Partnership Summary</div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                      <span style={{ fontSize: 13, color: '#a1a1aa' }}>Your Agent</span>
                      <span style={{ fontSize: 13, color: '#F4F4F5', fontWeight: 600 }}>{agentName}</span>
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                      <span style={{ fontSize: 13, color: '#a1a1aa' }}>Partner</span>
                      <span style={{ fontSize: 11, color: '#F4F4F5', fontWeight: 600, fontFamily: 'var(--font-mono)' }}>
                        {partnerAddr ? `${partnerAddr.slice(0, 8)}...${partnerAddr.slice(-6)}` : '\u2014'}
                      </span>
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                      <span style={{ fontSize: 13, color: '#a1a1aa' }}>Type</span>
                      <span style={{ fontSize: 13, color: '#FF6B35', fontWeight: 600 }}>{partnershipType}</span>
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                      <span style={{ fontSize: 13, color: '#a1a1aa' }}>Stake</span>
                      <span style={{ fontSize: 13, color: '#F4F4F5', fontWeight: 600 }}>{partnerBondAmount} ETH</span>
                    </div>
                  </div>
                </div>

                {/* Partnership bond disclaimer */}
                <div style={{
                  padding: '12px 14px', borderRadius: 10, marginTop: 16,
                  backgroundColor: 'rgba(234,179,8,0.04)',
                  border: '1px solid rgba(234,179,8,0.15)',
                  display: 'flex', alignItems: 'flex-start', gap: 8,
                }}>
                  <span style={{ fontSize: 12, flexShrink: 0 }}>⚠️</span>
                  <p style={{ fontSize: 11, color: '#a1a1aa', lineHeight: 1.5, margin: 0 }}>
                    Partnership bonds require staking real ETH on Base mainnet. Both parties must agree
                    to the bond terms. Gas fees apply. This is alpha software.
                  </p>
                </div>

                <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
                  <button onClick={() => setStep('done')} className="btn-secondary" style={btnSecondary}>
                    Skip for now
                  </button>
                  <button onClick={handlePartnershipBond} disabled={loading || !partnerAddr} className="btn-primary" style={{
                    ...btnPrimary(!!partnerAddr), opacity: loading ? 0.6 : 1,
                  }}>
                    {loading ? 'Signing…' : 'Create Partnership Bond →'}
                  </button>
                </div>
              </div>
            )}

            {/* ══ Step: Done ══ */}
            {step === 'done' && (
              <div className="reg-card" style={{ ...glassCard, textAlign: 'center' }}>
                <div style={{
                  position: 'absolute', top: 0, left: 0, right: 0, height: 2,
                  background: 'linear-gradient(90deg, transparent, #10b981, transparent)',
                }} />

                {/* Celebration trust ring */}
                <div style={{ position: 'relative', width: 100, height: 100, margin: '12px auto 24px' }}>
                  {/* Outer spinning ring */}
                  <div style={{
                    position: 'absolute', inset: 0, borderRadius: '50%',
                    border: '2px solid transparent',
                    borderTopColor: '#FF6B35',
                    borderRightColor: 'rgba(255,107,53,0.3)',
                    animation: 'ring-spin 3s linear infinite',
                  }} />
                  {/* Inner ring */}
                  <div style={{
                    position: 'absolute', inset: 8, borderRadius: '50%',
                    border: '1.5px solid rgba(16,185,129,0.3)',
                  }} />
                  {/* Core */}
                  <div style={{
                    position: 'absolute', inset: 18, borderRadius: '50%',
                    background: 'linear-gradient(135deg, rgba(16,185,129,0.15), rgba(255,107,53,0.1))',
                    border: '1px solid rgba(16,185,129,0.3)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    animation: 'celebrate 2.5s ease-in-out infinite',
                  }}>
                    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#10b981" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M20 6L9 17l-5-5" />
                    </svg>
                  </div>
                </div>

                <h2 style={{ fontSize: 28, fontWeight: 800, color: '#F4F4F5', letterSpacing: '-0.02em', marginBottom: 8 }}>
                  {agentName || 'Agent'} is live
                </h2>
                {vnsName && (
                  <div style={{
                    display: 'inline-block', padding: '6px 16px', borderRadius: 10,
                    background: 'rgba(255,107,53,0.1)', border: '1px solid rgba(255,107,53,0.25)',
                    fontSize: 16, fontWeight: 700, color: '#FF6B35', fontFamily: 'var(--font-mono)',
                    marginBottom: 12,
                  }}>
                    {vnsName}.vns
                  </div>
                )}
                <p style={{ fontSize: 14, color: '#a1a1aa', marginBottom: 4, maxWidth: 400, margin: '0 auto 12px' }}>
                  Your agent is now on-chain and discoverable. The ERC-8004 Identity Registry has recorded your agent&apos;s identity, cryptographically linked to your wallet.
                </p>
                <p style={{ fontSize: 13, color: '#10b981', fontWeight: 600, marginBottom: 24 }}>
                  Your agent is now discoverable and verifiable.
                </p>

                {partnerTxHash && (
                  <p style={{ fontSize: 13, color: '#a1a1aa', marginBottom: 20 }}>
                    Partnership bond created with{' '}
                    <span style={{ color: '#F4F4F5', fontFamily: 'var(--font-mono)' }}>
                      {partnerAddr.slice(0, 8)}…{partnerAddr.slice(-4)}
                    </span>
                  </p>
                )}

                {/* Tx hashes */}
                {(identityTxHash || vnsTxHash || bondTxHash || partnerTxHash) && (
                  <div style={{ marginBottom: 24 }}>
                    <div style={{ fontSize: 11, fontWeight: 700, color: '#52525b', letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 10 }}>
                      On-chain records
                    </div>
                    <div style={{ display: 'flex', gap: 8, justifyContent: 'center', flexWrap: 'wrap' }}>
                      {identityTxHash && (
                        <a href={`https://basescan.org/tx/${identityTxHash}`} target="_blank" rel="noopener noreferrer"
                          style={{
                            display: 'inline-flex', alignItems: 'center', gap: 6,
                            padding: '8px 14px', borderRadius: 8,
                            border: '1px solid rgba(16,185,129,0.2)', backgroundColor: 'rgba(16,185,129,0.06)',
                            color: '#10b981', fontSize: 12, fontWeight: 600, textDecoration: 'none',
                          }}>
                          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#10b981" strokeWidth="2.5"><path d="M20 6L9 17l-5-5"/></svg>
                          Identity Tx
                        </a>
                      )}
                      {vnsTxHash && (
                        <a href={`https://basescan.org/tx/${vnsTxHash}`} target="_blank" rel="noopener noreferrer"
                          style={{
                            display: 'inline-flex', alignItems: 'center', gap: 6,
                            padding: '8px 14px', borderRadius: 8,
                            border: '1px solid rgba(255,107,53,0.2)', backgroundColor: 'rgba(255,107,53,0.06)',
                            color: '#FF8C5A', fontSize: 12, fontWeight: 600, textDecoration: 'none',
                          }}>
                          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#FF8C5A" strokeWidth="2.5"><path d="M20 6L9 17l-5-5"/></svg>
                          VNS Tx
                        </a>
                      )}
                      {bondTxHash && (
                        <a href={`https://basescan.org/tx/${bondTxHash}`} target="_blank" rel="noopener noreferrer"
                          style={{
                            display: 'inline-flex', alignItems: 'center', gap: 6,
                            padding: '8px 14px', borderRadius: 8,
                            border: '1px solid rgba(234,179,8,0.2)', backgroundColor: 'rgba(234,179,8,0.06)',
                            color: '#EAB308', fontSize: 12, fontWeight: 600, textDecoration: 'none',
                          }}>
                          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#EAB308" strokeWidth="2.5"><path d="M20 6L9 17l-5-5"/></svg>
                          Bond Tx
                        </a>
                      )}
                      {partnerTxHash && (
                        <a href={`https://basescan.org/tx/${partnerTxHash}`} target="_blank" rel="noopener noreferrer"
                          style={{
                            display: 'inline-flex', alignItems: 'center', gap: 6,
                            padding: '8px 14px', borderRadius: 8,
                            border: '1px solid rgba(99,102,241,0.2)', backgroundColor: 'rgba(99,102,241,0.06)',
                            color: '#818CF8', fontSize: 12, fontWeight: 600, textDecoration: 'none',
                          }}>
                          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#818CF8" strokeWidth="2.5"><path d="M20 6L9 17l-5-5"/></svg>
                          Partnership Tx
                        </a>
                      )}
                    </div>
                  </div>
                )}

                {/* CTAs */}
                <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap' }}>
                  <button onClick={() => onNavigate('discover')} className="btn-primary" style={btnPrimary(true)}>
                    View on Discover →
                  </button>
                  <button onClick={() => onNavigate('trust')} className="btn-secondary" style={btnSecondary}>
                    Verify Trust
                  </button>
                  <a
                    href="https://github.com/theloopbreaker/vaultfire-docs"
                    target="_blank"
                    rel="noopener noreferrer"
                    style={{
                      ...btnSecondary,
                      display: 'inline-flex', alignItems: 'center', gap: 6, textDecoration: 'none',
                    }}
                  >
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                    Read the Docs
                  </a>
                </div>
              </div>
            )}
          </div>

          {/* ── Sidebar Context Panel ── */}
          <div className="sidebar-panel" style={{ display: 'none' }}>
            <div style={{
              borderRadius: 16, border: '1px solid rgba(255,255,255,0.06)',
              background: 'rgba(255,255,255,0.02)',
              overflow: 'hidden',
              position: 'sticky' as const,
              top: 24,
            }}>
              {/* Header */}
              <div style={{
                padding: '16px 18px',
                borderBottom: '1px solid rgba(255,255,255,0.05)',
                background: 'rgba(255,107,53,0.04)',
              }}>
                <div style={{ fontSize: 11, fontWeight: 700, color: '#FF6B35', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
                  About Registration
                </div>
              </div>

              <div style={{ padding: '18px' }}>
                {/* What is ERC-8004 */}
                <div style={{ marginBottom: 20 }}>
                  <div style={{ fontSize: 12, fontWeight: 700, color: '#F4F4F5', marginBottom: 8, display: 'flex', alignItems: 'center', gap: 6 }}>
                    <div style={{ width: 16, height: 16, borderRadius: 4, background: 'rgba(255,107,53,0.2)', border: '1px solid rgba(255,107,53,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#FF6B35" strokeWidth="2.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                    </div>
                    What is ERC-8004?
                  </div>
                  <p style={{ fontSize: 12, color: '#71717a', lineHeight: 1.6, margin: 0 }}>
                    ERC-8004 is an EVM-native standard for AI agent identity. It defines how agents register
                    ownership, capabilities, and trust relationships on-chain — making them verifiable by anyone,
                    without a central directory.
                  </p>
                </div>

                <div style={{ height: 1, background: 'rgba(255,255,255,0.05)', marginBottom: 20 }} />

                {/* Capabilities context — shown during identity step */}
                {step === 'identity' && (
                  <>
                    <div style={{ marginBottom: 20 }}>
                      <div style={{ fontSize: 12, fontWeight: 700, color: '#F4F4F5', marginBottom: 8, display: 'flex', alignItems: 'center', gap: 6 }}>
                        <div style={{ width: 16, height: 16, borderRadius: 4, background: 'rgba(255,107,53,0.15)', border: '1px solid rgba(255,107,53,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                          <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#FF6B35" strokeWidth="2.5"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                        </div>
                        About Capabilities
                      </div>
                      <p style={{ fontSize: 12, color: '#71717a', lineHeight: 1.6, margin: 0 }}>
                        Capabilities help other agents and developers find you. Declare what your agent can do — data processing, inference, monitoring, etc. — and you&apos;ll appear in capability-filtered searches on the Discover page.
                      </p>
                    </div>
                    <div style={{ height: 1, background: 'rgba(255,255,255,0.05)', marginBottom: 20 }} />
                  </>
                )}

                {/* Why registration matters */}
                <div style={{ marginBottom: 20 }}>
                  <div style={{ fontSize: 12, fontWeight: 700, color: '#F4F4F5', marginBottom: 8, display: 'flex', alignItems: 'center', gap: 6 }}>
                    <div style={{ width: 16, height: 16, borderRadius: 4, background: 'rgba(16,185,129,0.15)', border: '1px solid rgba(16,185,129,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#10b981" strokeWidth="2.5"><path d="M20 6L9 17l-5-5"/></svg>
                    </div>
                    Why registration matters
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                    {[
                      'Verifiable ownership — no one can impersonate your agent',
                      'Discoverable by other agents and users on the Hub',
                      'Eligible for Street Cred scoring & bond rewards',
                      'Required for protocol-level partnership creation',
                    ].map((t, i) => (
                      <div key={i} style={{ display: 'flex', gap: 7, alignItems: 'flex-start' }}>
                        <div style={{ width: 4, height: 4, borderRadius: '50%', background: '#FF6B35', marginTop: 6, flexShrink: 0 }} />
                        <span style={{ fontSize: 11, color: '#71717a', lineHeight: 1.6 }}>{t}</span>
                      </div>
                    ))}
                  </div>
                </div>

                <div style={{ height: 1, background: 'rgba(255,255,255,0.05)', marginBottom: 20 }} />

                {/* Cost estimate */}
                <div style={{ marginBottom: 20 }}>
                  <div style={{ fontSize: 12, fontWeight: 700, color: '#F4F4F5', marginBottom: 10, display: 'flex', alignItems: 'center', gap: 6 }}>
                    <div style={{ width: 16, height: 16, borderRadius: 4, background: 'rgba(234,179,8,0.12)', border: '1px solid rgba(234,179,8,0.25)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#EAB308" strokeWidth="2.5"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                    </div>
                    Est. total cost
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                    {[
                      { label: 'Identity registration', cost: '~$0.50' },
                      { label: 'VNS name claim', cost: '~$0.30' },
                      { label: 'Accountability bond', cost: '~$0.40 + stake' },
                      { label: 'Partnership bond', cost: '~$0.40 + stake' },
                    ].map((row, i) => (
                      <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <span style={{ fontSize: 11, color: '#71717a' }}>{row.label}</span>
                        <span style={{ fontSize: 11, fontWeight: 600, color: '#a1a1aa', fontFamily: 'var(--font-mono)' }}>{row.cost}</span>
                      </div>
                    ))}
                    <div style={{ height: 1, background: 'rgba(255,255,255,0.06)', margin: '4px 0' }} />
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <span style={{ fontSize: 11, fontWeight: 700, color: '#F4F4F5' }}>Total gas (est.)</span>
                      <span style={{ fontSize: 12, fontWeight: 800, color: '#FF6B35', fontFamily: 'var(--font-mono)' }}>~$2–5</span>
                    </div>
                  </div>
                  <p style={{ fontSize: 10, color: '#3f3f46', marginTop: 8, lineHeight: 1.5 }}>
                    Gas costs on Base L2. Excludes optional bond stakes. Prices vary with ETH price and network load.
                  </p>
                </div>

                <div style={{ height: 1, background: 'rgba(255,255,255,0.05)', marginBottom: 16 }} />

                {/* Chain info */}
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 8,
                  padding: '10px 12px', borderRadius: 10,
                  background: 'rgba(0,82,255,0.06)', border: '1px solid rgba(0,82,255,0.15)',
                }}>
                  <div style={{
                    width: 24, height: 24, borderRadius: 6, flexShrink: 0,
                    background: 'rgba(0,82,255,0.15)', border: '1px solid rgba(0,82,255,0.3)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 9, fontWeight: 800, color: '#6B9FFF',
                  }}>BASE</div>
                  <div>
                    <div style={{ fontSize: 11, fontWeight: 600, color: '#F4F4F5' }}>Base Mainnet</div>
                    <div style={{ fontSize: 10, color: '#52525b' }}>Fast, cheap L2 by Coinbase</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* ── Protocol Disclaimer ── */}
      <div style={{
        marginTop: 48,
        padding: '20px 24px',
        borderTop: '1px solid rgba(255,255,255,0.06)',
        textAlign: 'center',
      }}>
        <p style={{
          fontSize: 11,
          color: '#52525b',
          lineHeight: 1.7,
          maxWidth: 680,
          margin: '0 auto',
        }}>
          <strong style={{ color: '#71717a' }}>⚠ Disclaimer:</strong> Vaultfire is experimental, unaudited software in active development.
          Smart contracts have not been formally audited. Use at your own risk. Nothing on this site constitutes financial,
          legal, or investment advice. Users are solely responsible for evaluating risks before interacting with on-chain
          contracts. Transactions are irreversible. Always do your own research.
        </p>
      </div>
    </>
  );
}
