<!doctype html>
<html lang="it" dir="ltr">

<head>
  <meta charset="UTF-8" />
  <title>BarterBox — Scambia, vendi e compra articoli che non usi più</title>
  <meta name="description" content="Su BarterBox scambi, vendi o compri articoli che non usi più. Baratto puro, vendita classica o mix oggetto + denaro: tu scegli come trattare." />
  <link rel="canonical" href="https://barterbox.it/" />
  <!-- ♿ Zoom consentito sul web (accessibilità ipovedenti);
       l'app nativa lo blocca a runtime in NativeSetupBridge. -->
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-visual" />
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-title" content="BarterBox" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-touch-fullscreen" content="yes" />
  <!-- Smart App Banner: mostra "Apri in BarterBox" su iOS Safari e in-app browser -->
  <script>
    (function () {
      var m = document.createElement('meta');
      m.name = 'apple-itunes-app';
      m.content = 'app-id=6757169263, app-argument=' + window.location.href;
      document.head.appendChild(m);
    })();
  </script>
  <!-- Theme color dynamically managed by next-themes -->
  <meta name="theme-color" content="#f5f2ed" media="(prefers-color-scheme: light)" />
  <meta name="theme-color" content="#16181d" media="(prefers-color-scheme: dark)" />
  <meta name="apple-mobile-web-app-status-bar-style" content="default" />


  <!-- PWA Manifest -->
  <!-- Path ASSOLUTI (leading /): su rotte profonde come /item/:id i path relativi
       si risolverebbero sotto /item/ → 404. L'assoluto funziona sia sul web sia su
       Capacitor (l'app nativa carica sempre dalla root). -->
  <link rel="manifest" href="/manifest.json" />

  <!-- Favicon configuration -->
  <link rel="icon" href="/icon-512.png" type="image/png" sizes="512x512" />
  <link rel="icon" href="/icons/icon-96.png" type="image/png" sizes="96x96" />
  <link rel="shortcut icon" href="/icon-512.png" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />

  <!-- iOS Startup Image -->
  <link rel="apple-touch-startup-image" href="/apple-touch-icon.png" />

  <!-- 🚀 PERFORMANCE: Localized Fonts -->
  <link rel="preload" href="/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
  <link rel="preload" href="/fonts/Inter-Bold.woff2" as="font" type="font/woff2" crossorigin="anonymous" />


  <!-- 🚀 PERFORMANCE: Critical resource hints -->
  <link rel="preconnect" href="https://aixwvdyspudbxznyxjaw.supabase.co" crossorigin />
  <link rel="dns-prefetch" href="https://aixwvdyspudbxznyxjaw.supabase.co" />

  <!-- Robots meta per controllo indicizzazione -->
  <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />

  <!-- Cache control for HTML (note: real caching is set server-side) -->
  <meta http-equiv="Cache-Control" content="public, max-age=600" />

  <!-- Critical CSS inlining for LCP optimization -->
  <style>
    /* Critical above-the-fold styles for LCP optimization */
    .min-h-screen {
      min-height: 100vh;
    }

    .bg-gradient-to-br {
      background-image: linear-gradient(to bottom right,
          var(--tw-gradient-stops));
    }

    .from-orange-50 {
      --tw-gradient-from: #fff7ed;
      --tw-gradient-to: rgb(255 247 237 / 0);
      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    }

    .to-green-50 {
      --tw-gradient-to: #f0fdf4;
    }

    .flex {
      display: flex;
    }

    .items-center {
      align-items: center;
    }

    .justify-center {
      justify-content: center;
    }

    /* Critical hero text styles for faster LCP */
    .font-inter {
      font-family: "Inter", "system-ui", "ui-sans-serif", "sans-serif";
    }

    .font-bold {
      font-weight: 700;
    }

    .text-foreground {
      color: hsl(var(--foreground));
    }

    .will-change-auto {
      will-change: auto;
    }

    .relative {
      position: relative;
    }

    .z-10 {
      z-index: 10;
    }

    .text-center {
      text-align: center;
    }

    .mb-4 {
      margin-bottom: 1rem;
    }

    .md\:mb-6 {
      margin-bottom: 1.5rem;
    }

    .tracking-wide {
      letter-spacing: 0.025em;
    }

    .leading-tight {
      line-height: 1.25;
    }

    .text-4xl {
      font-size: 2.25rem;
      line-height: 2.5rem;
    }

    /* Critical styles for ItemCard grid - LCP optimization */
    .grid {
      display: grid;
    }

    .grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gap-3 {
      gap: 0.75rem;
    }

    .rounded-lg {
      border-radius: 0.5rem;
    }

    .object-contain {
      -o-object-fit: contain;
         object-fit: contain;
    }

    /* Critical logo styles for splash screen */
    .logo-gradient {
      background: linear-gradient(135deg,
          #ea580c 0%,
          #dc2626 50%,
          #16a34a 100%);
      border-radius: 1rem;
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
    }

    /* Layout shift prevention */
    .layout-shift-prevention {
      contain: layout style size;
      will-change: auto;
    }

    /* Skeleton loading for better perceived performance */
    .skeleton {
      background: linear-gradient(90deg,
          #f3f4f6 25%,
          #e5e7eb 50%,
          #f3f4f6 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
    }

    @keyframes shimmer {
      0% {
        background-position: -200% 0;
      }

      100% {
        background-position: 200% 0;
      }
    }

    /* Fast fade-in for initial content */
    @keyframes fadeInFast {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .fade-in-fast {
      animation: fadeInFast 0.3s ease-out forwards;
    }

    /* Animazione per contenuto non critico */
    @keyframes fadeInDelay {
      to {
        opacity: 1;
      }
    }

    /* Critical mobile optimizations */
    @media (max-width: 768px) {
      .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .gap-3 {
        gap: 0.5rem;
      }

      .text-4xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
      }
    }



  </style>

  <!-- Open Graph ottimizzato -->

  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://barterbox.it/" />
  <meta property="og:image" content="https://barterbox.it/icon-512.png" />
  <meta property="og:image:width" content="512" />
  <meta property="og:image:height" content="512" />
  <meta property="og:image:alt" content="BarterBox - Piattaforma di baratto digitale" />
  <meta property="og:site_name" content="BarterBox" />
  <meta property="og:locale" content="it_IT" />

  <!-- Twitter Cards ottimizzato -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@barterbox_app" />

  <meta name="twitter:image" content="https://barterbox.it/icon-512.png" />
  <meta name="twitter:image:alt" content="BarterBox - Piattaforma di baratto digitale" />


  <meta property="og:title" content="BarterBox — Scambia, vendi e compra articoli che non usi più" />
  <meta name="twitter:title" content="BarterBox — Scambia, vendi e compra articoli che non usi più" />
  <meta property="og:description"
    content="Su BarterBox scambi, vendi o compri articoli che non usi più. Baratto puro, vendita classica o mix oggetto + denaro: tu scegli come trattare." />
  <meta name="twitter:description"
    content="Su BarterBox scambi, vendi o compri articoli che non usi più. Baratto puro, vendita classica o mix oggetto + denaro: tu scegli come trattare." />

  <!-- Rilevamento tema prima del primo paint — previene flash tema sbagliato sullo shell -->
  <script>
    (function () {
      try {
        var t = localStorage.getItem('theme');
        var dark = t === 'dark' || ((!t || t === 'system') && matchMedia('(prefers-color-scheme: dark)').matches);
        if (dark) document.documentElement.classList.add('dark');
      } catch (e) {}
      // 🚀 FIX flash bianco su app nativa (iOS/Android): la WebView ha sfondo bianco
      // di default, mentre lo splash nativo + React splash sono scuri (#16181d).
      // Forziamo lo sfondo scuro su Capacitor PRIMA del primo paint per evitare il flash.
      try {
        var isCapacitor = !!(window.Capacitor && window.Capacitor.isNativePlatform && window.Capacitor.isNativePlatform())
          || location.protocol === 'capacitor:'
          || /Capacitor/i.test(navigator.userAgent || '');
        if (isCapacitor) {
          document.documentElement.classList.add('native-splash-bg');
        }
      } catch (e) {}
    })();
  </script>
  <style>
    /* Prevent white flash during initial load */
    html { background-color: hsl(210 20% 98%); }
    html.dark { background-color: hsl(220 15% 10%); }
    /* Native app: match splash background to avoid white flash before React renders */
    html.native-splash-bg,
    html.native-splash-bg body,
    html.native-splash-bg #root { background-color: #16181d; }
    body { background-color: inherit; }
  </style>
  <script type="module" crossorigin src="/assets/index-BVmKKQaH.js"></script>
  <link rel="modulepreload" crossorigin href="/assets/vendor-react-ecosystem-Bzf05SDJ.js">
  <link rel="modulepreload" crossorigin href="/assets/vendor-firebase-CVG-e27X.js">
  <link rel="modulepreload" crossorigin href="/assets/vendor-native-1oLG4UxV.js">
  <link rel="modulepreload" crossorigin href="/assets/vendor-supabase-DEVeUfrI.js">
  <link rel="stylesheet" crossorigin href="/assets/index-BM4mHaht.css">
<script id="vite-plugin-pwa:inline-sw">if('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('/sw.js', { scope: '/' })})}</script></head>

<body style="margin: 0; padding: 0;">
  <div id="root" style="min-height: 100vh;">

  </div>

  <!-- ✅ Disabilita log Workbox in development -->
  <script>
    // Disabilita tutti i log di Workbox prima che venga caricato
    if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
      self.__WB_DISABLE_DEV_LOGS = true;

      // 🧹 Rimuovi service worker esistente in development
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.getRegistrations().then(function (registrations) {
          for (let registration of registrations) {
            registration.unregister();
            console.log('🧹 Service Worker rimosso per dev mode');
          }
        });
      }

      // Intercetta e silenzia anche i log già emessi
      const originalConsoleLog = console.log;
      console.log = function () {
        const args = Array.from(arguments);
        const message = args.join(' ');

        // Silenzia tutti i log Workbox
        if (message.includes('workbox') ||
          message.includes('Workbox') ||
          message.includes('Precaching') ||
          message.includes('precaching') ||
          message.includes('Cache expiration') ||
          message.includes('No route found') ||
          message.includes('Router is responding')) {
          return;
        }

        // Passa gli altri log
        originalConsoleLog.apply(console, args);
      };
    }
  </script>


  <!-- Fallback script for mobile compatibility -->
  <script>
    // Silenzia warning non critici dalla console
    (function () {
      var originalConsoleWarn = console.warn;
      var originalConsoleError = console.error;

      // Filtra warning non critici
      console.warn = function () {
        var args = Array.prototype.slice.call(arguments);
        var message = args.join(" ");

        // Silenzia warning di feature non riconosciute (vengono da librerie esterne)
        if (message.indexOf("Unrecognized feature") !== -1) {
          return;
        }

        // Silenzia warning su iframe sandbox (normale per sicurezza)
        if (
          message.indexOf(
            "iframe which has both allow-scripts and allow-same-origin"
          ) !== -1
        ) {
          return;
        }

        // Silenzia warning su preload links (già gestiti)
        if (
          message.indexOf("was preloaded using link preload but not used") !==
          -1 ||
          message.indexOf("preload but not used") !== -1 ||
          message.indexOf("link preload but not used") !== -1
        ) {
          return;
        }

        // Silenzia warning su Violation (performance minori)
        if (message.indexOf("[Violation]") !== -1) {
          return;
        }

        // Silenzia warning memoria controllati (ora meno frequenti)
        if (message.indexOf("🚨 High memory usage detected") !== -1) {
          return;
        }

        // Chiama la funzione originale per altri warning
        originalConsoleWarn.apply(console, args);
      };

      // Filtra errori non critici
      console.error = function () {
        var args = Array.prototype.slice.call(arguments);
        var message = args.join(" ");

        // Silenzia errori da lovable.dev (ambiente di sviluppo)
        if (
          message.indexOf("lovable.dev") !== -1 ||
          message.indexOf("lovableproject.com") !== -1
        ) {
          return;
        }

        // Chiama la funzione originale per altri errori
        originalConsoleError.apply(console, args);
      };
    })();

    // Fallback for mobile devices that might have issues with module loading
    window.addEventListener("error", function (e) {
      try {
        var msg =
          "" + (e && (e.message || (e.error && e.error.message) || ""));
        // Estendi il filtro per includere errori postMessage e CORS
        if (
          msg.indexOf("WebSocket connection") !== -1 ||
          msg.indexOf("lovableproject.com") !== -1 ||
          msg.indexOf("postMessage") !== -1 ||
          msg.indexOf("lovable.dev") !== -1 ||
          msg.indexOf("gptengineer.app") !== -1 ||
          (msg.indexOf("CORS") !== -1 && msg.indexOf("manifest") !== -1)
        ) {
          // Silence noisy preview WS errors and Lovable dev errors
          e.preventDefault();
          return;
        }
      } catch (_) { }
      // Log only meaningful runtime errors
      if (e && e.error) {
        console.error("Global error caught:", e.error);
      }
      // Show user-friendly message for dynamic import failures
      if (
        e.error &&
        e.error.message &&
        e.error.message.includes(
          "Failed to fetch dynamically imported module"
        )
      ) {
        const root = document.getElementById("root");
        if (root && !root.innerHTML.includes("Errore di caricamento")) {
          root.innerHTML = `
              <div style="padding: 20px; text-align: center; font-family: system-ui;">
                <h2>Errore di caricamento</h2>
                <p>L'applicazione non è riuscita a caricarsi completamente. Prova a ricaricare la pagina.</p>
                <button onclick="window.location.reload()" style="padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer;">
                  Ricarica pagina
                </button>
              </div>
            `;
        }
      }
    });

    // Fallback for unhandled promise rejections
    window.addEventListener("unhandledrejection", function (e) {
      try {
        var rsn =
          "" + (e && ((e.reason && (e.reason.message || e.reason)) || ""));
        // Estendi il filtro per includere errori postMessage e CORS
        if (
          rsn.indexOf("WebSocket connection") !== -1 ||
          rsn.indexOf("lovableproject.com") !== -1 ||
          rsn.indexOf("postMessage") !== -1 ||
          rsn.indexOf("lovable.dev") !== -1 ||
          rsn.indexOf("gptengineer.app") !== -1 ||
          (rsn.indexOf("CORS") !== -1 && rsn.indexOf("manifest") !== -1)
        ) {
          e.preventDefault();
          return;
        }
      } catch (_) { }
      console.error("Unhandled promise rejection:", e.reason);
      // Prevent the default browser behavior
      e.preventDefault();
    });

    // Gestione errori di caricamento risorse (manifest, etc.)
    window.addEventListener(
      "error",
      function (e) {
        // Gestisce errori di caricamento risorse (non solo errori JavaScript)
        if (e.target && e.target.tagName) {
          var target = e.target;
          var src = target.src || target.href || "";

          // Silenzia errori di caricamento del manifest reindirizzato da Lovable
          if (
            src.indexOf("manifest.json") !== -1 ||
            src.indexOf("lovable.dev/auth-bridge") !== -1 ||
            src.indexOf("auth-bridge") !== -1
          ) {
            e.preventDefault();
            e.stopPropagation();
            return false;
          }
        }
      },
      true
    ); // Usa capture phase per intercettare prima
  </script>

  <!-- Remove unnecessary preload links injected by third parties and fix missing 'as' attributes -->
  <script>
    (function () {
      // Remove preload links for tracking pixels that aren't used immediately
      // Also ensure all preload links have proper 'as' attribute to avoid warnings
      function cleanupUnusedPreloads() {
        const preloadLinks = document.querySelectorAll('link[rel="preload"]');
        preloadLinks.forEach((link) => {
          const href = link.href;

          // Remove tracking pixel preloads that aren't used immediately
          if (
            href.includes("google-analytics.com") ||
            href.includes("googletagmanager.com") ||
            href.includes("googlesyndication.com") ||
            href.includes("doubleclick.net") ||
            href.includes("amazon-adsystem.com")
          ) {
            console.log("🧹 Removing unnecessary tracking preload:", href);
            link.remove();
            return;
          }

          // Ensure all preload links have 'as' attribute
          // If missing, try to infer from href or remove if can't determine
          if (!link.getAttribute("as")) {
            // Try to infer 'as' from file extension or URL
            if (href.match(/\.(js|mjs|jsx|tsx)$/i)) {
              link.setAttribute("as", "script");
            } else if (href.match(/\.css$/i)) {
              link.setAttribute("as", "style");
            } else if (href.match(/\.(woff2?|ttf|otf|eot)$/i)) {
              link.setAttribute("as", "font");
              link.setAttribute("crossorigin", "anonymous");
            } else if (href.match(/\.(jpg|jpeg|png|gif|webp|svg|avif|ico)$/i)) {
              link.setAttribute("as", "image");
            } else if (href.match(/\.(mp4|webm|ogg)$/i)) {
              link.setAttribute("as", "video");
            } else if (href.match(/\.(mp3|wav)$/i)) {
              link.setAttribute("as", "audio");
            } else if (href.match(/\.json$/i)) {
              link.setAttribute("as", "fetch");
              link.setAttribute("crossorigin", "anonymous");
            } else {
              // For unknown types, check if it's a critical resource that should be kept
              // Remove if we can't determine and it's not clearly needed
              if (!href.includes(window.location.hostname) &&
                !href.includes('fonts.googleapis.com') &&
                !href.includes('fonts.gstatic.com')) {
                console.log(
                  "🧹 Removing preload without determinable type:",
                  href
                );
                link.remove();
              } else {
                // For same-domain resources, default to 'script' but log the issue
                console.warn("⚠️ Preload without 'as' attribute (defaulting to script):", href);
                link.setAttribute("as", "script");
              }
            }
          }
        });
      }

      // Clean up immediately and on various events
      cleanupUnusedPreloads();

      // Clean up on DOM ready
      if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", cleanupUnusedPreloads);
      }

      // Also clean up after page load to catch dynamically added preloads
      window.addEventListener("load", () => {
        setTimeout(cleanupUnusedPreloads, 2000);
      });

      // Periodic cleanup to catch preloads added later (less frequent)
      setInterval(cleanupUnusedPreloads, 10000);
    })();
  </script>
</body>

</html>