'use client';
import { useState, useEffect, useRef, useCallback } from 'react';
import { checkAllChains, type RPCResult } from '../lib/blockchain';
import { BASE_CONTRACTS, AVALANCHE_CONTRACTS, ETHEREUM_CONTRACTS } from '../lib/contracts';
import { isRegistered, getRegistration, getRegisteredChains, type SupportedChain } from '../lib/registration';
import { getAgentCount } from '../lib/contract-interaction';
import { AlphaBanner } from '../components/DisclaimerBanner';
import { getSoulSummary } from '../lib/companion-soul';
import { getBrainStats } from '../lib/companion-brain';
import { useWalletAuth } from '../lib/WalletAuthContext';

interface ChainStatus {
  name: string;
  chainId: number;
  color: string;
  result: RPCResult | null;
  loading: boolean;
}

/* ── Animated Counter ── */
function AnimatedCounter({ value, loading }: { value: number | null; loading: boolean }) {
  const [display, setDisplay] = useState(0);
  const ref = useRef<ReturnType<typeof setInterval> | null>(null);
  useEffect(() => {
    if (value === null || loading) return;
    const steps = 30;
    const inc = value / steps;
    let step = 0;
    if (ref.current) clearInterval(ref.current);
    ref.current = setInterval(() => {
      step++;
      setDisplay(Math.min(Math.round(inc * step), value));
      if (step >= steps) { setDisplay(value); if (ref.current) clearInterval(ref.current); }
    }, 1000 / steps);
    return () => { if (ref.current) clearInterval(ref.current); };
  }, [value, loading]);
  if (loading) return <div className="skeleton" style={{ height: 36, width: 60, borderRadius: 8, display: 'inline-block' }} />;
  if (value === null) return <span style={{ fontSize: 32, fontWeight: 800, color: '#52525B' }}>—</span>;
  return <span style={{ fontSize: 32, fontWeight: 800, color: '#F4F4F5', letterSpacing: '-0.04em', fontFamily: "'JetBrains Mono', monospace" }}>{display.toLocaleString()}</span>;
}

/* ── Ember Particle System ── */
function EmberParticles() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;
    let animId: number;
    const particles: { x: number; y: number; vx: number; vy: number; size: number; life: number; maxLife: number; hue: number }[] = [];
    const resize = () => { canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; };
    resize();
    window.addEventListener('resize', resize);
    const spawn = () => {
      if (particles.length > 35) return;
      particles.push({
        x: Math.random() * canvas.width,
        y: canvas.height + 10,
        vx: (Math.random() - 0.5) * 0.5,
        vy: -(0.3 + Math.random() * 0.8),
        size: 1 + Math.random() * 2.5,
        life: 0,
        maxLife: 120 + Math.random() * 80,
        hue: 20 + Math.random() * 20,
      });
    };
    const draw = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      for (let i = particles.length - 1; i >= 0; i--) {
        const p = particles[i];
        p.x += p.vx;
        p.y += p.vy;
        p.vy -= 0.002;
        p.life++;
        const progress = p.life / p.maxLife;
        const alpha = progress < 0.1 ? progress * 10 : progress > 0.7 ? (1 - progress) / 0.3 : 1;
        const size = p.size * (1 - progress * 0.5);
        ctx.beginPath();
        ctx.arc(p.x, p.y, size, 0, Math.PI * 2);
        ctx.fillStyle = `hsla(${p.hue}, 90%, 55%, ${alpha * 0.6})`;
        ctx.fill();
        ctx.beginPath();
        ctx.arc(p.x, p.y, size * 2, 0, Math.PI * 2);
        ctx.fillStyle = `hsla(${p.hue}, 90%, 55%, ${alpha * 0.1})`;
        ctx.fill();
        if (p.life >= p.maxLife) particles.splice(i, 1);
      }
      if (Math.random() < 0.15) spawn();
      animId = requestAnimationFrame(draw);
    };
    for (let i = 0; i < 12; i++) spawn();
    draw();
    return () => { cancelAnimationFrame(animId); window.removeEventListener('resize', resize); };
  }, []);
  return <canvas ref={canvasRef} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', zIndex: 0 }} />;
}

