@extends('layouts.main')

@section('title', 'Investors - UFG')

@push('styles')
<style>
    /* Investors Page Specific Styles */
    .investors-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;
    }

    /* Missing Tailwind Classes */
    .bg-aufg-primary { background-color: #038BB9 !important; }
    .bg-aufg-primary-dark { background-color: #1169B5 !important; }
    .bg-aufg-primary-darker { background-color: #0C4F7C !important; }
    .bg-aufg-primary\/10 { background-color: rgba(3, 139, 185, 0.1) !important; }
    .bg-aufg-bg-light { background-color: #F8F9FA !important; }
    .bg-aufg-light { background-color: #F8F9FA !important; }
    .text-aufg-primary { color: #038BB9 !important; }
    .text-aufg-primary-dark { color: #1169B5 !important; }
    .text-aufg-primary-darker { color: #0C4F7C !important; }
    .text-aufg-text-primary { color: #112a3b !important; }
    .text-aufg-text-secondary { color: #7A7A7A !important; }
    .border-aufg-primary { border-color: #038BB9 !important; }
    .border-aufg-border-light { border-color: #eee !important; }
    .bg-aufg-gradient { background: linear-gradient(135deg, #038BB9 0%, #1169B5 100%) !important; }
    .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important; }
    .bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)) !important; }
    .from-blue-200 { --tw-gradient-from: #dbeafe; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(219, 234, 254, 0)) !important; }
    .to-blue-100 { --tw-gradient-to: #dbeafe !important; }
    .from-aufg-primary { --tw-gradient-from: #038BB9; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(3, 139, 185, 0)) !important; }
    .to-aufg-primary-dark { --tw-gradient-to: #1169B5 !important; }
    .from-gray-800 { --tw-gradient-from: #1f2937; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(31, 41, 55, 0)) !important; }
    .to-gray-900 { --tw-gradient-to: #111827 !important; }
    .bg-clip-text { background-clip: text !important; -webkit-background-clip: text !important; }
    .text-transparent { color: transparent !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; }
    .rounded-2xl { border-radius: 1rem !important; }
    .rounded-xl { border-radius: 0.75rem !important; }
    .rounded-lg { border-radius: 0.5rem !important; }
    .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; }

    /* Layout Classes */
    .flex { display: flex !important; }
    .grid { display: grid !important; }
    .hidden { display: none !important; }
    .block { display: block !important; }
    .inline-block { display: inline-block !important; }
    .flex-col { flex-direction: column !important; }
    .items-center { align-items: center !important; }
    .justify-center { justify-content: center !important; }
    .justify-between { justify-content: space-between !important; }
    .justify-end { justify-content: flex-end !important; }
    .text-center { text-align: center !important; }
    .text-left { text-left !important; }
    .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .gap-8 { gap: 2rem !important; }
    .gap-6 { gap: 1.5rem !important; }
    .gap-4 { gap: 1rem !important; }
    .gap-3 { gap: 0.75rem !important; }
    .space-y-3 > * + * { margin-top: 0.75rem !important; }
    .space-y-6 > * + * { margin-top: 1.5rem !important; }
    
    /* Margin and Padding */
    .mb-20 { margin-bottom: 5rem !important; }
    .mb-16 { margin-bottom: 4rem !important; }
    .mb-8 { margin-bottom: 2rem !important; }
    .mb-6 { margin-bottom: 1.5rem !important; }
    .mb-4 { margin-bottom: 1rem !important; }
    .mb-2 { margin-bottom: 0.5rem !important; }
    .mb-1 { margin-bottom: 0.25rem !important; }
    .mt-4 { margin-top: 1rem !important; }
    .mx-auto { margin-left: auto !important; margin-right: auto !important; }
    .py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
    .pt-8 { padding-top: 2rem !important; }
    .pb-20 { padding-bottom: 5rem !important; }
    .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    .px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
    .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .p-1 { padding: 0.25rem !important; }
    .p-2 { padding: 0.5rem !important; }
    .p-4 { padding: 1rem !important; }
    .p-6 { padding: 1.5rem !important; }
    .p-8 { padding: 2rem !important; }
    .p-12 { padding: 3rem !important; }
    .p-2\.5 { padding: 0.625rem !important; }
    .max-w-7xl { max-width: 80rem !important; }
    .max-w-6xl { max-width: 72rem !important; }
    .max-w-4xl { max-width: 56rem !important; }
    .max-w-3xl { max-width: 48rem !important; }
    .max-w-2xl { max-width: 42rem !important; }
    .max-w-md { max-width: 28rem !important; }
    
    /* Dimensions */
    .w-6 { width: 1.5rem !important; }
    .h-6 { height: 1.5rem !important; }
    .w-5 { width: 1.25rem !important; }
    .h-5 { height: 1.25rem !important; }
    .w-12 { width: 3rem !important; }
    .h-12 { height: 3rem !important; }
    .w-16 { width: 4rem !important; }
    .h-16 { height: 4rem !important; }
    .w-28 { width: 7rem !important; }
    .h-28 { height: 7rem !important; }
    .w-32 { width: 8rem !important; }
    .h-32 { height: 8rem !important; }
    .w-40 { width: 10rem !important; }
    .h-40 { height: 10rem !important; }
    .w-full { width: 100% !important; }
    .h-full { height: 100% !important; }
    .h-96 { height: 24rem !important; }
    .min-h-screen { min-height: 100vh !important; }
    
    /* Positioning */
    .absolute { position: absolute !important; }
    .relative { position: relative !important; }
    .inset-0 { top: 0; right: 0; bottom: 0; left: 0 !important; }
    .left-1\/2 { left: 50% !important; }
    .bottom-8 { bottom: 2rem !important; }
    .z-10 { z-index: 10 !important; }
    .transform { transform: var(--tw-transform) !important; }
    .-translate-x-1\/2 { --tw-translate-x: -50% !important; transform: translateX(-50%) !important; }
    .overflow-hidden { overflow: hidden !important; }
    
    /* Colors */
    .bg-white { background-color: white !important; }
    .bg-gray-200 { background-color: #e5e7eb !important; }
    .bg-gray-400 { color: #9ca3af !important; }
    .bg-black { background-color: black !important; }
    .text-white { color: white !important; }
    .text-white\/70 { color: rgba(255, 255, 255, 0.7) !important; }
    .bg-white\/20 { background-color: rgba(255, 255, 255, 0.2) !important; }
    .opacity-40 { opacity: 0.4 !important; }
    .opacity-90 { opacity: 0.9 !important; }
    
    /* Typography */
    .font-bold { font-weight: 700 !important; }
    .font-semibold { font-weight: 600 !important; }
    .font-medium { font-weight: 500 !important; }
    .text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
    .text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }
    .text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
    .text-5xl { font-size: 3rem !important; line-height: 1 !important; }
    .text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
    .text-xs { font-size: 0.75rem !important; line-height: 1rem !important; }
    .text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }
    .leading-relaxed { line-height: 1.625 !important; }
    .leading-tight { line-height: 1.25 !important; }
    .uppercase { text-transform: uppercase !important; }
    
    /* Shadows and Effects */
    .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; }
    .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; }
    .backdrop-blur-\[1px\] { backdrop-filter: blur(1px) !important; }
    
    /* Transitions */
    .transition-all { transition-property: all !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-duration: 150ms !important; }
    .transition-opacity { transition-property: opacity !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-duration: 150ms !important; }
    .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-duration: 150ms !important; }
    .duration-300 { transition-duration: 300ms !important; }
    
    /* Form Elements */
    .border { border-width: 1px !important; }
    .border-2 { border-width: 2px !important; }
    .border-4 { border-width: 4px !important; }
    .border-t { border-top-width: 1px !important; }
    .object-cover { object-fit: cover !important; }
    .focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(3, 139, 185, 0.5) !important; }
    .focus\:border-transparent:focus { border-color: transparent !important; }
    
    /* Hover States */
    .hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; }
    .hover\:opacity-90:hover { opacity: 0.9 !important; }
    .hover\:bg-aufg-primary-dark:hover { background-color: #1169B5 !important; }
    
    /* Responsive Classes */
    @media (min-width: 768px) {
        .md\:text-5xl { font-size: 3rem !important; line-height: 1 !important; }
        .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
        .sm\:px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    }

    @media (min-width: 1024px) {
        .lg\:text-6xl { font-size: 3.75rem !important; line-height: 1 !important; }
        .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
        .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
        .lg\:col-span-1 { grid-column: span 1 / span 1 !important; }
        .lg\:col-span-2 { grid-column: span 2 / span 2 !important; }
        .lg\:px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
    }

    /* FAQ Specific Styles */
    .faq-content {
        max-height: 0;
        overflow: hidden;
        transition: all 0.3s ease-out;
        padding-bottom: 0;
    }
    
    .faq-content.active {
        max-height: 200px;
        padding-bottom: 2rem;
    }
    
    .faq-icon.rotated {
        transform: rotate(180deg);
    }

    @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')
<!-- Hero Section -->
<section class="investors-hero relative min-h-screen flex items-center justify-center overflow-hidden bg-cover bg-center bg-fixed -mt-[123px] pt-[200px] pb-[100px]">
    <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>
    <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">
            Investor <span class="bg-gradient-to-r from-blue-200 to-blue-100 bg-clip-text text-transparent">Relations</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>

<!-- Investors Content -->
<section id="investors" class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Tadawul UFG Section -->
        <div class="mb-20">
            <div class="text-center mb-16">
                <h2 class="font-bold text-aufg-primary-darker mb-6 font-poppins animate-fade-in-up uppercase" style="font-size: 40px; font-weight: 700;">
                    Tadawul <span class="bg-gradient-to-r from-aufg-primary to-aufg-primary-dark bg-clip-text text-transparent">UFG</span>
                </h2>
                <p class="text-aufg-text-secondary max-w-4xl mx-auto leading-relaxed animate-fade-in-up" style="font-size: 1rem; line-height: 1.5em; animation-delay: 0.2s;">
                    Access our official <strong class="text-aufg-primary">Tadawul listing</strong> information, financial data, and investor resources
                </p>
            </div>
            
            <!-- Single Consolidated Layout -->
            <div class="bg-white rounded-3xl shadow-xl p-8">
                <!-- Top Section - Tadawul Profile with Contact Grid -->
                <div class="grid lg:grid-cols-3 gap-8 mb-8">
                    <!-- Tadawul Profile Card -->
                    <div class="lg:col-span-1">
                        <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl p-6 text-center text-white relative overflow-hidden">
                            <div class="absolute inset-0 bg-black opacity-40"></div>
                            <div class="relative z-10">
                                <div class="mb-4">
                                    <svg class="w-12 h-12 mx-auto text-white" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9V7L15 1H5C3.9 1 3 1.9 3 3V21C3 22.1 3.9 23 5 23H19C20.1 23 21 22.1 21 21V9M19 9H14V4H19V9Z"/>
                                    </svg>
                                </div>
                                <h3 class="text-lg font-bold mb-1">تداول</h3>
                                <p class="text-sm opacity-90 mb-4">Saudi Stock Exchange</p>
                                <div class="bg-white/20 rounded-full px-3 py-1 mb-4">
                                    <span class="text-white text-xs font-medium">UFG Tadawul Profile</span>
                                </div>
                                <a href="#" class="block w-full bg-aufg-gradient text-white py-2 rounded-lg font-medium hover:opacity-90 transition-opacity text-sm">
                                    View on Tadawul
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Contact Information Grid -->
                    <div class="lg:col-span-2">
                        <div class="grid grid-cols-2 gap-4 h-full">
                            <!-- Email Card -->
                            <div class="bg-aufg-bg-light rounded-xl p-4 flex flex-col justify-center">
                                <div class="text-center">
                                    <div class="bg-aufg-primary/10 p-2 rounded-xl inline-block mb-2">
                                        <svg class="w-5 h-5 text-aufg-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 7.89a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                                        </svg>
                                    </div>
                                    <h4 class="font-bold text-aufg-primary-darker text-sm">investors@aufgc.com</h4>
                                    <p class="text-aufg-text-secondary text-xs">Email</p>
                                </div>
                            </div>

                            <!-- Working Days Card -->
                            <div class="bg-aufg-bg-light rounded-xl p-4 flex flex-col justify-center">
                                <div class="text-center">
                                    <div class="bg-aufg-primary/10 p-2 rounded-xl inline-block mb-2">
                                        <svg class="w-5 h-5 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>
                                    <h4 class="font-bold text-aufg-primary-darker text-sm">Sunday - Thursday</h4>
                                    <p class="text-aufg-text-secondary text-xs">Working Days</p>
                                </div>
                            </div>

                            <!-- Phone Card -->
                            <div class="bg-aufg-bg-light rounded-xl p-4 flex flex-col justify-center">
                                <div class="text-center">
                                    <div class="bg-aufg-primary/10 p-2 rounded-xl inline-block mb-2">
                                        <svg class="w-5 h-5 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>
                                    <h4 class="font-bold text-aufg-primary-darker text-sm">0143255444 - Ext.366</h4>
                                    <p class="text-aufg-text-secondary text-xs">Communication Officer</p>
                                </div>
                            </div>

                            <!-- Location Card -->
                            <div class="bg-aufg-bg-light rounded-xl p-4 flex flex-col justify-center">
                                <div class="text-center">
                                    <div class="bg-aufg-primary/10 p-2 rounded-xl inline-block mb-2">
                                        <svg class="w-5 h-5 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>
                                    <h4 class="font-bold text-aufg-primary-darker text-sm">Riyadh</h4>
                                    <p class="text-aufg-text-secondary text-xs">Al Thumamah Road</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Bottom Section - Stock Info and Investor Form -->
                <div class="border-t border-aufg-border-light pt-8">
                    <div class="grid lg:grid-cols-3 gap-8">
                        <!-- Stock Information Cards -->
                        <div class="lg:col-span-1">
                            <div class="space-y-3">
                                <div class="bg-aufg-gradient text-white p-4 rounded-xl text-center">
                                    <h4 class="font-medium text-sm mb-1">Stock Symbol</h4>
                                    <p class="text-xl font-bold">UFG</p>
                                </div>
                                <div class="bg-aufg-gradient text-white p-4 rounded-xl text-center">
                                    <h4 class="font-medium text-sm mb-1">Market Cap</h4>
                                    <p class="text-xl font-bold">SAR 2.5B</p>
                                </div>
                            </div>
                        </div>

                        <!-- Investor Inquiry Form -->
                        <div class="lg:col-span-2">
                            <div class="bg-aufg-bg-light rounded-xl p-6">
                                <h3 class="text-xl font-semibold text-aufg-primary-darker mb-4">Investor Inquiry</h3>
                                
                                
                                <form id="investor-inquiry-form" class="space-y-3">
                                    @csrf
                                    <div class="grid md:grid-cols-2 gap-3">
                                        <div>
                                            <label class="block text-aufg-text-secondary font-medium mb-1 text-sm">Full Name <span class="text-red-500">*</span></label>
                                            <input type="text" name="full_name" required class="w-full p-2.5 border border-aufg-border-light rounded-lg focus:ring-2 focus:ring-aufg-primary focus:border-transparent transition-all">
                                            <span class="text-red-500 text-sm" id="full_name_error"></span>
                                        </div>
                                        <div>
                                            <label class="block text-aufg-text-secondary font-medium mb-1 text-sm">Email Address <span class="text-red-500">*</span></label>
                                            <input type="email" name="email" required class="w-full p-2.5 border border-aufg-border-light rounded-lg focus:ring-2 focus:ring-aufg-primary focus:border-transparent transition-all">
                                            <span class="text-red-500 text-sm" id="email_error"></span>
                                        </div>
                                    </div>
                                    <div class="grid md:grid-cols-2 gap-3">
                                        <div>
                                            <label class="block text-aufg-text-secondary font-medium mb-1 text-sm">Phone Number</label>
                                            <input type="tel" name="phone" class="w-full p-2.5 border border-aufg-border-light rounded-lg focus:ring-2 focus:ring-aufg-primary focus:border-transparent transition-all">
                                            <span class="text-red-500 text-sm" id="phone_error"></span>
                                        </div>
                                        <div>
                                            <label class="block text-aufg-text-secondary font-medium mb-1 text-sm">Inquiry Type <span class="text-red-500">*</span></label>
                                            <select name="inquiry_type" required class="w-full p-2.5 border border-aufg-border-light rounded-lg focus:ring-2 focus:ring-aufg-primary focus:border-transparent transition-all">
                                                <option value="">Select Type</option>
                                                <option value="financial_information">Financial Information</option>
                                                <option value="annual_reports">Annual Reports</option>
                                                <option value="stock_performance">Stock Performance</option>
                                                <option value="dividend_information">Dividend Information</option>
                                                <option value="shareholder_services">Shareholder Services</option>
                                                <option value="corporate_governance">Corporate Governance</option>
                                                <option value="general_inquiry">General Inquiry</option>
                                            </select>
                                            <span class="text-red-500 text-sm" id="inquiry_type_error"></span>
                                        </div>
                                    </div>
                                    <div>
                                        <label class="block text-aufg-text-secondary font-medium mb-1 text-sm">Message <span class="text-red-500">*</span></label>
                                        <textarea name="message" rows="3" required class="w-full p-2.5 border border-aufg-border-light rounded-lg focus:ring-2 focus:ring-aufg-primary focus:border-transparent transition-all"></textarea>
                                        <span class="text-red-500 text-sm" id="message_error"></span>
                                    </div>
                                    <div class="flex justify-end">
                                        <button type="submit" id="submit-btn" class="bg-aufg-gradient text-white px-8 py-2.5 rounded-lg font-medium hover:opacity-90 transition-opacity">
                                            Send Inquiry
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Board Members Section -->
        <div class="mb-20">
            <div class="text-center mb-16">
                <h2 class="font-bold text-aufg-primary-darker mb-6 font-poppins animate-fade-in-up uppercase" style="font-size: 40px; font-weight: 700;">
                    Board <span class="bg-gradient-to-r from-aufg-primary to-aufg-primary-dark bg-clip-text text-transparent">Members</span>
                </h2>
                <p class="text-aufg-text-secondary max-w-4xl mx-auto leading-relaxed animate-fade-in-up" style="font-size: 1rem; line-height: 1.5em; animation-delay: 0.2s;">
                    Our experienced <strong class="text-aufg-primary">board members</strong> providing strategic guidance and governance oversight
                </p>
            </div>

            <div class="grid md:grid-cols-1 lg:grid-cols-3 gap-8">
                @foreach($boardMembers as $member)
                <div class="bg-white border border-aufg-border-light rounded-3xl p-6 text-center shadow-lg hover:shadow-xl transition-all duration-300">
                    <div class="w-32 h-32 bg-aufg-bg-light rounded-full mx-auto mb-4 flex items-center justify-center overflow-hidden">
                        @if($member->image && file_exists(public_path($member->image)))
                            <img src="{{ asset($member->image) }}" alt="{{ $member->name }}" class="w-full h-full object-cover">
                        @elseif($member->image && file_exists(public_path('storage/' . $member->image)))
                            <img src="{{ asset('storage/' . $member->image) }}" alt="{{ $member->name }}" class="w-full h-full object-cover">
                        @else
                            <svg class="w-16 h-16 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                            </svg>
                        @endif
                    </div>
                    <h3 class="text-xl font-bold text-aufg-primary-darker mb-1">{{ $member->name }}</h3>
                    <p class="text-aufg-primary font-semibold mb-2">{{ $member->position }}</p>
                    <p class="text-aufg-text-secondary text-sm">{{ $member->description }}</p>
                </div>
                @endforeach
            </div>
        </div>

        <!-- CEO Section -->
        <div class="mb-20">
            <div class="text-center mb-16">
                <h2 class="font-bold text-aufg-primary-darker mb-6 font-poppins animate-fade-in-up uppercase" style="font-size: 40px; font-weight: 700;">
                    Chief Executive <span class="bg-gradient-to-r from-aufg-primary to-aufg-primary-dark bg-clip-text text-transparent">Officer</span>
                </h2>
                <p class="text-aufg-text-secondary max-w-4xl mx-auto leading-relaxed animate-fade-in-up" style="font-size: 1rem; line-height: 1.5em; animation-delay: 0.2s;">
                    Meet our <strong class="text-aufg-primary">Chief Executive Officer</strong> leading UFG's strategic vision and operational excellence
                </p>
            </div>

            @if($ceo)
            <div class="flex justify-center">
                <div class="bg-white border border-aufg-border-light rounded-3xl p-8 text-center shadow-lg hover:shadow-xl transition-all duration-300 max-w-md">
                    <div class="w-40 h-40 bg-aufg-bg-light rounded-full mx-auto mb-6 flex items-center justify-center overflow-hidden">
                        @if($ceo->image && file_exists(public_path($ceo->image)))
                            <img src="{{ asset($ceo->image) }}" alt="{{ $ceo->name }}" class="w-full h-full object-cover">
                        @elseif($ceo->image && file_exists(public_path('storage/' . $ceo->image)))
                            <img src="{{ asset('storage/' . $ceo->image) }}" alt="{{ $ceo->name }}" class="w-full h-full object-cover">
                        @else
                            <svg class="w-20 h-20 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                            </svg>
                        @endif
                    </div>
                    <h3 class="text-2xl font-bold text-aufg-primary-darker mb-2">{{ $ceo->name }}</h3>
                    <p class="text-aufg-primary font-semibold mb-4 text-lg">{{ $ceo->position }}</p>
                    <p class="text-aufg-text-secondary">{{ $ceo->description }}</p>
                </div>
            </div>
            @endif
        </div>

        <!-- Executive Management Section -->
        <div class="mb-20">
            <div class="text-center mb-16">
                <h2 class="font-bold text-aufg-primary-darker mb-6 font-poppins animate-fade-in-up uppercase" style="font-size: 40px; font-weight: 700;">
                    Executive <span class="bg-gradient-to-r from-aufg-primary to-aufg-primary-dark bg-clip-text text-transparent">Management</span>
                </h2>
                <p class="text-aufg-text-secondary max-w-4xl mx-auto leading-relaxed animate-fade-in-up" style="font-size: 1rem; line-height: 1.5em; animation-delay: 0.2s;">
                    Our senior leadership team driving operational excellence and strategic execution across all business functions
                </p>
            </div>

            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                @foreach($executiveManagement as $member)
                <div class="bg-white border border-aufg-border-light rounded-3xl p-6 text-center shadow-lg hover:shadow-xl transition-all duration-300">
                    <div class="w-28 h-28 bg-gray-200 rounded-full mx-auto mb-4 flex items-center justify-center overflow-hidden">
                        @if($member->image && file_exists(public_path($member->image)))
                            <img src="{{ asset($member->image) }}" alt="{{ $member->name }}" class="w-full h-full object-cover">
                        @elseif($member->image && file_exists(public_path('storage/' . $member->image)))
                            <img src="{{ asset('storage/' . $member->image) }}" alt="{{ $member->name }}" class="w-full h-full object-cover">
                        @else
                            <svg class="w-12 h-12 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                            </svg>
                        @endif
                    </div>
                    <h3 class="text-lg font-bold text-aufg-primary-darker mb-1">{{ $member->name }}</h3>
                    <p class="text-aufg-primary font-semibold mb-2 text-sm">{{ $member->position }}</p>
                    <p class="text-aufg-text-secondary text-xs">{{ $member->description }}</p>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>

<!-- Financial Reports Section -->
<section class="pt-8 pb-20 bg-aufg-light">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Section Header -->
        <div class="text-center mb-2">
            <h2 class="font-bold text-aufg-primary-darker mb-6 font-poppins animate-fade-in-up uppercase" style="font-size: 40px; font-weight: 700;">
                Financial <span class="bg-gradient-to-r from-aufg-primary to-aufg-primary-dark bg-clip-text text-transparent">Reports</span>
            </h2>
            <p class="text-aufg-text-secondary max-w-4xl mx-auto leading-relaxed animate-fade-in-up" style="font-size: 1rem; line-height: 1.5em; animation-delay: 0.2s;">
                Access our comprehensive financial reports, governance documents, and annual reports
            </p>
        </div>
        
        <!-- Reports Link Card -->
        <div class="text-center">
            <div class="bg-white rounded-2xl p-12 shadow-lg hover:shadow-xl transition-all duration-300 inline-block max-w-2xl">
                <div class="flex items-center justify-center mb-6">
                    <div class="bg-aufg-gradient text-white p-6 rounded-full mr-6">
                        <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
                        </svg>
                    </div>
                    <div class="text-left">
                        <h3 class="text-2xl font-bold text-aufg-primary-darker mb-3">Financial Reports & Documents</h3>
                        <p class="text-aufg-text-secondary mb-6 text-lg">Explore our detailed financial reports, board resolutions, and annual statements organized by category</p>
                        <a href="{{ route('reports') }}" class="inline-flex items-center px-8 py-4 bg-aufg-gradient text-white rounded-lg hover:opacity-90 transition-opacity font-semibold text-lg">
                            <span class="mr-3">View All Reports</span>
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Our Location Section -->
<section class="py-20 bg-white">
    <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 bg-gray-200 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>
            </div>
        </div>
    </div>
</section>

<!-- Investor FAQs Section -->
<section class="pt-2 pb-20 bg-aufg-light">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Section Header -->
        <div class="text-center mb-16">
            <h2 class="font-bold text-aufg-primary-darker mb-6 font-poppins animate-fade-in-up" style="font-size: 40px; font-weight: 700;">
                Investor <span class="bg-gradient-to-r from-aufg-primary to-aufg-primary-dark bg-clip-text text-transparent">FAQs</span>
            </h2>
            <p class="text-aufg-text-secondary max-w-3xl mx-auto leading-relaxed animate-fade-in-up" style="font-size: 18px; animation-delay: 0.2s;">
                Find answers to frequently asked questions about investing in Arabian United Float Glass Company (UFG)
            </p>
        </div>
        
        <!-- FAQ Items -->
        <div class="max-w-4xl mx-auto">
            <div class="space-y-6">
                <!-- FAQ 1 -->
                <div class="bg-white rounded-3xl shadow-lg border border-gray-100 overflow-hidden">
                    <button class="faq-button w-full px-8 py-6 text-left flex justify-between items-center hover:bg-aufg-light-hover transition-colors duration-300" onclick="toggleFAQ('faq1')">
                        <h3 class="font-semibold text-aufg-primary-darker text-lg">Is Arabian United Float Glass Company (UFG) publicly traded?</h3>
                        <svg class="faq-icon w-6 h-6 text-aufg-primary transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </button>
                    <div id="faq1" class="faq-content px-8">
                        <p class="text-aufg-text-secondary leading-relaxed">
                            Yes, UFG is publicly traded on the Saudi Stock Exchange (Tadawul) under the symbol "2310". Our shares are available for trading and we maintain full compliance with Tadawul regulations and reporting requirements.
                        </p>
                    </div>
                </div>

                <!-- FAQ 2 -->
                <div class="bg-white rounded-3xl shadow-lg border border-gray-100 overflow-hidden">
                    <button class="faq-button w-full px-8 py-6 text-left flex justify-between items-center hover:bg-aufg-light-hover transition-colors duration-300" onclick="toggleFAQ('faq2')">
                        <h3 class="font-semibold text-aufg-primary-darker text-lg">How can I access UFG's financial reports and statements?</h3>
                        <svg class="faq-icon w-6 h-6 text-aufg-primary transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </button>
                    <div id="faq2" class="faq-content px-8">
                        <p class="text-aufg-text-secondary leading-relaxed">
                            All financial reports, including quarterly and annual statements, are available in the Financial Reports section above. You can also access them through our Tadawul profile or contact our Investor Relations team for assistance.
                        </p>
                    </div>
                </div>

                <!-- FAQ 3 -->
                <div class="bg-white rounded-3xl shadow-lg border border-gray-100 overflow-hidden">
                    <button class="faq-button w-full px-8 py-6 text-left flex justify-between items-center hover:bg-aufg-light-hover transition-colors duration-300" onclick="toggleFAQ('faq3')">
                        <h3 class="font-semibold text-aufg-primary-darker text-lg">Does UFG pay dividends to shareholders?</h3>
                        <svg class="faq-icon w-6 h-6 text-aufg-primary transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </button>
                    <div id="faq3" class="faq-content px-8">
                        <p class="text-aufg-text-secondary leading-relaxed">
                            UFG has a strong track record of returning value to shareholders through regular dividend payments. Dividend decisions are made by the Board of Directors based on company performance, cash flow, and growth investment requirements. Historical dividend information is available in our annual reports.
                        </p>
                    </div>
                </div>

                <!-- FAQ 4 -->
                <div class="bg-white rounded-3xl shadow-lg border border-gray-100 overflow-hidden">
                    <button class="faq-button w-full px-8 py-6 text-left flex justify-between items-center hover:bg-aufg-light-hover transition-colors duration-300" onclick="toggleFAQ('faq4')">
                        <h3 class="font-semibold text-aufg-primary-darker text-lg">What is UFG's current market capitalization?</h3>
                        <svg class="faq-icon w-6 h-6 text-aufg-primary transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </button>
                    <div id="faq4" class="faq-content px-8">
                        <p class="text-aufg-text-secondary leading-relaxed">
                            UFG's current market capitalization is approximately SAR 2.5 billion. For real-time stock information, please visit our Tadawul profile or contact our Investor Relations team for the most up-to-date market data.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
// Handle investor inquiry form submission
document.getElementById('investor-inquiry-form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    // Clear previous errors
    document.querySelectorAll('[id$="_error"]').forEach(el => el.textContent = '');
    
    // Get form data
    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("investor-inquiries.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('Thank you for your inquiry! Our investor relations team will respond to you shortly.', 'success');
            // Reset form
            document.getElementById('investor-inquiry-form').reset();
        } else if (data.errors) {
            // Show validation errors
            Object.keys(data.errors).forEach(key => {
                const errorElement = document.getElementById(key + '_error');
                if (errorElement) {
                    errorElement.textContent = data.errors[key][0];
                }
            });
        } else {
            // Show generic error toast
            showToastMessage('There was an error submitting your inquiry. Please try again.', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToastMessage('There was an error submitting your inquiry. Please try again.', 'error');
    })
    .finally(() => {
        // Re-enable button
        submitBtn.disabled = false;
        submitBtn.textContent = originalText;
    });
});

// Toast Message Function (same as careers page)
function showToastMessage(message, type = 'success') {
    // Remove any existing toast
    const existingToast = document.querySelector('.investor-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 = 'investor-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
}

function toggleFAQ(faqId) {
    const content = document.getElementById(faqId);
    const button = content.previousElementSibling;
    const icon = button.querySelector('.faq-icon');
    
    // Close all other FAQs
    document.querySelectorAll('.faq-content').forEach(item => {
        if (item.id !== faqId) {
            item.classList.remove('active');
            item.previousElementSibling.querySelector('.faq-icon').classList.remove('rotated');
        }
    });
    
    // Toggle current FAQ
    content.classList.toggle('active');
    icon.classList.toggle('rotated');
}

// Smooth scroll animations
document.addEventListener('DOMContentLoaded', function() {
    // Intersection Observer for 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);
    });
});
</script>
@endpush