@extends('layouts.main')

@section('title', 'Contact Us - UFG')

@push('styles')
<style>
    /* Contact Page Specific Styles */
    .contact-hero {
        background-image: linear-gradient(rgba(3, 139, 185, 0.3), rgba(17, 107, 181, 0.3)), url('{{ asset("assets/2025/08/2d798430fc0e6ab7087749eab6eaa37312a3da9e-scaled.png") }}');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }

    /* Contact Form Styles */
    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        transition: all 0.3s ease;
    }

    .contact-form input:focus,
    .contact-form select:focus,
    .contact-form textarea:focus {
        border-color: #038BB9;
        box-shadow: 0 0 0 3px rgba(3, 139, 185, 0.1);
        outline: none;
    }

    /* Contact Cards Hover Effects */
    .contact-card {
        transition: all 0.3s ease;
    }

    .contact-card:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

    /* Character Counter */
    .char-counter {
        transition: color 0.3s ease;
    }

    /* Map Placeholder */
    .map-placeholder {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    }

    /* WhatsApp Float Button */
    .whatsapp-chat-float {
        position: fixed;
        bottom: 30px;
        right: 30px;
        z-index: 1000;
    }

    .whatsapp-chat-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        background: #25D366;
        border-radius: 50%;
        color: white;
        text-decoration: none;
        box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
        transition: all 0.3s ease;
        position: relative;
    }

    .whatsapp-chat-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
    }

    .whatsapp-tooltip {
        position: absolute;
        right: 70px;
        background: #333;
        color: white;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 14px;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .whatsapp-chat-btn:hover .whatsapp-tooltip {
        opacity: 1;
        visibility: visible;
    }

    /* Text Size Classes */
    .text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
    .text-5xl { font-size: 3rem !important; line-height: 1 !important; }
    .text-6xl { font-size: 3.75rem !important; line-height: 1 !important; }
    
    @media (min-width: 768px) {
        .md\:text-5xl { font-size: 3rem !important; line-height: 1 !important; }
    }
    
    @media (min-width: 1024px) {
        .lg\:text-6xl { font-size: 3.75rem !important; line-height: 1 !important; }
    }

    /* Missing Tailwind Classes */
    .bg-aufg-primary { background-color: #038BB9 !important; }
    .bg-aufg-primary-dark { background-color: #1169B5 !important; }
    .bg-aufg-primary\/10 { background-color: rgba(3, 139, 185, 0.1) !important; }
    .bg-aufg-bg-light { background-color: #F8F9FA !important; }
    .text-aufg-primary { color: #038BB9 !important; }
    .text-aufg-text-primary { color: #112a3b !important; }
    .text-aufg-text-secondary { color: #7A7A7A !important; }
    .border-aufg-primary { border-color: #038BB9 !important; }
    .focus\:border-aufg-primary:focus { border-color: #038BB9 !important; }
    .focus\:ring-aufg-primary\/20:focus { box-shadow: 0 0 0 3px rgba(3, 139, 185, 0.2) !important; }
    .bg-aufg-gradient { background: linear-gradient(135deg, #038BB9 0%, #1169B5 100%) !important; }
    .animate-fade-in-up { animation: fadeInUp 0.6s ease-out; }
    .animate-bounce { animation: bounce 2s infinite; }
    
    /* Border Radius Classes */
    .rounded-3xl { border-radius: 1.5rem !important; } /* 24px */
    .rounded-2xl { border-radius: 1rem !important; } /* 16px */
    .rounded-xl { border-radius: 0.75rem !important; } /* 12px */
    .rounded-lg { border-radius: 0.5rem !important; } /* 8px */
    .rounded-full { border-radius: 9999px !important; }
    
    /* Negative Margin Classes */
    .-mt-\[123px\] { margin-top: -123px !important; }
    .pt-\[200px\] { padding-top: 200px !important; }
    .pb-\[100px\] { padding-bottom: 100px !important; }

    @keyframes fadeInUp {
        0% { opacity: 0; transform: translateY(20px); }
        100% { opacity: 1; transform: translateY(0); }
    }

    @keyframes bounce {
        0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
        40%, 43% { transform: translateY(-10px); }
        70% { transform: translateY(-5px); }
        90% { transform: translateY(-2px); }
    }
</style>
@endpush

@section('content')
<!-- Contact Us Hero Section -->
<section class="contact-hero relative min-h-screen flex items-center justify-center overflow-hidden bg-cover bg-center bg-fixed -mt-[123px] pt-[200px] pb-[100px]">
    <!-- Glass Effect Overlay -->
    <div class="absolute inset-0 bg-gradient-to-br from-aufg-primary/30 via-aufg-primary-dark/20 to-aufg-primary-darker/30 backdrop-blur-[1px]"></div>
    
    <!-- Background Pattern -->
    <div class="absolute inset-0 opacity-10">
        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-pulse"></div>
    </div>
    
    <!-- Content -->
    <div class="relative z-10 text-center px-4 max-w-6xl mx-auto">
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white font-poppins leading-tight animate-fade-in-up">
            Contact <span class="bg-gradient-to-r from-blue-200 to-blue-100 bg-clip-text text-transparent">Us</span>
        </h1>
    </div>
    
    <!-- Scroll Indicator -->
    <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
        <svg class="w-6 h-6 text-white/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
        </svg>
    </div>
</section>

<!-- Contact Information Section -->
<section id="contact-info" class="py-20 bg-aufg-bg-light">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Section Header -->
        <div class="text-center mb-16">
            <div class="inline-block bg-aufg-primary/10 rounded-full px-6 py-2 mb-4">
                <span class="text-aufg-primary font-semibold">Get in Touch</span>
            </div>
            <h2 class="text-4xl md:text-5xl font-bold text-aufg-text-primary mb-6">
                Contact Information
            </h2>
            <p class="text-xl text-aufg-text-secondary max-w-3xl mx-auto">
                Reach out to us through any of the following channels. We're here to assist you with all your inquiries.
            </p>
        </div>

        <!-- Contact Information Cards -->
        <div class="grid md:grid-cols-3 gap-8 mb-16">
            <!-- Office Address -->
            <div class="contact-card bg-white rounded-3xl shadow-xl p-8">
                <div class="w-16 h-16 bg-aufg-primary/10 rounded-2xl flex items-center justify-center mb-6">
                    <svg class="w-8 h-8 text-aufg-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                </div>
                <h3 class="text-2xl font-bold text-aufg-text-primary mb-4">Office Location</h3>
                <p class="text-aufg-text-secondary mb-4">
                    Arabian United Float Glass Company<br>
                    Industrial City, Yanbu<br>
                    Kingdom of Saudi Arabia
                </p>
                <button onclick="scrollToSection('map')" class="text-aufg-primary font-semibold hover:underline">
                    View on Map →
                </button>
            </div>
            
            <!-- Phone & Email -->
            <div class="contact-card bg-white rounded-3xl shadow-xl p-8">
                <div class="w-16 h-16 bg-aufg-primary/10 rounded-2xl flex items-center justify-center mb-6">
                    <svg class="w-8 h-8 text-aufg-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                    </svg>
                </div>
                <h3 class="text-2xl font-bold text-aufg-text-primary mb-4">Phone & Email</h3>
                <div class="space-y-3">
                    <p class="text-aufg-text-secondary">
                        <strong>Phone:</strong> <a href="tel:{{ site_setting('contact_phone_raw', '966556003206') }}" class="text-aufg-primary hover:underline">{{ site_setting('contact_phone', '+966 556 003 206') }}</a>
                    </p>
                    <p class="text-aufg-text-secondary">
                        <strong>Email:</strong> <a href="mailto:{{ site_setting('contact_email', 'info@aufgc.com') }}" class="text-aufg-primary hover:underline">{{ site_setting('contact_email', 'info@aufgc.com') }}</a>
                    </p>
                    <p class="text-aufg-text-secondary">
                        <strong>Customer Service:</strong> <a href="mailto:customercare@aufgc.com" class="text-aufg-primary hover:underline">customercare@aufgc.com</a>
                    </p>
                </div>
            </div>
            
            <!-- Working Hours -->
            <div class="contact-card bg-white rounded-3xl shadow-xl p-8">
                <div class="w-16 h-16 bg-aufg-primary/10 rounded-2xl flex items-center justify-center mb-6">
                    <svg class="w-8 h-8 text-aufg-primary" 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-2xl font-bold text-aufg-text-primary mb-4">Working Hours</h3>
                <div class="space-y-2">
                    <div class="flex justify-between">
                        <span class="text-aufg-text-secondary">Sunday - Thursday</span>
                        <span class="text-aufg-text-primary font-semibold">8:00 AM - 5:00 PM</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-aufg-text-secondary">Friday</span>
                        <span class="text-aufg-text-primary font-semibold">Closed</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-aufg-text-secondary">Saturday</span>
                        <span class="text-aufg-text-primary font-semibold">9:00 AM - 3:00 PM</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Inquiry Form Section -->
<section id="inquiry-form" class="py-20 bg-white">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Section Header -->
        <div class="text-center mb-16">
            <div class="inline-block bg-aufg-primary/10 rounded-full px-6 py-2 mb-4">
                <span class="text-aufg-primary font-semibold">Send Message</span>
            </div>
            <h2 class="text-4xl md:text-5xl font-bold text-aufg-text-primary mb-6">
                Inquiry Form
            </h2>
            <p class="text-xl text-aufg-text-secondary max-w-2xl mx-auto">
                Have questions about our products or services? Send us a message and we'll get back to you promptly.
            </p>
        </div>

        <!-- Inquiry Form -->
        <div class="bg-aufg-bg-light rounded-3xl p-8 md:p-12 shadow-xl">
            <form class="contact-form space-y-6" id="contact-form" action="{{ route('contact.store') }}" method="POST">
                @csrf
                <div class="grid md:grid-cols-2 gap-6">
                    <div>
                        <label for="name" class="block text-aufg-text-primary font-semibold mb-2">Full Name</label>
                        <input type="text" id="name" name="name" required
                               class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-aufg-primary focus:ring-2 focus:ring-aufg-primary/20 outline-none transition-all duration-300">
                    </div>
                    <div>
                        <label for="email" class="block text-aufg-text-primary font-semibold mb-2">Email Address</label>
                        <input type="email" id="email" name="email" required
                               class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-aufg-primary focus:ring-2 focus:ring-aufg-primary/20 outline-none transition-all duration-300">
                    </div>
                </div>
                
                <div class="grid md:grid-cols-2 gap-6">
                    <div>
                        <label for="phone" class="block text-aufg-text-primary font-semibold mb-2">Phone Number</label>
                        <input type="tel" id="phone" name="phone"
                               class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-aufg-primary focus:ring-2 focus:ring-aufg-primary/20 outline-none transition-all duration-300">
                    </div>
                    <div>
                        <label for="company" class="block text-aufg-text-primary font-semibold mb-2">Company Name</label>
                        <input type="text" id="company" name="company"
                               class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-aufg-primary focus:ring-2 focus:ring-aufg-primary/20 outline-none transition-all duration-300">
                    </div>
                </div>

                <div>
                    <label for="subject" class="block text-aufg-text-primary font-semibold mb-2">Subject</label>
                    <select id="subject" name="subject" required
                            class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-aufg-primary focus:ring-2 focus:ring-aufg-primary/20 outline-none transition-all duration-300">
                        <option value="">Select a subject</option>
                        <option value="general">General Inquiry</option>
                        <option value="product">Product Information</option>
                        <option value="quote">Request for Quote</option>
                        <option value="support">Customer Support</option>
                        <option value="partnership">Partnership Opportunities</option>
                    </select>
                </div>

                <div>
                    <label for="message" class="block text-aufg-text-primary font-semibold mb-2">Message</label>
                    <textarea id="message" name="message" rows="5" required maxlength="255" placeholder="Please enter your message (maximum 255 characters)"
                              class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-aufg-primary focus:ring-2 focus:ring-aufg-primary/20 outline-none transition-all duration-300 resize-none"></textarea>
                    <p class="text-sm text-aufg-text-secondary mt-2">Characters remaining: <span id="char-count" class="char-counter">255</span></p>
                </div>

                <div class="text-center">
                    <button type="submit" id="submit-btn"
                            class="bg-aufg-gradient text-white font-semibold px-8 py-4 rounded-lg hover:shadow-2xl hover:scale-105 transition-all duration-300 transform">
                        <span class="flex items-center gap-2">
                            Send Message
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
                            </svg>
                        </span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</section>

<!-- Google Map Section -->
<section id="map" class="py-20 bg-aufg-bg-light">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Section Header -->
        <div class="text-center mb-16">
            <div class="inline-block bg-aufg-primary/10 rounded-full px-6 py-2 mb-4">
                <span class="text-aufg-primary font-semibold">Find Us</span>
            </div>
            <h2 class="text-4xl md:text-5xl font-bold text-aufg-text-primary mb-6">
                Our Location
            </h2>
            <p class="text-xl text-aufg-text-secondary max-w-3xl mx-auto">
                Visit us at our headquarters in Yanbu Industrial City. We're easily accessible and ready to welcome you.
            </p>
        </div>

        <!-- Map Container -->
        <div class="bg-white rounded-3xl shadow-xl overflow-hidden">
            <div class="h-96 map-placeholder flex items-center justify-center">
                <!-- Placeholder for Google Map -->
                <div class="text-center">
                    <svg class="w-16 h-16 text-aufg-primary mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                    <h3 class="text-xl font-bold text-aufg-text-primary mb-2">UFG Location</h3>
                    <p class="text-aufg-text-secondary">
                        Industrial City, Yanbu<br>
                        Kingdom of Saudi Arabia
                    </p>
                    <button class="mt-4 bg-aufg-primary text-white px-6 py-3 rounded-lg font-semibold hover:bg-aufg-primary-dark transition-colors duration-300">
                        Open in Google Maps
                    </button>
                </div>
                <!-- 
                To integrate actual Google Maps:
                <iframe src="https://www.google.com/maps/embed?pb=..." 
                        width="100%" height="400" style="border:0;" 
                        allowfullscreen="" loading="lazy" 
                        referrerpolicy="no-referrer-when-downgrade"></iframe>
                -->
            </div>
        </div>
    </div>
</section>

<!-- Floating WhatsApp Chat Button -->
<div class="whatsapp-chat-float">
    <a href="{{ whatsapp_url() }}" target="_blank" rel="noopener" class="whatsapp-chat-btn" aria-label="Chat on WhatsApp">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.890-5.335 11.893-11.893A11.821 11.821 0 0020.451 3.516z"/>
        </svg>
        <span class="whatsapp-tooltip">Chat with us</span>
    </a>
</div>
@endsection

@push('scripts')
<script>
// Contact form submission
document.getElementById('contact-form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const submitBtn = document.getElementById('submit-btn');
    const originalText = submitBtn.textContent;
    
    // Disable button and show loading
    submitBtn.disabled = true;
    submitBtn.textContent = 'Sending...';
    
    // Send AJAX request
    fetch('{{ route("contact.store") }}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Show success toast message
            showToastMessage(data.message || 'Thank you for your message! We will get back to you soon.', 'success');
            // Reset form
            document.getElementById('contact-form').reset();
            // Reset character counter
            document.getElementById('char-count').textContent = '255';
        } else if (data.errors) {
            // Show validation errors as toast
            const errorMessages = Object.values(data.errors).flat();
            showToastMessage(errorMessages.join('<br>'), 'error');
        } else {
            // Show generic error toast
            showToastMessage('There was an error sending your message. Please try again.', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToastMessage('There was an error sending your message. Please try again.', 'error');
    })
    .finally(() => {
        // Re-enable button
        submitBtn.disabled = false;
        submitBtn.textContent = originalText;
    });
});

// Toast Message Function (same as careers and investors page)
function showToastMessage(message, type = 'success') {
    // Remove any existing toast
    const existingToast = document.querySelector('.contact-toast');
    if (existingToast) {
        existingToast.remove();
    }
    
    const bgColor = type === 'success' ? '#28a745' : '#dc3545';
    const iconClass = type === 'success' ? 'fas fa-check-circle' : 'fas fa-exclamation-circle';
    
    const toast = document.createElement('div');
    toast.className = 'contact-toast';
    toast.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
        min-width: 300px;
        max-width: 400px;
        background-color: ${bgColor};
        color: white;
        padding: 16px 20px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        font-family: 'Poppins', sans-serif;
        font-size: 14px;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
    `;
    
    toast.innerHTML = `
        <div style="display: flex; align-items: center; gap: 12px;">
            <i class="${iconClass}" style="font-size: 18px; flex-shrink: 0;"></i>
            <div style="flex: 1;">${message}</div>
            <button style="
                background: none;
                border: none;
                color: white;
                font-size: 20px;
                cursor: pointer;
                padding: 0;
                width: 20px;
                height: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0.8;
            " aria-label="Close">&times;</button>
        </div>
    `;
    
    document.body.appendChild(toast);
    
    // Animate in
    setTimeout(() => {
        toast.style.transform = 'translateX(0)';
    }, 10);
    
    // Add click handler for close button
    toast.querySelector('button').addEventListener('click', () => {
        toast.style.transform = 'translateX(100%)';
        setTimeout(() => {
            if (toast.parentNode) {
                toast.remove();
            }
        }, 300);
    });
    
    // Auto remove after 5 seconds
    setTimeout(() => {
        if (toast.parentNode) {
            toast.style.transform = 'translateX(100%)';
            setTimeout(() => {
                if (toast.parentNode) {
                    toast.remove();
                }
            }, 300);
        }
    }, 5000);
    
    console.log('Toast shown:', message, type); // Debug log
}

// Character counter for message textarea
document.addEventListener('DOMContentLoaded', function() {
    const messageInput = document.getElementById('message');
    const charCountElement = document.getElementById('char-count');
    
    if (messageInput && charCountElement) {
        messageInput.addEventListener('input', function() {
            const remaining = 255 - this.value.length;
            charCountElement.textContent = remaining;
            
            // Change color based on remaining characters
            if (remaining < 50) {
                charCountElement.style.color = '#dc2626';
            } else if (remaining < 100) {
                charCountElement.style.color = '#f59e0b';
            } else {
                charCountElement.style.color = '#6b7280';
            }
        });
    }

    // Smooth scroll animations
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate-fade-in-up');
            }
        });
    }, observerOptions);
    
    // Observe all sections
    document.querySelectorAll('section').forEach(section => {
        observer.observe(section);
    });
});

// Smooth scrolling function
function scrollToSection(sectionId) {
    const element = document.getElementById(sectionId);
    if (element) {
        element.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        });
    }
}
</script>
@endpush