Diagnoza B2B - Packaging<\/title>\r\n \r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n\r\n \r\n <style>\r\n @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }\r\n @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }\r\n \r\n .animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }\r\n .animate-slide-up { animation: slideUp 0.6s ease-out forwards; }\r\n \r\n \/* Zabezpieczenie przed konfliktami styl\u00f3w z motywami WordPress *\/\r\n #optipack-app {\r\n font-family: system-ui, -apple-system, sans-serif;\r\n background-color: transparent; \/* Dziedziczy t\u0142o strony lub mo\u017cna wymusi\u0107 #f8fafc *\/\r\n color: #0f172a; \/* text-slate-900 *\/\r\n line-height: 1.5;\r\n }\r\n #optipack-app * {\r\n box-sizing: border-box;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<div id=\"optipack-app\" class=\"w-full min-h-screen bg-slate-50 pb-12 rounded-xl overflow-hidden shadow-sm border border-slate-100\">\r\n \r\n \r\n <header class=\"bg-white border-b border-slate-200 sticky top-0 z-50\">\r\n <div class=\"max-w-7xl mx-auto px-4 h-16 flex items-center justify-between\">\r\n <div class=\"flex items-center gap-2 font-bold text-xl tracking-tight text-slate-900 cursor-pointer\" onclick=\"location.reload()\">\r\n <img decoding=\"async\" src=\"https:\/\/ekspertoptymalizacji.pl\/wp-content\/uploads\/2026\/03\/logo-kwadrat.jpg\" style=\"width:70px;\">\r\n <i data-lucide=\"bar-chart-3\" class=\"w-5 h-5\"><\/i>\r\n \r\n EkspertOptymalizacji.pl\r\n <\/div>\r\n <div id=\"header-subtitle\" class=\"text-sm font-semibold text-slate-400 hidden\">\r\n Diagnoza biznesowa B2B\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <main class=\"pt-8\">\r\n \r\n \r\n <div id=\"view-landing\" class=\"flex flex-col items-center justify-center min-h-[70vh] text-center px-4 animate-fade-in\">\r\n <div class=\"inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-100 text-slate-700 text-sm font-medium mb-8 border border-slate-200\">\r\n <i data-lucide=\"zap\" class=\"text-amber-500 w-4 h-4\"><\/i>\r\n Dla bran\u017cy opakowa\u0144 B2B\r\n <\/div>\r\n <h1 class=\"text-4xl md:text-6xl font-extrabold text-slate-900 tracking-tight max-w-4xl mb-6\">\r\n Sprawd\u017a, ile efektywno\u015bci traci Twoja firma produkcyjna\r\n <\/h1>\r\n <p class=\"text-lg md:text-xl text-slate-600 max-w-2xl mb-10\">\r\n Bezp\u0142atne narz\u0119dzie diagnostyczne dla bran\u017cy opakowa\u0144. Zidentyfikuj luki operacyjne, luki w automatyzacji oraz gotowo\u015b\u0107 na regulacje UE w mniej ni\u017c 2 minuty.\r\n <\/p>\r\n \r\n <button onclick=\"app.startQuiz()\" class=\"group relative inline-flex items-center justify-center gap-2 px-8 py-4 bg-slate-900 text-white font-semibold rounded-full overflow-hidden transition-all hover:bg-slate-800 hover:shadow-lg hover:shadow-slate-900\/20 active:scale-95 text-lg\">\r\n Rozpocznij darmow\u0105 diagnoz\u0119\r\n <i data-lucide=\"arrow-right\" class=\"w-5 h-5 group-hover:translate-x-1 transition-transform\"><\/i>\r\n <\/button>\r\n\r\n <div class=\"mt-16 flex flex-col items-center gap-4 text-slate-500 text-sm\">\r\n <p class=\"font-medium uppercase tracking-wider text-xs text-slate-400\">Zaufali nam liderzy optymalizacji<\/p>\r\n <div class=\"flex flex-wrap justify-center gap-8 opacity-60 grayscale\">\r\n <div class=\"flex items-center gap-2 font-bold text-xl\"><i data-lucide=\"settings\"><\/i> FlexiPack<\/div>\r\n <div class=\"flex items-center gap-2 font-bold text-xl\"><i data-lucide=\"leaf\"><\/i> EcoCarton<\/div>\r\n <div class=\"flex items-center gap-2 font-bold text-xl\"><i data-lucide=\"trending-up\"><\/i> ProPlast<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"view-quiz\" class=\"hidden w-full max-w-2xl mx-auto px-4 py-8 animate-fade-in\">\r\n \r\n <div class=\"mb-12\">\r\n <div class=\"flex justify-between items-center text-sm text-slate-500 font-medium mb-3\">\r\n <span id=\"quiz-step-text\">Krok 1 z 10<\/span>\r\n <span class=\"flex items-center gap-1.5 bg-slate-100 px-2.5 py-1 rounded-md\">\r\n <i data-lucide=\"clock\" class=\"w-3.5 h-3.5\"><\/i>\r\n <span id=\"quiz-time-text\">~2 minuty do ko\u0144ca<\/span>\r\n <\/span>\r\n <\/div>\r\n <div class=\"w-full h-1.5 bg-slate-100 rounded-full overflow-hidden\">\r\n <div id=\"quiz-progress-bar\" class=\"h-full bg-blue-600 transition-all duration-500 ease-out rounded-full\" style=\"width: 0%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"quiz-question-container\" class=\"animate-slide-up\">\r\n <h2 id=\"quiz-question-text\" class=\"text-2xl md:text-3xl font-bold text-slate-900 mb-3 leading-tight\">\r\n Pytanie...\r\n <\/h2>\r\n <p id=\"quiz-microcopy-text\" class=\"text-slate-500 mb-8 text-lg\">\r\n Mikrocopy...\r\n <\/p>\r\n\r\n \r\n <div id=\"quiz-options\" class=\"flex flex-col gap-3\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"view-lead\" class=\"hidden w-full max-w-xl mx-auto px-4 py-8 animate-fade-in\">\r\n <div class=\"text-center mb-10\">\r\n <div class=\"inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 text-green-600 mb-6\">\r\n <i data-lucide=\"check-circle-2\" class=\"w-8 h-8\"><\/i>\r\n <\/div>\r\n <h2 class=\"text-3xl font-bold text-slate-900 mb-4\">Analiza zako\u0144czona!<\/h2>\r\n <p class=\"text-slate-600 text-lg\">\r\n Tw\u00f3j spersonalizowany raport oraz wynik diagnozy s\u0105 ju\u017c gotowe. Podaj dane kontaktowe, aby odblokowa\u0107 dost\u0119p.\r\n <\/p>\r\n <\/div>\r\n\r\n <form id=\"lead-form\" class=\"space-y-5 bg-white p-6 md:p-8 rounded-2xl border border-slate-200 shadow-xl shadow-slate-200\/50\">\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-5\">\r\n <div class=\"space-y-1.5\">\r\n <label class=\"text-sm font-semibold text-slate-700\">Imi\u0119 i nazwisko *<\/label>\r\n <input type=\"text\" id=\"form-name\" class=\"w-full px-4 py-3 rounded-lg border border-slate-200 bg-slate-50 focus:bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all\" placeholder=\"Jan Kowalski\">\r\n <p id=\"error-name\" class=\"text-red-500 text-xs mt-1 hidden\">Imi\u0119 jest wymagane<\/p>\r\n <\/div>\r\n\r\n <div class=\"space-y-1.5\">\r\n <label class=\"text-sm font-semibold text-slate-700\">Email s\u0142u\u017cbowy *<\/label>\r\n <input type=\"email\" id=\"form-email\" class=\"w-full px-4 py-3 rounded-lg border border-slate-200 bg-slate-50 focus:bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all\" placeholder=\"jan@firma.pl\">\r\n <p id=\"error-email\" class=\"text-red-500 text-xs mt-1 hidden\">Podaj poprawny adres email<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-5\">\r\n <div class=\"space-y-1.5\">\r\n <label class=\"text-sm font-semibold text-slate-700\">Numer telefonu *<\/label>\r\n <input type=\"tel\" id=\"form-phone\" class=\"w-full px-4 py-3 rounded-lg border border-slate-200 bg-slate-50 focus:bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all\" placeholder=\"+48 000 000 000\">\r\n <p id=\"error-phone\" class=\"text-red-500 text-xs mt-1 hidden\">Telefon jest wymagany<\/p>\r\n <\/div>\r\n\r\n <div class=\"space-y-1.5\">\r\n <label class=\"text-sm font-semibold text-slate-700\">Nazwa firmy (opcjonalnie)<\/label>\r\n <input type=\"text\" id=\"form-company\" class=\"w-full px-4 py-3 rounded-lg border border-slate-200 bg-slate-50 focus:bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all\" placeholder=\"Firma Sp. z o.o.\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pt-6 border-t border-slate-100 space-y-4\">\r\n \r\n <label class=\"flex items-start gap-3 cursor-pointer group\">\r\n <div class=\"relative flex items-start pt-0.5\">\r\n <input type=\"checkbox\" id=\"form-rodo\" class=\"w-5 h-5 rounded border-slate-300 text-blue-600 focus:ring-blue-500 transition-all cursor-pointer\">\r\n <\/div>\r\n <div class=\"flex-1\">\r\n <p id=\"error-rodo-text\" class=\"text-sm text-slate-600\">\r\n * Wyra\u017cam zgod\u0119 na przetwarzanie moich danych osobowych przez DIGITAL-IMAGES sp. z o.o. w celu kontaktu i przedstawienia raportu.\r\n <\/p>\r\n <\/div>\r\n <\/label>\r\n\r\n \r\n <div class=\"pl-8 space-y-3\">\r\n <label class=\"flex items-start gap-3 cursor-pointer\">\r\n <input type=\"checkbox\" id=\"form-marketing\" class=\"w-4 h-4 rounded border-slate-300 text-blue-600 mt-0.5\">\r\n <span class=\"text-xs text-slate-500\">Chc\u0119 otrzymywa\u0107 materia\u0142y edukacyjne i marketingowe. (Opcjonalnie)<\/span>\r\n <\/label>\r\n <label class=\"flex items-start gap-3 cursor-pointer\">\r\n <input type=\"checkbox\" id=\"form-email-consent\" class=\"w-4 h-4 rounded border-slate-300 text-blue-600 mt-0.5\">\r\n <span class=\"text-xs text-slate-500\">Zgoda na komunikacj\u0119 e-mail. (Opcjonalnie)<\/span>\r\n <\/label>\r\n <label class=\"flex items-start gap-3 cursor-pointer\">\r\n <input type=\"checkbox\" id=\"form-phone-consent\" class=\"w-4 h-4 rounded border-slate-300 text-blue-600 mt-0.5\">\r\n <span class=\"text-xs text-slate-500\">Zgoda na kontakt telefoniczny. (Opcjonalnie)<\/span>\r\n <\/label>\r\n <\/div>\r\n \r\n <div class=\"pt-4 text-[10px] text-slate-400 leading-relaxed\">\r\n Administratorem Danych jest DIGITAL-IMAGES sp. z o.o. Dane s\u0105 przetwarzane w celu obs\u0142ugi zapytania i przedstawienia wynik\u00f3w diagnozy. Przys\u0142uguje Ci prawo dost\u0119pu do danych, ich poprawiania, \u017c\u0105dania usuni\u0119cia, a tak\u017ce prawo wycofania zgody w dowolnym momencie. Pe\u0142ne informacje znajduj\u0105 si\u0119 w Polityce Prywatno\u015bci.\r\n <\/div>\r\n <\/div>\r\n\r\n <button type=\"submit\" id=\"submit-btn\" class=\"w-full flex items-center justify-center gap-2 py-4 bg-slate-900 text-white font-semibold rounded-xl hover:bg-slate-800 transition-all disabled:opacity-70 disabled:cursor-not-allowed mt-4 text-lg shadow-lg shadow-slate-900\/10\">\r\n <span id=\"submit-btn-text\">Zobacz m\u00f3j raport<\/span>\r\n <i data-lucide=\"arrow-right\" id=\"submit-btn-icon\" class=\"w-5 h-5\"><\/i>\r\n \r\n <svg id=\"submit-btn-spinner\" class=\"animate-spin hidden w-6 h-6 text-white\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"><\/circle>\r\n <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"><\/path>\r\n <\/svg>\r\n <\/button>\r\n <\/form>\r\n <\/div>\r\n\r\n \r\n <div id=\"view-report\" class=\"hidden w-full max-w-4xl mx-auto px-4 py-8 animate-fade-in\">\r\n <div class=\"bg-white rounded-3xl border border-slate-200 shadow-2xl shadow-slate-200\/50 overflow-hidden\">\r\n \r\n \r\n <div id=\"report-header\" class=\"border-b p-8 md:p-12 flex flex-col md:flex-row items-center justify-between gap-8 relative overflow-hidden\">\r\n <div class=\"absolute top-0 right-0 w-64 h-64 bg-white\/40 rounded-full blur-3xl -translate-y-1\/2 translate-x-1\/2\"><\/div>\r\n \r\n <div class=\"flex-1 relative z-10 text-center md:text-left\">\r\n <h4 class=\"text-sm font-bold tracking-widest uppercase mb-2 opacity-80 flex items-center justify-center md:justify-start gap-2\">\r\n <i data-lucide=\"bar-chart-3\" class=\"w-4 h-4\"><\/i> Wynik diagnozy operacyjnej\r\n <\/h4>\r\n <h1 id=\"report-title\" class=\"text-3xl md:text-5xl font-extrabold mb-4 leading-tight\">Tytu\u0142...<\/h1>\r\n <p id=\"report-desc\" class=\"text-slate-700 text-lg md:text-xl font-medium max-w-xl leading-relaxed\">Opis...<\/p>\r\n <\/div>\r\n\r\n <div class=\"relative z-10 flex flex-col items-center\">\r\n <div class=\"w-40 h-40 md:w-48 md:h-48 relative flex items-center justify-center bg-white rounded-full shadow-xl\">\r\n <svg class=\"w-full h-full absolute top-0 left-0 -rotate-90 p-2\" viewBox=\"0 0 100 100\">\r\n <circle cx=\"50\" cy=\"50\" r=\"46\" fill=\"transparent\" stroke=\"#f1f5f9\" stroke-width=\"8\" \/>\r\n <circle id=\"report-circle\" cx=\"50\" cy=\"50\" r=\"46\" fill=\"transparent\" stroke=\"currentColor\" stroke-width=\"8\" stroke-dasharray=\"289.026\" stroke-dashoffset=\"289.026\" stroke-linecap=\"round\" style=\"transition: stroke-dashoffset 1.5s ease-in-out\" \/>\r\n <\/svg>\r\n <div class=\"text-center\">\r\n <span id=\"report-score-number\" class=\"text-5xl font-black\">0<\/span>\r\n <span class=\"text-slate-400 font-bold text-xl\">\/100<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-4 bg-white px-4 py-1.5 rounded-full text-sm font-bold text-slate-800 shadow-sm border border-slate-100\">\r\n Score B2B\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-slate-900 text-white p-6 md:p-8 text-center border-b-4 border-amber-500 relative overflow-hidden\">\r\n <div class=\"absolute inset-0 opacity-10 flex items-center justify-center pointer-events-none\">\r\n <i data-lucide=\"alert-circle\" class=\"w-48 h-48\"><\/i>\r\n <\/div>\r\n <p class=\"text-lg md:text-2xl font-medium relative z-10 max-w-3xl mx-auto leading-relaxed\">\r\n Na podstawie Twoich odpowiedzi, <span class=\"text-amber-400 font-bold\">Twoja firma mo\u017ce traci\u0107 nawet 15\u201330% efektywno\u015bci operacyjnej<\/span> wzgl\u0119dem zoptymalizowanej konkurencji.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"p-8 md:p-12 grid grid-cols-1 md:grid-cols-2 gap-12\">\r\n \r\n <div>\r\n <div class=\"flex items-center gap-3 mb-6\">\r\n <div class=\"w-10 h-10 rounded-xl bg-red-100 text-red-600 flex items-center justify-center\">\r\n <i data-lucide=\"alert-circle\" class=\"w-6 h-6\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-2xl font-bold text-slate-900\">Zidentyfikowane luki<\/h3>\r\n <\/div>\r\n <ul id=\"report-problems\" class=\"space-y-4\">\r\n \r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <div class=\"flex items-center gap-3 mb-6\">\r\n <div class=\"w-10 h-10 rounded-xl bg-emerald-100 text-emerald-600 flex items-center justify-center\">\r\n <i data-lucide=\"shield-check\" class=\"w-6 h-6\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-2xl font-bold text-slate-900\">Rekomendowane kroki<\/h3>\r\n <\/div>\r\n <ul id=\"report-recommendations\" class=\"space-y-4\">\r\n \r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-slate-50 p-8 text-center border-t border-slate-200\">\r\n <p class=\"text-slate-600 mb-6 font-medium max-w-2xl mx-auto\">\r\n Chcesz om\u00f3wi\u0107 te wyniki ze specjalist\u0105 i zaplanowa\u0107 map\u0119 drogow\u0105 optymalizacji dla Twojego zak\u0142adu?\r\n <\/p>\r\n <button class=\"px-8 py-4 bg-blue-600 text-white font-bold rounded-xl hover:bg-blue-700 transition-colors shadow-lg shadow-blue-600\/20 text-lg\" onclick=\"window.location.href='https:\/\/spotkania.digital-images.pl\/'\">\r\n Um\u00f3w bezp\u0142atn\u0105 konsultacj\u0119\r\n <\/button>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/main>\r\n<\/div>\r\n\r\n\r\n<script>\r\n \/\/ Inicjalizacja ikon Lucide\r\n lucide.createIcons();\r\n\r\n \/\/ --- DANE I KONFIGURACJA ---\r\n const QUESTIONS = [\r\n { text: \"Jak zmienia\u0142y si\u0119 koszty surowc\u00f3w i energii w Twojej firmie w ci\u0105gu ostatnich 12 miesi\u0119cy?\", microcopy: \"To pomo\u017ce nam oceni\u0107 Twoj\u0105 ekspozycj\u0119 na ryzyko rynkowe i efektywno\u015b\u0107 kosztow\u0105.\", options: [ { text: \"Spad\u0142y\", score: 10 }, { text: \"Pozosta\u0142y stabilne\", score: 8 }, { text: \"Wzros\u0142y umiarkowanie (5\u201320%)\", score: 5 }, { text: \"Wzros\u0142y znacz\u0105co (>20%)\", score: 2 }, { text: \"Nie monitorujemy koszt\u00f3w produkcji\", score: 0 } ] },\r\n { text: \"Jak zmieni\u0142a si\u0119 mar\u017ca netto Twojej firmy w ostatnich 24 miesi\u0105cach?\", microcopy: \"Mar\u017cowo\u015b\u0107 to g\u0142\u00f3wny wska\u017anik zdrowia biznesu produkcyjnego.\", options: [ { text: \"Wzros\u0142a\", score: 10 }, { text: \"Pozosta\u0142a bez zmian\", score: 8 }, { text: \"Spad\u0142a nieznacznie\", score: 5 }, { text: \"Spad\u0142a znacz\u0105co\", score: 2 }, { text: \"Nie analizujemy regularnie mar\u017cowo\u015bci\", score: 0 } ] },\r\n { text: \"Na jakim poziomie wykorzystujesz moce produkcyjne?\", microcopy: \"Optymalne wykorzystanie maszyn bezpo\u015brednio wp\u0142ywa na ROI.\", options: [ { text: \"80\u201395%\", score: 10 }, { text: \"Powy\u017cej 95%\", score: 8 }, { text: \"60\u201380%\", score: 5 }, { text: \"Poni\u017cej 60%\", score: 2 }, { text: \"Nie analizujemy wykorzystania mocy\", score: 0 } ] },\r\n { text: \"Jak oceniasz poziom automatyzacji w firmie?\", microcopy: \"Od planowania po produkcj\u0119 i magazynowanie.\", options: [ { text: \"Bardzo wysoki (AI \/ pe\u0142na optymalizacja)\", score: 10 }, { text: \"Wysoki\", score: 8 }, { text: \"\u015aredni\", score: 5 }, { text: \"Niski (dominuj\u0105 procesy manualne)\", score: 2 }, { text: \"Nie mierzymy efektywno\u015bci proces\u00f3w\", score: 0 } ] },\r\n { text: \"Na ile jeste\u015b przygotowany na regulacje UE (PPWR \/ ESG)?\", microcopy: \"Nowe dyrektywy drastycznie zmieni\u0105 rynek opakowa\u0144 w najbli\u017cszych latach.\", options: [ { text: \"W pe\u0142ni zgodni\", score: 10 }, { text: \"W wi\u0119kszo\u015bci zgodni\", score: 8 }, { text: \"Cz\u0119\u015bciowo przygotowani\", score: 4 }, { text: \"Nie jeste\u015bmy przygotowani\", score: 0 }, { text: \"Nie analizowali\u015bmy tego\", score: 0 } ] },\r\n { text: \"Czy oferujesz opakowania ekologiczne?\", microcopy: \"Rynek wymusza transformacj\u0119 w kierunku zr\u00f3wnowa\u017conego rozwoju.\", options: [ { text: \"Tak \u2013 to kluczowy element strategii\", score: 10 }, { text: \"Tak \u2013 cz\u0119\u015b\u0107 oferty\", score: 7 }, { text: \"W ograniczonym zakresie\", score: 3 }, { text: \"Nie\", score: 0 }, { text: \"Nie rozwijamy tego obszaru\", score: 0 } ] },\r\n { text: \"Jak oceniasz dost\u0119pno\u015b\u0107 surowc\u00f3w z recyklingu dla Twojej produkcji?\", microcopy: \"Zabezpieczenie \u0142a\u0144cucha dostaw to dzisiaj przewaga konkurencyjna.\", options: [ { text: \"Dobrze zabezpieczona\", score: 10 }, { text: \"Stabilna\", score: 8 }, { text: \"Ograniczona\", score: 4 }, { text: \"Bardzo ograniczona\", score: 2 }, { text: \"Nie analizujemy d\u0142ugoterminowo\", score: 0 } ] },\r\n { text: \"Sk\u0105d pochodzi wi\u0119kszo\u015b\u0107 Twoich klient\u00f3w B2B?\", microcopy: \"Dywersyfikacja \u017ar\u00f3de\u0142 akwizycji to mniejsze ryzyko.\", options: [ { text: \"E-commerce \/ platformy zakupowe\", score: 10 }, { text: \"Inbound (strona internetowa \/ marketing)\", score: 8 }, { text: \"Handlowcy (sprzeda\u017c aktywna)\", score: 6 }, { text: \"Sta\u0142e relacje \/ z polecenia\", score: 4 } ] },\r\n { text: \"Czy oferujesz konfiguracj\u0119 online lub natychmiastow\u0105 wycen\u0119?\", microcopy: \"Klienci B2B coraz cz\u0119\u015bciej oczekuj\u0105 do\u015bwiadcze\u0144 zakupowych znanych z B2C.\", options: [ { text: \"W pe\u0142ni automatyczny konfigurator\", score: 10 }, { text: \"Cz\u0119\u015bciowo online\", score: 7 }, { text: \"Tylko manualnie (mail \/ handlowiec)\", score: 4 }, { text: \"Nie oferujemy wycen przed audytem\", score: 0 } ] },\r\n { text: \"Jak cz\u0119sto wprowadzasz nowe produkty lub innowacje procesowe?\", microcopy: \"Brak innowacji to w dzisiejszych czasach powolne cofanie si\u0119.\", options: [ { text: \"Regularnie (ci\u0105g\u0142e doskonalenie)\", score: 10 }, { text: \"Kilka razy w roku\", score: 8 }, { text: \"Raz w roku\", score: 5 }, { text: \"Rzadziej ni\u017c raz w roku\", score: 2 }, { text: \"Brak uporz\u0105dkowanego procesu\", score: 0 } ] }\r\n ];\r\n\r\n const RESULTS_LOGIC = [\r\n { min: 0, max: 30, title: \"Firma wysokiego ryzyka operacyjnego\", description: \"Tw\u00f3j biznes jest zagro\u017cony przez brak kontroli, automatyzacji i przygotowania regulacyjnego. Obecny model dzia\u0142ania mo\u017ce wkr\u00f3tce przesta\u0107 by\u0107 rentowny na zmieniaj\u0105cym si\u0119 rynku.\", problems: [ \"Brak monitoringu kluczowych wska\u017anik\u00f3w finansowych.\", \"Niska \u015bwiadomo\u015b\u0107 nadchodz\u0105cych regulacji UE.\", \"Uzale\u017cnienie od manualnych proces\u00f3w i przestarza\u0142ych kana\u0142\u00f3w sprzeda\u017cy.\" ], recommendations: [ \"Pilne wdro\u017cenie system\u00f3w monitoringu koszt\u00f3w i mar\u017cy.\", \"Rozpocz\u0119cie audytu proces\u00f3w pod k\u0105tem ich automatyzacji.\", \"Analiza luk i przygotowanie strategii dostosowania do regulacji UE (PPWR).\" ], color: \"text-red-600\", bg: \"bg-red-50\", border: \"border-red-200\" },\r\n { min: 31, max: 60, title: \"Firma z du\u017cym potencja\u0142em optymalizacji\", description: \"Firma funkcjonuje i ma klient\u00f3w, ale z powodu braku sp\u00f3jnej strategii cyfrowej i operacyjnej tracicie efektywno\u015b\u0107 i mar\u017c\u0119. Wymagane s\u0105 zdecydowane kroki usprawniaj\u0105ce.\", problems: [ \"Niepe\u0142ne wykorzystanie mocy produkcyjnych.\", \"Reaktywne podej\u015bcie do innowacji i ekologii.\", \"Sprzeda\u017c oparta w du\u017cej mierze na tradycyjnych metodach.\" ], recommendations: [ \"Zwi\u0119kszenie poziomu automatyzacji w kluczowych w\u0105skich gard\u0142ach.\", \"Optymalizacja planowania w celu lepszego wykorzystania mocy maszyn.\", \"Rozw\u00f3j cyfrowych kana\u0142\u00f3w pozyskiwania lead\u00f3w i obs\u0142ugi klienta (Inbound).\" ], color: \"text-orange-600\", bg: \"bg-orange-50\", border: \"border-orange-200\" },\r\n { min: 61, max: 80, title: \"Firma gotowa do skalowania\", description: \"Masz solidne, zdrowe podstawy operacyjne. Firma jest \u015bwiadoma trend\u00f3w rynkowych, ale brakuje kilku nowoczesnych element\u00f3w, by znacz\u0105co przyspieszy\u0107 i odskoczy\u0107 konkurencji.\", problems: [ \"Proces wyceny i ofertowania nadal zajmuje zbyt du\u017co czasu.\", \"Dane produkcyjne i sprzeda\u017cowe nie s\u0105 w pe\u0142ni zintegrowane.\", \"Wymagane jest wzmocnienie pozycjonowania jako dostawcy rozwi\u0105za\u0144 eko.\" ], recommendations: [ \"Wdro\u017cenie konfiguratora B2B online dla natychmiastowych wycen.\", \"Szybszy rozw\u00f3j i promocja portfolio produkt\u00f3w ekologicznych.\", \"Poprawa analityki danych z wykorzystaniem narz\u0119dzi BI.\" ], color: \"text-blue-600\", bg: \"bg-blue-50\", border: \"border-blue-200\" },\r\n { min: 81, max: 100, title: \"Nowoczesny lider bran\u017cy\", description: \"Znakomity wynik. Twoja firma jest wysoce zoptymalizowana, zautomatyzowana i gotowa na zmiany rynkowe. Jeste\u015bcie w idealnej pozycji do agresywnej ekspansji.\", problems: [ \"G\u0142\u00f3wnym wyzwaniem jest utrzymanie tempa innowacji.\", \"Ryzyko zwi\u0105zane z retencj\u0105 wysoko wykwalifikowanych specjalist\u00f3w.\", \"Konieczno\u015b\u0107 ci\u0105g\u0142ego optymalizowania \u0142a\u0144cucha dostaw.\" ], recommendations: [ \"Eksploracja i inwestycje w zaawansowan\u0105 sztuczn\u0105 inteligencj\u0119 (AI) w produkcji.\", \"Ekspansja na nowe rynki zagraniczne wykorzystuj\u0105c cyfrow\u0105 przewag\u0119.\", \"Budowa w\u0142asnych platform cyfrowych do pe\u0142nej integracji z systemami klient\u00f3w.\" ], color: \"text-emerald-600\", bg: \"bg-emerald-50\", border: \"border-emerald-200\" }\r\n ];\r\n\r\n \/\/ --- STAN APLIKACJI ---\r\n \/\/ --- STATE ---\r\nconst appState = {\r\n currentStep: 0,\r\n answers: [],\r\n totalScore: 0\r\n};\r\n\r\n\/\/ --- VIEWS ---\r\nconst views = {\r\n landing: document.getElementById('view-landing'),\r\n quiz: document.getElementById('view-quiz'),\r\n lead: document.getElementById('view-lead'),\r\n report: document.getElementById('view-report'),\r\n};\r\n\r\n\/\/ --- APP ---\r\nconst app = {\r\n\r\n switchView(viewName) {\r\n Object.values(views).forEach(v => v.classList.add('hidden'));\r\n views[viewName].classList.remove('hidden');\r\n\r\n const headerSubtitle = document.getElementById('header-subtitle');\r\n if(viewName === 'quiz') headerSubtitle.classList.remove('hidden');\r\n else headerSubtitle.classList.add('hidden');\r\n\r\n document.getElementById('optipack-app').scrollIntoView({ behavior: 'smooth' });\r\n },\r\n\r\n startQuiz() {\r\n appState.currentStep = 0;\r\n appState.answers = [];\r\n this.renderQuestion();\r\n this.switchView('quiz');\r\n },\r\n\r\n renderQuestion() {\r\n const q = QUESTIONS[appState.currentStep];\r\n const total = QUESTIONS.length;\r\n const progress = (appState.currentStep \/ total) * 100;\r\n const timeRemaining = Math.ceil((total - appState.currentStep) * 0.2);\r\n\r\n document.getElementById('quiz-step-text').textContent = `Krok ${appState.currentStep + 1} z ${total}`;\r\n document.getElementById('quiz-time-text').textContent = `~${timeRemaining} ${timeRemaining === 1 ? 'minuta' : 'minuty'} do ko\u0144ca`;\r\n document.getElementById('quiz-progress-bar').style.width = `${progress}%`;\r\n\r\n const qContainer = document.getElementById('quiz-question-container');\r\n qContainer.classList.remove('animate-slide-up');\r\n void qContainer.offsetWidth;\r\n qContainer.classList.add('animate-slide-up');\r\n\r\n document.getElementById('quiz-question-text').textContent = q.text;\r\n document.getElementById('quiz-microcopy-text').textContent = q.microcopy;\r\n\r\n const optionsContainer = document.getElementById('quiz-options');\r\n optionsContainer.innerHTML = '';\r\n\r\n q.options.forEach(opt => {\r\n const btn = document.createElement('button');\r\n\r\n btn.className = `\r\n w-full text-left p-5 rounded-xl border-2 border-slate-200 bg-white\r\n hover:border-blue-600 hover:bg-blue-50\r\n transition-all duration-200\r\n shadow-sm hover:shadow-md\r\n active:scale-[0.98]\r\n `;\r\n\r\n btn.innerHTML = `\r\n <span class=\"text-lg font-medium text-slate-900\">\r\n ${opt.text}\r\n <\/span>\r\n `;\r\n\r\n \/\/ \ud83d\udd25 KLUCZOWE \u2013 przekazujemy pe\u0142ne dane\r\n btn.onclick = () => this.handleAnswer(opt.score, opt.text);\r\n\r\n optionsContainer.appendChild(btn);\r\n });\r\n},\r\n\r\n handleAnswer(score, answerText) {\r\n const questionText = QUESTIONS[appState.currentStep].text;\r\n\r\n appState.answers.push({\r\n score,\r\n question: questionText,\r\n answer: answerText\r\n });\r\n\r\n setTimeout(() => {\r\n if (appState.currentStep < QUESTIONS.length - 1) {\r\n appState.currentStep++;\r\n this.renderQuestion();\r\n } else {\r\n this.switchView('lead');\r\n }\r\n }, 300);\r\n },\r\n\r\n setupForm() {\r\n const form = document.getElementById('lead-form');\r\n\r\n form.addEventListener('submit', async (e) => {\r\n e.preventDefault();\r\n\r\n const name = document.getElementById('form-name');\r\n const email = document.getElementById('form-email');\r\n const phone = document.getElementById('form-phone');\r\n const rodo = document.getElementById('form-rodo');\r\n\r\n let isValid = true;\r\n\r\n const toggleError = (id, condition) => {\r\n const el = document.getElementById(`error-${id}`);\r\n const input = document.getElementById(`form-${id}`);\r\n if(condition) {\r\n el.classList.remove('hidden');\r\n if(input) input.classList.add('border-red-500');\r\n isValid = false;\r\n } else {\r\n el.classList.add('hidden');\r\n if(input) input.classList.remove('border-red-500');\r\n }\r\n };\r\n\r\n toggleError('name', !name.value.trim());\r\n toggleError('email', !email.value.trim() || !\/^\\S+@\\S+\\.\\S+$\/.test(email.value));\r\n toggleError('phone', !phone.value.trim());\r\n\r\n if(!rodo.checked) isValid = false;\r\n\r\n if(isValid) {\r\n await this.submitData();\r\n }\r\n });\r\n },\r\n\r\n async submitData() {\r\n const btn = document.getElementById('submit-btn');\r\n const text = document.getElementById('submit-btn-text');\r\n const icon = document.getElementById('submit-btn-icon');\r\n const spinner = document.getElementById('submit-btn-spinner');\r\n\r\n btn.disabled = true;\r\n text.classList.add('hidden');\r\n icon.classList.add('hidden');\r\n spinner.classList.remove('hidden');\r\n\r\n const name = document.getElementById('form-name').value;\r\n const email = document.getElementById('form-email').value;\r\n const phone = document.getElementById('form-phone').value;\r\n const company = document.getElementById('form-company').value;\r\n\r\n \/\/ \ud83d\udd25 LICZENIE SCORE\r\n appState.totalScore = appState.answers.reduce((sum, a) => sum + a.score, 0);\r\n\r\n try {\r\n await fetch('\/wp-json\/optipack\/v1\/submit', {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application\/json' },\r\n body: JSON.stringify({\r\n name,\r\n email,\r\n phone,\r\n company,\r\n score: appState.totalScore,\r\n answers: appState.answers\r\n })\r\n });\r\n } catch (e) {\r\n console.error('API error:', e);\r\n }\r\n\r\n btn.disabled = false;\r\n text.classList.remove('hidden');\r\n icon.classList.remove('hidden');\r\n spinner.classList.add('hidden');\r\n\r\n this.generateReport();\r\n },\r\n\r\n generateReport() {\r\n const score = appState.totalScore;\r\n\r\n let result = RESULTS_LOGIC.find(r => score >= r.min && score <= r.max);\r\n if (!result) result = RESULTS_LOGIC[0];\r\n\r\n const header = document.getElementById('report-header');\r\n header.className = `border-b p-8 md:p-12 flex flex-col md:flex-row items-center justify-between gap-8 ${result.bg} ${result.border}`;\r\n\r\n document.getElementById('report-title').className = `text-3xl md:text-5xl font-extrabold ${result.color}`;\r\n document.getElementById('report-title').textContent = result.title;\r\n\r\n document.getElementById('report-desc').textContent = result.description;\r\n\r\n document.getElementById('report-score-number').className = `text-5xl font-black ${result.color}`;\r\n document.getElementById('report-score-number').textContent = score;\r\n\r\n const circle = document.getElementById('report-circle');\r\n circle.setAttribute('class', result.color);\r\n\r\n setTimeout(() => {\r\n circle.style.strokeDashoffset = 289.026 - (289.026 * score) \/ 100;\r\n }, 100);\r\n\r\n document.getElementById('report-problems').innerHTML = result.problems.map(p => `\r\n <li class=\"flex gap-3 p-4 bg-slate-50 rounded-xl\">\r\n <div class=\"text-red-500\">\u2022<\/div>\r\n <span>${p}<\/span>\r\n <\/li>\r\n `).join('');\r\n\r\n document.getElementById('report-recommendations').innerHTML = result.recommendations.map(r => `\r\n <li class=\"flex gap-3 p-4 bg-slate-50 rounded-xl\">\r\n <div class=\"text-emerald-500\">\u2713<\/div>\r\n <span>${r}<\/span>\r\n <\/li>\r\n `).join('');\r\n\r\n lucide.createIcons();\r\n this.switchView('report');\r\n }\r\n};\r\n\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n app.setupForm();\r\n});\r\n\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Diagnoza B2B – Packaging EkspertOptymalizacji.pl Diagnoza biznesowa B2B Dla bran\u017cy opakowa\u0144 B2B Sprawd\u017a, ile efektywno\u015bci traci Twoja firma produkcyjna Bezp\u0142atne narz\u0119dzie diagnostyczne dla bran\u017cy opakowa\u0144. Zidentyfikuj luki operacyjne, luki w automatyzacji oraz gotowo\u015b\u0107 na regulacje UE w mniej ni\u017c 2 minuty. Rozpocznij darmow\u0105 diagnoz\u0119 Zaufali nam liderzy optymalizacji FlexiPack EcoCarton ProPlast Krok 1 z 10 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ekspertoptymalizacji.pl\/index.php\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekspertoptymalizacji.pl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ekspertoptymalizacji.pl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ekspertoptymalizacji.pl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekspertoptymalizacji.pl\/index.php\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":46,"href":"https:\/\/ekspertoptymalizacji.pl\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":270,"href":"https:\/\/ekspertoptymalizacji.pl\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions\/270"}],"wp:attachment":[{"href":"https:\/\/ekspertoptymalizacji.pl\/index.php\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Diagnoza B2B - Packaging<\/title>\r\n \r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n\r\n \r\n <style>\r\n @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }\r\n @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }\r\n \r\n .animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }\r\n .animate-slide-up { animation: slideUp 0.6s ease-out forwards; }\r\n \r\n \/* Zabezpieczenie przed konfliktami styl\u00f3w z motywami WordPress *\/\r\n #optipack-app {\r\n font-family: system-ui, -apple-system, sans-serif;\r\n background-color: transparent; \/* Dziedziczy t\u0142o strony lub mo\u017cna wymusi\u0107 #f8fafc *\/\r\n color: #0f172a; \/* text-slate-900 *\/\r\n line-height: 1.5;\r\n }\r\n #optipack-app * {\r\n box-sizing: border-box;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<div id=\"optipack-app\" class=\"w-full min-h-screen bg-slate-50 pb-12 rounded-xl overflow-hidden shadow-sm border border-slate-100\">\r\n \r\n \r\n <header class=\"bg-white border-b border-slate-200 sticky top-0 z-50\">\r\n <div class=\"max-w-7xl mx-auto px-4 h-16 flex items-center justify-between\">\r\n <div class=\"flex items-center gap-2 font-bold text-xl tracking-tight text-slate-900 cursor-pointer\" onclick=\"location.reload()\">\r\n <img decoding=\"async\" src=\"https:\/\/ekspertoptymalizacji.pl\/wp-content\/uploads\/2026\/03\/logo-kwadrat.jpg\" style=\"width:70px;\">\r\n <i data-lucide=\"bar-chart-3\" class=\"w-5 h-5\"><\/i>\r\n \r\n EkspertOptymalizacji.pl\r\n <\/div>\r\n <div id=\"header-subtitle\" class=\"text-sm font-semibold text-slate-400 hidden\">\r\n Diagnoza biznesowa B2B\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <main class=\"pt-8\">\r\n \r\n \r\n <div id=\"view-landing\" class=\"flex flex-col items-center justify-center min-h-[70vh] text-center px-4 animate-fade-in\">\r\n <div class=\"inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-100 text-slate-700 text-sm font-medium mb-8 border border-slate-200\">\r\n <i data-lucide=\"zap\" class=\"text-amber-500 w-4 h-4\"><\/i>\r\n Dla bran\u017cy opakowa\u0144 B2B\r\n <\/div>\r\n <h1 class=\"text-4xl md:text-6xl font-extrabold text-slate-900 tracking-tight max-w-4xl mb-6\">\r\n Sprawd\u017a, ile efektywno\u015bci traci Twoja firma produkcyjna\r\n <\/h1>\r\n <p class=\"text-lg md:text-xl text-slate-600 max-w-2xl mb-10\">\r\n Bezp\u0142atne narz\u0119dzie diagnostyczne dla bran\u017cy opakowa\u0144. Zidentyfikuj luki operacyjne, luki w automatyzacji oraz gotowo\u015b\u0107 na regulacje UE w mniej ni\u017c 2 minuty.\r\n <\/p>\r\n \r\n <button onclick=\"app.startQuiz()\" class=\"group relative inline-flex items-center justify-center gap-2 px-8 py-4 bg-slate-900 text-white font-semibold rounded-full overflow-hidden transition-all hover:bg-slate-800 hover:shadow-lg hover:shadow-slate-900\/20 active:scale-95 text-lg\">\r\n Rozpocznij darmow\u0105 diagnoz\u0119\r\n <i data-lucide=\"arrow-right\" class=\"w-5 h-5 group-hover:translate-x-1 transition-transform\"><\/i>\r\n <\/button>\r\n\r\n <div class=\"mt-16 flex flex-col items-center gap-4 text-slate-500 text-sm\">\r\n <p class=\"font-medium uppercase tracking-wider text-xs text-slate-400\">Zaufali nam liderzy optymalizacji<\/p>\r\n <div class=\"flex flex-wrap justify-center gap-8 opacity-60 grayscale\">\r\n <div class=\"flex items-center gap-2 font-bold text-xl\"><i data-lucide=\"settings\"><\/i> FlexiPack<\/div>\r\n <div class=\"flex items-center gap-2 font-bold text-xl\"><i data-lucide=\"leaf\"><\/i> EcoCarton<\/div>\r\n <div class=\"flex items-center gap-2 font-bold text-xl\"><i data-lucide=\"trending-up\"><\/i> ProPlast<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"view-quiz\" class=\"hidden w-full max-w-2xl mx-auto px-4 py-8 animate-fade-in\">\r\n \r\n <div class=\"mb-12\">\r\n <div class=\"flex justify-between items-center text-sm text-slate-500 font-medium mb-3\">\r\n <span id=\"quiz-step-text\">Krok 1 z 10<\/span>\r\n <span class=\"flex items-center gap-1.5 bg-slate-100 px-2.5 py-1 rounded-md\">\r\n <i data-lucide=\"clock\" class=\"w-3.5 h-3.5\"><\/i>\r\n <span id=\"quiz-time-text\">~2 minuty do ko\u0144ca<\/span>\r\n <\/span>\r\n <\/div>\r\n <div class=\"w-full h-1.5 bg-slate-100 rounded-full overflow-hidden\">\r\n <div id=\"quiz-progress-bar\" class=\"h-full bg-blue-600 transition-all duration-500 ease-out rounded-full\" style=\"width: 0%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"quiz-question-container\" class=\"animate-slide-up\">\r\n <h2 id=\"quiz-question-text\" class=\"text-2xl md:text-3xl font-bold text-slate-900 mb-3 leading-tight\">\r\n Pytanie...\r\n <\/h2>\r\n <p id=\"quiz-microcopy-text\" class=\"text-slate-500 mb-8 text-lg\">\r\n Mikrocopy...\r\n <\/p>\r\n\r\n \r\n <div id=\"quiz-options\" class=\"flex flex-col gap-3\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"view-lead\" class=\"hidden w-full max-w-xl mx-auto px-4 py-8 animate-fade-in\">\r\n <div class=\"text-center mb-10\">\r\n <div class=\"inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 text-green-600 mb-6\">\r\n <i data-lucide=\"check-circle-2\" class=\"w-8 h-8\"><\/i>\r\n <\/div>\r\n <h2 class=\"text-3xl font-bold text-slate-900 mb-4\">Analiza zako\u0144czona!<\/h2>\r\n <p class=\"text-slate-600 text-lg\">\r\n Tw\u00f3j spersonalizowany raport oraz wynik diagnozy s\u0105 ju\u017c gotowe. Podaj dane kontaktowe, aby odblokowa\u0107 dost\u0119p.\r\n <\/p>\r\n <\/div>\r\n\r\n <form id=\"lead-form\" class=\"space-y-5 bg-white p-6 md:p-8 rounded-2xl border border-slate-200 shadow-xl shadow-slate-200\/50\">\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-5\">\r\n <div class=\"space-y-1.5\">\r\n <label class=\"text-sm font-semibold text-slate-700\">Imi\u0119 i nazwisko *<\/label>\r\n <input type=\"text\" id=\"form-name\" class=\"w-full px-4 py-3 rounded-lg border border-slate-200 bg-slate-50 focus:bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all\" placeholder=\"Jan Kowalski\">\r\n <p id=\"error-name\" class=\"text-red-500 text-xs mt-1 hidden\">Imi\u0119 jest wymagane<\/p>\r\n <\/div>\r\n\r\n <div class=\"space-y-1.5\">\r\n <label class=\"text-sm font-semibold text-slate-700\">Email s\u0142u\u017cbowy *<\/label>\r\n <input type=\"email\" id=\"form-email\" class=\"w-full px-4 py-3 rounded-lg border border-slate-200 bg-slate-50 focus:bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all\" placeholder=\"jan@firma.pl\">\r\n <p id=\"error-email\" class=\"text-red-500 text-xs mt-1 hidden\">Podaj poprawny adres email<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-5\">\r\n <div class=\"space-y-1.5\">\r\n <label class=\"text-sm font-semibold text-slate-700\">Numer telefonu *<\/label>\r\n <input type=\"tel\" id=\"form-phone\" class=\"w-full px-4 py-3 rounded-lg border border-slate-200 bg-slate-50 focus:bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all\" placeholder=\"+48 000 000 000\">\r\n <p id=\"error-phone\" class=\"text-red-500 text-xs mt-1 hidden\">Telefon jest wymagany<\/p>\r\n <\/div>\r\n\r\n <div class=\"space-y-1.5\">\r\n <label class=\"text-sm font-semibold text-slate-700\">Nazwa firmy (opcjonalnie)<\/label>\r\n <input type=\"text\" id=\"form-company\" class=\"w-full px-4 py-3 rounded-lg border border-slate-200 bg-slate-50 focus:bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all\" placeholder=\"Firma Sp. z o.o.\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pt-6 border-t border-slate-100 space-y-4\">\r\n \r\n <label class=\"flex items-start gap-3 cursor-pointer group\">\r\n <div class=\"relative flex items-start pt-0.5\">\r\n <input type=\"checkbox\" id=\"form-rodo\" class=\"w-5 h-5 rounded border-slate-300 text-blue-600 focus:ring-blue-500 transition-all cursor-pointer\">\r\n <\/div>\r\n <div class=\"flex-1\">\r\n <p id=\"error-rodo-text\" class=\"text-sm text-slate-600\">\r\n * Wyra\u017cam zgod\u0119 na przetwarzanie moich danych osobowych przez DIGITAL-IMAGES sp. z o.o. w celu kontaktu i przedstawienia raportu.\r\n <\/p>\r\n <\/div>\r\n <\/label>\r\n\r\n \r\n <div class=\"pl-8 space-y-3\">\r\n <label class=\"flex items-start gap-3 cursor-pointer\">\r\n <input type=\"checkbox\" id=\"form-marketing\" class=\"w-4 h-4 rounded border-slate-300 text-blue-600 mt-0.5\">\r\n <span class=\"text-xs text-slate-500\">Chc\u0119 otrzymywa\u0107 materia\u0142y edukacyjne i marketingowe. (Opcjonalnie)<\/span>\r\n <\/label>\r\n <label class=\"flex items-start gap-3 cursor-pointer\">\r\n <input type=\"checkbox\" id=\"form-email-consent\" class=\"w-4 h-4 rounded border-slate-300 text-blue-600 mt-0.5\">\r\n <span class=\"text-xs text-slate-500\">Zgoda na komunikacj\u0119 e-mail. (Opcjonalnie)<\/span>\r\n <\/label>\r\n <label class=\"flex items-start gap-3 cursor-pointer\">\r\n <input type=\"checkbox\" id=\"form-phone-consent\" class=\"w-4 h-4 rounded border-slate-300 text-blue-600 mt-0.5\">\r\n <span class=\"text-xs text-slate-500\">Zgoda na kontakt telefoniczny. (Opcjonalnie)<\/span>\r\n <\/label>\r\n <\/div>\r\n \r\n <div class=\"pt-4 text-[10px] text-slate-400 leading-relaxed\">\r\n Administratorem Danych jest DIGITAL-IMAGES sp. z o.o. Dane s\u0105 przetwarzane w celu obs\u0142ugi zapytania i przedstawienia wynik\u00f3w diagnozy. Przys\u0142uguje Ci prawo dost\u0119pu do danych, ich poprawiania, \u017c\u0105dania usuni\u0119cia, a tak\u017ce prawo wycofania zgody w dowolnym momencie. Pe\u0142ne informacje znajduj\u0105 si\u0119 w Polityce Prywatno\u015bci.\r\n <\/div>\r\n <\/div>\r\n\r\n <button type=\"submit\" id=\"submit-btn\" class=\"w-full flex items-center justify-center gap-2 py-4 bg-slate-900 text-white font-semibold rounded-xl hover:bg-slate-800 transition-all disabled:opacity-70 disabled:cursor-not-allowed mt-4 text-lg shadow-lg shadow-slate-900\/10\">\r\n <span id=\"submit-btn-text\">Zobacz m\u00f3j raport<\/span>\r\n <i data-lucide=\"arrow-right\" id=\"submit-btn-icon\" class=\"w-5 h-5\"><\/i>\r\n \r\n <svg id=\"submit-btn-spinner\" class=\"animate-spin hidden w-6 h-6 text-white\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"><\/circle>\r\n <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"><\/path>\r\n <\/svg>\r\n <\/button>\r\n <\/form>\r\n <\/div>\r\n\r\n \r\n <div id=\"view-report\" class=\"hidden w-full max-w-4xl mx-auto px-4 py-8 animate-fade-in\">\r\n <div class=\"bg-white rounded-3xl border border-slate-200 shadow-2xl shadow-slate-200\/50 overflow-hidden\">\r\n \r\n \r\n <div id=\"report-header\" class=\"border-b p-8 md:p-12 flex flex-col md:flex-row items-center justify-between gap-8 relative overflow-hidden\">\r\n <div class=\"absolute top-0 right-0 w-64 h-64 bg-white\/40 rounded-full blur-3xl -translate-y-1\/2 translate-x-1\/2\"><\/div>\r\n \r\n <div class=\"flex-1 relative z-10 text-center md:text-left\">\r\n <h4 class=\"text-sm font-bold tracking-widest uppercase mb-2 opacity-80 flex items-center justify-center md:justify-start gap-2\">\r\n <i data-lucide=\"bar-chart-3\" class=\"w-4 h-4\"><\/i> Wynik diagnozy operacyjnej\r\n <\/h4>\r\n <h1 id=\"report-title\" class=\"text-3xl md:text-5xl font-extrabold mb-4 leading-tight\">Tytu\u0142...<\/h1>\r\n <p id=\"report-desc\" class=\"text-slate-700 text-lg md:text-xl font-medium max-w-xl leading-relaxed\">Opis...<\/p>\r\n <\/div>\r\n\r\n <div class=\"relative z-10 flex flex-col items-center\">\r\n <div class=\"w-40 h-40 md:w-48 md:h-48 relative flex items-center justify-center bg-white rounded-full shadow-xl\">\r\n <svg class=\"w-full h-full absolute top-0 left-0 -rotate-90 p-2\" viewBox=\"0 0 100 100\">\r\n <circle cx=\"50\" cy=\"50\" r=\"46\" fill=\"transparent\" stroke=\"#f1f5f9\" stroke-width=\"8\" \/>\r\n <circle id=\"report-circle\" cx=\"50\" cy=\"50\" r=\"46\" fill=\"transparent\" stroke=\"currentColor\" stroke-width=\"8\" stroke-dasharray=\"289.026\" stroke-dashoffset=\"289.026\" stroke-linecap=\"round\" style=\"transition: stroke-dashoffset 1.5s ease-in-out\" \/>\r\n <\/svg>\r\n <div class=\"text-center\">\r\n <span id=\"report-score-number\" class=\"text-5xl font-black\">0<\/span>\r\n <span class=\"text-slate-400 font-bold text-xl\">\/100<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-4 bg-white px-4 py-1.5 rounded-full text-sm font-bold text-slate-800 shadow-sm border border-slate-100\">\r\n Score B2B\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-slate-900 text-white p-6 md:p-8 text-center border-b-4 border-amber-500 relative overflow-hidden\">\r\n <div class=\"absolute inset-0 opacity-10 flex items-center justify-center pointer-events-none\">\r\n <i data-lucide=\"alert-circle\" class=\"w-48 h-48\"><\/i>\r\n <\/div>\r\n <p class=\"text-lg md:text-2xl font-medium relative z-10 max-w-3xl mx-auto leading-relaxed\">\r\n Na podstawie Twoich odpowiedzi, <span class=\"text-amber-400 font-bold\">Twoja firma mo\u017ce traci\u0107 nawet 15\u201330% efektywno\u015bci operacyjnej<\/span> wzgl\u0119dem zoptymalizowanej konkurencji.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"p-8 md:p-12 grid grid-cols-1 md:grid-cols-2 gap-12\">\r\n \r\n <div>\r\n <div class=\"flex items-center gap-3 mb-6\">\r\n <div class=\"w-10 h-10 rounded-xl bg-red-100 text-red-600 flex items-center justify-center\">\r\n <i data-lucide=\"alert-circle\" class=\"w-6 h-6\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-2xl font-bold text-slate-900\">Zidentyfikowane luki<\/h3>\r\n <\/div>\r\n <ul id=\"report-problems\" class=\"space-y-4\">\r\n \r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <div class=\"flex items-center gap-3 mb-6\">\r\n <div class=\"w-10 h-10 rounded-xl bg-emerald-100 text-emerald-600 flex items-center justify-center\">\r\n <i data-lucide=\"shield-check\" class=\"w-6 h-6\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-2xl font-bold text-slate-900\">Rekomendowane kroki<\/h3>\r\n <\/div>\r\n <ul id=\"report-recommendations\" class=\"space-y-4\">\r\n \r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-slate-50 p-8 text-center border-t border-slate-200\">\r\n <p class=\"text-slate-600 mb-6 font-medium max-w-2xl mx-auto\">\r\n Chcesz om\u00f3wi\u0107 te wyniki ze specjalist\u0105 i zaplanowa\u0107 map\u0119 drogow\u0105 optymalizacji dla Twojego zak\u0142adu?\r\n <\/p>\r\n <button class=\"px-8 py-4 bg-blue-600 text-white font-bold rounded-xl hover:bg-blue-700 transition-colors shadow-lg shadow-blue-600\/20 text-lg\" onclick=\"window.location.href='https:\/\/spotkania.digital-images.pl\/'\">\r\n Um\u00f3w bezp\u0142atn\u0105 konsultacj\u0119\r\n <\/button>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/main>\r\n<\/div>\r\n\r\n\r\n<script>\r\n \/\/ Inicjalizacja ikon Lucide\r\n lucide.createIcons();\r\n\r\n \/\/ --- DANE I KONFIGURACJA ---\r\n const QUESTIONS = [\r\n { text: \"Jak zmienia\u0142y si\u0119 koszty surowc\u00f3w i energii w Twojej firmie w ci\u0105gu ostatnich 12 miesi\u0119cy?\", microcopy: \"To pomo\u017ce nam oceni\u0107 Twoj\u0105 ekspozycj\u0119 na ryzyko rynkowe i efektywno\u015b\u0107 kosztow\u0105.\", options: [ { text: \"Spad\u0142y\", score: 10 }, { text: \"Pozosta\u0142y stabilne\", score: 8 }, { text: \"Wzros\u0142y umiarkowanie (5\u201320%)\", score: 5 }, { text: \"Wzros\u0142y znacz\u0105co (>20%)\", score: 2 }, { text: \"Nie monitorujemy koszt\u00f3w produkcji\", score: 0 } ] },\r\n { text: \"Jak zmieni\u0142a si\u0119 mar\u017ca netto Twojej firmy w ostatnich 24 miesi\u0105cach?\", microcopy: \"Mar\u017cowo\u015b\u0107 to g\u0142\u00f3wny wska\u017anik zdrowia biznesu produkcyjnego.\", options: [ { text: \"Wzros\u0142a\", score: 10 }, { text: \"Pozosta\u0142a bez zmian\", score: 8 }, { text: \"Spad\u0142a nieznacznie\", score: 5 }, { text: \"Spad\u0142a znacz\u0105co\", score: 2 }, { text: \"Nie analizujemy regularnie mar\u017cowo\u015bci\", score: 0 } ] },\r\n { text: \"Na jakim poziomie wykorzystujesz moce produkcyjne?\", microcopy: \"Optymalne wykorzystanie maszyn bezpo\u015brednio wp\u0142ywa na ROI.\", options: [ { text: \"80\u201395%\", score: 10 }, { text: \"Powy\u017cej 95%\", score: 8 }, { text: \"60\u201380%\", score: 5 }, { text: \"Poni\u017cej 60%\", score: 2 }, { text: \"Nie analizujemy wykorzystania mocy\", score: 0 } ] },\r\n { text: \"Jak oceniasz poziom automatyzacji w firmie?\", microcopy: \"Od planowania po produkcj\u0119 i magazynowanie.\", options: [ { text: \"Bardzo wysoki (AI \/ pe\u0142na optymalizacja)\", score: 10 }, { text: \"Wysoki\", score: 8 }, { text: \"\u015aredni\", score: 5 }, { text: \"Niski (dominuj\u0105 procesy manualne)\", score: 2 }, { text: \"Nie mierzymy efektywno\u015bci proces\u00f3w\", score: 0 } ] },\r\n { text: \"Na ile jeste\u015b przygotowany na regulacje UE (PPWR \/ ESG)?\", microcopy: \"Nowe dyrektywy drastycznie zmieni\u0105 rynek opakowa\u0144 w najbli\u017cszych latach.\", options: [ { text: \"W pe\u0142ni zgodni\", score: 10 }, { text: \"W wi\u0119kszo\u015bci zgodni\", score: 8 }, { text: \"Cz\u0119\u015bciowo przygotowani\", score: 4 }, { text: \"Nie jeste\u015bmy przygotowani\", score: 0 }, { text: \"Nie analizowali\u015bmy tego\", score: 0 } ] },\r\n { text: \"Czy oferujesz opakowania ekologiczne?\", microcopy: \"Rynek wymusza transformacj\u0119 w kierunku zr\u00f3wnowa\u017conego rozwoju.\", options: [ { text: \"Tak \u2013 to kluczowy element strategii\", score: 10 }, { text: \"Tak \u2013 cz\u0119\u015b\u0107 oferty\", score: 7 }, { text: \"W ograniczonym zakresie\", score: 3 }, { text: \"Nie\", score: 0 }, { text: \"Nie rozwijamy tego obszaru\", score: 0 } ] },\r\n { text: \"Jak oceniasz dost\u0119pno\u015b\u0107 surowc\u00f3w z recyklingu dla Twojej produkcji?\", microcopy: \"Zabezpieczenie \u0142a\u0144cucha dostaw to dzisiaj przewaga konkurencyjna.\", options: [ { text: \"Dobrze zabezpieczona\", score: 10 }, { text: \"Stabilna\", score: 8 }, { text: \"Ograniczona\", score: 4 }, { text: \"Bardzo ograniczona\", score: 2 }, { text: \"Nie analizujemy d\u0142ugoterminowo\", score: 0 } ] },\r\n { text: \"Sk\u0105d pochodzi wi\u0119kszo\u015b\u0107 Twoich klient\u00f3w B2B?\", microcopy: \"Dywersyfikacja \u017ar\u00f3de\u0142 akwizycji to mniejsze ryzyko.\", options: [ { text: \"E-commerce \/ platformy zakupowe\", score: 10 }, { text: \"Inbound (strona internetowa \/ marketing)\", score: 8 }, { text: \"Handlowcy (sprzeda\u017c aktywna)\", score: 6 }, { text: \"Sta\u0142e relacje \/ z polecenia\", score: 4 } ] },\r\n { text: \"Czy oferujesz konfiguracj\u0119 online lub natychmiastow\u0105 wycen\u0119?\", microcopy: \"Klienci B2B coraz cz\u0119\u015bciej oczekuj\u0105 do\u015bwiadcze\u0144 zakupowych znanych z B2C.\", options: [ { text: \"W pe\u0142ni automatyczny konfigurator\", score: 10 }, { text: \"Cz\u0119\u015bciowo online\", score: 7 }, { text: \"Tylko manualnie (mail \/ handlowiec)\", score: 4 }, { text: \"Nie oferujemy wycen przed audytem\", score: 0 } ] },\r\n { text: \"Jak cz\u0119sto wprowadzasz nowe produkty lub innowacje procesowe?\", microcopy: \"Brak innowacji to w dzisiejszych czasach powolne cofanie si\u0119.\", options: [ { text: \"Regularnie (ci\u0105g\u0142e doskonalenie)\", score: 10 }, { text: \"Kilka razy w roku\", score: 8 }, { text: \"Raz w roku\", score: 5 }, { text: \"Rzadziej ni\u017c raz w roku\", score: 2 }, { text: \"Brak uporz\u0105dkowanego procesu\", score: 0 } ] }\r\n ];\r\n\r\n const RESULTS_LOGIC = [\r\n { min: 0, max: 30, title: \"Firma wysokiego ryzyka operacyjnego\", description: \"Tw\u00f3j biznes jest zagro\u017cony przez brak kontroli, automatyzacji i przygotowania regulacyjnego. Obecny model dzia\u0142ania mo\u017ce wkr\u00f3tce przesta\u0107 by\u0107 rentowny na zmieniaj\u0105cym si\u0119 rynku.\", problems: [ \"Brak monitoringu kluczowych wska\u017anik\u00f3w finansowych.\", \"Niska \u015bwiadomo\u015b\u0107 nadchodz\u0105cych regulacji UE.\", \"Uzale\u017cnienie od manualnych proces\u00f3w i przestarza\u0142ych kana\u0142\u00f3w sprzeda\u017cy.\" ], recommendations: [ \"Pilne wdro\u017cenie system\u00f3w monitoringu koszt\u00f3w i mar\u017cy.\", \"Rozpocz\u0119cie audytu proces\u00f3w pod k\u0105tem ich automatyzacji.\", \"Analiza luk i przygotowanie strategii dostosowania do regulacji UE (PPWR).\" ], color: \"text-red-600\", bg: \"bg-red-50\", border: \"border-red-200\" },\r\n { min: 31, max: 60, title: \"Firma z du\u017cym potencja\u0142em optymalizacji\", description: \"Firma funkcjonuje i ma klient\u00f3w, ale z powodu braku sp\u00f3jnej strategii cyfrowej i operacyjnej tracicie efektywno\u015b\u0107 i mar\u017c\u0119. Wymagane s\u0105 zdecydowane kroki usprawniaj\u0105ce.\", problems: [ \"Niepe\u0142ne wykorzystanie mocy produkcyjnych.\", \"Reaktywne podej\u015bcie do innowacji i ekologii.\", \"Sprzeda\u017c oparta w du\u017cej mierze na tradycyjnych metodach.\" ], recommendations: [ \"Zwi\u0119kszenie poziomu automatyzacji w kluczowych w\u0105skich gard\u0142ach.\", \"Optymalizacja planowania w celu lepszego wykorzystania mocy maszyn.\", \"Rozw\u00f3j cyfrowych kana\u0142\u00f3w pozyskiwania lead\u00f3w i obs\u0142ugi klienta (Inbound).\" ], color: \"text-orange-600\", bg: \"bg-orange-50\", border: \"border-orange-200\" },\r\n { min: 61, max: 80, title: \"Firma gotowa do skalowania\", description: \"Masz solidne, zdrowe podstawy operacyjne. Firma jest \u015bwiadoma trend\u00f3w rynkowych, ale brakuje kilku nowoczesnych element\u00f3w, by znacz\u0105co przyspieszy\u0107 i odskoczy\u0107 konkurencji.\", problems: [ \"Proces wyceny i ofertowania nadal zajmuje zbyt du\u017co czasu.\", \"Dane produkcyjne i sprzeda\u017cowe nie s\u0105 w pe\u0142ni zintegrowane.\", \"Wymagane jest wzmocnienie pozycjonowania jako dostawcy rozwi\u0105za\u0144 eko.\" ], recommendations: [ \"Wdro\u017cenie konfiguratora B2B online dla natychmiastowych wycen.\", \"Szybszy rozw\u00f3j i promocja portfolio produkt\u00f3w ekologicznych.\", \"Poprawa analityki danych z wykorzystaniem narz\u0119dzi BI.\" ], color: \"text-blue-600\", bg: \"bg-blue-50\", border: \"border-blue-200\" },\r\n { min: 81, max: 100, title: \"Nowoczesny lider bran\u017cy\", description: \"Znakomity wynik. Twoja firma jest wysoce zoptymalizowana, zautomatyzowana i gotowa na zmiany rynkowe. Jeste\u015bcie w idealnej pozycji do agresywnej ekspansji.\", problems: [ \"G\u0142\u00f3wnym wyzwaniem jest utrzymanie tempa innowacji.\", \"Ryzyko zwi\u0105zane z retencj\u0105 wysoko wykwalifikowanych specjalist\u00f3w.\", \"Konieczno\u015b\u0107 ci\u0105g\u0142ego optymalizowania \u0142a\u0144cucha dostaw.\" ], recommendations: [ \"Eksploracja i inwestycje w zaawansowan\u0105 sztuczn\u0105 inteligencj\u0119 (AI) w produkcji.\", \"Ekspansja na nowe rynki zagraniczne wykorzystuj\u0105c cyfrow\u0105 przewag\u0119.\", \"Budowa w\u0142asnych platform cyfrowych do pe\u0142nej integracji z systemami klient\u00f3w.\" ], color: \"text-emerald-600\", bg: \"bg-emerald-50\", border: \"border-emerald-200\" }\r\n ];\r\n\r\n \/\/ --- STAN APLIKACJI ---\r\n \/\/ --- STATE ---\r\nconst appState = {\r\n currentStep: 0,\r\n answers: [],\r\n totalScore: 0\r\n};\r\n\r\n\/\/ --- VIEWS ---\r\nconst views = {\r\n landing: document.getElementById('view-landing'),\r\n quiz: document.getElementById('view-quiz'),\r\n lead: document.getElementById('view-lead'),\r\n report: document.getElementById('view-report'),\r\n};\r\n\r\n\/\/ --- APP ---\r\nconst app = {\r\n\r\n switchView(viewName) {\r\n Object.values(views).forEach(v => v.classList.add('hidden'));\r\n views[viewName].classList.remove('hidden');\r\n\r\n const headerSubtitle = document.getElementById('header-subtitle');\r\n if(viewName === 'quiz') headerSubtitle.classList.remove('hidden');\r\n else headerSubtitle.classList.add('hidden');\r\n\r\n document.getElementById('optipack-app').scrollIntoView({ behavior: 'smooth' });\r\n },\r\n\r\n startQuiz() {\r\n appState.currentStep = 0;\r\n appState.answers = [];\r\n this.renderQuestion();\r\n this.switchView('quiz');\r\n },\r\n\r\n renderQuestion() {\r\n const q = QUESTIONS[appState.currentStep];\r\n const total = QUESTIONS.length;\r\n const progress = (appState.currentStep \/ total) * 100;\r\n const timeRemaining = Math.ceil((total - appState.currentStep) * 0.2);\r\n\r\n document.getElementById('quiz-step-text').textContent = `Krok ${appState.currentStep + 1} z ${total}`;\r\n document.getElementById('quiz-time-text').textContent = `~${timeRemaining} ${timeRemaining === 1 ? 'minuta' : 'minuty'} do ko\u0144ca`;\r\n document.getElementById('quiz-progress-bar').style.width = `${progress}%`;\r\n\r\n const qContainer = document.getElementById('quiz-question-container');\r\n qContainer.classList.remove('animate-slide-up');\r\n void qContainer.offsetWidth;\r\n qContainer.classList.add('animate-slide-up');\r\n\r\n document.getElementById('quiz-question-text').textContent = q.text;\r\n document.getElementById('quiz-microcopy-text').textContent = q.microcopy;\r\n\r\n const optionsContainer = document.getElementById('quiz-options');\r\n optionsContainer.innerHTML = '';\r\n\r\n q.options.forEach(opt => {\r\n const btn = document.createElement('button');\r\n\r\n btn.className = `\r\n w-full text-left p-5 rounded-xl border-2 border-slate-200 bg-white\r\n hover:border-blue-600 hover:bg-blue-50\r\n transition-all duration-200\r\n shadow-sm hover:shadow-md\r\n active:scale-[0.98]\r\n `;\r\n\r\n btn.innerHTML = `\r\n <span class=\"text-lg font-medium text-slate-900\">\r\n ${opt.text}\r\n <\/span>\r\n `;\r\n\r\n \/\/ \ud83d\udd25 KLUCZOWE \u2013 przekazujemy pe\u0142ne dane\r\n btn.onclick = () => this.handleAnswer(opt.score, opt.text);\r\n\r\n optionsContainer.appendChild(btn);\r\n });\r\n},\r\n\r\n handleAnswer(score, answerText) {\r\n const questionText = QUESTIONS[appState.currentStep].text;\r\n\r\n appState.answers.push({\r\n score,\r\n question: questionText,\r\n answer: answerText\r\n });\r\n\r\n setTimeout(() => {\r\n if (appState.currentStep < QUESTIONS.length - 1) {\r\n appState.currentStep++;\r\n this.renderQuestion();\r\n } else {\r\n this.switchView('lead');\r\n }\r\n }, 300);\r\n },\r\n\r\n setupForm() {\r\n const form = document.getElementById('lead-form');\r\n\r\n form.addEventListener('submit', async (e) => {\r\n e.preventDefault();\r\n\r\n const name = document.getElementById('form-name');\r\n const email = document.getElementById('form-email');\r\n const phone = document.getElementById('form-phone');\r\n const rodo = document.getElementById('form-rodo');\r\n\r\n let isValid = true;\r\n\r\n const toggleError = (id, condition) => {\r\n const el = document.getElementById(`error-${id}`);\r\n const input = document.getElementById(`form-${id}`);\r\n if(condition) {\r\n el.classList.remove('hidden');\r\n if(input) input.classList.add('border-red-500');\r\n isValid = false;\r\n } else {\r\n el.classList.add('hidden');\r\n if(input) input.classList.remove('border-red-500');\r\n }\r\n };\r\n\r\n toggleError('name', !name.value.trim());\r\n toggleError('email', !email.value.trim() || !\/^\\S+@\\S+\\.\\S+$\/.test(email.value));\r\n toggleError('phone', !phone.value.trim());\r\n\r\n if(!rodo.checked) isValid = false;\r\n\r\n if(isValid) {\r\n await this.submitData();\r\n }\r\n });\r\n },\r\n\r\n async submitData() {\r\n const btn = document.getElementById('submit-btn');\r\n const text = document.getElementById('submit-btn-text');\r\n const icon = document.getElementById('submit-btn-icon');\r\n const spinner = document.getElementById('submit-btn-spinner');\r\n\r\n btn.disabled = true;\r\n text.classList.add('hidden');\r\n icon.classList.add('hidden');\r\n spinner.classList.remove('hidden');\r\n\r\n const name = document.getElementById('form-name').value;\r\n const email = document.getElementById('form-email').value;\r\n const phone = document.getElementById('form-phone').value;\r\n const company = document.getElementById('form-company').value;\r\n\r\n \/\/ \ud83d\udd25 LICZENIE SCORE\r\n appState.totalScore = appState.answers.reduce((sum, a) => sum + a.score, 0);\r\n\r\n try {\r\n await fetch('\/wp-json\/optipack\/v1\/submit', {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application\/json' },\r\n body: JSON.stringify({\r\n name,\r\n email,\r\n phone,\r\n company,\r\n score: appState.totalScore,\r\n answers: appState.answers\r\n })\r\n });\r\n } catch (e) {\r\n console.error('API error:', e);\r\n }\r\n\r\n btn.disabled = false;\r\n text.classList.remove('hidden');\r\n icon.classList.remove('hidden');\r\n spinner.classList.add('hidden');\r\n\r\n this.generateReport();\r\n },\r\n\r\n generateReport() {\r\n const score = appState.totalScore;\r\n\r\n let result = RESULTS_LOGIC.find(r => score >= r.min && score <= r.max);\r\n if (!result) result = RESULTS_LOGIC[0];\r\n\r\n const header = document.getElementById('report-header');\r\n header.className = `border-b p-8 md:p-12 flex flex-col md:flex-row items-center justify-between gap-8 ${result.bg} ${result.border}`;\r\n\r\n document.getElementById('report-title').className = `text-3xl md:text-5xl font-extrabold ${result.color}`;\r\n document.getElementById('report-title').textContent = result.title;\r\n\r\n document.getElementById('report-desc').textContent = result.description;\r\n\r\n document.getElementById('report-score-number').className = `text-5xl font-black ${result.color}`;\r\n document.getElementById('report-score-number').textContent = score;\r\n\r\n const circle = document.getElementById('report-circle');\r\n circle.setAttribute('class', result.color);\r\n\r\n setTimeout(() => {\r\n circle.style.strokeDashoffset = 289.026 - (289.026 * score) \/ 100;\r\n }, 100);\r\n\r\n document.getElementById('report-problems').innerHTML = result.problems.map(p => `\r\n <li class=\"flex gap-3 p-4 bg-slate-50 rounded-xl\">\r\n <div class=\"text-red-500\">\u2022<\/div>\r\n <span>${p}<\/span>\r\n <\/li>\r\n `).join('');\r\n\r\n document.getElementById('report-recommendations').innerHTML = result.recommendations.map(r => `\r\n <li class=\"flex gap-3 p-4 bg-slate-50 rounded-xl\">\r\n <div class=\"text-emerald-500\">\u2713<\/div>\r\n <span>${r}<\/span>\r\n <\/li>\r\n `).join('');\r\n\r\n lucide.createIcons();\r\n this.switchView('report');\r\n }\r\n};\r\n\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n app.setupForm();\r\n});\r\n\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Diagnoza B2B – Packaging EkspertOptymalizacji.pl Diagnoza biznesowa B2B Dla bran\u017cy opakowa\u0144 B2B Sprawd\u017a, ile efektywno\u015bci traci Twoja firma produkcyjna Bezp\u0142atne narz\u0119dzie diagnostyczne dla bran\u017cy opakowa\u0144. Zidentyfikuj luki operacyjne, luki w automatyzacji oraz gotowo\u015b\u0107 na regulacje UE w mniej ni\u017c 2 minuty. Rozpocznij darmow\u0105 diagnoz\u0119 Zaufali nam liderzy optymalizacji FlexiPack EcoCarton ProPlast Krok 1 z 10 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ekspertoptymalizacji.pl\/index.php\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekspertoptymalizacji.pl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ekspertoptymalizacji.pl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ekspertoptymalizacji.pl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekspertoptymalizacji.pl\/index.php\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":46,"href":"https:\/\/ekspertoptymalizacji.pl\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":270,"href":"https:\/\/ekspertoptymalizacji.pl\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions\/270"}],"wp:attachment":[{"href":"https:\/\/ekspertoptymalizacji.pl\/index.php\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}