main

components/ApiKeyModal.tsx

@@ -0,0 +1,125 @@
+import React, { useState, useEffect } from 'react';
+import { Key, Save, Check, Trash2, X } from 'lucide-react';
+
+interface ApiKeyModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export const ApiKeyModal: React.FC<ApiKeyModalProps> = ({ isOpen, onClose }) => {
+    const [key, setKey] = useState('');
+    const [saved, setSaved] = useState(false);
+
+    useEffect(() => {
+        const storedKey = localStorage.getItem('gemini_api_key');
+        if (storedKey) {
+            setKey(storedKey);
+            setSaved(true);
+        }
+    }, [isOpen]);
+
+    const handleSave = () => {
+        if (key.trim()) {
+            localStorage.setItem('gemini_api_key', key.trim());
+            setSaved(true);
+            // Optional: Trigger a storage event for immediate UI updates elsewhere if needed
+            window.dispatchEvent(new Event('storage'));
+            onClose();
+        }
+    };
+
+    const handleClear = () => {
+        localStorage.removeItem('gemini_api_key');
+        setKey('');
+        setSaved(false);
+        window.dispatchEvent(new Event('storage'));
+    };
+
+    if (!isOpen) return null;
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-in fade-in duration-200">
+            <div className="w-full max-w-md bg-stone-900 border border-stone-800 rounded-xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200">
+
+                {/* Header */}
+                <div className="px-6 py-4 border-b border-stone-800 flex justify-between items-center bg-stone-900/50">
+                    <div className="flex items-center gap-3">
+                        <div className="p-2 bg-emerald-500/10 rounded-lg">
+                            <Key className="w-5 h-5 text-emerald-400" />
+                        </div>
+                        <div>
+                            <h2 className="text-lg font-semibold text-stone-100">API Configuration</h2>
+                            <p className="text-xs text-stone-500">Bring Your Own Key (Beta Mode)</p>
+                        </div>
+                    </div>
+                    <button onClick={onClose} className="text-stone-500 hover:text-stone-300 transition-colors">
+                        <X className="w-5 h-5" />
+                    </button>
+                </div>
+
+                {/* Body */}
+                <div className="p-6 space-y-4">
+                    <div className="p-3 bg-stone-800/50 rounded-lg border border-stone-700/50">
+                        <p className="text-sm text-stone-400 leading-relaxed">
+                            <span className="text-emerald-400 font-medium">Why use your own key?</span>
+                            <br />
+                            Using your personal Google Gemini API key ensures strictly private usage limits and helps support the platform during this free Beta period.
+                        </p>
+                    </div>
+
+                    <div className="space-y-2">
+                        <label className="text-xs font-medium text-stone-400 uppercase tracking-wider ml-1">
+                            Google Gemini API Key
+                        </label>
+                        <input
+                            type="password"
+                            value={key}
+                            onChange={(e) => setKey(e.target.value)}
+                            placeholder="AIzaSy..."
+                            className="w-full bg-black/40 border border-stone-700 rounded-lg px-4 py-3 text-stone-200 placeholder-stone-600 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 focus:border-emerald-500 transition-all font-mono text-sm"
+                        />
+                    </div>
+
+                    <div className="flex items-center justify-between pt-2">
+                        <a
+                            href="https://aistudio.google.com/app/apikey"
+                            target="_blank"
+                            rel="noreferrer"
+                            className="text-xs text-emerald-500 hover:text-emerald-400 hover:underline flex items-center gap-1"
+                        >
+                            Get a key from Google AI Studio
+                        </a>
+
+                        {saved && (
+                            <button
+                                onClick={handleClear}
+                                className="text-xs text-red-400 hover:text-red-300 flex items-center gap-1 px-2 py-1 hover:bg-red-950/30 rounded transition-colors"
+                            >
+                                <Trash2 className="w-3 h-3" /> Clear Key
+                            </button>
+                        )}
+                    </div>
+                </div>
+
+                {/* Footer */}
+                <div className="px-6 py-4 bg-stone-950/50 border-t border-stone-800 flex justify-end gap-3">
+                    <button
+                        onClick={onClose}
+                        className="px-4 py-2 text-sm text-stone-400 hover:text-stone-200 transition-colors"
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        onClick={handleSave}
+                        disabled={!key.trim()}
+                        className="flex items-center gap-2 px-6 py-2 bg-emerald-600 hover:bg-emerald-500 text-white text-sm font-medium rounded-lg shadow-lg shadow-emerald-900/20 disabled:opacity-50 disabled:cursor-not-allowed transition-all active:scale-95"
+                    >
+                        {saved ? <Check className="w-4 h-4" /> : <Save className="w-4 h-4" />}
+                        {saved ? 'Updated' : 'Save Key'}
+                    </button>
+                </div>
+
+            </div>
+        </div>
+    );
+};

components/BrandKit.tsx

