SGC TECH AI // Contact Us

◆ Neural Interface Form ◆

✓ Message transmitted successfully! We'll respond within 2-4 hours.

✗ Transmission failed. Please try again or contact us directly at +971 56 390 5772

◆ Full Name *

◆ Email Address *

◆ Phone Number *

◆ Company Name

◆ Service Interest

◆ Company Size

◆ Message *

</div>

<div class="form-group">
                        <label class="form-label" for="urgency">◆ Request Priority</label>
                        <select id="urgency" name="urgency" class="form-select">
                            <option value="normal">Normal - Response within 4 hours</option>
                            <option value="high">High - Response within 2 hours</option>
                            <option value="urgent">Urgent - Immediate callback requested</option>
                        </select>
                    </div>

<button type="submit" class="form-submit" id="submitBtn">
                        ◆ Transmit Message ◆
                    </button>
                </form>
            </div>
        </section>

<section class="content-section">
            <h2 class="section-header">◆ Operating Hours ◆</h2>
            
            <div class="hours-section">
                <h3 class="hours-title">Standard Business Hours</h3>
                <div class="hours-item">
                    <span class="hours-day">Sunday - Thursday</span>
                    <span class="hours-time">9:00 AM - 6:00 PM GST</span>
                </div>
                <div class="hours-item">
                    <span class="hours-day">Friday</span>
                    <span class="hours-time">Closed</span>
                </div>
                <div class="hours-item">
                    <span class="hours-day">Saturday</span>
                    <span class="hours-time">By Appointment Only</span>
                </div>
                <div class="hours-item">
                    <span class="hours-day">Emergency Support</span>
                    <span class="hours-time">24/7 for Clients</span>
                </div>
            </div>
        </section>

<footer class="footer-terminal">
            <div class="footer-tagline">Intelligent Infrastructure. Instant Impact.</div>
            <div style="color: var(--ice-white); margin: 20px 0; opacity: 0.8;">
                Ready to begin your Odoo transformation journey?<br/>
                14 days to deployment. Years ahead of competitors.
            </div>
            <div class="copyright">
                © 2025 SGC TECH AI, a division of Scholarix Global Consultants. All rights reserved.<br/>
                Deep Ocean Brand Identity | Dubai, United Arab Emirates
            </div>
        </footer>
    </div>

// ============================================
        // FORM SUBMISSION HANDLER
        // ============================================
        async function handleSubmit(event) {
            event.preventDefault();
            
            const form = event.target;
            const formData = new FormData(form);
            
            const submitBtn = document.getElementById('submitBtn');
            const successMessage = document.getElementById('successMessage');
            const errorMessage = document.getElementById('errorMessage');
            const originalText = submitBtn.innerHTML;
            
            // Hide messages
            successMessage.classList.remove('show');
            errorMessage.classList.remove('show');
            
            // Show loading
            submitBtn.innerHTML = '◆ TRANSMITTING<span class="loading-spinner"></span>';
            submitBtn.disabled = true;
            
            try {
                const response = await fetch(form.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'Accept': 'application/json'
                    }
                });
                
                if (response.ok) {
                    // Success!
                    console.log('✅ Form submitted successfully');
                    successMessage.classList.add('show');
                    form.reset();
                    setTimeout(() => successMessage.classList.remove('show'), 7000);
                    
                    // Analytics tracking
                    if (typeof gtag !== 'undefined') {
                        gtag('event', 'form_submission', {
                            'event_category': 'Contact',
                            'event_label': 'SGC TECH AI Contact Form'
                        });
                    }
                    
                    if (typeof fbq !== 'undefined') {
                        fbq('track', 'Contact');
                    }
                    
                } else {
                    const data = await response.json();
                    if (data.errors) {
                        throw new Error(data.errors.map(error => error.message).join(', '));
                    } else {
                        throw new Error('Form submission failed');
                    }
                }
                
            } catch (error) {
                console.error('❌ Form submission error:', error);
                errorMessage.textContent = `✗ ${error.message || 'Transmission failed. Please try again or contact us directly at +971 56 390 5772'}`;
                errorMessage.classList.add('show');
                setTimeout(() => errorMessage.classList.remove('show'), 10000);
                
                // Backup to localStorage
                try {
                    const backup = JSON.parse(localStorage.getItem('sgctech_form_backups') || '[]');
                    backup.push({
                        data: Object.fromEntries(formData),
                        timestamp: new Date().toISOString(),
                        error: error.message
                    });
                    localStorage.setItem('sgctech_form_backups', JSON.stringify(backup));
                    console.log('💾 Backed up to localStorage');
                } catch (e) {
                    console.error('Failed to backup:', e);
                }
                
            } finally {
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
            }
        }

// ============================================
        // FORM VALIDATION
        // ============================================
        function validateForm() {
            const form = document.getElementById('contactForm');
            if (!form) return;
            
            const inputs = form.querySelectorAll('input[required], textarea[required]');
            inputs.forEach(input => {
                input.addEventListener('invalid', function(e) {
                    e.preventDefault();
                    this.style.borderColor = '#FF6B6B';
                });
                
                input.addEventListener('input', function() {
                    if (this.validity.valid) {
                        this.style.borderColor = 'var(--sky-blue)';
                    }
                });
            });
        }

