> ## Documentation Index
> Fetch the complete documentation index at: https://requestnetwork-update-banner.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Request Network Docs

> A protocol for requests, payments, and **100% automated reconciliation**. Requests add business context to payments, eliminating manual accounting with cryptographic certainty.

export const DemoContainer = ({children}) => {
  return <div className="bg-gray-50 dark:bg-gradient-to-b dark:from-[#001912] dark:to-[#00251a] rounded-xl border border-gray-200 dark:border-[#014d3d]">
      {children}
    </div>;
};

export const ComparisonTable = () => {
  const [isDark, setIsDark] = useState(false);
  useEffect(() => {
    const checkTheme = () => {
      setIsDark(document.documentElement.classList.contains('dark'));
    };
    checkTheme();
    const observer = new MutationObserver(checkTheme);
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class']
    });
    return () => observer.disconnect();
  }, []);
  const comparisonData = [{
    method: "Request Network",
    accuracy: 100,
    implementation: "Easy",
    linesOfCode: 10,
    userExperience: "Good",
    notes: "Built-in payment metadata",
    isHighlighted: true
  }, {
    method: "Transfers API Webhook",
    accuracy: 60,
    accuracyDisplay: "< 100%",
    implementation: "Hard",
    linesOfCode: 50,
    userExperience: "Compromised",
    notes: "Requires amount and currency matching"
  }, {
    method: "Blockchain Node RPC Polling",
    accuracy: 60,
    accuracyDisplay: "< 100%",
    implementation: "Very Hard",
    linesOfCode: 150,
    userExperience: "Compromised",
    notes: "Poor performance, requires polling"
  }, {
    method: "New wallet address per payment",
    accuracy: 100,
    implementation: "Very Hard",
    linesOfCode: 100,
    userExperience: "Poor",
    notes: "Requires gas, many addresses, often custodial"
  }];
  const CheckIcon = ({className = "h-4 w-4"}) => <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="20 6 9 17 4 12"></polyline>
    </svg>;
  const XIcon = ({className = "h-4 w-4"}) => <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="18" y1="6" x2="6" y2="18"></line>
      <line x1="6" y1="6" x2="18" y2="18"></line>
    </svg>;
  const AlertCircleIcon = ({className = "h-4 w-4"}) => <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10"></circle>
      <line x1="12" y1="8" x2="12" y2="12"></line>
      <line x1="12" y1="16" x2="12.01" y2="16"></line>
    </svg>;
  const Badge = ({children, className = ""}) => <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${className}`}>
      {children}
    </span>;
  const getUXIcon = ux => {
    switch (ux) {
      case "Good":
        return <CheckIcon className="h-4 w-4 text-green-600 dark:text-green-400" />;
      case "Compromised":
        return <AlertCircleIcon className="h-4 w-4 text-orange-600 dark:text-orange-300" />;
      case "Poor":
        return <XIcon className="h-4 w-4 text-red-600 dark:text-red-400" />;
      default:
        return null;
    }
  };
  const getUXColor = ux => {
    switch (ux) {
      case "Good":
        return {
          color: isDark ? "#4ade80" : "#15803d"
        };
      case "Compromised":
        return {
          color: isDark ? "#fb923c" : "#c2410c"
        };
      case "Poor":
        return {
          color: isDark ? "#f87171" : "#b91c1c"
        };
      default:
        return {
          color: isDark ? "#9ca3af" : "#4b5563"
        };
    }
  };
  const getImplementationIcon = difficulty => {
    switch (difficulty) {
      case "Easy":
        return <CheckIcon className="h-4 w-4 text-green-600 dark:text-green-400" />;
      case "Hard":
        return <AlertCircleIcon className="h-4 w-4 text-orange-600 dark:text-orange-300" />;
      case "Very Hard":
        return <XIcon className="h-4 w-4 text-red-600 dark:text-red-400" />;
      default:
        return null;
    }
  };
  const getImplementationColor = difficulty => {
    switch (difficulty) {
      case "Easy":
        return {
          color: isDark ? "#4ade80" : "#15803d"
        };
      case "Hard":
        return {
          color: isDark ? "#fb923c" : "#c2410c"
        };
      case "Very Hard":
        return {
          color: isDark ? "#f87171" : "#b91c1c"
        };
      default:
        return {
          color: isDark ? "#9ca3af" : "#4b5563"
        };
    }
  };
  const getLinesOfCodeIcon = linesOfCode => {
    if (linesOfCode <= 10) {
      return <CheckIcon className="h-4 w-4 text-green-600 dark:text-green-400" />;
    } else if (linesOfCode <= 50) {
      return <AlertCircleIcon className="h-4 w-4 text-orange-600 dark:text-orange-300" />;
    } else {
      return <XIcon className="h-4 w-4 text-red-600 dark:text-red-400" />;
    }
  };
  const getLinesOfCodeColor = linesOfCode => {
    if (linesOfCode <= 10) {
      return {
        color: isDark ? "#4ade80" : "#15803d"
      };
    } else if (linesOfCode <= 50) {
      return {
        color: isDark ? "#fb923c" : "#c2410c"
      };
    } else {
      return {
        color: isDark ? "#f87171" : "#b91c1c"
      };
    }
  };
  return <div className="w-full p-4 md:p-8">
      <div className="overflow-x-auto -mx-4 md:mx-0 px-4 md:px-0">
        <div className="min-w-[800px]">
          {}
          <div className="grid grid-cols-6 gap-3 mb-3 px-4">
            <div className="font-semibold text-xs md:text-sm text-gray-600 dark:text-gray-400">Method</div>
            <div className="font-semibold text-xs md:text-sm text-gray-600 dark:text-gray-400 text-center">
              Automated Reconciliation
            </div>
            <div className="font-semibold text-xs md:text-sm text-gray-600 dark:text-gray-400 text-center">Implementation</div>
            <div className="font-semibold text-xs md:text-sm text-gray-600 dark:text-gray-400 text-center">Lines of Code</div>
            <div className="font-semibold text-xs md:text-sm text-gray-600 dark:text-gray-400 text-center">User Experience</div>
            <div className="font-semibold text-xs md:text-sm text-gray-600 dark:text-gray-400">Notes</div>
          </div>

          {}
          <div className="space-y-2 pb-4">
            {comparisonData.map((row, index) => <div key={row.method} className={`grid grid-cols-6 gap-3 p-3 md:p-4 rounded-lg border-2 transition-all duration-200 ${row.isHighlighted ? "bg-green-50/50 dark:bg-green-900/40 border-green-300 dark:border-green-600 hover:bg-green-100/60 dark:hover:bg-green-900/50 hover:shadow-lg dark:hover:shadow-green-900/50 hover:border-green-400 dark:hover:border-green-500" : "bg-white dark:bg-[#001410]/50 border-gray-200 dark:border-gray-700/50 hover:bg-gray-50 dark:hover:bg-[#001410]/70 hover:shadow-lg dark:hover:shadow-gray-900/50 hover:border-gray-300 dark:hover:border-gray-600"}`}>
                {}
                <div className="flex items-center">
                  <span className={`font-semibold text-xs md:text-sm ${row.isHighlighted ? "text-green-700 dark:text-green-300" : "text-gray-900 dark:text-gray-100"}`}>
                    {row.method}
                  </span>
                </div>

                {}
                <div className="flex items-center justify-center">
                  <span className={`text-xl md:text-2xl font-bold ${row.accuracy === 100 ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400"}`}>
                    {row.accuracyDisplay || `${row.accuracy}%`}
                  </span>
                </div>

                {}
                <div className="flex items-center justify-center">
                  <div className="flex items-center gap-2">
                    {getImplementationIcon(row.implementation)}
                    <span className="text-xs md:text-sm font-medium" style={row.isHighlighted && row.implementation === "Easy" ? {
    color: isDark ? "#4ade80" : "#15803d"
  } : getImplementationColor(row.implementation)}>
                      {row.implementation}
                    </span>
                  </div>
                </div>

                {}
                <div className="flex items-center justify-center">
                  <div className="flex items-center gap-2">
                    {getLinesOfCodeIcon(row.linesOfCode)}
                    <span className="text-xs md:text-sm font-medium" style={row.isHighlighted && row.linesOfCode <= 10 ? {
    color: isDark ? "#4ade80" : "#15803d"
  } : getLinesOfCodeColor(row.linesOfCode)}>
                      ~{row.linesOfCode}
                    </span>
                  </div>
                </div>

                {}
                <div className="flex items-center justify-center">
                  <div className="flex items-center gap-2">
                    {getUXIcon(row.userExperience)}
                    <span className="text-xs md:text-sm font-medium" style={row.isHighlighted && row.userExperience === "Good" ? {
    color: isDark ? "#4ade80" : "#15803d"
  } : getUXColor(row.userExperience)}>
                      {row.userExperience}
                    </span>
                  </div>
                </div>

                {}
                <div className="flex items-center">
                  <span className="text-xs md:text-sm text-gray-600 dark:text-gray-400">{row.notes}</span>
                </div>
              </div>)}
          </div>
        </div>
      </div>

      {}
      <div className="mt-6 md:mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
          <div className="bg-red-50 dark:bg-red-950/30 border-2 border-red-200 dark:border-red-800 rounded-lg p-4 md:p-6 transition-all duration-300 hover:shadow-lg hover:scale-[1.02] cursor-default">
            <div className="flex items-start gap-3 mb-3">
              <XIcon className="h-5 w-5 md:h-6 md:w-6 text-red-600 dark:text-red-400 shrink-0 mt-0.5" />
              <div>
                <h3 className="font-bold text-sm md:text-base text-red-700 dark:text-red-300 mb-2">
                  Alternative Trade-offs
                </h3>
                <p className="text-xs md:text-sm text-red-600 dark:text-red-400">
                  Other methods sacrifice automated reconciliation (requiring manual review), burden users with poor UX, or require complex implementations.
                </p>
              </div>
            </div>
          </div>

          <div className="bg-green-50 dark:bg-green-950/30 border-2 border-green-200 dark:border-green-800 rounded-lg p-4 md:p-6 transition-all duration-300 hover:shadow-lg hover:scale-[1.02] cursor-default">
            <div className="flex items-start gap-3 mb-3">
              <CheckIcon className="h-5 w-5 md:h-6 md:w-6 text-green-600 dark:text-green-400 shrink-0 mt-0.5" />
              <div>
                <h3 className="font-bold text-sm md:text-base text-green-700 dark:text-green-300 mb-2">
                  Request Network Advantage
                </h3>
                <p className="text-xs md:text-sm text-green-600 dark:text-green-400">
                  The only solution that combines 100% automated reconciliation with easy implementation and great user
                  experience. Built-in payment metadata eliminates guesswork entirely.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>;
};

