let componentsData;
try {
    componentsData = require('../../../../dist/components_json.json');
}
catch (error) {
    console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');
    componentsData = {};
}
import { withComponentControls, extractArgTypes, toKebabCase } from "../../../utils/utils";
const elementTag = 'spw-hero';
const subComponentTags = [];
const argTypes = Object.assign(Object.assign({}, withComponentControls(componentsData, { tag: elementTag })), extractArgTypes(componentsData, subComponentTags));
const meta = {
    title: "Organismes/Bandeau d'en-tête (hero banner)",
    component: elementTag,
    argTypes,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: `

Le composant Hero Banner crée un bandeau visuel impactant en haut de page pour capter l'attention et mettre en avant un message clé, un appel à l'action ou du contenu principal. Il combine image, texte et actions de manière équilibrée.

## Variants disponibles

- **Grey** : Arrière-plan gris avec image latérale
- **White** : Arrière-plan blanc avec image latérale
- **Photo** : Image pleine largeur en arrière-plan
- **Maxi** : Bannière plein écran avec overlay pour page d'accueil
- **Mini** : Version compacte du hero banner
- **Featured** : Image pleine largeur sans slot de contenu. Le ratio de l'image est contrôlable via featured-ratio, featured-ratio-mobile, featured-ratio-tablet, featured-ratio-desktop

## Fonctionnalités

- Support de multiples layouts et alignements
- Intégration de vidéos via modal
- Overlay personnalisable sur l'image
- Responsive design adaptatif
- Support du contenu HTML dans le slot par défaut
- Accessibilité avec gestion du clavier

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/5039a3-bandeau-den-tete-hero-banner)
        `,
            },
        },
    },
};
export default meta;
function htmlContent() {
    return /* HTML */ `
    <h1 class="spw-ds-typography-heading-01 mb-3">Mon titre</h1>
    <p class="spw-ds-typography-body-1 mb-4">Ceci est un exemple du hero banner avec une image.</p>
    <spw-group type="buttons" orientation="horizontal" alignment="left">
      <spw-button is-full-width-mobile="true" variant="primary">Bouton primaire</spw-button>
      <spw-button is-full-width-mobile="true" variant="tertiary">Bouton tertiaire</spw-button>
    </spw-group>
  `;
}
function htmlContentMaxi() {
    return /* HTML */ `
    <h1 class="spw-ds-typography-heading-01 mb-4">Que cherchez-vous ?</h1>
    <spw-search-field
      class="mb-3"
      size="large"
      name="search"
      items='[
                      {"url": "http://google.com", "label": "Banane"},
                      {"label": "Pomme"},
                      {"label": "Poire"},
                      {"label": "Cerise"},
                      {"label": "Raisin"}
                    ]'
      placeholder="Exemple : un mot-clé..."
    ></spw-search-field>
    <div class="d-flex justify-content-center flex-wrap">
      <spw-button class="m-2" variant="primary">Démarches</spw-button>
      <spw-button class="m-2" variant="primary">Réforme primes énergie</spw-button>
      <spw-button class="m-2" variant="primary">Jobs</spw-button>
      <spw-button class="m-2" variant="primary">Trafiroutes</spw-button>
      <spw-button class="m-2" variant="primary">Précompte immobilier</spw-button>
      <spw-button class="m-2" variant="primary">Taxes de circulation</spw-button>
      <spw-button class="m-2" variant="primary">Plan de paiement</spw-button>
    </div>
  `;
}
const Template = args => {
    const element = document.createElement(elementTag);
    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
    const masterProps = controls.__realProps || Object.keys(controls);
    Object.entries(args).forEach(([key, val]) => {
        if (masterProps.includes(key)) {
            element.setAttribute(toKebabCase(key), val);
        }
        else if (key.startsWith('on')) {
            element.addEventListener(key.substring(2).toLowerCase(), val);
        }
    });
    element.innerHTML = htmlContent();
    return element;
};
const TemplateMaxi = args => {
    const element = document.createElement(elementTag);
    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
    const masterProps = controls.__realProps || Object.keys(controls);
    Object.entries(args).forEach(([key, val]) => {
        if (masterProps.includes(key)) {
            element.setAttribute(toKebabCase(key), val);
        }
        else if (key.startsWith('on')) {
            element.addEventListener(key.substring(2).toLowerCase(), val);
        }
    });
    element.innerHTML = htmlContentMaxi();
    return element;
};
export const PhotoLeft = Template.bind({});
PhotoLeft.args = {
    variant: 'photo',
    imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
    imageAlt: 'Attribut alt',
    surface: 'light',
    alignment: 'left',
};
PhotoLeft.parameters = {
    docs: {
        description: {
            story: `Hero avec image pleine largeur en arrière-plan et contenu aligné à gauche. L'image couvre toute la surface et le contenu est positionné sur la gauche avec un fond semi-transparent.`,
        },
    },
};
export const PhotoRight = Template.bind({});
PhotoRight.args = {
    variant: 'photo',
    imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
    imageAlt: 'Attribut alt',
    surface: 'light',
    alignment: 'right',
};
PhotoRight.parameters = {
    docs: {
        description: {
            story: `Hero avec image pleine largeur en arrière-plan et contenu aligné à droite. Idéal pour créer une asymétrie visuelle intéressante.`,
        },
    },
};
export const PhotoCenter = Template.bind({});
PhotoCenter.args = {
    variant: 'photo',
    imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
    imageAlt: 'Attribut alt',
    surface: 'light',
    alignment: 'center',
};
PhotoCenter.parameters = {
    docs: {
        description: {
            story: `Hero avec image pleine largeur et contenu centré. Parfait pour les pages d'accueil avec un message principal fort et centralisé.`,
        },
    },
};
export const Maxi = TemplateMaxi.bind({});
Maxi.args = {
    variant: 'maxi',
    imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
    imageAlt: 'Attribut alt',
    surface: 'dark',
    overlayOpacity: 60,
    copyrightText: 'Unsplash',
};
Maxi.parameters = {
    docs: {
        description: {
            story: `Hero maxi plein écran avec overlay personnalisable, idéal pour les pages d'accueil. Inclut un champ de recherche et des raccourcis d'actions rapides. L'overlay assombrit l'image pour améliorer la lisibilité du contenu. Contient une mention de copyright en bas à droite de l'image.`,
        },
    },
};
export const GreyLeft = Template.bind({});
GreyLeft.args = {
    variant: 'grey',
    imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
    imageAlt: 'Attribut alt',
    surface: 'light',
    alignment: 'left',
};
GreyLeft.parameters = {
    docs: {
        description: {
            story: `Hero avec arrière-plan gris et image positionnée à droite, contenu aligné à gauche. Le fond gris crée un contraste doux et professionnel.`,
        },
    },
};
export const GreyRight = Template.bind({});
GreyRight.args = {
    variant: 'grey',
    imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
    imageAlt: 'Attribut alt',
    surface: 'light',
    alignment: 'right',
};
GreyRight.parameters = {
    docs: {
        description: {
            story: `Hero avec arrière-plan gris et image positionnée à gauche, contenu aligné à droite. Inverse du GreyLeft pour varier la mise en page.`,
        },
    },
};
export const WhiteLeft = Template.bind({});
WhiteLeft.args = {
    variant: 'white',
    imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
    imageAlt: 'Attribut alt',
    surface: 'light',
    alignment: 'left',
};
WhiteLeft.parameters = {
    docs: {
        description: {
            story: `Hero avec arrière-plan blanc et image à droite, contenu à gauche. Le fond blanc crée une atmosphère légère et épurée, parfait pour un contenu institutionnel.`,
        },
    },
};
export const WhiteRight = Template.bind({});
WhiteRight.args = {
    variant: 'white',
    imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
    imageAlt: 'Attribut alt',
    surface: 'light',
    alignment: 'right',
};
WhiteRight.parameters = {
    docs: {
        description: {
            story: `Hero avec arrière-plan blanc et image à gauche, contenu à droite. Alternative symétrique du WhiteLeft.`,
        },
    },
};
export const WhiteLeftPictureFull = Template.bind({});
WhiteLeftPictureFull.args = {
    variant: 'white',
    imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
    imageAlt: 'Attribut alt',
    surface: 'light',
    alignment: 'left',
    hasPictureFull: true,
};
WhiteLeftPictureFull.parameters = {
    docs: {
        description: {
            story: `Hero blanc avec image pleine hauteur sans padding. L'image occupe tout l'espace disponible verticalement pour un impact visuel maximal.`,
        },
    },
};
export const WhiteRightPictureFull = Template.bind({});
WhiteRightPictureFull.args = {
    variant: 'white',
    imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
    imageAlt: 'Attribut alt',
    surface: 'light',
    alignment: 'right',
    hasPictureFull: true,
};
WhiteRightPictureFull.parameters = {
    docs: {
        description: {
            story: `Hero blanc avec image pleine hauteur à gauche sans padding. Version inversée du WhiteLeftPictureFull avec contenu à droite.`,
        },
    },
};
const TemplateMini = args => {
    const element = document.createElement(elementTag);
    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
    const masterProps = controls.__realProps || Object.keys(controls);
    Object.entries(args).forEach(([key, val]) => {
        if (masterProps.includes(key)) {
            element.setAttribute(toKebabCase(key), val);
        }
        else if (key.startsWith('on')) {
            element.addEventListener(key.substring(2).toLowerCase(), val);
        }
    });
    element.innerHTML = `<h1 class="spw-ds-typography-heading-01">Titre de page</h1>`;
    return element;
};
export const MiniLight = TemplateMini.bind({});
MiniLight.args = {
    variant: 'mini',
    imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
    imageAlt: 'Image de hero',
    surface: 'light',
    size: 'small',
};
MiniLight.parameters = {
    docs: {
        description: {
            story: `Hero mini avec surface claire. Version compacte du hero banner, idéale pour les pages internes nécessitant un en-tête visuel sans prendre trop d'espace. L'image sert de fond avec un titre centré.`,
        },
    },
};
export const MiniDark = TemplateMini.bind({});
MiniDark.args = {
    variant: 'mini',
    imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
    imageAlt: 'Image de hero',
    surface: 'dark',
    size: 'small',
};
MiniDark.parameters = {
    docs: {
        description: {
            story: `Hero mini avec surface sombre. Version alternative du Mini Light avec une surface dark pour un meilleur contraste avec du texte blanc.`,
        },
    },
};
const TemplateFeatured = args => {
    const element = document.createElement(elementTag);
    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
    const masterProps = controls.__realProps || Object.keys(controls);
    Object.entries(args).forEach(([key, val]) => {
        if (masterProps.includes(key)) {
            element.setAttribute(toKebabCase(key), val);
        }
        else if (key.startsWith('on')) {
            element.addEventListener(key.substring(2).toLowerCase(), val);
        }
    });
    return element;
};
export const Featured = TemplateFeatured.bind({});
Featured.args = {
    variant: 'featured',
    imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
    imageAlt: 'Image featured',
    surface: 'light',
    featuredRatio: '16/9',
};
Featured.parameters = {
    docs: {
        description: {
            story: `Hero featured avec image pleine largeur, sans slot de contenu. Le ratio de l'image est uniforme sur tous les breakpoints via featured-ratio.`,
        },
    },
};
export const FeaturedResponsiveRatio = TemplateFeatured.bind({});
FeaturedResponsiveRatio.args = {
    variant: 'featured',
    imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
    imageAlt: 'Image featured',
    surface: 'light',
    featuredRatioMobile: '4/3',
    featuredRatioTablet: '16/9',
    featuredRatioDesktop: '3/1',
};
FeaturedResponsiveRatio.parameters = {
    docs: {
        description: {
            story: `Hero featured avec ratio d'image adaptatif selon le breakpoint : 4/3 sur mobile, 16/9 sur tablette, 3/1 sur desktop. Utiliser featured-ratio-mobile, featured-ratio-tablet et featured-ratio-desktop pour un contrôle granulaire.`,
        },
    },
};
export const FeaturedNaturalSize = TemplateFeatured.bind({});
FeaturedNaturalSize.args = {
    variant: 'featured',
    imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
    imageAlt: 'Image featured',
    surface: 'light',
};
FeaturedNaturalSize.parameters = {
    docs: {
        description: {
            story: `Hero featured sans ratio défini : l'image s'affiche à sa taille naturelle. À utiliser quand les dimensions de l'image sont maîtrisées et qu'aucun recadrage n'est souhaité.`,
        },
    },
};
export const AvecCopyrightTooltip = TemplateFeatured.bind({});
AvecCopyrightTooltip.args = {
    variant: 'featured',
    imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
    imageAlt: 'Image featured',
    surface: 'light',
    featuredRatio: '16/9',
    copyrightText: 'Unsplash',
    copyrightHref: 'https://unsplash.com',
    tooltipCopyrightTitle: 'Crédit photo',
    tooltipCopyrightText: 'Photo par John Doe via Unsplash',
    tooltipCopyrightMaxWidth: '200',
};
AvecCopyrightTooltip.parameters = {
    docs: {
        description: {
            story: `Hero featured avec la combinaison tag de copyright et tooltip d'information. Le tag affiche la source cliquable, le tooltip (icône info) donne le détail du crédit photo au survol. Les deux peuvent coexister ou être utilisés indépendamment via copyright-text, tooltip-copyright-title et tooltip-copyright-text.`,
        },
    },
};
