webs-sdk 0.15.3 → 0.15.5

package/dist/components/Quiz.js

@@ -0,0 +1,748 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Quiz = Quiz;
+exports.QuizForYouCard = QuizForYouCard;
+const react_1 = __importStar(require("react"));
+function parseMeta(raw) {
+    if (!raw)
+        return {};
+    if (typeof raw === 'object')
+        return raw;
+    try {
+        return JSON.parse(raw);
+    }
+    catch (_a) {
+        return {};
+    }
+}
+function formatLabel(template, vars) {
+    return Object.entries(vars).reduce((acc, [key, val]) => acc.replace(`{${key}}`, String(val)), template);
+}
+function toQuizItem(item) {
+    var _a, _b;
+    const title = (item.title || item.name || '');
+    if (!title)
+        return null;
+    const contentsId = String(item.contents || '');
+    if (!contentsId)
+        return null;
+    const thumbnail = item.thumbnail ||
+        item.image ||
+        ((_b = (_a = item.files) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.url) ||
+        '';
+    return {
+        id: item.id,
+        title,
+        description: item.description,
+        thumbnail: thumbnail || undefined,
+        contentsId,
+    };
+}
+function extractResults(item, locale) {
+    const meta = parseMeta(item.metadata);
+    let quizConfig = meta.quiz_configuration;
+    if (!quizConfig && 'quiz_configuration' in item) {
+        quizConfig = item.quiz_configuration;
+    }
+    if (!quizConfig)
+        return [];
+    const langs = quizConfig.langs;
+    if (!langs)
+        return [];
+    const localeUpper = locale.toUpperCase();
+    const localeUpper2 = locale.substring(0, 2).toUpperCase();
+    let langData = langs[localeUpper];
+    if (!langData)
+        langData = langs[localeUpper2];
+    if (!langData)
+        langData = langs[locale];
+    if (!langData)
+        return [];
+    const resultados = langData.resultados;
+    if (!Array.isArray(resultados))
+        return [];
+    return resultados
+        .map(r => ({
+        title: String(r.titulo || ''),
+        description: String(r.titulo || ''),
+        minPoints: typeof r.puntos_ini === 'number' ? r.puntos_ini : 0,
+        maxPoints: typeof r.puntos_fin === 'number' ? r.puntos_fin : 0,
+    }))
+        .filter(r => r.description);
+}
+function extractQuestions(item, locale) {
+    const meta = parseMeta(item.metadata);
+    let quizConfig = meta.quiz_configuration;
+    if (!quizConfig && 'quiz_configuration' in item) {
+        quizConfig = item.quiz_configuration;
+    }
+    if (!quizConfig)
+        return [];
+    const langs = quizConfig.langs;
+    if (!langs)
+        return [];
+    const localeUpper = locale.toUpperCase();
+    const localeUpper2 = locale.substring(0, 2).toUpperCase();
+    let langData = langs[localeUpper];
+    if (!langData)
+        langData = langs[localeUpper2];
+    if (!langData)
+        langData = langs[locale];
+    if (!langData)
+        return [];
+    const preguntas = langData.preguntas;
+    if (!Array.isArray(preguntas))
+        return [];
+    return preguntas
+        .map((pregunta, idx) => {
+        const titulo = String(pregunta.titulo || '');
+        if (!titulo)
+            return null;
+        const respuestas = pregunta.respuestas;
+        if (!Array.isArray(respuestas) || respuestas.length < 2)
+            return null;
+        const options = respuestas
+            .map(r => ({
+            text: String(r.titulo || ''),
+            points: typeof r.puntos === 'number' ? r.puntos : 0,
+        }))
+            .filter(o => o.text);
+        if (options.length < 2)
+            return null;
+        return {
+            id: `${item.id}_q${idx}`,
+            question: titulo,
+            options,
+        };
+    })
+        .filter(Boolean);
+}
+function normalizeResponse(json) {
+    const j = json;
+    if (Array.isArray(j))
+        return j;
+    if (j === null || j === void 0 ? void 0 : j.data) {
+        const data = j.data;
+        if (data.data && typeof data.data === 'object') {
+            const dataData = data.data;
+            if (dataData.data && typeof dataData.data === 'object') {
+                const datDataData = dataData.data;
+                if ('quiz_configuration' in datDataData) {
+                    return [datDataData];
+                }
+                if (Array.isArray(datDataData))
+                    return datDataData;
+            }
+            if (Array.isArray(dataData))
+                return dataData;
+            if (typeof dataData === 'object' && dataData !== null)
+                return [dataData];
+        }
+        if (Array.isArray(data.data))
+            return data.data;
+        if (Array.isArray(data.contents))
+            return data.contents;
+        if (Array.isArray(data))
+            return data;
+        if (typeof data === 'object' && data !== null)
+            return [data];
+    }
+    if (Array.isArray(j.contents))
+        return j.contents;
+    return [];
+}
+function QuizCard({ quiz, index, theme, texts, onClick }) {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    return (react_1.default.createElement("div", { onClick: onClick, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), style: {
+            backgroundColor: theme.cardBackground,
+            border: `1.5px solid ${hovered ? theme.primaryColor : theme.cardBorderColor}`,
+            borderRadius: '16px',
+            overflow: 'hidden',
+            cursor: 'pointer',
+            transition: 'border-color 0.2s, transform 0.2s, box-shadow 0.2s',
+            transform: hovered ? 'translateY(-2px)' : 'none',
+            boxShadow: hovered ? '0 8px 24px rgba(0,0,0,0.12)' : '0 2px 8px rgba(0,0,0,0.06)',
+            display: 'flex',
+            flexDirection: 'column',
+        } },
+        react_1.default.createElement("div", { style: {
+                width: '100%',
+                aspectRatio: '16/9',
+                backgroundColor: theme.backgroundColor,
+                overflow: 'hidden',
+                position: 'relative',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            } }, quiz.thumbnail ? (react_1.default.createElement("img", { src: quiz.thumbnail, alt: quiz.title, style: { width: '100%', height: '100%', objectFit: 'cover' } })) : (react_1.default.createElement("div", { style: {
+                width: '56px',
+                height: '56px',
+                borderRadius: '50%',
+                backgroundColor: theme.primaryColor,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: theme.buttonTextColor,
+                fontSize: '24px',
+                fontWeight: 700,
+            } }, index + 1))),
+        react_1.default.createElement("div", { style: { padding: '16px', flex: 1, display: 'flex', flexDirection: 'column', gap: '8px' } },
+            react_1.default.createElement("p", { style: {
+                    color: theme.textColor,
+                    fontSize: '15px',
+                    lineHeight: 1.4,
+                    margin: 0,
+                    fontWeight: 700,
+                    display: '-webkit-box',
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: 'vertical',
+                    overflow: 'hidden',
+                } }, quiz.title),
+            quiz.description && (react_1.default.createElement("p", { style: {
+                    color: theme.neutralMid,
+                    fontSize: '13px',
+                    lineHeight: 1.4,
+                    margin: 0,
+                    display: '-webkit-box',
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: 'vertical',
+                    overflow: 'hidden',
+                } }, quiz.description)),
+            react_1.default.createElement("button", { style: {
+                    marginTop: 'auto',
+                    padding: '8px 16px',
+                    borderRadius: '20px',
+                    border: 'none',
+                    backgroundColor: theme.buttonColor,
+                    color: theme.buttonTextColor,
+                    fontSize: '13px',
+                    fontWeight: 600,
+                    cursor: 'pointer',
+                    transition: 'opacity 0.2s',
+                }, onMouseEnter: (e) => { e.currentTarget.style.opacity = '0.85'; }, onMouseLeave: (e) => { e.currentTarget.style.opacity = '1'; } }, texts.startQuiz))));
+}
+function QuizModal({ questions, results, startIndex, theme, texts, onClose }) {
+    var _a;
+    const [currentIndex, setCurrentIndex] = (0, react_1.useState)(startIndex);
+    const [answers, setAnswers] = (0, react_1.useState)(new Map());
+    const [finished, setFinished] = (0, react_1.useState)(false);
+    const current = questions[currentIndex];
+    const total = questions.length;
+    const isPointsBased = current.correctIndex === undefined;
+    const selectedOption = (_a = answers.get(currentIndex)) !== null && _a !== void 0 ? _a : null;
+    function handleSelect(optionIndex) {
+        setAnswers(prev => new Map(prev).set(currentIndex, optionIndex));
+    }
+    function handlePrevious() {
+        if (currentIndex > 0) {
+            setCurrentIndex(i => i - 1);
+        }
+    }
+    function handleNext() {
+        if (currentIndex + 1 >= total) {
+            setFinished(true);
+        }
+        else {
+            setCurrentIndex((i) => i + 1);
+        }
+    }
+    function handleRetry() {
+        setCurrentIndex(startIndex);
+        setAnswers(new Map());
+        setFinished(false);
+    }
+    function handleOverlayClick(e) {
+        if (e.target === e.currentTarget)
+            onClose();
+    }
+    (0, react_1.useEffect)(() => {
+        function handleKey(e) {
+            if (e.key === 'Escape')
+                onClose();
+        }
+        window.addEventListener('keydown', handleKey);
+        return () => window.removeEventListener('keydown', handleKey);
+    }, [onClose]);
+    (0, react_1.useEffect)(() => {
+        document.body.style.overflow = 'hidden';
+        return () => { document.body.style.overflow = ''; };
+    }, []);
+    const overlayStyle = {
+        position: 'fixed',
+        inset: 0,
+        zIndex: 9999,
+        backgroundColor: 'rgba(0,0,0,0.6)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '16px',
+    };
+    const modalStyle = {
+        backgroundColor: theme.cardBackground,
+        borderRadius: '20px',
+        width: '100%',
+        maxWidth: '560px',
+        maxHeight: '90vh',
+        overflowY: 'auto',
+        padding: '32px 28px',
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '20px',
+    };
+    if (finished) {
+        let score = 0;
+        answers.forEach((optionIdx, questionIdx) => {
+            const question = questions[questionIdx];
+            if (question.correctIndex === undefined) {
+                score += question.options[optionIdx].points;
+            }
+            else {
+                if (optionIdx === question.correctIndex) {
+                    score += 1;
+                }
+            }
+        });
+        let resultMessage;
+        const firstQuestion = questions[0];
+        const isQuizPointsBased = firstQuestion.correctIndex === undefined;
+        if (isQuizPointsBased && results && results.length > 0) {
+            const matchedResult = results.find(r => score >= r.minPoints && score <= r.maxPoints);
+            resultMessage = matchedResult === null || matchedResult === void 0 ? void 0 : matchedResult.description;
+        }
+        return (react_1.default.createElement("div", { style: overlayStyle, onClick: handleOverlayClick },
+            react_1.default.createElement("div", { style: modalStyle },
+                react_1.default.createElement("button", { onClick: onClose, "aria-label": texts.closeButton, style: {
+                        position: 'absolute',
+                        top: '16px',
+                        right: '16px',
+                        background: 'none',
+                        border: 'none',
+                        cursor: 'pointer',
+                        color: theme.neutralMid,
+                        fontSize: '20px',
+                        lineHeight: 1,
+                    } }, "\u2715"),
+                react_1.default.createElement("div", { style: { textAlign: 'center', paddingTop: '8px' } },
+                    react_1.default.createElement("div", { style: {
+                            width: '80px',
+                            height: '80px',
+                            borderRadius: '50%',
+                            backgroundColor: theme.primaryColor,
+                            margin: '0 auto 20px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            fontSize: '32px',
+                            color: theme.buttonTextColor,
+                        } }, "\uD83C\uDFC6"),
+                    isQuizPointsBased ? (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("p", { style: {
+                                fontSize: '18px',
+                                fontWeight: 600,
+                                color: theme.textColor,
+                                margin: '0 0 16px',
+                            } }, formatLabel(texts.scoreLabel, { score, total: score })),
+                        resultMessage && (react_1.default.createElement("p", { style: {
+                                fontSize: '15px',
+                                lineHeight: 1.6,
+                                color: theme.neutralMid,
+                                margin: 0,
+                                textAlign: 'left',
+                            } }, resultMessage)))) : (react_1.default.createElement("p", { style: {
+                            fontSize: '22px',
+                            fontWeight: 700,
+                            color: theme.textColor,
+                            margin: '0 0 8px',
+                        } }, formatLabel(texts.scoreLabel, { score, total })))),
+                react_1.default.createElement("div", { style: { display: 'flex', gap: '12px', marginTop: '8px' } },
+                    react_1.default.createElement("button", { onClick: handleRetry, style: {
+                            flex: 1,
+                            padding: '12px',
+                            borderRadius: '12px',
+                            border: `1.5px solid ${theme.primaryColor}`,
+                            backgroundColor: 'transparent',
+                            color: theme.primaryColor,
+                            fontWeight: 600,
+                            cursor: 'pointer',
+                            fontSize: '14px',
+                        } }, texts.retryButton),
+                    react_1.default.createElement("button", { onClick: onClose, style: {
+                            flex: 1,
+                            padding: '12px',
+                            borderRadius: '12px',
+                            border: 'none',
+                            backgroundColor: theme.primaryColor,
+                            color: theme.buttonTextColor,
+                            fontWeight: 600,
+                            cursor: 'pointer',
+                            fontSize: '14px',
+                        } }, texts.closeButton)))));
+    }
+    const isCorrect = !isPointsBased && selectedOption !== null && selectedOption === current.correctIndex;
+    return (react_1.default.createElement("div", { style: overlayStyle, onClick: handleOverlayClick },
+        react_1.default.createElement("div", { style: modalStyle },
+            react_1.default.createElement("button", { onClick: onClose, "aria-label": texts.closeButton, style: {
+                    position: 'absolute',
+                    top: '16px',
+                    right: '16px',
+                    background: 'none',
+                    border: 'none',
+                    cursor: 'pointer',
+                    color: theme.neutralMid,
+                    fontSize: '20px',
+                    lineHeight: 1,
+                } }, "\u2715"),
+            react_1.default.createElement("div", { style: { paddingTop: '4px' } },
+                react_1.default.createElement("div", { style: {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        marginBottom: '8px',
+                    } },
+                    react_1.default.createElement("span", { style: { fontSize: '12px', color: theme.neutralMid } }, formatLabel(texts.questionLabel, { current: currentIndex + 1, total }))),
+                react_1.default.createElement("div", { style: {
+                        height: '4px',
+                        borderRadius: '2px',
+                        backgroundColor: theme.cardBorderColor,
+                        overflow: 'hidden',
+                    } },
+                    react_1.default.createElement("div", { style: {
+                            height: '100%',
+                            width: `${((currentIndex + 1) / total) * 100}%`,
+                            backgroundColor: theme.primaryColor,
+                            transition: 'width 0.3s',
+                        } }))),
+            current.thumbnail && (react_1.default.createElement("div", { style: {
+                    borderRadius: '12px',
+                    overflow: 'hidden',
+                    aspectRatio: '16/9',
+                } },
+                react_1.default.createElement("img", { src: current.thumbnail, alt: current.question, style: { width: '100%', height: '100%', objectFit: 'cover' } }))),
+            react_1.default.createElement("p", { style: {
+                    fontSize: '18px',
+                    fontWeight: 700,
+                    color: theme.textColor,
+                    margin: 0,
+                    lineHeight: 1.45,
+                } }, current.question),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' } }, current.options.map((option, idx) => {
+                let bg = theme.cardBackground;
+                let border = theme.cardBorderColor;
+                let color = theme.textColor;
+                const hasAnswer = selectedOption !== null;
+                if (hasAnswer && !isPointsBased) {
+                    if (idx === current.correctIndex) {
+                        bg = '#E8F5E9';
+                        border = '#4CAF50';
+                        color = '#1B5E20';
+                    }
+                    else if (idx === selectedOption) {
+                        bg = '#FFEBEE';
+                        border = '#F44336';
+                        color = '#B71C1C';
+                    }
+                }
+                else if (idx === selectedOption) {
+                    bg = theme.primaryColor;
+                    color = theme.buttonTextColor;
+                    border = theme.primaryColor;
+                }
+                return (react_1.default.createElement("button", { key: idx, onClick: () => handleSelect(idx), style: {
+                        padding: '12px 16px',
+                        borderRadius: '12px',
+                        border: `1.5px solid ${border}`,
+                        backgroundColor: bg,
+                        color,
+                        fontSize: '14px',
+                        fontWeight: 500,
+                        textAlign: 'left',
+                        cursor: 'pointer',
+                        transition: 'all 0.2s',
+                        lineHeight: 1.5,
+                    } }, option.text));
+            })),
+            selectedOption !== null && !isPointsBased && (react_1.default.createElement("p", { style: {
+                    fontSize: '14px',
+                    fontWeight: 600,
+                    color: isCorrect ? '#2E7D32' : '#C62828',
+                    margin: 0,
+                } },
+                isCorrect ? texts.correctAnswer : texts.wrongAnswer,
+                current.explanation && (react_1.default.createElement("span", { style: { fontWeight: 400, display: 'block', marginTop: 4 } }, current.explanation)))),
+            react_1.default.createElement("div", { style: { display: 'flex', gap: '12px' } },
+                currentIndex > 0 && (react_1.default.createElement("button", { onClick: handlePrevious, style: {
+                        flex: 1,
+                        padding: '14px',
+                        borderRadius: '12px',
+                        border: `1.5px solid ${theme.primaryColor}`,
+                        backgroundColor: 'transparent',
+                        color: theme.primaryColor,
+                        fontWeight: 700,
+                        fontSize: '15px',
+                        cursor: 'pointer',
+                        transition: 'opacity 0.2s',
+                    }, onMouseEnter: (e) => { e.currentTarget.style.opacity = '0.85'; }, onMouseLeave: (e) => { e.currentTarget.style.opacity = '1'; } },
+                    "\u2190 ",
+                    texts.previousButton)),
+                react_1.default.createElement("button", { onClick: handleNext, disabled: selectedOption === null, style: {
+                        flex: currentIndex > 0 ? 1 : 'auto',
+                        width: currentIndex === 0 ? '100%' : 'auto',
+                        padding: '14px',
+                        borderRadius: '12px',
+                        border: 'none',
+                        backgroundColor: selectedOption === null ? theme.neutralMid : theme.primaryColor,
+                        color: theme.buttonTextColor,
+                        fontWeight: 700,
+                        fontSize: '15px',
+                        cursor: selectedOption === null ? 'not-allowed' : 'pointer',
+                        transition: 'opacity 0.2s',
+                        opacity: selectedOption === null ? 0.5 : 1,
+                    }, onMouseEnter: (e) => { if (selectedOption !== null)
+                        e.currentTarget.style.opacity = '0.85'; }, onMouseLeave: (e) => { if (selectedOption !== null)
+                        e.currentTarget.style.opacity = '1'; } }, currentIndex + 1 >= total ? texts.submitButton : texts.nextButton)))));
+}
+const DEFAULT_THEME = {
+    primaryColor: '#FF2273',
+    primaryHoverColor: '#E81F69',
+    textColor: '#0F1F35',
+    backgroundColor: '#F5F5F5',
+    cardBackground: '#FFFFFF',
+    buttonColor: '#FF2273',
+    buttonTextColor: '#FFFFFF',
+    neutralMid: '#8C8C8C',
+    cardBorderColor: 'rgba(15,31,53,0.1)',
+    titleDarkColor: '#210F5C',
+};
+const DEFAULT_TEXTS = {
+    title: 'Quizzes',
+    subtitle: 'Test your knowledge',
+    loading: 'Loading quizzes...',
+    noItems: 'No quizzes available',
+    loadMore: 'Load More',
+    startQuiz: 'Start Quiz',
+    questionLabel: 'Question {current} of {total}',
+    nextButton: 'Next',
+    previousButton: 'Previous',
+    submitButton: 'Submit',
+    correctAnswer: 'Correct!',
+    wrongAnswer: 'Incorrect',
+    retryButton: 'Retry',
+    closeButton: 'Close',
+    scoreLabel: 'You got {score}/{total} correct',
+    loadingQuestions: 'Loading questions...',
+};
+function Quiz({ config, theme: themeP, texts: textsP, onQuizStart, onQuizComplete }) {
+    const theme = Object.assign(Object.assign({}, DEFAULT_THEME), themeP);
+    const texts = Object.assign(Object.assign({}, DEFAULT_TEXTS), textsP);
+    const { apiUrl, questionsApiUrl, tags, includeIds, locale, initialCount = 12, loadMoreCount = 8 } = config;
+    const [quizItems, setQuizItems] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [visibleCount, setVisibleCount] = (0, react_1.useState)(initialCount);
+    const [activeQuiz, setActiveQuiz] = (0, react_1.useState)(null);
+    const [activeQuestions, setActiveQuestions] = (0, react_1.useState)([]);
+    const [activeResults, setActiveResults] = (0, react_1.useState)([]);
+    const [loadingQuestions, setLoadingQuestions] = (0, react_1.useState)(false);
+    const fetchList = (0, react_1.useCallback)(async () => {
+        setLoading(true);
+        try {
+            const res = await fetch(apiUrl, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(Object.assign({ language: locale || 'en', tags: tags || [] }, (includeIds && includeIds.length > 0 ? { includeIds } : {}))),
+            });
+            if (!res.ok)
+                throw new Error(`API error ${res.status}`);
+            const json = await res.json();
+            const raw = normalizeResponse(json);
+            const parsed = raw.map(toQuizItem).filter((q) => q !== null);
+            const uniqueIds = new Set();
+            const unique = parsed.filter(item => {
+                if (uniqueIds.has(item.id))
+                    return false;
+                uniqueIds.add(item.id);
+                return true;
+            });
+            setQuizItems(unique);
+        }
+        catch (err) {
+            console.error('[Quiz] fetch error:', err);
+            setQuizItems([]);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [apiUrl, locale, tags, includeIds]);
+    (0, react_1.useEffect)(() => {
+        fetchList();
+    }, [fetchList]);
+    const handleCardClick = (0, react_1.useCallback)(async (quiz) => {
+        setActiveQuiz(quiz);
+        setLoadingQuestions(true);
+        if (onQuizStart) {
+            onQuizStart(quiz);
+        }
+        try {
+            const url = questionsApiUrl || apiUrl;
+            const res = await fetch(url, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    preset: 'getQuiz',
+                    params: {
+                        quiz_id: quiz.contentsId,
+                        language: locale || 'en',
+                    },
+                }),
+            });
+            if (!res.ok)
+                throw new Error(`API error ${res.status}`);
+            const json = await res.json();
+            const raw = normalizeResponse(json);
+            if (raw.length === 0) {
+                console.error('[Quiz] No data returned from questions API');
+                setLoadingQuestions(false);
+                return;
+            }
+            const item = raw[0];
+            const questions = extractQuestions(item, locale || 'en');
+            const results = extractResults(item, locale || 'en');
+            if (questions.length === 0) {
+                console.error('[Quiz] No questions found');
+            }
+            setActiveQuestions(questions);
+            setActiveResults(results);
+        }
+        catch (err) {
+            console.error('[Quiz] fetch questions error:', err);
+            setActiveQuestions([]);
+            setActiveResults([]);
+        }
+        finally {
+            setLoadingQuestions(false);
+        }
+    }, [apiUrl, questionsApiUrl, locale, onQuizStart]);
+    const handleCloseModal = (0, react_1.useCallback)(() => {
+        setActiveQuiz(null);
+        setActiveQuestions([]);
+        setActiveResults([]);
+    }, []);
+    const visible = quizItems.slice(0, visibleCount);
+    const hasMore = visibleCount < quizItems.length;
+    return (react_1.default.createElement("div", { style: { backgroundColor: theme.backgroundColor, minHeight: '100vh' } },
+        react_1.default.createElement("div", { style: { padding: '40px 16px', maxWidth: '1200px', margin: '0 auto' } },
+            react_1.default.createElement("div", { style: { textAlign: 'center', marginBottom: '32px' } },
+                react_1.default.createElement("h2", { style: {
+                        fontSize: '28px',
+                        fontWeight: 700,
+                        color: theme.titleDarkColor,
+                        margin: '0 0 8px',
+                    } }, texts.title),
+                texts.subtitle && (react_1.default.createElement("p", { style: {
+                        fontSize: '16px',
+                        color: theme.neutralMid,
+                        margin: 0,
+                    } }, texts.subtitle))),
+            loading ? (react_1.default.createElement("div", { style: { textAlign: 'center', padding: '40px', color: theme.neutralMid } }, texts.loading)) : quizItems.length === 0 ? (react_1.default.createElement("div", { style: { textAlign: 'center', padding: '40px', color: theme.neutralMid } }, texts.noItems)) : (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", { style: {
+                        display: 'grid',
+                        gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
+                        gap: '20px',
+                        marginBottom: '32px',
+                    } }, visible.map((quiz, idx) => (react_1.default.createElement(QuizCard, { key: quiz.id, quiz: quiz, index: idx, theme: theme, texts: texts, onClick: () => handleCardClick(quiz) })))),
+                hasMore && (react_1.default.createElement("div", { style: { textAlign: 'center' } },
+                    react_1.default.createElement("button", { onClick: () => setVisibleCount(v => v + loadMoreCount), style: {
+                            padding: '12px 32px',
+                            borderRadius: '24px',
+                            border: `1.5px solid ${theme.primaryColor}`,
+                            backgroundColor: 'transparent',
+                            color: theme.primaryColor,
+                            fontWeight: 600,
+                            fontSize: '15px',
+                            cursor: 'pointer',
+                            transition: 'all 0.2s',
+                        }, onMouseEnter: (e) => {
+                            e.currentTarget.style.backgroundColor = theme.primaryColor;
+                            e.currentTarget.style.color = theme.buttonTextColor;
+                        }, onMouseLeave: (e) => {
+                            e.currentTarget.style.backgroundColor = 'transparent';
+                            e.currentTarget.style.color = theme.primaryColor;
+                        } }, texts.loadMore)))))),
+        activeQuiz && loadingQuestions && (react_1.default.createElement("div", { style: {
+                position: 'fixed',
+                inset: 0,
+                zIndex: 9999,
+                backgroundColor: 'rgba(0,0,0,0.6)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            } },
+            react_1.default.createElement("div", { style: {
+                    backgroundColor: theme.cardBackground,
+                    borderRadius: '20px',
+                    padding: '40px',
+                    textAlign: 'center',
+                    color: theme.textColor,
+                } }, texts.loadingQuestions))),
+        activeQuiz && !loadingQuestions && activeQuestions.length > 0 && (react_1.default.createElement(QuizModal, { questions: activeQuestions, results: activeResults, startIndex: 0, theme: theme, texts: texts, onClose: handleCloseModal }))));
+}
+function QuizForYouCard({ title, description, ctaText, ctaHref, desktopImage, mobileImage, imageAlt = '', imageOnRight = false, titleColor = '#210F5C', descriptionColor = '#0F1F35', ctaColor = '#FF2273', ctaHoverColor = '#E81F69', backgroundColor = '#FFFFFF', paddingClass = '', }) {
+    return (react_1.default.createElement("div", { style: { backgroundColor, width: '100%' }, className: paddingClass },
+        react_1.default.createElement("div", { style: {
+                display: 'flex',
+                flexDirection: imageOnRight ? 'row-reverse' : 'row',
+                minHeight: '420px',
+                alignItems: 'stretch',
+            } },
+            react_1.default.createElement("div", { style: { flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '40px' } },
+                react_1.default.createElement("div", { style: { maxWidth: '400px', textAlign: 'center' } },
+                    react_1.default.createElement("h2", { style: { color: titleColor, fontSize: '32px', fontWeight: 700, marginBottom: '16px' } }, title),
+                    react_1.default.createElement("p", { style: { color: descriptionColor, fontSize: '16px', marginBottom: '24px' } }, description),
+                    react_1.default.createElement("a", { href: ctaHref, style: {
+                            display: 'inline-block',
+                            padding: '12px 32px',
+                            borderRadius: '24px',
+                            backgroundColor: ctaColor,
+                            color: '#fff',
+                            textDecoration: 'none',
+                            fontWeight: 600,
+                            transition: 'background-color 0.2s',
+                        }, onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = ctaHoverColor; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = ctaColor; } }, ctaText))),
+            react_1.default.createElement("div", { style: { flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px' } },
+                react_1.default.createElement("img", { src: desktopImage, alt: imageAlt, style: { maxWidth: '100%', height: 'auto' } })))));
+}
+exports.default = Quiz;
+//# sourceMappingURL=Quiz.js.map