{% extends 'vitrine/base.html.twig' %}
{% import 'vitrine/_icons.html.twig' as icons %}

{% block title %}Exemples de Sites Créés avec Izibrick | Izibrick{% endblock %}

{% block meta_description %}Découvrez des sites réels créés avec Izibrick : associations, artisans, créateurs, boutiques en ligne. Des exemples concrets, en ligne aujourd'hui.{% endblock %}

{% block meta_keywords %}exemples site internet, sites créés avec izibrick, références, portfolio, site association, site e-commerce{% endblock %}

{# Références clients : sites réels, en production.
   Pour ajouter une référence : capture 1440×900 dans assets/vitrine/img/references/
   + une entrée ici (name, sector, description, url, image, features). #}
{% set references = [
    {
        name: 'Entente pongiste SLP',
        sector: 'Association sportive',
        description: 'Le site officiel du club de tennis de table de Sablons et Lalande-de-Pomerol : présentation du club, équipes, calendrier des rencontres, licences et contact.',
        url: 'https://www.entente-pongiste-slp.fr/',
        image: 'entente-pongiste-slp.jpg',
        features: ['Calendrier et équipes', 'Formulaire de contact', 'Réseaux sociaux intégrés']
    },
    {
        name: 'AUM Editions',
        sector: 'Créateur & e-commerce',
        description: 'Un auto-éditeur de jeux de société basé à Libourne : actualités, présentation des projets et boutique en ligne avec paiement sécurisé — le tout géré depuis izibrick.',
        url: 'https://www.aumeditions.fr/',
        image: 'aumeditions.jpg',
        features: ['Boutique en ligne (offre Pro)', 'Actualités / blog', 'Galeries de projets']
    }
] %}

{% block structured_data %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ItemList",
  "name": "Sites créés avec Izibrick",
  "itemListElement": [
    {% for ref in references %}
    {
      "@type": "ListItem",
      "position": {{ loop.index }},
      "name": {{ ref.name|json_encode|raw }},
      "url": {{ ref.url|json_encode|raw }}
    }{% if not loop.last %},{% endif %}
    {% endfor %}
  ]
}
</script>
{% endblock %}

{% block body %}

{# ── Hero ── #}
<section class="page-hero">
    <div class="container">
        <h1>Des sites réels, en ligne aujourd'hui</h1>
        <p class="lead">
            La meilleure preuve de ce qu'izibrick sait faire : les sites que nos clients
            ont créés eux-mêmes. Visitez-les.
        </p>
    </div>
</section>

{# ── Références ── #}
<section class="section section--surface">
    <div class="container">
        {% for ref in references %}
        <div class="feature-row{% if loop.index is even %} feature-row--reverse{% endif %}" data-reveal>
            <div class="feature-row__text">
                <span class="kicker">{{ ref.sector }}</span>
                <h3>{{ ref.name }}</h3>
                <p>{{ ref.description }}</p>
                <ul class="check-list">
                    {% for feature in ref.features %}
                        <li>{{ icons.icon('check', 18) }} {{ feature }}</li>
                    {% endfor %}
                </ul>
                <p style="margin-top: var(--primitive-space-5);">
                    <a class="btn btn--primary" href="{{ ref.url }}" target="_blank" rel="noopener">
                        Visiter le site {{ icons.icon('arrow-right', 18) }}
                    </a>
                </p>
            </div>
            <div class="feature-row__visual">
                <a href="{{ ref.url }}" target="_blank" rel="noopener"
                   aria-label="Visiter le site {{ ref.name }} (nouvel onglet)">
                    <div class="screenshot-frame">
                        <div class="screenshot-frame__bar"><span></span><span></span><span></span></div>
                        <img src="{{ asset('assets/vitrine/img/references/' ~ ref.image) }}"
                             alt="Le site {{ ref.name }}, créé avec izibrick"
                             width="1440" height="900" loading="lazy" decoding="async">
                    </div>
                </a>
            </div>
        </div>
        {% endfor %}
    </div>
</section>

{# ── Essayer l'éditeur ── #}
<section class="section">
    <div class="container">
        <div class="section-header" data-reveal>
            <span class="kicker">Essayez par vous-même</span>
            <h2>Testez l'éditeur, sans compte</h2>
            <p class="lead">
                Le meilleur moyen de juger : ouvrez le bac à sable, glissez-déposez des
                widgets et composez une page — rien à installer, rien à créer.
            </p>
            <p style="margin-top: var(--primitive-space-6);">
                <a href="{{ path('demo-editeur') }}" class="btn btn--primary btn--lg">
                    {{ icons.icon('edit', 20) }} Ouvrir le bac à sable
                </a>
            </p>
        </div>
    </div>
</section>

{# ── Et vous ? ── #}
<section class="section section--surface">
    <div class="container">
        <div class="section-header" data-reveal>
            <span class="kicker">À votre tour</span>
            <h2>Votre secteur n'est pas représenté ?</h2>
            <p class="lead">
                Restaurants, artisans, coachs, professions libérales, startups… l'éditeur
                s'adapte à votre activité, et l'IA peut générer un premier site adapté à
                votre secteur en quelques minutes.
            </p>
        </div>

        <div class="grid grid--4">
            <div class="card card--mini card--hover" data-reveal>
                <div class="card__icon">{{ icons.icon('zap', 24) }}</div>
                <h4>Restaurants &amp; cafés</h4>
                <p>Carte, horaires, réservation par formulaire</p>
            </div>
            <div class="card card--mini card--hover" data-reveal data-reveal-delay="50">
                <div class="card__icon">{{ icons.icon('shield', 24) }}</div>
                <h4>Artisans</h4>
                <p>Réalisations avant/après, demandes de devis</p>
            </div>
            <div class="card card--mini card--hover" data-reveal data-reveal-delay="100">
                <div class="card__icon">{{ icons.icon('users', 24) }}</div>
                <h4>Associations</h4>
                <p>Agenda, équipes, documents et adhésions</p>
            </div>
            <div class="card card--mini card--hover" data-reveal data-reveal-delay="150">
                <div class="card__icon">{{ icons.icon('shopping-cart', 24) }}</div>
                <h4>Boutiques</h4>
                <p>Catalogue, panier et paiement sécurisé</p>
            </div>
        </div>
    </div>
</section>

{% endblock %}