export const IntegratedDemo = () => {
  const CUSTOMER_DATA = [{
    name: "Johnson Corp"
  }, {
    name: "Martinez LLC"
  }, {
    name: "Chen Industries"
  }, {
    name: "Patel Enterprises"
  }, {
    name: "Kim Solutions"
  }];
  const CURRENCIES = ["USDC", "USDT", "DAI"];
  const generateHexString = length => {
    return Array.from({
      length
    }, () => Math.floor(Math.random() * 16).toString(16)).join('');
  };
  const generateAmount = () => {
    const amount = Math.floor(Math.random() * 900) + 100;
    const currency = CURRENCIES[Math.floor(Math.random() * CURRENCIES.length)];
    return {
      amount,
      currency
    };
  };
  const SendIcon = ({className = "h-4 w-4"}) => <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="22" y1="2" x2="11" y2="13"></line>
      <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
    </svg>;
  const ExternalLinkIcon = ({className = "h-3 w-3"}) => <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
      <polyline points="15 3 21 3 21 9"></polyline>
      <line x1="10" y1="14" x2="21" y2="3"></line>
    </svg>;
  const CheckIcon = ({className = "h-4 w-4"}) => <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="20 6 9 17 4 12"></polyline>
    </svg>;
  const XIcon = ({className = "h-4 w-4"}) => <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="18" y1="6" x2="6" y2="18"></line>
      <line x1="6" y1="6" x2="18" y2="18"></line>
    </svg>;
  const AlertCircleIcon = ({className = "h-4 w-4"}) => <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10"></circle>
      <line x1="12" y1="8" x2="12" y2="12"></line>
      <line x1="12" y1="16" x2="12.01" y2="16"></line>
    </svg>;
  const CheckCircle2Icon = ({className = "h-4 w-4"}) => <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
      <polyline points="22 4 12 14.01 9 11.01"></polyline>
    </svg>;
  const UserIcon = ({className = "h-4 w-4"}) => <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
      <circle cx="12" cy="7" r="4"></circle>
    </svg>;
  const WalletIcon = ({className = "h-4 w-4"}) => <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"></path>
      <path d="M3 5v14a2 2 0 0 0 2 2h16v-5"></path>
      <path d="M18 12a2 2 0 0 0 0 4h4v-4Z"></path>
    </svg>;
  const TxIcon = ({className = "h-3 w-3"}) => <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="16 18 22 12 16 6"></polyline>
      <polyline points="8 6 2 12 8 18"></polyline>
    </svg>;
  const CryptoIcon = ({currency, className = "w-4 h-4"}) => {
    const iconMap = {
      USDC: "/logo/icons/usdc.png",
      USDT: "/logo/icons/usdt.png",
      DAI: "/logo/icons/dai.png"
    };
    const iconSrc = iconMap[currency];
    if (!iconSrc) return null;
    return <img src={iconSrc} alt={`${currency} icon`} className={className} />;
  };
  const getCurrencyDisplay = (amount, currency) => {
    return <span className="flex items-center gap-1.5">
        <CryptoIcon currency={currency} className="w-4 h-4" />
        <span>
          {amount} {currency}
        </span>
      </span>;
  };
  const Badge = ({children, variant = "default", className = ""}) => {
    const variantClasses = {
      default: "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200",
      destructive: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
      secondary: "bg-gray-600 text-white dark:bg-gray-500 dark:text-white",
      success: "bg-green-600 text-white dark:bg-green-700 dark:text-white"
    };
    return <span className={`inline-flex items-center px-2.5 py-0.5 rounded text-xs font-medium ${variantClasses[variant]} ${className}`}>
        {children}
      </span>;
  };
  const Tooltip = ({children, content}) => {
    const [show, setShow] = React.useState(false);
    const [position, setPosition] = React.useState({
      top: 0,
      left: 0,
      placement: 'top'
    });
    const tooltipRef = React.useRef(null);
    const triggerRef = React.useRef(null);
    React.useEffect(() => {
      if (show && triggerRef.current) {
        const rect = triggerRef.current.getBoundingClientRect();
        const spaceAbove = rect.top;
        const spaceBelow = window.innerHeight - rect.bottom;
        const placement = spaceAbove < 100 && spaceBelow > spaceAbove ? 'bottom' : 'top';
        const left = rect.left + rect.width / 2;
        const top = placement === 'top' ? rect.top - 8 : rect.bottom + 8;
        setPosition({
          top,
          left,
          placement
        });
      }
    }, [show]);
    return <div className="relative inline-block">
        <div ref={triggerRef} onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>
          {children}
        </div>
        {show && <div ref={tooltipRef} className={`fixed transform -translate-x-1/2 px-3 py-2 bg-gray-500 dark:bg-gray-700 text-white text-xs rounded whitespace-nowrap z-[100] shadow-lg ${position.placement === 'top' ? '-translate-y-full' : ''}`} style={{
      top: `${position.top}px`,
      left: `${position.left}px`
    }}>
            {content}
            <div className={`absolute left-1/2 transform -translate-x-1/2 border-4 border-transparent ${position.placement === 'top' ? 'top-full border-t-gray-500 dark:border-t-gray-700' : 'bottom-full border-b-gray-500 dark:border-b-gray-700'}`} />
          </div>}
      </div>;
  };
  const Button = ({children, onClick, disabled, variant = "default", size = "md", className = "", pulse = false}) => {
    const variantClasses = {
      default: "bg-primary-600 hover:bg-primary-700 text-white",
      outline: "bg-transparent border-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800"
    };
    const sizeClasses = {
      md: "px-4 py-2 text-sm",
      lg: "px-6 py-3 text-base"
    };
    const pulseAnimation = variant === 'outline' ? 'animate-ring-pulse-outline' : 'animate-ring-pulse';
    return <button onClick={onClick} disabled={disabled} className={`inline-flex items-center justify-center rounded-md font-medium transition-all duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed ${variantClasses[variant]} ${sizeClasses[size]} ${pulse ? pulseAnimation : ''} ${className}`} style={{
      backgroundColor: variant === 'default' ? '#01B089' : undefined
    }}>
        {children}
        <style jsx>{`
          button:hover:not(:disabled) {
            opacity: 0.9;
          }
          button:focus {
            ring-color: #01B089;
          }
          @keyframes ringPulse {
            0%, 100% { 
              box-shadow: 0 0 0 0 rgba(1, 176, 137, 0.6); 
            }
            50% { 
              box-shadow: 0 0 0 12px rgba(1, 176, 137, 0); 
            }
          }
          @keyframes ringPulseOutline {
            0%, 100% { 
              box-shadow: 0 0 0 0 rgba(107, 114, 128, 0.4); 
            }
            50% { 
              box-shadow: 0 0 0 12px rgba(107, 114, 128, 0); 
            }
          }
          .animate-ring-pulse {
            animation: ringPulse 1.5s ease-out infinite;
          }
          .animate-ring-pulse-outline {
            animation: ringPulseOutline 1.5s ease-out infinite;
          }
        `}</style>
      </button>;
  };
  const rightCardRef = useRef(null);
  const leftCardRef = useRef(null);
  const leftScrollRef = useRef(null);
  const rightScrollRef = useRef(null);
  const demoContainerRef = useRef(null);
  const [leftPayments, setLeftPayments] = useState([]);
  const [rightRequests, setRightRequests] = useState([]);
  const [isProcessing, setIsProcessing] = useState(false);
  const [hasStarted, setHasStarted] = useState(false);
  const [showDialog, setShowDialog] = useState(true);
  const [hasSeenCollisionExplainer, setHasSeenCollisionExplainer] = useState(false);
  const [showCollisionExplainer, setShowCollisionExplainer] = useState(false);
  const [paymentCount, setPaymentCount] = useState(0);
  const [requestCount, setRequestCount] = useState(0);
  const [scrollOffset, setScrollOffset] = useState(0);
  const [isShaking, setIsShaking] = useState(false);
  const [hasPrePopulated, setHasPrePopulated] = useState(false);
  const [isAutoPlaying, setIsAutoPlaying] = useState(false);
  const [shouldScrollToTop, setShouldScrollToTop] = useState(0);
  useEffect(() => {
    if (shouldScrollToTop > 0 && leftScrollRef.current && rightScrollRef.current) {
      setTimeout(() => {
        if (leftScrollRef.current && rightScrollRef.current) {
          leftScrollRef.current.scrollTop = 0;
          rightScrollRef.current.scrollTop = 0;
        }
      }, 50);
    }
  }, [shouldScrollToTop]);
  useEffect(() => {
    const leftScroll = leftScrollRef.current;
    const rightScroll = rightScrollRef.current;
    if (!leftScroll || !rightScroll) return;
    const handleLeftScroll = () => {
      if (rightScroll) {
        rightScroll.scrollTop = leftScroll.scrollTop;
      }
    };
    const handleRightScroll = () => {
      if (leftScroll) {
        leftScroll.scrollTop = rightScroll.scrollTop;
      }
    };
    leftScroll.addEventListener("scroll", handleLeftScroll);
    rightScroll.addEventListener("scroll", handleRightScroll);
    return () => {
      leftScroll.removeEventListener("scroll", handleLeftScroll);
      rightScroll.removeEventListener("scroll", handleRightScroll);
    };
  }, []);
  useEffect(() => {
    const timer = setTimeout(() => {
      setLeftPayments(prev => prev.map(p => ({
        ...p,
        isNew: false
      })));
      setRightRequests(prev => prev.map(r => ({
        ...r,
        isNew: false
      })));
    }, 500);
    return () => clearTimeout(timer);
  }, [leftPayments.length, rightRequests.length]);
  const handleStartDemo = () => {
    setHasStarted(true);
    setShowDialog(false);
    if (!hasPrePopulated) {
      setHasPrePopulated(true);
      const collisionPair = [1, 2];
      const collisionAmountData = generateAmount();
      const collisionAmount = collisionAmountData.amount;
      const collisionCurrency = collisionAmountData.currency;
      const shuffledCustomers = [...CUSTOMER_DATA].sort(() => Math.random() - 0.5);
      const newRequests = [];
      const newPlaceholders = [];
      for (let i = 0; i < 3; i++) {
        const timestamp = new Date(Date.now() + i);
        const id = generateHexString(64);
        const isCollisionRequest = collisionPair.includes(i);
        let amount, currency;
        if (isCollisionRequest) {
          amount = collisionAmount;
          currency = collisionCurrency;
        } else {
          const uniqueAmount = generateAmount();
          amount = uniqueAmount.amount;
          currency = uniqueAmount.currency;
        }
        const newRequest = {
          id,
          amount,
          currency,
          customer: shuffledCustomers[i].name,
          customerAddress: `0x${generateHexString(40)}`,
          status: "awaiting_payment",
          timestamp,
          isNew: true
        };
        const placeholder = {
          id: `placeholder-${id}`,
          amount,
          currency,
          from: "",
          timestamp,
          status: "possibly_reconciled",
          requestId: id,
          txHash: "",
          isNew: true,
          isPlaceholder: true
        };
        newRequests.push(newRequest);
        newPlaceholders.push(placeholder);
      }
      setRightRequests(newRequests);
      setLeftPayments(newPlaceholders);
      setRequestCount(3);
      setIsAutoPlaying(true);
      setTimeout(() => {
        autoSimulatePayments(newRequests);
      }, 1500);
    }
  };
  const autoSimulatePayments = async requests => {
    for (let i = 0; i < requests.length; i++) {
      if (i > 0) {
        await new Promise(resolve => setTimeout(resolve, 1500));
      }
      await simulatePaymentForRequest(requests[i]);
    }
  };
  const simulatePaymentForRequest = async selectedRequest => {
    return new Promise(resolve => {
      const paymentAmount = selectedRequest.amount;
      const paymentCurrency = selectedRequest.currency;
      const randomAddress = selectedRequest.customerAddress;
      const txHash = `0x${generateHexString(64)}`;
      setLeftPayments(prev => {
        const matchingPayments = prev.filter(p => !p.isPlaceholder && p.amount === paymentAmount && p.currency === paymentCurrency);
        const hasCollision = matchingPayments.length > 0;
        const newPayment = {
          id: `payment-${Date.now()}`,
          amount: paymentAmount,
          currency: paymentCurrency,
          from: randomAddress,
          timestamp: new Date(),
          status: hasCollision ? "payment_collision" : "possibly_reconciled",
          requestId: selectedRequest.id,
          txHash,
          isNew: true
        };
        const placeholderIndex = prev.findIndex(p => p.isPlaceholder && p.requestId === selectedRequest.id);
        if (placeholderIndex !== -1) {
          const updated = [...prev];
          updated[placeholderIndex] = newPayment;
          if (hasCollision) {
            const collisionUpdated = updated.map(p => !p.isPlaceholder && p.amount === paymentAmount && p.currency === paymentCurrency ? {
              ...p,
              status: "payment_collision"
            } : p);
            setTimeout(() => {
              setIsShaking(true);
              setTimeout(() => setIsShaking(false), 500);
              if (!hasSeenCollisionExplainer) {
                setTimeout(() => {
                  setShowCollisionExplainer(true);
                  setHasSeenCollisionExplainer(true);
                  setIsAutoPlaying(false);
                }, 1500);
              }
            }, 100);
            return collisionUpdated;
          }
          return updated;
        }
        return [newPayment, ...prev];
      });
      setRightRequests(prev => prev.map(r => r.id === selectedRequest.id ? {
        ...r,
        status: "paid_reconciled",
        txHash,
        isNew: true
      } : r));
      setShouldScrollToTop(prev => prev + 1);
      setTimeout(() => {
        triggerConfetti();
        resolve();
      }, 100);
    });
  };
  const handleCreateRequest = () => {
    const randomCustomer = CUSTOMER_DATA[Math.floor(Math.random() * CUSTOMER_DATA.length)];
    let amount;
    let currency;
    setRequestCount(prev => {
      const newCount = prev + 1;
      if (newCount % 3 === 0 && rightRequests.length > 0) {
        const existingRequest = rightRequests[Math.floor(Math.random() * rightRequests.length)];
        amount = existingRequest.amount;
        currency = existingRequest.currency;
      } else {
        const generated = generateAmount();
        amount = generated.amount;
        currency = generated.currency;
      }
      const timestamp = new Date();
      const id = generateHexString(64);
      const newRequest = {
        id,
        amount,
        currency,
        customer: randomCustomer.name,
        customerAddress: `0x${generateHexString(40)}`,
        status: "awaiting_payment",
        timestamp,
        isNew: true
      };
      const placeholder = {
        id: `placeholder-${id}`,
        amount,
        currency,
        from: "",
        timestamp,
        status: "possibly_reconciled",
        requestId: id,
        txHash: "",
        isNew: true,
        isPlaceholder: true
      };
      setRightRequests(prev => [newRequest, ...prev]);
      setLeftPayments(prev => [placeholder, ...prev]);
      return newCount;
    });
    setShouldScrollToTop(prev => prev + 1);
  };
  const calculateLeftAccuracy = () => {
    const nonPlaceholderPayments = leftPayments.filter(p => !p.isPlaceholder);
    if (nonPlaceholderPayments.length === 0) return "N/A";
    const reconciledCount = nonPlaceholderPayments.filter(p => p.status === "possibly_reconciled").length;
    const percentage = Math.round(reconciledCount / nonPlaceholderPayments.length * 100);
    return `${percentage}%`;
  };
  const getLeftSideMatchCount = (amount, currency) => {
    return leftPayments.filter(p => !p.isPlaceholder && p.amount === amount && p.currency === currency).length;
  };
  const handleSimulatePayment = async () => {
    setIsProcessing(true);
    const awaitingRequests = rightRequests.filter(r => r.status === "awaiting_payment");
    if (awaitingRequests.length === 0) {
      setIsProcessing(false);
      return;
    }
    setPaymentCount(prev => prev + 1);
    const randomIndex = Math.floor(Math.random() * awaitingRequests.length);
    const selectedRequest = awaitingRequests[randomIndex];
    const paymentAmount = selectedRequest.amount;
    const paymentCurrency = selectedRequest.currency;
    const randomAddress = `0x${generateHexString(40)}`;
    const txHash = `0x${generateHexString(64)}`;
    const matchingPayments = leftPayments.filter(p => !p.isPlaceholder && p.amount === paymentAmount && p.currency === paymentCurrency);
    const hasCollision = matchingPayments.length > 0;
    const newPayment = {
      id: `payment-${Date.now()}`,
      amount: paymentAmount,
      currency: paymentCurrency,
      from: randomAddress,
      timestamp: new Date(),
      status: hasCollision ? "payment_collision" : "possibly_reconciled",
      requestId: selectedRequest.id,
      txHash,
      isNew: true
    };
    setLeftPayments(prev => {
      const placeholderIndex = prev.findIndex(p => p.isPlaceholder && p.requestId === selectedRequest.id);
      if (placeholderIndex !== -1) {
        const updated = [...prev];
        updated[placeholderIndex] = newPayment;
        if (hasCollision) {
          return updated.map(p => !p.isPlaceholder && p.amount === paymentAmount && p.currency === paymentCurrency ? {
            ...p,
            status: "payment_collision"
          } : p);
        }
        return updated;
      }
      return [newPayment, ...prev];
    });
    setRightRequests(prev => prev.map(r => r.id === selectedRequest.id ? {
      ...r,
      status: "paid_reconciled",
      txHash,
      isNew: true
    } : r));
    setShouldScrollToTop(prev => prev + 1);
    setTimeout(() => {
      triggerConfetti();
    }, 100);
    if (hasCollision) {
      setIsShaking(true);
      setTimeout(() => setIsShaking(false), 500);
      if (!hasSeenCollisionExplainer) {
        setTimeout(() => {
          setShowCollisionExplainer(true);
          setHasSeenCollisionExplainer(true);
        }, 600);
      }
    }
    setIsProcessing(false);
  };
  const triggerConfetti = () => {
    if (typeof window !== 'undefined' && window.confetti) {
      if (rightCardRef.current) {
        const rect = rightCardRef.current.getBoundingClientRect();
        const x = (rect.left + rect.width / 2) / window.innerWidth;
        const y = (rect.top + rect.height / 2) / window.innerHeight;
        window.confetti({
          particleCount: 50,
          spread: 60,
          origin: {
            x,
            y
          },
          colors: ["#10b981", "#059669", "#047857"]
        });
      }
    } else if (typeof window !== 'undefined' && !window.confetti) {
      const script = document.createElement("script");
      script.src = "https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/dist/confetti.browser.min.js";
      script.onload = () => {
        if (window.confetti && rightCardRef.current) {
          const rect = rightCardRef.current.getBoundingClientRect();
          const x = (rect.left + rect.width / 2) / window.innerWidth;
          const y = (rect.top + rect.height / 2) / window.innerHeight;
          window.confetti({
            particleCount: 50,
            spread: 60,
            origin: {
              x,
              y
            },
            colors: ["#10b981", "#059669", "#047857"]
          });
        }
      };
      document.head.appendChild(script);
    }
  };
  const handleClearTables = () => {
    setHasStarted(false);
    setPaymentCount(0);
    setRequestCount(0);
    setHasPrePopulated(false);
    setIsAutoPlaying(false);
    setRightRequests([]);
    setLeftPayments([]);
    setHasSeenCollisionExplainer(false);
    setShowCollisionExplainer(false);
  };
  const awaitingCount = rightRequests.filter(r => r.status === "awaiting_payment").length;
  const canSimulatePayment = awaitingCount > 0 && !isAutoPlaying;
  const canCreateRequest = awaitingCount < 3 && !isAutoPlaying;
  const hasContent = leftPayments.length > 0 || rightRequests.length > 0;
  const shouldCreateRequestPulse = rightRequests.length === 0 || rightRequests.every(r => r.status === 'paid_reconciled');
  return <div className="relative" ref={demoContainerRef}>
      <div className="relative w-full p-4 md:p-8">
        {showDialog && !hasStarted && <div className="absolute inset-0 bg-black/50 backdrop-blur-sm rounded-xl z-10 flex items-start justify-center p-4" onClick={handleStartDemo}>
            <div className="bg-white dark:bg-[#002920] border-2 border-gray-200 dark:border-[#014d3d] shadow-2xl rounded-lg p-4 md:p-8 max-w-2xl w-full mx-4" onClick={e => e.stopPropagation()} style={{
    position: 'sticky',
    top: '150px'
  }}>
              <div className="mb-6">
                <h2 className="text-xl md:text-2xl lg:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-6 text-center">
                  Identify Every Payment
                </h2>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-4xl mx-auto">
                  <div className="bg-red-50 dark:bg-red-950/30 border-2 border-red-200 dark:border-red-800 rounded-lg p-4 md:p-6 transition-all duration-300 hover:shadow-lg hover:scale-[1.02] cursor-default">
                    <div className="flex items-start gap-3">
                      <XIcon className="h-5 w-5 md:h-6 md:w-6 text-red-600 dark:text-red-400 shrink-0 mt-0.5" />
                      <div>
                        <h3 className="font-bold text-sm md:text-base text-red-700 dark:text-red-300 mb-2">Anonymous Transactions</h3>
                        <p className="text-xs md:text-sm text-red-600 dark:text-red-400">
                          Traditional blockchain payments lack business context or payment identifiers.
                        </p>
                      </div>
                    </div>
                  </div>
                  <div className="bg-green-50 dark:bg-green-950/30 border-2 border-green-200 dark:border-green-800 rounded-lg p-4 md:p-6 transition-all duration-300 hover:shadow-lg hover:scale-[1.02] cursor-default">
                    <div className="flex items-start gap-3">
                      <CheckIcon className="h-5 w-5 md:h-6 md:w-6 text-green-600 dark:text-green-400 shrink-0 mt-0.5" />
                      <div>
                        <h3 className="font-bold text-sm md:text-base text-green-700 dark:text-green-300 mb-2">Unique Identifiers</h3>
                        <p className="text-xs md:text-sm text-green-600 dark:text-green-400">
                          Request Network adds unique identifiers to every payment, enabling instant, automatic, and 100% automated reconciliation.
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="flex justify-center">
                <Button onClick={handleStartDemo} size="lg">
                  Start Demo
                </Button>
              </div>
            </div>
          </div>}

        {showCollisionExplainer && <div className="absolute inset-0 bg-black/50 backdrop-blur-sm rounded-xl z-20 flex items-start justify-center p-4" onClick={() => setShowCollisionExplainer(false)}>
            <div className="bg-white dark:bg-[#002920] border-2 border-gray-200 dark:border-[#014d3d] shadow-2xl rounded-lg p-4 md:p-6 max-w-2xl w-full mx-4" onClick={e => e.stopPropagation()} style={{
    position: 'sticky',
    top: '150px'
  }}>
                  <div className="mb-4">
                    <h3 className="text-lg md:text-xl font-bold text-gray-900 dark:text-gray-100 mb-4 text-center">
                      Payment Collision Detected
                    </h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm md:text-base">
                      <div className="bg-red-50 dark:bg-red-950/30 border-2 border-red-200 dark:border-red-800 rounded-lg p-4 md:p-6 transition-all duration-300 hover:shadow-lg hover:scale-[1.02] cursor-default">
                        <div className="flex items-start gap-3">
                          <XIcon className="h-5 w-5 md:h-6 md:w-6 text-red-600 dark:text-red-400 shrink-0 mt-0.5" />
                          <div>
                            <h4 className="font-bold text-sm md:text-base text-red-700 dark:text-red-300 mb-2">The Problem</h4>
                            <p className="text-xs md:text-sm text-red-600 dark:text-red-400">
                              Two payments have the same amount and currency. Which payment belongs to which customer?
                              Manual review required.
                            </p>
                          </div>
                        </div>
                      </div>
                      <div className="bg-green-50 dark:bg-green-950/30 border-2 border-green-200 dark:border-green-800 rounded-lg p-4 md:p-6 transition-all duration-300 hover:shadow-lg hover:scale-[1.02] cursor-default">
                        <div className="flex items-start gap-3">
                          <CheckIcon className="h-5 w-5 md:h-6 md:w-6 text-green-600 dark:text-green-400 shrink-0 mt-0.5" />
                          <div>
                            <h4 className="font-bold text-sm md:text-base text-green-700 dark:text-green-300 mb-2">Request Network Solution</h4>
                            <p className="text-xs md:text-sm text-green-600 dark:text-green-400">
                              Each payment is automatically matched to its correct request using onchain identifiers. No
                              ambiguity, no manual work.
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="flex justify-center">
                    <Button onClick={() => setShowCollisionExplainer(false)} size="lg">
                      Got it
                    </Button>
                  </div>
            </div>
          </div>}

        <div className="hidden lg:flex justify-center items-center gap-2 md:gap-4 mb-6 flex-wrap">
          <Button onClick={handleCreateRequest} size="lg" variant="outline" disabled={isProcessing || !canCreateRequest} pulse={shouldCreateRequestPulse && canCreateRequest && !isProcessing}>
            <SendIcon className="h-4 w-4 md:h-5 md:w-5 mr-2" />
            Create Request
          </Button>

          <Button onClick={handleSimulatePayment} size="lg" disabled={isProcessing || !canSimulatePayment} pulse={canSimulatePayment && !isProcessing}>
            <SendIcon className="h-4 w-4 md:h-5 md:w-5 mr-2" />
            {isProcessing ? "Processing..." : "Simulate Payment"}
          </Button>

          <Button onClick={handleClearTables} variant="outline" size="lg" disabled={!hasContent || isAutoPlaying}>
            Clear
          </Button>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6 mb-6">
          {}
          <div ref={leftCardRef} className="space-y-4">
            <div className="lg:hidden flex justify-center items-center gap-2 flex-wrap">
              <Button onClick={handleCreateRequest} size="lg" variant="outline" disabled={isProcessing || !canCreateRequest} pulse={shouldCreateRequestPulse && canCreateRequest && !isProcessing}>
                <SendIcon className="h-4 w-4 mr-2" />
                Create Request
              </Button>

              <Button onClick={handleSimulatePayment} size="lg" disabled={isProcessing || !canSimulatePayment} pulse={canSimulatePayment && !isProcessing}>
                <SendIcon className="h-4 w-4 mr-2" />
                {isProcessing ? "Processing..." : "Simulate Payment"}
              </Button>

              <Button onClick={handleClearTables} variant="outline" size="lg" disabled={!hasContent || isAutoPlaying}>
                Clear
              </Button>
            </div>

            <div className={`border-2 border-red-300/60 dark:border-red-800/60 bg-red-50/20 dark:bg-red-950/10 rounded-lg ${isShaking ? 'animate-shake' : ''}`}>
              <div className="p-4 pb-3 md:pb-4">
                <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2 mb-2">
                  <h3 className="text-lg md:text-xl font-semibold text-red-700 dark:text-red-400 sm:min-h-[64px]">
                    Traditional Blockchain Payments
                  </h3>
                  <Tooltip content="Manual reconciliation required - payments lack identifiers to link them to specific customers">
                    <div className="flex items-center gap-1.5 bg-red-100 dark:bg-red-950/50 border border-red-300 dark:border-red-700 rounded-full px-3 py-1 w-fit shrink-0 cursor-help">
                      <AlertCircleIcon className="h-4 w-4 text-red-600 dark:text-red-400 shrink-0" />
                      <span className="text-xs md:text-sm font-semibold text-red-700 dark:text-red-300 whitespace-nowrap">
                        Reconciled: {calculateLeftAccuracy()}
                      </span>
                    </div>
                  </Tooltip>
                </div>
                <p className="text-xs md:text-sm text-gray-600 dark:text-gray-400">
                  Anonymous transactions without business context
                </p>
              </div>
              <div className="px-4 pb-4">
                <div ref={leftScrollRef} className="space-y-3 h-[300px] md:h-[388px] overflow-y-auto no-scrollbar">
                  {leftPayments.length === 0 ? <div className="h-full flex items-center justify-center">
                      <p className="text-gray-500 dark:text-gray-400 text-xs md:text-sm">Click "Create Request" to begin</p>
                    </div> : leftPayments.map(payment => {
    if (payment.isPlaceholder) {
      return <div key={payment.id} className={`p-3 rounded border-2 border-dashed border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-xs min-h-[88px] flex flex-col justify-center items-center transition-all duration-500 ${payment.isNew ? "animate-in fade-in slide-in-from-top-2" : ""}`}>
                            <span className="text-gray-500 dark:text-gray-400 text-xs md:text-sm">Awaiting Payment</span>
                          </div>;
    }
    const isCollision = payment.status === "payment_collision";
    const matchCount = getLeftSideMatchCount(payment.amount, payment.currency);
    const showWarning = matchCount >= 2;
    return <div key={payment.id} className={`p-3 rounded border text-xs min-h-[88px] flex flex-col transition-all duration-200 ${payment.isNew ? "animate-in fade-in slide-in-from-top-2" : ""} ${isCollision ? "border-red-300 dark:border-red-700 bg-red-100 dark:bg-red-950/50" : "border-gray-300 dark:border-gray-700 bg-gray-200 dark:bg-gray-800"}`}>
                          <div className="flex items-start justify-between mb-auto gap-2">
                            <div className="flex items-center gap-2">
                              <div className="font-semibold text-xs md:text-sm text-gray-900 dark:text-gray-100">
                                {getCurrencyDisplay(payment.amount, payment.currency)}
                              </div>
                              {showWarning && <span className="text-yellow-600 dark:text-yellow-500 text-[10px] md:text-xs flex items-center gap-0.5 whitespace-nowrap">
                                  ⚠️ {matchCount} matches
                                </span>}
                            </div>
                            {isCollision ? <Tooltip content="Multiple payments with same amount and currency detected - manual review required">
                                <Badge className="text-[10px] md:text-xs shrink-0 bg-red-600 text-white dark:bg-red-700 dark:text-white border-0">
                                  Needs Review
                                </Badge>
                              </Tooltip> : <Tooltip content="Payment likely matches an invoice or receipt, but requires manual verification">
                                <Badge variant="secondary" className="text-[10px] md:text-xs shrink-0">
                                  Possibly Reconciled
                                </Badge>
                              </Tooltip>}
                          </div>
                          <div className="flex items-end justify-between mt-2 gap-2 md:gap-4">
                            <div className="flex flex-col min-w-0">
                              <div className="flex items-center gap-1 mb-0.5">
                                <WalletIcon className="h-3 w-3 text-gray-500 dark:text-gray-400" />
                                <span className="text-[10px] text-gray-500 dark:text-gray-400 uppercase">From</span>
                              </div>
                              <Tooltip content={payment.from}>
                                <p className="text-xs text-gray-600 dark:text-gray-300 font-mono truncate cursor-help">
                                  {payment.from.slice(0, 10)}...{payment.from.slice(-8)}
                                </p>
                              </Tooltip>
                            </div>
                            <div className="flex flex-col items-start shrink-0">
                              <div className="flex items-center gap-1 mb-0.5">
                                <TxIcon className="h-3 w-3 text-gray-500 dark:text-gray-400" />
                                <span className="text-[10px] text-gray-500 dark:text-gray-400 uppercase">Tx ID</span>
                              </div>
                              <Tooltip content={payment.txHash}>
                                <a href="#" className="text-xs text-gray-600 dark:text-gray-300 font-mono hover:text-gray-900 dark:hover:text-gray-100 transition-colors flex items-center gap-1 cursor-help" onClick={e => e.preventDefault()}>
                                  {payment.txHash.slice(0, 8)}...{payment.txHash.slice(-6)}
                                  <ExternalLinkIcon />
                                </a>
                              </Tooltip>
                            </div>
                          </div>
                        </div>;
  })}
                </div>
              </div>
            </div>
          </div>

          {}
          <div className="space-y-4">
            <div className="lg:hidden flex justify-center items-center gap-2 flex-wrap">
              <Button onClick={handleCreateRequest} size="lg" variant="outline" disabled={isProcessing || !canCreateRequest} pulse={shouldCreateRequestPulse && canCreateRequest && !isProcessing}>
                <SendIcon className="h-4 w-4 mr-2" />
                Create Request
              </Button>

              <Button onClick={handleSimulatePayment} size="lg" disabled={isProcessing || !canSimulatePayment} pulse={canSimulatePayment && !isProcessing}>
                <SendIcon className="h-4 w-4 mr-2" />
                {isProcessing ? "Processing..." : "Simulate Payment"}
              </Button>

              <Button onClick={handleClearTables} variant="outline" size="lg" disabled={!hasContent || isAutoPlaying}>
                Clear
              </Button>
            </div>

            <div ref={rightCardRef} className="border-2 border-green-400 dark:border-green-600 bg-green-50/40 dark:bg-green-900/30 rounded-lg">
              <div className="p-4 pb-3 md:pb-4">
                <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2 mb-2">
                  <h3 className="text-lg md:text-xl font-semibold text-green-700 dark:text-green-300 sm:min-h-[64px]">
                    Request Network Payments
                  </h3>
                  <Tooltip content="100% automated reconciliation - Request IDs uniquely identify every payment">
                    <div className="flex items-center gap-1.5 bg-green-100 dark:bg-green-950/50 border border-green-300 dark:border-green-700 rounded-full px-3 py-1 w-fit shrink-0 cursor-help">
                      <CheckCircle2Icon className="h-4 w-4 text-green-600 dark:text-green-400 shrink-0" />
                      <span className="text-xs md:text-sm font-semibold text-green-700 dark:text-green-300 whitespace-nowrap">
                        Reconciled: 100%
                      </span>
                    </div>
                  </Tooltip>
                </div>
                <p className="text-xs md:text-sm text-gray-600 dark:text-gray-400">
                  Payments with unique IDs for instant reconciliation
                </p>
              </div>
              <div className="px-4 pb-4">
                <div ref={rightScrollRef} className="space-y-3 h-[300px] md:h-[388px] overflow-y-auto no-scrollbar">
                  {rightRequests.length === 0 ? <div className="h-full flex items-center justify-center">
                      <p className="text-gray-500 dark:text-gray-400 text-xs md:text-sm">Click "Create Request" to begin</p>
                    </div> : rightRequests.map(request => {
    const isPaid = request.status === "paid_reconciled";
    return <div key={request.id} className={`p-3 rounded border text-xs min-h-[88px] flex flex-col transition-all duration-200 ${request.isNew ? "animate-in fade-in slide-in-from-top-2" : ""} ${isPaid ? "border-green-300 dark:border-green-700 bg-green-100 dark:bg-green-950/50" : "border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-900"}`}>
                          <div className="flex items-start justify-between mb-2 gap-2">
                            <div className="font-semibold text-xs md:text-sm text-gray-900 dark:text-gray-100">
                              {getCurrencyDisplay(request.amount, request.currency)}
                            </div>
                            {isPaid ? <Tooltip content="Payment received and automatically reconciled with a request">
                                <Badge variant="success" className="text-[10px] md:text-xs shrink-0">
                                  Reconciled
                                </Badge>
                              </Tooltip> : <Badge variant="default" className="text-[10px] md:text-xs shrink-0">
                                Awaiting Payment
                              </Badge>}
                          </div>
                          <div className="flex items-end justify-between mt-auto gap-1 md:gap-2 lg:gap-4">
                            <div className="flex flex-col min-w-0 flex-1">
                              <div className="flex items-center gap-1 mb-0.5">
                                <UserIcon className="h-3 w-3 text-gray-500 dark:text-gray-400" />
                                <span className="text-[10px] text-gray-500 dark:text-gray-400 uppercase">Customer</span>
                              </div>
                              <Tooltip content={request.customerAddress}>
                                <p className="text-xs text-gray-600 dark:text-gray-300 truncate cursor-help">{request.customer}</p>
                              </Tooltip>
                            </div>
                            <div className="hidden md:flex flex-col min-w-0 flex-1">
                              <div className="flex items-center gap-1 mb-0.5">
                                <svg className="h-3 w-3 text-gray-500 dark:text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                  <polyline points="14 2 14 8 20 8"></polyline>
                                  <line x1="16" y1="13" x2="8" y2="13"></line>
                                  <line x1="16" y1="17" x2="8" y2="17"></line>
                                  <polyline points="10 9 9 9 8 9"></polyline>
                                </svg>
                                <span className="text-[10px] text-gray-500 dark:text-gray-400 uppercase">Request ID</span>
                              </div>
                              <Tooltip content={request.id}>
                                <p className="text-xs text-gray-600 dark:text-gray-300 font-mono truncate cursor-help">
                                  {request.id.slice(0, 10)}...{request.id.slice(-6)}
                                </p>
                              </Tooltip>
                            </div>
                            <div className="flex flex-col items-start shrink-0">
                              {isPaid && request.txHash ? <>
                                  <div className="flex items-center gap-1 mb-0.5">
                                    <TxIcon className="h-3 w-3 text-gray-500 dark:text-gray-400" />
                                    <span className="text-[10px] text-gray-500 dark:text-gray-400 uppercase">Tx ID</span>
                                  </div>
                                  <Tooltip content={request.txHash}>
                                    <a href="#" className="text-xs text-gray-600 dark:text-gray-300 font-mono hover:text-gray-900 dark:hover:text-gray-100 transition-colors flex items-center gap-1 cursor-help" onClick={e => e.preventDefault()}>
                                      {request.txHash.slice(0, 8)}...{request.txHash.slice(-6)}
                                      <ExternalLinkIcon />
                                    </a>
                                  </Tooltip>
                                </> : <>
                                  <div className="flex items-center gap-1 mb-0.5 opacity-0">
                                    <TxIcon className="h-3 w-3 text-gray-500 dark:text-gray-400" />
                                    <span className="text-[10px] text-gray-500 dark:text-gray-400 uppercase">Tx ID</span>
                                  </div>
                                  <span className="text-xs text-gray-600 dark:text-gray-300 font-mono opacity-0 flex items-center gap-1">
                                    0x000000...000000
                                    <ExternalLinkIcon />
                                  </span>
                                </>}
                            </div>
                          </div>
                        </div>;
  })}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style jsx>{`
        @keyframes fadeIn {
          from {
            opacity: 0;
            transform: translateY(-10px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        .animate-in {
          animation: fadeIn 0.5s ease-out;
        }
        @keyframes shake {
          0%, 100% { transform: translateX(0); }
          10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
          20%, 40%, 60%, 80% { transform: translateX(5px); }
        }
        .animate-shake {
          animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
        }
        /* Hide scrollbar but keep functionality */
        .no-scrollbar {
          -ms-overflow-style: none;  /* IE and Edge */
          scrollbar-width: none;  /* Firefox */
        }
        .no-scrollbar::-webkit-scrollbar {
          display: none;  /* Chrome, Safari, Brave, and other WebKit browsers */
        }
      `}</style>
    </div>;
};

