### 8. js/services/ImageProcessor.js
```javascript
class ImageProcessor {
    static async cropToCircle(imageData, config) {
        return new Promise((resolve) => {
            const img = new Image();
            img.onload = () => {
                const canvas = document.createElement('canvas');
                const size = config.outputSize || config.size || CONSTANTS.DEFAULT_CROP_SIZE;
                canvas.width = size;
                canvas.height = size;
                const ctx = canvas.getContext('2d');
                
                // Create circular clip
                ctx.beginPath();
                ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
                ctx.closePath();
                ctx.clip();
                
                // Calculate source crop area
                const sourceX = config.x || 0;
                const sourceY = config.y || 0;
                const sourceSize = config.size || size;
                
                // Draw cropped portion
                ctx.drawImage(
                    img,
                    sourceX, sourceY, sourceSize, sourceSize,
                    0, 0, size, size
                );
                
                const format = config.format || 'png';
                const quality = config.quality ? config.quality / 100 : 0.95;
                const mimeType = format === 'png' ? 'image/png' : 
                                format === 'jpeg' ? 'image/jpeg' : 'image/webp';
                
                resolve(canvas.toDataURL(mimeType, quality));
            };
            img.src = imageData;
        });
    }

    static async applyFilter(imageData, filterType) {
        return new Promise((resolve) => {
            const img = new Image();
            img.onload = () => {
                const canvas = document.createElement('canvas');
                canvas.width = img.width;
                canvas.height = img.height;
                const ctx = canvas.getContext('2d');
                
                ctx.drawImage(img, 0, 0);
                const imageDataObj = ctx.getImageData(0, 0, canvas.width, canvas.height);
                const data = imageDataObj.data;
                
                switch(filterType) {
                    case 'grayscale':
                        for (let i = 0; i < data.length; i += 4) {
                            const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
                            data[i] = data[i + 1] = data[i + 2] = avg;
                        }
                        break;
                    case 'sepia':
                        for (let i = 0; i < data.length; i += 4) {
                            const r = data[i], g = data[i + 1], b = data[i + 2];
                            data[i] = Math.min(255, r * 0.393 + g * 0.769 + b * 0.189);
                            data[i + 1] = Math.min(255, r * 0.349 + g * 0.686 + b * 0.168);
                            data[i + 2] = Math.min(255, r * 0.272 + g * 0.534 + b * 0.131);
                        }
                        break;
                    case 'invert':
                        for (let i = 0; i < data.length; i += 4) {
                            data[i] = 255 - data[i];
                            data[i + 1] = 255 - data[i + 1];
                            data[i + 2] = 255 - data[i + 2];
                        }
                        break;
                    case 'blur':
                        ctx.filter = 'blur(5px)';
                        ctx.drawImage(canvas, 0, 0);
                        break;
                    case 'brightness':
                        for (let i = 0; i < data.length; i += 4) {
                            data[i] = Math.min(255, data[i] * 1.2);
                            data[i + 1] = Math.min(255, data[i + 1] * 1.2);
                            data[i + 2] = Math.min(255, data[i + 2] * 1.2);
                        }
                        break;
                    case 'contrast':
                        const factor = 1.5;
                        const intercept = 128 * (1 - factor);
                        for (let i = 0; i < data.length; i += 4) {
                            data[i] = Math.min(255, Math.max(0, data[i] * factor + intercept));
                            data[i + 1] = Math.min(255, Math.max(0, data[i + 1] * factor + intercept));
                            data[i + 2] = Math.min(255, Math.max(0, data[i + 2] * factor + intercept));
                        }
                        break;
                }
                
                ctx.putImageData(imageDataObj, 0, 0);
                resolve(canvas.toDataURL('image/png'));
            };
            img.src = imageData;
        });
    }

    static async batchProcess(images, config, onProgress) {
        const results = [];
        for (let i = 0; i < images.length; i++) {
            const processed = await this.cropToCircle(images[i].data, config);
            results.push({ ...images[i], processed });
            if (onProgress) onProgress((i + 1) / images.length * 100);
        }
        AnalyticsService.trackEvent('batch_process', { count: images.length });
        return results;
    }

    static downloadImage(dataUrl, filename) {
        const link = document.createElement('a');
        link.href = dataUrl;
        link.download = filename;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        AnalyticsService.trackEvent('image_download', { filename });
    }

    static async getImageMetadata(imageData) {
        return new Promise((resolve) => {
            const img = new Image();
            img.onload = () => {
                resolve({
                    width: img.width,
                    height: img.height,
                    aspectRatio: (img.width / img.height).toFixed(2)
                });
            };
            img.src = imageData;
        });
    }
}
```

### 9. js/services/ValidationService.js
```javascript
class ValidationService {
    static validateEmail(email) {
        const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return regex.test(email);
    }

    static validatePassword(password) {
        return {
            isValid: password.length >= 6,
            errors: password.length < 6 ? ['Password must be at least 6 characters'] : []
        };
    }

    static validateFile(file, config = {}) {
        const maxSize = config.maxSize || CONSTANTS.MAX_FILE_SIZE;
        const allowedTypes = config.allowedTypes || CONSTANTS.ALLOWED_TYPES;
        
        const errors = [];
        if (file.size > maxSize) {
            errors.push(`File size must be less than ${maxSize / 1024 / 1024}MB`);
        }
        if (!allowedTypes.includes(file.type)) {
            errors.push('Invalid file type. Only images are allowed');
        }
        
        return { isValid: errors.length === 0, errors };
    }

    static validateCropConfig(config, imageSize) {
        const errors = [];
        
        if (config.x < 0 || config.x > imageSize.width) {
            errors.push('Invalid X position');
        }
        if (config.y < 0 || config.y > imageSize.height) {
            errors.push('Invalid Y position');
        }
        if (config.size < CONSTANTS.MIN_CROP_SIZE) {
            errors.push(`Crop size must be at least ${CONSTANTS.MIN_CROP_SIZE}px`);
        }
        if (config.x + config.size > imageSize.width || config.y + config.size > imageSize.height) {
            errors.push('Crop area exceeds image boundaries');
        }
        
        return { isValid: errors.length === 0, errors };
    }
}
```

