Componente Fisarmonica

<div class="max-w-4xl mx-auto p-4 sm:p-6 lg:p-8 rounded-xl bg-gradient-to-br from-purple-100 via-pink-100 to-lime-100 dark:from-purple-900 dark:via-pink-900 dark:to-lime-900 shadow-2xl overflow-hidden">
  <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-center mb-8 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 via-purple-500 to-lime-500 dark:from-pink-300 dark:via-purple-300 dark:to-lime-300 transition-colors duration-500 ease-in-out">
    Sweet & Savory FAQs
  </h2>

  <div class="space-y-4">
    <!-- Accordion Item 1 -->
    <div class="group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 ease-in-out overflow-hidden">
      <input type="checkbox" id="accordion-1" class="hidden peer" />
      <label for="accordion-1" class="flex items-center justify-between p-4 sm:p-5 lg:p-6 cursor-pointer transform hover:scale-[1.01] transition-transform duration-300 ease-in-out bg-gradient-to-r from-pink-200 to-purple-200 dark:from-pink-700 dark:to-purple-700 dark:text-white rounded-lg group-hover:from-pink-300 group-hover:to-purple-300 dark:group-hover:from-pink-600 dark:group-hover:to-purple-600">
        <div class="flex items-center">
          <span class="text-2xl mr-3 text-pink-700 dark:text-pink-300 group-hover:scale-110 transition-transform duration-300">🍰</span>
          <h3 class="text-lg sm:text-xl font-semibold text-pink-700 dark:text-pink-200 group-hover:text-pink-800 dark:group-hover:text-pink-100 transition-colors duration-300">
            What are your delivery hours?
          </h3>
        </div>
        <svg class="w-6 h-6 text-pink-700 dark:text-pink-200 transform peer-checked:rotate-180 transition-transform duration-300" 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="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="peer-checked:max-h-96 max-h-0 overflow-hidden transition-all duration-500 ease-in-out bg-purple-50 dark:bg-gray-900 border-t-2 border-pink-100 dark:border-pink-800">
        <div class="p-4 sm:p-5 lg:p-6 text-gray-700 dark:text-gray-300 leading-relaxed">
          <p class="mb-3">We deliver delicious treats from <strong>9 AM to 10 PM, everyday!</strong> Whether it's for breakfast, lunch, or a late-night craving, we've got you covered.</p>
          <div class="flex items-center space-x-3 text-sm text-gray-500 dark:text-gray-400">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Delivery Personnel" class="w-8 h-8 rounded-full border-2 border-pink-300 dark:border-pink-600">
            <span>Estimated delivery time is usually 30-45 minutes.</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Accordion Item 2 -->
    <div class="group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 ease-in-out overflow-hidden">
      <input type="checkbox" id="accordion-2" class="hidden peer" />
      <label for="accordion-2" class="flex items-center justify-between p-4 sm:p-5 lg:p-6 cursor-pointer transform hover:scale-[1.01] transition-transform duration-300 ease-in-out bg-gradient-to-r from-lime-200 to-green-200 dark:from-lime-700 dark:to-green-700 dark:text-white rounded-lg group-hover:from-lime-300 group-hover:to-green-300 dark:group-hover:from-lime-600 dark:group-hover:to-green-600">
        <div class="flex items-center">
          <span class="text-2xl mr-3 text-lime-700 dark:text-lime-300 group-hover:scale-110 transition-transform duration-300">🌱</span>
          <h3 class="text-lg sm:text-xl font-semibold text-lime-700 dark:text-lime-200 group-hover:text-lime-800 dark:group-hover:text-lime-100 transition-colors duration-300">
            Do you offer vegan or gluten-free options?
          </h3>
        </div>
        <svg class="w-6 h-6 text-lime-700 dark:text-lime-200 transform peer-checked:rotate-180 transition-transform duration-300" 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="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="peer-checked:max-h-96 max-h-0 overflow-hidden transition-all duration-500 ease-in-out bg-green-50 dark:bg-gray-900 border-t-2 border-lime-100 dark:border-lime-800">
        <div class="p-4 sm:p-5 lg:p-6 text-gray-700 dark:text-gray-300 leading-relaxed">
          <p class="mb-3">Absolutely! We have a dedicated section for our delicious <strong>vegan and gluten-free items.</strong> Look for the special dietary icons next to the menu items.</p>
          <ul class="list-disc list-inside text-sm space-y-1">
            <li>Allergens are clearly marked.</li>
            <li>Customization options are available upon request.</li>
          </ul>
          <div class="mt-4 p-3 rounded-lg bg-lime-100 dark:bg-lime-800 flex items-center space-x-3">
            <img src="https://picsum.photos/60/60?random=1" alt="Vegan Dish" class="w-12 h-12 rounded-lg object-cover shadow border-2 border-lime-300 dark:border-lime-600">
            <p class="text-lime-800 dark:text-lime-200 text-sm font-medium">Try our new 'Green Goddess' smoothie!</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Accordion Item 3 -->
    <div class="group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 ease-in-out overflow-hidden">
      <input type="checkbox" id="accordion-3" class="hidden peer" />
      <label for="accordion-3" class="flex items-center justify-between p-4 sm:p-5 lg:p-6 cursor-pointer transform hover:scale-[1.01] transition-transform duration-300 ease-in-out bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-700 dark:to-purple-700 dark:text-white rounded-lg group-hover:from-blue-300 group-hover:to-purple-300 dark:group-hover:from-blue-600 dark:group-hover:to-purple-600">
        <div class="flex items-center">
          <span class="text-2xl mr-3 text-blue-700 dark:text-blue-300 group-hover:scale-110 transition-transform duration-300">💳</span>
          <h3 class="text-lg sm:text-xl font-semibold text-blue-700 dark:text-blue-200 group-hover:text-blue-800 dark:group-hover:text-blue-100 transition-colors duration-300">
            What payment methods do you accept?
          </h3>
        </div>
        <svg class="w-6 h-6 text-blue-700 dark:text-blue-200 transform peer-checked:rotate-180 transition-transform duration-300" 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="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="peer-checked:max-h-96 max-h-0 overflow-hidden transition-all duration-500 ease-in-out bg-purple-50 dark:bg-gray-900 border-t-2 border-blue-100 dark:border-blue-800">
        <div class="p-4 sm:p-5 lg:p-6 text-gray-700 dark:text-gray-300 leading-relaxed">
          <p class="mb-3">We accept a wide range of payment options for your convenience, including:</p>
          <ul class="list-disc list-inside space-y-1 text-sm">
            <li><strong>Credit/Debit Cards:</strong> Visa, MasterCard, American Express</li>
            <li><strong>Digital Wallets:</strong> Apple Pay, Google Pay</li>
            <li><strong>Online Payment Systems:</strong> PayPal</li>
          </ul>
          <div class="mt-4 flex items-center space-x-4">
            <img src="https://picsum.photos/50/30?random=2" alt="Visa Logo" class="h-6 object-contain">
            <img src="https://picsum.photos/50/30?random=3" alt="MasterCard Logo" class="h-6 object-contain">
            <img src="https://picsum.photos/50/30?random=4" alt="PayPal Logo" class="h-6 object-contain">
          </div>
        </div>
      </div>
    </div>

    <!-- Accordion Item 4 -->
    <div class="group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 ease-in-out overflow-hidden">
      <input type="checkbox" id="accordion-4" class="hidden peer" />
      <label for="accordion-4" class="flex items-center justify-between p-4 sm:p-5 lg:p-6 cursor-pointer transform hover:scale-[1.01] transition-transform duration-300 ease-in-out bg-gradient-to-r from-red-200 to-pink-200 dark:from-red-700 dark:to-pink-700 dark:text-white rounded-lg group-hover:from-red-300 group-hover:to-pink-300 dark:group-hover:from-red-600 dark:group-hover:to-pink-600">
        <div class="flex items-center">
          <span class="text-2xl mr-3 text-red-700 dark:text-red-300 group-hover:scale-110 transition-transform duration-300">⭐️</span>
          <h3 class="text-lg sm:text-xl font-semibold text-red-700 dark:text-red-200 group-hover:text-red-800 dark:group-hover:text-red-100 transition-colors duration-300">
            How can I leave a review or give feedback?
          </h3>
        </div>
        <svg class="w-6 h-6 text-red-700 dark:text-red-200 transform peer-checked:rotate-180 transition-transform duration-300" 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="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="peer-checked:max-h-96 max-h-0 overflow-hidden transition-all duration-500 ease-in-out bg-pink-50 dark:bg-gray-900 border-t-2 border-red-100 dark:border-red-800">
        <div class="p-4 sm:p-5 lg:p-6 text-gray-700 dark:text-gray-300 leading-relaxed">
          <p class="mb-3">Your feedback is incredibly valuable to us! You can leave a review directly on our website under the 'My Orders' section after your delivery.</p>
          <p class="mb-3">Alternatively, feel free to use our dedicated feedback form or contact our customer support team.</p>
          <a href="#" class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-red-500 to-pink-500 text-white font-semibold rounded-full shadow-lg hover:from-red-600 hover:to-pink-600 transition-all duration-300 ease-in-out transform hover:scale-105">
            <svg class="w-5 h-5 mr-2" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Submit Feedback
          </a>
        </div>
      </div>
    </div>

  </div>
</div>