@@ -0,0 +1,214 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { Upload, Trash2, Save, Image as ImageIcon, Store, Link as LinkIcon, Lock } from 'lucide-react';
+
+interface BrandKitProps {
+}
+
+export default function BrandKit({ }: BrandKitProps) {
+    const [logoPreview, setLogoPreview] = useState<string | null>(null);
+    const [loading, setLoading] = useState(false);
+    const [uploading, setUploading] = useState(false);
+
+    // Shop Settings State
+    const [shopName, setShopName] = useState("");
+    const [shopLink, setShopLink] = useState("");
+    const [apiKey, setApiKey] = useState("");
+    const [savingDetails, setSavingDetails] = useState(false);
+
+    useEffect(() => {
+        fetchBrandData();
+    }, []);
+
+    const fetchBrandData = async () => {
+        setLoading(true);
+        try {
+            // 1. Fetch Logo Status
+            const logoRes = await axios.get('/api/brand/logo');
+            if (logoRes.data.exists) {
+                setLogoPreview(logoRes.data.logo);
+            }
+
+            // 2. Fetch User Settings (Shop Name, Link, API Key)
+            const userRes = await axios.get('/api/auth/me');
+            if (userRes.data) {
+                setShopName(userRes.data.etsyShopName || "");
+                setShopLink(userRes.data.etsyShopLink || "");
+                setApiKey(userRes.data.apiKey || "");
+            }
+
+        } catch (err) {
+            console.error("Failed to fetch brand data", err);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+
+        setUploading(true);
+        const formData = new FormData();
+        formData.append('logo', file);
+
+        try {
+            const res = await axios.post('/api/brand/logo', formData, {
+                headers: { 'Content-Type': 'multipart/form-data' }
+            });
+
+            // Refresh preview
+            fetchBrandData();
+        } catch (err: any) {
+            alert('Failed to upload logo: ' + (err.response?.data?.error || err.message));
+        } finally {
+            setUploading(false);
+        }
+    };
+
+    const handleSaveDetails = async () => {
+        setSavingDetails(true);
+        try {
+            await axios.put('/api/auth/me', {
+                etsyShopName: shopName,
+                etsyShopLink: shopLink,
+                apiKey: apiKey // Allow updating API Key here too if needed
+            });
+            alert("Brand settings saved successfully!");
+        } catch (err: any) {
+            alert("Failed to save settings: " + (err.response?.data?.error || err.message));
+        } finally {
+            setSavingDetails(false);
+        }
+    };
+
+    return (
+        <div className="bg-white border border-stone-200 shadow-sm rounded-2xl p-6 mb-8">
+            <div className="flex justify-between items-start mb-6">
+                <div>
+                    <h3 className="text-lg font-bold text-stone-900 flex items-center gap-2">
+                        <ImageIcon className="w-5 h-5 text-purple-600" />
+                        Brand Kit & Shop Settings
+                    </h3>
+                    <p className="text-sm text-stone-500 mt-1">
+                        Manage your shop identity. Your logo will be used for mockups, and shop details for SEO & Branding.
+                    </p>
+                </div>
+            </div>
+
+            <div className="flex flex-col md:flex-row gap-8 items-start">
+
+                {/* 1. Logo Section */}
+                <div className="w-full md:w-auto flex flex-col items-center gap-3">
+                    <span className="text-xs font-bold text-stone-500 uppercase tracking-wider">Store Logo</span>
+                    <div className="w-48 h-48 bg-stone-100 rounded-xl border-2 border-dashed border-stone-300 flex flex-col items-center justify-center relative overflow-hidden group">
+                        {loading ? (
+                            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-stone-900"></div>
+                        ) : logoPreview ? (
+                            <>
+                                <img src={logoPreview} alt="Brand Logo" className="w-full h-full object-contain p-4" />
+                                <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                                    <label className="cursor-pointer bg-white text-stone-900 px-3 py-1.5 rounded-lg text-xs font-bold hover:bg-stone-50 shadow-lg transform translate-y-2 group-hover:translate-y-0 transition-all">
+                                        Change Logo
+                                        <input type="file" className="hidden" accept="image/png" onChange={handleFileUpload} />
+                                    </label>
+                                </div>
+                            </>
+                        ) : (
+                            <label className="cursor-pointer flex flex-col items-center gap-2 text-stone-400 hover:text-stone-600 transition-colors w-full h-full justify-center">
+                                <Upload className="w-8 h-8" />
+                                <span className="text-xs font-bold">Upload PNG</span>
+                                <input type="file" className="hidden" accept="image/png" onChange={handleFileUpload} />
+                            </label>
+                        )}
+                    </div>
+                    {uploading && <span className="text-xs text-purple-600 animate-pulse">Uploading...</span>}
+                    <p className="text-[10px] text-stone-400 max-w-[12rem] text-center">
+                        Supports transparent PNG. Max 5MB. Used for watermarks on mockups.
+                    </p>
+                </div>
+
+                {/* 2. Shop Details Section */}
+                <div className="flex-1 w-full space-y-6">
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+
+                        {/* Shop Name */}
+                        <div className="space-y-1">
+                            <label className="text-xs font-bold text-stone-700 uppercase flex items-center gap-1.5">
+                                <Store className="w-3.5 h-3.5" /> Etsy Shop Name
+                            </label>
+                            <input
+                                type="text"
+                                value={shopName}
+                                onChange={(e) => setShopName(e.target.value)}
+                                placeholder="e.g. MyArtPrintStudio"
+                                className="w-full px-3 py-2 bg-stone-50 border border-stone-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500 transition-all"
+                            />
+                        </div>
+
+                        {/* Shop Link */}
+                        <div className="space-y-1">
+                            <label className="text-xs font-bold text-stone-700 uppercase flex items-center gap-1.5">
+                                <LinkIcon className="w-3.5 h-3.5" /> Shop URL
+                            </label>
+                            <input
+                                type="text"
+                                value={shopLink}
+                                onChange={(e) => setShopLink(e.target.value)}
+                                placeholder="https://etsy.com/shop/..."
+                                className="w-full px-3 py-2 bg-stone-50 border border-stone-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500 transition-all"
+                            />
+                        </div>
+
+                        {/* API Key (Optional Display) */}
+                        <div className="col-span-1 md:col-span-2 space-y-1">
+                            <label className="text-xs font-bold text-stone-700 uppercase flex items-center gap-1.5">
+                                <Lock className="w-3.5 h-3.5" /> Gemini API Key (Optional Override)
+                            </label>
+                            <input
+                                type="password"
+                                value={apiKey}
+                                onChange={(e) => setApiKey(e.target.value)}
+                                placeholder="Enter specific key for this project..."
+                                className="w-full px-3 py-2 bg-stone-50 border border-stone-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500 transition-all font-mono"
+                            />
+                            <p className="text-[10px] text-stone-400">
+                                Leave blank to use system default.
+                            </p>
+                        </div>
+                    </div>
+
+                    {/* Branding Info Box */}
+                    <div className="bg-purple-50 border border-purple-100 rounded-xl p-4">
+                        <h4 className="text-sm font-bold text-purple-900 mb-2">How this data is used</h4>
+                        <ul className="text-xs text-purple-800 space-y-1.5 list-disc list-inside">
+                            <li><strong>Shop Name:</strong> Used in SEO Titles and Descriptions generated by AI.</li>
+                            <li><strong>Shop URL:</strong> Included in 'Printing Guide' PDFs for customer reference.</li>
+                            <li><strong>Logo:</strong> Applied as a watermark to generated mockups (never on masters).</li>
+                        </ul>
+                    </div>
+
+                    <div className="flex justify-end pt-2">
+                        <button
+                            onClick={handleSaveDetails}
+                            disabled={savingDetails}
+                            className="flex items-center gap-2 px-6 py-2.5 bg-stone-900 hover:bg-black text-white rounded-xl font-medium text-sm transition-all shadow-lg shadow-stone-900/10 disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                            {savingDetails ? (
+                                <>
+                                    <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                                    Saving...
+                                </>
+                            ) : (
+                                <>
+                                    <Save className="w-4 h-4" />
+                                    Save Changes
+                                </>
+                            )}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

components/CreditButton.tsx

@@ -0,0 +1,86 @@
+
+import React, { useEffect, useState } from 'react';
+
+type ActionType = 'GENERATE_MASTER' | 'GENERATE_VARIANT' | 'GENERATE_MOCKUP' | 'GENERATE_PROMPT';
+
+const DEFAULT_CREDITS: Record<ActionType, number> = {
+    GENERATE_PROMPT: 1,
+    GENERATE_MASTER: 10,
+    GENERATE_VARIANT: 5,
+    GENERATE_MOCKUP: 2
+};
+
+// Global pricing cache to avoid fetching every button render
+let pricingCache: any = null;
+
+interface CreditButtonProps {
+    action?: ActionType;
+    cost?: number; // Direct cost override (for backward compatibility)
+    onClick: () => void;
+    disabled?: boolean;
+    className?: string; // Additional classes for styling
+    children?: React.ReactNode; // Custom text if needed (e.g. "Generate")
+    hideCost?: boolean;
+}
+
+export const CreditButton: React.FC<CreditButtonProps> = ({
+    action,
+    cost: directCost,
+    onClick,
+    disabled = false,
+    className = "",
+    children,
+    hideCost = false
+}) => {
+    const [price, setPrice] = useState<number>(directCost ?? (action ? DEFAULT_CREDITS[action] : 0));
+
+    useEffect(() => {
+        // If directCost is provided, use it directly
+        if (directCost !== undefined) {
+            setPrice(directCost);
+            return;
+        }
+
+        // If no action, skip fetching
+        if (!action) return;
+
+        const fetchPrices = async () => {
+            // Use cache if exists
+            if (pricingCache && pricingCache[`PRICE_${action}`]) {
+                setPrice(Number(pricingCache[`PRICE_${action}`]));
+                return;
+            }
+
+            try {
+                const res = await fetch('http://localhost:3001/api/config/prices');
+                if (res.ok) {
+                    const data = await res.json();
+                    pricingCache = data;
+                    const dynamicPrice = data[`PRICE_${action}`];
+                    if (dynamicPrice) {
+                        setPrice(Number(dynamicPrice));
+                    }
+                }
+            } catch (err) {
+                console.warn("Failed to fetch dynamic prices", err);
+            }
+        };
+
+        fetchPrices();
+    }, [action, directCost]);
+
+    return (
+        <button
+            onClick={onClick}
+            disabled={disabled}
+            className={`flex items-center justify-center gap-2 group ${className}`}
+        >
+            {children || <span>Generate</span>}
+            {!hideCost && (
+                <span className="bg-white/20 px-2 py-0.5 rounded text-xs font-mono font-bold opacity-90 group-hover:bg-white/30 transition-colors">
+                    {price} 🪙
+                </span>
+            )}
+        </button>
+    );
+};

components/Footer.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { USER_AGREEMENT_TEXT, KVKK_TEXT, DISCLAIMER_TEXT } from '../legal_texts';
+
+interface FooterProps {
+    openModal: (title: string, content: string) => void;
+}
+
+export const Footer: React.FC<FooterProps> = ({ openModal }) => {
+    const { t } = useTranslation();
+
+    return (
+        <footer className="mt-20 border-t border-stone-200 py-12 bg-white">
+            <div className="max-w-[1600px] mx-auto px-10 flex flex-col md:flex-row justify-between items-center gap-6">
+                <div className="flex items-center gap-2">
+                    <span className="text-xl font-black tracking-tight text-stone-900">DIGICRAFT™</span>
+                    <span className="text-[10px] font-bold text-stone-400">v16.0</span>
+                </div>
+
+                <div className="flex gap-8 text-[11px] font-bold uppercase tracking-wider text-stone-500">
+                    <button onClick={() => openModal("User Agreement & IP Rights", USER_AGREEMENT_TEXT)} className="hover:text-stone-900 transition-colors">User Agreement</button>
+                    <button onClick={() => openModal("KVKK & Privacy", KVKK_TEXT)} className="hover:text-stone-900 transition-colors">KVKK & Privacy</button>
+                    <button onClick={() => openModal("Legal Disclaimer", DISCLAIMER_TEXT)} className="hover:text-stone-900 transition-colors">Disclaimer</button>
+                </div>
+
+                <div className="text-[10px] text-stone-400 font-medium">
+                    © {new Date().getFullYear()} Harun CAN. All Rights Reserved.
+                </div>
+            </div>
+        </footer>
+    );
+};
+
+export default Footer;

components/Header.tsx

@@ -0,0 +1,252 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Settings, ShieldCheck, LogOut, ChevronDown, Users, BarChart3, Database, Shield, ScanEye, Brain } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Tooltip } from './Tooltip';
+
+interface HeaderProps {
+    user: any;
+    logout: () => void;
+    openApiKeyModal: () => void;
+    projectTitle?: string;
+}
+
+export const Header: React.FC<HeaderProps> = ({ user, logout, openApiKeyModal, projectTitle }) => {
+    const { t, i18n } = useTranslation();
+    const [isLangOpen, setIsLangOpen] = useState(false);
+    const [isAdminMenuOpen, setIsAdminMenuOpen] = useState(false);
+    const [hasPersonalKey, setHasPersonalKey] = useState(false);
+    const adminMenuRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const checkKey = () => setHasPersonalKey(!!localStorage.getItem('gemini_api_key'));
+        checkKey();
+        window.addEventListener('storage', checkKey);
+
+        const handleClickOutside = (event: MouseEvent) => {
+            if (adminMenuRef.current && !adminMenuRef.current.contains(event.target as Node)) {
+                setIsAdminMenuOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+
+        return () => {
+            window.removeEventListener('storage', checkKey);
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+
+    const languages = [
+        { code: 'en', label: 'English' },
+        { code: 'tr', label: 'Türkçe' },
+        { code: 'de', label: 'Deutsch' },
+        { code: 'fr', label: 'Français' },
+        { code: 'es', label: 'Español' }
+    ];
+
+    const changeLanguage = (lng: string) => {
+        i18n.changeLanguage(lng);
+        setIsLangOpen(false);
+    };
+
+    return (
+        <header className="bg-white border-b border-stone-100 relative z-50">
+            {/* Upper Utility Bar */}
+            <div className="bg-stone-50/50 border-b border-stone-100 px-8 py-2 flex items-center justify-between backdrop-blur-sm">
+                <div className="flex items-center gap-4">
+                    <Tooltip content="Engine Status: Online (v13.1)" position="bottom">
+                        <div className="flex items-center gap-2 px-2 py-1 bg-white rounded-md border border-stone-200/50 shadow-sm transition-all">
+                            <div className="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.4)]"></div>
+                            <span className="text-[8px] font-black uppercase tracking-widest text-stone-400">System Live</span>
+                        </div>
+                    </Tooltip>
+
+                    <Tooltip content={hasPersonalKey ? "Personal Key Active (Beta Mode)" : "System Key (Standard)"} position="bottom">
+                        <div
+                            onClick={openApiKeyModal}
+                            className={`flex items-center gap-2 px-2 py-1 rounded-md cursor-pointer border transition-all ${hasPersonalKey ? 'bg-indigo-50 border-indigo-200' : 'bg-white border-stone-200/50 shadow-sm'}`}
+                        >
+                            <div className={`w-1.5 h-1.5 rounded-full ${hasPersonalKey ? 'bg-indigo-500 animate-pulse' : 'bg-blue-400'}`}></div>
+                            <span className={`text-[8px] font-black uppercase tracking-widest ${hasPersonalKey ? 'text-indigo-400' : 'text-stone-400'}`}>
+                                {hasPersonalKey ? 'V-DNA KEY' : 'API CORE'}
+                            </span>
+                        </div>
+                    </Tooltip>
+                </div>
+
+                <div className="flex items-center gap-6">
+                    <span className="text-[9px] font-black uppercase tracking-[0.2em] text-stone-300 select-none">
+                        {user?.email}
+                    </span>
+
+                    <div className="flex items-center gap-2">
+                        <button
+                            onClick={() => setIsLangOpen(!isLangOpen)}
+                            className="flex items-center gap-2 bg-white border border-stone-200/50 px-2 py-1 rounded-md shadow-sm hover:bg-stone-100 transition-all"
+                        >
+                            <span className="text-[9px] font-bold text-stone-500 uppercase">{i18n.language}</span>
+                            <span className="text-[7px] text-stone-400">▼</span>
+                        </button>
+
+                        {isLangOpen && (
+                            <div className="absolute right-16 top-9 bg-white border border-stone-100 rounded-xl shadow-2xl p-2 min-w-[120px] z-[60] flex flex-col gap-1">
+                                {languages.map(l => (
+                                    <button
+                                        key={l.code}
+                                        onClick={() => changeLanguage(l.code)}
+                                        className={`text-left px-3 py-2 rounded-lg text-xs font-bold transition-all ${i18n.language === l.code ? 'bg-stone-900 text-white' : 'text-stone-500 hover:bg-stone-50'}`}
+                                    >
+                                        {l.label}
+                                    </button>
+                                ))}
+                            </div>
+                        )}
+
+                        <Tooltip content={t('general.logout')} position="bottom">
+                            <button onClick={logout} className="p-1 px-2 text-stone-400 hover:text-red-500 hover:bg-red-50 rounded-md transition-all">
+                                <LogOut className="w-3.5 h-3.5" />
+                            </button>
+                        </Tooltip>
+                    </div>
+                </div>
+            </div>
+
+            {/* Main Navigation Bar */}
+            <div className="py-6 px-10 flex items-center justify-between">
+                <div className="flex items-center gap-8">
+                    <div className="flex flex-col text-left">
+                        <div className="flex items-center gap-4">
+                            <h1 className="text-4xl font-black text-stone-900 tracking-tighter leading-none cursor-pointer" onClick={() => window.location.href = '/'}>{t('home.title')}</h1>
+                            {projectTitle && (
+                                <>
+                                    <div className="h-8 w-[1px] bg-stone-200 rotate-[20deg] mx-2" />
+                                    <h2 className="text-2xl font-black text-purple-600 tracking-tight leading-none truncate max-w-[400px]">{projectTitle}</h2>
+                                </>
+                            )}
+                        </div>
+                        <div className="flex items-center gap-3 mt-1">
+                            <p className="text-[10px] text-stone-400 font-bold uppercase tracking-[0.3em]">{t('home.subtitle')}</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="flex items-center gap-4">
+                    <Tooltip content={`Plan: ${user?.plan || 'Free'}`} position="bottom">
+                        <button
+                            onClick={() => window.location.href = '/pricing'}
+                            className="flex items-center gap-3 px-5 py-2.5 bg-gradient-to-br from-amber-50 to-orange-50 rounded-2xl border border-amber-100/50 shadow-sm hover:shadow-md hover:border-amber-200 transition-all group"
+                        >
+                            <div className="text-lg group-hover:scale-110 transition-transform">🪙</div>
+                            <div className="flex flex-col items-start">
+                                <span className="text-[11px] font-black text-amber-600 leading-none">
+                                    {user?.credits ?? 10}
+                                </span>
+                                <span className="text-[8px] font-bold uppercase tracking-widest text-amber-500/70">Credits</span>
+                            </div>
+                        </button>
+                    </Tooltip>
+
+                    <div className="h-8 w-px bg-stone-100 mx-2"></div>
+
+                    <div className="flex items-center gap-2">
+                        {user?.role === 'ADMIN' && (
+                            <div className="relative" ref={adminMenuRef}>
+                                <button
+                                    onClick={() => setIsAdminMenuOpen(!isAdminMenuOpen)}
+                                    className={`p-3 rounded-2xl transition-all border ${isAdminMenuOpen ? 'bg-purple-600 text-white border-purple-500 shadow-lg shadow-purple-200' : 'text-stone-400 hover:text-purple-600 hover:bg-purple-50 border-transparent hover:border-purple-100'}`}
+                                    title="Admin Fast Access"
+                                >
+                                    <ShieldCheck className="w-5 h-5" />
+                                </button>
+
+                                {isAdminMenuOpen && (
+                                    <div className="absolute right-0 top-full mt-3 w-64 bg-white/95 backdrop-blur-xl border border-stone-200 rounded-[2rem] shadow-2xl p-3 z-[100] animate-in fade-in slide-in-from-top-2 duration-200">
+                                        <div className="px-3 py-2 mb-2">
+                                            <p className="text-[10px] font-black text-stone-400 uppercase tracking-[0.2em]">Command Center</p>
+                                        </div>
+                                        <div className="space-y-1">
+                                            <button
+                                                onClick={() => window.location.href = '/admin'}
+                                                className="w-full flex items-center gap-4 px-4 py-3 text-stone-600 hover:text-purple-600 hover:bg-purple-50 rounded-2xl transition-all text-xs font-bold group"
+                                            >
+                                                <div className="bg-purple-100 p-2 rounded-xl text-purple-600 group-hover:scale-110 transition-transform">
+                                                    <Users className="w-4 h-4" />
+                                                </div>
+                                                <div className="flex flex-col items-start">
+                                                    <span>User Accounts</span>
+                                                    <span className="text-[9px] text-stone-400 font-normal">Manage permissions & credits</span>
+                                                </div>
+                                            </button>
+                                            <button
+                                                onClick={() => window.location.href = '/admin/analytics'}
+                                                className="w-full flex items-center gap-4 px-4 py-3 text-stone-600 hover:text-blue-600 hover:bg-blue-50 rounded-2xl transition-all text-xs font-bold group"
+                                            >
+                                                <div className="bg-blue-100 p-2 rounded-xl text-blue-600 group-hover:scale-110 transition-transform">
+                                                    <BarChart3 className="w-4 h-4" />
+                                                </div>
+                                                <div className="flex flex-col items-start">
+                                                    <span>Engine Analytics</span>
+                                                    <span className="text-[9px] text-stone-400 font-normal">Monitor system performance</span>
+                                                </div>
+                                            </button>
+                                            <button
+                                                onClick={() => window.location.href = '/admin/config'}
+                                                className="w-full flex items-center gap-4 px-4 py-3 text-stone-600 hover:text-amber-600 hover:bg-amber-50 rounded-2xl transition-all text-xs font-bold group"
+                                            >
+                                                <div className="bg-amber-100 p-2 rounded-xl text-amber-600 group-hover:scale-110 transition-transform">
+                                                    <Database className="w-4 h-4" />
+                                                </div>
+                                                <div className="flex flex-col items-start">
+                                                    <span>System Config</span>
+                                                    <span className="text-[9px] text-stone-400 font-normal">Global variables & keys</span>
+                                                </div>
+                                            </button>
+                                            <button
+                                                onClick={() => window.location.href = '/xray'}
+                                                className="w-full flex items-center gap-4 px-4 py-3 text-stone-600 hover:text-purple-600 hover:bg-purple-50 rounded-2xl transition-all text-xs font-bold group"
+                                            >
+                                                <div className="bg-purple-100 p-2 rounded-xl text-purple-600 group-hover:scale-110 transition-transform">
+                                                    <ScanEye className="w-4 h-4" />
+                                                </div>
+                                                <div className="flex flex-col items-start">
+                                                    <span className="text-[9px] text-stone-400 font-normal">Deep dive into data</span>
+                                                </div>
+                                            </button>
+                                            <button
+                                                onClick={() => window.location.href = '/scorecard'}
+                                                className="w-full flex items-center gap-4 px-4 py-3 text-stone-600 hover:text-blue-600 hover:bg-blue-50 rounded-2xl transition-all text-xs font-bold group"
+                                            >
+                                                <div className="bg-blue-100 p-2 rounded-xl text-blue-600 group-hover:scale-110 transition-transform">
+                                                    <Brain className="w-4 h-4" />
+                                                </div>
+                                                <div className="flex flex-col items-start">
+                                                    <span>Neuro-Scorecard</span>
+                                                    <span className="text-[9px] text-stone-400 font-normal">Predict conversion</span>
+                                                </div>
+                                            </button>
+                                        </div>
+                                        <div className="h-px bg-stone-100 my-3 mx-2"></div>
+                                        <button
+                                            onClick={() => window.location.href = '/admin'}
+                                            className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-stone-50 hover:bg-stone-900 text-stone-500 hover:text-white rounded-2xl transition-all text-[10px] font-black uppercase tracking-widest"
+                                        >
+                                            <Shield className="w-3 h-3" />
+                                            Admin Dashboard
+                                        </button>
+                                    </div>
+                                )}
+                            </div>
+                        )}
+                        <button
+                            onClick={() => window.location.href = '/settings'}
+                            className="p-3 text-stone-400 hover:text-stone-900 hover:bg-stone-50 rounded-2xl transition-all border border-transparent hover:border-stone-100"
+                        >
+                            <Settings className="w-5 h-5" />
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </header>
+    );
+};
+
+export default Header;

components/Layout.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { Header } from './Header';
+import { Footer } from './Footer';
+import { LegalModal } from './LegalModal';
+import { useAuth } from '../AuthContext';
+import { ApiKeyModal } from './ApiKeyModal';
+
+interface LayoutProps {
+    children: React.ReactNode;
+    projectTitle?: string;
+}
+
+export const Layout: React.FC<LayoutProps> = ({ children, projectTitle }) => {
+    const { user, logout } = useAuth();
+    const [legalModalOpen, setLegalModalOpen] = useState(false);
+    const [legalContent, setLegalContent] = useState({ title: '', text: '' });
+    const [isApiKeyModalOpen, setIsApiKeyModalOpen] = useState(false);
+
+    const openLegalModal = (title: string, text: string) => {
+        setLegalContent({ title, text });
+        setLegalModalOpen(true);
+    };
+
+    if (!user) return <>{children}</>;
+
+    return (
+        <div className="min-h-screen flex flex-col bg-stone-50">
+            <Header
+                user={user}
+                logout={logout}
+                openApiKeyModal={() => setIsApiKeyModalOpen(true)}
+                projectTitle={projectTitle}
+            />
+
+            <main className="flex-grow">
+                {children}
+            </main>
+
+            <Footer openModal={openLegalModal} />
+
+            <LegalModal
+                isOpen={legalModalOpen}
+                onClose={() => setLegalModalOpen(false)}
+                title={legalContent.title}
+                content={legalContent.text}
+            />
+
+            <ApiKeyModal
+                isOpen={isApiKeyModalOpen}
+                onClose={() => setIsApiKeyModalOpen(false)}
+            />
+        </div>
+    );
+};
+
+export default Layout;

components/LegalModal.tsx

@@ -0,0 +1,81 @@
+import React, { Fragment } from 'react';
+import { Dialog, Transition } from '@headlessui/react';
+import { X, ShieldCheck, FileText } from 'lucide-react';
+import { USER_AGREEMENT_TEXT, KVKK_TEXT } from '../legal_texts';
+
+interface LegalModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    type?: 'terms' | 'kvkk' | null;
+    title?: string;
+    content?: string;
+}
+
+export const LegalModal: React.FC<LegalModalProps> = ({ isOpen, onClose, type, title: customTitle, content: customContent }) => {
+    const title = customTitle || (type === 'terms' ? 'User Agreement & IP Rights' : type === 'kvkk' ? 'KVKK & Privacy Policy' : 'Information');
+    const content = customContent || (type === 'terms' ? USER_AGREEMENT_TEXT : type === 'kvkk' ? KVKK_TEXT : '');
+    const icon = type === 'terms' ? <ShieldCheck className="w-6 h-6 text-indigo-600" /> : <FileText className="w-6 h-6 text-indigo-600" />;
+
+    return (
+        <Transition appear show={isOpen} as={Fragment}>
+            <Dialog as="div" className="relative z-50" onClose={onClose}>
+                <Transition.Child
+                    as={Fragment}
+                    enter="ease-out duration-300"
+                    enterFrom="opacity-0"
+                    enterTo="opacity-100"
+                    leave="ease-in duration-200"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                >
+                    <div className="fixed inset-0 bg-black/40 backdrop-blur-sm" />
+                </Transition.Child>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full items-center justify-center p-4 text-center">
+                        <Transition.Child
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 scale-95"
+                            enterTo="opacity-100 scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 scale-100"
+                            leaveTo="opacity-0 scale-95"
+                        >
+                            <Dialog.Panel className="w-full max-w-2xl transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+                                <div className="flex items-center justify-between border-b pb-4 mb-4">
+                                    <div className="flex items-center gap-3">
+                                        {icon}
+                                        <Dialog.Title as="h3" className="text-xl font-bold leading-6 text-gray-900">
+                                            {title}
+                                        </Dialog.Title>
+                                    </div>
+                                    <button
+                                        onClick={onClose}
+                                        className="rounded-full p-1 hover:bg-gray-100 transition-colors"
+                                    >
+                                        <X className="w-5 h-5 text-gray-500" />
+                                    </button>
+                                </div>
+
+                                <div className="mt-2 text-sm text-gray-600 max-h-[60vh] overflow-y-auto whitespace-pre-line pr-2 custom-scrollbar">
+                                    {content}
+                                </div>
+
+                                <div className="mt-6 flex justify-end pt-4 border-t">
+                                    <button
+                                        type="button"
+                                        className="inline-flex justify-center rounded-lg border border-transparent bg-indigo-600 px-6 py-2 text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 transition-all"
+                                        onClick={onClose}
+                                    >
+                                        I Understand
+                                    </button>
+                                </div>
+                            </Dialog.Panel>
+                        </Transition.Child>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition>
+    );
+};

components/NeuroScorecard.tsx

@@ -0,0 +1,259 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Sparkles, Brain, Zap, Heart, Eye, TrendingUp, AlertTriangle, CheckCircle } from 'lucide-react';
+
+interface NeuroScoreProps {
+    analysis: {
+        scores: {
+            dopamine: number;
+            serotonin: number;
+            cognitiveEase: number;
+            commercialFit: number;
+        };
+        feedback: string[];
+        improvements: {
+            dopamine: string[];
+            serotonin: string[];
+            cognitiveEase: string[];
+            commercialFit: string[];
+        };
+        prediction: string;
+    } | null;
+    loading?: boolean;
+    onApplyImprovement?: (suggestion: string) => void;
+}
+
+const ScoreBar = ({ label, score, icon: Icon, color, barColor, onClick, isSelected }: { label: string; score: number; icon: any; color: string; barColor: string, onClick?: () => void, isSelected?: boolean }) => (
+    <div
+        onClick={onClick}
+        className={`mb-4 transition-all duration-300 ${onClick ? 'cursor-pointer hover:bg-white/5 p-2 -mx-2 rounded-lg' : ''} ${isSelected ? 'bg-white/10 ring-1 ring-white/20' : ''}`}
+    >
+        <div className="flex justify-between items-center mb-1">
+            <div className="flex items-center gap-2 text-stone-300">
+                <Icon className={`w-4 h-4 ${color}`} />
+                <span className="text-sm font-medium">{label}</span>
+            </div>
+            <span className={`text-sm font-bold ${score >= 8 ? 'text-green-400' : score >= 5 ? 'text-yellow-400' : 'text-red-400'}`}>
+                {score}/10
+            </span>
+        </div>
+        <div className="h-2 bg-stone-800/50 rounded-full overflow-hidden backdrop-blur-sm border border-white/5">
+            <motion.div
+                initial={{ width: 0 }}
+                animate={{ width: `${score * 10}%` }}
+                transition={{ duration: 1, ease: "easeOut" }}
+                className={`h-full ${barColor}`}
+            />
+        </div>
+        {isSelected && (
+            <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="text-[10px] text-stone-400 mt-1 italic text-center">
+                Viewing fixes for this metric...
+            </motion.div>
+        )}
+    </div>
+);
+
+const NeuroScorecard: React.FC<NeuroScoreProps> = ({ analysis, loading, onApplyImprovement }) => {
+    const [selectedMetric, setSelectedMetric] = useState<string | null>(null);
+
+    // Get fixes based on selection or aggregate all
+    const currentImprovements = React.useMemo(() => {
+        if (!analysis?.improvements) return [];
+
+        // Map UI labels to API keys
+        const keyMap: Record<string, keyof typeof analysis.improvements> = {
+            'Dopamine': 'dopamine',
+            'Serotonin': 'serotonin',
+            'Cognitive Ease': 'cognitiveEase',
+            'Commercial Fit': 'commercialFit'
+        };
+
+        if (selectedMetric && keyMap[selectedMetric]) {
+            return analysis.improvements[keyMap[selectedMetric]] || [];
+        }
+
+        // Return all improvements flattened if nothing selected
+        return [
+            ...analysis.improvements.dopamine,
+            ...analysis.improvements.serotonin,
+            ...analysis.improvements.cognitiveEase,
+            ...analysis.improvements.commercialFit
+        ];
+    }, [analysis, selectedMetric]);
+
+    if (loading) {
+        return (
+            <div className="p-8 rounded-2xl bg-white/5 backdrop-blur-xl border border-white/10 flex flex-col items-center justify-center text-center min-h-[400px]">
+                <motion.div
+                    animate={{ rotate: 360 }}
+                    transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
+                    className="mb-6 relative"
+                >
+                    <div className="absolute inset-0 bg-blue-500/20 blur-xl rounded-full" />
+                    <Brain className="w-16 h-16 text-blue-400 relative z-10" />
+                </motion.div>
+                <h3 className="text-xl font-bold text-white mb-2">Analyzing Neuro-Triggers...</h3>
+                <p className="text-stone-400 max-w-xs">Connecting to Gemini Vision to evaluate Dopamine, Serotonin, and Market Fit.</p>
+
+                <div className="mt-8 flex gap-2">
+                    {[0, 1, 2].map((i) => (
+                        <motion.div
+                            key={i}
+                            animate={{ scale: [1, 1.5, 1], opacity: [0.3, 1, 0.3] }}
+                            transition={{ duration: 1, repeat: Infinity, delay: i * 0.2 }}
+                            className="w-2 h-2 rounded-full bg-blue-400"
+                        />
+                    ))}
+                </div>
+            </div>
+        );
+    }
+
+    if (!analysis) return null;
+
+    return (
+        <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="bg-stone-900/40 backdrop-blur-2xl border border-white/10 rounded-2xl overflow-hidden shadow-2xl"
+        >
+            {/* Header */}
+            <div className="p-6 border-b border-white/5 bg-gradient-to-r from-blue-500/10 to-purple-500/10">
+                <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                        <div className="p-2 bg-blue-500/20 rounded-lg">
+                            <Brain className="w-6 h-6 text-blue-400" />
+                        </div>
+                        <div>
+                            <h2 className="text-xl font-bold text-white">Neuro-Scorecard</h2>
+                            <p className="text-xs text-stone-400">AI-Predicted Market Performance</p>
+                        </div>
+                    </div>
+                    <div className={`px-4 py-1.5 rounded-full border ${analysis.prediction.includes('High') ? 'bg-green-500/20 border-green-500/30 text-green-400' :
+                        analysis.prediction.includes('Medium') ? 'bg-yellow-500/20 border-yellow-500/30 text-yellow-400' :
+                            'bg-red-500/20 border-red-500/30 text-red-400'
+                        } text-sm font-semibold flex items-center gap-2`}>
+                        <TrendingUp className="w-4 h-4" />
+                        {analysis.prediction}
+                    </div>
+                </div>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-0 divide-y md:divide-y-0 md:divide-x divide-white/10">
+
+                {/* Column 1: Scores */}
+                <div className="p-6 bg-black/20">
+                    <h3 className="text-sm font-bold text-white/50 uppercase tracking-widest mb-6 flex justify-between items-center">
+                        Vital Signs
+                        {selectedMetric && (
+                            <button onClick={() => setSelectedMetric(null)} className="text-[10px] text-blue-400 hover:underline">
+                                Show All
+                            </button>
+                        )}
+                    </h3>
+                    <ScoreBar
+                        label="Dopamine Hit (Excitement)"
+                        score={analysis.scores.dopamine}
+                        icon={Zap}
+                        color="text-yellow-400"
+                        barColor="bg-yellow-400"
+                        onClick={() => setSelectedMetric('Dopamine')}
+                        isSelected={selectedMetric === 'Dopamine'}
+                    />
+                    <ScoreBar
+                        label="Serotonin Flow (Trust/Calm)"
+                        score={analysis.scores.serotonin}
+                        icon={Heart}
+                        color="text-pink-400"
+                        barColor="bg-pink-400"
+                        onClick={() => setSelectedMetric('Serotonin')}
+                        isSelected={selectedMetric === 'Serotonin'}
+                    />
+                    <ScoreBar
+                        label="Cognitive Ease (Clarity)"
+                        score={analysis.scores.cognitiveEase}
+                        icon={Eye}
+                        color="text-blue-400"
+                        barColor="bg-blue-400"
+                        onClick={() => setSelectedMetric('Cognitive Ease')}
+                        isSelected={selectedMetric === 'Cognitive Ease'}
+                    />
+                    <ScoreBar
+                        label="Commercial Fit (Pro Quality)"
+                        score={analysis.scores.commercialFit}
+                        icon={Sparkles}
+                        color="text-purple-400"
+                        barColor="bg-purple-400"
+                        onClick={() => setSelectedMetric('Commercial Fit')}
+                        isSelected={selectedMetric === 'Commercial Fit'}
+                    />
+                </div>
+
+                {/* Column 2: Improvements */}
+                <div className="p-6 relative">
+                    <h3 className="text-sm font-bold text-red-400/80 uppercase tracking-widest mb-6 flex items-center gap-2">
+                        <AlertTriangle className="w-4 h-4" />
+                        {selectedMetric ? `${selectedMetric} Fixes` : 'Critical Fixes'}
+                    </h3>
+
+                    <ul className="space-y-4 max-h-[300px] overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-white/10">
+                        {currentImprovements.length > 0 ? (
+                            currentImprovements.map((fix, idx) => (
+                                <motion.li
+                                    key={idx}
+                                    initial={{ opacity: 0, x: -10 }}
+                                    animate={{ opacity: 1, x: 0 }}
+                                    transition={{ delay: idx * 0.1 }}
+                                    className="flex items-start gap-3 text-stone-300 text-sm group"
+                                >
+                                    <div className="w-1.5 h-1.5 rounded-full bg-red-400 mt-1.5 flex-shrink-0 group-hover:scale-150 transition-transform" />
+                                    <div className="flex-1">
+                                        <span className="leading-relaxed block mb-2">{fix}</span>
+                                        {onApplyImprovement && (
+                                            <button
+                                                onClick={() => onApplyImprovement(fix)}
+                                                className="text-[10px] bg-red-500/10 hover:bg-red-500/20 text-red-300 px-2 py-1 rounded border border-red-500/20 transition-colors uppercase tracking-wider font-bold"
+                                            >
+                                                + Add to Refine
+                                            </button>
+                                        )}
+                                    </div>
+                                </motion.li>
+                            ))
+                        ) : (
+                            <div className="text-center py-8">
+                                <p className="text-stone-500 text-xs italic mb-4">
+                                    No specific fixes found for this metric.
+                                </p>
+                            </div>
+                        )}
+                    </ul>
+                </div>
+
+                {/* Column 3: Feedback */}
+                <div className="p-6 bg-white/2">
+                    <h3 className="text-sm font-bold text-green-400/80 uppercase tracking-widest mb-6 flex items-center gap-2">
+                        <CheckCircle className="w-4 h-4" />
+                        Winning Traits
+                    </h3>
+                    <ul className="space-y-4">
+                        {analysis.feedback.map((point, idx) => (
+                            <motion.li
+                                key={idx}
+                                initial={{ opacity: 0, x: -10 }}
+                                animate={{ opacity: 1, x: 0 }}
+                                transition={{ delay: idx * 0.1 + 0.2 }}
+                                className="flex items-start gap-3 text-stone-300 text-sm"
+                            >
+                                <div className="w-1.5 h-1.5 rounded-full bg-green-400 mt-1.5 flex-shrink-0" />
+                                <span className="leading-relaxed">{point}</span>
+                            </motion.li>
+                        ))}
+                    </ul>
+                </div>
+            </div>
+        </motion.div>
+    );
+};
+
+export default NeuroScorecard;

components/ProcessGuideGenerator.tsx

@@ -0,0 +1,137 @@
+import React, { useRef, useState, forwardRef, useImperativeHandle } from 'react';
+import { toPng } from 'html-to-image';
+import axios from 'axios';
+import { useTranslation } from 'react-i18next';
+
+interface ProcessGuideGeneratorProps {
+    projectId?: string;
+    project?: { id: string } | null; // Alternative to projectId
+    onImageGenerated?: (path: string) => void;
+    onGenerate?: () => void; // Alias for backward compatibility
+    shopName?: string;
+}
+
+export interface ProcessGuideRef {
+    generate: () => Promise<void>;
+}
+
+export const ProcessGuideGenerator = forwardRef<ProcessGuideRef, ProcessGuideGeneratorProps>(({ projectId, project, onImageGenerated, onGenerate, shopName = "MrStitchPrintStudio" }, ref) => {
+    const resolvedProjectId = projectId || project?.id;
+    const { t } = useTranslation();
+    const elementRef = useRef<HTMLDivElement>(null);
+    const [isGenerating, setIsGenerating] = useState(false);
+
+    useImperativeHandle(ref, () => ({
+        generate: handleGenerate
+    }));
+
+    const handleGenerate = async () => {
+        if (!elementRef.current) return;
+        setIsGenerating(true);
+
+        try {
+            // Give fonts time to load visually if needed, though usually not an issue with simple fonts
+            const dataUrl = await toPng(elementRef.current, { cacheBust: true, pixelRatio: 1 });
+
+            // Upload to server
+            const response = await axios.post(`/api/projects/${projectId}/assets/upload`, {
+                file: dataUrl,
+                type: 'mockup', // Treated as mockup
+                folder: 'mockups',
+                filename: `process_guide_${Date.now()}.png`
+            }, {
+                headers: {
+                    'Authorization': `Bearer ${localStorage.getItem('token')}`
+                }
+            });
+
+            if (response.data.success) {
+                onImageGenerated(response.data.asset.path);
+            }
+
+        } catch (err) {
+            console.error('Failed to generate process guide:', err);
+            throw err; // Re-throw to let parent know
+        } finally {
+            setIsGenerating(false);
+        }
+    };
+
+    return (
+        <div className="relative overflow-hidden w-[500px] h-[500px] bg-white">
+            {/* This container is what gets captured. It must be visible in DOM but can be hidden by parent overflow/opacity. */}
+            {/* We strictly render ONLY the capture content here. Extra UI is removed. */}
+            <div
+                ref={elementRef}
+                className="w-[500px] h-[500px] bg-[#F5EBE0] text-[#4A3B32] flex flex-col items-center justify-between p-12 shrink-0"
+                style={{ fontFamily: 'Inter, sans-serif' }}
+            >
+                {/* HEADER */}
+                <h1 className="text-4xl font-bold uppercase tracking-wide mt-4">HOW IT WORKS</h1>
+
+                {/* STEPS ROW */}
+                <div className="flex justify-between w-full mt-8">
+                    {/* STEP 1 */}
+                    <div className="flex flex-col items-center text-center w-1/3 px-2">
+                        <div className="mb-4">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="w-16 h-16">
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
+                            </svg>
+                        </div>
+                        <h3 className="font-bold text-lg mb-1">ADD TO CART</h3>
+                        <p className="text-xs leading-tight opacity-80">Select your digital product and add it to your cart.</p>
+                    </div>
+
+                    {/* STEP 2 */}
+                    <div className="flex flex-col items-center text-center w-1/3 px-2 border-l border-r border-[#4A3B32]/10">
+                        <div className="mb-4">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="w-16 h-16">
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" />
+                            </svg>
+                        </div>
+                        <h3 className="font-bold text-lg mb-1">CHECKOUT</h3>
+                        <p className="text-xs leading-tight opacity-80">Complete payment to securely confirm your purchase.</p>
+                    </div>
+
+                    {/* STEP 3 */}
+                    <div className="flex flex-col items-center text-center w-1/3 px-2">
+                        <div className="mb-4">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="w-16 h-16">
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
+                            </svg>
+                        </div>
+                        <h3 className="font-bold text-lg mb-1">DOWNLOAD</h3>
+                        <p className="text-xs leading-tight opacity-80">Access your download link in the receipt email.</p>
+                    </div>
+                </div>
+
+                {/* IMPORTANT NOTICE */}
+                <div className="w-full text-left mt-8">
+                    <h4 className="font-bold uppercase text-sm mb-1">IMPORTANT:</h4>
+                    <p className="text-xs">• This is an <span className="font-bold">INSTANT DOWNLOAD</span>. No physical items will be shipped or sent.</p>
+                </div>
+
+                {/* FOOTER */}
+                <div className="relative mt-auto w-full">
+                    {/* Speech Bubble effect */}
+                    <div className="bg-white/50 p-6 rounded-2xl relative">
+                        <h4 className="font-bold text-sm mb-2">Thank you for stopping by!</h4>
+                        <p className="text-[10px] leading-relaxed opacity-90">
+                            Our goal is to create products that inspire, uplift, and add a touch of positivity to your life.
+                            We hope you find joy in our products, and if you have any questions or feedback, we'd love to hear from you!
+                        </p>
+                        {/* Triangle */}
+                        <div className="absolute -bottom-3 left-8 w-0 h-0 border-l-[10px] border-l-transparent border-t-[15px] border-t-white/50 border-r-[10px] border-r-transparent"></div>
+                    </div>
+
+                    <div className="mt-6 ml-8 font-bold text-sm opacity-80">
+                        {shopName}
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    );
+});
+
+ProcessGuideGenerator.displayName = 'ProcessGuideGenerator';

components/SEO.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Helmet } from 'react-helmet-async';
+
+interface SEOProps {
+    title?: string;
+    description?: string;
+    keywords?: string;
+    schema?: object;
+}
+
+export const SEO: React.FC<SEOProps> = ({
+    title = "DigiCraft",
+    description = "Automated Digital Product Architect & Visual DNA Suite",
+    keywords = "ai, etsy, digital products, automation, visuals",
+    schema
+}) => {
+    return (
+        <Helmet>
+            {/* Standard Metadata */}
+            <title>{title}</title>
+            <meta name="description" content={description} />
+            <meta name="keywords" content={keywords} />
+
+            {/* Open Graph / Facebook */}
+            <meta property="og:type" content="website" />
+            <meta property="og:title" content={title} />
+            <meta property="og:description" content={description} />
+
+            {/* Twitter */}
+            <meta name="twitter:card" content="summary_large_image" />
+            <meta name="twitter:title" content={title} />
+            <meta name="twitter:description" content={description} />
+
+            {/* Structured Data (JSON-LD) */}
+            {schema && (
+                <script type="application/ld+json">
+                    {JSON.stringify(schema)}
+                </script>
+            )}
+        </Helmet>
+    );
+};