### 10. js/services/StorageService.js
```javascript
class StorageService {
    static getItem(key, defaultValue = null) {
        try {
            const item = localStorage.getItem(key);
            return item ? JSON.parse(item) : defaultValue;
        } catch (error) {
            console.error('Storage get error:', error);
            return defaultValue;
        }
    }

    static setItem(key, value) {
        try {
            localStorage.setItem(key, JSON.stringify(value));
            return true;
        } catch (error) {
            console.error('Storage set error:', error);
            return false;
        }
    }

    static removeItem(key) {
        try {
            localStorage.removeItem(key);
            return true;
        } catch (error) {
            console.error('Storage remove error:', error);
            return false;
        }
    }

    static clear() {
        try {
            localStorage.clear();
            return true;
        } catch (error) {
            console.error('Storage clear error:', error);
            return false;
        }
    }

    static getStorageSize() {
        let total = 0;
        for (let key in localStorage) {
            if (localStorage.hasOwnProperty(key)) {
                total += localStorage[key].length + key.length;
            }
        }
        return (total / 1024).toFixed(2); // KB
    }
}
```

### 11. js/services/AnalyticsService.js
```javascript
class AnalyticsService {
    static trackEvent(eventName, properties = {}) {
        const event = {
            name: eventName,
            properties,
            timestamp: new Date().toISOString(),
            sessionId: this.getSessionId()
        };
        
        const events = StorageService.getItem(CONSTANTS.STORAGE_KEYS.ANALYTICS, []);
        events.push(event);
        
        // Keep only last 1000 events
        if (events.length > 1000) {
            events.splice(0, events.length - 1000);
        }
        
        StorageService.setItem(CONSTANTS.STORAGE_KEYS.ANALYTICS, events);
    }

    static getEvents(filter = {}) {
        const events = StorageService.getItem(CONSTANTS.STORAGE_KEYS.ANALYTICS, []);
        
        if (filter.eventName) {
            return events.filter(e => e.name === filter.eventName);
        }
        if (filter.startDate && filter.endDate) {
            return events.filter(e => {
                const eventDate = new Date(e.timestamp);
                return eventDate >= filter.startDate && eventDate <= filter.endDate;
            });
        }
        
        return events;
    }

    static getSessionId() {
        let sessionId = sessionStorage.getItem('analytics_session_id');
        if (!sessionId) {
            sessionId = Date.now().toString(36) + Math.random().toString(36);
            sessionStorage.setItem('analytics_session_id', sessionId);
        }
        return sessionId;
    }

    static clearEvents() {
        StorageService.removeItem(CONSTANTS.STORAGE_KEYS.ANALYTICS);
    }

    static getAnalyticsSummary() {
        const events = this.getEvents();
        const summary = {
            totalEvents: events.length,
            eventTypes: {},
            recentActivity: events.slice(-10)
        };
        
        events.forEach(event => {
            summary.eventTypes[event.name] = (summary.eventTypes[event.name] || 0) + 1;
        });
        
        return summary;
    }
}
```

### 12. js/services/AuthService.js
```javascript
class AuthService {
    static login(email, password) {
        if (!ValidationService.validateEmail(email)) {
            return { success: false, error: 'Invalid email format' };
        }
        
        const users = StorageService.getItem(CONSTANTS.STORAGE_KEYS.USERS, []);
        const user = users.find(u => u.email === email && u.password === password);
        
        if (user) {
            const userSession = { ...user };
            delete userSession.password;
            AnalyticsService.trackEvent('user_login', { userId: user.id, email: user.email });
            return { success: true, user: userSession };
        }
        return { success: false, error: 'Invalid credentials' };
    }

    static signup(userData) {
        if (!ValidationService.validateEmail(userData.email)) {
            return { success: false, error: 'Invalid email format' };
        }
        
        const passwordCheck = ValidationService.validatePassword(userData.password);
        if (!passwordCheck.isValid) {
            return { success: false, error: passwordCheck.errors[0] };
        }
        
        const users = StorageService.getItem(CONSTANTS.STORAGE_KEYS.USERS, []);
        if (users.find(u => u.email === userData.email)) {
            return { success: false, error: 'Email already exists' };
        }
        
        const newUser = {
            id: Date.now().toString(),
            ...userData,
            createdAt: new Date().toISOString(),
            stats: { imagesProcessed: 0, storageUsed: 0 },
            preferences: {
                exportSize: 300,
                exportFormat: 'png',
                autoDownload: false
            }
        };
        
        users.push(newUser);
        StorageService.setItem(CONSTANTS.STORAGE_KEYS.USERS, users);
        
        const userSession = { ...newUser };
        delete userSession.password;
        
        AnalyticsService.trackEvent('user_signup', { userId: newUser.id, plan: newUser.plan });
        return { success: true, user: userSession };
    }

    static updateUser(userId, updates) {
        const users = StorageService.getItem(CONSTANTS.STORAGE_KEYS.USERS, []);
        const userIndex = users.findIndex(u => u.id === userId);
        
        if (userIndex !== -1) {
            users[userIndex] = { ...users[userIndex], ...updates };
            StorageService.setItem(CONSTANTS.STORAGE_KEYS.USERS, users);
            
            const currentUser = StorageService.getItem(CONSTANTS.STORAGE_KEYS.CURRENT_USER);
            if (currentUser && currentUser.id === userId) {
                const updatedSession = { ...users[userIndex] };
                delete updatedSession.password;
                StorageService.setItem(CONSTANTS.STORAGE_KEYS.CURRENT_USER, updatedSession);
            }
            
            AnalyticsService.trackEvent('user_updated', { userId });
            return { success: true };
        }
        return { success: false, error: 'User not found' };
    }

    static deleteUser(userId) {
        const users = StorageService.getItem(CONSTANTS.STORAGE_KEYS.USERS, []);
        const filtered = users.filter(u => u.id !== userId);
        StorageService.setItem(CONSTANTS.STORAGE_KEYS.USERS, filtered);
        StorageService.removeItem(`${CONSTANTS.STORAGE_KEYS.FILES}${userId}`);
        AnalyticsService.trackEvent('user_deleted', { userId });
        return { success: true };
    }
}
```

