@extends('components.frontend.master')

@section('title', 'Services Digitaux Welely - Développement Web, Mobile, Design, Photographie & Consulting à Abidjan')

@section('meta')
    <meta name="description"
        content="Services digitaux complets : développement web, applications mobiles, design graphique, photographie & vidéographie, consulting stratégique. Solutions sur mesure pour PME à Abidjan. Devis gratuit et accompagnement personnalisé.">
    <meta name="keywords"
        content="développement web Abidjan, application mobile Côte d'Ivoire, design graphique, photographie professionnelle, vidéographie, consulting digital, site e-commerce, transformation digitale, agence web">
    <meta name="author" content="Welely">
    <meta name="robots" content="index, follow">

    <!-- Open Graph -->
    <meta property="og:title"
        content="Services Digitaux Welely - Développement Web, Mobile, Design, Photographie & Consulting à Abidjan">
    <meta property="og:description"
        content="Services digitaux complets : développement web, applications mobiles, design graphique, photographie & vidéographie, consulting stratégique. Solutions sur mesure pour PME à Abidjan.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:image" content="{{ asset('images/logo.png') }}">
    <meta property="og:site_name" content="Welely">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Services Digitaux Welely - Abidjan">
    <meta name="twitter:description"
        content="Développement web, applications mobiles, design graphique, photographie & vidéographie, consulting stratégique. Solutions sur mesure pour PME.">
    <meta name="twitter:image" content="{{ asset('images/logo.png') }}">

    <!-- Schema.org -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Service",
        "name": "Services Digitaux Welely",
        "description": "Développement web, applications mobiles, design graphique, photographie & vidéographie, consulting stratégique",
        "provider": {
            "@type": "Organization",
            "name": "Welely",
            "address": {
                "@type": "PostalAddress",
                "addressLocality": "Abidjan",
                "addressCountry": "CI"
            }
        },
        "areaServed": "Côte d'Ivoire",
        "serviceType": ["Développement Web", "Développement Mobile", "Design Graphique", "Photographie & Vidéographie", "Consulting Digital"]
    }
    </script>
@endsection