/* ── Soul Preview Widget ── */
function SoulPreview({ onNavigate }: { onNavigate: (s: string) => void }) {
  const [soul, setSoul] = useState<ReturnType<typeof getSoulSummary> | null>(null);
  useEffect(() => { setSoul(getSoulSummary()); }, []);
  if (!soul) return null;
  return (
    <div
      className="vf-card-glow"
      style={{ marginBottom: 48, padding: '24px', cursor: 'pointer' }}
      onClick={() => onNavigate('chat')}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16 }}>
        <div className="breathe" style={{
          width: 44, height: 44, borderRadius: '50%', flexShrink: 0,
          background: 'linear-gradient(135deg, rgba(249,115,22,0.2), rgba(167,139,250,0.15))',
          border: '1.5px solid rgba(249,115,22,0.25)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width={22} height={22} viewBox="0 0 32 32" fill="none">
            <path d="M16 4c-3 3.5-6 8-6 12 0 3.31 2.69 6 6 6s6-2.69 6-6c0-4-3-8.5-6-12z" fill="#F97316" opacity="0.9"/>
            <path d="M16 10c-1.5 2-3 4.5-3 6.5 0 1.66 1.34 3 3 3s3-1.34 3-3c0-2-1.5-4.5-3-6.5z" fill="#FB923C"/>
          </svg>
        </div>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <h3 style={{ fontSize: 15, fontWeight: 700, color: '#F4F4F5' }}>{soul.name}&apos;s Soul</h3>
            {soul.attestedOnChain && (
              <span style={{
                fontSize: 9, color: '#22C55E', fontWeight: 700,
                backgroundColor: 'rgba(34,197,94,0.1)', border: '1px solid rgba(34,197,94,0.2)',
                borderRadius: 4, padding: '2px 6px', textTransform: 'uppercase',
              }}>Attested</span>
            )}
          </div>
          <p style={{ fontSize: 11, color: '#71717A', fontStyle: 'italic', marginTop: 2 }}>
            &ldquo;{soul.motto}&rdquo;
          </p>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
        {[
          { label: 'Values', value: soul.valueCount, color: '#F97316' },
          { label: 'Traits', value: soul.traitCount, color: '#A78BFA' },
          { label: 'Boundaries', value: soul.boundaryCount, color: '#22C55E' },
          { label: 'Age', value: soul.age, color: '#38BDF8' },
        ].map(item => (
          <div key={item.label} style={{
            padding: '10px 8px', borderRadius: 10, textAlign: 'center',
            backgroundColor: `${item.color}08`, border: `1px solid ${item.color}15`,
          }}>
            <p style={{ fontSize: 16, fontWeight: 800, color: item.color, fontFamily: "'JetBrains Mono', monospace" }}>
              {item.value}
            </p>
            <p style={{ fontSize: 9, color: '#71717A', fontWeight: 600, textTransform: 'uppercase', marginTop: 2 }}>
              {item.label}
            </p>
          </div>
        ))}
      </div>
      <p style={{ fontSize: 11, color: '#52525B', textAlign: 'center', marginTop: 12 }}>
        Open Companion to explore the full soul viewer →
      </p>
    </div>
  );
}

/* ── Protocol Facts (real data only) ── */
function ProtocolFacts() {
  const [brain, setBrain] = useState<ReturnType<typeof getBrainStats> | null>(null);
  useEffect(() => { setBrain(getBrainStats()); }, []);
  const totalContracts = BASE_CONTRACTS.length + AVALANCHE_CONTRACTS.length + ETHEREUM_CONTRACTS.length;
  return (
    <div style={{ marginBottom: 48 }}>
      <h2 style={{ fontSize: 11, fontWeight: 600, color: '#71717A', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 14 }}>
        Protocol Facts
      </h2>
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8,
        padding: '20px',
        background: 'rgba(255,255,255,0.02)',
        border: '1px solid rgba(255,255,255,0.06)',
        borderRadius: 16,
      }}>
        {[
          { label: 'Deployed Contracts', value: totalContracts.toString(), color: '#22C55E', desc: 'On-chain verified' },
          { label: 'Knowledge Base', value: brain ? `${brain.knowledgeEntries}+` : '...', color: '#F97316', desc: 'Built-in entries' },
          { label: 'Active Chains', value: '3', color: '#38BDF8', desc: 'ETH · Base · AVAX' },
          { label: 'Privacy Model', value: 'Local', color: '#A78BFA', desc: 'No KYC · No tracking' },
        ].map(item => (
          <div key={item.label} style={{
            padding: '10px 12px', borderRadius: 10,
            backgroundColor: `${item.color}06`, border: `1px solid ${item.color}12`,
          }}>
            <p style={{ fontSize: 18, fontWeight: 800, color: item.color, fontFamily: "'JetBrains Mono', monospace", letterSpacing: '-0.02em' }}>
              {item.value}
            </p>
            <p style={{ fontSize: 10, color: '#A1A1AA', fontWeight: 600, marginTop: 1 }}>{item.label}</p>
            <p style={{ fontSize: 9, color: '#52525B', marginTop: 1 }}>{item.desc}</p>
          </div>
        ))}
      </div>
      <p style={{ fontSize: 10, color: '#27272A', marginTop: 8, textAlign: 'center', fontStyle: 'italic' }}>
        All numbers are real — verified on-chain or from local storage. No simulated metrics.
      </p>
    </div>
  );
}