<div style={{ padding: '2rem 2rem 0', maxWidth: '1400px', margin: '0 auto' }}>
  <div style={{ marginBottom: '2rem' }}>
    <h1 className="text-zinc-950 dark:text-white" style={{ fontSize: '2.5rem', fontWeight: 'bold', marginBottom: '1rem' }}>Request Network Docs</h1>

    <p style={{ fontSize: '1.125rem', color: 'var(--text-secondary)', lineHeight: '1.75' }}>
      A protocol for requests, payments, and <strong className="text-zinc-950 dark:text-white">100% automated reconciliation</strong>.
    </p>
  </div>

  <h2 className="text-zinc-950 dark:text-white" style={{ fontSize: '1.75rem', fontWeight: 'bold', marginTop: '3rem', marginBottom: '2rem' }}>
    Identify Every Payment
  </h2>

  <p style={{ fontSize: '1.125rem', color: 'var(--text-secondary)', lineHeight: '1.75', marginBottom: '2rem' }}>
    Requests add business context to payments, eliminating manual accounting with cryptographic certainty. See how unique Request IDs prevent payment collisions:
  </p>

  <div style={{ marginBottom: '4rem' }}>
    <DemoContainer>
      <IntegratedDemo />
    </DemoContainer>
  </div>

  <h2 className="text-zinc-950 dark:text-white" style={{ fontSize: '1.75rem', fontWeight: 'bold', marginTop: '3rem', marginBottom: '2rem' }}>
    Blockchain Payment Detection Comparison
  </h2>

  <p style={{ fontSize: '1.125rem', color: 'var(--text-secondary)', lineHeight: '1.75', marginBottom: '2rem' }}>
    How does Request Network compare to other approaches?
  </p>

  <div style={{ marginBottom: '4rem' }}>
    <DemoContainer>
      <ComparisonTable />
    </DemoContainer>
  </div>