components/Tooltip.tsx

@@ -0,0 +1,33 @@
+
+import React, { ReactNode } from 'react';
+
+interface TooltipProps {
+    children: ReactNode;
+    content: string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    className?: string; // For extra styling on the wrapper
+}
+
+export const Tooltip: React.FC<TooltipProps> = ({ children, content, position = 'top', className = '' }) => {
+    const positionClasses = {
+        top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+        bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+        left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+        right: 'left-full top-1/2 -translate-y-1/2 ml-2',
+    };
+
+    return (
+        <div className={`relative group ${className}`}>
+            {children}
+            <div
+                className={`absolute ${positionClasses[position]} z-50 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-in-out`}
+            >
+                <div className="bg-stone-900/95 backdrop-blur-sm text-white text-[10px] font-bold uppercase tracking-widest py-2 px-3 rounded-lg shadow-xl whitespace-nowrap border border-white/10">
+                    {content}
+                    {/* Arrow */}
+                    {/* <div className="absolute w-2 h-2 bg-stone-900 rotate-45 ..."></div> Optional */}
+                </div>
+            </div>
+        </div>
+    );
+};

components/VideoGenerator.tsx

@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import { Loader2, Video, Play, Film } from 'lucide-react';
+import { useAuth } from '../AuthContext';
+
+interface VideoGeneratorProps {
+    project: any;
+    onVideoGenerated: () => void;
+}
+
+const VIDEO_PRESETS = [
+    { id: 'cinematic_pan', label: 'Cinematic Pan', icon: '↔️', description: 'Slow horizontal pan across the artwork' },
+    { id: 'slow_zoom', label: 'Slow Zoom', icon: '🔍', description: 'Gentle zoom in to highlight details' },
+    { id: 'windy_atmosphere', label: 'Windy Atmosphere', icon: '🍃', description: 'Subtle movement suggesting a breeze' },
+    { id: 'page_flip', label: 'Page Flip (Conceptual)', icon: '📖', description: 'Simulated page turning effect' },
+];
+
+export const VideoGenerator: React.FC<VideoGeneratorProps> = ({ project, onVideoGenerated }) => {
+    const [generating, setGenerating] = useState(false);
+    const [selectedPreset, setSelectedPreset] = useState<string | null>(null);
+    const [error, setError] = useState<string | null>(null);
+    const { refreshUser } = useAuth();
+
+    const handleGenerate = async () => {
+        if (!selectedPreset) return;
+
+        setGenerating(true);
+        setError(null);
+
+        try {
+            const token = localStorage.getItem('token');
+            const apiKey = localStorage.getItem('gemini_api_key');
+
+            await axios.post(
+                `/api/projects/${project.id}/video-mockups`,
+                { presetId: selectedPreset },
+                {
+                    headers: {
+                        Authorization: `Bearer ${token}`,
+                        'X-Gemini-API-Key': apiKey || ''
+                    }
+                }
+            );
+
+            onVideoGenerated();
+            setSelectedPreset(null);
+            await refreshUser();
+        } catch (err: any) {
+            console.error("Video generation failed:", err);
+            const msg = err.response?.data?.error || "Failed to generate video";
+            if (err.response?.status === 402) alert(`⚠️ ${msg}`);
+            setError(msg);
+        } finally {
+            setGenerating(false);
+        }
+    };
+
+    return (
+        <div className="bg-white/50 backdrop-blur-sm rounded-xl p-6 border border-stone-200 shadow-sm mt-8">
+            <div className="flex items-center gap-3 mb-6">
+                <div className="p-2 bg-purple-100 rounded-lg">
+                    <Film className="w-5 h-5 text-purple-600" />
+                </div>
+                <div>
+                    <h3 className="text-lg font-semibold text-stone-800">Video Studio (Beta)</h3>
+                    <p className="text-sm text-stone-500">Transform static designs into cinematic video mockups</p>
+                </div>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+                {VIDEO_PRESETS.map((preset) => (
+                    <button
+                        key={preset.id}
+                        onClick={() => setSelectedPreset(preset.id)}
+                        className={`p-4 rounded-xl border text-left transition-all ${selectedPreset === preset.id
+                            ? 'border-purple-500 bg-purple-50 shadow-md ring-1 ring-purple-200'
+                            : 'border-stone-200 hover:border-purple-300 hover:bg-white'
+                            }`}
+                    >
+                        <div className="text-2xl mb-2">{preset.icon}</div>
+                        <div className="font-medium text-stone-800 mb-1">{preset.label}</div>
+                        <div className="text-xs text-stone-500">{preset.description}</div>
+                    </button>
+                ))}
+            </div>
+
+            {error && (
+                <div className="mb-4 p-3 bg-red-50 text-red-600 rounded-lg text-sm">
+                    {error}
+                </div>
+            )}
+
+            <div className="flex justify-end">
+                <button
+                    onClick={handleGenerate}
+                    disabled={generating || !selectedPreset}
+                    className={`flex items-center gap-2 px-6 py-2.5 rounded-lg font-medium transition-all ${generating || !selectedPreset
+                        ? 'bg-stone-200 text-stone-400 cursor-not-allowed'
+                        : 'bg-gradient-to-r from-purple-600 to-indigo-600 text-white hover:shadow-lg hover:scale-[1.02]'
+                        }`}
+                >
+                    {generating ? (
+                        <>
+                            <Loader2 className="w-4 h-4 animate-spin" />
+                            Renderizing...
+                        </>
+                    ) : (
+                        <>
+                            <Play className="w-4 h-4" />
+                            Generate Video
+                        </>
+                    )}
+                </button>
+            </div>
+        </div>
+    );
+};

