<?php require_once __DIR__ . '/src/forms/config.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact | Bryndex Designs - Get Your Web Development Project Started</title>
    <meta name="description" content="Ready to start your web development project? Contact Bryndex Designs for a free consultation. Fast response times and transparent pricing for all services.">
    <meta name="keywords" content="contact web developer, web development consultation, UK web design services, get website quote">
    <meta name="author" content="Bryndex Designs">

    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Marcellus&display=swap" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <link href="./src/output.css" rel="stylesheet">
</head>

<body class="bg-cream text-noir font-sans antialiased">
    <!-- Header Container -->
    <div id="header-container"></div>

    <!-- Contact Section -->
    <section class="pt-32 pb-16 md:pb-32 bg-cream">
        <div class="max-w-7xl mx-auto px-4 md:px-8">
            <div class="grid md:grid-cols-2 gap-8 md:gap-16">
                <!-- Contact Information -->
                <div data-aos="fade-up" data-aos-duration="800">
                    <h2 class="section-title text-noir mb-8">
                        <span class="section-subtitle text-umber/50">Ready to Work</span>
                        <span>With Someone Who Delivers?</span>
                    </h2>

                    <div class="space-y-8 mb-12">
                        <p class="text-noir/60 leading-relaxed">
                            I work with businesses who are serious about growth. If you want someone who shows up,
                            delivers on time, and sticks around after launch, start by filling out the form so I can understand your project.
                        </p>
                    </div>

                    <!-- Contact Methods -->
                    <div class="space-y-8">
                        <!-- Email Contact -->
                        <div class="group">
                            <div class="flex items-center mb-4">
                                <div class="w-12 h-px bg-umber mr-4 transition-all duration-500 group-hover:w-16"></div>
                                <div class="text-sm tracking-widest text-umber/70 transition-colors duration-500 group-hover:text-umber">
                                    PRIMARY CONTACT
                                </div>
                            </div>
                            <a href="mailto:contact@bryndexdesigns.com"
                                class="block text-2xl text-noir hover:text-umber transition-colors duration-500 font-serif mb-2">
                                contact@bryndexdesigns.com
                            </a>
                            <div class="text-sm text-noir/50">
                                Response within 24 hours • Start with the form
                            </div>
                        </div>
                        
                        <!-- Instagram Link -->
                        <div class="group">
                            <div class="flex items-center mb-4">
                                <div class="w-12 h-px bg-umber mr-4 transition-all duration-500 group-hover:w-16"></div>
                                <div class="text-sm tracking-widest text-umber/70 transition-colors duration-500 group-hover:text-umber">
                                    FOLLOW ON INSTAGRAM
                                </div>
                            </div>
                            <a href="https://instagram.com/bryndexdesigns" target="_blank" rel="noopener"
                                class="flex items-center text-lg text-noir hover:text-umber transition-colors duration-500 font-serif mb-2">
                                <i class="fab fa-instagram mr-3 text-xl"></i>
                                @bryndexdesigns
                            </a>
                            <div class="text-sm text-noir/50">
                                See behind-the-scenes content and latest work
                            </div>
                        </div>

                        <!-- What to Include -->
                        <div class="border border-umber/20 rounded-lg p-6">
                            <h3 class="font-serif text-lg mb-4 text-noir">What to Include in Your Message</h3>
                            <ul class="space-y-2 text-noir/70 text-sm">
                                <li class="flex items-start">
                                    <span class="w-1.5 h-1.5 bg-umber rounded-full mt-2 mr-3 flex-shrink-0"></span>
                                    <span>Brief description of your business and goals</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="w-1.5 h-1.5 bg-umber rounded-full mt-2 mr-3 flex-shrink-0"></span>
                                    <span>Type of website or application you need</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="w-1.5 h-1.5 bg-umber rounded-full mt-2 mr-3 flex-shrink-0"></span>
                                    <span>Phone number and preferred contact method</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="w-1.5 h-1.5 bg-umber rounded-full mt-2 mr-3 flex-shrink-0"></span>
                                    <span>Desired timeline and budget range</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="w-1.5 h-1.5 bg-umber rounded-full mt-2 mr-3 flex-shrink-0"></span>
                                    <span>Any specific requirements or challenges</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Contact Form -->
                <div data-aos="fade-up" data-aos-duration="800" data-aos-delay="200">
                    <div class="space-y-8">
                        <div class="flex items-center">
                            <div class="w-12 h-px bg-umber mr-4"></div>
                            <div class="text-sm tracking-widest text-umber">QUICK CONTACT FORM</div>
                        </div>

                        <!-- Status messages will be shown here via JavaScript -->
                        <div id="form-status"></div>

                        <form id="contactForm" method="POST" action="/src/forms/process-form" class="space-y-8">
                            <div class="grid md:grid-cols-2 gap-8">
                                <div>
                                    <label for="name" class="block text-sm tracking-widest mb-3 text-noir/80">NAME</label>
                                    <input type="text" id="name" name="name" required class="form-input">
                                </div>
                                <div>
                                    <label for="email" class="block text-sm tracking-widest mb-3 text-noir/80">EMAIL</label>
                                    <input type="email" id="email" name="email" required class="form-input">
                                </div>
                            </div>

                            <div>
                                <label for="phone" class="block text-sm tracking-widest mb-3 text-noir/80">PHONE NUMBER</label>
                                <input type="tel" id="phone" name="phone" class="form-input" placeholder="e.g. +44 123 456 7890">
                            </div>

                            <div>
                                <label for="project_type" class="block text-sm tracking-widest mb-3 text-noir/80">PROJECT TYPE</label>
                                <select id="project_type" name="project_type" required class="form-select">
                                    <option value="" disabled selected>Select your project type</option>
                                    <option value="landing_page">Landing Page (£500)</option>
                                    <option value="company_site">Business Website (£1,500+)</option>
                                    <option value="web_app">Web Application (£2,000+)</option>
                                    <option value="ecommerce">E-commerce Store</option>
                                    <option value="redesign">Website Redesign</option>
                                    <option value="maintenance">Maintenance & Updates</option>
                                    <option value="consultation">Consultation Only</option>
                                    <option value="other">Other / Not Sure</option>
                                </select>
                            </div>

                            <div class="grid md:grid-cols-2 gap-8">
                                <div>
                                    <label for="timeline" class="block text-sm tracking-widest mb-3 text-noir/80">TIMELINE</label>
                                    <select id="timeline" name="timeline" required class="form-select">
                                        <option value="" disabled selected>When do you need this?</option>
                                        <option value="standard">Standard (14-20 days)</option>
                                        <option value="flexible">Flexible (3-4 weeks)</option>
                                        <option value="planning">Still planning</option>
                                    </select>
                                </div>
                                <div>
                                    <label for="budget" class="block text-sm tracking-widest mb-3 text-noir/80">BUDGET RANGE</label>
                                    <select id="budget" name="budget" required class="form-select">
                                        <option value="" disabled selected>Select budget range</option>
                                        <option value="under_500">Under £500</option>
                                        <option value="500_1000">£500 - £1,000</option>
                                        <option value="1000_2000">£1,000 - £2,000</option>
                                        <option value="2000_5000">£2,000 - £5,000</option>
                                        <option value="5000_plus">£5,000+</option>
                                        <option value="discuss">Let's discuss</option>
                                    </select>
                                </div>
                            </div>

                            <div>
                                <label for="contact_reason" class="block text-sm tracking-widest mb-3 text-noir/80">REASON FOR CONTACT</label>
                                <select id="contact_reason" name="contact_reason" required class="form-select">
                                    <option value="" disabled selected>Why are you reaching out?</option>
                                    <option value="new_project">Start a new project</option>
                                    <option value="get_quote">Get a detailed quote</option>
                                    <option value="discuss_idea">Discuss my idea</option>
                                    <option value="see_portfolio">See more work examples</option>
                                    <option value="maintenance">Ongoing maintenance</option>
                                    <option value="question">General question</option>
                                    <option value="collaboration">Potential partnership</option>
                                </select>
                            </div>

                            <div>
                                <label for="message" class="block text-sm tracking-widest mb-3 text-noir/80">PROJECT DETAILS</label>
                                <textarea id="message" name="message" rows="5" required
                                    placeholder="Tell me about your business, project goals, specific requirements, and any challenges you're facing..."
                                    class="form-input resize-none placeholder-noir/40"></textarea>
                            </div>

                            <!-- hCaptcha -->
                            <div>
                                <div class="h-captcha" data-sitekey="<?php echo HCAPTCHA_SITE_KEY; ?>" id="hcaptcha"></div>
                            </div>

                            <div class="pt-4">
                                <button type="submit" id="submit-button" class="btn-primary w-full">
                                    SEND MESSAGE
                                </button>
                                <div class="text-xs text-noir/50 mt-3 text-center">
                                    I typically respond within 24 hours
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Why Choose Us -->
    <section class="py-16 md:py-32 bg-warm-gray text-platinum">
        <div class="max-w-7xl mx-auto px-4 md:px-8">
            <div class="text-center mb-20" data-aos="fade-up" data-aos-duration="800">
                <h2 class="section-title mb-6">
                    <span class="section-subtitle">Why I'm Different</span>
                    <span>From Other Developers</span>
                </h2>
            </div>

            <div class="grid md:grid-cols-3 gap-8" data-aos="fade-up" data-aos-duration="800" data-aos-delay="200">
                <div class="text-center">
                    <div class="w-16 h-16 mx-auto mb-6 rounded-full bg-champagne/10 flex items-center justify-center">
                        <svg class="w-8 h-8 text-umber" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <h3 class="text-xl font-serif mb-4">Fast Response</h3>
                    <p class="text-noir/70 leading-relaxed">
                        I respond within 24 hours. No waiting weeks just to get a quote or hear back from me.
                    </p>
                </div>

                <div class="text-center">
                    <div class="w-16 h-16 mx-auto mb-6 rounded-full bg-champagne/10 flex items-center justify-center">
                        <svg class="w-8 h-8 text-umber" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <h3 class="text-xl font-serif mb-4">I Actually Deliver</h3>
                    <p class="text-noir/70 leading-relaxed">
                        While others overpromise and underdeliver, I build tools that actually get you customers and grow your business.
                    </p>
                </div>

                <div class="text-center">
                    <div class="w-16 h-16 mx-auto mb-6 rounded-full bg-champagne/10 flex items-center justify-center">
                        <svg class="w-8 h-8 text-umber" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                        </svg>
                    </div>
                    <h3 class="text-xl font-serif mb-4">I Stick Around</h3>
                    <p class="text-noir/70 leading-relaxed">
                        Unlike agencies that disappear after launch, I'm here when you need updates, fixes, or have questions.
                    </p>
                </div>
            </div>
        </div>
    </section>


    <!-- Footer Container -->
    <div id="footer-container"></div>

    <!-- Load hCaptcha script -->
    <script src="https://js.hcaptcha.com/1/api.js" async defer></script>

    <!-- JavaScript to handle form submission -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('contactForm');
            const statusDiv = document.getElementById('form-status');
            const submitButton = document.getElementById('submit-button');
            const originalButtonText = submitButton.textContent;

            // Track if hCaptcha is ready
            let hcaptchaReady = false;

            // Listen for hCaptcha load event
            window.onloadHCaptcha = function() {
                hcaptchaReady = true;
                console.log('hCaptcha loaded successfully');
            };

            // Clear any existing status messages on page load
            statusDiv.innerHTML = '';

            form.addEventListener('submit', async function (e) {
                e.preventDefault();

                // Get hCaptcha response
                let hcaptchaResponse = '';
                try {
                    if (typeof hcaptcha !== 'undefined') {
                        hcaptchaResponse = hcaptcha.getResponse();
                    }
                } catch (e) {
                    console.error('hCaptcha error:', e);
                }

                // Validate hCaptcha response
                if (!hcaptchaResponse) {
                    showMessage('Please complete the security verification.', 'error');
                    submitButton.textContent = originalButtonText;
                    submitButton.disabled = false;
                    return;
                }

                // Show loading state
                submitButton.textContent = 'SENDING...';
                submitButton.disabled = true;

                console.log('Starting form submission...');

                // Create FormData object
                const formData = new FormData();
                console.log('Created FormData object');
                formData.append('name', document.getElementById('name').value);
                formData.append('email', document.getElementById('email').value);
                formData.append('phone', document.getElementById('phone').value);
                formData.append('project_type', document.getElementById('project_type').value);
                formData.append('timeline', document.getElementById('timeline').value);
                formData.append('budget', document.getElementById('budget').value);
                formData.append('contact_reason', document.getElementById('contact_reason').value);
                formData.append('message', document.getElementById('message').value);
                formData.append('h-captcha-response', hcaptchaResponse);

                try {
                    const response = await fetch('/src/forms/process-form', {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    });

                    if (!response.ok) {
                        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                    }

                    const result = await response.json();

                    if (result.status === 'success') {
                        showMessage('Message sent successfully! We\'ll get back to you within 24 hours.', 'success');
                        form.reset();

                        // Reset hCaptcha
                        try {
                            hcaptcha.reset();
                        } catch (e) {
                            console.log('hCaptcha reset error:', e);
                        }

                        // Auto-hide success message after 5 seconds
                        setTimeout(() => {
                            const successMessage = statusDiv.querySelector('.status-success');
                            if (successMessage) {
                                successMessage.style.opacity = '0';
                                setTimeout(() => {
                                    if (statusDiv.contains(successMessage)) {
                                        statusDiv.removeChild(successMessage);
                                    }
                                }, 500);
                            }
                        }, 5000);
                    } else {
                        showMessage(result.message || 'There was an error sending your message.', 'error');
                    }
                } catch (error) {
                    console.error('Form submission error:', error);
                    showMessage('There was an error sending your message. Please try again or contact us directly at contact@bryndexdesigns.com.', 'error');
                } finally {
                    // Reset button state
                    submitButton.textContent = originalButtonText;
                    submitButton.disabled = false;
                }
            });

            function showMessage(message, type) {
                // Remove any existing messages
                const existingMessages = statusDiv.querySelectorAll('.status-message');
                existingMessages.forEach(msg => msg.remove());

                const messageDiv = document.createElement('div');
                messageDiv.className = `status-message ${type === 'success' ? 'status-success' : 'status-error'}`;
                messageDiv.setAttribute('role', 'alert');

                messageDiv.innerHTML = `
                    <p class="font-bold">${type === 'success' ? 'Success!' : 'Error!'}</p>
                    <p class="text-sm">${message}</p>
                `;

                statusDiv.appendChild(messageDiv);

                // Scroll to status message
                setTimeout(() => {
                    messageDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                }, 100);
            }

        });
    </script>

    <!-- Scripts -->
    <script src="src/js/components.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize components
            BryndexComponents.initializeComponents('contact');

            // Initialize AOS with mobile-friendly settings
            AOS.init({
                duration: window.innerWidth < 768 ? 600 : 800,
                once: true,
                offset: window.innerWidth < 768 ? 50 : 50,
                easing: 'ease-out-quart',
                disable: false,
                startEvent: 'DOMContentLoaded',
                anchorPlacement: 'top-bottom'
            });
        });
    </script>
</body>
</html>