</div>

<div style={{ padding: '0 2rem', maxWidth: '1400px', margin: '0 auto' }}>
  <h2 className="text-zinc-950 dark:text-white" style={{ fontSize: '1.75rem', fontWeight: 'bold', marginTop: '3rem', marginBottom: '2rem' }}>Get Started</h2>

  <div style={{ marginBottom: '0.5rem' }}>
    <CardGroup cols={3}>
      <Card title="🚀 Payment Processing Demo" href="/use-cases/payment-processing-demo" icon="rocket">
        Experience the payment lifecycle with our interactive demo and see how we compare to traditional processors.
      </Card>

      <Card title="Use Cases" href="/use-cases/payment-detection" icon="briefcase">
        Explore specific business scenarios: payment detection, invoicing, payouts, payroll, checkout, and subscriptions
      </Card>

      <Card title="API Features" href="/api-features/payment-types" icon="code">
        The easiest way to integrate. Payment types, webhooks, and developer tools.
      </Card>
    </CardGroup>
  </div>

  <div style={{ marginBottom: '3rem' }}>
    <CardGroup cols={3}>
      <Card title="🌐 Resources" href="/resources/supported-chains-and-currencies" icon="globe">
        Supported chains, currencies, smart contracts, and community resources
      </Card>

      <Card title="SDK (Legacy)" href="/sdk-legacy/migration-guide" icon="clock">
        Legacy SDK and protocol documentation for advanced users
      </Card>

      <Card title="📋 Release Notes" href="/release-notes/index" icon="newspaper">
        Stay updated with the latest features and improvements
      </Card>
    </CardGroup>
  </div>
</div>