components/ZoomableImage.tsx

@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import { GlassMagnifier } from 'react-image-magnifiers';
+
+interface ZoomableImageProps {
+    src: string;
+    alt: string;
+    className?: string;
+    magnifierSize?: string;
+    zoomLevel?: number;
+    children?: React.ReactNode;
+    disabled?: boolean; // New prop to prevent zoom on click
+}
+
+export const ZoomableImage: React.FC<ZoomableImageProps> = ({
+    src,
+    alt,
+    className = "",
+    magnifierSize = "30%",
+    zoomLevel = 2.5,
+    children,
+    disabled = false
+}) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const toggleModal = (e: React.MouseEvent) => {
+        if (disabled) return; // Don't open if disabled
+        e.stopPropagation();
+        setIsOpen(!isOpen);
+    };
+
+    return (
+        <>
+            {/* Thumbnail trigger */}
+            <div
+                className={`cursor-zoom-in relative group ${className}`}
+                onClick={toggleModal}
+                title="Click to zoom"
+            >
+                <img
+                    src={src}
+                    alt={alt}
+                    className="w-full h-full object-cover" // Changed to object-cover to match Home usage expectation or passed className? Actually lets keep original but fix usage if needed. Wait, original was w-full h-auto object-contain. 
+                />
+                {children}
+                {!children && (
+                    <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100">
+                        <span className="bg-white/80 text-stone-900 p-2 rounded-full shadow-lg backdrop-blur-sm">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+                                <path strokeLinecap="round" strokeLinejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607ZM10.5 7.5v6m3-3h-6" />
+                            </svg>
+                        </span>
+                    </div>
+                )}
+            </div>
+
+            {/* Modal */}
+            {isOpen && (
+                <div
+                    className="fixed inset-0 z-[9999] bg-stone-900/95 backdrop-blur-md flex items-center justify-center p-8 animate-in fade-in duration-200"
+                    onClick={() => setIsOpen(false)}
+                >
+                    <div className="relative w-full h-full max-w-7xl flex items-center justify-center" onClick={(e) => e.stopPropagation()}>
+                        <button
+                            onClick={() => setIsOpen(false)}
+                            className="absolute -top-6 -right-6 md:top-0 md:-right-12 text-white/50 hover:text-white transition-colors p-2 z-50"
+                        >
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-8 h-8">
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+
+                        <div className="w-full h-full flex items-center justify-center rounded-lg overflow-hidden">
+                            <GlassMagnifier
+                                imageSrc={src}
+                                imageAlt={alt}
+                                magnifierSize={magnifierSize}
+                                magnifierBorderSize={2}
+                                magnifierBorderColor="rgba(255, 255, 255, 0.5)"
+                                square={false}
+                                allowOverflow={true}
+                                style={{
+                                    width: 'auto',
+                                    height: 'auto',
+                                    maxWidth: '100%',
+                                    maxHeight: '90vh',
+                                    display: 'block'
+                                }}
+                                imageStyle={{
+                                    width: 'auto',
+                                    height: 'auto',
+                                    maxWidth: '100%',
+                                    maxHeight: '90vh',
+                                    objectFit: 'contain'
+                                }}
+                            />
+                        </div>
+
+                        <div className="absolute bottom-4 left-1/2 -translate-x-1/2 bg-black/50 text-white px-4 py-2 rounded-full text-xs font-medium backdrop-blur-md pointer-events-none z-50">
+                            Hover to magnify • Click outside to close
+                        </div>
+                    </div>
+                </div>
+            )}
+        </>
+    );
+};