@extends('layouts.app')

@push('pageTitle')
    {{ __('labels.hotline') }}
@endpush

@push('css')
<style>
    .hotline-page {
        min-height: calc(100vh - 200px);
        background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
        padding: 2rem 0;
    }
    
    .hotline-card {
        border: none;
        border-radius: 20px;
        box-shadow: 0 15px 35px rgba(33, 103, 243, 0.12);
        overflow: hidden;
        background: white;
        transition: transform 0.3s ease;
    }
    
    .hotline-card:hover {
        transform: translateY(-5px);
    }
    
    .card-header-gradient {
        background: linear-gradient(135deg, #2170f3 0%, #4d93ff 100%);
        color: white;
        padding: 2.5rem 1rem;
        border-radius: 20px 20px 0 0 !important;
    }
    
    .phone-icon-wrapper {
        width: 80px;
        height: 80px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.5rem;
        border: 3px solid rgba(255, 255, 255, 0.3);
    }
    
    .phone-icon {
        font-size: 2.5rem;
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }
    
    .phone-number-display {
        background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-size: 3rem;
        font-weight: 800;
        letter-spacing: 1px;
        margin: 1.5rem 0;
        text-shadow: 0 2px 10px rgba(255, 107, 107, 0.2);
    }
    
    .call-button {
        background: linear-gradient(135deg, #2170f3 0%, #4d93ff 100%);
        color: white;
        border: none;
        padding: 1rem 2.5rem;
        border-radius: 50px;
        font-weight: 600;
        font-size: 1.1rem;
        transition: all 0.3s ease;
        box-shadow: 0 5px 15px rgba(33, 103, 243, 0.3);
        display: inline-flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
    }
    
    .call-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(33, 103, 243, 0.4);
        color: white;
    }
    
    .call-button i {
        font-size: 1.2rem;
    }
    
    .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin-top: 2.5rem;
    }
    
    .feature-item {
        text-align: center;
        padding: 1.5rem;
        background: #f8faff;
        border-radius: 15px;
        border-left: 4px solid #2170f3;
        transition: transform 0.3s ease;
    }
    
    .feature-item:hover {
        transform: translateX(5px);
        background: white;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }
    
    .feature-icon {
        font-size: 2rem;
        margin-bottom: 1rem;
        color: #2170f3;
    }
    
    .business-hours {
        background: linear-gradient(135deg, #f8f9ff 0%, #eef2ff 100%);
        border-radius: 15px;
        padding: 1.5rem;
        margin-top: 2rem;
        border-left: 4px solid #4CAF50;
    }
    
    .hours-badge {
        background: #4CAF50;
        color: white;
        padding: 0.5rem 1.5rem;
        border-radius: 50px;
        font-weight: 600;
        display: inline-block;
        margin-bottom: 1rem;
    }
    
    .support-team-img {
        max-width: 200px;
        margin: 0 auto;
        filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
    }
    
    .emergency-note {
        background: #fff3cd;
        border: 2px dashed #ffc107;
        border-radius: 15px;
        padding: 1rem;
        margin-top: 2rem;
        text-align: center;
        animation: fadeIn 2s ease-in-out infinite alternate;
    }
    
    @keyframes fadeIn {
        from { opacity: 0.9; }
        to { opacity: 1; }
    }
    
    .whatsapp-contact {
        background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
        color: white;
        border-radius: 15px;
        padding: 1.5rem;
        margin-top: 1.5rem;
    }
</style>
@endpush

@section('content')
<div class="hotline-page">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-8 col-lg-10">
                
                @include('components.common.flush-message')

                <div class="card hotline-card">
                    
                    <!-- Header with Gradient -->
                    <div class="card-header-gradient text-center">
                        <div class="phone-icon-wrapper">
                            <div class="phone-icon">📞</div>
                        </div>
                        <h1 class="display-6 fw-bold mb-3 text-white">{{ __('labels.customer_support_hotline') }}</h1>
                        <p class="lead mb-0 opacity-90 text-white">
                            {{ __('labels.customer_support_description') }}
                        </p>
                    </div>

                    <div class="card-body p-4 p-md-5">
                        
                        <!-- Main Phone Number Display -->
                        <div class="text-center mb-4">
                            <h4 class="text-muted mb-3">
                                <i class="bi bi-telephone-outbound me-2"></i>
                                {{ __('labels.call_us_now') }}
                            </h4>
                            <div class="phone-number-display">
                                04551 - 8908912
                            </div>
                            
                            <!-- Call Button -->
                            <a href="tel:045518908912" class="call-button mt-3">
                                <i class="bi bi-telephone-fill"></i>
                                {{ __('labels.call_now') }}
                            </a>
                        </div>

                        <!-- Business Hours -->
                        <div class="business-hours text-center">
                            <span class="hours-badge">
                                <i class="bi bi-clock-history me-2"></i>
                                {{ __('labels.business_hours') }}
                            </span>
                            <h5 class="fw-bold mb-2">
                                {{ __('labels.available_monday_to_friday') }}
                            </h5>
                            <p class="mb-0 fs-5 fw-semibold">
                                🕘 9:00 AM – 6:00 PM
                            </p>
                            <p class="text-muted mt-2 mb-0">
                                <small>
                                    <i class="bi bi-info-circle me-1"></i>
                                    {{ __('labels.extended_support_weekends') }}
                                </small>
                            </p>
                        </div>

                        <!-- Features Grid -->
                        <div class="features-grid">
                            <div class="feature-item">
                                <div class="feature-icon">👥</div>
                                <h5 class="fw-bold">{{ __('labels.expert_team') }}</h5>
                                <p class="text-muted mb-0">{{ __('labels.expert_team_desc') }}</p>
                            </div>
                            
                            <div class="feature-item">
                                <div class="feature-icon">⚡</div>
                                <h5 class="fw-bold">{{ __('labels.quick_response') }}</h5>
                                <p class="text-muted mb-0">{{ __('labels.quick_response_desc') }}</p>
                            </div>
                            
                            <div class="feature-item">
                                <div class="feature-icon">🛠️</div>
                                <h5 class="fw-bold">{{ __('labels.technical_support') }}</h5>
                                <p class="text-muted mb-0">{{ __('labels.technical_support_desc') }}</p>
                            </div>
                        </div>

                        <!-- WhatsApp Contact Option -->
                        {{-- <div class="whatsapp-contact text-center">
                            <div class="d-flex align-items-center justify-content-center gap-3 mb-3">
                                <div style="font-size: 2.5rem;">💬</div>
                                <div class="text-start">
                                    <h5 class="fw-bold mb-1">{{ __('labels.whatsapp_support') }}</h5>
                                    <p class="mb-0 opacity-90">{{ __('labels.whatsapp_support_desc') }}</p>
                                </div>
                            </div>
                            <a href="https://wa.me/491234567890" 
                               class="btn btn-light fw-bold" 
                               target="_blank"
                               style="border-radius: 25px; padding: 0.5rem 2rem;">
                                <i class="bi bi-whatsapp me-2"></i>
                                {{ __('labels.chat_on_whatsapp') }}
                            </a>
                        </div> --}}

                        <!-- Emergency Note -->
                        {{-- <div class="emergency-note">
                            <h6 class="fw-bold mb-2">
                                <i class="bi bi-exclamation-triangle-fill me-2"></i>
                                {{ __('labels.emergency_note_title') }}
                            </h6>
                            <p class="mb-0 small">
                                {{ __('labels.emergency_note_desc') }}
                            </p>
                        </div> --}}

                    </div>
                </div>

                <!-- Support Illustration -->
                <div class="text-center mt-4">
                    <img src="https://cdn-icons-png.flaticon.com/512/3059/3059986.png" 
                         alt="Customer Support" 
                         class="support-team-img">
                    <p class="text-muted mt-3">
                        <small>{{ __('labels.we_are_here_to_help') }}</small>
                    </p>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script>
    // Add click animation to call button
    document.querySelectorAll('.call-button').forEach(button => {
        button.addEventListener('click', function() {
            this.style.transform = 'scale(0.95)';
            setTimeout(() => {
                this.style.transform = '';
            }, 200);
        });
    });

    // Animate phone number on hover
    const phoneNumber = document.querySelector('.phone-number-display');
    phoneNumber.addEventListener('mouseenter', function() {
        this.style.transform = 'scale(1.05)';
        this.style.transition = 'transform 0.3s ease';
    });
    
    phoneNumber.addEventListener('mouseleave', function() {
        this.style.transform = 'scale(1)';
    });

    // Add greeting based on time of day
    document.addEventListener('DOMContentLoaded', function() {
        const hour = new Date().getHours();
        let greeting = "{{ __('labels.greeting_default') }}";
        
        if (hour < 12) {
            greeting = "{{ __('labels.greeting_morning') }}";
        } else if (hour < 18) {
            greeting = "{{ __('labels.greeting_afternoon') }}";
        } else {
            greeting = "{{ __('labels.greeting_evening') }}";
        }
        
        // Optional: Display greeting in console or as a notification
        console.log(greeting + " {{ __('labels.how_can_we_help') }}");
    });
</script>
@endpush