@section('content')
    <section class="service-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">Services</span>
            </nav>
            <h1 data-text="Nos Services">Nos Services</h1>
            <p>Des solutions digitales complètes et adaptées à vos besoins spécifiques</p>
        </div>
    </section>

    <section class="service-details">
        <div class="container">
            <div class="section-title scroll-animate animate-on-load">
                <h2>Solutions Digitales Sur Mesure</h2>
                <p class="intro-text">Chez Welely, nous développons des solutions digitales professionnelles qui combinent design attrayant, fonctionnalités adaptées à vos besoins et performances optimales pour vous aider à atteindre vos objectifs commerciaux.</p>
                <p class="intro-text">Que vous soyez un entrepreneur individuel, une PME ou une association, nous créons des solutions qui renforcent votre présence en ligne et vous permettent de vous démarquer de la concurrence.</p>
            </div>

            <div class="service-tabs" id="serviceTabs">
                <div class="section-title">
                    <h2>Nos Expertises</h2>
                    <p>Des solutions adaptées à tous vos besoins professionnels</p>
                </div>

                {{-- Tab navigation --}}
                <div class="svc-tab-nav" role="tablist" aria-label="Nos services">
                    <button class="svc-tab-btn active" role="tab" aria-selected="true" aria-controls="tab-web"
                        data-tab="web">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2" 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>
                        Web
                    </button>
                    <button class="svc-tab-btn" role="tab" aria-selected="false" aria-controls="tab-mobile"
                        data-tab="mobile">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2" aria-hidden="true">
                            <rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
                            <line x1="12" y1="18" x2="12.01" y2="18" />
                        </svg>
                        Mobiles
                    </button>
                    <button class="svc-tab-btn" role="tab" aria-selected="false" aria-controls="tab-design"
                        data-tab="design">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2" aria-hidden="true">
                            <circle cx="12" cy="12" r="10" />
                            <circle cx="12" cy="12" r="3" />
                            <path d="M12 9V3M15 12h6M12 15v6M9 12H3" />
                        </svg>
                        Design & Branding
                    </button>
                    <button class="svc-tab-btn" role="tab" aria-selected="false" aria-controls="tab-digital"
                        data-tab="digital">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2" aria-hidden="true">
                            <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
                            <circle cx="12" cy="13" r="4" />
                        </svg>
                        Photo & Vidéo
                    </button>
                    <button class="svc-tab-btn" role="tab" aria-selected="false" aria-controls="tab-consulting"
                        data-tab="consulting">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2" aria-hidden="true">
                            <line x1="18" y1="20" x2="18" y2="10" />
                            <line x1="12" y1="20" x2="12" y2="4" />
                            <line x1="6" y1="20" x2="6" y2="14" />
                        </svg>
                        Consulting & Stratégie
                    </button>
                    <button class="svc-tab-btn" role="tab" aria-selected="false" aria-controls="tab-photo"
                        data-tab="photo">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2" aria-hidden="true">
                            <circle cx="12" cy="12" r="4" />
                            <line x1="12" y1="2" x2="12" y2="6" />
                            <line x1="12" y1="18" x2="12" y2="22" />
                            <line x1="4.93" y1="4.93" x2="7.76" y2="7.76" />
                            <line x1="16.24" y1="16.24" x2="19.07" y2="19.07" />
                            <line x1="2" y1="12" x2="6" y2="12" />
                            <line x1="18" y1="12" x2="22" y2="12" />
                            <line x1="4.93" y1="19.07" x2="7.76" y2="16.24" />
                            <line x1="16.24" y1="7.76" x2="19.07" y2="4.93" />
                        </svg>
                        Automatisation
                    </button>
                </div>

                {{-- Tab panels --}}
                <div class="svc-tab-panels">
                    <div class="svc-tab-panel active" id="tab-web" role="tabpanel" aria-labelledby="btn-web">
                        <div class="svc-panel-content">
                            <div class="svc-panel-text">
                                <div class="svc-panel-icon">
                                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none"
                                        stroke="currentColor" stroke-width="1.6" 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>Développement Web</h3>
                                <p>Création de sites vitrine, e-commerce, plateformes sur mesure avec des technologies
                                    modernes, sécurisées et évolutives.</p>
                                <ul class="svc-list">
                                    <li>Sites vitrines professionnels</li>
                                    <li>Boutiques en ligne</li>
                                    <li>Applications web sur mesure</li>
                                    <li>Portails et plateformes</li>
                                </ul>
                                <a href="{{ route('contact') }}" class="btn btn-primary svc-cta">Demander un devis</a>
                            </div>
                            <div class="svc-panel-visual" style="--svc-color: #1e3a8a;">
                                <svg width="80" height="80" viewBox="0 0 24 24" fill="none"
                                    stroke="currentColor" stroke-width="0.8" opacity="0.25" 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>
                        </div>
                    </div>

                    <div class="svc-tab-panel" id="tab-mobile" role="tabpanel" aria-labelledby="btn-mobile" hidden>
                        <div class="svc-panel-content">
                            <div class="svc-panel-text">
                                <div class="svc-panel-icon" style="--icon-color: #059669;">
                                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none"
                                        stroke="currentColor" stroke-width="1.6" aria-hidden="true">
                                        <rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
                                        <line x1="12" y1="18" x2="12.01" y2="18" />
                                    </svg>
                                </div>
                                <h3>Applications Mobiles</h3>
                                <p>Conception d'applications mobiles natives ou hybrides, ergonomiques, performantes et
                                    adaptées aux besoins métiers.</p>
                                <ul class="svc-list">
                                    <li>Applications iOS et Android</li>
                                    <li>Applications hybrides</li>
                                    <li>Applications métiers</li>
                                    <li>Maintenance et support</li>
                                </ul>
                                <a href="{{ route('contact') }}" class="btn btn-primary svc-cta">Demander un devis</a>
                            </div>
                            <div class="svc-panel-visual" style="--svc-color: #059669;">
                                <svg width="80" height="80" viewBox="0 0 24 24" fill="none"
                                    stroke="currentColor" stroke-width="0.8" opacity="0.25" aria-hidden="true">
                                    <rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
                                    <line x1="12" y1="18" x2="12.01" y2="18" />
                                </svg>
                            </div>
                        </div>
                    </div>

                    <div class="svc-tab-panel" id="tab-design" role="tabpanel" aria-labelledby="btn-design" hidden>
                        <div class="svc-panel-content">
                            <div class="svc-panel-text">
                                <div class="svc-panel-icon" style="--icon-color: #fb923c;">
                                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none"
                                        stroke="currentColor" stroke-width="1.6" aria-hidden="true">
                                        <circle cx="12" cy="12" r="10" />
                                        <circle cx="12" cy="12" r="3" />
                                        <path d="M12 9V3M15 12h6M12 15v6M9 12H3" />
                                    </svg>
                                </div>
                                <h3>Design & Branding</h3>
                                <p>Création de logos, chartes graphiques, supports de communication visuelle (flyers,
                                    cartes, affiches, etc.), UI/UX design.</p>
                                <ul class="svc-list">
                                    <li>Création de logo</li>
                                    <li>Charte graphique</li>
                                    <li>Design d'interface</li>
                                    <li>Supports de communication</li>
                                </ul>
                                <a href="{{ route('contact') }}" class="btn btn-primary svc-cta">Demander un devis</a>
                            </div>
                            <div class="svc-panel-visual" style="--svc-color: #fb923c;">
                                <svg width="80" height="80" viewBox="0 0 24 24" fill="none"
                                    stroke="currentColor" stroke-width="0.8" opacity="0.25" aria-hidden="true">
                                    <circle cx="12" cy="12" r="10" />
                                    <circle cx="12" cy="12" r="3" />
                                    <path d="M12 9V3M15 12h6M12 15v6M9 12H3" />
                                </svg>
                            </div>
                        </div>
                    </div>

                    <div class="svc-tab-panel" id="tab-digital" role="tabpanel" aria-labelledby="btn-digital" hidden>
                        <div class="svc-panel-content">
                            <div class="svc-panel-text">
                                <div class="svc-panel-icon" style="--icon-color: #7c3aed;">
                                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none"
                                        stroke="currentColor" stroke-width="1.6" aria-hidden="true">
                                        <path
                                            d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
                                        <circle cx="12" cy="13" r="4" />
                                    </svg>
                                </div>
                                <h3>Photo & Vidéo</h3>
                                <p>Création de contenus visuels professionnels : photos corporate, vidéos promotionnelles,
                                    reportages événementiels et productions audiovisuelles.</p>
                                <ul class="svc-list">
                                    <li>Photos corporate et portraits</li>
                                    <li>Vidéos promotionnelles</li>
                                    <li>Reportages événementiels</li>
                                    <li>Contenus pour réseaux sociaux</li>
                                </ul>
                                <a href="{{ route('contact') }}" class="btn btn-primary svc-cta">Demander un devis</a>
                            </div>
                            <div class="svc-panel-visual" style="--svc-color: #7c3aed;">
                                <svg width="80" height="80" viewBox="0 0 24 24" fill="none"
                                    stroke="currentColor" stroke-width="0.8" opacity="0.25" aria-hidden="true">
                                    <path
                                        d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
                                    <circle cx="12" cy="13" r="4" />
                                </svg>
                            </div>
                        </div>
                    </div>

                    <div class="svc-tab-panel" id="tab-consulting" role="tabpanel" aria-labelledby="btn-consulting"
                        hidden>
                        <div class="svc-panel-content">
                            <div class="svc-panel-text">
                                <div class="svc-panel-icon" style="--icon-color: #0891b2;">
                                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none"
                                        stroke="currentColor" stroke-width="1.6" aria-hidden="true">
                                        <line x1="18" y1="20" x2="18" y2="10" />
                                        <line x1="12" y1="20" x2="12" y2="4" />
                                        <line x1="6" y1="20" x2="6" y2="14" />
                                    </svg>
                                </div>
                                <h3>Consulting & Stratégie</h3>
                                <p>Conseil en stratégie digitale, accompagnement personnalisé pour la structuration de
                                    projets, la visibilité en ligne et le positionnement de marque.</p>
                                <ul class="svc-list">
                                    <li>Stratégie digitale</li>
                                    <li>Positionnement de marque</li>
                                    <li>Étude de marché</li>
                                    <li>Plan de développement</li>
                                </ul>
                                <a href="{{ route('contact') }}" class="btn btn-primary svc-cta">Demander un devis</a>
                            </div>
                            <div class="svc-panel-visual" style="--svc-color: #0891b2;">
                                <svg width="80" height="80" viewBox="0 0 24 24" fill="none"
                                    stroke="currentColor" stroke-width="0.8" opacity="0.25" aria-hidden="true">
                                    <line x1="18" y1="20" x2="18" y2="10" />
                                    <line x1="12" y1="20" x2="12" y2="4" />
                                    <line x1="6" y1="20" x2="6" y2="14" />
                                </svg>
                            </div>
                        </div>
                    </div>

                    <div class="svc-tab-panel" id="tab-photo" role="tabpanel" aria-labelledby="btn-photo" hidden>
                        <div class="svc-panel-content">
                            <div class="svc-panel-text">
                                <div class="svc-panel-icon" style="--icon-color: #be185d;">
                                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none"
                                        stroke="currentColor" stroke-width="1.6" aria-hidden="true">
                                        <circle cx="12" cy="12" r="4" />
                                        <line x1="12" y1="2" x2="12" y2="6" />
                                        <line x1="12" y1="18" x2="12" y2="22" />
                                        <line x1="4.93" y1="4.93" x2="7.76" y2="7.76" />
                                        <line x1="16.24" y1="16.24" x2="19.07" y2="19.07" />
                                        <line x1="2" y1="12" x2="6" y2="12" />
                                        <line x1="18" y1="12" x2="22" y2="12" />
                                        <line x1="4.93" y1="19.07" x2="7.76" y2="16.24" />
                                        <line x1="16.24" y1="7.76" x2="19.07" y2="4.93" />
                                    </svg>
                                </div>
                                <h3>Automatisation</h3>
                                <p>Intégration d'outils numériques et automatisation de processus pour gagner du temps,
                                    réduire les erreurs et scaler votre activité.</p>
                                <ul class="svc-list">
                                    <li>Audit digital</li>
                                    <li>Formation aux outils</li>
                                    <li>Automatisation des processus</li>
                                    <li>Accompagnement au changement</li>
                                </ul>
                                <a href="{{ route('contact') }}" class="btn btn-primary svc-cta">Demander un devis</a>
                            </div>
                            <div class="svc-panel-visual" style="--svc-color: #be185d;">
                                <svg width="80" height="80" viewBox="0 0 24 24" fill="none"
                                    stroke="currentColor" stroke-width="0.8" opacity="0.25" aria-hidden="true">
                                    <circle cx="12" cy="12" r="4" />
                                    <line x1="12" y1="2" x2="12" y2="6" />
                                    <line x1="12" y1="18" x2="12" y2="22" />
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="service-cta">
        <div class="container">
            <h2 class="scroll-animate animate-on-load">Prêt à concrétiser votre projet?</h2>
            <p class="scroll-animate animate-on-load">Discutons ensemble de votre vision et de comment Welely peut vous
                aider à la réaliser.</p>
            <a href="{{ route('contact') }}" class="btn btn-secondary scroll-animate animate-on-load">Contacter notre
                équipe</a>
        </div>
    </section>
@endsection

@section('scripts')
    <script>
        (function() {
            const tabBtns = document.querySelectorAll('.svc-tab-btn');
            const panels = document.querySelectorAll('.svc-tab-panel');

            tabBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const target = this.dataset.tab;

                    tabBtns.forEach(b => {
                        b.classList.remove('active');
                        b.setAttribute('aria-selected', 'false');
                    });
                    panels.forEach(p => {
                        p.classList.remove('active');
                        p.hidden = true;
                    });

                    this.classList.add('active');
                    this.setAttribute('aria-selected', 'true');
                    const panel = document.getElementById('tab-' + target);
                    if (panel) {
                        panel.classList.add('active');
                        panel.hidden = false;
                    }
                });
            });
        })();
    </script>
@endsection