错误消息组件 - 食品/餐厅

<div class="p-4 sm:p-6 md:p-8 lg:p-10 bg-gradient-to-br from-yellow-50 to-orange-100 dark:from-gray-950 dark:to-gray-900 min-h-screen flex items-center justify-center font-serif">
  <div class="max-w-4xl w-full rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] dark:shadow-2xl dark:shadow-rose-950/50 bg-yellow-50 dark:bg-gray-800 text-gray-800 dark:text-gray-100 border border-gray-200 dark:border-gray-700 relative">
    <!-- Paper textured background with torn edges effect -->
    <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/lined-paper.png')] opacity-20 dark:opacity-5
    before:absolute before:inset-x-0 before:top-0 before:h-4 before:bg-gradient-to-b before:from-yellow-50 before:to-transparent before:dark:from-gray-800 before:dark:to-transparent
    after:absolute after:inset-x-0 after:bottom-0 after:h-4 after:bg-gradient-to-t after:from-yellow-50 after:to-transparent after:dark:from-gray-800 after:dark:to-transparent
    "></div>

    <!-- Header Section - simulating a ripped-off piece of paper -->
    <div class="relative bg-red-600 dark:bg-rose-900 text-white p-4 sm:p-5 text-center shadow-md border-b border-red-700 dark:border-rose-950 overflow-hidden
                before:content-[''] before:absolute before:-left-2 before:top-1/2 before:-translate-y-1/2 before:w-4 before:h-[calc(100%+40px)] before:bg-gradient-to-r before:from-red-700 before:to-transparent before:rotate-45 before:scale-y-150
                after:content-[''] after:absolute after:-right-2 after:top-1/2 after:-translate-y-1/2 after:w-4 after:h-[calc(100%+40px)] after:bg-gradient-to-l after:from-red-700 after:to-transparent after:-rotate-45 after:scale-y-150">
      <h1 class="text-2xl sm:text-3xl font-bold tracking-tight uppercase drop-shadow-md">Order Interrupted!</h1>
      <p class="text-sm sm:text-base opacity-90 mt-1">Something went wrong while preparing your delicious meal.</p>
    </div>

    <!-- Main Content Area - mimicking a crumpled note -->
    <div class="relative p-6 sm:p-8 md:p-10 z-10">
      <div class="bg-yellow-100 dark:bg-gray-700 p-6 rounded-md shadow-inner border border-yellow-200 dark:border-gray-600 relative overflow-hidden transform rotate-1 transition-transform duration-500 group-hover:rotate-0">
        <!-- Crumpled paper texture overlay -->
        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/skulls.png')] opacity-5 dark:opacity-10 pointer-events-none"></div>

        <p class="text-lg sm:text-xl font-semibold mb-4 text-red-700 dark:text-red-300 flex items-center">
          <svg class="w-7 h-7 sm:w-8 sm:h-8 mr-3 animate-pulse" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-1-12a1 1 0 10-2 0v4a1 1 0 102 0V6zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
          </svg>
          Error: Payment Processing Failed
        </p>
        <p class="mb-6 leading-relaxed">
          It seems there was a hiccup while processing your payment. Your order <span class="font-mono text-sm bg-yellow-200 dark:bg-gray-600 px-2 py-1 rounded">#FDS-202300483X</span> could not be completed.
        </p>

        <h3 class="text-xl font-bold mb-3 text-emerald-700 dark:text-emerald-400 border-b-2 border-dashed border-emerald-300 dark:border-emerald-600 pb-2 flex items-center">
          <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
          </svg>
          What you can do:
        </h3>
        <ul class="list-disc list-inside space-y-2 text-gray-700 dark:text-gray-200 ml-2">
          <li class="flex items-start">
            <span class="block w-2 h-2 rounded-full bg-emerald-500 mr-2 mt-1.5 flex-shrink-0"></span>
            <p><strong>Check your payment details:</strong> Please verify your card number, expiry date, and CVV. Ensure funds are available.</p>
          </li>
          <li class="flex items-start">
            <span class="block w-2 h-2 rounded-full bg-emerald-500 mr-2 mt-1.5 flex-shrink-0"></span>
            <p><strong>Try a different payment method:</strong> We accept other major credit cards, PayPal, and local payment options.</p>
          </li>
          <li class="flex items-start">
            <span class="block w-2 h-2 rounded-full bg-emerald-500 mr-2 mt-1.5 flex-shrink-0"></span>
            <p><strong>Review your internet connection:</strong> A stable connection helps prevent payment disruptions.</p>
          </li>
          <li class="flex items-start">
            <span class="block w-2 h-2 rounded-full bg-emerald-500 mr-2 mt-1.5 flex-shrink-0"></span>
            <p><strong>Clear browser cache:</strong> Sometimes old data can interfere with new transactions.</p>
          </li>
        </ul>
      </div>
    </div>

    <!-- Stack of "sticky notes" for common actions -->
    <div class="relative p-6 sm:p-8 pt-0 flex flex-col sm:flex-row justify-end space-y-4 sm:space-y-0 sm:space-x-4 z-10">
      <a href="#" class="relative bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-700 dark:hover:bg-emerald-800 text-white font-bold py-3 px-6 rounded-lg shadow-md transition-transform duration-200 transform -rotate-1 hover:rotate-0 hover:scale-105 active:scale-95 origin-bottom-left text-center overflow-hidden
                  before:absolute before:inset-0 before:bg-black before:opacity-10 before:mix-blend-multiply before:transition-all before:duration-300 before:scale-y-0 before:origin-top hover:before:scale-y-100
                  border border-emerald-600 dark:border-emerald-900
                  flex items-center justify-center">
        <span class="relative z-10">Retry Payment</span>
        <svg class="w-5 h-5 ml-2 relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12V8m5.356-4H15v5m6 0h-5.356-2A8.001 8.001 0 0120 12v4m-4 0h-.582"></path>
        </svg>
      </a>

      <a href="#" class="relative bg-red-500 hover:bg-red-600 dark:bg-rose-700 dark:hover:bg-rose-800 text-white font-bold py-3 px-6 rounded-lg shadow-md transition-transform duration-200 transform rotate-2 hover:rotate-0 hover:scale-105 active:scale-95 origin-bottom-right text-center overflow-hidden
                  before:absolute before:inset-0 before:bg-black before:opacity-10 before:mix-blend-multiply before:transition-all before:duration-300 before:scale-y-0 before:origin-top hover:before:scale-y-100
                  border border-red-600 dark:border-rose-900
                  flex items-center justify-center">
        <span class="relative z-10">Go to Homepage</span>
        <svg class="w-5 h-5 ml-2 relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
        </svg>
      </a>
    </div>

    <!-- Tear-off portion (bottom) with support info, like a receipt -->
    <div class="relative bg-yellow-200 dark:bg-gray-900 text-gray-700 dark:text-gray-300 p-4 sm:p-5 text-center text-sm border-t border-dashed border-yellow-300 dark:border-gray-700 overflow-hidden
                before:content-[''] before:absolute before:-left-2 before:top-1/2 before:-translate-y-1/2 before:w-4 before:h-[calc(100%+40px)] before:bg-gradient-to-r before:from-yellow-300 before:to-transparent before:-rotate-45 before:scale-y-150
                after:content-[''] after:absolute after:-right-2 after:top-1/2 after:-translate-y-1/2 after:w-4 after:h-[calc(100%+40px)] after:bg-gradient-to-l after:from-yellow-300 after:to-transparent after:rotate-45 after:scale-y-150">
      <p class="mb-2">If the problem persists, please <a href="#" class="text-red-600 dark:text-red-400 hover:underline font-semibold">contact our support team</a> with your order number.</p>
      <p class="text-xs opacity-80">Support Hotline: +1 (555) 123-4567 | Email: [email protected]</p>
    </div>
  </div>
</div>