/* ═══════════════════════════════════════════════════════
   MAIN HOME COMPONENT
   ═══════════════════════════════════════════════════════ */
export default function Home() {
  const [chains, setChains] = useState<ChainStatus[]>([
    { name: 'Ethereum', chainId: 1, color: '#627EEA', result: null, loading: true },
    { name: 'Base', chainId: 8453, color: '#0052FF', result: null, loading: true },
    { name: 'Avalanche', chainId: 43114, color: '#E84142', result: null, loading: true },
  ]);
  const [isMobile, setIsMobile] = useState(false);
  const [registered, setRegistered] = useState(false);
  const [registrationAddress, setRegistrationAddress] = useState<string | null>(null);
  const [regChains, setRegChains] = useState<SupportedChain[]>([]);
  const [agentCounts, setAgentCounts] = useState<{ base: number | null; avalanche: number | null; ethereum: number | null }>({ base: null, avalanche: null, ethereum: null });
  const [agentCountLoading, setAgentCountLoading] = useState(true);
  const { isUnlocked, address } = useWalletAuth();

  useEffect(() => {
    const check = () => setIsMobile(window.innerWidth < 768);
    check();
    window.addEventListener('resize', check);
    return () => window.removeEventListener('resize', check);
  }, []);

  useEffect(() => {
    const reg = isRegistered();
    setRegistered(reg);
    if (reg) {
      const data = getRegistration();
      setRegistrationAddress(data?.walletAddress || null);
      setRegChains(getRegisteredChains());
    }
    checkAllChains().then((results) => {
      setChains([
        { name: 'Ethereum', chainId: 1, color: '#627EEA', result: results.ethereum, loading: false },
        { name: 'Base', chainId: 8453, color: '#0052FF', result: results.base, loading: false },
        { name: 'Avalanche', chainId: 43114, color: '#E84142', result: results.avalanche, loading: false },
      ]);
    });
    setAgentCountLoading(true);
    Promise.all([
      getAgentCount('base'),
      getAgentCount('avalanche'),
      getAgentCount('ethereum'),
    ]).then(([baseCount, avaxCount, ethCount]) => {
      setAgentCounts({ base: baseCount, avalanche: avaxCount, ethereum: ethCount });
      setAgentCountLoading(false);
    }).catch(() => setAgentCountLoading(false));
  }, []);

  const navigateToSection = useCallback((section: string) => {
    const win = window as unknown as { __setSection?: (s: string) => void };
    if (win.__setSection) win.__setSection(section);
  }, []);

  // Navigate to /demo page
  const goToDemo = useCallback(() => {
    window.location.href = '/demo';
  }, []);

  const totalContracts = BASE_CONTRACTS.length + AVALANCHE_CONTRACTS.length + ETHEREUM_CONTRACTS.length;
  const allConnected = chains.every(c => !c.loading && c.result?.success);
  const anyLoading = chains.some(c => c.loading);
  const totalAgents = (agentCounts.base ?? 0) + (agentCounts.avalanche ?? 0) + (agentCounts.ethereum ?? 0);

  const px = isMobile ? 20 : 32;

  // Suppress unused variable warnings for regChains and totalContracts used below the fold
  void regChains;
  void totalContracts;

  return (
    <div className="page-enter" style={{ padding: `${isMobile ? 32 : 48}px ${px}px 64px`, maxWidth: 640, margin: '0 auto' }}>

      <AlphaBanner />

      {/* ══════════════════════════════════════════════
          HERO — one message, one action, 5 seconds
          ══════════════════════════════════════════════ */}
      <div style={{ marginBottom: 64, textAlign: 'center', position: 'relative', minHeight: 260 }}>
        <EmberParticles />
        <div style={{ position: 'relative', zIndex: 1 }}>

          {/* Alpha badge — prominent */}
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '4px 12px', borderRadius: 20,
            backgroundColor: 'rgba(234,179,8,0.10)',
            border: '1px solid rgba(234,179,8,0.30)',
            marginBottom: 28,
          }}>
            <svg width={11} height={11} viewBox="0 0 24 24" fill="none" stroke="#EAB308" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
              <line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>
            </svg>
            <span style={{ fontSize: 10, color: '#EAB308', fontWeight: 700, letterSpacing: '0.06em' }}>ALPHA — NOT AUDITED</span>
          </div>

          {/* Headline */}
          <h1 style={{
            fontSize: isMobile ? 38 : 56, fontWeight: 800, color: '#F4F4F5',
            letterSpacing: '-0.04em', lineHeight: 1.05, marginBottom: 20,
          }}>
            Can you trust<br />this AI?
          </h1>

          {/* Subheadline */}
          <p style={{
            fontSize: isMobile ? 16 : 18, color: '#A1A1AA', lineHeight: 1.65,
            maxWidth: 420, margin: '0 auto 32px',
            fontWeight: 400,
          }}>
            Vaultfire answers that question.<br />
            <span style={{ color: '#F4F4F5', fontWeight: 600 }}>On-chain. Verifiable. Private.</span>
          </p>

          {/* Single CTA */}
          <button
            onClick={goToDemo}
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '15px 36px', borderRadius: 14,
              background: 'linear-gradient(135deg, #F97316, #EA580C)',
              border: 'none', cursor: 'pointer',
              color: '#FFF', fontSize: 16, fontWeight: 700,
              transition: 'all 0.2s ease',
              boxShadow: '0 4px 24px rgba(249,115,22,0.30)',
              letterSpacing: '-0.01em',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 8px 32px rgba(249,115,22,0.40)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 4px 24px rgba(249,115,22,0.30)'; }}
          >
            Try it free
            <svg width={16} height={16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>
            </svg>
          </button>

          {/* Connected wallet pill (if applicable) */}
          {isUnlocked && address ? (
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '8px 16px', borderRadius: 20, marginTop: 20, marginLeft: 12,
              backgroundColor: 'rgba(34,197,94,0.06)',
              border: '1px solid rgba(34,197,94,0.15)',
            }}>
              <div className="breathe" style={{ width: 6, height: 6, borderRadius: '50%', backgroundColor: '#22C55E', boxShadow: '0 0 6px rgba(34,197,94,0.5)' }} />
              <span style={{ fontSize: 12, color: '#22C55E', fontWeight: 600 }}>Connected</span>
              <span style={{ fontSize: 11, color: '#71717A', fontFamily: "'JetBrains Mono', monospace" }}>
                {address.slice(0, 6)}...{address.slice(-4)}
              </span>
            </div>
          ) : registered && registrationAddress ? (
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '8px 16px', borderRadius: 20, marginTop: 20, marginLeft: 12,
              backgroundColor: 'rgba(34,197,94,0.06)',
              border: '1px solid rgba(34,197,94,0.15)',
            }}>
              <div className="breathe" style={{ width: 6, height: 6, borderRadius: '50%', backgroundColor: '#22C55E', boxShadow: '0 0 6px rgba(34,197,94,0.5)' }} />
              <span style={{ fontSize: 12, color: '#22C55E', fontWeight: 600 }}>Registered</span>
              <span style={{ fontSize: 11, color: '#71717A', fontFamily: "'JetBrains Mono', monospace" }}>
                {registrationAddress.slice(0, 6)}...{registrationAddress.slice(-4)}
              </span>
            </div>
          ) : null}
        </div>
      </div>

      {/* ══════════════════════════════════════════════
          THREE SIMPLE CARDS — above the fold depth
          ══════════════════════════════════════════════ */}
      <div style={{ marginBottom: 56 }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 14 }}>
          {[
            {
              icon: (
                <svg width={22} height={22} viewBox="0 0 24 24" fill="none" stroke="#A78BFA" strokeWidth="1.7">
                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                  <circle cx="12" cy="7" r="4"/>
                </svg>
              ),
              title: 'Verified Identity',
              desc: 'Every AI agent gets a cryptographic on-chain identity — not a username, a proof.',
              color: '#A78BFA',
            },
            {
              icon: (
                <svg width={22} height={22} viewBox="0 0 24 24" fill="none" stroke="#F97316" strokeWidth="1.7">
                  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                  <path d="M9 12l2 2 4-4"/>
                </svg>
              ),
              title: 'Accountability Bond',
              desc: 'Agents put real stake on the line. Violations are recorded permanently on-chain.',
              color: '#F97316',
            },
            {
              icon: (
                <svg width={22} height={22} viewBox="0 0 24 24" fill="none" stroke="#22C55E" strokeWidth="1.7">
                  <circle cx="12" cy="12" r="10"/>
                  <path d="M12 8v4l3 3"/>
                </svg>
              ),
              title: 'Trust Score',
              desc: 'A live 0–100 score that reflects an agent\'s verified track record — not self-reported.',
              color: '#22C55E',
            },
          ].map((card) => (
            <div
              key={card.title}
              style={{
                padding: '24px 20px',
                borderRadius: 18,
                backgroundColor: `${card.color}06`,
                border: `1px solid ${card.color}18`,
                display: 'flex', flexDirection: 'column', gap: 12,
                transition: 'border-color 0.2s ease',
              }}
              onMouseEnter={(e) => { (e.currentTarget as HTMLDivElement).style.borderColor = `${card.color}35`; }}
              onMouseLeave={(e) => { (e.currentTarget as HTMLDivElement).style.borderColor = `${card.color}18`; }}
            >
              <div style={{ color: card.color }}>{card.icon}</div>
              <div>
                <p style={{ fontSize: 14, fontWeight: 700, color: '#F4F4F5', marginBottom: 6 }}>{card.title}</p>
                <p style={{ fontSize: 12, color: '#71717A', lineHeight: 1.65 }}>{card.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* ══════════════════════════════════════════════
          KYA ONE-LINER
          ══════════════════════════════════════════════ */}
      <div style={{
        marginBottom: 56,
        padding: '20px 24px',
        borderRadius: 14,
        backgroundColor: 'rgba(249,115,22,0.04)',
        border: '1px solid rgba(249,115,22,0.12)',
        textAlign: 'center',
      }}>
        <p style={{ fontSize: isMobile ? 14 : 15, color: '#A1A1AA', lineHeight: 1.7, margin: 0 }}>
          <span style={{ color: '#F97316', fontWeight: 700 }}>KYA — Know Your Agent.</span>{' '}
          The trust standard for the AI age.
        </p>
      </div>

      {/* ══════════════════════════════════════════════
          QUANTUM ONE-LINER
          ══════════════════════════════════════════════ */}
      <div style={{
        marginBottom: 56,
        padding: '16px 24px',
        borderRadius: 14,
        backgroundColor: 'rgba(245,158,11,0.04)',
        border: '1px solid rgba(245,158,11,0.12)',
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <svg width={18} height={18} viewBox="0 0 24 24" fill="none" stroke="#F59E0B" strokeWidth="1.7" style={{ flexShrink: 0 }}>
          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
          <circle cx="12" cy="12" r="4" fill="none" stroke="#F59E0B" strokeWidth="1.5"/>
          <circle cx="12" cy="12" r="1.5" fill="#F59E0B"/>
        </svg>
        <p style={{ fontSize: 13, color: '#A1A1AA', lineHeight: 1.6, margin: 0 }}>
          <span style={{ color: '#F59E0B', fontWeight: 600 }}>Built with quantum-resistant cryptography.</span>{' '}
          DilithiumAttestor uses CRYSTALS-Dilithium (NIST-approved) — live on-chain today.
        </p>
      </div>

      {/* ══════════════════════════════════════════════
          DEVELOPER SECTION
          ══════════════════════════════════════════════ */}
      <div style={{
        marginBottom: 56,
        padding: '28px 24px',
        borderRadius: 18,
        background: 'linear-gradient(135deg, rgba(167,139,250,0.05) 0%, rgba(249,115,22,0.03) 100%)',
        border: '1px solid rgba(167,139,250,0.14)',
        position: 'relative', overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, height: 1,
          background: 'linear-gradient(90deg, transparent, rgba(167,139,250,0.3), transparent)',
        }} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
          <svg width={16} height={16} viewBox="0 0 24 24" fill="none" stroke="#A78BFA" strokeWidth="1.8">
            <polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>
          </svg>
          <span style={{ fontSize: 11, fontWeight: 700, color: '#A78BFA', textTransform: 'uppercase', letterSpacing: '0.08em' }}>For Developers</span>
        </div>
        <h2 style={{ fontSize: isMobile ? 18 : 22, fontWeight: 800, color: '#F4F4F5', letterSpacing: '-0.02em', marginBottom: 8 }}>
          Add trust to your AI in 3 minutes
        </h2>
        <p style={{ fontSize: 13, color: '#71717A', lineHeight: 1.65, marginBottom: 20 }}>
          Register any AI agent on-chain, attach an accountability bond, and expose a live trust score — all via a single SDK.
        </p>
        <div style={{
          backgroundColor: 'rgba(0,0,0,0.4)',
          border: '1px solid rgba(167,139,250,0.15)',
          borderRadius: 10,
          padding: '14px 18px',
          marginBottom: 20,
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 13,
          color: '#A78BFA',
          letterSpacing: '0.01em',
        }}>
          npm install @vaultfire/sdk
        </div>
        <button
          onClick={() => navigateToSection('sdk')}
          style={{
            padding: '10px 22px', borderRadius: 10,
            background: 'transparent',
            border: '1px solid rgba(167,139,250,0.25)',
            cursor: 'pointer',
            color: '#A78BFA', fontSize: 13, fontWeight: 600,
            transition: 'all 0.2s ease',
          }}
          onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'rgba(167,139,250,0.5)'; e.currentTarget.style.transform = 'translateY(-1px)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(167,139,250,0.25)'; e.currentTarget.style.transform = 'translateY(0)'; }}
        >
          View SDK docs →
        </button>
      </div>

      {/* ══════════════════════════════════════════════
          BELOW THE FOLD — KYA Pillars (depth for scrollers)
          ══════════════════════════════════════════════ */}
      <div style={{ marginBottom: 48 }}>
        <h2 style={{ fontSize: 11, fontWeight: 600, color: '#71717A', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 16, textAlign: 'center' }}>
          The KYA Standard
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 12 }}>
          {[
            {
              icon: <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="#F97316" strokeWidth="1.7"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg>,
              title: 'AI Accountability Bonds',
              desc: 'Agents put stake on the line. Violations are recorded on-chain. Accountability is provable, not promised.',
              color: '#F97316',
              section: 'agent-bonds',
            },
            {
              icon: <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="#A78BFA" strokeWidth="1.7"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>,
              title: 'AI Partnership Bonds',
              desc: 'Verified on-chain relationships between humans and AI agents. Not a terms of service. A bond.',
              color: '#A78BFA',
              section: 'agent-bonds',
            },
            {
              icon: <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="#22C55E" strokeWidth="1.7"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/><circle cx="12" cy="16" r="1" fill="#22C55E"/></svg>,
              title: 'ERC-8004 Identity',
              desc: 'Every agent gets a verifiable on-chain identity. Not a username — a cryptographic proof.',
              color: '#22C55E',
              section: 'agent-registry',
            },
            {
              icon: <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="#8B5CF6" strokeWidth="1.7"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><circle cx="12" cy="12" r="3" fill="none" stroke="#8B5CF6" strokeWidth="1.5"/><path d="M12 9v1m0 4v1" strokeLinecap="round"/></svg>,
              title: 'ZK Privacy',
              desc: 'Verify trust without surveillance. Zero-knowledge proofs let you Know Your Agent without exposing private data.',
              color: '#8B5CF6',
              section: 'agent-api',
              badge: '[Alpha] ZK proof generation in active development',
            },
            {
              icon: <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="#F59E0B" strokeWidth="1.7"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><circle cx="12" cy="12" r="4" fill="none" stroke="#F59E0B" strokeWidth="1.5"/><circle cx="12" cy="12" r="1.5" fill="#F59E0B"/><path d="M12 4v2M12 18v2M4 12h2M18 12h2" strokeLinecap="round"/></svg>,
              title: 'Quantum Ready',
              desc: 'DilithiumAttestor is live — NIST-approved post-quantum signatures (CRYSTALS-Dilithium) protecting attestations today.',
              color: '#F59E0B',
              section: 'agent-api',
              badge: '[Partial] DilithiumAttestor live, full protocol hardening on roadmap',
            },
          ].map((pillar) => (
            <button
              key={pillar.title}
              onClick={() => navigateToSection(pillar.section)}
              style={{
                padding: '20px 18px', borderRadius: 16, cursor: 'pointer',
                textAlign: 'left', border: `1px solid ${pillar.color}20`,
                backgroundColor: `${pillar.color}06`,
                transition: 'all 0.2s ease', display: 'flex', flexDirection: 'column', gap: 10,
              }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = `${pillar.color}40`; e.currentTarget.style.transform = 'translateY(-2px)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = `${pillar.color}20`; e.currentTarget.style.transform = 'translateY(0)'; }}
            >
              <div style={{ color: pillar.color }}>{pillar.icon}</div>
              <div>
                <p style={{ fontSize: 13, fontWeight: 700, color: '#F4F4F5', marginBottom: 6 }}>{pillar.title}</p>
                <p style={{ fontSize: 11, color: '#71717A', lineHeight: 1.6 }}>{pillar.desc}</p>
                {'badge' in pillar && pillar.badge && (
                  <p style={{ fontSize: 9, color: '#8B5CF6', marginTop: 6, fontWeight: 600, letterSpacing: '0.04em' }}>{pillar.badge}</p>
                )}
              </div>
            </button>
          ))}
        </div>
      </div>

      {/* ── Protocol Stack ── */}
      <div style={{ marginBottom: 48 }}>
        <h2 style={{ fontSize: 11, fontWeight: 600, color: '#71717A', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 14 }}>
          Protocol Stack
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
          {[
            { label: 'XMTP', sub: 'Messaging', color: '#8B5CF6', icon: (
              <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
            )},
            { label: 'EMBRIS', sub: 'Unified Layer', color: '#F97316', icon: (
              <svg width={20} height={20} viewBox="0 0 32 32" fill="none"><path d="M16 4c-3 3.5-6 8-6 12 0 3.31 2.69 6 6 6s6-2.69 6-6c0-4-3-8.5-6-12z" fill="#F97316" opacity="0.9"/></svg>
            )},
            { label: 'x402', sub: 'Payments', color: '#00D9FF', icon: (
              <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8}><path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"/><path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/><path d="M18 12a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/></svg>
            )},
          ].map((item, idx) => (
            <div key={item.label} className={`vf-card subtle-float stagger-${idx + 1}`} style={{
              padding: '20px 12px',
              backgroundColor: `${item.color}08`,
              border: `1px solid ${item.color}20`,
              borderRadius: 16,
              textAlign: 'center',
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
              animationDelay: `${idx * 0.1}s`,
            }}>
              <div style={{ color: item.color }}>{item.icon}</div>
              <div>
                <p style={{ fontSize: 13, fontWeight: 800, color: '#F4F4F5', letterSpacing: '-0.01em' }}>{item.label}</p>
                <p style={{ fontSize: 10, color: item.color, fontWeight: 600, marginTop: 2 }}>{item.sub}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* ── Protocol Facts ── */}
      <ProtocolFacts />

      {/* ── Soul Preview ── */}
      <SoulPreview onNavigate={navigateToSection} />

      {/* ── Live Registry ── */}
      <div style={{ marginBottom: 48 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
          <h2 style={{ fontSize: 11, fontWeight: 600, color: '#71717A', textTransform: 'uppercase', letterSpacing: '0.1em' }}>Live Registry</h2>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <div className="breathe" style={{ width: 6, height: 6, borderRadius: '50%', backgroundColor: '#22C55E', boxShadow: '0 0 6px rgba(34,197,94,0.5)' }} />
            <span style={{ fontSize: 11, color: '#52525B' }}>On-chain · ERC-8004</span>
          </div>
        </div>
        <div className="ember-glow" style={{
          padding: '28px 24px',
          backgroundColor: 'rgba(249,115,22,0.04)',
          border: '1px solid rgba(249,115,22,0.12)',
          borderRadius: 16,
          marginBottom: 10,
          textAlign: 'center',
        }}>
          <p style={{ fontSize: 11, color: '#71717A', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 10 }}>Total Registered Agents</p>
          <AnimatedCounter value={agentCountLoading ? null : totalAgents} loading={agentCountLoading} />
          <p style={{ fontSize: 12, color: '#52525B', marginTop: 8 }}>Across Ethereum + Base + Avalanche</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
          {[
            { label: 'Ethereum', color: '#627EEA', count: agentCounts.ethereum, chainId: 1 },
            { label: 'Base', color: '#0052FF', count: agentCounts.base, chainId: 8453 },
            { label: 'Avalanche', color: '#E84142', count: agentCounts.avalanche, chainId: 43114 },
          ].map(chain => (
            <div key={chain.label} className="vf-card" style={{
              padding: '16px 12px',
              backgroundColor: `${chain.color}06`,
              border: `1px solid ${chain.color}15`,
              borderRadius: 14,
              textAlign: 'center',
            }}>
              <div className="breathe" style={{ width: 8, height: 8, borderRadius: '50%', backgroundColor: chain.color, margin: '0 auto 10px' }} />
              <p style={{ fontSize: 10, color: '#71717A', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6 }}>{chain.label}</p>
              {agentCountLoading ? (
                <div className="skeleton" style={{ height: 24, width: 40, borderRadius: 6, margin: '0 auto' }} />
              ) : (
                <p style={{ fontSize: 22, fontWeight: 800, color: '#F4F4F5', fontFamily: "'JetBrains Mono', monospace", letterSpacing: '-0.03em' }}>
                  {(chain.count ?? 0).toLocaleString()}
                </p>
              )}
            </div>
          ))}
        </div>
      </div>

      {/* ── Network Status ── */}
      <div style={{ marginBottom: 48 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
          <h2 style={{ fontSize: 11, fontWeight: 600, color: '#71717A', textTransform: 'uppercase', letterSpacing: '0.1em' }}>Network Status</h2>
          <span style={{
            fontSize: 11, fontWeight: 500,
            color: anyLoading ? '#71717A' : allConnected ? '#22C55E' : '#EF4444',
          }}>
            {anyLoading ? 'Checking...' : allConnected ? 'All systems operational' : 'Degraded'}
          </span>
        </div>
        <div className="vf-card" style={{ borderRadius: 14, overflow: 'hidden', padding: 0 }}>
          {chains.map((chain, i) => (
            <div key={chain.name} style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              padding: '14px 18px',
              borderBottom: i < chains.length - 1 ? '1px solid rgba(255,255,255,0.04)' : 'none',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div className={!chain.loading && chain.result?.success ? 'breathe' : ''} style={{
                  width: 8, height: 8, borderRadius: '50%',
                  backgroundColor: chain.loading ? '#52525B' : chain.result?.success ? '#22C55E' : '#EF4444',
                  boxShadow: !chain.loading && chain.result?.success ? '0 0 8px rgba(34,197,94,0.4)' : 'none',
                }} />
                <span style={{ fontSize: 14, fontWeight: 600, color: '#F4F4F5' }}>{chain.name}</span>
                <span style={{ fontSize: 11, color: '#52525B', fontFamily: "'JetBrains Mono', monospace" }}>
                  {chain.chainId}
                </span>
              </div>
              <div style={{ textAlign: 'right' }}>
                {chain.loading && <span style={{ fontSize: 12, color: '#52525B' }}>connecting...</span>}
                {!chain.loading && chain.result?.success && (
                  <span style={{ fontSize: 12, color: '#22C55E', fontWeight: 600 }}>Online</span>
                )}
                {!chain.loading && !chain.result?.success && (
                  <span style={{ fontSize: 12, color: '#EF4444' }}>Offline</span>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* ── Contract Registry Links ── */}
      <div style={{ marginBottom: 48 }}>
        <h2 style={{ fontSize: 11, fontWeight: 600, color: '#71717A', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 14 }}>
          Smart Contracts
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {[
            { label: 'ERC-8004 Registry · Ethereum', href: 'https://etherscan.io/address/0x1A80F77e12f1bd04538027aed6d056f5DCcDCD3C', color: '#627EEA', count: ETHEREUM_CONTRACTS.length },
            { label: 'ERC-8004 Registry · Base', href: 'https://basescan.org/address/0x35978DB675576598F0781dA2133E94cdCf4858bC', color: '#0052FF', count: BASE_CONTRACTS.length },
            { label: 'ERC-8004 Registry · Avalanche', href: 'https://snowtrace.io/address/0x57741F4116925341d8f7Eb3F381d98e07C73B4a3', color: '#E84142', count: AVALANCHE_CONTRACTS.length },
          ].map(item => (
            <a key={item.label} href={item.href} target="_blank" rel="noopener noreferrer" className="vf-card" style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              padding: '14px 16px', borderRadius: 12,
              textDecoration: 'none',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ width: 8, height: 8, borderRadius: '50%', backgroundColor: item.color, flexShrink: 0 }} />
                <span style={{ fontSize: 13, color: '#A1A1AA', fontWeight: 500 }}>{item.label}</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ fontSize: 11, color: item.color, fontWeight: 600 }}>{item.count} contracts</span>
                <svg width={12} height={12} viewBox="0 0 24 24" fill="none" stroke="#52525B" strokeWidth="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
              </div>
            </a>
          ))}
        </div>
      </div>

      {/* ── Mission Manifesto ── */}
      <div style={{
        marginBottom: 48,
        padding: '32px 24px',
        borderRadius: 20,
        background: 'linear-gradient(135deg, rgba(249,115,22,0.04) 0%, rgba(167,139,250,0.03) 50%, rgba(34,197,94,0.02) 100%)',
        border: '1px solid rgba(249,115,22,0.1)',
        textAlign: 'center',
        position: 'relative',
        overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, height: 1,
          background: 'linear-gradient(90deg, transparent, rgba(249,115,22,0.3), transparent)',
        }} />
        <p style={{
          fontSize: 10, fontWeight: 700, color: '#F97316', textTransform: 'uppercase',
          letterSpacing: '0.2em', marginBottom: 16,
        }}>The Vaultfire Oath</p>
        <h2 className="mission-text" style={{
          fontSize: 22, fontWeight: 800, lineHeight: 1.4,
          letterSpacing: '-0.02em', marginBottom: 16,
        }}>
          Morals over metrics.<br />
          Privacy over surveillance.<br />
          Freedom over control.
        </h2>
        <p style={{ fontSize: 13, color: '#71717A', lineHeight: 1.7, maxWidth: 440, margin: '0 auto' }}>
          We build technology where doing the right thing is the smart business move.
          Where human thriving is more profitable than extraction.
          Where AI serves people — not the other way around.
        </p>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 24, marginTop: 20, flexWrap: 'wrap' }}>
          {[
            { icon: '🛡', label: 'On-Chain Ethics' },
            { icon: '🔒', label: 'Anti-Surveillance' },
            { icon: '🤝', label: 'Accountability Bonds' },
          ].map(item => (
            <div key={item.label} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{ fontSize: 14 }}>{item.icon}</span>
              <span style={{ fontSize: 11, color: '#A1A1AA', fontWeight: 500 }}>{item.label}</span>
            </div>
          ))}
        </div>
      </div>

      {/* ── Footer Manifesto ── */}
      <div style={{
        textAlign: 'center', padding: '32px 0 16px',
        borderTop: '1px solid rgba(255,255,255,0.04)',
      }}>
        <p style={{ fontSize: 11, color: '#3F3F46', lineHeight: 1.8 }}>
          Built for people, not for profit.
        </p>
        <p style={{ fontSize: 10, color: '#27272A', marginTop: 4 }}>
          Vaultfire Protocol · Embris Companion · ERC-8004
        </p>
      </div>

    </div>
  );
}
