webs-sdk 0.18.28 → 0.18.29

package/dist/components/AvatarAI.js

@@ -1,42 +1,10 @@
 "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.AvatarAI = AvatarAI;
 exports.AvatarAIForYouCard = AvatarAIForYouCard;
 exports.AvatarAIPage = AvatarAIPage;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const AVATAR_AI_CSS = `
 .avatarai-styles-grid::-webkit-scrollbar { width: 6px; }
 .avatarai-styles-grid::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
@@ -343,214 +311,131 @@ function AvatarAI({ styles: stylesProp = [], stylesTag, apiBaseUrl, locale, mood
     };
     const isProcessing = isGenerating || (!!generatedResult && !generatedImageUrl);
     const canGenerate = !!uploadedImage && !!selectedStyle && !isProcessing && !!config;
-    return (react_1.default.createElement("div", { style: { width: '100%', backgroundColor: mergedTheme.backgroundColor } },
-        react_1.default.createElement("div", { style: { maxWidth: '1280px', margin: '0 auto', padding: '0 16px' } },
-            react_1.default.createElement("div", { style: {
+    return ((0, jsx_runtime_1.jsx)("div", { style: { width: '100%', backgroundColor: mergedTheme.backgroundColor }, children: (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: '1280px', margin: '0 auto', padding: '0 16px' }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                     backgroundColor: mergedTheme.cardBackground,
                     borderRadius: '8px',
                     boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
                     padding: '32px',
-                } },
-                react_1.default.createElement("h2", { style: { fontSize: 'clamp(24px, 4vw, 36px)', fontWeight: 700, color: mergedTheme.textColor, marginBottom: '32px' } }, mergedTexts.styleTitle),
-                react_1.default.createElement("div", { style: { display: 'flex', gap: '32px', flexWrap: 'wrap' } },
-                    react_1.default.createElement("div", { style: {
-                            flex: '1 1 300px',
-                            minHeight: '500px',
-                            border: `2px dashed ${generatedImageUrl ? mergedTheme.primaryColor : '#d1d5db'}`,
-                            borderRadius: '8px',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            position: 'relative',
-                            padding: '32px',
-                            backgroundColor: '#fff',
-                            transition: 'border-color 0.3s',
-                        } },
-                        react_1.default.createElement("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileChange, style: { display: 'none' } }),
-                        uploadedImage ? (react_1.default.createElement(react_1.default.Fragment, null,
-                            react_1.default.createElement("img", { src: generatedImageUrl && !isComparing ? generatedImageUrl : uploadedImage, alt: generatedImageUrl && !isComparing ? 'Generated avatar' : 'Uploaded photo', style: { width: '100%', objectFit: 'contain', maxHeight: '450px', borderRadius: '8px' } }),
-                            generatedImageUrl && (react_1.default.createElement("div", { style: {
-                                    position: 'absolute', top: '16px', left: '16px',
-                                    backgroundColor: isComparing ? 'rgba(0,0,0,0.6)' : mergedTheme.primaryColor,
-                                    color: 'white', fontSize: '11px', fontWeight: 700,
-                                    padding: '4px 10px', borderRadius: '9999px',
-                                    transition: 'background-color 0.2s',
-                                } }, isComparing ? 'ORIGINAL' : 'RESULT')),
-                            !generatedImageUrl && (react_1.default.createElement("button", { onClick: handleRemoveImage, style: {
-                                    position: 'absolute', top: '16px', right: '16px',
-                                    width: '48px', height: '48px', backgroundColor: '#FF6B6B',
-                                    borderRadius: '50%', border: 'none', cursor: 'pointer',
-                                    display: 'flex', alignItems: 'center', justifyContent: 'center',
-                                    boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
-                                } },
-                                react_1.default.createElement("svg", { fill: "none", stroke: "white", viewBox: "0 0 24 24", style: { width: '24px', height: '24px' } },
-                                    react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })))),
-                            generatedImageUrl && (react_1.default.createElement("button", { onMouseDown: () => setIsComparing(true), onMouseUp: () => setIsComparing(false), onMouseLeave: () => setIsComparing(false), onTouchStart: () => setIsComparing(true), onTouchEnd: () => setIsComparing(false), style: {
-                                    position: 'absolute', bottom: '16px', left: '50%', transform: 'translateX(-50%)',
-                                    backgroundColor: 'rgba(0,0,0,0.65)', color: 'white',
-                                    fontWeight: 700, fontSize: '13px', padding: '10px 20px',
-                                    borderRadius: '9999px', border: 'none', cursor: 'pointer',
-                                    display: 'flex', alignItems: 'center', gap: '8px',
-                                    backdropFilter: 'blur(4px)',
-                                    userSelect: 'none',
-                                    whiteSpace: 'nowrap',
-                                } },
-                                react_1.default.createElement("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", style: { width: '16px', height: '16px' } },
-                                    react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }),
-                                    react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })),
-                                "Hold to compare")))) : (react_1.default.createElement("button", { onClick: handleUploadClick, style: {
-                                backgroundColor: mergedTheme.primaryColor, color: 'white',
-                                fontWeight: 700, fontSize: '18px', padding: '16px 32px',
-                                borderRadius: '9999px', border: 'none', cursor: 'pointer',
-                                display: 'flex', alignItems: 'center', gap: '12px',
-                            }, onMouseEnter: e => { e.currentTarget.style.backgroundColor = mergedTheme.primaryHoverColor || '#ff1600'; }, onMouseLeave: e => { e.currentTarget.style.backgroundColor = mergedTheme.primaryColor || '#FF5500'; } },
-                            react_1.default.createElement("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", style: { width: '24px', height: '24px' } },
-                                react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" })),
-                            mergedTexts.uploadButton))),
-                    react_1.default.createElement("div", { style: { flex: '1 1 300px', display: 'flex', flexDirection: 'column', gap: '24px' } },
-                        react_1.default.createElement("div", null,
-                            react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '16px' } },
-                                react_1.default.createElement("svg", { fill: "none", stroke: mergedTheme.primaryColor, viewBox: "0 0 24 24", style: { width: '24px', height: '24px' } },
-                                    react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" })),
-                                react_1.default.createElement("h3", { style: { fontSize: '20px', fontWeight: 700, color: mergedTheme.textColor, margin: 0 } }, mergedTexts.styleSectionTitle)),
-                            react_1.default.createElement("div", { className: "avatarai-styles-grid", style: { maxHeight: '480px', overflowY: 'auto', padding: '4px' } },
-                                react_1.default.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '12px' } }, styles.map((style) => (react_1.default.createElement("button", { key: style.id, onClick: () => setSelectedStyle(style.id), title: style.name, style: {
-                                        position: 'relative', aspectRatio: '1 / 1', borderRadius: '12px',
-                                        overflow: 'hidden', border: 'none', padding: 0, cursor: 'pointer',
-                                        outline: selectedStyle === style.id ? `3px solid ${mergedTheme.primaryColor}` : '3px solid transparent',
-                                        outlineOffset: '2px',
-                                        transform: selectedStyle === style.id ? 'scale(1.03)' : 'scale(1)',
-                                        transition: 'transform 0.2s, outline-color 0.2s',
-                                    }, onMouseEnter: e => { if (selectedStyle !== style.id)
-                                        e.currentTarget.style.transform = 'scale(1.03)'; }, onMouseLeave: e => { if (selectedStyle !== style.id)
-                                        e.currentTarget.style.transform = 'scale(1)'; } },
-                                    react_1.default.createElement("img", { src: style.image, alt: style.name, style: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' } }))))))),
-                        react_1.default.createElement("div", { style: { display: 'flex', gap: '24px', flexWrap: 'wrap' } },
-                            react_1.default.createElement("div", { style: { flex: '1 1 140px' } },
-                                react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '16px' } },
-                                    react_1.default.createElement("svg", { fill: "none", stroke: mergedTheme.primaryColor, viewBox: "0 0 24 24", style: { width: '24px', height: '24px' } },
-                                        react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" })),
-                                    react_1.default.createElement("h3", { style: { fontSize: '18px', fontWeight: 700, color: mergedTheme.textColor, margin: 0 } }, mergedTexts.moodsTitle)),
-                                react_1.default.createElement("div", { style: { display: 'flex', gap: '8px' } }, moods.map((mood) => (react_1.default.createElement("button", { key: mood.id, onClick: () => setSelectedMood(mood.id), title: mood.name, style: {
-                                        width: '40px', height: '40px', borderRadius: '50%',
-                                        border: selectedMood === mood.id ? 'none' : `2px solid ${mergedTheme.primaryColor}`,
-                                        backgroundColor: selectedMood === mood.id ? mergedTheme.primaryColor : 'white',
-                                        padding: '8px', cursor: 'pointer',
-                                        display: 'flex', alignItems: 'center', justifyContent: 'center',
-                                        transform: selectedMood === mood.id ? 'scale(1.1)' : 'scale(1)',
-                                        outline: selectedMood === mood.id ? `4px solid ${mergedTheme.primaryColor}44` : 'none',
-                                        transition: 'all 0.2s',
-                                    }, onMouseEnter: e => { e.currentTarget.style.transform = 'scale(1.1)'; }, onMouseLeave: e => { e.currentTarget.style.transform = selectedMood === mood.id ? 'scale(1.1)' : 'scale(1)'; } },
-                                    react_1.default.createElement("img", { src: mood.icon, alt: mood.name, style: {
-                                            width: '100%', height: '100%', objectFit: 'contain',
-                                            filter: selectedMood === mood.id ? 'brightness(0) invert(1)' : 'none',
-                                        } })))))),
-                            react_1.default.createElement("div", { style: { flex: '1 1 140px' } },
-                                react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '16px' } },
-                                    react_1.default.createElement("svg", { fill: "none", stroke: mergedTheme.primaryColor, viewBox: "0 0 24 24", style: { width: '24px', height: '24px' } },
-                                        react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" })),
-                                    react_1.default.createElement("h3", { style: { fontSize: '18px', fontWeight: 700, color: mergedTheme.textColor, margin: 0 } }, mergedTexts.backgroundTitle)),
-                                react_1.default.createElement("input", { ref: colorPickerRef, type: "color", onChange: handleColorChange, style: { display: 'none' } }),
-                                react_1.default.createElement("div", { style: { display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap' } },
-                                    react_1.default.createElement("button", { onClick: handleColorPickerClick, title: "Select color", style: {
-                                            width: '48px', height: '48px', borderRadius: '50%',
-                                            border: '2px solid #d1d5db', backgroundColor: 'white', cursor: 'pointer',
-                                            display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '8px',
-                                            outline: selectedBgColor && selectedBgColor !== 'transparent' ? `4px solid ${mergedTheme.primaryColor}44` : 'none',
-                                            transform: selectedBgColor && selectedBgColor !== 'transparent' ? 'scale(1.1)' : 'scale(1)',
-                                            transition: 'all 0.2s',
-                                        }, onMouseEnter: e => { e.currentTarget.style.transform = 'scale(1.1)'; }, onMouseLeave: e => { e.currentTarget.style.transform = selectedBgColor && selectedBgColor !== 'transparent' ? 'scale(1.1)' : 'scale(1)'; } },
-                                        react_1.default.createElement("img", { src: "https://d2obs2d3lmpnq9.cloudfront.net/ADS/cmp%20color%20picker/ColorPicker_CONsombra%201%20%281%29.svg", alt: "Color Picker", style: { width: '32px', height: '32px', objectFit: 'contain' } })),
-                                    recentColors.map((color, index) => (react_1.default.createElement("button", { key: index, onClick: () => handleRecentColorClick(color), title: `Recent color ${index + 1}`, style: {
-                                            width: '48px', height: '48px', borderRadius: '50%',
-                                            border: selectedBgColor === color ? `2px solid ${mergedTheme.primaryColor}` : '2px solid #d1d5db',
-                                            backgroundColor: color, cursor: 'pointer',
-                                            outline: selectedBgColor === color ? `4px solid ${mergedTheme.primaryColor}44` : 'none',
-                                            transform: selectedBgColor === color ? 'scale(1.1)' : 'scale(1)',
-                                            transition: 'all 0.2s',
-                                        }, onMouseEnter: e => { e.currentTarget.style.transform = 'scale(1.1)'; }, onMouseLeave: e => { e.currentTarget.style.transform = selectedBgColor === color ? 'scale(1.1)' : 'scale(1)'; } }))),
-                                    react_1.default.createElement("button", { onClick: handleTransparentClick, title: "Transparent", style: {
-                                            width: '48px', height: '48px', borderRadius: '50%',
-                                            border: selectedBgColor === 'transparent' ? `2px solid ${mergedTheme.primaryColor}` : '2px solid #d1d5db',
-                                            backgroundImage: 'repeating-linear-gradient(45deg, #ddd 0, #ddd 1px, transparent 0, transparent 50%), repeating-linear-gradient(-45deg, #ddd 0, #ddd 1px, transparent 0, transparent 50%)',
-                                            backgroundSize: '10px 10px', backgroundColor: '#fff', cursor: 'pointer',
-                                            outline: selectedBgColor === 'transparent' ? `4px solid ${mergedTheme.primaryColor}44` : 'none',
-                                            transform: selectedBgColor === 'transparent' ? 'scale(1.1)' : 'scale(1)',
-                                            transition: 'all 0.2s',
-                                        }, onMouseEnter: e => { e.currentTarget.style.transform = 'scale(1.1)'; }, onMouseLeave: e => { e.currentTarget.style.transform = selectedBgColor === 'transparent' ? 'scale(1.1)' : 'scale(1)'; } })))))),
-                error && (react_1.default.createElement("div", { style: { padding: '12px', backgroundColor: '#fef2f2', border: '1px solid #fecaca', borderRadius: '8px', marginTop: '16px' } },
-                    react_1.default.createElement("p", { style: { color: '#dc2626', fontSize: '14px', margin: 0 } }, error))),
-                react_1.default.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px', marginTop: '32px' } },
-                    react_1.default.createElement("button", { onClick: handleStartAgain, disabled: !generatedResult, style: {
-                            backgroundColor: generatedResult ? mergedTheme.primaryColor : '#d1d5db',
-                            color: generatedResult ? 'white' : '#9ca3af',
-                            fontWeight: 700, fontSize: '18px', padding: '16px 32px',
-                            borderRadius: '9999px', border: 'none',
-                            cursor: generatedResult ? 'pointer' : 'not-allowed',
-                            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '12px',
-                        }, onMouseEnter: e => { if (generatedResult)
-                            e.currentTarget.style.backgroundColor = mergedTheme.primaryHoverColor || '#ff1600'; }, onMouseLeave: e => { if (generatedResult)
-                            e.currentTarget.style.backgroundColor = mergedTheme.primaryColor || '#FF5500'; } },
-                        react_1.default.createElement("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", style: { width: '24px', height: '24px' } },
-                            react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" })),
-                        mergedTexts.startAgainButton),
-                    react_1.default.createElement("button", { onClick: handleGenerate, disabled: !canGenerate, style: {
-                            backgroundColor: canGenerate ? '#FF6B6B' : '#d1d5db',
-                            color: canGenerate ? 'white' : '#9ca3af',
-                            fontWeight: 700, fontSize: '18px', padding: '16px 32px',
-                            borderRadius: '9999px', border: 'none',
-                            cursor: canGenerate ? 'pointer' : 'not-allowed',
-                            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '12px',
-                        }, onMouseEnter: e => { if (canGenerate)
-                            e.currentTarget.style.backgroundColor = '#ff5252'; }, onMouseLeave: e => { if (canGenerate)
-                            e.currentTarget.style.backgroundColor = '#FF6B6B'; } }, isGenerating ? (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement("svg", { style: { width: '24px', height: '24px' }, className: "animate-spin", fill: "none", viewBox: "0 0 24 24" },
-                            react_1.default.createElement("circle", { style: { opacity: 0.25 }, cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-                            react_1.default.createElement("path", { style: { opacity: 0.75 }, fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })),
-                        mergedTexts.generatingButton)) : (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", style: { width: '24px', height: '24px' } },
-                            react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" })),
-                        mergedTexts.generateButton))),
-                    react_1.default.createElement("button", { onClick: handleDownload, disabled: !generatedImageUrl, style: {
-                            backgroundColor: generatedImageUrl ? mergedTheme.primaryColor : '#d1d5db',
-                            color: generatedImageUrl ? 'white' : '#9ca3af',
-                            fontWeight: 700, fontSize: '18px', padding: '16px 32px',
-                            borderRadius: '9999px', border: 'none',
-                            cursor: generatedImageUrl ? 'pointer' : 'not-allowed',
-                            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '12px',
-                        }, onMouseEnter: e => { if (generatedImageUrl)
-                            e.currentTarget.style.backgroundColor = mergedTheme.primaryHoverColor || '#ff1600'; }, onMouseLeave: e => { if (generatedImageUrl)
-                            e.currentTarget.style.backgroundColor = mergedTheme.primaryColor || '#FF5500'; } },
-                        react_1.default.createElement("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", style: { width: '24px', height: '24px' } },
-                            react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" })),
-                        mergedTexts.downloadButton))))));
+                }, children: [(0, jsx_runtime_1.jsx)("h2", { style: { fontSize: 'clamp(24px, 4vw, 36px)', fontWeight: 700, color: mergedTheme.textColor, marginBottom: '32px' }, children: mergedTexts.styleTitle }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '32px', flexWrap: 'wrap' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                    flex: '1 1 300px',
+                                    minHeight: '500px',
+                                    border: `2px dashed ${generatedImageUrl ? mergedTheme.primaryColor : '#d1d5db'}`,
+                                    borderRadius: '8px',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    position: 'relative',
+                                    padding: '32px',
+                                    backgroundColor: '#fff',
+                                    transition: 'border-color 0.3s',
+                                }, children: [(0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileChange, style: { display: 'none' } }), uploadedImage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: generatedImageUrl && !isComparing ? generatedImageUrl : uploadedImage, alt: generatedImageUrl && !isComparing ? 'Generated avatar' : 'Uploaded photo', style: { width: '100%', objectFit: 'contain', maxHeight: '450px', borderRadius: '8px' } }), generatedImageUrl && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                    position: 'absolute', top: '16px', left: '16px',
+                                                    backgroundColor: isComparing ? 'rgba(0,0,0,0.6)' : mergedTheme.primaryColor,
+                                                    color: 'white', fontSize: '11px', fontWeight: 700,
+                                                    padding: '4px 10px', borderRadius: '9999px',
+                                                    transition: 'background-color 0.2s',
+                                                }, children: isComparing ? 'ORIGINAL' : 'RESULT' })), !generatedImageUrl && ((0, jsx_runtime_1.jsx)("button", { onClick: handleRemoveImage, style: {
+                                                    position: 'absolute', top: '16px', right: '16px',
+                                                    width: '48px', height: '48px', backgroundColor: '#FF6B6B',
+                                                    borderRadius: '50%', border: 'none', cursor: 'pointer',
+                                                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                                    boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
+                                                }, children: (0, jsx_runtime_1.jsx)("svg", { fill: "none", stroke: "white", viewBox: "0 0 24 24", style: { width: '24px', height: '24px' }, children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), generatedImageUrl && ((0, jsx_runtime_1.jsxs)("button", { onMouseDown: () => setIsComparing(true), onMouseUp: () => setIsComparing(false), onMouseLeave: () => setIsComparing(false), onTouchStart: () => setIsComparing(true), onTouchEnd: () => setIsComparing(false), style: {
+                                                    position: 'absolute', bottom: '16px', left: '50%', transform: 'translateX(-50%)',
+                                                    backgroundColor: 'rgba(0,0,0,0.65)', color: 'white',
+                                                    fontWeight: 700, fontSize: '13px', padding: '10px 20px',
+                                                    borderRadius: '9999px', border: 'none', cursor: 'pointer',
+                                                    display: 'flex', alignItems: 'center', gap: '8px',
+                                                    backdropFilter: 'blur(4px)',
+                                                    userSelect: 'none',
+                                                    whiteSpace: 'nowrap',
+                                                }, children: [(0, jsx_runtime_1.jsxs)("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", style: { width: '16px', height: '16px' }, children: [(0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }), (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })] }), "Hold to compare"] }))] })) : ((0, jsx_runtime_1.jsxs)("button", { onClick: handleUploadClick, style: {
+                                            backgroundColor: mergedTheme.primaryColor, color: 'white',
+                                            fontWeight: 700, fontSize: '18px', padding: '16px 32px',
+                                            borderRadius: '9999px', border: 'none', cursor: 'pointer',
+                                            display: 'flex', alignItems: 'center', gap: '12px',
+                                        }, onMouseEnter: e => { e.currentTarget.style.backgroundColor = mergedTheme.primaryHoverColor || '#ff1600'; }, onMouseLeave: e => { e.currentTarget.style.backgroundColor = mergedTheme.primaryColor || '#FF5500'; }, children: [(0, jsx_runtime_1.jsx)("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", style: { width: '24px', height: '24px' }, children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }), mergedTexts.uploadButton] }))] }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: '1 1 300px', display: 'flex', flexDirection: 'column', gap: '24px' }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '16px' }, children: [(0, jsx_runtime_1.jsx)("svg", { fill: "none", stroke: mergedTheme.primaryColor, viewBox: "0 0 24 24", style: { width: '24px', height: '24px' }, children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" }) }), (0, jsx_runtime_1.jsx)("h3", { style: { fontSize: '20px', fontWeight: 700, color: mergedTheme.textColor, margin: 0 }, children: mergedTexts.styleSectionTitle })] }), (0, jsx_runtime_1.jsx)("div", { className: "avatarai-styles-grid", style: { maxHeight: '480px', overflowY: 'auto', padding: '4px' }, children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '12px' }, children: styles.map((style) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => setSelectedStyle(style.id), title: style.name, style: {
+                                                            position: 'relative', aspectRatio: '1 / 1', borderRadius: '12px',
+                                                            overflow: 'hidden', border: 'none', padding: 0, cursor: 'pointer',
+                                                            outline: selectedStyle === style.id ? `3px solid ${mergedTheme.primaryColor}` : '3px solid transparent',
+                                                            outlineOffset: '2px',
+                                                            transform: selectedStyle === style.id ? 'scale(1.03)' : 'scale(1)',
+                                                            transition: 'transform 0.2s, outline-color 0.2s',
+                                                        }, onMouseEnter: e => { if (selectedStyle !== style.id)
+                                                            e.currentTarget.style.transform = 'scale(1.03)'; }, onMouseLeave: e => { if (selectedStyle !== style.id)
+                                                            e.currentTarget.style.transform = 'scale(1)'; }, children: (0, jsx_runtime_1.jsx)("img", { src: style.image, alt: style.name, style: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' } }) }, style.id))) }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '24px', flexWrap: 'wrap' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { flex: '1 1 140px' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '16px' }, children: [(0, jsx_runtime_1.jsx)("svg", { fill: "none", stroke: mergedTheme.primaryColor, viewBox: "0 0 24 24", style: { width: '24px', height: '24px' }, children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }), (0, jsx_runtime_1.jsx)("h3", { style: { fontSize: '18px', fontWeight: 700, color: mergedTheme.textColor, margin: 0 }, children: mergedTexts.moodsTitle })] }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: '8px' }, children: moods.map((mood) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => setSelectedMood(mood.id), title: mood.name, style: {
+                                                                width: '40px', height: '40px', borderRadius: '50%',
+                                                                border: selectedMood === mood.id ? 'none' : `2px solid ${mergedTheme.primaryColor}`,
+                                                                backgroundColor: selectedMood === mood.id ? mergedTheme.primaryColor : 'white',
+                                                                padding: '8px', cursor: 'pointer',
+                                                                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                                                transform: selectedMood === mood.id ? 'scale(1.1)' : 'scale(1)',
+                                                                outline: selectedMood === mood.id ? `4px solid ${mergedTheme.primaryColor}44` : 'none',
+                                                                transition: 'all 0.2s',
+                                                            }, onMouseEnter: e => { e.currentTarget.style.transform = 'scale(1.1)'; }, onMouseLeave: e => { e.currentTarget.style.transform = selectedMood === mood.id ? 'scale(1.1)' : 'scale(1)'; }, children: (0, jsx_runtime_1.jsx)("img", { src: mood.icon, alt: mood.name, style: {
+                                                                    width: '100%', height: '100%', objectFit: 'contain',
+                                                                    filter: selectedMood === mood.id ? 'brightness(0) invert(1)' : 'none',
+                                                                } }) }, mood.id))) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: '1 1 140px' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '16px' }, children: [(0, jsx_runtime_1.jsx)("svg", { fill: "none", stroke: mergedTheme.primaryColor, viewBox: "0 0 24 24", style: { width: '24px', height: '24px' }, children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" }) }), (0, jsx_runtime_1.jsx)("h3", { style: { fontSize: '18px', fontWeight: 700, color: mergedTheme.textColor, margin: 0 }, children: mergedTexts.backgroundTitle })] }), (0, jsx_runtime_1.jsx)("input", { ref: colorPickerRef, type: "color", onChange: handleColorChange, style: { display: 'none' } }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap' }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: handleColorPickerClick, title: "Select color", style: {
+                                                                    width: '48px', height: '48px', borderRadius: '50%',
+                                                                    border: '2px solid #d1d5db', backgroundColor: 'white', cursor: 'pointer',
+                                                                    display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '8px',
+                                                                    outline: selectedBgColor && selectedBgColor !== 'transparent' ? `4px solid ${mergedTheme.primaryColor}44` : 'none',
+                                                                    transform: selectedBgColor && selectedBgColor !== 'transparent' ? 'scale(1.1)' : 'scale(1)',
+                                                                    transition: 'all 0.2s',
+                                                                }, onMouseEnter: e => { e.currentTarget.style.transform = 'scale(1.1)'; }, onMouseLeave: e => { e.currentTarget.style.transform = selectedBgColor && selectedBgColor !== 'transparent' ? 'scale(1.1)' : 'scale(1)'; }, children: (0, jsx_runtime_1.jsx)("img", { src: "https://d2obs2d3lmpnq9.cloudfront.net/ADS/cmp%20color%20picker/ColorPicker_CONsombra%201%20%281%29.svg", alt: "Color Picker", style: { width: '32px', height: '32px', objectFit: 'contain' } }) }), recentColors.map((color, index) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => handleRecentColorClick(color), title: `Recent color ${index + 1}`, style: {
+                                                                    width: '48px', height: '48px', borderRadius: '50%',
+                                                                    border: selectedBgColor === color ? `2px solid ${mergedTheme.primaryColor}` : '2px solid #d1d5db',
+                                                                    backgroundColor: color, cursor: 'pointer',
+                                                                    outline: selectedBgColor === color ? `4px solid ${mergedTheme.primaryColor}44` : 'none',
+                                                                    transform: selectedBgColor === color ? 'scale(1.1)' : 'scale(1)',
+                                                                    transition: 'all 0.2s',
+                                                                }, onMouseEnter: e => { e.currentTarget.style.transform = 'scale(1.1)'; }, onMouseLeave: e => { e.currentTarget.style.transform = selectedBgColor === color ? 'scale(1.1)' : 'scale(1)'; } }, index))), (0, jsx_runtime_1.jsx)("button", { onClick: handleTransparentClick, title: "Transparent", style: {
+                                                                    width: '48px', height: '48px', borderRadius: '50%',
+                                                                    border: selectedBgColor === 'transparent' ? `2px solid ${mergedTheme.primaryColor}` : '2px solid #d1d5db',
+                                                                    backgroundImage: 'repeating-linear-gradient(45deg, #ddd 0, #ddd 1px, transparent 0, transparent 50%), repeating-linear-gradient(-45deg, #ddd 0, #ddd 1px, transparent 0, transparent 50%)',
+                                                                    backgroundSize: '10px 10px', backgroundColor: '#fff', cursor: 'pointer',
+                                                                    outline: selectedBgColor === 'transparent' ? `4px solid ${mergedTheme.primaryColor}44` : 'none',
+                                                                    transform: selectedBgColor === 'transparent' ? 'scale(1.1)' : 'scale(1)',
+                                                                    transition: 'all 0.2s',
+                                                                }, onMouseEnter: e => { e.currentTarget.style.transform = 'scale(1.1)'; }, onMouseLeave: e => { e.currentTarget.style.transform = selectedBgColor === 'transparent' ? 'scale(1.1)' : 'scale(1)'; } })] })] })] })] })] }), error && ((0, jsx_runtime_1.jsx)("div", { style: { padding: '12px', backgroundColor: '#fef2f2', border: '1px solid #fecaca', borderRadius: '8px', marginTop: '16px' }, children: (0, jsx_runtime_1.jsx)("p", { style: { color: '#dc2626', fontSize: '14px', margin: 0 }, children: error }) })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px', marginTop: '32px' }, children: [(0, jsx_runtime_1.jsxs)("button", { onClick: handleStartAgain, disabled: !generatedResult, style: {
+                                    backgroundColor: generatedResult ? mergedTheme.primaryColor : '#d1d5db',
+                                    color: generatedResult ? 'white' : '#9ca3af',
+                                    fontWeight: 700, fontSize: '18px', padding: '16px 32px',
+                                    borderRadius: '9999px', border: 'none',
+                                    cursor: generatedResult ? 'pointer' : 'not-allowed',
+                                    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '12px',
+                                }, onMouseEnter: e => { if (generatedResult)
+                                    e.currentTarget.style.backgroundColor = mergedTheme.primaryHoverColor || '#ff1600'; }, onMouseLeave: e => { if (generatedResult)
+                                    e.currentTarget.style.backgroundColor = mergedTheme.primaryColor || '#FF5500'; }, children: [(0, jsx_runtime_1.jsx)("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", style: { width: '24px', height: '24px' }, children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }), mergedTexts.startAgainButton] }), (0, jsx_runtime_1.jsx)("button", { onClick: handleGenerate, disabled: !canGenerate, style: {
+                                    backgroundColor: canGenerate ? '#FF6B6B' : '#d1d5db',
+                                    color: canGenerate ? 'white' : '#9ca3af',
+                                    fontWeight: 700, fontSize: '18px', padding: '16px 32px',
+                                    borderRadius: '9999px', border: 'none',
+                                    cursor: canGenerate ? 'pointer' : 'not-allowed',
+                                    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '12px',
+                                }, onMouseEnter: e => { if (canGenerate)
+                                    e.currentTarget.style.backgroundColor = '#ff5252'; }, onMouseLeave: e => { if (canGenerate)
+                                    e.currentTarget.style.backgroundColor = '#FF6B6B'; }, children: isGenerating ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("svg", { style: { width: '24px', height: '24px' }, className: "animate-spin", fill: "none", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("circle", { style: { opacity: 0.25 }, cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), (0, jsx_runtime_1.jsx)("path", { style: { opacity: 0.75 }, fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), mergedTexts.generatingButton] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", style: { width: '24px', height: '24px' }, children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }), mergedTexts.generateButton] })) }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleDownload, disabled: !generatedImageUrl, style: {
+                                    backgroundColor: generatedImageUrl ? mergedTheme.primaryColor : '#d1d5db',
+                                    color: generatedImageUrl ? 'white' : '#9ca3af',
+                                    fontWeight: 700, fontSize: '18px', padding: '16px 32px',
+                                    borderRadius: '9999px', border: 'none',
+                                    cursor: generatedImageUrl ? 'pointer' : 'not-allowed',
+                                    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '12px',
+                                }, onMouseEnter: e => { if (generatedImageUrl)
+                                    e.currentTarget.style.backgroundColor = mergedTheme.primaryHoverColor || '#ff1600'; }, onMouseLeave: e => { if (generatedImageUrl)
+                                    e.currentTarget.style.backgroundColor = mergedTheme.primaryColor || '#FF5500'; }, children: [(0, jsx_runtime_1.jsx)("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", style: { width: '24px', height: '24px' }, children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" }) }), mergedTexts.downloadButton] })] })] }) }) }));
 }
 function AvatarAIForYouCard({ title, description, ctaText, ctaHref, desktopImage, mobileImage, imageAlt = '', imageOnRight = true, titleColor = '#001B5E', descriptionColor = '#001B5E', ctaColor = '#FF5500', ctaHoverColor = '#ff1600', backgroundColor = '#F9F9F9', paddingClass = 'py-12 md:py-16 lg:py-20', }) {
     const effectiveMobileImage = mobileImage || desktopImage;
-    const imageColumn = (react_1.default.createElement("div", { className: `${imageOnRight ? '' : 'order-2 md:order-1'} overflow-hidden` },
-        react_1.default.createElement("img", { src: desktopImage, alt: imageAlt, className: "hidden md:block w-full h-auto object-contain" }),
-        react_1.default.createElement("img", { src: effectiveMobileImage, alt: imageAlt, className: "block md:hidden w-full h-auto object-contain" })));
-    const contentColumn = (react_1.default.createElement("div", { className: `${imageOnRight ? '' : 'order-1 md:order-2'} text-center md:text-left` },
-        react_1.default.createElement("h3", { className: "text-2xl md:text-3xl font-bold mb-4 md:mb-6", style: { color: titleColor } }, title),
-        react_1.default.createElement("p", { className: "text-base md:text-lg mb-6 md:mb-8 leading-relaxed", style: { color: descriptionColor } }, description),
-        react_1.default.createElement("a", { href: ctaHref, className: "inline-block text-white font-bold text-lg px-8 py-4 rounded-full transition-colors duration-300 cursor-pointer", style: { backgroundColor: ctaColor }, onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = ctaHoverColor; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = ctaColor; } }, ctaText)));
-    return (react_1.default.createElement("section", { className: "w-full", style: { backgroundColor } },
-        react_1.default.createElement("div", { className: `container mx-auto px-4 ${paddingClass}` },
-            react_1.default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 lg:gap-16 items-start" }, imageOnRight ? (react_1.default.createElement(react_1.default.Fragment, null,
-                contentColumn,
-                imageColumn)) : (react_1.default.createElement(react_1.default.Fragment, null,
-                imageColumn,
-                contentColumn))))));
+    const imageColumn = ((0, jsx_runtime_1.jsxs)("div", { className: `${imageOnRight ? '' : 'order-2 md:order-1'} overflow-hidden`, children: [(0, jsx_runtime_1.jsx)("img", { src: desktopImage, alt: imageAlt, className: "hidden md:block w-full h-auto object-contain" }), (0, jsx_runtime_1.jsx)("img", { src: effectiveMobileImage, alt: imageAlt, className: "block md:hidden w-full h-auto object-contain" })] }));
+    const contentColumn = ((0, jsx_runtime_1.jsxs)("div", { className: `${imageOnRight ? '' : 'order-1 md:order-2'} text-center md:text-left`, children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-2xl md:text-3xl font-bold mb-4 md:mb-6", style: { color: titleColor }, children: title }), (0, jsx_runtime_1.jsx)("p", { className: "text-base md:text-lg mb-6 md:mb-8 leading-relaxed", style: { color: descriptionColor }, children: description }), (0, jsx_runtime_1.jsx)("a", { href: ctaHref, className: "inline-block text-white font-bold text-lg px-8 py-4 rounded-full transition-colors duration-300 cursor-pointer", style: { backgroundColor: ctaColor }, onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = ctaHoverColor; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = ctaColor; }, children: ctaText })] }));
+    return ((0, jsx_runtime_1.jsx)("section", { className: "w-full", style: { backgroundColor }, children: (0, jsx_runtime_1.jsx)("div", { className: `container mx-auto px-4 ${paddingClass}`, children: (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 lg:gap-16 items-start", children: imageOnRight ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [contentColumn, imageColumn] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [imageColumn, contentColumn] })) }) }) }));
 }
 function AvatarAIPage({ componentProps, heroDesktopImage, heroMobileImage, heroAlt = '', backgroundColor = '#F9F9F9', componentPaddingClass = 'py-8 md:py-12', }) {
     const effectiveHeroMobile = heroMobileImage || heroDesktopImage;
-    return (react_1.default.createElement("div", { style: { backgroundColor } },
-        heroDesktopImage && (react_1.default.createElement("section", { style: { width: '100%' } },
-            react_1.default.createElement("img", { src: heroDesktopImage, alt: heroAlt, style: { width: '100%', height: 'auto' }, className: "hidden md:block" }),
-            react_1.default.createElement("img", { src: effectiveHeroMobile, alt: heroAlt, style: { width: '100%', height: 'auto' }, className: "block md:hidden" }))),
-        react_1.default.createElement("section", { className: `w-full ${componentPaddingClass}`, style: { backgroundColor } },
-            react_1.default.createElement(AvatarAI, Object.assign({}, componentProps)))));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { backgroundColor }, children: [heroDesktopImage && ((0, jsx_runtime_1.jsxs)("section", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)("img", { src: heroDesktopImage, alt: heroAlt, style: { width: '100%', height: 'auto' }, className: "hidden md:block" }), (0, jsx_runtime_1.jsx)("img", { src: effectiveHeroMobile, alt: heroAlt, style: { width: '100%', height: 'auto' }, className: "block md:hidden" })] })), (0, jsx_runtime_1.jsx)("section", { className: `w-full ${componentPaddingClass}`, style: { backgroundColor }, children: (0, jsx_runtime_1.jsx)(AvatarAI, Object.assign({}, componentProps)) })] }));
 }
 exports.default = AvatarAI;
 //# sourceMappingURL=AvatarAI.js.map