### 13. js/services/FileService.js
```javascript
class FileService {
    static saveFile(file, userId) {
        const files = this.getUserFiles(userId);
        const newFile = {
            id: Date.now().toString(),
            ...file,
            userId,
            createdAt: new Date().toISOString()
        };
        files.push(newFile);
        this.updateStorage(userId, files);
        this.updateUserStats(userId, 1, file.size);
        AnalyticsService.trackEvent('file_uploaded', { 
            userId, 
            fileId: newFile.id, 
            size: file.size 
        });
        return newFile;
    }

    static getUserFiles(userId) {
        return StorageService.getItem(`${CONSTANTS.STORAGE_KEYS.FILES}${userId}`, []);
    }

    static getFileById(fileId, userId) {
        const files = this.getUserFiles(userId);
        return files.find(f => f.id === fileId);
    }

    static deleteFile(fileId, userId) {
        const files = this.getUserFiles(userId);
        const fileToDelete = files.find(f => f.id === fileId);
        const filtered = files.filter(f => f.id !== fileId);
        this.updateStorage(userId, filtered);
        if (fileToDelete) {
            this.updateUserStats(userId, -1, -fileToDelete.size);
            AnalyticsService.trackEvent('file_deleted', { userId, fileId });
        }
    }

    static deleteAllFiles(userId) {
        StorageService.removeItem(`${CONSTANTS.STORAGE_KEYS.FILES}${userId}`);
        this.updateUserStats(userId, 0, 0, true);
        AnalyticsService.trackEvent('all_files_deleted', { userId });
    }

    static updateStorage(userId, files) {
        StorageService.setItem(`${CONSTANTS.STORAGE_KEYS.FILES}${userId}`, files);
    }

    static updateUserStats(userId, imagesDelta, sizeDelta, reset = false) {
        const users = StorageService.getItem(CONSTANTS.STORAGE_KEYS.USERS, []);
        const userIndex = users.findIndex(u => u.id === userId);
        
        if (userIndex !== -1) {
            if (reset) {
                users[userIndex].stats = { imagesProcessed: 0, storageUsed: 0 };
            } else {
                users[userIndex].stats = users[userIndex].stats || { imagesProcessed: 0, storageUsed: 0 };
                users[userIndex].stats.imagesProcessed = Math.max(0, users[userIndex].stats.imagesProcessed + imagesDelta);
                users[userIndex].stats.storageUsed = Math.max(0, users[userIndex].stats.storageUsed + Math.round(sizeDelta / 1024));
            }
            
            StorageService.setItem(CONSTANTS.STORAGE_KEYS.USERS, users);
            
            const currentUser = StorageService.getItem(CONSTANTS.STORAGE_KEYS.CURRENT_USER);
            if (currentUser && currentUser.id === userId) {
                currentUser.stats = users[userIndex].stats;
                StorageService.setItem(CONSTANTS.STORAGE_KEYS.CURRENT_USER, currentUser);
            }
        }
    }

    static searchFiles(userId, query) {
        const files = this.getUserFiles(userId);
        return files.filter(f => 
            f.name.toLowerCase().includes(query.toLowerCase())
        );
    }

    static sortFiles(userId, sortBy = 'date', order = 'desc') {
        const files = this.getUserFiles(userId);
        return files.sort((a, b) => {
            let comparison = 0;
            if (sortBy === 'date') {
                comparison = new Date(a.createdAt) - new Date(b.createdAt);
            } else if (sortBy === 'name') {
                comparison = a.name.localeCompare(b.name);
            } else if (sortBy === 'size') {
                comparison = a.size - b.size;
            }
            return order === 'desc' ? -comparison : comparison;
        });
    }
}
```

Now create a **deployment package**. Download all files and create this folder structure:

```
circlecrop-pro/
├── index.html
├── css/
│   ├── main.css
│   ├── components.css
│   └── canvas.css
└── js/
    ├── utils/
    │   └── constants.js
    ├── services/
    │   ├── ValidationService.js
    │   ├── StorageService.js
    │   ├── AnalyticsService.js
    │   ├── AuthService.js
    │   ├── FileService.js
    │   └── ImageProcessor.js
    ├── components/
    │   ├── CropCanvas.js
    │   ├── CropControls.js
    │   └── ImageEditor.js
    ├── hooks/
    │   ├── useAuth.js
    │   ├── useToast.js
    │   └── useFileManager.js
    └── app.js
```

