webs-sdk 0.18.89 → 0.18.91

package/dist/components/GifsIa.js

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