{% extends 'base.html.twig' %}

{% block json_ld %}
    {{ json_ld(jsonld_service(service.title, service.lead, salam_url ~ service.path)) }}
{% endblock %}

{% block body %}
    {% include 'components/breadcrumb.html.twig' with { items: [
        { name: 'Accueil', url: '/' },
        { name: service.h1 }
    ] } %}

    <section class="hero">
        <div class="container" style="display:grid;gap:40px;grid-template-columns:1fr">
            <div>
                <span class="hero__eyebrow">{{ service.eyebrow }}</span>
                <h1>{{ service.h1 }}</h1>
                <p class="hero__lead">{{ service.lead }}</p>
                <div class="hero__actions">
                    <a class="btn btn--primary" href="/demande-de-devis/">Demander un devis</a>
                </div>
            </div>
            <div>
                {% include 'components/animation.html.twig' with { name: service.animation } %}
            </div>
        </div>
    </section>

    {# Passage citable GEO #}
    <section class="section" style="padding-block:0">
        <div class="container">
            <p style="font-size:1.25rem;max-width:820px;border-left:3px solid var(--color-accent);padding-left:20px;color:var(--color-text)">
                {{ service.citable }}
            </p>
        </div>
    </section>

    {% if service.features %}
    <section class="section">
        <div class="container">
            <h2>Ce que nous vous apportons</h2>
            <div class="grid-cards" style="margin-top:28px">
                {% for feature in service.features %}
                    <div class="card" style="padding:22px">
                        <span class="pill pill--accent" style="margin-bottom:12px">✓</span>
                        <p style="margin:0">{{ feature }}</p>
                    </div>
                {% endfor %}
            </div>
        </div>
    </section>
    {% endif %}

    {% if service.pricing %}
    <section class="section">
        <div class="container">
            <h2>Tarifs</h2>
            <div class="card" style="margin-top:24px;overflow:hidden">
                <table style="width:100%;border-collapse:collapse">
                    <tbody>
                    {% for row in service.pricing %}
                        <tr style="border-bottom:1px solid var(--color-border)">
                            <td style="padding:16px 22px">{{ row.label }}</td>
                            <td style="padding:16px 22px;text-align:right;color:var(--color-accent);font-weight:600;white-space:nowrap">{{ row.price }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <p class="muted" style="margin-top:12px;font-size:.85rem">Tarifs indicatifs, adaptés à votre projet lors du devis.</p>
        </div>
    </section>
    {% endif %}

    {% if service.key == 'seo' %}
        {% include 'components/audit-form.html.twig' %}
    {% endif %}

    {% if service.faq %}
    <section class="section">
        <div class="container">
            <h2 style="text-align:center">Questions fréquentes</h2>
            <div style="margin-top:28px">
                {% include 'components/faq-accordion.html.twig' with { items: service.faq } %}
            </div>
        </div>
    </section>
    {% endif %}

    {% set related_map = {
        'creation-site': [['hebergement', 'Hébergement & domaine', '/hebergement-et-nom-de-domaine-guadeloupe/'], ['seo', 'Référencement SEO', '/referencement-seo-guadeloupe/']],
        'seo': [['local', 'Référencement local', '/referencement-local-guadeloupe/'], ['google-ads', 'Google Ads', '/referencement-google-adwords-guadeloupe/']],
        'local': [['seo', 'Référencement SEO', '/referencement-seo-guadeloupe/'], ['creation-site', 'Création de site', '/creation-site-internet-guadeloupe/']],
        'google-ads': [['seo', 'Référencement SEO', '/referencement-seo-guadeloupe/'], ['local', 'Référencement local', '/referencement-local-guadeloupe/']],
        'chatbot-ia': [['automatisation-ia', 'Automatisation IA', '/automatisation-ia-guadeloupe/'], ['creation-site', 'Création de site', '/creation-site-internet-guadeloupe/']],
        'automatisation-ia': [['chatbot-ia', 'Chatbot IA', '/creation-chatbot-ia-guadeloupe/'], ['creation-site', 'Création de site', '/creation-site-internet-guadeloupe/']],
        'application-mobile': [['creation-site', 'Création de site', '/creation-site-internet-guadeloupe/'], ['infographie', 'Infographie', '/infographie-en-guadeloupe/']],
        'hebergement': [['creation-site', 'Création de site', '/creation-site-internet-guadeloupe/'], ['seo', 'Référencement SEO', '/referencement-seo-guadeloupe/']],
        'infographie': [['photographe', 'Photographie', '/photographe-professionnel-guadeloupe/'], ['creation-site', 'Création de site', '/creation-site-internet-guadeloupe/']],
        'photographe': [['infographie', 'Infographie', '/infographie-en-guadeloupe/'], ['creation-site', 'Création de site', '/creation-site-internet-guadeloupe/']]
    } %}
    {% set related = related_map[service.key]|default([]) %}
    {% if related %}
    <section class="section" style="padding-top:0">
        <div class="container">
            <h2>Pour aller plus loin</h2>
            <div class="grid-cards" style="margin-top:20px">
                {% for r in related %}
                    <a class="card" href="{{ r.2 }}" style="padding:22px;display:block">
                        <span class="pill" style="margin-bottom:10px">Service lié</span>
                        <div style="font-weight:600;font-family:var(--font-title);font-size:1.3rem">{{ r.1 }}</div>
                    </a>
                {% endfor %}
            </div>
        </div>
    </section>
    {% endif %}

    {% include 'components/cta-final.html.twig' with {
        title: 'Un projet ' ~ service.eyebrow|lower ~ ' ?',
        subtitle: 'Parlons-en. Un échange gratuit pour cadrer vos besoins.',
        btn_primary: { label: 'Demander un devis', url: '/demande-de-devis/' }
    } %}
{% endblock %}