@extends('components.frontend.master')

@section('title', 'À Propos de Welely - Agence Digitale à Abidjan | Notre Histoire & Équipe')

@section('meta')
    <meta name="description"
        content="Découvrez l'histoire de Welely, agence digitale fondée à Abidjan en 2024. Nous accompagnons entrepreneurs, PME et ONG dans leur transformation digitale en Afrique francophone. Innovation, collaboration et excellence.">
    <meta name="keywords"
        content="histoire Welely, agence digitale Abidjan, développement web Côte d'Ivoire, transformation digitale Afrique, experts développement web mobile design">
    <meta name="author" content="Welely">
    <meta name="robots" content="index, follow">

    <!-- Open Graph -->
    <meta property="og:title" content="À Propos de Welely - Agence Digitale à Abidjan | Notre Histoire & Équipe">
    <meta property="og:description"
        content="Découvrez l'histoire de Welely, agence digitale fondée à Abidjan en 2024. Nous accompagnons entrepreneurs, PME et ONG dans leur transformation digitale en Afrique francophone.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:image" content="{{ asset('images/notre-equipe.png') }}">
    <meta property="og:site_name" content="Welely">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="À Propos de Welely - Agence Digitale à Abidjan">
    <meta name="twitter:description"
        content="Découvrez l'histoire de Welely, agence digitale fondée à Abidjan en 2024. Nous accompagnons entrepreneurs, PME et ONG dans leur transformation digitale.">
    <meta name="twitter:image" content="{{ asset('images/notre-equipe.png') }}">
@endsection

