@php
    /** @var \Illuminate\Support\Collection $milestones */
@endphp

@extends('v2-portal::app-layout', [
    'pageTitle'             => 'Nossa História — ' . config('app.name'),
    'pageDescription'       => 'Conheça a trajetória da SUCESU desde 1965. Marcos históricos que definiram o setor de TIC no Brasil.',
    'gtag'                  => ['page_context' => 'historia'],
    'schemas'               => [
        [
            '@context' => 'https://schema.org',
            '@type' => 'Article',
            'name' => 'Nossa História',
            'description' => 'Conheça a trajetória da SUCESU desde 1965.',
            'url' => route('v2.historia.portal.index', [], false)
        ]
    ],
    'fullWidthMain'         => true,
    'showHeader'            => false,
    'showMainHeader'        => false,
    'showMainFooter'        => false,
    'showFooter'            => false,
    'showAccessibilityBar'  => false,
    'showMainLeftArea'      => false,
    'showMainRightArea'     => false,
])

@section('main-section-area')

<style>
.milestone-card{border-radius:16px;overflow:hidden;transition:all .4s ease}
.milestone-card:hover{box-shadow:0 20px 50px rgba(0,0,0,.08)}
.milestone-img{width:100%;max-height:420px;object-fit:cover;border-radius:12px}
.milestone-period{display:inline-block;background:var(--tenant-primary, #1075ad);color:#fff;padding:6px 22px;border-radius:30px;font-size:14px;font-weight:600;letter-spacing:.5px;margin-bottom:16px}
.milestone-card h3{font-size:26px;margin-bottom:12px;color:var(--tenant-primary, #1075ad);font-weight:700}
.milestone-card p{color:#555;line-height:1.9;margin-bottom:10px;font-size:16px}
.milestone-accent{width:50px;height:4px;background:linear-gradient(90deg,#f7941d,#ffb347);margin:8px 0 20px;border-radius:3px}
.milestone-content{padding:20px 0}
@media(max-width:991px){.milestone-card{margin-bottom:20px}.milestone-img{margin-bottom:20px}}
</style>

{{-- HERO BREADCRUMB --}}
<div class="breadcrumb-wrapper bg-cover" style="background-image: url('{{ asset('assets/sucesu/img/hero/breadcrumb.png') }}');">
    <div class="container">
        <div class="page-heading">
            <ul class="breadcrumb-items">
                <li><a href="{{ url('/') }}">Home</a></li>
                <li><i class="bi bi-chevron-right mx-2"></i></li>
                <li>Nossa História</li>
            </ul>
            <h1>Nossa História</h1>
        </div>
    </div>
</div>

{{-- INTRO --}}
<section class="section-padding fix">
    <div class="container">
        <div class="section-title text-center">
            <span class="sub-title">Trajetória</span>
            <h2>A história da SUCESU se confunde com a própria história<br>da tecnologia da informação no Brasil</h2>
            <p class="mt-4 col-lg-8 mx-auto">Mais do que uma associação, ela foi o palco onde os primeiros usuários de computadores se reuniram para transformar um símbolo de status em uma ferramenta de negócios, e onde se travaram as batalhas que definiram os rumos do setor no país.</p>
        </div>
    </div>
</section>

{{-- MILESTONES TIMELINE --}}
@if($milestones->count() > 0)
    @foreach($milestones as $idx => $milestone)
        @php
            $isEven = $idx % 2 === 1;
            $bgClass = $isEven ? 'section-bg' : '';
            $media = $milestone->image;
        @endphp
        <section class="fix section-padding {{ $bgClass }}">
            <div class="container">
                <div class="milestone-card">
                    <div class="row g-5 align-items-center">
                        @if($isEven)
                            <div class="col-lg-6 order-lg-1">
                                <div class="milestone-content ps-lg-3">
                                    <div class="milestone-period">{{ $milestone->period }}</div>
                                    <h3>{{ $milestone->title }}</h3>
                                    <div class="milestone-accent"></div>
                                    {!! $milestone->getHtmlDescription() !!}
                                </div>
                            </div>
                            <div class="col-lg-6 order-lg-2">
                                @if($media)
                                    @include('v2-service-media::components.picture', [
                                        'originalPath' => $media->file_path,
                                        'variants'     => $media->variants ?? [],
                                        'alt'          => $media->alt_text ?: $milestone->title,
                                        'class'        => 'milestone-img img-fluid',
                                        'lazy'         => true,
                                    ])
                                @endif
                            </div>
                        @else
                            <div class="col-lg-6">
                                @if($media)
                                    @include('v2-service-media::components.picture', [
                                        'originalPath' => $media->file_path,
                                        'variants'     => $media->variants ?? [],
                                        'alt'          => $media->alt_text ?: $milestone->title,
                                        'class'        => 'milestone-img img-fluid',
                                        'lazy'         => true,
                                    ])
                                @endif
                            </div>
                            <div class="col-lg-6">
                                <div class="milestone-content ps-lg-3">
                                    <div class="milestone-period">{{ $milestone->period }}</div>
                                    <h3>{{ $milestone->title }}</h3>
                                    <div class="milestone-accent"></div>
                                    {!! $milestone->getHtmlDescription() !!}
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </section>
    @endforeach
@else
    <section class="section-padding section-bg">
        <div class="container">
            <div class="text-center py-5">
                <i class="bi bi-clock-history display-1 text-muted d-block mb-3"></i>
                <h2 class="h4 fw-bold text-muted">Em breve</h2>
                <p class="text-muted">Nossa linha do tempo está sendo construída.</p>
            </div>
        </div>
    </section>
@endif

{{-- CTA --}}
<section class="video-tour-section fix bg-cover" style="background-image: url('{{ asset('assets/sucesu/img/hero/breadcrumb.png') }}');">
    <div class="container">
        <div class="video-tour-wrapper-1">
            <div class="row align-items-center">
                <div class="video-tour-content-info center">
                    <div class="section-title mb-0 center">
                        <span class="sub-title style-2">Há mais de 50 anos conectando pessoas e ideias</span>
                        <h2 class="text-white">A SUCESU é um movimento de união, debate e transformação<br>que constrói o futuro da tecnologia no Brasil.</h2>
                    </div>
                    <div class="hero-button mt-4">
                        <a href="/sobre-nos" class="theme-btn link-btn">
                            <span>Conheça nossa Diretoria</span> <i class="bi bi-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection