@extends('layouts.app')

@section('title', 'About LECL - London Education and Consulting LTD | Our Story & Mission')
@section('description',
    'Discover LECL\'s journey as a premier international student recruitment agency. Learn about our
    mission, values, global presence, and commitment to opening doors to world-class education across UK, South Asia,
    Africa, and Europe.')

    {{-- Open Graph Meta Tags --}}
@section('og_title', 'About LECL - London Education and Consulting LTD | Our Story & Mission')
@section('og_description',
    'Discover LECL\'s journey as a premier international student recruitment agency with offices
    across UK, South Asia, Africa, and Europe. Learn about our mission to open doors to global education.')

    {{-- Twitter Card Meta Tags --}}
@section('twitter_title', 'About LECL - Our Story & Mission | Educational Consultancy')
@section('twitter_description',
    'Discover LECL\'s journey as a premier international student recruitment agency. Learn
    about our mission to open doors to global education worldwide.')

@section('content')
    <!-- Hero Section -->
    <section class="about-hero position-relative overflow-hidden"
        style="background: linear-gradient(135deg, var(--primary-navy) 0%, var(--primary-blue) 100%); min-height: 70vh; display: flex; align-items: center;">
        <!-- Animated Background Elements -->
        <div class="position-absolute w-100 h-100" style="opacity: 0.1;">
            <div class="position-absolute"
                style="top: 10%; left: 10%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%); border-radius: 50%; animation: float 6s ease-in-out infinite;">
            </div>
            <div class="position-absolute"
                style="top: 60%; right: 15%; width: 150px; height: 150px; background: radial-gradient(circle, rgba(255,193,7,0.4) 0%, transparent 70%); border-radius: 50%; animation: float 8s ease-in-out infinite reverse;">
            </div>
            <div class="position-absolute"
                style="bottom: 20%; left: 20%; width: 100px; height: 100px; background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%); border-radius: 50%; animation: float 10s ease-in-out infinite;">
            </div>
        </div>

        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-8 mx-auto text-center">
                    <h1 class="display-3 fw-bold text-white mb-4 fade-in"
                        style="line-height: 1.2; letter-spacing: -0.02em;">{{ $heroSection->title ?? 'About LECL' }}</h1>
                    <p class="lead text-white mb-5 fade-in stagger-1"
                        style="font-size: 1.3rem; font-weight: 300; opacity: 0.95; max-width: 700px; margin: 0 auto;">
                        {{ $heroSection->content ?? 'Pioneering excellence in international education for over a decade, connecting ambitious students with world-class universities and transforming dreams into achievements.' }}
                    </p>
                    <div class="fade-in stagger-2">
                        <a href="{{ $heroSection && $heroSection->data && isset($heroSection->data['button_link']) ? $heroSection->data['button_link'] : '#our-story' }}"
                            class="btn btn-lg px-5 py-3 magnetic"
                            style="background: var(--accent-gold); border: none; color: var(--white); font-weight: 600; border-radius: 50px; box-shadow: 0 8px 25px rgba(255, 193, 7, 0.3);">{{ $heroSection && $heroSection->data && isset($heroSection->data['button_text']) ? $heroSection->data['button_text'] : 'OUR JOURNEY' }}</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Our Story Section -->
    <section id="our-story" class="py-5" style="background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);">
        <div class="container">
            <div class="row align-items-center mb-5">
                <div class="col-lg-6 mb-4 mb-lg-0">
                    <div class="slide-in-left">
                        <h2 class="display-5 fw-bold mb-4" style="color: var(--primary-navy);">
                            {{ $storySection->title ?? 'Our Story' }}</h2>
                        @if ($storySection && $storySection->content)
                            {!! $storySection->content !!}
                        @else
                            <p class="lead mb-4" style="color: #6c757d; line-height: 1.8;">Founded with a vision to
                                democratize
                                global education, LECL has grown from a small consultancy to an international powerhouse in
                                student recruitment and educational guidance.</p>
                            <p class="mb-4" style="color: #6c757d; line-height: 1.8;">Our journey began with a simple
                                belief:
                                every student deserves access to world-class education, regardless of their geographical
                                location or background. Today, we stand as a testament to that belief, having successfully
                                guided thousands of students toward their academic dreams.</p>
                        @endif
                        <div class="d-flex align-items-center">
                            @if ($storySection && $storySection->data && isset($storySection->data['statistics']))
                                @foreach ($storySection->data['statistics'] as $stat)
                                    <div class="me-4">
                                        <h3 class="fw-bold mb-0" style="color: var(--accent-gold);">{{ $stat['number'] }}
                                        </h3>
                                        <small class="text-muted">{{ $stat['label'] }}</small>
                                    </div>
                                @endforeach
                            @else
                                <div class="me-4">
                                    <h3 class="fw-bold mb-0" style="color: var(--accent-gold);">15,000+</h3>
                                    <small class="text-muted">Students Guided</small>
                                </div>
                                <div class="me-4">
                                    <h3 class="fw-bold mb-0" style="color: var(--accent-gold);">500+</h3>
                                    <small class="text-muted">Partner Universities</small>
                                </div>
                                <div>
                                    <h3 class="fw-bold mb-0" style="color: var(--accent-gold);">50+</h3>
                                    <small class="text-muted">Countries Served</small>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="slide-in-right">
                        <div class="position-relative">
                            <div class="bg-primary rounded-4 p-5"
                                style="background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-navy) 100%) !important;">
                                <div class="text-white">
                                    <i class="bi bi-quote display-4 mb-3" style="opacity: 0.3;"></i>
                                    <blockquote class="blockquote mb-4">
                                        <p class="mb-0" style="font-size: 1.1rem; line-height: 1.7;">
                                            @if ($storySection && $storySection->data && isset($storySection->data['quote']['text']))
                                                "{{ $storySection->data['quote']['text'] }}"
                                            @else
                                                "Education is the most powerful weapon which you can use to change the
                                                world. At LECL, we don't just provide educational opportunities; we
                                                transform lives and shape futures."
                                            @endif
                                        </p>
                                    </blockquote>
                                    <footer class="blockquote-footer text-white-50">
                                        <cite title="Source Title">
                                            @if ($storySection && $storySection->data && isset($storySection->data['quote']['author']))
                                                {{ $storySection->data['quote']['author'] }}
                                            @else
                                                LECL Leadership Team
                                            @endif
                                        </cite>
                                    </footer>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- Call to Action Section -->
    <section class="py-5" style="background: linear-gradient(135deg, var(--primary-navy) 0%, var(--primary-blue) 100%);">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto text-center">
                    <h2 class="display-5 fw-bold text-white mb-4 fade-in">
                        {{ $ctaSection->title ?? 'Ready to Begin Your Journey?' }}</h2>
                    <p class="lead text-white mb-5 fade-in stagger-1" style="opacity: 0.9;">
                        {{ $ctaSection->content ?? 'Join thousands of successful students who have achieved their academic dreams with LECL. Let us help you open the door to your future.' }}
                    </p>
                    <div class="d-flex flex-column flex-sm-row gap-3 justify-content-center fade-in stagger-2">
                        @if ($ctaSection && $ctaSection->data && isset($ctaSection->data['buttons']))
                            @foreach ($ctaSection->data['buttons'] as $button)
                                @if ($button['type'] === 'primary')
                                    <a href="{{ $button['link'] }}" class="btn btn-lg px-5 py-3 magnetic"
                                        style="background: var(--accent-gold); border: none; color: var(--white); font-weight: 600; border-radius: 50px; box-shadow: 0 8px 25px rgba(255, 193, 7, 0.3);">{{ $button['text'] }}</a>
                                @else
                                    <a href="{{ $button['link'] }}" class="btn btn-lg btn-outline-light px-5 py-3 magnetic"
                                        style="border: 2px solid rgba(255,255,255,0.8); border-radius: 50px; font-weight: 600;">{{ $button['text'] }}</a>
                                @endif
                            @endforeach
                        @else
                            <a href="{{ route('contact') }}" class="btn btn-lg px-5 py-3 magnetic"
                                style="background: var(--accent-gold); border: none; color: var(--white); font-weight: 600; border-radius: 50px; box-shadow: 0 8px 25px rgba(255, 193, 7, 0.3);">GET
                                STARTED TODAY</a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection