webs-sdk 0.18.91 → 0.18.92

package/dist/components/GifsIa.js

@@ -1,565 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GifsIa = GifsIa;
-exports.GifsIaForYouCard = GifsIaForYouCard;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const forYouFetch_1 = require("./for-you/api/forYouFetch");
-const GIFSÍA_CSS = `
-.gifsía-layout {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 16px;
-}
-@media (min-width: 768px) {
-  .gifsía-layout {
-    grid-template-columns: 1fr 1fr;
-    gap: 20px;
-  }
-}
-.gifsía-checker {
-  background-image: linear-gradient(45deg, #3a3a4a 25%, transparent 25%),
-    linear-gradient(-45deg, #3a3a4a 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, #3a3a4a 75%),
-    linear-gradient(-45deg, transparent 75%, #3a3a4a 75%);
-  background-size: 20px 20px;
-  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
-  background-color: #2a2a3a;
-}
-.gifsía-gallery-scroll {
-  display: flex;
-  gap: 12px;
-  overflow-x: auto;
-  scroll-snap-type: x mandatory;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-.gifsía-gallery-scroll::-webkit-scrollbar {
-  display: none;
-}
-.gifsía-gallery-item {
-  scroll-snap-align: start;
-  flex: 0 0 calc(25% - 9px);
-  min-width: 80px;
-}
-@keyframes gifsía-scan {
-  0% { top: 0%; }
-  100% { top: 100%; }
-}
-@keyframes gifsía-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-.gifsía-scan-line {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  height: 3px;
-  background: linear-gradient(90deg, transparent, #6C63FF, transparent);
-  animation: gifsía-scan 1.8s linear infinite;
-  z-index: 10;
-  box-shadow: 0 0 8px 2px rgba(108, 99, 255, 0.6);
-}
-`;
-const defaultTheme = {
-    primaryColor: '#6C63FF',
-    primaryHoverColor: '#5a52d5',
-    backgroundColor: '#1A1A2E',
-    cardBackground: '#252540',
-    borderColor: '#3A3A5C',
-    textColor: '#FFFFFF',
-    textSecondaryColor: '#A0A0C0',
-    createButtonColor: '#6C63FF',
-    disabledColor: '#4A4A6A',
-    gifPanelBackground: '#252540',
-};
-const defaultTexts = {
-    galleryTitle: 'GIF Gallery',
-    photoSectionTitle: 'Photo',
-    gifSectionTitle: 'GIF',
-    uploadButton: 'Upload image',
-    createGifButton: 'Create GIF',
-    creatingGifButton: 'Creating GIF...',
-    copyLinkButton: 'Copy link',
-    downloadButton: 'Download',
-    emptyPhotoText: 'Upload a photo to create your GIF',
-    emptyGifText: 'Your GIF will appear here',
-    loadingGalleryText: 'Loading gallery...',
-    errorText: 'An error occurred. Please try again.',
-    fileTooLargeText: 'File is too large. Max {size}MB.',
-    invalidFormatText: 'Invalid format. Please upload an image.',
-    linkCopiedText: 'Link copied!',
-    queueText: 'In queue',
-    pasteImageTooltip: 'Paste image from clipboard',
-    resetTooltip: 'Clear and start over',
-};
-function GifBadge({ color = '#6C63FF' }) {
-    return ((0, jsx_runtime_1.jsxs)("svg", { width: "28", height: "20", viewBox: "0 0 28 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("rect", { width: "28", height: "20", rx: "4", fill: color }), (0, jsx_runtime_1.jsx)("text", { x: "4", y: "14", fill: "white", fontSize: "10", fontWeight: "700", fontFamily: "monospace", children: "GIF" })] }));
-}
-function CameraBadge({ color = '#6C63FF' }) {
-    return ((0, jsx_runtime_1.jsxs)("svg", { width: "18", height: "16", viewBox: "0 0 18 16", fill: "none", stroke: color, strokeWidth: "1.5", children: [(0, jsx_runtime_1.jsx)("path", { d: "M1 5.5A1.5 1.5 0 0 1 2.5 4h1.086a1.5 1.5 0 0 0 1.06-.44l1-1A1.5 1.5 0 0 1 6.706 2h4.588a1.5 1.5 0 0 1 1.06.44l1 1A1.5 1.5 0 0 0 14.414 4H15.5A1.5 1.5 0 0 1 17 5.5v7A1.5 1.5 0 0 1 15.5 14h-13A1.5 1.5 0 0 1 1 12.5v-7z" }), (0, jsx_runtime_1.jsx)("circle", { cx: "9", cy: "9", r: "2.5" })] }));
-}
-function GifsIa({ config, galleryItems: galleryProp, theme = {}, texts = {}, imageProxyUrl, onGifCreated, onDownload, onCopyLink, onError, }) {
-    var _a;
-    const t = Object.assign(Object.assign({}, defaultTexts), texts);
-    const th = Object.assign(Object.assign({}, defaultTheme), theme);
-    const createBtnColor = th.createButtonColor || th.primaryColor;
-    const gifBg = th.gifPanelBackground || th.cardBackground;
-    const maxFileMB = (_a = config.maxFileSizeMB) !== null && _a !== void 0 ? _a : 10;
-    (0, react_1.useEffect)(() => {
-        const id = 'gifsía-styles';
-        if (document.getElementById(id))
-            return;
-        const style = document.createElement('style');
-        style.id = id;
-        style.textContent = GIFSÍA_CSS;
-        document.head.appendChild(style);
-    }, []);
-    const [dynamicGallery, setDynamicGallery] = (0, react_1.useState)([]);
-    const [loadingGallery, setLoadingGallery] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        if (galleryProp && galleryProp.length > 0)
-            return;
-        const hasFetch = config.galleryTags || config.galleryContents || config.apiBaseUrl || config.apiUrl;
-        if (!hasFetch)
-            return;
-        const load = async () => {
-            var _a;
-            setLoadingGallery(true);
-            try {
-                const apiUrl = (_a = config.apiUrl) !== null && _a !== void 0 ? _a : (config.apiBaseUrl ? `${config.apiBaseUrl}/api/get_contents_by_tags` : '/api/get_contents_by_tags');
-                const tags = config.galleryTags
-                    ? (Array.isArray(config.galleryTags) ? config.galleryTags : [config.galleryTags])
-                    : undefined;
-                const items = await (0, forYouFetch_1.forYouFetch)({
-                    apiUrl,
-                    apiBaseUrl: config.apiBaseUrl,
-                    tags,
-                    contents: config.galleryContents,
-                    locale: config.locale || 'en',
-                    website_id: config.website_id,
-                });
-                const mapped = items
-                    .map((item, idx) => {
-                    var _a, _b, _c, _d, _e;
-                    return ({
-                        id: (_a = item.id) !== null && _a !== void 0 ? _a : idx,
-                        imageUrl: item.thumbnail || ((_b = item.images) === null || _b === void 0 ? void 0 : _b.img3) || ((_c = item.images) === null || _c === void 0 ? void 0 : _c.img1) || item.imageUrl || '',
-                        gifUrl: ((_d = item.metadata) === null || _d === void 0 ? void 0 : _d.gif) || ((_e = item.metadata) === null || _e === void 0 ? void 0 : _e.gif_light) || item.gifUrl || item.gif_url || undefined,
-                        title: item.title || '',
-                    });
-                })
-                    .filter((i) => i.imageUrl);
-                setDynamicGallery(mapped);
-            }
-            catch (err) {
-                console.error('[GifsIa] Error loading gallery:', err);
-            }
-            finally {
-                setLoadingGallery(false);
-            }
-        };
-        load();
-    }, [config.apiUrl, config.apiBaseUrl, config.galleryTags]);
-    const gallery = galleryProp && galleryProp.length > 0 ? galleryProp : dynamicGallery;
-    const [selectedGalleryId, setSelectedGalleryId] = (0, react_1.useState)(null);
-    const [uploadedImageBase64, setUploadedImageBase64] = (0, react_1.useState)(null);
-    const [isGenerating, setIsGenerating] = (0, react_1.useState)(false);
-    const [generatedGifUrl, setGeneratedGifUrl] = (0, react_1.useState)(null);
-    const [progressPercent, setProgressPercent] = (0, react_1.useState)(null);
-    const [queuePosition, setQueuePosition] = (0, react_1.useState)(null);
-    const [genError, setGenError] = (0, react_1.useState)(null);
-    const [copySuccess, setCopySuccess] = (0, react_1.useState)(false);
-    const fileInputRef = (0, react_1.useRef)(null);
-    const pollRef = (0, react_1.useRef)(null);
-    const timeoutRef = (0, react_1.useRef)(null);
-    const galleryScrollRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        if (gallery.length > 0 && selectedGalleryId === null) {
-            setSelectedGalleryId(gallery[0].id);
-        }
-    }, [gallery, selectedGalleryId]);
-    (0, react_1.useEffect)(() => {
-        const el = galleryScrollRef.current;
-        if (!el)
-            return;
-        const onWheel = (e) => {
-            if (Math.abs(e.deltaX) > Math.abs(e.deltaY))
-                return;
-            e.preventDefault();
-            el.scrollLeft += e.deltaY;
-        };
-        el.addEventListener('wheel', onWheel, { passive: false });
-        return () => el.removeEventListener('wheel', onWheel);
-    }, []);
-    const clearPolls = (0, react_1.useCallback)(() => {
-        if (pollRef.current) {
-            clearInterval(pollRef.current);
-            pollRef.current = null;
-        }
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-            timeoutRef.current = null;
-        }
-    }, []);
-    (0, react_1.useEffect)(() => () => clearPolls(), [clearPolls]);
-    const processFile = (file) => {
-        if (!file.type.startsWith('image/')) {
-            alert(t.invalidFormatText);
-            return;
-        }
-        if (file.size > maxFileMB * 1024 * 1024) {
-            alert(t.fileTooLargeText.replace('{size}', String(maxFileMB)));
-            return;
-        }
-        const reader = new FileReader();
-        reader.onloadend = () => {
-            setUploadedImageBase64(reader.result);
-        };
-        reader.readAsDataURL(file);
-    };
-    const handleFileChange = (e) => {
-        var _a;
-        const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (file)
-            processFile(file);
-    };
-    const handleUploadClick = () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); };
-    const handleClipboardButtonClick = async () => {
-        if (uploadedImageBase64) {
-            handleReset();
-            return;
-        }
-        try {
-            const items = await navigator.clipboard.read();
-            for (const item of items) {
-                const imageType = item.types.find(t => t.startsWith('image/'));
-                if (imageType) {
-                    const blob = await item.getType(imageType);
-                    const file = new File([blob], 'clipboard.png', { type: imageType });
-                    processFile(file);
-                    return;
-                }
-            }
-        }
-        catch (_a) {
-            console.warn('[GifsIa] No clipboard image or permission denied');
-        }
-    };
-    const handleReset = () => {
-        clearPolls();
-        setUploadedImageBase64(null);
-        setGeneratedGifUrl(null);
-        setProgressPercent(null);
-        setQueuePosition(null);
-        setGenError(null);
-        setIsGenerating(false);
-        if (fileInputRef.current)
-            fileInputRef.current.value = '';
-    };
-    const handleCreateGif = async () => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        if (!uploadedImageBase64 || isGenerating)
-            return;
-        clearPolls();
-        setIsGenerating(true);
-        setGeneratedGifUrl(null);
-        setProgressPercent(0);
-        setQueuePosition(null);
-        setGenError(null);
-        const pollInterval = (_a = config.pollInterval) !== null && _a !== void 0 ? _a : 3000;
-        const maxPollTime = (_b = config.maxPollTime) !== null && _b !== void 0 ? _b : 120000;
-        const selectedItem = gallery.find(g => g.id === selectedGalleryId);
-        const generateUrl = (_c = config.generateApiUrl) !== null && _c !== void 0 ? _c : (config.generateBaseUrl ? `${config.generateBaseUrl.replace(/\/$/, '')}/get_art_generation` : null);
-        if (!generateUrl) {
-            setGenError(t.errorText);
-            setIsGenerating(false);
-            return;
-        }
-        try {
-            const genRes = await fetch(generateUrl, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(Object.assign(Object.assign(Object.assign(Object.assign({ image: uploadedImageBase64 }, (selectedItem && { reference_image: selectedItem.gifUrl || selectedItem.imageUrl })), (config.userId && { us_id: config.userId })), (config.userLogin && { us_login: config.userLogin })), (config.wid && { wid: config.wid }))),
-            });
-            if (!genRes.ok)
-                throw new Error(`Generation error: ${genRes.status}`);
-            const genData = await genRes.json();
-            console.log('[GifsIa] generate response:', JSON.stringify(genData));
-            if ((genData === null || genData === void 0 ? void 0 : genData.success) === 0 || (genData === null || genData === void 0 ? void 0 : genData.success) === false) {
-                throw new Error((genData === null || genData === void 0 ? void 0 : genData.msg) || (genData === null || genData === void 0 ? void 0 : genData.error) || 'Generation failed');
-            }
-            const jobId = ((_d = genData === null || genData === void 0 ? void 0 : genData.data) === null || _d === void 0 ? void 0 : _d.md5) ||
-                ((_e = genData === null || genData === void 0 ? void 0 : genData.data) === null || _e === void 0 ? void 0 : _e.request_id) ||
-                ((_f = genData === null || genData === void 0 ? void 0 : genData.data) === null || _f === void 0 ? void 0 : _f.job_id) ||
-                ((_g = genData === null || genData === void 0 ? void 0 : genData.data) === null || _g === void 0 ? void 0 : _g.id) ||
-                (genData === null || genData === void 0 ? void 0 : genData.md5) ||
-                (genData === null || genData === void 0 ? void 0 : genData.request_id) ||
-                (genData === null || genData === void 0 ? void 0 : genData.job_id) ||
-                (genData === null || genData === void 0 ? void 0 : genData.id);
-            console.log('[GifsIa] jobId extracted:', jobId);
-            if (!jobId)
-                throw new Error(`No job ID received. Response: ${JSON.stringify(genData)}`);
-            timeoutRef.current = setTimeout(() => {
-                clearPolls();
-                setIsGenerating(false);
-                setGenError(t.errorText);
-                onError === null || onError === void 0 ? void 0 : onError(t.errorText);
-            }, maxPollTime);
-            const base = (_j = (_h = config.generateBaseUrl) === null || _h === void 0 ? void 0 : _h.replace(/\/$/, '')) !== null && _j !== void 0 ? _j : '';
-            const poll = async () => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-                try {
-                    const progressUrl = (_a = config.progressApiUrl) !== null && _a !== void 0 ? _a : (base ? `${base}/get_arg_pct` : null);
-                    if (progressUrl) {
-                        const isProxy = !!config.progressApiUrl;
-                        if (isProxy) {
-                            const pctRes = await fetch(progressUrl, {
-                                method: 'POST',
-                                headers: { 'Content-Type': 'application/json' },
-                                body: JSON.stringify(Object.assign(Object.assign({ md5: jobId }, (config.userId && { us_id: config.userId })), (config.wid && { wid: config.wid }))),
-                            });
-                            if (pctRes.ok) {
-                                const pctData = await pctRes.json();
-                                const pct = (_d = (_c = (_b = pctData === null || pctData === void 0 ? void 0 : pctData.data) === null || _b === void 0 ? void 0 : _b.pct) !== null && _c !== void 0 ? _c : pctData === null || pctData === void 0 ? void 0 : pctData.pct) !== null && _d !== void 0 ? _d : 0;
-                                const pos = (_f = (_e = pctData === null || pctData === void 0 ? void 0 : pctData.data) === null || _e === void 0 ? void 0 : _e.position) !== null && _f !== void 0 ? _f : null;
-                                const gifUrl = (_h = (_g = pctData === null || pctData === void 0 ? void 0 : pctData.data) === null || _g === void 0 ? void 0 : _g.gifUrl) !== null && _h !== void 0 ? _h : null;
-                                setProgressPercent(pct);
-                                if (pos !== null)
-                                    setQueuePosition(pos);
-                                if (gifUrl) {
-                                    clearPolls();
-                                    setGeneratedGifUrl(gifUrl);
-                                    setProgressPercent(100);
-                                    setIsGenerating(false);
-                                    onGifCreated === null || onGifCreated === void 0 ? void 0 : onGifCreated(gifUrl);
-                                    return;
-                                }
-                                return;
-                            }
-                        }
-                        else {
-                            const queueUrl = `${base}/get_queue_position`;
-                            const queueRes = await fetch(queueUrl, {
-                                method: 'POST',
-                                headers: { 'Content-Type': 'application/json' },
-                                body: JSON.stringify(Object.assign(Object.assign({ md5: jobId }, (config.userId && { us_id: config.userId })), (config.wid && { wid: config.wid }))),
-                            });
-                            if (queueRes.ok) {
-                                const qd = await queueRes.json();
-                                setQueuePosition((_l = (_k = (_j = qd === null || qd === void 0 ? void 0 : qd.data) === null || _j === void 0 ? void 0 : _j.position) !== null && _k !== void 0 ? _k : qd === null || qd === void 0 ? void 0 : qd.position) !== null && _l !== void 0 ? _l : null);
-                            }
-                            const pctRes = await fetch(progressUrl, {
-                                method: 'POST',
-                                headers: { 'Content-Type': 'application/json' },
-                                body: JSON.stringify(Object.assign(Object.assign({ md5: jobId }, (config.userId && { us_id: config.userId })), (config.wid && { wid: config.wid }))),
-                            });
-                            if (!pctRes.ok)
-                                return;
-                            const pctData = await pctRes.json();
-                            const pct = (_p = (_o = (_m = pctData === null || pctData === void 0 ? void 0 : pctData.data) === null || _m === void 0 ? void 0 : _m.pct) !== null && _o !== void 0 ? _o : pctData === null || pctData === void 0 ? void 0 : pctData.pct) !== null && _p !== void 0 ? _p : 0;
-                            setProgressPercent(pct);
-                            if (pct >= 100) {
-                                clearPolls();
-                                const jobRes = await fetch(`${base}/get_art_job`, {
-                                    method: 'POST',
-                                    headers: { 'Content-Type': 'application/json' },
-                                    body: JSON.stringify(Object.assign(Object.assign({ md5: jobId }, (config.userId && { us_id: config.userId })), (config.wid && { wid: config.wid }))),
-                                });
-                                if (!jobRes.ok)
-                                    throw new Error('Error fetching GIF');
-                                const jobData = await jobRes.json();
-                                const gifUrl = ((_q = jobData === null || jobData === void 0 ? void 0 : jobData.data) === null || _q === void 0 ? void 0 : _q.url) || (jobData === null || jobData === void 0 ? void 0 : jobData.url) || (jobData === null || jobData === void 0 ? void 0 : jobData.gif) || ((_r = jobData === null || jobData === void 0 ? void 0 : jobData.data) === null || _r === void 0 ? void 0 : _r.gif);
-                                if (!gifUrl)
-                                    throw new Error('No GIF URL received');
-                                setGeneratedGifUrl(gifUrl);
-                                setProgressPercent(100);
-                                setIsGenerating(false);
-                                onGifCreated === null || onGifCreated === void 0 ? void 0 : onGifCreated(gifUrl);
-                            }
-                        }
-                    }
-                }
-                catch (err) {
-                    console.error('[GifsIa] Polling error:', err);
-                }
-            };
-            poll();
-            pollRef.current = setInterval(poll, pollInterval);
-        }
-        catch (err) {
-            clearPolls();
-            const msg = err instanceof Error ? err.message : t.errorText;
-            setGenError(msg);
-            setIsGenerating(false);
-            onError === null || onError === void 0 ? void 0 : onError(msg);
-        }
-    };
-    const handleCopyLink = async () => {
-        if (!generatedGifUrl)
-            return;
-        if (onCopyLink) {
-            onCopyLink(generatedGifUrl);
-            return;
-        }
-        try {
-            await navigator.clipboard.writeText(generatedGifUrl);
-            setCopySuccess(true);
-            setTimeout(() => setCopySuccess(false), 2000);
-        }
-        catch (_a) {
-            console.warn('[GifsIa] Could not copy to clipboard');
-        }
-    };
-    const handleDownload = async () => {
-        if (!generatedGifUrl)
-            return;
-        if (onDownload) {
-            onDownload(generatedGifUrl);
-            return;
-        }
-        try {
-            const fetchUrl = imageProxyUrl ? `${imageProxyUrl}${encodeURIComponent(generatedGifUrl)}` : generatedGifUrl;
-            const res = await fetch(fetchUrl);
-            const blob = await res.blob();
-            const url = URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = `gif-ia-${Date.now()}.gif`;
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-            URL.revokeObjectURL(url);
-        }
-        catch (_a) {
-            window.open(generatedGifUrl, '_blank');
-        }
-    };
-    const handleDrop = (e) => {
-        var _a;
-        e.preventDefault();
-        const file = (_a = e.dataTransfer.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (file)
-            processFile(file);
-    };
-    const handleDragOver = (e) => e.preventDefault();
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { backgroundColor: th.backgroundColor, padding: '24px', borderRadius: '12px' }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
-        @keyframes gifsía-scan { 0% { top: 0%; } 100% { top: 100%; } }
-        @keyframes gifsía-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
-        .gifsía-scan-line { position: absolute; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, transparent, ${th.primaryColor}, transparent); animation: gifsía-scan 1.8s linear infinite; z-index: 10; box-shadow: 0 0 8px 2px ${th.primaryColor}80; }
-      ` }), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", accept: config.acceptedFormats || 'image/*', onChange: handleFileChange, style: { display: 'none' } }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '24px' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }, children: [(0, jsx_runtime_1.jsx)(GifBadge, { color: th.primaryColor }), (0, jsx_runtime_1.jsx)("h3", { style: { margin: 0, fontSize: '18px', fontWeight: 700, color: th.textColor }, children: t.galleryTitle })] }), loadingGallery ? ((0, jsx_runtime_1.jsx)("p", { style: { color: th.textSecondaryColor, fontSize: '14px' }, children: t.loadingGalleryText })) : gallery.length > 0 ? ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => { if (galleryScrollRef.current)
-                                    galleryScrollRef.current.scrollBy({ left: -300, behavior: 'smooth' }); }, style: {
-                                    position: 'absolute', left: '4px', top: '50%', transform: 'translateY(-50%)',
-                                    zIndex: 10, width: '32px', height: '32px', borderRadius: '50%', border: 'none',
-                                    backgroundColor: `${th.primaryColor}dd`, color: '#FFFFFF',
-                                    display: 'flex', alignItems: 'center', justifyContent: 'center',
-                                    cursor: 'pointer', boxShadow: '0 2px 8px rgba(0,0,0,0.5)',
-                                    transition: 'background-color 0.2s',
-                                }, onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = th.primaryColor; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = `${th.primaryColor}dd`; }, children: (0, jsx_runtime_1.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("polyline", { points: "15 18 9 12 15 6" }) }) }), (0, jsx_runtime_1.jsx)("div", { ref: galleryScrollRef, style: {
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    gap: '12px',
-                                    overflowX: 'auto',
-                                    overflowY: 'hidden',
-                                    scrollSnapType: 'x mandatory',
-                                    WebkitOverflowScrolling: 'touch',
-                                    scrollbarWidth: 'none',
-                                    msOverflowStyle: 'none',
-                                    width: '100%',
-                                }, children: gallery.map((item) => {
-                                    const isSelected = selectedGalleryId === item.id;
-                                    return ((0, jsx_runtime_1.jsx)("button", { onClick: () => setSelectedGalleryId(item.id), style: {
-                                            flexShrink: 0,
-                                            width: 'calc(25% - 9px)',
-                                            minWidth: '120px',
-                                            scrollSnapAlign: 'start',
-                                            padding: 0,
-                                            border: `3px solid ${isSelected ? th.primaryColor : 'transparent'}`,
-                                            borderRadius: '10px',
-                                            overflow: 'hidden',
-                                            cursor: 'pointer',
-                                            backgroundColor: 'transparent',
-                                            outline: 'none',
-                                        }, children: (0, jsx_runtime_1.jsx)("img", { src: item.gifUrl || item.imageUrl, alt: item.title || '', style: { width: '100%', aspectRatio: '4/3', objectFit: 'cover', display: 'block' } }) }, item.id));
-                                }) }), (0, jsx_runtime_1.jsx)("button", { onClick: () => { if (galleryScrollRef.current)
-                                    galleryScrollRef.current.scrollBy({ left: 300, behavior: 'smooth' }); }, style: {
-                                    position: 'absolute', right: '4px', top: '50%', transform: 'translateY(-50%)',
-                                    zIndex: 10, width: '32px', height: '32px', borderRadius: '50%', border: 'none',
-                                    backgroundColor: `${th.primaryColor}dd`, color: '#FFFFFF',
-                                    display: 'flex', alignItems: 'center', justifyContent: 'center',
-                                    cursor: 'pointer', boxShadow: '0 2px 8px rgba(0,0,0,0.5)',
-                                    transition: 'background-color 0.2s',
-                                }, onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = th.primaryColor; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = `${th.primaryColor}dd`; }, children: (0, jsx_runtime_1.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("polyline", { points: "9 18 15 12 9 6" }) }) })] })) : null] }), (0, jsx_runtime_1.jsxs)("div", { className: "gifs\u00EDa-layout", children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '12px' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [(0, jsx_runtime_1.jsx)(CameraBadge, { color: th.primaryColor }), (0, jsx_runtime_1.jsx)("span", { style: { fontSize: '16px', fontWeight: 700, color: th.primaryColor }, children: t.photoSectionTitle })] }), (0, jsx_runtime_1.jsxs)("div", { className: "gifs\u00EDa-checker", onDrop: handleDrop, onDragOver: handleDragOver, style: {
-                                    position: 'relative', borderRadius: '10px', border: `2px dashed ${th.borderColor}`,
-                                    minHeight: '320px', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                                    overflow: 'hidden', cursor: uploadedImageBase64 ? 'default' : 'pointer',
-                                }, onClick: !uploadedImageBase64 ? handleUploadClick : undefined, children: [(0, jsx_runtime_1.jsx)("button", { onClick: (e) => { e.stopPropagation(); handleClipboardButtonClick(); }, title: uploadedImageBase64 ? t.resetTooltip : t.pasteImageTooltip, style: {
-                                            position: 'absolute', top: '12px', right: '12px', zIndex: 20,
-                                            width: '40px', height: '40px', borderRadius: '50%', border: 'none',
-                                            backgroundColor: th.primaryColor, color: '#FFFFFF',
-                                            display: 'flex', alignItems: 'center', justifyContent: 'center',
-                                            cursor: 'pointer', boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
-                                        }, children: uploadedImageBase64 ? ((0, jsx_runtime_1.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [(0, jsx_runtime_1.jsx)("polyline", { points: "1 4 1 10 7 10" }), (0, jsx_runtime_1.jsx)("path", { d: "M3.51 15a9 9 0 1 0 .49-3" })] })) : ((0, jsx_runtime_1.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [(0, jsx_runtime_1.jsx)("path", { d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" }), (0, jsx_runtime_1.jsx)("rect", { x: "8", y: "2", width: "8", height: "4", rx: "1", ry: "1" })] })) }), uploadedImageBase64 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: uploadedImageBase64, alt: "Uploaded photo", style: { width: '100%', height: '100%', objectFit: 'contain', position: 'absolute', inset: 0 } }), isGenerating && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', inset: 0, backgroundColor: 'rgba(0,0,0,0.3)', zIndex: 9 } }), (0, jsx_runtime_1.jsx)("div", { className: "gifs\u00EDa-scan-line" })] }))] })) : ((0, jsx_runtime_1.jsxs)("button", { onClick: handleUploadClick, style: {
-                                            padding: '12px 24px', borderRadius: '24px', border: 'none',
-                                            backgroundColor: th.primaryColor, color: '#FFFFFF',
-                                            fontSize: '14px', fontWeight: 600, cursor: 'pointer',
-                                            display: 'flex', alignItems: 'center', gap: '8px',
-                                        }, children: [(0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [(0, jsx_runtime_1.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), (0, jsx_runtime_1.jsx)("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), (0, jsx_runtime_1.jsx)("polyline", { points: "21 15 16 10 5 21" })] }), t.uploadButton] }))] }), (0, jsx_runtime_1.jsx)("button", { onClick: handleCreateGif, disabled: !uploadedImageBase64 || isGenerating, style: {
-                                    width: '100%', padding: '14px', borderRadius: '28px', border: 'none',
-                                    backgroundColor: (!uploadedImageBase64 || isGenerating) ? th.disabledColor : createBtnColor,
-                                    color: '#FFFFFF', fontSize: '15px', fontWeight: 700,
-                                    cursor: (!uploadedImageBase64 || isGenerating) ? 'not-allowed' : 'pointer',
-                                    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px',
-                                    transition: 'background-color 0.2s',
-                                }, onMouseEnter: (e) => { if (uploadedImageBase64 && !isGenerating)
-                                    e.currentTarget.style.backgroundColor = th.primaryHoverColor; }, onMouseLeave: (e) => { if (uploadedImageBase64 && !isGenerating)
-                                    e.currentTarget.style.backgroundColor = createBtnColor; }, children: isGenerating ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '16px', height: '16px', border: '2px solid rgba(255,255,255,0.3)', borderTop: '2px solid #FFFFFF', borderRadius: '50%', animation: 'gifsía-spin 1s linear infinite' } }), t.creatingGifButton] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: (0, jsx_runtime_1.jsx)("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" }) }), t.createGifButton] })) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '12px' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [(0, jsx_runtime_1.jsx)(GifBadge, { color: th.primaryColor }), (0, jsx_runtime_1.jsx)("span", { style: { fontSize: '16px', fontWeight: 700, color: th.primaryColor }, children: t.gifSectionTitle })] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                    position: 'relative', borderRadius: '10px', border: `2px dashed ${th.borderColor}`,
-                                    minHeight: '320px', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                                    overflow: 'hidden', flex: 1,
-                                    backgroundColor: gifBg,
-                                }, children: genError ? ((0, jsx_runtime_1.jsx)("p", { style: { color: '#F87171', fontSize: '14px', textAlign: 'center', padding: '24px' }, children: genError })) : generatedGifUrl ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: generatedGifUrl, alt: "Generated GIF", style: { width: '100%', height: '100%', objectFit: 'contain', position: 'absolute', inset: 0 }, unselectable: "on" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => window.open(generatedGifUrl, '_blank'), style: {
-                                                position: 'absolute', bottom: '12px', right: '12px', zIndex: 20,
-                                                width: '40px', height: '40px', borderRadius: '50%', border: 'none',
-                                                backgroundColor: th.primaryColor, color: '#FFFFFF',
-                                                display: 'flex', alignItems: 'center', justifyContent: 'center',
-                                                cursor: 'pointer', boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
-                                            }, children: (0, jsx_runtime_1.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: (0, jsx_runtime_1.jsx)("path", { d: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" }) }) })] })) : isGenerating ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectedGalleryId !== null && gallery.find(g => g.id === selectedGalleryId) && ((0, jsx_runtime_1.jsx)("img", { src: gallery.find(g => g.id === selectedGalleryId).imageUrl, alt: "", style: { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', filter: 'blur(4px)', opacity: 0.3 } })), (0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', zIndex: 10, width: '80%', textAlign: 'center' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { backgroundColor: 'rgba(0,0,0,0.6)', borderRadius: '8px', padding: '4px 12px', marginBottom: '8px' }, children: (0, jsx_runtime_1.jsx)("span", { style: { fontSize: '14px', color: '#FFFFFF', fontWeight: 600 }, children: queuePosition !== null && queuePosition > 0
-                                                            ? `${t.queueText} #${queuePosition}`
-                                                            : `${progressPercent !== null && progressPercent !== void 0 ? progressPercent : 0}%` }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', height: '8px', backgroundColor: 'rgba(255,255,255,0.2)', borderRadius: '4px', overflow: 'hidden' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                                                            height: '100%', width: `${progressPercent !== null && progressPercent !== void 0 ? progressPercent : 0}%`,
-                                                            backgroundColor: th.primaryColor, borderRadius: '4px',
-                                                            transition: 'width 0.3s ease',
-                                                        } }) })] })] })) : ((0, jsx_runtime_1.jsx)("p", { style: { color: th.textSecondaryColor, fontSize: '14px', textAlign: 'center', padding: '24px' }, children: t.emptyGifText })) }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '10px' }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: handleCopyLink, disabled: !generatedGifUrl, style: {
-                                            flex: 1, padding: '12px', borderRadius: '24px',
-                                            border: `1px solid ${generatedGifUrl ? th.primaryColor : th.borderColor}`,
-                                            backgroundColor: 'transparent',
-                                            color: generatedGifUrl ? th.primaryColor : th.textSecondaryColor,
-                                            fontSize: '14px', fontWeight: 600,
-                                            cursor: generatedGifUrl ? 'pointer' : 'not-allowed',
-                                            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '6px',
-                                            opacity: generatedGifUrl ? 1 : 0.5,
-                                            transition: 'all 0.2s',
-                                        }, children: copySuccess ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: (0, jsx_runtime_1.jsx)("polyline", { points: "20 6 9 17 4 12" }) }), t.linkCopiedText] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [(0, jsx_runtime_1.jsx)("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }), (0, jsx_runtime_1.jsx)("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })] }), t.copyLinkButton] })) }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleDownload, disabled: !generatedGifUrl, style: {
-                                            flex: 1, padding: '12px', borderRadius: '24px',
-                                            border: `1px solid ${generatedGifUrl ? th.primaryColor : th.borderColor}`,
-                                            backgroundColor: generatedGifUrl ? th.primaryColor : 'transparent',
-                                            color: generatedGifUrl ? '#FFFFFF' : th.textSecondaryColor,
-                                            fontSize: '14px', fontWeight: 600,
-                                            cursor: generatedGifUrl ? 'pointer' : 'not-allowed',
-                                            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '6px',
-                                            opacity: generatedGifUrl ? 1 : 0.5,
-                                            transition: 'all 0.2s',
-                                        }, onMouseEnter: (e) => { if (generatedGifUrl)
-                                            e.currentTarget.style.backgroundColor = th.primaryHoverColor; }, onMouseLeave: (e) => { if (generatedGifUrl)
-                                            e.currentTarget.style.backgroundColor = th.primaryColor; }, children: [(0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [(0, jsx_runtime_1.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), (0, jsx_runtime_1.jsx)("polyline", { points: "7 10 12 15 17 10" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", y1: "15", x2: "12", y2: "3" })] }), t.downloadButton] })] })] })] })] }));
-}
-function GifsIaForYouCard({ title, description, ctaText, ctaHref, desktopImage, mobileImage, imageAlt = '', imageOnRight = true, titleColor = '#001B5E', descriptionColor = '#001B5E', ctaColor = '#6C63FF', ctaHoverColor = '#5a52d5', backgroundColor = '#F9F9F9', paddingClass = 'py-12 md:py-16 lg:py-20', }) {
-    const effectiveMobileImage = mobileImage || desktopImage;
-    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] }) }) }) }));
-}
-exports.default = GifsIa;
-//# sourceMappingURL=GifsIa.js.map