@extends('layouts.app')

@section('title', __('general.terms_conditions') . ' - ' . __('general.company_name'))

@section('content')
    <!-- Hero Section -->
    <section style="padding: 3rem 0; background: rgba(255, 215, 0, 0.05);">
        <div class="container text-center">
            <h1
                style="font-family: 'Playfair Display', serif; font-size: 3rem; color: var(--primary-gold); margin-bottom: 1rem;">
                {{ __('general.terms_conditions') }}
            </h1>
            <p style="font-size: 1.2rem; opacity: 0.8; max-width: 600px; margin: 0 auto;">
                {{ __('Please read these terms and conditions carefully before using our services') }}
            </p>
            <p style="opacity: 0.7; margin-top: 1rem;">{{ __('Last updated: January 2025') }}</p>
        </div>
    </section>

    <!-- Terms Content -->
    <section style="padding: 5rem 0;">
        <div class="container">
            <div class="glass-morphism" style="padding: 4rem; max-width: 900px; margin: 0 auto;">

                <!-- Introduction -->
                <div style="margin-bottom: 3rem;">
                    <h2 style="color: var(--primary-gold); margin-bottom: 1.5rem; font-size: 1.8rem;">1.
                        {{ __('Introduction') }}</h2>
                    <p style="line-height: 1.8; margin-bottom: 1rem; opacity: 0.9;">
                        {{ __('Welcome to Q ROVER. These Terms and Conditions ("Terms") govern your use of our car rental services and website. By accessing our services, you agree to be bound by these Terms.') }}
                    </p>
                    <p style="line-height: 1.8; opacity: 0.9;">
                        {{ __('Q ROVER is operated by Q ROVER LLC, a company registered in the Sultanate of Oman. Our services are subject to Omani law and regulations.') }}
                    </p>
                </div>

                <!-- Rental Agreement -->
                <div style="margin-bottom: 3rem;">
                    <h2 style="color: var(--primary-gold); margin-bottom: 1.5rem; font-size: 1.8rem;">2.
                        {{ __('Rental Agreement') }}</h2>
                    <div style="margin-bottom: 2rem;">
                        <h3 style="color: var(--primary-gold); margin-bottom: 1rem; font-size: 1.3rem;">2.1
                            {{ __('Eligibility') }}</h3>
                        <ul style="line-height: 1.8; opacity: 0.9; padding-left: 2rem;">
                            <li style="margin-bottom: 0.5rem;">
                                {{ __('Must be at least 21 years old (25 for luxury vehicles)') }}</li>
                            <li style="margin-bottom: 0.5rem;">{{ __('Valid driving license for at least 2 years') }}</li>
                            <li style="margin-bottom: 0.5rem;">
                                {{ __('International Driving Permit for non-GCC residents') }}</li>
                            <li style="margin-bottom: 0.5rem;">{{ __('Valid passport or Emirates ID') }}</li>
                            <li style="margin-bottom: 0.5rem;">{{ __('Credit card in the renter\'s name') }}</li>
                        </ul>
                    </div>

                    <div style="margin-bottom: 2rem;">
                        <h3 style="color: var(--primary-gold); margin-bottom: 1rem; font-size: 1.3rem;">2.2
                            {{ __('Rental Period') }}</h3>
                        <p style="line-height: 1.8; opacity: 0.9;">
                            {{ __('The rental period begins at the agreed pickup time and ends at the agreed return time. Late returns may incur additional charges at the daily rate.') }}
                        </p>
                    </div>
                </div>

                <!-- Payment Terms -->
                <div style="margin-bottom: 3rem;">
                    <h2 style="color: var(--primary-gold); margin-bottom: 1.5rem; font-size: 1.8rem;">3.
                        {{ __('Payment Terms') }}</h2>
                    <div style="margin-bottom: 2rem;">
                        <h3 style="color: var(--primary-gold); margin-bottom: 1rem; font-size: 1.3rem;">3.1
                            {{ __('Rental Charges') }}</h3>
                        <ul style="line-height: 1.8; opacity: 0.9; padding-left: 2rem;">
                            <li style="margin-bottom: 0.5rem;">{{ __('Daily rental rate as quoted at booking') }}</li>
                            <li style="margin-bottom: 0.5rem;">{{ __('Additional driver fees (if applicable)') }}</li>
                            <li style="margin-bottom: 0.5rem;">{{ __('Fuel charges (if not returned with full tank)') }}
                            </li>
                            <li style="margin-bottom: 0.5rem;">{{ __('Late return fees') }}</li>
                            <li style="margin-bottom: 0.5rem;">{{ __('Traffic fines and violations') }}</li>
                        </ul>
                    </div>

                    <div style="margin-bottom: 2rem;">
                        <h3 style="color: var(--primary-gold); margin-bottom: 1rem; font-size: 1.3rem;">3.2
                            {{ __('Security Deposit') }}</h3>
                        <p style="line-height: 1.8; opacity: 0.9;">
                            {{ __('A security deposit is required and will be pre-authorized on your credit card. The deposit will be released within 7-14 business days after the vehicle is returned in good condition.') }}
                        </p>
                    </div>
                </div>

                <!-- Vehicle Use -->
                <div style="margin-bottom: 3rem;">
                    <h2 style="color: var(--primary-gold); margin-bottom: 1.5rem; font-size: 1.8rem;">4.
                        {{ __('Vehicle Use and Restrictions') }}</h2>
                    <div style="margin-bottom: 2rem;">
                        <h3 style="color: var(--primary-gold); margin-bottom: 1rem; font-size: 1.3rem;">4.1
                            {{ __('Permitted Use') }}</h3>
                        <p style="line-height: 1.8; margin-bottom: 1rem; opacity: 0.9;">
                            {{ __('The vehicle may only be used for lawful purposes and in accordance with traffic laws and regulations of Oman.') }}
                        </p>
                    </div>

                    <div style="margin-bottom: 2rem;">
                        <h3 style="color: var(--primary-gold); margin-bottom: 1rem; font-size: 1.3rem;">4.2
                            {{ __('Prohibited Activities') }}</h3>
                        <ul style="line-height: 1.8; opacity: 0.9; padding-left: 2rem;">
                            <li style="margin-bottom: 0.5rem;">{{ __('Racing, rallying, or competitive driving') }}</li>
                            <li style="margin-bottom: 0.5rem;">{{ __('Off-road driving (unless specifically permitted)') }}
                            </li>
                            <li style="margin-bottom: 0.5rem;">{{ __('Transporting illegal substances or materials') }}</li>
                            <li style="margin-bottom: 0.5rem;">
                                {{ __('Subletting or transferring the rental to third parties') }}</li>
                            <li style="margin-bottom: 0.5rem;">{{ __('Driving under the influence of alcohol or drugs') }}
                            </li>
                            <li style="margin-bottom: 0.5rem;">{{ __('Smoking in the vehicle') }}</li>
                        </ul>
                    </div>
                </div>

                <!-- Insurance and Liability -->
                <div style="margin-bottom: 3rem;">
                    <h2 style="color: var(--primary-gold); margin-bottom: 1.5rem; font-size: 1.8rem;">5.
                        {{ __('Insurance and Liability') }}</h2>
                    <div style="margin-bottom: 2rem;">
                        <h3 style="color: var(--primary-gold); margin-bottom: 1rem; font-size: 1.3rem;">5.1
                            {{ __('Insurance Coverage') }}</h3>
                        <p style="line-height: 1.8; margin-bottom: 1rem; opacity: 0.9;">
                            {{ __('All vehicles include comprehensive insurance coverage. However, the renter remains liable for:') }}
                        </p>
                        <ul style="line-height: 1.8; opacity: 0.9; padding-left: 2rem;">
                            <li style="margin-bottom: 0.5rem;">{{ __('Insurance deductible amount') }}</li>
                            <li style="margin-bottom: 0.5rem;">{{ __('Damage to tires, wheels, and undercarriage') }}</li>
                            <li style="margin-bottom: 0.5rem;">{{ __('Interior damage and cleaning fees') }}</li>
                            <li style="margin-bottom: 0.5rem;">{{ __('Loss of keys or remote controls') }}</li>
                        </ul>
                    </div>
                </div>

                <!-- Cancellation Policy -->
                <div style="margin-bottom: 3rem;">
                    <h2 style="color: var(--primary-gold); margin-bottom: 1.5rem; font-size: 1.8rem;">6.
                        {{ __('Cancellation Policy') }}</h2>
                    <ul style="line-height: 1.8; opacity: 0.9; padding-left: 2rem;">
                        <li style="margin-bottom: 0.5rem;">{{ __('Free cancellation up to 24 hours before pickup') }}</li>
                        <li style="margin-bottom: 0.5rem;">{{ __('50% charge for cancellations within 24 hours') }}</li>
                        <li style="margin-bottom: 0.5rem;">{{ __('100% charge for no-shows') }}</li>
                        <li style="margin-bottom: 0.5rem;">{{ __('Refunds processed within 7-14 business days') }}</li>
                    </ul>
                </div>

                <!-- Privacy Policy -->
                <div style="margin-bottom: 3rem;">
                    <h2 style="color: var(--primary-gold); margin-bottom: 1.5rem; font-size: 1.8rem;">7.
                        {{ __('general.privacy_policy') }}</h2>
                    <p style="line-height: 1.8; margin-bottom: 1rem; opacity: 0.9;">
                        {{ __('We collect and process personal information in accordance with our Privacy Policy. Your data is protected and used only for rental services and communication purposes.') }}
                    </p>
                    <p style="line-height: 1.8; opacity: 0.9;">
                        {{ __('We may share information with authorities as required by law or for safety and security purposes.') }}
                    </p>
                </div>

                <!-- Dispute Resolution -->
                <div style="margin-bottom: 3rem;">
                    <h2 style="color: var(--primary-gold); margin-bottom: 1.5rem; font-size: 1.8rem;">8.
                        {{ __('Dispute Resolution') }}</h2>
                    <p style="line-height: 1.8; margin-bottom: 1rem; opacity: 0.9;">
                        {{ __('Any disputes arising from these Terms or our services shall be resolved through:') }}
                    </p>
                    <ol style="line-height: 1.8; opacity: 0.9; padding-left: 2rem;">
                        <li style="margin-bottom: 0.5rem;">{{ __('Direct negotiation with Q ROVER management') }}</li>
                        <li style="margin-bottom: 0.5rem;">{{ __('Mediation through recognized mediation services') }}</li>
                        <li style="margin-bottom: 0.5rem;">{{ __('Arbitration under Omani law if necessary') }}</li>
                    </ol>
                </div>

                <!-- Contact Information -->
                <div style="margin-bottom: 3rem;">
                    <h2 style="color: var(--primary-gold); margin-bottom: 1.5rem; font-size: 1.8rem;">9.
                        {{ __('Contact Information') }}</h2>
                    <p style="line-height: 1.8; margin-bottom: 1rem; opacity: 0.9;">
                        {{ __('For questions about these Terms or our services, please contact us:') }}
                    </p>
                    <div style="background: rgba(255, 215, 0, 0.1); padding: 1.5rem; border-radius: 10px;">
                        <p style="margin-bottom: 0.5rem;"><strong>{{ __('general.email') }}:</strong> info@qrover.co</p>
                        <p style="margin-bottom: 0.5rem;"><strong>{{ __('general.phone') }}:</strong> +968 79077702</p>
                        <p style="margin-bottom: 0.5rem;"><strong>{{ __('general.website') }}:</strong> www.qrover.co</p>
                        <p style="margin-bottom: 0;"><strong>{{ __('general.address') }}:</strong> Al Khuwair, Muscat 112,
                            Sultanate of Oman</p>
                    </div>
                </div>

                <!-- Updates -->
                <div style="margin-bottom: 3rem;">
                    <h2 style="color: var(--primary-gold); margin-bottom: 1.5rem; font-size: 1.8rem;">10.
                        {{ __('Updates to Terms') }}</h2>
                    <p style="line-height: 1.8; opacity: 0.9;">
                        {{ __('Q ROVER reserves the right to update these Terms at any time. Changes will be posted on our website and take effect immediately. Continued use of our services constitutes acceptance of updated Terms.') }}
                    </p>
                </div>

                <!-- Agreement -->
                <div style="background: rgba(255, 215, 0, 0.1); padding: 2rem; border-radius: 15px; text-align: center;">
                    <h3 style="color: var(--primary-gold); margin-bottom: 1rem;">{{ __('Agreement Acknowledgment') }}</h3>
                    <p style="line-height: 1.8; opacity: 0.9; margin-bottom: 1.5rem;">
                        {{ __('By using Q ROVER services, you acknowledge that you have read, understood, and agree to be bound by these Terms and Conditions.') }}
                    </p>
                    <div style="display: flex; justify-content: center; gap: 1rem;">
                        <a href="{{ route('vehicles.index') }}" class="btn-primary" style="padding: 12px 25px;">
                            {{ __('Browse Vehicles') }}
                        </a>
                        <a href="{{ route('contact') }}" class="btn-secondary" style="padding: 12px 25px;">
                            {{ __('Contact Us') }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @push('styles')
        <style>
            .terms-content h2 {
                border-bottom: 2px solid var(--primary-gold);
                padding-bottom: 0.5rem;
            }

            .terms-content h3 {
                font-weight: 600;
            }

            .terms-content ul,
            .terms-content ol {
                margin-left: 1rem;
            }

            .terms-content li {
                position: relative;
            }

            .terms-content ul li::before {
                content: "•";
                color: var(--primary-gold);
                font-weight: bold;
                position: absolute;
                left: -1rem;
            }

            @media (max-width: 768px) {
                .terms-content {
                    padding: 2rem !important;
                }

                .terms-content h2 {
                    font-size: 1.5rem !important;
                }

                .terms-content h3 {
                    font-size: 1.2rem !important;
                }

                .agreement-buttons {
                    flex-direction: column !important;
                }
            }
        </style>
    @endpush
@endsection