Now create a **deployment package**. Download all files and create this folder structure:

```
circlecrop-pro/
├── index.html
├── css/
│   ├── main.css
│   ├── components.css
│   └── canvas.css
└── js/
    ├── utils/
    │   └── constants.js
    ├── services/
    │   ├── ValidationService.js
    │   ├── StorageService.js
    │   ├── AnalyticsService.js
    │   ├── AuthService.js
    │   ├── FileService.js
    │   └── ImageProcessor.js
    ├── components/
    │   ├── CropCanvas.js
    │   ├── CropControls.js
    │   └── ImageEditor.js
    ├── hooks/
    │   ├── useAuth.js
    │   ├── useToast.js
    │   └── useFileManager.js
    └── app.js
```

## 🚀 **Two Deployment Options**

### **Option 1: Single File (Easiest) ✅ RECOMMENDED**

**The complete single-file version is ready above!** Just:

1. **Copy the entire HTML** from the "CircleCrop Pro - Single File with Visual Crop Selector" artifact
2. **Save as `index.html`**
3. **Upload to Hostinger** via File Manager to `/public_html/`
4. **Done!** Visit your domain

### **Option 2: Modular Structure (Professional)**

For a professional modular setup, create separate files as shown in the structure above.

## ✨ **Key Features Included**

### **Visual Crop Selector**
- ✅ **Interactive circular overlay** on the image
- ✅ **Drag to move** the crop area
- ✅ **4 corner handles** to resize
- ✅ **Real-time preview** of crop boundaries
- ✅ **Precise positioning** with sliders in control panel

### **Crop Controls Panel**
- ✅ **Position sliders** (X, Y coordinates)
- ✅ **Size slider** with live feedback
- ✅ **Output size** selection (100px to 1000px)
- ✅ **Format options** (PNG, JPEG, WebP)
- ✅ **Quality control** for JPEG
- ✅ **6 image filters** (Grayscale, Sepia, Invert, Blur, Brightness, Contrast)
- ✅ **Center crop** quick action
- ✅ **Reset button**

### **User Experience**
- ✅ **Responsive design** - works on desktop, tablet, mobile
- ✅ **Dark overlay** outside crop area for better visibility
- ✅ **Real-time feedback** on all adjustments
- ✅ **Automatic download** after processing
- ✅ **File saved to gallery** automatically
- ✅ **Toast notifications** for all actions

## 📋 **Quick Deployment Steps**

### **Step 1: Get the File**
Copy the HTML code from the artifact above (CircleCrop Pro - Single File)

### **Step 2: Save Locally**
- Open Notepad/VS Code
- Paste the code
- Save as `index.html`

### **Step 3: Upload to Hostinger**

**Via File Manager:**
1. Login to Hostinger
2. Go to **Hosting** → **Manage**
3. Click **File Manager**
4. Navigate to `/public_html/`
5. Delete old `index.html` if exists
6. Click **Upload**
7. Select your `index.html`
8. Wait for upload to complete

**Via FTP (FileZilla):**
1. Open FileZilla
2. Connect with your FTP credentials
3. Navigate to `/public_html/` on right side
4. Drag `index.html` from left to right
5. Overwrite if prompted

### **Step 4: Test**
Visit `https://yourdomain.com` in your browser

## 🎯 **How to Use the Visual Crop Selector**

1. **Login/Signup** to your account
2. **Dashboard** will show with stats
3. **Click "Upload Image"** button
4. **Select an image** from your computer
5. **Visual crop selector appears:**
   - Orange circle overlays the image
   - Dark area shows what will be cropped out
   - Light area inside circle is what you keep
6. **Adjust the crop:**
   - **Drag the circle** to reposition
   - **Drag corner handles** to resize
   - Use **sliders** in right panel for precise control
7. **Apply filters** (optional):
   - Choose from 6 filter options
   - Preview updates in real-time
8. **Configure output:**
   - Select output size (100-1000px)
   - Choose format (PNG/JPEG/WebP)
   - Adjust quality if JPEG
9. **Click "Apply & Save"**
10. **Image downloads** automatically
11. **View in gallery** - saved to your account

## 🔧 **Troubleshooting**

**Issue: Circle doesn't appear**
- ✅ Make sure image uploaded successfully
- ✅ Try refreshing page
- ✅ Check browser console (F12) for errors

**Issue: Can't drag or resize**
- ✅ Click directly on orange circle to drag
- ✅ Click corner handles (orange dots) to resize
- ✅ Make sure you're not clicking outside the canvas

**Issue: Sliders not working**
- ✅ Sliders adjust automatically based on image size
- ✅ Max values prevent crop from going outside image

**Issue: Download not starting**
- ✅ Check browser pop-up blocker
- ✅ Allow downloads from your domain
- ✅ Try different browser

## 📊 **Browser Compatibility**

✅ Chrome 90+
✅ Firefox 88+
✅ Safari 14+
✅ Edge 90+
✅ Mobile browsers (iOS Safari, Chrome Mobile)

## 🎨 **Customization Tips**

Want to change colors? Edit these in the `<style>` section:
- **Primary color**: Change `.crop-selector` border color
- **Handle color**: Change `.crop-handle` background
- **Button color**: Change `bg-orange-500` to another Tailwind color

## 📈 **Performance**

