@extends('layouts.app')

@section('title', __('nav.partners'))

@section('content')
    <!-- Hero Section -->
    <section class="vintage-section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-8 text-center">
                    <h1 class="carbon-copy">{{ __('home.partners_title') }}</h1>
                    <p class="vintage-ink lead">{{ __('home.partners_subtitle') }}</p>
                    <p class="worn-ribbon">
                        {{ __('home.partners_text') }}
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Partners Grid -->
    <section class="vintage-section vintage-paper">
        <div class="container">
            <div class="row">
                <!-- Partner 1: Ginie Vintage -->
                <div class="col-md-4 mb-4">
                    <div class="partner-card typed-frame vintage-border">
                        <div class="partner-image">
                            <img src="{{ asset('images/partners/ginie-vintage.jpg') }}" alt="Ginie Vintage - Vêtements vintage et accessoires" class="img-fluid">
                        </div>
                        <div class="partner-content">
                            <h3 class="carbon-copy">Ginie Vintage</h3>
                            <p class="vintage-ink">Boutique proposant des vêtements de qualité confectionnés au 20e siècle, soigneusement sélectionnés un à un par Ginie elle-même. Une entreprise d'économie circulaire qui valorise l'empowerment féminin et l'écoresponsabilité.</p>
                            <div class="partner-footer">
                                <span class="partner-category">Mode & Vintage</span>
                                <a href="https://ginievintage.com/" target="_blank" class="partner-link">Visiter le site</a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Partner 2: Vinyllia -->
                <div class="col-md-4 mb-4">
                    <div class="partner-card typed-frame vintage-border">
                        <div class="partner-image">
                            <img src="{{ asset('images/partners/vinyllia-new.jpg') }}" alt="Vinyllia - Collection de vinyles rares" class="img-fluid">
                        </div>
                        <div class="partner-content">
                            <h3 class="carbon-copy">Vinyllia</h3>
                            <p class="vintage-ink">Plateforme qui réunit les passionnés de musique de tous genres, proposant vinyles, CDs et merch de boutiques indépendantes du monde entier. Un marché musical universel pour les mélomanes.</p>
                            <div class="partner-footer">
                                <span class="partner-category">Musique & Collection</span>
                                <a href="https://vinyllia.com/" target="_blank" class="partner-link">Visiter le site</a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Partner 3: Ommade -->
                <div class="col-md-4 mb-4">
                    <div class="partner-card typed-frame vintage-border">
                        <div class="partner-image">
                            <img src="{{ asset('images/partners/ommade.jpg') }}" alt="Ommade - Produits artisanaux" class="img-fluid">
                        </div>
                        <div class="partner-content">
                            <h3 class="carbon-copy">Ommade</h3>
                            <p class="vintage-ink">Marque de cosmétiques naturels et véganes dédiée au bien-être universel. Produits unisexe fabriqués à Trois-Rivières avec des ingrédients soigneusement sélectionnés et respectueux de l'environnement.</p>
                            <div class="partner-footer">
                                <span class="partner-category">Cosmétiques Naturels</span>
                                <a href="https://www.ommade.ca/" target="_blank" class="partner-link">Visiter le site</a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Partner 4: Aura Memorial -->
                <div class="col-md-4 mb-4">
                    <div class="partner-card typed-frame vintage-border">
                        <div class="partner-image">
                            <img src="{{ asset('images/partners/aura-memorial.png') }}" alt="Aura Memorial - Services commémoratifs" class="img-fluid">
                        </div>
                        <div class="partner-content">
                            <h3 class="carbon-copy">Aura Memorial</h3>
                            <p class="vintage-ink">Créateur d'urnes funéraires en céramique artisanale uniques, conçues avec respect et savoir-faire au Québec. Des objets commémoratifs qui célèbrent la complexité de chaque existence.</p>
                            <div class="partner-footer">
                                <span class="partner-category">Services Commémoratifs</span>
                                <a href="https://www.auramemorial.com/" target="_blank" class="partner-link">Visiter le site</a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Partner 5: Estate Elegance -->
                <div class="col-md-4 mb-4">
                    <div class="partner-card typed-frame vintage-border">
                        <div class="partner-image">
                            <img src="{{ asset('images/partners/estate-elegance.jpg') }}" alt="Estate Elegance - Immobilier de luxe" class="img-fluid">
                        </div>
                        <div class="partner-content">
                            <h3 class="carbon-copy">Estate Elegance</h3>
                            <p class="vintage-ink">Leader en marketing immobilier de luxe, offrant des services de photographie, visites virtuelles et mise en valeur pour les propriétés d'exception au Québec et à Montréal.</p>
                            <div class="partner-footer">
                                <span class="partner-category">Immobilier de Luxe</span>
                                <a href="https://estateelegance.com/" target="_blank" class="partner-link">Visiter le site</a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Votre entreprise ici -->
                <div class="col-md-4 mb-4">
                    <div class="partner-card typed-frame vintage-border partner-join">
                        <div class="partner-content text-center">
                            <div class="partner-join-icon">
                                <svg class="vintage-icon-large" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 4v16m-8-8h16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </div>
                            <h3 class="carbon-copy">Votre entreprise ici</h3>
                            <p class="vintage-ink">Rejoignez notre communauté d'affaires locale et bénéficiez d'une visibilité accrue et d'un réseau de partenaires de qualité.</p>
                            <div class="mt-4">
                                <a href="{{ route('contact', app()->getLocale()) }}" class="btn vintage-button">Nous rejoindre</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Benefits Section -->
    <section class="vintage-section">
        <div class="container">
            <div class="row justify-content-center mb-5">
                <div class="col-md-8 text-center">
                    <h2 class="carbon-copy">Avantages de notre réseau de partenaires</h2>
                    <p class="vintage-ink lead">Rejoignez notre communauté et développez votre entreprise</p>
                </div>
            </div>
            
            <div class="row">
                <!-- Benefit 1 -->
                <div class="col-md-4 mb-4">
                    <div class="benefit-card typed-frame">
                        <div class="benefit-icon">
                            <svg class="vintage-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                            </svg>
                        </div>
                        <h3 class="carbon-copy">Visibilité accrue</h3>
                        <p class="vintage-ink">Apparaissez sur notre site et gagnez en visibilité auprès de notre clientèle croissante.</p>
                    </div>
                </div>
                
                <!-- Benefit 2 -->
                <div class="col-md-4 mb-4">
                    <div class="benefit-card typed-frame">
                        <div class="benefit-icon">
                            <svg class="vintage-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                            </svg>
                        </div>
                        <h3 class="carbon-copy">Backlinks de qualité</h3>
                        <p class="vintage-ink">Améliorez votre référencement avec des backlinks de qualité provenant de notre réseau de sites web.</p>
                    </div>
                </div>
                
                <!-- Benefit 3 -->
                <div class="col-md-4 mb-4">
                    <div class="benefit-card typed-frame">
                        <div class="benefit-icon">
                            <svg class="vintage-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                            </svg>
                        </div>
                        <h3 class="carbon-copy">Opportunités de réseautage</h3>
                        <p class="vintage-ink">Connectez-vous avec d'autres entreprises locales et explorez des opportunités de collaboration.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Join Section -->
    <section class="vintage-section vintage-accent">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-8 text-center">
                    <h2 class="carbon-copy text-white">Devenez partenaire</h2>
                    <p class="vintage-ink lead text-white">
                        Rejoignez notre réseau croissant d'entreprises locales et commencez à bénéficier d'une visibilité accrue et de promotion croisée.
                    </p>
                    <a href="{{ route('contact', app()->getLocale()) }}" class="btn vintage-button mt-4">
                        {{ __('general.contact_us') }}
                    </a>
                </div>
            </div>
        </div>
    </section>
@endsection