// ============================================
        // INITIALIZE ON PAGE LOAD
        // ============================================
        document.addEventListener('DOMContentLoaded', function() {
            // Matrix effect
            createMatrixRain();
            setInterval(createMatrixRain, 10000);
            
            // Recreate matrix on window resize
            window.addEventListener('resize', createMatrixRain);
            
            // Form handler
            const form = document.getElementById('contactForm');
            if (form) {
                form.addEventListener('submit', handleSubmit);
            }
            
            // Validation
            validateForm();
            
            // Log info
            console.log('═══════════════════════════════════════════════════════');
            console.log('✅ SGC TECH AI Contact Form v3.7.2 Initialized');
            console.log('═══════════════════════════════════════════════════════');
            console.log('📧 Formspree: https://formspree.io/f/xgvpplbp');
            console.log('📧 Recipient: info@sgctech.ai');
            console.log('📝 Form ready to accept submissions');
            console.log('═══════════════════════════════════════════════════════');
        });
    </script>
    
    <script>
        // ============================================
        // UI/UX ENHANCEMENTS - INTERACTIVE FEATURES
        // ============================================
        
        // Scroll Progress Indicator
        function updateScrollProgress() {
            const scrollProgress = document.getElementById('scrollProgress');
            if (!scrollProgress) return;
            
            const winScroll = window.pageYOffset || document.documentElement.scrollTop;
            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            const scrolled = (winScroll / height) * 100;
            scrollProgress.style.width = scrolled + '%';
        }
        
        window.addEventListener('scroll', updateScrollProgress);
        window.addEventListener('resize', updateScrollProgress);
        
        // Form Validation Enhancement
        function enhanceFormValidation() {
            const formInputs = document.querySelectorAll('.form-input, .form-select, .form-textarea');
            
            formInputs.forEach(input => {
                // Real-time validation on input
                input.addEventListener('blur', function() {
                    validateFieldEnhanced(this);
                });
                
                input.addEventListener('input', function() {
                    if (this.classList.contains('invalid')) {
                        validateFieldEnhanced(this);
                    }
                });
            });
        }
        
        function validateFieldEnhanced(field) {
            const value = field.value.trim();
            const fieldType = field.type || field.tagName.toLowerCase();
            let isValid = true;
            
            // Required field check
            if (field.hasAttribute('required') && !value) {
                isValid = false;
            }
            
            // Email validation
            if (fieldType === 'email' && value) {
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                isValid = emailRegex.test(value);
            }
            
            // Phone validation
            if (field.name === 'phone' && value) {
                const phoneRegex = /^[\d\s\+\-]+$/;
                isValid = phoneRegex.test(value) && value.length >= 10;
            }
            
            // Apply visual feedback
            if (isValid) {
                field.classList.remove('invalid');
                field.classList.add('valid');
            } else {
                field.classList.remove('valid');
                field.classList.add('invalid');
            }
            
            return isValid;
        }
        
        // Animated Contact Cards
        function animateContactCards() {
            const contactCards = document.querySelectorAll('.contact-card');
            
            if (contactCards.length === 0) return;
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach((entry, index) => {
                    if (entry.isIntersecting) {
                        setTimeout(() => {
                            entry.target.style.opacity = '1';
                            entry.target.style.transform = 'translateY(0)';
                        }, index * 100); // 100ms stagger
                        observer.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.1 });
            
            contactCards.forEach(card => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(30px)';
                card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
                observer.observe(card);
            });
        }
        
        // 3D Card Tilt Effect (Desktop only)
        function add3DTiltEffect() {
            if (window.innerWidth < 768) return; // Skip on mobile
            
            const cards = document.querySelectorAll('.contact-card');
            
            cards.forEach(card => {
                card.addEventListener('mousemove', function(e) {
                    const rect = this.getBoundingClientRect();
                    const x = e.clientX - rect.left;
                    const y = e.clientY - rect.top;
                    
                    const centerX = rect.width / 2;
                    const centerY = rect.height / 2;
                    
                    const rotateX = (y - centerY) / 20;
                    const rotateY = (centerX - x) / 20;
                    
                    this.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.02)`;
                });
                
                card.addEventListener('mouseleave', function() {
                    this.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale(1)';
                });
            });
        }
        
        // Parallax Effect on Hero Section
        function addParallaxEffect() {
            if (window.innerWidth < 768) return; // Skip on mobile
            
            const hero = document.querySelector('.hero-section');
            if (!hero) return;
            
            window.addEventListener('scroll', function() {
                const scrolled = window.pageYOffset;
                const parallax = scrolled * 0.3;
                hero.style.transform = `translateY(${parallax}px)`;
            });
        }

// Initialize UI enhancements
        document.addEventListener('DOMContentLoaded', function() {
            updateScrollProgress();
            enhanceFormValidation();
            animateContactCards();
            add3DTiltEffect();
            addParallaxEffect();
            
            console.log('✨ UI/UX Enhancements Active');
        });
    </script>
</body>
</html>

CONTACT US

◆ Communication Channels ◆

◆ Direct Line ◆

◆ Email Gateway ◆

◆ WhatsApp Connect ◆

◆ Telegram Link ◆

◆ Neural Interface Form ◆