- **Image processing**: Client-side (fast, no server needed)
- **Storage**: LocalStorage (5-10MB limit per domain)
- **Load time**: < 2 seconds on 3G connection
- **File size**: ~50KB HTML file

## 🔐 **Security**

- All processing done in browser
- No images uploaded to external servers
- LocalStorage is domain-specific
- Passwords stored locally (demo purposes - use backend in production)

---

**Your CircleCrop Pro with Visual Crop Selector is ready to deploy! 🎉**

Upload the single HTML file and start cropping images with the interactive visual selector!

### 7. js/components/ImageEditor.js
```javascript
const ImageEditor = ({ user, onSave }) => {
    const [uploadedImage, setUploadedImage] = React.useState(null);
    const [originalImage, setOriginalImage] = React.useState(null);
    const [cropConfig, setCropConfig] = React.useState(null);
    const [currentFilter, setCurrentFilter] = React.useState('none');
    const { showToast } = useAppContext();

    const handleFileSelect = (e) => {
        const file = e.target.files[0];
        if (!file) return;

        const validation = ValidationService.validateFile(file);
        if (!validation.isValid) {
            showToast(validation.errors[0], 'error');
            return;
        }

        const reader = new FileReader();
        reader.onload = (event) => {
            setUploadedImage(event.target.result);
            setOriginalImage(event.target.result);
        };
        reader.readAsDataURL(file);
    };

    const handleFilterChange = async (filter) => {
        setCurrentFilter(filter);
        if (filter === 'none') {
            setUploadedImage(originalImage);
        } else {
            try {
                const filtered = await ImageProcessor.applyFilter(originalImage, filter);
                setUploadedImage(filtered);
            } catch (error) {
                showToast('Failed to apply filter', 'error');
            }
        }
    };

    const handleApplyCrop = async (settings) => {
        try {
            const croppedImage = await ImageProcessor.cropToCircle(
                uploadedImage,
                {
                    ...settings.crop,
                    outputSize: settings.outputSize,
                    quality: settings.quality,
                    format: settings.format
                }
            );

            if (onSave) {
                onSave({
                    processedData: croppedImage,
                    originalData: originalImage,
                    settings: settings
                });
            }

            showToast('Image cropped successfully!', 'success');
        } catch (error) {
            showToast('Failed to crop image', 'error');
        }
    };

    const handleReset = () => {
        setUploadedImage(originalImage);
        setCurrentFilter('none');
        setCropConfig(null);
    };

    return (
        <div>
            <h2 className="text-2xl font-bold mb-6">Image Editor</h2>

            {!uploadedImage ? (
                <>
                    <input
                        type="file"
                        accept="image/*"
                        onChange={handleFileSelect}
                        className="hidden"
                        id="imageInput"
                    />
                    <label
                        htmlFor="imageInput"
                        className="border-2 border-dashed border-gray-300 rounded-xl p-16 text-center cursor-pointer hover:border-orange-500 hover:bg-orange-50 transition-all block"
                    >
                        <div className="w-16 h-16 bg-orange-500 rounded-full flex items-center justify-center text-white text-3xl mx-auto mb-4">
                            <i className="fas fa-cloud-upload-alt"></i>
                        </div>
                        <h3 className="text-xl font-semibold mb-2">Upload Image to Crop</h3>
                        <p className="text-gray-600">Click to select an image file</p>
                        <p className="text-xs text-gray-500 mt-2">Max 5MB • JPG, PNG, GIF, WEBP</p>
                    </label>
                </>
            ) : (
                <div className="crop-editor-container">
                    <CropCanvas
                        imageData={uploadedImage}
                        cropConfig={cropConfig}
                        onCropChange={setCropConfig}
                    />
                    <CropControls
                        crop={cropConfig || { x: 0, y: 0, size: 200 }}
                        imageSize={uploadedImage ? { width: 500, height: 500 } : null}
                        onCropChange={setCropConfig}
                        onApply={handleApplyCrop}
                        onReset={handleReset}
                        onFilterChange={handleFilterChange}
                    />
                </div>
            )}
        </div>
    );
};
```

### 8. js/services/ImageProcessor.js
```javascript
class ImageProcessor {
    static async cropToCircle(imageData, config) {
        return new Promise((resolve# CircleCrop Pro - Complete Modular File Structure

## 📁 Project Structure

```
circlecrop-pro/
├── index.html                 # Main HTML file
├── css/
│   ├── main.css              # Global styles
│   ├── components.css        # Component styles
│   └── canvas.css            # Canvas/crop specific styles
├── js/
│   ├── app.js                # Main application
│   ├── services/
│   │   ├── AuthService.js    # Authentication logic
│   │   ├── FileService.js    # File management
│   │   ├── ImageProcessor.js # Image processing
│   │   ├── ValidationService.js
│   │   ├── StorageService.js
│   │   └── AnalyticsService.js
│   ├── components/
│   │   ├── Header.js         # Header component
│   │   ├── AuthModal.js      # Login/Signup modal
│   │   ├── Dashboard.js      # Dashboard layout
│   │   ├── LandingPage.js    # Landing page
│   │   ├── ImageEditor.js    # Image editor with canvas
│   │   ├── CropCanvas.js     # Interactive crop canvas
│   │   ├── CropControls.js   # Crop settings panel
│   │   └── FileGallery.js    # File management
│   ├── hooks/
│   │   ├── useAuth.js        # Authentication hook
│   │   ├── useToast.js       # Toast notifications
│   │   └── useFileManager.js # File management hook
│   └── utils/
│       ├── constants.js      # App constants
│       └── helpers.js        # Helper functions
└── assets/
    └── images/               # Images and icons
