webs-sdk 0.15.0 → 0.15.2

package/dist/components/Quiz.js

@@ -1,748 +0,0 @@
-"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