<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BeReel - Przyszłość marketingu już wkrótce</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <style>
    :root {
      /* Nowoczesna paleta kolorów nawiązująca do logo */
      --bg-color-dark: #0c0c14;
      --bg-gradient: linear-gradient(135deg, #0c0c14 0%, #161629 100%);
      --text-color: #f1f1f6;
      --text-secondary: #a9a9b8;
      --blue-brand: #3DACE4;
      --pink-brand: #E84D7A;
      --navy-shadow: #1d2a5a;
      --card-bg: rgba(30, 30, 50, 0.3);
      --overlay-gradient: linear-gradient(180deg, rgba(13, 13, 26, 0) 0%, rgba(61, 172, 228, 0.05) 100%);
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      background: var(--bg-gradient);
      color: var(--text-color);
      font-family: 'Poppins', sans-serif;
      min-height: 100vh;
      line-height: 1.6;
      position: relative;
      overflow-x: hidden;
    }
    
    body::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: var(--overlay-gradient);
      z-index: -1;
    }
    
    .particles {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    
    .particle {
      position: absolute;
      border-radius: 50%;
      opacity: 0.3;
      animation: float 15s infinite ease-in-out;
    }
    
    @keyframes float {
      0%, 100% {
        transform: translateY(0) translateX(0);
      }
      25% {
        transform: translateY(-30px) translateX(15px);
      }
      50% {
        transform: translateY(10px) translateX(-15px);
      }
      75% {
        transform: translateY(20px) translateX(10px);
      }
    }
    
    .container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 4rem 2rem;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      position: relative;
      z-index: 1;
    }
    
    header {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 3rem;
    }
    
    .logo-container {
      width: 180px;
      height: 180px;
      position: relative;
      animation: pulse 4s infinite ease-in-out;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    @keyframes pulse {
      0%, 100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.05);
      }
    }
    
    .logo-glow {
      position: absolute;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(61, 172, 228, 0.2) 0%, rgba(232, 77, 122, 0.1) 50%, rgba(0, 0, 0, 0) 70%);
      border-radius: 50%;
      filter: blur(20px);
      animation: glow 8s infinite alternate;
    }
    
    @keyframes glow {
      0% {
        opacity: 0.4;
        transform: scale(1);
      }
      100% {
        opacity: 0.7;
        transform: scale(1.3);
      }
    }
    
    .logo {
      width: 140px;
      height: auto;
      position: relative;
      z-index: 2;
    }
    
    .main-content {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    
    h1 {
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(2.5rem, 8vw, 4rem);
      font-weight: 700;
      margin-bottom: 1.5rem;
      background: linear-gradient(90deg, var(--blue-brand), var(--pink-brand));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
      line-height: 1.2;
    }
    
    .tagline {
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(1.2rem, 3vw, 1.5rem);
      font-weight: 300;
      margin-bottom: 2.5rem;
      max-width: 800px;
      color: var(--text-secondary);
    }
    
    .highlight {
      color: var(--blue-brand);
      font-weight: 500;
    }
    
    .highlight-pink {
      color: var(--pink-brand);
      font-weight: 500;
    }
    
    .timer-container {
      margin: 3rem 0;
      position: relative;
    }
    
    .timer-title {
      font-family: 'Montserrat', sans-serif;
      text-transform: uppercase;
      letter-spacing: 2px;
      margin-bottom: 2rem;
      font-size: 0.9rem;
      color: var(--text-secondary);
    }
    
    .timer {
      display: flex;
      justify-content: center;
      gap: 2rem;
      flex-wrap: wrap;
    }
    
    .timer-box {
      background: var(--card-bg);
      backdrop-filter: blur(10px);
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.05);
      padding: 1.5rem;
      min-width: 140px;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.1);
      position: relative;
      overflow: hidden;
    }
    
    .timer-box::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, var(--blue-brand), var(--pink-brand));
      opacity: 0.8;
    }
    
    .timer-value {
      font-family: 'Montserrat', sans-serif;
      font-size: 3rem;
      font-weight: 700;
      color: var(--text-color);
      line-height: 1;
      margin-bottom: 0.5rem;
    }
    
    .timer-label {
      font-family: 'Montserrat', sans-serif;
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 2px;
    }
    
    .description-card {
      background: var(--card-bg);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.05);
      padding: 2.5rem;
      max-width: 800px;
      margin: 2rem auto;
      position: relative;
      overflow: hidden;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    }
    
    .description-card::after {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(61, 172, 228, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
      filter: blur(40px);
      z-index: -1;
    }
    
    .description-card p {
      font-size: 1.1rem;
      line-height: 1.7;
      margin-bottom: 1.5rem;
    }
    
    footer {
      text-align: center;
      padding: 2rem 0 1rem;
      color: var(--text-secondary);
      font-size: 0.9rem;
      position: relative;
      z-index: 2;
    }
    
    /* Responsywność */
    @media (max-width: 768px) {
      .container {
        padding: 2rem 1.5rem;
      }
      
      .timer {
        gap: 1rem;
      }
      
      .timer-box {
        min-width: 110px;
        padding: 1.2rem;
      }
      
      .timer-value {
        font-size: 2.5rem;
      }
      
      .description-card {
        padding: 1.5rem;
      }
    }
    
    @media (max-width: 480px) {
      .timer-box {
        min-width: 90px;
        padding: 1rem;
      }
      
      .timer-value {
        font-size: 2rem;
      }
      
      .timer-label {
        font-size: 0.7rem;
      }
    }
  </style>
  <?php wp_head(); ?>
</head>
<body>
  <!-- Cząsteczki tła (generowane przez JS) -->
  <div class="particles" id="particles"></div>
  
  <div class="container">
    <header>
      <div class="logo-container">
        <div class="logo-glow"></div>
        <img src="<?php echo get_template_directory_uri(); ?>/assets/images/bereel-logo.png" alt="BeReel Logo" class="logo">
      </div>
    </header>
    
    <div class="main-content">
      <h1>Przyszłość marketingu</h1>
      <div class="tagline">Nie tylko kolejny startup. Jesteśmy <span class="highlight">przełomem</span>, który zmieni reguły gry.</div>
      
      <div class="description-card">
        <p>W BeReel tworzymy <span class="highlight-pink">wyjątkowe</span> rozwiązania marketingowe, które przekraczają granice konwencjonalnego myślenia. Nasz zespół doświadczonych specjalistów pracuje nad czymś, co <span class="highlight">fundamentalnie</span> zmieni sposób, w jaki postrzegasz marketing.</p>
        <p>A to dopiero początek. Mamy w zanadrzu coś, co wykracza poza tradycyjne podejście do marketingu i wprowadzi Twój biznes na zupełnie <span class="highlight-pink">nowy poziom</span>.</p>
      </div>
      
      <div class="timer-container">
        <div class="timer-title">Odliczanie do premiery</div>
        <div class="timer">
          <div class="timer-box">
            <div id="days" class="timer-value">180</div>
            <div class="timer-label">Dni</div>
          </div>
          <div class="timer-box">
            <div id="hours" class="timer-value">00</div>
            <div class="timer-label">Godzin</div>
          </div>
          <div class="timer-box">
            <div id="minutes" class="timer-value">00</div>
            <div class="timer-label">Minut</div>
          </div>
          <div class="timer-box">
            <div id="seconds" class="timer-value">00</div>
            <div class="timer-label">Sekund</div>
          </div>
        </div>
      </div>
    </div>
    
    <footer>
      &copy; <span id="year">2025</span> BeReel. Wszystkie prawa zastrzeżone.
    </footer>
  </div>

  <script>
    // Generowanie cząsteczek w tle
    function createParticles() {
      const particlesContainer = document.getElementById('particles');
      const colors = ['#3DACE4', '#E84D7A', '#1d2a5a'];
      const particleCount = window.innerWidth < 768 ? 15 : 25;
      
      for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.className = 'particle';
        
        // Losowe właściwości
        const size = Math.random() * 10 + 5;
        const color = colors[Math.floor(Math.random() * colors.length)];
        const left = Math.random() * 100;
        const top = Math.random() * 100;
        const delay = Math.random() * 5;
        const duration = Math.random() * 10 + 10;
        
        // Zastosowanie styli
        particle.style.width = `${size}px`;
        particle.style.height = `${size}px`;
        particle.style.background = color;
        particle.style.left = `${left}%`;
        particle.style.top = `${top}%`;
        particle.style.animationDelay = `${delay}s`;
        particle.style.animationDuration = `${duration}s`;
        
        particlesContainer.appendChild(particle);
      }
    }
    
    // Funkcja do ustawienia daty docelowej (180 dni od teraz)
    function setCountdownDate(daysFromNow) {
      const now = new Date();
      const targetDate = new Date();
      targetDate.setDate(now.getDate() + daysFromNow);
      return targetDate;
    }
    
    // Aktualizacja roku w stopce
    document.getElementById('year').textContent = new Date().getFullYear();
    
    // Domyślnie 180 dni
    let countdownDate = setCountdownDate(180);
    
    // Funkcja do aktualizacji licznika
    function updateCountdown() {
      const now = new Date().getTime();
      const distance = countdownDate - now;
      
      const days = Math.floor(distance / (1000 * 60 * 60 * 24));
      const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((distance % (1000 * 60)) / 1000);
      
      document.getElementById('days').textContent = days.toString().padStart(2, '0');
      document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
      document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
      document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
      
      if (distance < 0) {
        clearInterval(countdownInterval);
        document.getElementById('days').textContent = '00';
        document.getElementById('hours').textContent = '00';
        document.getElementById('minutes').textContent = '00';
        document.getElementById('seconds').textContent = '00';
      }
    }
    
    // Funkcja do zmiany liczby dni w liczniku
    window.changeCountdownDays = function(days) {
      countdownDate = setCountdownDate(parseInt(days) || 180);
      updateCountdown();
    };
    
    // Inicjalizacja po załadowaniu strony
    document.addEventListener('DOMContentLoaded', function() {
      createParticles();
      updateCountdown();
      setInterval(updateCountdown, 1000);
    });
  </script>
  <?php wp_footer(); ?>
</body>
</html>