Szafa w Pigułce

import React, { useState } from 'react’;

import {

Camera, Upload, Sparkles, CheckCircle2, AlertCircle, RefreshCw,

HelpCircle, ArrowRight, Info, ExternalLink, Image as ImageIcon, ChevronRight, ShieldCheck, Sun, EyeOff, Sparkles as SparkleIcon

} from 'lucide-react’;

const COLOR_PALETTES = {

ciepły: {

title: 'Typ Ciepły (Wiosna / Jesień)’,

badgeBg: 'bg-amber-100 text-amber-900 border-amber-300′,

description: 'Twoja skóra promienieje w towarzystwie słonecznych, nasyconych i złocistych odcieni. Zimne, sine kolory wygaszają Twój naturalny blask.’,

bestColors: [

{ name: 'Warm Ecru’, hex: '#F5EBE0′, desc: 'Złamana biel idealna przy twarzy’ },

{ name: 'Camel / Wielbłądzi’, hex: '#C19A6B’, desc: 'Klasyczna baza płaszczy i swetrów’ },

{ name: 'Musztardowy’, hex: '#E1AD01′, desc: 'Słoneczny akcent rozświetlający’ },

{ name: 'Warm Olive / Oliwka’, hex: '#708238′, desc: 'Ciepła zieleń wyciągająca głębię oczu’ },

{ name: 'Koralowy / Peach’, hex: '#F08080′, desc: 'Idealny na bluzki i pomadki’ },

{ name: 'Ciepły Brąz / Czekolada’, hex: '#5C4033′, desc: 'Szlachetny zamiennik czerni’ },

{ name: 'Miodowy Złoty’, hex: '#D4AF37′, desc: 'Dodaje energii i świeżości’ }

avoidColors: [

{ name: 'Czysta, Śnieżna Biel’, hex: '#FFFFFF’, desc: 'Sprawia, że twarz wygląda blado’ },

{ name: 'Jaskrawa Fuksja’, hex: '#FF007F’, desc: 'Odbija się sinym cieniem’ },

{ name: 'Chłodny Grafit’, hex: '#383E42′, desc: 'Postarza i przytłacza’ }

jewelry: 'Złoto (żółte i różowe), mosiądz, ciepłe bursztyny i perły ecru.’,

wardrobeImg: 'https://szafawpigulce.pl/wp-content/uploads/2026/08/14.png’,

wardrobeNotice: 'Twoja karnacja jest ciepła — korzystaj więc ze szafy kapsułowej dla tonacji ciepłej z ebooka „Kapsułowa garderoba dla Kobiet jesień 2026″.’

chłodny: {

title: 'Typ Chłodny (Lato / Zima)’,

badgeBg: 'bg-sky-100 text-sky-900 border-sky-300′,

description: 'Najlepiej wyglądasz w czystych, szlachetnych i przydymionych barwach z niebieskim lub różowym podtonem. Ciepłe żółcie dodają Twojej twarzy zmęczenia.’,

bestColors: [

{ name: 'Czysta Biel’, hex: '#FFFFFF’, desc: 'Świeży, wyrazisty kontrast’ },

{ name: 'Elegancki Granat’, hex: '#002147′, desc: 'Najlepsza baza zamiast głębokiej czerni’ },

{ name: 'Chłodny Pudrowy Róż’, hex: '#D8A7B1′, desc: 'Zmiękcza rysy i daje efekt odmłodzenia’ },

{ name: 'Szmaragdowa Zieleń’, hex: '#004B49′, desc: 'Głęboka, wytworna zieleń’ },

{ name: 'Fuksja / Malina’, hex: '#C71585′, desc: 'Dodaje mnóstwo energii i charakteru’ },

{ name: 'Srebrzysty Szary’, hex: '#C0C0C0′, desc: 'Szary melanż i szlachetny grafit’ },

{ name: 'Śliwkowy Fiolet’, hex: '#4B0082′, desc: 'Idealny do stylizacji wieczorowych’ }

avoidColors: [

{ name: 'Ciepła Musztarda’, hex: '#E1AD01′, desc: 'Nadaje skórze żółtawy, zmęczony odcień’ },

{ name: 'Rudy / Pomarańcz’, hex: '#D35400′, desc: 'Gryzie się z podtonem skóry’ },

{ name: 'Ciepły Beż Korzenny’, hex: '#8B5A2B’, desc: 'Tworzy efekt wyblaknięcia’ }

jewelry: 'Srebro, białe złoto, platyna, cyrkonie i chłodne perełki.’,

wardrobeImg: 'https://szafawpigulce.pl/wp-content/uploads/2026/08/54.png’,

wardrobeNotice: 'Twoja karnacja jest chłodna — korzystaj więc ze szafy kapsułowej dla tonacji chłodnej z ebooka „Kapsułowa garderoba dla Kobiet jesień 2026″.’

neutralny: {

title: 'Typ Neutralny (Elastyczny)’,

badgeBg: 'bg-emerald-100 text-emerald-900 border-emerald-300′,

description: 'Posiadasz zbalansowane cechy chłodne i ciepłe. Masz niesamowitą swobodę łączącą zalety obu palet! Najlepiej czujesz się w barwach stonowanych i nieprzesadzonych.’,

bestColors: [

{ name: 'Przygaszony Róż’, hex: '#B87D82′, desc: 'Elegancki i subtelny’ },

{ name: 'Taupe / Szarobeż’, hex: '#8B8589′, desc: 'Wszechstronny neutralny klasyk’ },

{ name: 'Morska Zieleń / Teal’, hex: '#008080′, desc: 'Idealny balans ciepła i chłodu’ },

{ name: 'Złamana Biel / Cream’, hex: '#FFFDD0′, desc: 'Miękka, uniwersalna biel’ },

{ name: 'Klasyczny Granat’, hex: '#1B2A4A’, desc: 'Zawsze sprawdzona podstawa’ },

{ name: 'Przymglony Błękit’, hex: '#6C7A89′, desc: 'Spokojny, harmonijny odcień’ },

{ name: 'Stonowana Czerwień’, hex: '#A52A2A’, desc: 'Szkarłat i stary róż’ }

avoidColors: [

{ name: 'Jaskrawy Neonowy Żółty’, hex: '#CCFF00′, desc: 'Przygniata delikatne podtony’ },

{ name: 'Skrajny Neonowy Róż’, hex: '#FF1493′, desc: 'Zbyt krzykliwy dla balansu’ }

jewelry: 'Zarówno złoto jak i srebro wyglądają świetnie! Możesz też mieszać obie barwy metalu.’,

wardrobeImgWarm: 'https://szafawpigulce.pl/wp-content/uploads/2026/08/14.png’,

wardrobeImgCool: 'https://szafawpigulce.pl/wp-content/uploads/2026/08/54.png’,

wardrobeNotice: 'Wygląda na to, że masz tonację neutralną — i to świetna wiadomość, bo możesz bawić się wszystkimi kolorami! 🎉 Masz do dyspozycji obie szafy kapsułowe z ebooka „Kapsułowa garderoba dla Kobiet jesień 2026″.’

}

};

const QUIZ_QUESTIONS = [

{

id: 'tan’,

question: 'Jak reaguje Twoja skóra na słońce?’,

hint: 'Szybko się opalasz na złoto/brąz, czy raczej najpierw czerwieniejesz?’,

options: [

{ label: 'Łatwo i szybko opalam się na złoty / złocisto-brązowy kolor’, value: 'ciepły’ },

{ label: 'Łatwo się spalam, czerwienieję lub trudno łapię opaleniznę’, value: 'chłodny’ },

{ label: 'Najpierw lekko czerwienieję, ale po 1-2 dniach zmienia się w brąz’, value: 'neutralny’ }

]

{

id: 'hair’,

question: 'Jaki masz naturalny kolor włosów?’,

hint: 'Chodzi o odcień u nasady lub przed ewentualną koloryzacją.’,

options: [

{ label: 'Miodowy i złoty blond, karmel, miedź, rudy, ciepły kasztan, czekolada’, value: 'ciepły’ },

{ label: 'Lodowy i perłowy blond, popielaty brąz, krucza czerń, siwy’, value: 'chłodny’ },

{ label: 'Trudno określić, pomiędzy’, value: 'neutralny’ }

]

{

id: 'eyes’,

question: 'Jaki masz kolor oczu i refleksy w tęczówce?’,

hint: 'Przyjrzyj się tęczówce w świetle dziennym.’,

options: [

{ label: 'Ciepłe: orzechowe, bursztynowe, piwne, zielone ze złotymi plamkami’, value: 'ciepły’ },

{ label: 'Chłodne: czyste niebieskie, stalowoszare, chłodne zielono-szare’, value: 'chłodny’ },

{ label: 'Oczy mieszane, zielono-orzechowe lub szaro-niebieskie ze zmiennym odcieniem’, value: 'neutralny’ }

]

{

id: 'jewelry’,

question: 'W której biżuterii wyglądasz lepiej?’,

hint: 'Który metal sprawia, że twarz się rozświetla i wygląda na wypoczętą?’,

options: [

{ label: 'W żółtym lub różowym złocie – dodaje mi zdrowego blasku’, value: 'ciepły’ },

{ label: 'W srebrze, białym złocie lub platynie – czuję, że twarz jest świeższa’, value: 'chłodny’ },

{ label: 'Oba metale leżą na mnie równie dobrze i znoszę je bez problemu’, value: 'neutralny’ }

]

{

id: 'veins’,

question: 'Spójrz na wewnętrzną stronę nadgarstka przy świetle dziennym — żyłki są:’,

hint: 'Zwróć uwagę na dominujący odcień naczynek krwionośnych.’,

options: [

{ label: 'Zielonkawe lub oliwkowe’, value: 'ciepły’ },

{ label: 'Niebieskie, fioletowe lub wyraźnie chłodne’, value: 'chłodny’ },

{ label: 'Mieszane — trochę niebieskich, trochę zielonkawych’, value: 'neutralny’ }

]

{

id: 'white’,

question: 'Co lepiej prezentuje się tuż przy Twojej twarzy?’,

hint: 'Porównaj wrażenie przy śnieżnej bieli vs maślanym ecru.’,

options: [

{ label: 'Kremowe ecru, śmietanka, miękka złamana biel’, value: 'ciepły’ },

{ label: 'Czysta, śnieżna biel (jak czysta kartka papieru)’, value: 'chłodny’ },

{ label: 'Oba odcienie bieli pasują nie robiąc dużej różnicy’, value: 'neutralny’ }

]

{

id: 'blush’,

question: 'Czy Twoja skóra ma naturalne zaróżowienia czy złoty ton?’,

hint: 'Pomyśl o naturalnym rumieńcu na policzkach.’,

options: [

{ label: 'Złocisty, brzoskwiniowy lub ciepły oliwkowy odcień’, value: 'ciepły’ },

{ label: 'Różowy, naczynkowy lub chłodny porcelanowy odcień’, value: 'chłodny’ },

{ label: 'Beżowy, neutralny bez wyraźnego różu ani żółci’, value: 'neutralny’ }

]

}

];

const LogoIcon = ({ size = 40, className = „” }) => {

const colors = [

’#D4A017′, '#C58F13′, '#B87B11′, '#9E6110′, '#854B13′, '#713916′,

’#8B3A2B’, '#A63333′, '#942238′, '#7B183A’, '#60163C’, '#4B1C4B’,

’#392359′, '#272E68′, '#1D3B7A’, '#1B4D8C’, '#1D63A0′, '#207BB3′,

’#2192B8′, '#1F9F9E’, '#1EA481′, '#28A063′, '#499A45′, '#6D9933′,

’#8E972C’, '#B09A26′, '#C79D1D’, '#D9A418′

];

const total = colors.length;

const radius = 92;

const innerRadius = 52;

const center = 100;

return (

<svg

width={size}

height={size}

viewBox=”0 0 200 200″

className={`rounded-full shadow-md bg-white border border-black/5 shrink-0 ${className}`}

<g>

{colors.map((color, index) => {

const startAngle = (index * 360) / total – 90;

const endAngle = ((index + 1) * 360) / total – 90;

const startRad = (startAngle * Math.PI) / 180;

const endRad = (endAngle * Math.PI) / 180;

const x1 = center + radius * Math.cos(startRad);

const y1 = center + radius * Math.sin(startRad);

const x2 = center + radius * Math.cos(endRad);

const y2 = center + radius * Math.sin(endRad);

const x3 = center + innerRadius * Math.cos(endRad);

const y3 = center + innerRadius * Math.sin(endRad);

const x4 = center + innerRadius * Math.cos(startRad);

const y4 = center + innerRadius * Math.sin(startRad);

const pathData = `

M ${x1} ${y1}

A ${radius} ${radius} 0 0 1 ${x2} ${y2}

L ${x3} ${y3}

A ${innerRadius} ${innerRadius} 0 0 0 ${x4} ${y4}

return <path key={index} d={pathData} fill={color} />;

})}

</g>

<path

d=”M 0 -10 C -5 -18, 5 -24, 6 -16 C 6 -10, 0 -9, 0 -4 L 0 2″

fill=”none”

stroke=”#1F2A44″

strokeWidth=”2.5″

strokeLinecap=”round”

strokeLinejoin=”round”

<path

d=”M 0 2 L -26 16 C -28 17.5, -27 20, -24 20 L 24 20 C 27 20, 28 17.5, 26 16 Z”

fill=”none”

stroke=”#1F2A44″

strokeWidth=”2.5″

strokeLinecap=”round”

strokeLinejoin=”round”

</g>

</svg>

);

};

export default function App() {

const [wizardStep, setWizardStep] = useState(1); // 1: Photo, 2: Quiz, 3: Verdict

// User Photo & Diagnostic State

const [userPhoto, setUserPhoto] = useState(null);

const [isAnalyzingPhoto, setIsAnalyzingPhoto] = useState(false);

const [photoAnalysisResult, setPhotoAnalysisResult] = useState(null);

// Quiz Answers State

const [quizAnswers, setQuizAnswers] = useState({});

// Final Verdict

const [finalVerdict, setFinalVerdict] = useState(null);

const handlePhotoUpload = (e) => {

const file = e.target.files[0];

if (file) {

const reader = new FileReader();

reader.onloadend = () => {

processUploadedPhoto(reader.result);

};

reader.readAsDataURL(file);

}

};

const processUploadedPhoto = (photoDataUrl) => {

setUserPhoto(photoDataUrl);

setIsAnalyzingPhoto(true);

setTimeout(() => {

setIsAnalyzingPhoto(false);

const detected = Math.random() > 0.5 ? 'ciepły’ : 'chłodny’;

setPhotoAnalysisResult({

skinTone: detected === 'ciepły’ ? 'Brzoskwiniowo-złocisty’ : 'Porcelanowo-różowy’,

initialBias: detected

});

}, 1200);

};

const handleAnswerSelect = (questionId, optionValue) => {

setQuizAnswers(prev => ({

…prev,

[questionId]: optionValue

}));

};

const calculateVerdict = () => {

const counts = { ciepły: 0, chłodny: 0, neutralny: 0 };

Object.values(quizAnswers).forEach(val => {

if (counts[val] !== undefined) counts[val]++;

});

if (photoAnalysisResult?.initialBias) {

counts[photoAnalysisResult.initialBias] += 1;

}

let verdictKey = 'neutralny’;

if (counts.ciepły > counts.chłodny && counts.ciepły > counts.neutralny) {

verdictKey = 'ciepły’;

} else if (counts.chłodny > counts.ciepły && counts.chłodny > counts.neutralny) {

verdictKey = 'chłodny’;

} else {

verdictKey = 'neutralny’;

}

const goldPreference = quizAnswers[’jewelry’] === 'ciepły’;

const silverPreference = quizAnswers[’jewelry’] === 'chłodny’;

const goldTan = quizAnswers[’tan’] === 'ciepły’;

const burnTan = quizAnswers[’tan’] === 'chłodny’;

const greenVeins = quizAnswers[’veins’] === 'ciepły’;

const blueVeins = quizAnswers[’veins’] === 'chłodny’;

let rationale = ”;

if (verdictKey === 'ciepły’) {

rationale = `Twój wizerunek wykazuje spójny zestaw ciepłych akcentów: ${goldPreference ? 'złoto Cię rozświetla, ’ : ”}${greenVeins ? 'żyłki masz zielonkawe, ’ : ”}${goldTan ? 'a skóra łapie złotą opaleniznę’ : 'a Twoja uroda zyskuje przy ciepłych, złamanych barwach’}. Posiadasz naturalną złocistą głębię.`;

} else if (verdictKey === 'chłodny’) {

rationale = `Twoja uroda posiada szlachetne chłodne podtony: ${silverPreference ? 'srebro sprawia, że wyglądasz świeżo, ’ : ”}${blueVeins ? 'żyłki są niebieskawe/fioletowe, ’ : ”}${burnTan ? 'a skóra reaguje zaczerwienieniem na słońce’ : 'a czysta biel dodaje Ci wyrazistości’}. Przydymione i zimne barwy to Twój żywioł.`;

} else {

rationale = `Twoje odpowiedzi pokazują idealną równowagę między akcentami ciepłymi i chłodnymi. ${quizAnswers[’jewelry’] === 'neutralny’ ? 'Zarówno złoto jak i srebro prezentują się na Tobie świetnie, ’ : ”}a Twoje cechy urody płynnie łączą cechy obu typów. Masz ogromną elastyczność stylizacyjną!`;

}

const resultObj = {

type: verdictKey,

rationale: rationale,

data: COLOR_PALETTES[verdictKey]

};

setFinalVerdict(resultObj);

setWizardStep(3);

};

return (

{ }

<div className=”flex items-center gap-3 cursor-pointer” onClick={() => { setWizardStep(1); setQuizAnswers({}); setFinalVerdict(null); }}>

<div>

Szafa w Pigułce

</h1>

Odkryj Swoje Kolory

</p>

</div>

href=”https://szafawpigulce.pl”

target=”_blank”

rel=”noopener noreferrer”

className=”flex items-center gap-1 text-xs sm:text-sm font-semibold text-[#8C6D62] hover:text-[#5A3E36] underline underline-offset-4″

Oficjalny Sklep <ExternalLink className=”w-3.5 h-3.5″ />

</a>

</div>

</header>

{ }

{/* Hero / Intro Header */}

{wizardStep < 3 && (

<Sparkles className=”w-3.5 h-3.5 text-[#D4AF37]” /> Twoja osobista diagnoza koloru urody

</span>

Ustalę, czy jesteś typem ciepłym, chłodnym czy neutralnym.

</h2>

Podpowiem kolory, które rozświetlają Twoją twarz. Na koniec pokażę Ci dopasowaną szafę kapsułową z ebooka „Kapsułowa garderoba dla Kobiet jesień 2026”.

</p>

</div>

</div>

)}

{/* Stepper Indicator */}

{wizardStep < 3 && (

<span>Zdjęcie 📷</span>

</div>

<span>Pytania Pomocnicze 💬</span>

</div>

<span>Werdykt 🎨</span>

</div>

)}

{ }

{wizardStep === 1 && (

<Camera className=”w-6 h-6 text-[#8C6D62]” /> KROK 1 — Zdjęcie Twarzy

</h3>

Zacznijmy od zdjęcia 📷 Żeby analiza była trafna, sposób zrobienia zdjęcia ma ogromne znaczenie.

</p>

</div>

{/* Guidelines Box */}

<ShieldCheck className=”w-4 h-4 text-[#D4AF37]” /> Zrób proszę fotkę dokładnie tak:

</h4>

<span><strong>Przodem do światła dziennego:</strong> Stań twarzą do okna, w ciągu dnia.</span>

</div>

<span><strong>Bez makijażu:</strong> Czysta skóra ujawnia naturalny podton.</span>

</div>

<span><strong>Bez sztucznego światła:</strong> Zgaś lampy, żyrandol i nie używaj flesza.</span>

</div>

<span><strong>Bez filtrów w telefonie:</strong> Wyłącz opcje upiększania w aparacie.</span>

</div>

<span><strong>Najlepiej z widocznymi włosami i szyją, bez okularów.</strong> Sztuczne światło i makijaż potrafią całkowicie zafałszować podton.</span>

</div>

{/* Photo Upload Area */}

{/* Upload Trigger */}

<div className={`border-2 border-dashed rounded-3xl p-8 text-center transition-all ${

userPhoto ? 'border-[#8C6D62] bg-[#FAF6F2]’ : 'border-[#D8D0C5] hover:border-[#8C6D62] bg-[#FCFAF7]’

}`}>

</div>

<div>

{userPhoto ? 'Zmień zdjęcie’ : 'Wgraj swoje zdjęcie’}

</p>

Kliknij tutaj lub wybierz plik z telefonu / komputera

</p>

</div>

</label>

{/* Uploaded Preview View */}

{isAnalyzingPhoto ? (

<p className=”text-sm font-semibold text-[#3A2E2B]”>Sprawdzam oświetlenie i wstępny odcień…</p>

</div>

) : userPhoto ? (

</div>

<CheckCircle2 className=”w-3.5 h-3.5″ /> Zdjęcie dodane pomyślnie!

</p>

</div>

) : (

<p className=”text-sm text-[#786C66] font-medium”>Brak wgranego zdjęcia</p>

Jeśli nie możesz wgrać zdjęcia, spokojnie przejdź do pytań i oprzemy diagnozę na nich.

</p>

</div>

)}

</div>

{/* Step 1 Footer Actions */}

<button

onClick={() => setWizardStep(2)}

className=”text-xs font-semibold text-[#8C8078] hover:text-[#3A2E2B] underline underline-offset-4″

Nie mam zdjęcia — przejdź do pytań →

</button>

<button

onClick={() => setWizardStep(2)}

className=”w-full sm:w-auto bg-[#8C6D62] hover:bg-[#72564C] text-white px-6 py-3 rounded-2xl text-sm font-semibold shadow-md flex items-center justify-center gap-2 transition-all”

Przejdź do Pytań Pomocniczych <ArrowRight className=”w-4 h-4″ />

</button>

</div>

)}

{ }

{wizardStep === 2 && (

<HelpCircle className=”w-6 h-6 text-[#8C6D62]” /> KROK 2 — Pytania Pomocnicze

</h3>

Odpowiedz na poniższe pytania, aby mieć 100% pewności co do Twojego podtonu.

</p>

</div>

{/* Question List */}

{QUIZ_QUESTIONS.map((q, idx) => {

const currentSelection = quizAnswers[q.id];

return (

{idx + 1}

</span>

<div>

<h4 className=”font-semibold text-base text-[#3A2E2B]”>{q.question}</h4>

</div>

{/* Clean option buttons without top labels or bottom hints */}

{q.options.map((opt, optIdx) => {

const isSelected = currentSelection === opt.value;

return (

<button

key={optIdx}

onClick={() => handleAnswerSelect(q.id, opt.value)}

className={`text-left p-4 rounded-xl border transition-all flex items-start justify-between gap-2 ${

isSelected

? 'border-[#8C6D62] bg-[#F3EBE6] shadow-sm ring-1 ring-[#8C6D62]’

: 'border-[#E0D8CE] bg-white hover:border-[#8C6D62] hover:bg-[#FCFAF7]’

}`}

{opt.label}

</span>

{isSelected && <CheckCircle2 className=”w-4 h-4 text-[#8C6D62] shrink-0 mt-0.5″ />}

</button>

);

})}

</div>

);

})}

</div>

{/* Step 2 Footer */}

Wypełniono pytań: <strong>{Object.keys(quizAnswers).length} / {QUIZ_QUESTIONS.length}</strong>

</div>

<button

onClick={() => setWizardStep(1)}

className=”px-4 py-2.5 rounded-2xl border border-[#D0C4B8] text-xs font-semibold text-[#5A4E48] hover:bg-[#F5EFE9]”

← Wróć do Zdjęcia

</button>

<button

disabled={Object.keys(quizAnswers).length < 3}

onClick={calculateVerdict}

className={`flex-1 sm:flex-initial px-6 py-3 rounded-2xl text-xs font-bold shadow-md flex items-center justify-center gap-2 transition-all ${

Object.keys(quizAnswers).length >= 3

? 'bg-[#8C6D62] hover:bg-[#72564C] text-white cursor-pointer’

: 'bg-gray-200 text-gray-400 cursor-not-allowed’

}`}

<Sparkles className=”w-4 h-4″ /> Wygeneruj Diagnozę

</button>

</div>

)}

{ }

{wizardStep === 3 && finalVerdict && (

{/* Official Verdict Card */}

Oficjalna Diagnoza

</div>

🎨 Podton: {finalVerdict.type.toUpperCase()}

</span>

{finalVerdict.data.title}

</h2>

{finalVerdict.data.description}

</p>

</div>

{/* Rationale Box */}

<Info className=”w-4 h-4″ /> Dlaczego taki werdykt:

</h4>

{finalVerdict.rationale}

</p>

</div>

{/* Recommended Colors */}

<Sparkles className=”w-5 h-5 text-[#D4AF37]” /> Kolory, które Cię podkręcą (5–7 przykładów):

</h4>

{finalVerdict.data.bestColors.map((col, idx) => (

</div>

</div>

))}

</div>

{/* Avoided Colors */}

<AlertCircle className=”w-5 h-5 text-rose-500″ /> Czego unikać przy samej twarzy:

</h4>

{finalVerdict.data.avoidColors.map((col, idx) => (

<div>

</div>

))}

</div>

{/* Jewelry Recommendation */}

💍

</div>

<div>

<p className=”text-xs font-bold text-[#8C6D62] uppercase tracking-wider”>Rekomendowana Biżuteria</p>

<p className=”text-xs text-[#2C2A29] font-medium”>{finalVerdict.data.jewelry}</p>

</div>

{/* Mandatory Closing Wardrobe Notices and Links */}

{finalVerdict.data.wardrobeNotice}

</p>

{/* Image Previews & Download Links */}

{finalVerdict.type === 'neutralny’ ? (

href={finalVerdict.data.wardrobeImgWarm}

target=”_blank”

rel=”noopener noreferrer”

className=”group block bg-white border border-[#E2DDD5] rounded-xl overflow-hidden hover:shadow-md transition-all p-2 text-center”

Otwórz Kapsułę Ciepłą <ExternalLink className=”w-3 h-3″ />

</span>

</a>

href={finalVerdict.data.wardrobeImgCool}

target=”_blank”

rel=”noopener noreferrer”

className=”group block bg-white border border-[#E2DDD5] rounded-xl overflow-hidden hover:shadow-md transition-all p-2 text-center”

Otwórz Kapsułę Chłodną <ExternalLink className=”w-3 h-3″ />

</span>

</a>

</div>

) : (

href={finalVerdict.data.wardrobeImg}

target=”_blank”

rel=”noopener noreferrer”

className=”group block bg-white border border-[#E2DDD5] rounded-2xl overflow-hidden hover:shadow-lg transition-all p-3 text-center max-w-md mx-auto”

Pobierz Pełną Wizualizację Szafy (Jesień 2026) <ExternalLink className=”w-3.5 h-3.5″ />

</span>

</a>

</div>

)}

</div>

{/* Actions / Restart */}

<button

onClick={() => {

setWizardStep(1);

setQuizAnswers({});

setFinalVerdict(null);

setUserPhoto(null);

}}

className=”px-4 py-2.5 rounded-2xl border border-[#D0C4B8] text-xs font-semibold text-[#5A4E48] hover:bg-[#F5EFE9] flex items-center gap-2″

<RefreshCw className=”w-3.5 h-3.5″ /> Wykonaj analizę ponownie

</button>

href=”https://szafawpigulce.pl”

target=”_blank”

rel=”noopener noreferrer”

className=”bg-[#8C6D62] hover:bg-[#72564C] text-white px-5 py-2.5 rounded-2xl text-xs font-bold shadow flex items-center gap-2″

Odwiedź www.szafawpigulce.pl <ExternalLink className=”w-3.5 h-3.5″ />

</a>

</div>

)}

</div>

</main>

{ }

<span className=”font-serif font-bold text-sm text-[#3A2E2B]”>Szafa w Pigułce</span>

</div>

</p>

<p>

Odwiedź nasz oficjalny serwis:{’ ’}

href=”https://szafawpigulce.pl”

target=”_blank”

rel=”noopener noreferrer”

className=”text-[#8C6D62] hover:underline font-bold”

www.szafawpigulce.pl

</a>

</p>

</footer>

</div>

);

}