{# Héro « texte et photo côte à côte » (config.layout = 'split').

   Variante du widget hero : le titre se pose sur un aplat (teinte pâle, couleur
   du site ou nuance foncée) et la photo occupe l'autre moitié, sans voile. Elle
   montre les vraies photos d'un commerce sans les éteindre sous un dégradé
   sombre, et donne aux pages d'accueil un autre visage que le bandeau photo
   plein écran de tous les sites.

   Mêmes clés que le hero : title, subtitle, kicker, ctaText/ctaLink,
   ctaSecondaryText/ctaSecondaryLink, showCta, height, backgroundImage (la
   photo — l'atelier d'images et l'installateur visent déjà cette clé). En plus :
   imageSide (right|left) et panelColor (#rrggbb ; vide = surface du thème).

   Pour présenter une appli ou un logiciel :
     mediaStyle      photo (défaut) | phone — la capture d'écran est posée dans
                     un cadre de téléphone, entière (une photo 4:3 rognerait un
                     écran vertical).
     highlights      pastilles d'arguments sous les boutons (« Hors ligne »,
                     « Sans compte »…) : liste, ou texte à une pastille par ligne.
     titleHighlight  passage du titre mis en couleur (le premier trouvé).
     ctaStyle        auto (défaut) | accent — bouton principal dans la couleur
                     secondaire du site, pour un appel à l'action qui tranche. #}
{% set height = config.height|default('large') %}
{% set side = config.imageSide|default('right') == 'left' ? 'left' : 'right' %}
{% set panel = config.panelColor|default('') %}
{% set panelIsHex = panel matches '/^#[0-9a-fA-F]{6}$/' %}
{# Texte foncé ou blanc : celui qui contraste le plus avec l'aplat. #}
{% set darkPanel = panelIsHex and (contrast_ratio('#ffffff', panel) > contrast_ratio('#16181d', panel)) %}
{% set image = config.backgroundImage|default('') %}
{% set phone = config.mediaStyle|default('photo') == 'phone' %}
{% set highlights = config.highlights|default([]) %}
{% if highlights is not iterable %}
    {% set highlights = highlights|split("\n") %}
{% endif %}
{% set highlights = highlights|map(h => h|trim)|filter(h => h is not empty) %}
{% set accentCta = config.ctaStyle|default('auto') == 'accent' %}

{% set ctaLink = config.ctaLink ?? config.buttonLink ?? '#' %}
{% if ctaLink and not (ctaLink starts with 'http' or ctaLink starts with '#' or ctaLink starts with '/') %}
    {% set ctaLink = '/' ~ ctaLink %}
{% endif %}
{% set showCta = config.showCta ?? config.showButtons ?? true %}

<section class="hero-section hero-split hero-split--image-{{ side }} hero-split--{{ height }}{{ darkPanel ? ' hero-split--dark' : '' }}{{ phone ? ' hero-split--phone' : '' }}{{ config.title|default('')|length > 28 ? ' hero-split--long-title' : '' }}"
         {% if panelIsHex %}style="--hs-panel: {{ panel }};"{% endif %}>
    <div class="hero-split__inner">
        <div class="hero-split__text">
            {% if config.kicker|default('') %}
                <span class="hero-split__kicker">{{ config.kicker }}</span>
            {% endif %}

            {% if config.title|default('') %}
                {% set accent = config.titleHighlight|default('')|trim %}
                {% set parts = accent and accent in config.title ? config.title|split(accent, 2) : [] %}
                <h1 class="hero-title hero-split__title">
                    {%- if parts|length == 2 -%}
                        {{ parts[0] }}<span class="hero-split__accent">{{ accent }}</span>{{ parts[1] }}
                    {%- else -%}
                        {{ config.title }}
                    {%- endif -%}
                </h1>
            {% endif %}

            {% if config.subtitle|default('') %}
                <p class="hero-subtitle hero-split__subtitle">{{ config.subtitle }}</p>
            {% endif %}

            {% if showCta %}
                <div class="hero-actions hero-split__actions">
                    <a href="{{ ctaLink }}" class="btn btn-lg {{ accentCta ? 'hero-split__cta-accent' : (darkPanel ? 'btn-light' : 'btn-primary') }} hero-cta">{{ config.ctaText ?? config.buttonText ?? 'En savoir plus' }}</a>
                    {% if config.ctaSecondaryText|default('') %}
                        {% set ctaSecondaryLink = config.ctaSecondaryLink|default('#') %}
                        {% if ctaSecondaryLink and not (ctaSecondaryLink starts with 'http' or ctaSecondaryLink starts with '#' or ctaSecondaryLink starts with '/') %}
                            {% set ctaSecondaryLink = '/' ~ ctaSecondaryLink %}
                        {% endif %}
                        <a href="{{ ctaSecondaryLink }}" class="btn btn-lg {{ darkPanel ? 'btn-ghost-light' : 'btn-secondary' }}">{{ config.ctaSecondaryText }}</a>
                    {% endif %}
                </div>
            {% endif %}

            {% if storeBadges|default(null) %}
                {% include 'sections/partials/store-badges.html.twig' with { badges: storeBadges, align: 'left', onDark: darkPanel } only %}
            {% endif %}

            {% if highlights is not empty %}
                <ul class="hero-split__highlights" role="list">
                    {% for item in highlights %}
                        <li>{{ item }}</li>
                    {% endfor %}
                </ul>
            {% endif %}
        </div>

        <div class="hero-split__media">
            <span class="hero-split__shape" aria-hidden="true"></span>
            {% if image and phone %}
                <div class="hero-split__phone">
                    <img class="hero-split__screen" src="{{ image }}" alt="{{ config.imageAlt|default('') }}" fetchpriority="high">
                </div>
            {% elseif image %}
                <img class="hero-split__img" src="{{ image }}" alt="{{ config.imageAlt|default('') }}" fetchpriority="high">
            {% endif %}
        </div>
    </div>
</section>

<style>
    .hero-split {
        --hs-panel: var(--color-surface, #f8fafc);
        position: relative;
        background: var(--hs-panel);
        color: var(--color-text, #1e293b);
        overflow: hidden;
        padding: clamp(2.5rem, 5vw, 5rem) 1.25rem;
    }
    .hero-split--large { min-height: 560px; }
    .hero-split--fullscreen { min-height: calc(100vh - 72px); }
    .hero-split--medium { min-height: 420px; }
    .hero-split--small { padding-block: 2rem; }

    .hero-split__inner {
        max-width: 1200px;
        min-height: inherit;
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: clamp(2rem, 5vw, 4.5rem);
        align-items: center;
    }
    .hero-split--image-left .hero-split__media { order: -1; }

    .hero-split__kicker {
        display: inline-block;
        margin-bottom: 1rem;
        font-size: 0.8125rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--primary-text, var(--primary-color));
    }
    .hero-split .hero-split__title {
        margin: 0 0 1.25rem;
        font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem);
        line-height: 1.04;
        letter-spacing: -0.03em;
        text-wrap: balance;
        color: inherit;
    }
    /* Une phrase entière en titre : au corps d'un titre court, elle se coupait
       en trois lignes au milieu de ses groupes de mots. */
    .hero-split--long-title .hero-split__title {
        font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.5rem);
        line-height: 1.08;
    }
    .hero-split .hero-split__subtitle {
        margin: 0 0 2rem;
        max-width: 36rem;
        font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
        line-height: 1.6;
        color: var(--color-text-light, #475569);
    }
    .hero-split__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

    /* Aplat foncé (couleur du site, nuance sombre) : textes en blanc, et une
       lueur plus claire derrière le visuel pour que l'aplat ne fasse pas bloc. */
    .hero-split--dark {
        color: #fff;
        background:
            radial-gradient(70% 90% at 78% 45%, color-mix(in srgb, var(--hs-panel) 78%, #ffffff) 0%, transparent 70%),
            var(--hs-panel);
    }
    .hero-split--image-left.hero-split--dark {
        background:
            radial-gradient(70% 90% at 22% 45%, color-mix(in srgb, var(--hs-panel) 78%, #ffffff) 0%, transparent 70%),
            var(--hs-panel);
    }
    .hero-split--dark .hero-split__kicker,
    .hero-split--dark .hero-split__subtitle { color: rgba(255, 255, 255, 0.86); }

    /* Mot mis en valeur : couleur secondaire sur l'aplat foncé (c'est elle qui
       y ressort), couleur du site en texte sur un aplat clair. */
    .hero-split__accent { color: var(--primary-text, var(--primary-color)); }
    .hero-split--dark .hero-split__accent { color: var(--color-secondary, #fff); }

    /* Bouton principal à la couleur secondaire du site, texte calculé pour elle. */
    .hero-split .hero-split__cta-accent,
    .hero-split .hero-split__cta-accent:hover {
        background: var(--color-secondary);
        color: var(--secondary-contrast, #fff);
        border-color: transparent;
    }
    .hero-split .hero-split__cta-accent { box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.55); }
    .hero-split .hero-split__cta-accent:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.6); }

    .hero-split__highlights {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin: 1.75rem 0 0;
        padding: 0;
        list-style: none;
    }
    .hero-split__highlights li {
        margin: 0;
        padding: 0.4rem 0.95rem;
        border-radius: 999px;
        border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
        background: color-mix(in srgb, currentColor 6%, transparent);
        font-size: 0.9rem;
        font-weight: 600;
        line-height: 1.3;
    }
    .hero-split--dark .hero-split__highlights li {
        border-color: rgba(255, 255, 255, 0.28);
        background: rgba(255, 255, 255, 0.1);
    }

    .hero-split__media {
        position: relative;
        align-self: stretch;
        display: flex;
        align-items: center;
    }
    .hero-split__img {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: 28px;
        box-shadow: 0 30px 60px -30px rgba(15, 23, 42, 0.45);
    }
    /* Forme décorative dans la couleur secondaire, décalée derrière la photo */
    .hero-split__shape {
        position: absolute;
        z-index: 0;
        width: 46%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--color-secondary, var(--primary-color));
        opacity: 0.85;
        bottom: -6%;
        right: -5%;
    }
    .hero-split--image-left .hero-split__shape { right: auto; left: -5%; }

    /* Capture d'écran dans un cadre de téléphone : entière, au format de
       l'écran, centrée dans sa moitié ; la forme décorative passe derrière. */
    .hero-split--phone .hero-split__media { justify-content: center; }
    .hero-split__phone {
        position: relative;
        z-index: 1;
        width: clamp(220px, 24vw, 310px);
        padding: 10px;
        border-radius: 44px;
        background: #0b0f17;
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.08) inset,
            0 40px 80px -30px rgba(2, 6, 23, 0.65),
            0 18px 36px -18px rgba(2, 6, 23, 0.5);
    }
    /* La capture garde ses proportions : forcée au format d'un téléphone
       récent, une capture 9:16 perdait ses bords (flèche retour, icônes).
       Pas d'encoche dessinée : elle masquait la barre de titre de l'appli. */
    .hero-split__screen {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 34px;
        background: #fff;
    }
    .hero-split--phone .hero-split__shape {
        width: 78%;
        max-width: 440px;
        bottom: auto;
        right: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0.9;
    }

    @media (max-width: 860px) {
        .hero-split__inner { grid-template-columns: 1fr; }
        .hero-split--image-left .hero-split__media { order: 0; }
        .hero-split--large, .hero-split--medium, .hero-split--fullscreen { min-height: 0; }
        .hero-split__shape { width: 34%; }
        .hero-split--phone .hero-split__shape { width: 70%; }
        .hero-split__phone { width: min(68vw, 280px); }
    }
</style>