@section('content')
    <section class="about-header">
        <div class="container">
            <nav class="breadcrumb-nav" aria-label="Fil d'Ariane">
                <a href="{{ route('home') }}">Accueil</a>
                <span aria-hidden="true"> / </span>
                <span aria-current="page">À propos</span>
            </nav>
            <h1 data-text="À Propos de Nous">À Propos de Nous</h1>
            <p>Découvrez l'équipe derrière vos projets digitaux et notre vision du numérique</p>
        </div>
    </section>

    <section class="about-story">
        <div class="container">
            <div class="story-content">
                <div class="story-text scroll-animate animate-on-load">
                    <h2>Notre Histoire</h2>
                    <p>Welely est née en 2024 d'une vision simple mais profonde : créer des solutions digitales qui
                        ont du sens, qui résolvent de vrais problèmes, et qui respectent l'identité unique de chaque
                        entreprise africaine.</p>
                    <a href="{{ route('services') }}" class="btn btn-secondary">Découvrir nos services</a>
                </div>
                <div class="story-img scroll-animate animate-on-load">
                    <img src="{{ asset('images/notre-equipe.png') }}" alt="L'équipe Welely">
                </div>
            </div>

            <div class="timeline" aria-label="Notre parcours">
                <div class="timeline-item scroll-animate animate-on-load">
                    <div class="timeline-marker" aria-hidden="true"></div>
                    <div class="timeline-content">
                        <span class="timeline-date">Début 2024</span>
                        <h3>Fondation de Welely</h3>
                        <p>Création de l'agence à Abidjan avec une mission claire : rendre le digital accessible aux entrepreneurs africains.</p>
                    </div>
                </div>
                <div class="timeline-item scroll-animate animate-on-load">
                    <div class="timeline-marker" aria-hidden="true"></div>
                    <div class="timeline-content">
                        <span class="timeline-date">Mi-2024</span>
                        <h3>Premiers projets & clients</h3>
                        <p>Lancement des premières collaborations : sites vitrines, identités visuelles et stratégies digitales pour des PME locales.</p>
                    </div>
                </div>
                <div class="timeline-item scroll-animate animate-on-load">
                    <div class="timeline-marker" aria-hidden="true"></div>
                    <div class="timeline-content">
                        <span class="timeline-date">Fin 2024</span>
                        <h3>Équipe de 4 experts</h3>
                        <p>Constitution d'une équipe pluridisciplinaire : développement, design, stratégie et gestion de projets.</p>
                    </div>
                </div>
                <div class="timeline-item scroll-animate animate-on-load">
                    <div class="timeline-marker" aria-hidden="true"></div>
                    <div class="timeline-content">
                        <span class="timeline-date">2025</span>
                        <h3>Expansion internationale</h3>
                        <p>Ouverture aux marchés de la diaspora africaine en France, au Sénégal et au Maroc.</p>
                    </div>
                </div>
                <div class="timeline-item scroll-animate animate-on-load">
                    <div class="timeline-marker timeline-marker--current" aria-hidden="true"></div>
                    <div class="timeline-content">
                        <span class="timeline-date">2026 — Aujourd'hui</span>
                        <h3>+50 projets réalisés</h3>
                        <p>Welely continue de grandir, portée par la confiance de ses clients et la passion de son équipe.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="values">
        <div class="container">
            <div class="section-title">
                <h2>Nos Valeurs</h2>
                <p>Les principes qui guident notre travail au quotidien</p>
            </div>
            <div class="values-grid">
                <div class="value-card scroll-animate animate-on-load">
                    <div class="value-icon">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M9 18h6"/><path d="M10 22h4"/><path d="M12 2a7 7 0 0 1 7 7c0 2.38-1.19 4.47-3 5.74V17H8v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 0 1 7-7z"/></svg>
                    </div>
                    <h3>Innovation</h3>
                    <p>Nous restons constamment à l'affût des dernières technologies et méthodologies pour proposer des
                        solutions toujours plus performantes.</p>
                </div>
                <div class="value-card scroll-animate animate-on-load">
                    <div class="value-icon">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                    </div>
                    <h3>Collaboration</h3>
                    <p>Nous croyons en la force du travail d'équipe et nous impliquons nos clients à chaque étape du
                        processus de création.</p>
                </div>
                <div class="value-card scroll-animate animate-on-load">
                    <div class="value-icon">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>
                    </div>
                    <h3>Excellence</h3>
                    <p>Nous nous engageons à livrer des produits de la plus haute qualité, avec un souci constant du
                        détail
                        et des performances.</p>
                </div>
                <div class="value-card scroll-animate animate-on-load">
                    <div class="value-icon">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                    </div>
                    <h3>Impact Social</h3>
                    <p>Nous contribuons activement au développement de l'écosystème numérique local par des formations
                        et
                        des événements.</p>
                </div>
            </div>
        </div>
    </section>

    @if($teamMembers->isNotEmpty())
    <section class="team">
        <div class="container">
            <div class="section-title">
                <h2>Notre Équipe</h2>
                <p>Des professionnels passionnés à votre service</p>
            </div>
            <div class="team-grid">
                @foreach($teamMembers as $member)
                <div class="team-member scroll-animate animate-on-load">
                    <div class="member-img">
                        @if($member->photo_path)
                            <img src="{{ Storage::url($member->photo_path) }}" alt="{{ $member->name }}"
                                class="member-photo" loading="lazy">
                        @else
                            <div class="member-avatar"
                                style="--avatar-bg: linear-gradient(135deg, {{ $member->avatar_color_from }} 0%, {{ $member->avatar_color_to }} 100%);"
                                aria-hidden="true">{{ $member->initials }}</div>
                        @endif
                    </div>
                    <div class="member-info">
                        <h3 class="member-name">{{ $member->name }}</h3>
                        <p class="member-position">{{ $member->position }}</p>
                        @if($member->bio)
                            <p>{{ $member->bio }}</p>
                        @endif
                        @if($member->linkedin_url)
                            <a href="{{ $member->linkedin_url }}" class="member-linkedin" target="_blank"
                                rel="noopener noreferrer" aria-label="LinkedIn de {{ $member->name }}">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>
                                LinkedIn
                            </a>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif
@endsection