<style>
  .feedback-wrapper {
    max-width: 550px;
    margin: 20px auto;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    padding: 40px 30px;
    border-radius: 25px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    text-align: center;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }

  .lang-toggle { 
    font-size: 13px; 
    text-transform: uppercase; 
    cursor: pointer; 
    margin-bottom: 25px; 
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #444; 
    letter-spacing: 1px;
    border: 1px solid #bbb;
    padding: 8px 18px;
    border-radius: 30px;
    transition: all 0.3s;
    background: white;
    font-weight: 600;
  }
  .lang-toggle:hover { background: #f0f0f0; border-color: #888; }
  .lang-toggle img { width: 20px; height: auto; border-radius: 2px; }

  .stars { font-size: 55px; cursor: pointer; color: #ddd; margin: 25px 0; display: flex; justify-content: center; gap: 5px; }
  .stars span { transition: color 0.2s ease-in-out; }
  .stars span:hover, .stars span.active { color: #FFD700; }
  
  .hidden { display: none; margin-top: 30px; animation: fadeIn 0.6s ease; }
  
  .logo-link { display: inline-block; margin: 15px; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
  .logo-link:hover { transform: scale(1.1); }
  .logo-link img { width: 160px; height: auto; display: block; }

  .btn-email {
    display: inline-block;
    padding: 16px 32px;
    background: #222;
    color: #fff !important;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    margin-top: 20px;
    transition: background 0.3s;
  }
  .btn-email:hover { background: #555; }

  @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
</style>

<div class="feedback-wrapper">
  <div class="lang-toggle" onclick="toggleLang()" id="lang-btn-container">
    <img src="https://images.squarespace-cdn.com/content/633f666c76c411291b321cdc/e752dd08-e4f8-4bce-b5b6-99a2e19f938b/7.png?content-type=image%2Fpng" id="lang-flag" alt="Language">
    <span id="lang-text">English version</span>
  </div>

  <div id="content-pl">
    <h2 style="margin-top:0;">Jak oceniasz wizytę?</h2>
    <p>Twoja opinia ma dla nas ogromne znaczenie.</p>
  </div>
  
  <div id="content-en" style="display:none;">
    <h2 style="margin-top:0;">How was your visit?</h2>
    <p>Your feedback is very important to us.</p>
  </div>

  <div class="stars" id="star-rating">
    <span onclick="rate(1)">★</span><span onclick="rate(2)">★</span><span onclick="rate(3)">★</span><span onclick="rate(4)">★</span><span onclick="rate(5)">★</span>
  </div>

  <div id="positive-feedback" class="hidden">
    <p class="pl">Bardzo nas to cieszy! Gdzie chcesz nas pochwalić?</p>
    <p class="en" style="display:none;">We're delighted! Where would you like to leave your review?</p>
    
    <a href="https://g.page/r/CQ_s42LI-ctgEAE/review" target="_blank" class="logo-link">
      <img src="https://images.squarespace-cdn.com/content/633f666c76c411291b321cdc/2b5e82d6-98f9-4acc-ae3d-5fb7e797d700/Google_2015_logo.svg.png?content-type=image%2Fpng" alt="Google Review">
    </a>
    <a href="https://www.tripadvisor.com/Restaurant_Review-g274856-d697137-Reviews-Pod_Samsonem-Warsaw_Mazovia_Province_Central_Poland.html" target="_blank" class="logo-link">
      <img src="https://images.squarespace-cdn.com/content/633f666c76c411291b321cdc/5f17ff50-0175-4973-bfe6-40f6a726bf68/TripAdvisor-Logo.wine.png?content-type=image%2Fpng" alt="TripAdvisor Review">
    </a>
  </div>

  <div id="negative-feedback" class="hidden">
    <p class="pl">Przykro nam, że nie spełniliśmy oczekiwań. Chcemy to naprawić!</p>
    <p class="en" style="display:none;">We are sorry we didn't meet your expectations. Let us make it right!</p>
    
    <a href="mailto:podsamsonem@gmail.com?subject=Opinia%20Pod%20Samsonem&body=Dzień%20dobry,%20chciałbym%20podzielić%20się%20uwagami..." class="btn-email">
      <span class="pl">Napisz do nas bezpośrednio</span>
      <span class="en" style="display:none;">Write to us directly</span>
    </a>
  </div>
</div>

<script>
let currentLang = 'pl';
const flagEn = "https://images.squarespace-cdn.com/content/633f666c76c411291b321cdc/e752dd08-e4f8-4bce-b5b6-99a2e19f938b/7.png?content-type=image%2Fpng"; 
const flagPl = "https://images.squarespace-cdn.com/content/633f666c76c411291b321cdc/a366c225-1bfa-4bd8-9929-964cba79de76/9.png?content-type=image%2Fpng";

function toggleLang() {
  currentLang = (currentLang === 'pl' ? 'en' : 'pl');
  document.getElementById('lang-text').innerText = (currentLang === 'pl' ? 'English version' : 'Wersja polska');
  document.getElementById('lang-flag').src = (currentLang === 'pl' ? flagEn : flagPl);
  
  document.getElementById('content-pl').style.display = (currentLang === 'pl' ? 'block' : 'none');
  document.getElementById('content-en').style.display = (currentLang === 'en' ? 'block' : 'none');
  
  document.querySelectorAll('.pl').forEach(el => el.style.display = (currentLang === 'pl' ? 'block' : 'none'));
  document.querySelectorAll('.en').forEach(el => el.style.display = (currentLang === 'en' ? 'block' : 'none'));
}

function rate(n) {
  const stars = document.querySelectorAll('.stars span');
  stars.forEach((s, index) => {
    s.style.color = index < n ? '#FFD700' : '#ddd';
  });

  document.getElementById('positive-feedback').style.display = (n >= 4 ? 'block' : 'none');
  document.getElementById('negative-feedback').style.display = (n < 4 ? 'block' : 'none');
  
  setTimeout(() => {
    window.scrollBy({ top: 200, behavior: 'smooth' });
  }, 100);
}
</script>