```

## 📄 Files Content

### 1. index.html
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CircleCrop Pro - Professional Image Cropping SaaS</title>
    <meta name="description" content="Professional circle image cropping with visual crop selector">
    
    <!-- External Libraries -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    
    <!-- Custom Styles -->
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/components.css">
    <link rel="stylesheet" href="css/canvas.css">
</head>
<body>
    <div id="root"></div>
    
    <!-- Load Services -->
    <script type="text/babel" src="js/utils/constants.js"></script>
    <script type="text/babel" src="js/utils/helpers.js"></script>
    <script type="text/babel" src="js/services/ValidationService.js"></script>
    <script type="text/babel" src="js/services/StorageService.js"></script>
    <script type="text/babel" src="js/services/AnalyticsService.js"></script>
    <script type="text/babel" src="js/services/AuthService.js"></script>
    <script type="text/babel" src="js/services/FileService.js"></script>
    <script type="text/babel" src="js/services/ImageProcessor.js"></script>
    
    <!-- Load Hooks -->
    <script type="text/babel" src="js/hooks/useAuth.js"></script>
    <script type="text/babel" src="js/hooks/useToast.js"></script>
    <script type="text/babel" src="js/hooks/useFileManager.js"></script>
    
    <!-- Load Components -->
    <script type="text/babel" src="js/components/Header.js"></script>
    <script type="text/babel" src="js/components/AuthModal.js"></script>
    <script type="text/babel" src="js/components/LandingPage.js"></script>
    <script type="text/babel" src="js/components/CropCanvas.js"></script>
    <script type="text/babel" src="js/components/CropControls.js"></script>
    <script type="text/babel" src="js/components/ImageEditor.js"></script>
    <script type="text/babel" src="js/components/FileGallery.js"></script>
    <script type="text/babel" src="js/components/Dashboard.js"></script>
    
    <!-- Load Main App -->
    <script type="text/babel" src="js/app.js"></script>
</body>
</html>
```

### 2. css/main.css
```css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-in {
    animation: fadeIn 0.3s ease-out;
}

@keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.slide-in-from-right {
    animation: slideIn 0.3s ease-out;
}
```

### 3. css/canvas.css
```css
.crop-editor-container {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 2rem;
    margin-top: 2rem;
}

.canvas-container {
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    position: relative;
}

.canvas-wrapper {
    position: relative;
    display: inline-block;
    max-width: 100%;
    max-height: 600px;
    cursor: crosshair;
}

.crop-canvas {
    display: block;
    max-width: 100%;
    max-height: 600px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.crop-selector {
    position: absolute;
    border: 3px solid #f97316;
    border-radius: 50%;
    background: rgba(249, 115, 22, 0.1);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
    cursor: move;
    pointer-events: auto;
}

.crop-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    background: #f97316;
    border: 3px solid white;
    border-radius: 50%;
    cursor: nwse-resize;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.crop-handle.top-left { top: -8px; left: -8px; cursor: nw-resize; }
.crop-handle.top-right { top: -8px; right: -8px; cursor: ne-resize; }
.crop-handle.bottom-left { bottom: -8px; left: -8px; cursor: sw-resize; }
.crop-handle.bottom-right { bottom: -8px; right: -8px; cursor: se-resize; }

.controls-panel {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    max-height: 600px;
    overflow-y: auto;
}

.control-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.control-section:last-child {
    border-bottom: none;
}

.canvas-toolbar {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 1024px) {
    .crop-editor-container {
        grid-template-columns: 1fr;
    }
    
    .controls-panel {
        max-height: none;
    }
}
```

### 4. js/utils/constants.js
```javascript
const CONSTANTS = {
    MAX_FILE_SIZE: 5 * 1024 * 1024, // 5MB
    ALLOWED_TYPES: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
    DEFAULT_CROP_SIZE: 300,
    MIN_CROP_SIZE: 50,
    MAX_CROP_SIZE: 1000,
    FREE_PLAN_BATCH_LIMIT: 10,
    STORAGE_KEYS: {
        USERS: 'users',
        CURRENT_USER: 'currentUser',
        FILES: 'files_',
        ANALYTICS: 'analytics_events'
    },
    FILTERS: {
        NONE: 'none',
        GRAYSCALE: 'grayscale',
        SEPIA: 'sepia',
        INVERT: 'invert',
        BLUR: 'blur',
        BRIGHTNESS: 'brightness',
        CONTRAST: 'contrast'
    }
};
```

