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 } from "../../../utils/utils";
const elementTag = 'spw-block-content';
const argTypes = Object.assign(Object.assign({}, withComponentControls(componentsData, { tag: elementTag })), { quoteText: {
        control: 'text',
        description: 'Texte de la citation (pour la variante blockquote).',
    }, topContent: {
        control: 'text',
        description: 'Contenu en haut de la citation (pour la variante blockquote).',
    }, bottomContent: {
        control: 'text',
        description: 'Contenu en bas de la citation (pour la variante blockquote).',
    } });
const meta = {
    title: 'Composants/Bloc de contenu',
    component: elementTag,
    argTypes,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: `

Le composant Block Content est un conteneur polyvalent qui permet d'afficher différents types de contenu mis en avant : citations (blockquote), bannières horizontales (banner-landscape) ou verticales (banner-portrait).

## Variants disponibles

- **Blockquote** : Citation stylisée avec zones top, quote et bottom
- **Banner Landscape** : Bannière horizontale avec image à droite
- **Banner Portrait** : Bannière verticale avec image en haut
- **Newsletter** : Bloc d'inscription centré avec titre, texte et formulaire

## Structure

Le composant propose différents slots selon la variante :

#### Blockquote
- **slot="top"** : Contenu au-dessus de la citation (titre, catégorie...)
- **slot="quote"** : Le texte de la citation
- **slot="bottom"** : Contenu sous la citation (auteur, source...)

#### Banner (Landscape & Portrait)
- **slot par défaut** : Contenu textuel (titre, description...)
- **slot="button"** : Bouton d'action

#### Newsletter
- **slot par défaut** : Contenu libre (titre, texte, formulaire...)

## Propriétés

- **variant** : Type de bloc ('blockquote', 'banner-landscape', 'banner-portrait', 'newsletter')
- **background** : Couleur de fond ('primary', 'neutral', 'purple', 'blue', 'petrol') — pour newsletter, 'neutral' par défaut
- **imageSrc** : URL de l'image (pour les variantes banner)
- **imageAlt** : Texte alternatif de l'image
- **href** : URL du lien (rend la bannière cliquable)
- **target** : Target du lien (_self, _blank...)

## Fonctionnalités

- Citations avec guillemets décoratifs
- Bannières avec images responsive
- Support des liens cliquables
- Bloc newsletter centré avec fond customisable
- Design adaptatif mobile/desktop
        `,
            },
        },
    },
};
export default meta;
function getHtmlContent(variant, args) {
    switch (variant) {
        case 'blockquote':
            return `
        <span slot="top">${args.topContent || ''}</span>
        <p slot="quote">${args.quoteText || ''}</p>
        <span slot="bottom">${args.bottomContent || ''}</span>
      `;
        case 'banner-landscape':
        case 'banner-portrait':
            return `
        ${args.tagText ? `<spw-tag size="medium" has-icon="false" class="mb-2">${args.tagText}</spw-tag>` : ''}
        <h2 class="spw-ds-typography-heading-02 mb-0">${args.bannerTitle || ''}</h2>
        <p class="spw-ds-typography-body-2">${args.bannerText || ''}</p>
        ${args.buttonText ? `<spw-button size="small" surface="light" variant="secondary" slot="button" icon="fa-chevron-right" icon-position="right">${args.buttonText}</spw-button>` : ''}
      `;
        default:
            return '';
    }
}
const Template = args => {
    const element = document.createElement(elementTag);
    const variant = args.variant || 'blockquote';
    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
    const masterProps = controls.__realProps || Object.keys(controls);
    Object.entries(args).forEach(([key, val]) => {
        const kebabKey = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
        if (masterProps.includes(key) && val !== undefined && val !== '') {
            element.setAttribute(kebabKey, String(val));
        }
    });
    element.innerHTML = getHtmlContent(variant, args);
    return element;
};
export const Blockquote = Template.bind({});
Blockquote.args = {
    variant: 'blockquote',
    topContent: 'Message du Ministre',
    quoteText: "La transition écologique est l'affaire de tous. Ensemble, construisons un avenir durable pour la Wallonie.",
    bottomContent: 'John Doe, Ministre de la culture',
};
export const BlockquoteNeutral = Template.bind({});
BlockquoteNeutral.args = {
    variant: 'blockquote',
    background: 'neutral',
    topContent: 'Message du Ministre',
    quoteText: "La transition écologique est l'affaire de tous. Ensemble, construisons un avenir durable pour la Wallonie.",
    bottomContent: 'John Doe, Ministre de la culture',
};
export const BannerLandscape = Template.bind({});
BannerLandscape.args = {
    variant: 'banner-landscape',
    imageSrc: 'https://images.unsplash.com/photo-1491557345352-5929e343eb89?q=80&w=2070&auto=format&fit=crop',
    imageAlt: 'Paysage wallon',
    tagText: 'Aides et subventions',
    bannerTitle: 'Découvrez les aides disponibles',
    bannerText: 'La Wallonie propose de nombreuses aides pour accompagner les citoyens et les entreprises dans leurs projets.',
    buttonText: 'Découvrir',
};
export const BannerLandscapeWithLink = Template.bind({});
BannerLandscapeWithLink.args = {
    variant: 'banner-landscape',
    imageSrc: 'https://images.unsplash.com/photo-1491557345352-5929e343eb89?q=80&w=2070&auto=format&fit=crop',
    imageAlt: 'Paysage wallon',
    href: 'https://wallonie.be',
    target: '_blank',
    tagText: 'Portail officiel',
    bannerTitle: 'Visitez le portail Wallonie.be',
    bannerText: 'Retrouvez toutes les informations et services de la Région wallonne sur notre portail officiel.',
    buttonText: 'Accéder au portail',
};
export const BannerPortrait = Template.bind({});
BannerPortrait.args = {
    variant: 'banner-portrait',
    imageSrc: 'https://images.unsplash.com/photo-1491557345352-5929e343eb89?q=80&w=2070&auto=format&fit=crop',
    imageAlt: 'Paysage wallon',
    tagText: 'Événement',
    bannerTitle: 'Journée portes ouvertes',
    bannerText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut lacinia turpis pharetra pulvinar.',
    buttonText: 'Découvrir',
};
export const BannerPortraitWithLink = Template.bind({});
BannerPortraitWithLink.args = {
    variant: 'banner-portrait',
    imageSrc: 'https://images.unsplash.com/photo-1491557345352-5929e343eb89?q=80&w=2070&auto=format&fit=crop',
    imageAlt: 'Paysage wallon',
    href: 'https://wallonie.be/evenements',
    target: '_blank',
    tagText: 'Emploi',
    bannerTitle: "Salon de l'emploi wallon",
    bannerText: 'Rencontrez les recruteurs de la fonction publique wallonne et découvrez les opportunités de carrière.',
    buttonText: 'Découvrir',
};
Blockquote.parameters = {
    docs: {
        description: {
            story: `Citation stylisée avec guillemets décoratifs. Idéale pour mettre en avant des témoignages, messages officiels ou extraits importants. Utilise trois slots : top (contexte), quote (citation) et bottom (auteur/source).`,
        },
    },
};
BlockquoteNeutral.parameters = {
    docs: {
        description: {
            story: `Variante de citation avec un fond neutre (gris). Idéale pour s'intégrer dans des contextes où le fond coloré par défaut ne convient pas.`,
        },
    },
};
BannerLandscape.parameters = {
    docs: {
        description: {
            story: `Bannière horizontale avec contenu à gauche et image à droite. Format adapté aux mises en avant sur toute la largeur. L'image s'adapte automatiquement à la taille du conteneur.`,
        },
    },
};
BannerLandscapeWithLink.parameters = {
    docs: {
        description: {
            story: `Bannière horizontale cliquable. L'ensemble de la bannière devient un lien grâce aux propriétés href et target. Le bouton reste visible pour indiquer l'action.`,
        },
    },
};
BannerPortrait.parameters = {
    docs: {
        description: {
            story: `Bannière verticale avec image en haut et contenu en dessous. Format carré idéal pour les sidebars ou grilles de contenus. L'image conserve un ratio 1:1.`,
        },
    },
};
BannerPortraitWithLink.parameters = {
    docs: {
        description: {
            story: `Bannière verticale cliquable. L'ensemble de la bannière devient un lien. Parfaite pour des call-to-action dans une colonne latérale.`,
        },
    },
};
export const Newsletter = () => {
    const wrapper = document.createElement('div');
    wrapper.innerHTML = `
    <spw-block-content variant="newsletter" background="neutral">
      <div class="spw-ds-newsletter__content">
        <h2 class="spw-ds-typography-heading-02 spw-ds-mb-md">Inscrivez-vous à notre newsletter</h2>
        <p class="spw-ds-typography-body-2 spw-ds-mb-xl">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pharetra arcu at ultrices malesuada. Mauris maximus rhoncus dolor, sed sagittis magna laoreet commodo.
        </p>
        <div class="spw-ds-newsletter__form">
          <spw-text-field placeholder="Votre adresse mail..." type="email" name="newsletter-email"></spw-text-field>
          <spw-button size="medium" variant="primary">S'inscrire</spw-button>
        </div>
      </div>
    </spw-block-content>
  `;
    return wrapper;
};
Newsletter.parameters = {
    docs: {
        description: {
            story: `Bloc newsletter centré avec titre, texte et formulaire d'inscription. Le fond est customisable via la prop background. Le layout du formulaire passe en colonne sur mobile et en ligne à partir du breakpoint md.`,
        },
    },
};
