<x-layout :title="$title" :description="$description">

    {{-- Page Hero --}}
    <section class="pt-36 pb-24" style="background: #f8fafc;">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <span class="badge badge-navy mb-6 reveal">Nossa história</span>
            <h1 class="display-xl reveal" style="transition-delay: 0.1s;">
                Mais de 30 anos construindo
                <span class="text-gradient-green"> confiança</span>
            </h1>
            <p class="text-lg mt-6 leading-relaxed reveal" style="color: #565656; transition-delay: 0.2s;">
                Prestamos serviços com seriedade, profissionalismo e competência há mais de 30 anos. Com sede em Palmas — TO e atendimento em todo o Brasil.
            </p>
        </div>
    </section>

    {{-- Mission, Vision, Values --}}
    <section class="py-20" style="background: #ffffff;">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                @php
                    $mvv = [
                        ['label' => 'Missão', 'icon' => '🎯', 'text' => 'Simplificar a gestão financeira e tributária de empresas brasileiras, oferecendo contabilidade inteligente, consultiva e tecnológica que gera valor real.'],
                        ['label' => 'Visão',  'icon' => '🔭', 'text' => 'Ser referência nacional em contabilidade digital, reconhecida por transformar negócios com inovação, dados e atendimento de alto padrão.'],
                        ['label' => 'Valores','icon' => '💡', 'text' => 'Transparência, excelência, inovação contínua, compromisso com resultados e respeito absoluto ao cliente e às suas ambições.'],
                    ];
                @endphp
                @foreach($mvv as $i => $item)
                    <div class="card-premium p-8 reveal" style="transition-delay: {{ $i * 100 }}ms;">
                        <div class="text-3xl mb-4">{{ $item['icon'] }}</div>
                        <h3 class="font-bold text-lg mb-3" style="color: #1e3a5f;">{{ $item['label'] }}</h3>
                        <p class="leading-relaxed" style="color: #565656;">{{ $item['text'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- Story timeline --}}
    <section class="py-20" style="background: #f8fafc;">
        <div class="section-divider"></div>
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-14">
                <span class="badge badge-green mb-4 reveal">Linha do tempo</span>
                <h2 class="display-md reveal" style="transition-delay:0.1s;">Nossa trajetória</h2>
                <p class="mt-4 leading-relaxed reveal" style="color: #565656; transition-delay: 0.2s; max-width:520px; margin-left:auto; margin-right:auto;">
                    Mais de 30 anos de compromisso, inovação e excelência no mercado contábil brasileiro.
                </p>
            </div>

            @php
                $timeline = [
                    ['year' => '1993', 'event' => 'Fundação da OPCON',      'desc' => 'Iniciamos com a missão de oferecer contabilidade de qualidade para pequenas e médias empresas.', 'color' => '#25b87e'],
                    ['year' => '2005', 'event' => 'Expansão Nacional',      'desc' => 'Passamos a atender empresas em todo o Brasil, com foco em atendimento consultivo personalizado.', 'color' => '#2563eb'],
                    ['year' => '2015', 'event' => 'Transformação Digital',  'desc' => 'Iniciamos a jornada de digitalização completa, adotando as primeiras soluções tecnológicas avançadas.', 'color' => '#7c3aed'],
                    ['year' => '2020', 'event' => 'OPCON Digital',          'desc' => 'Lançamos nossa plataforma digital completa com dashboards, automações e portal do cliente.', 'color' => '#0ea5e9'],
                    ['year' => '2024', 'event' => 'IA & Automação',         'desc' => 'Incorporamos inteligência artificial e automação avançada para entregar resultados ainda mais rápidos e precisos.', 'color' => '#25b87e'],
                ];
            @endphp

            <div class="relative pl-0 sm:pl-10">
                <div class="timeline-line absolute left-8 top-4 bottom-4 hidden sm:block" style="width:2px;"></div>
                <div class="space-y-6">
                    @foreach($timeline as $i => $event)
                        <div class="flex gap-5 items-start reveal" style="transition-delay: {{ $i * 100 }}ms;">
                            {{-- Year marker --}}
                            <div class="flex-shrink-0 w-16 h-16 rounded-2xl flex flex-col items-center justify-center relative z-10"
                                 style="background: {{ $event['color'] }}15; border: 1.5px solid {{ $event['color'] }}40;">
                                <span class="text-xs font-bold" style="color: {{ $event['color'] }}; letter-spacing:-0.02em;">{{ $event['year'] }}</span>
                            </div>
                            {{-- Content --}}
                            <div class="flex-1 bg-white rounded-2xl p-5" style="border:1px solid #e2e8f0; box-shadow:0 1px 8px rgba(0,0,0,0.04);">
                                <h3 class="font-bold mb-1.5" style="color: #1e3a5f;">{{ $event['event'] }}</h3>
                                <p class="text-sm leading-relaxed" style="color: #565656;">{{ $event['desc'] }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    {{-- Team section --}}
    <section class="py-20" style="background: #ffffff;">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-14">
                <span class="badge badge-navy mb-4 reveal">Nossa equipe</span>
                <h2 class="display-md reveal" style="transition-delay: 0.1s;">
                    Especialistas dedicados ao
                    <span class="text-gradient-green"> seu sucesso</span>
                </h2>
            </div>

            @php
                $team = [
                    ['name' => 'Dr. Roberto Alves',   'role' => 'Contador CRC-SP',  'area' => 'Planejamento Tributário',  'avatar' => 'RA', 'color' => '#25b87e'],
                    ['name' => 'Dra. Camila Santos',  'role' => 'Contadora CRC-SP', 'area' => 'Contabilidade Gerencial',  'avatar' => 'CS', 'color' => '#2563eb'],
                    ['name' => 'Eng. Lucas Ferreira', 'role' => 'Tech Lead',        'area' => 'Automação & Sistemas',     'avatar' => 'LF', 'color' => '#7c3aed'],
                    ['name' => 'Ana Beatriz Lima',    'role' => 'Especialista DP',  'area' => 'Departamento Pessoal',     'avatar' => 'AB', 'color' => '#1e3a5f'],
                ];
            @endphp

            <div class="grid grid-cols-2 lg:grid-cols-4 gap-5">
                @foreach($team as $i => $member)
                    <div class="card-premium p-6 text-center reveal" style="transition-delay: {{ $i * 100 }}ms;">
                        <div class="w-16 h-16 rounded-2xl flex items-center justify-center text-lg font-bold mx-auto mb-4"
                             style="background: {{ $member['color'] }}18; border: 1.5px solid {{ $member['color'] }}33; color: {{ $member['color'] }};">
                            {{ $member['avatar'] }}
                        </div>
                        <h3 class="font-semibold text-sm mb-1" style="color: #1e3a5f;">{{ $member['name'] }}</h3>
                        <p class="text-xs mb-2" style="color: #94a3b8;">{{ $member['role'] }}</p>
                        <span class="badge badge-green text-[10px]">{{ $member['area'] }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    @include('sections.cta')
</x-layout>