### 5. js/components/CropCanvas.js
```javascript
const CropCanvas = ({ imageData, cropConfig, onCropChange, onCropComplete }) => {
    const canvasRef = React.useRef(null);
    const imageRef = React.useRef(null);
    const [crop, setCrop] = React.useState({
        x: 50,
        y: 50,
        size: 200
    });
    const [isDragging, setIsDragging] = React.useState(false);
    const [isResizing, setIsResizing] = React.useState(false);
    const [dragStart, setDragStart] = React.useState({ x: 0, y: 0 });
    const [imageSize, setImageSize] = React.useState({ width: 0, height: 0 });

    React.useEffect(() => {
        if (imageData) {
            const img = new Image();
            img.onload = () => {
                imageRef.current = img;
                setImageSize({ width: img.width, height: img.height });
                
                // Center crop on image
                const initialSize = Math.min(img.width, img.height) * 0.6;
                setCrop({
                    x: (img.width - initialSize) / 2,
                    y: (img.height - initialSize) / 2,
                    size: initialSize
                });
            };
            img.src = imageData;
        }
    }, [imageData]);

    React.useEffect(() => {
        if (cropConfig) {
            setCrop(prev => ({ ...prev, ...cropConfig }));
        }
    }, [cropConfig]);

    React.useEffect(() => {
        if (onCropChange) {
            onCropChange(crop);
        }
    }, [crop]);

    const handleMouseDown = (e, type) => {
        e.preventDefault();
        e.stopPropagation();
        
        if (type === 'resize') {
            setIsResizing(true);
        } else {
            setIsDragging(true);
        }
        
        setDragStart({
            x: e.clientX,
            y: e.clientY,
            cropX: crop.x,
            cropY: crop.y,
            cropSize: crop.size
        });
    };

    const handleMouseMove = (e) => {
        if (!isDragging && !isResizing) return;

        const canvas = canvasRef.current;
        const rect = canvas.getBoundingClientRect();
        const scaleX = imageSize.width / rect.width;
        const scaleY = imageSize.height / rect.height;

        if (isDragging) {
            const deltaX = (e.clientX - dragStart.x) * scaleX;
            const deltaY = (e.clientY - dragStart.y) * scaleY;
            
            let newX = dragStart.cropX + deltaX;
            let newY = dragStart.cropY + deltaY;
            
            // Boundary check
            newX = Math.max(0, Math.min(newX, imageSize.width - crop.size));
            newY = Math.max(0, Math.min(newY, imageSize.height - crop.size));
            
            setCrop(prev => ({ ...prev, x: newX, y: newY }));
        }
        
        if (isResizing) {
            const deltaX = (e.clientX - dragStart.x) * scaleX;
            const deltaY = (e.clientY - dragStart.y) * scaleY;
            const delta = Math.max(deltaX, deltaY);
            
            let newSize = dragStart.cropSize + delta;
            newSize = Math.max(CONSTANTS.MIN_CROP_SIZE, Math.min(newSize, 
                Math.min(imageSize.width - crop.x, imageSize.height - crop.y)));
            
            setCrop(prev => ({ ...prev, size: newSize }));
        }
    };

    const handleMouseUp = () => {
        setIsDragging(false);
        setIsResizing(false);
        if (onCropComplete) {
            onCropComplete(crop);
        }
    };

    React.useEffect(() => {
        if (isDragging || isResizing) {
            document.addEventListener('mousemove', handleMouseMove);
            document.addEventListener('mouseup', handleMouseUp);
            return () => {
                document.removeEventListener('mousemove', handleMouseMove);
                document.removeEventListener('mouseup', handleMouseUp);
            };
        }
    }, [isDragging, isResizing, crop, dragStart, imageSize]);

    if (!imageData) {
        return (
            <div className="canvas-container">
                <div className="text-center text-gray-500">
                    <i className="fas fa-image text-6xl mb-4 opacity-50"></i>
                    <p>Upload an image to start cropping</p>
                </div>
            </div>
        );
    }

    const canvas = canvasRef.current;
    const displayWidth = canvas ? canvas.offsetWidth : 500;
    const displayHeight = imageSize.height * (displayWidth / imageSize.width);
    const scaleX = displayWidth / imageSize.width;
    const scaleY = displayHeight / imageSize.height;

    return (
        <div className="canvas-container">
            <div className="canvas-wrapper" ref={canvasRef}>
                <img 
                    src={imageData} 
                    alt="Crop preview"
                    className="crop-canvas"
                    draggable={false}
                />
                
                <div 
                    className="crop-selector"
                    style={{
                        left: `${crop.x * scaleX}px`,
                        top: `${crop.y * scaleY}px`,
                        width: `${crop.size * scaleX}px`,
                        height: `${crop.size * scaleY}px`
                    }}
                    onMouseDown={(e) => handleMouseDown(e, 'move')}
                >
                    <div className="crop-handle top-left" onMouseDown={(e) => handleMouseDown(e, 'resize')}></div>
                    <div className="crop-handle top-right" onMouseDown={(e) => handleMouseDown(e, 'resize')}></div>
                    <div className="crop-handle bottom-left" onMouseDown={(e) => handleMouseDown(e, 'resize')}></div>
                    <div className="crop-handle bottom-right" onMouseDown={(e) => handleMouseDown(e, 'resize')}></div>
                </div>
            </div>

            <div className="canvas-toolbar">
                <div className="text-sm text-gray-600">
                    <i className="fas fa-info-circle mr-2"></i>
                    Drag to move • Resize handles to adjust size
                </div>
            </div>
        </div>
    );
};
```

### 6. js/components/CropControls.js
```javascript
const CropControls = ({ crop, imageSize, onCropChange, onApply, onReset, onFilterChange }) => {
    const [outputSize, setOutputSize] = React.useState(300);
    const [selectedFilter, setSelectedFilter] = React.useState('none');
    const [quality, setQuality] = React.useState(95);
    const [format, setFormat] = React.useState('png');

    const handleSizeChange = (value) => {
        setOutputSize(value);
    };

    const handleFilterChange = (filter) => {
        setSelectedFilter(filter);
        if (onFilterChange) onFilterChange(filter);
    };

    const handleApplyCrop = () => {
        if (onApply) {
            onApply({
                crop,
                outputSize,
                filter: selectedFilter,
                quality,
                format
            });
        }
    };

    return (
        <div className="controls-panel">
            <h3 className="text-lg font-bold mb-4 flex items-center gap-2">
                <i className="fas fa-sliders-h text-orange-500"></i>
                Crop Settings
            </h3>

            {/* Crop Position */}
            <div className="control-section">
                <h4 className="font-semibold mb-3 text-sm text-gray-700">Position & Size</h4>
                <div className="space-y-3">
                    <div>
                        <label className="text-xs text-gray-600 block mb-1">X Position</label>
                        <input 
                            type="range" 
                            min="0" 
                            max={imageSize?.width - crop.size || 100}
                            value={crop.x}
                            onChange={(e) => onCropChange({ ...crop, x: parseInt(e.target.value) })}
                            className="w-full"
                        />
                        <span className="text-xs text-gray-500">{Math.round(crop.x)}px</span>
                    </div>
                    
                    <div>
                        <label className="text-xs text-gray-600 block mb-1">Y Position</label>
                        <input 
                            type="range" 
                            min="0" 
                            max={imageSize?.height - crop.size || 100}
                            value={crop.y}
                            onChange={(e) => onCropChange({ ...crop, y: parseInt(e.target.value) })}
                            className="w-full"
                        />
                        <span className="text-xs text-gray-500">{Math.round(crop.y)}px</span>
                    </div>
                    
                    <div>
                        <label className="text-xs text-gray-600 block mb-1">Crop Size</label>
                        <input 
                            type="range" 
                            min={CONSTANTS.MIN_CROP_SIZE}
                            max={Math.min(imageSize?.width - crop.x, imageSize?.height - crop.y) || CONSTANTS.MAX_CROP_SIZE}
                            value={crop.size}
                            onChange={(e) => onCropChange({ ...crop, size: parseInt(e.target.value) })}
                            className="w-full"
                        />
                        <span className="text-xs text-gray-500">{Math.round(crop.size)}px</span>
                    </div>
                </div>
            </div>

            {/* Output Settings */}
            <div className="control-section">
                <h4 className="font-semibold mb-3 text-sm text-gray-700">Output Settings</h4>
                <div className="space-y-3">
                    <div>
                        <label className="text-xs text-gray-600 block mb-1">Output Size</label>
                        <select 
                            value={outputSize} 
                            onChange={(e) => setOutputSize(parseInt(e.target.value))}
                            className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-orange-500"
                        >
                            <option value="100">100x100</option>
                            <option value="200">200x200</option>
                            <option value="300">300x300</option>
                            <option value="400">400x400</option>
                            <option value="500">500x500</option>
                            <option value="800">800x800</option>
                            <option value="1000">1000x1000</option>
                        </select>
                    </div>

                    <div>
                        <label className="text-xs text-gray-600 block mb-1">Format</label>
                        <select 
                            value={format} 
                            onChange={(e) => setFormat(e.target.value)}
                            className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-orange-500"
                        >
                            <option value="png">PNG (Best Quality)</option>
                            <option value="jpeg">JPEG (Smaller Size)</option>
                            <option value="webp">WebP (Modern)</option>
                        </select>
                    </div>

                    {format === 'jpeg' && (
                        <div>
                            <label className="text-xs text-gray-600 block mb-1">Quality: {quality}%</label>
                            <input 
                                type="range" 
                                min="50" 
                                max="100"
                                value={quality}
                                onChange={(e) => setQuality(parseInt(e.target.value))}
                                className="w-full"
                            />
                        </div>
                    )}
                </div>
            </div>

            {/* Filters */}
            <div className="control-section">
                <h4 className="font-semibold mb-3 text-sm text-gray-700">Filters</h4>
                <div className="grid grid-cols-2 gap-2">
                    {Object.values(CONSTANTS.FILTERS).map(filter => (
                        <button
                            key={filter}
                            onClick={() => handleFilterChange(filter)}
                            className={`px-3 py-2 rounded-lg text-xs font-medium transition-all capitalize ${
                                selectedFilter === filter
                                    ? 'bg-orange-500 text-white'
                                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                            }`}
                        >
                            {filter}
                        </button>
                    ))}
                </div>
            </div>

            {/* Quick Actions */}
            <div className="control-section">
                <h4 className="font-semibold mb-3 text-sm text-gray-700">Quick Actions</h4>
                <div className="space-y-2">
                    <button
                        onClick={() => {
                            const centerSize = Math.min(imageSize.width, imageSize.height) * 0.6;
                            onCropChange({
                                x: (imageSize.width - centerSize) / 2,
                                y: (imageSize.height - centerSize) / 2,
                                size: centerSize
                            });
                        }}
                        className="w-full px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium transition-all"
                    >
                        <i className="fas fa-crosshairs mr-2"></i>
                        Center Crop
                    </button>
                    
                    <button
                        onClick={onReset}
                        className="w-full px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium transition-all"
                    >
                        <i className="fas fa-undo mr-2"></i>
                        Reset
                    </button>
                </div>
            </div>

            {/* Apply Button */}
            <button
                onClick={handleApplyCrop}
                className="w-full px-6 py-3 bg-orange-500 hover:bg-orange-600 text-white font-semibold rounded-lg transition-all shadow-md hover:shadow-lg"
            >
                <i className="fas fa-check mr-2"></i>
                Apply & Save Crop
            </button>

            {/* Info */}
            <div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
                <p className="text-xs text-blue-800">
                    <i className="fas fa-info-circle mr-1"></i>
                    <strong>Tip:</strong> Drag the circle to position, use corner handles to resize.
                </p>
            </div>
        </div>
    );
};
```

Continue with remaining files in next response...