<div
	class="flex w-full flex-row"
	x-cloak
	x-data="signup({ categories: JSON.parse('[{\u0022id\u0022:1,\u0022uuid\u0022:\u00229237244b-fa68-5c9a-9d99-11b20a084077\u0022,\u0022title\u0022:\u0022Camping\u0022,\u0022icon_url\u0022:\u0022\\\/svg\\\/login\\\/camping.svg\u0022,\u0022created_at\u0022:\u00222019-10-03T05:35:54.000000Z\u0022,\u0022updated_at\u0022:\u00222019-10-03T05:35:54.000000Z\u0022,\u0022deleted_at\u0022:null,\u0022sendinblue_list_id\u0022:20,\u0022pro\u0022:1,\u0022slot_mode\u0022:1,\u0022min_quantity\u0022:5,\u0022accommodation_text\u0022:\u0022slot\u0022,\u0022img\u0022:\u0022https:\\\/\\\/app.styqr.fr\\\/build\\\/assets\\\/camping-B6gVSH1r.svg\u0022},{\u0022id\u0022:2,\u0022uuid\u0022:\u00229eea22c2-39c4-545c-8975-e0d330ece946\u0022,\u0022title\u0022:\u0022Chambre d\\u0027h\\u00f4tes\u0022,\u0022icon_url\u0022:\u0022\\\/svg\\\/login\\\/guesthouse.svg\u0022,\u0022created_at\u0022:\u00222019-10-03T05:35:54.000000Z\u0022,\u0022updated_at\u0022:\u00222019-10-03T05:35:54.000000Z\u0022,\u0022deleted_at\u0022:null,\u0022sendinblue_list_id\u0022:21,\u0022pro\u0022:1,\u0022slot_mode\u0022:0,\u0022min_quantity\u0022:1,\u0022accommodation_text\u0022:\u0022room\u0022,\u0022img\u0022:\u0022https:\\\/\\\/app.styqr.fr\\\/build\\\/assets\\\/guesthouse-DNesPltL.svg\u0022},{\u0022id\u0022:3,\u0022uuid\u0022:\u0022e45a2f60-02b6-5ac5-805e-d7968752ffe3\u0022,\u0022title\u0022:\u0022Conciergerie\u0022,\u0022icon_url\u0022:\u0022\\\/svg\\\/login\\\/concierge.svg\u0022,\u0022created_at\u0022:\u00222019-10-03T05:35:54.000000Z\u0022,\u0022updated_at\u0022:\u00222019-10-03T05:35:54.000000Z\u0022,\u0022deleted_at\u0022:null,\u0022sendinblue_list_id\u0022:22,\u0022pro\u0022:1,\u0022slot_mode\u0022:0,\u0022min_quantity\u0022:1,\u0022accommodation_text\u0022:\u0022accommodation\u0022,\u0022img\u0022:\u0022https:\\\/\\\/app.styqr.fr\\\/build\\\/assets\\\/concierge-B6W3ctzJ.svg\u0022},{\u0022id\u0022:4,\u0022uuid\u0022:\u0022a4a653fd-e28c-5488-819b-483aae619f51\u0022,\u0022title\u0022:\u0022Gestionnaire de locations\u0022,\u0022icon_url\u0022:\u0022\\\/svg\\\/login\\\/rental_manager.svg\u0022,\u0022created_at\u0022:\u00222019-10-03T05:35:54.000000Z\u0022,\u0022updated_at\u0022:\u00222019-10-03T05:35:54.000000Z\u0022,\u0022deleted_at\u0022:null,\u0022sendinblue_list_id\u0022:23,\u0022pro\u0022:1,\u0022slot_mode\u0022:0,\u0022min_quantity\u0022:1,\u0022accommodation_text\u0022:\u0022accommodation\u0022,\u0022img\u0022:\u0022https:\\\/\\\/app.styqr.fr\\\/build\\\/assets\\\/rental_manager-CJ-hophS.svg\u0022},{\u0022id\u0022:5,\u0022uuid\u0022:\u00223c42c2e2-4667-5ebc-b6f8-95708456e956\u0022,\u0022title\u0022:\u0022Particulier\u0022,\u0022icon_url\u0022:\u0022\\\/svg\\\/login\\\/individual.svg\u0022,\u0022created_at\u0022:\u00222019-10-03T05:35:54.000000Z\u0022,\u0022updated_at\u0022:\u00222019-10-03T05:35:54.000000Z\u0022,\u0022deleted_at\u0022:null,\u0022sendinblue_list_id\u0022:26,\u0022pro\u0022:0,\u0022slot_mode\u0022:0,\u0022min_quantity\u0022:1,\u0022accommodation_text\u0022:\u0022accommodation\u0022,\u0022img\u0022:\u0022https:\\\/\\\/app.styqr.fr\\\/build\\\/assets\\\/individual-DTtj_Rcr.svg\u0022},{\u0022id\u0022:6,\u0022uuid\u0022:\u002297f75d8d-4007-592d-8f30-b0677e74bc10\u0022,\u0022title\u0022:\u0022G\\u00eete\u0022,\u0022icon_url\u0022:\u0022\\\/svg\\\/login\\\/cottage.svg\u0022,\u0022created_at\u0022:\u00222019-10-03T05:35:54.000000Z\u0022,\u0022updated_at\u0022:\u00222019-10-03T05:35:54.000000Z\u0022,\u0022deleted_at\u0022:null,\u0022sendinblue_list_id\u0022:24,\u0022pro\u0022:1,\u0022slot_mode\u0022:0,\u0022min_quantity\u0022:1,\u0022accommodation_text\u0022:\u0022accommodation\u0022,\u0022img\u0022:\u0022https:\\\/\\\/app.styqr.fr\\\/build\\\/assets\\\/cottage-BuM7NTtJ.svg\u0022},{\u0022id\u0022:7,\u0022uuid\u0022:\u00222a343f89-f849-56e7-8a18-fe1ef38296e3\u0022,\u0022title\u0022:\u0022H\\u00f4tel\u0022,\u0022icon_url\u0022:\u0022\\\/svg\\\/login\\\/hotel.svg\u0022,\u0022created_at\u0022:\u00222019-10-03T05:35:54.000000Z\u0022,\u0022updated_at\u0022:\u00222019-10-03T05:35:54.000000Z\u0022,\u0022deleted_at\u0022:null,\u0022sendinblue_list_id\u0022:25,\u0022pro\u0022:1,\u0022slot_mode\u0022:1,\u0022min_quantity\u0022:5,\u0022accommodation_text\u0022:\u0022room\u0022,\u0022img\u0022:\u0022https:\\\/\\\/app.styqr.fr\\\/build\\\/assets\\\/hotel-D0e_82Q6.svg\u0022}]') })"
>

	<div
	class="flex justify-center"
	x-data="commonModal({ modalName: 'maeva_signup_modal' })"
>
	<div
		aria-modal="true"
		class="fixed inset-0 z-[2000] overflow-y-auto"
		role="dialog"
		style="display: none"
		x-on:keydown.escape.prevent.stop="closeModal()"
		x-show="open"
	>
		<div
			:class="{
			    'bg-black/25': $store.config.isBase,
			    'bg-maevablue/25': $store.config.isMaeva
			}"
			class="fixed inset-0"
			x-show="open"
			x-transition.opacity
		></div>

		<div
			class="relative flex min-h-screen items-center justify-center p-4"
			x-on:mousedown.self="closeModal()"
			x-show="open"
			x-transition
		>
			<div
				 x-trap.noscroll.inert="open" 				class="relative flex rounded-xl bg-white shadow-lg max-w-[90vw] p-12 lg:min-w-[700px]"
			>
				<div class="flex w-full flex-col items-center gap-4">
					<div class="relative flex w-full justify-end">
												<button
							:class="{
							    'hover:text-white hover:bg-styqrgreen bg-styqrgreen/10 text-styqrgreen': $store.config.isBase,
							    'hover:text-white hover:bg-maevablue bg-maevalightyellow text-maevablue': $store.config.isMaeva,
							    'hover:text-white hover:bg-gdfgreen bg-gdfgreen/10 text-gdfgreen': $store.config.isGdf
							}"
							@click="closeModal()"
							aria-label="Close modal"
							class="-mt-4 flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border-none transition-all duration-300"
							type="button"
						>
							<svg
	class="h-[22px] w-[22px]"
	data-name="Layer 2"
	viewBox="0 0 22 22"
	xmlns="http://www.w3.org/2000/svg"
>
	<g data-name="invisible box">
		<rect
			data-name="Rectangle 45"
			fill="none"
			height="22"
			width="22"
		/>
	</g>
	<g
		data-name="icons Q2"
		transform="translate(4.584 4.565)"
	>
		<path
			d="M17.7,16.395l4.858-4.812a.963.963,0,0,0,.092-1.238.871.871,0,0,0-1.375-.092l-4.858,4.858-4.858-4.858a.871.871,0,0,0-1.375.092.963.963,0,0,0,.092,1.238l4.858,4.813-4.858,4.813a.963.963,0,0,0-.092,1.238.871.871,0,0,0,1.375.092l4.858-4.858,4.858,4.858a.871.871,0,0,0,1.375-.092.962.962,0,0,0-.092-1.238Z"
			data-name="Tracé 39"
			fill="currentColor"
			transform="translate(-10.001 -9.959)"
		/>
	</g>
</svg>
						</button>
					</div>
					<div class="flex flex-col items-center justify-evenly gap-7">
			<div class="flex flex-col justify-evenly gap-10">
				<div class="flex justify-center">
					<span class="opensans-bold text-2xl text-styqrblack">
						Votre mail n'est pas référencé					</span>
				</div>
				<div class="flex justify-center">

					<span class="opensans-regular text-lg text-styqrblack">
						Merci de contacter le pôle Expérience de Maeva.com					</span>
				</div>
				<div class="flex justify-center">

					<div class="flex items-center justify-between gap-10">
						<a
							class="text-maevablue underline"
							href="#"
						>Contacter le support</a>
						<button
							@click="$dispatch('closeCommonModal', { modalName: 'maeva_signup_modal'})"
							class="poppins-medium opensans-bold h-14 w-40 rounded bg-maevayellow text-center text-base text-styqrblack transition-all duration-100"
							type="button"
						>
							<span>Annuler</span>
						</button>
					</div>
				</div>
			</div>
		</div>

				</div>
			</div>
		</div>
	</div>
</div>

	<script>
		function commonModal({
			modalName
		}) {
			return {
				open: false,
				showBackButton: false,
				modalName,
				closeModal() {
					this.open = false;
				},
				openModal() {
					this.open = true;
				},
				init() {
					window.addEventListener('openCommonModal', (event) => {
						if (event.detail.modalName === this.modalName) {
							this.open = true
						}

					});

					window.addEventListener('closeCommonModal', (event) => {
						if (event.detail.modalName === this.modalName) {
							this.open = false
						}
					});

					window.addEventListener('showBackButton', (event) => {
						if (event.detail.modalName === this.modalName) {
							this.showBackButton = event.detail.visible ?? true;
						}
					});
				},
			};
		}
	</script>

	<template x-if="false">
		<span @click="$dispatch('openCommonModal', { modalName: 'maeva_signup_modal' })">Testmodal</span>
	</template>
	<div
		:class="{
		    'bg-styqrverylightgrey ': $store.config.isBase,
		    'bg-maevaverylightgrey': $store.config.isMaeva
		}"
		class="flex w-full flex-col gap-7 pb-7 lg:w-1/2"
	>
		<div class="flex justify-center pt-8 lg:justify-start lg:pl-16">
			<img
				:class="{
				    'scale-150': $store.config.isMaeva,
				    'scale-[2.0] ml-5 mb-5': $store.config.env === window
				        .STYQR_ENV_GDF
				}"
				alt="StyQR sidebar logo"
				class="w-28"
				src="https://app.styqr.fr/build/assets/logo-BQWXqMGo.svg"
			>
		</div>

		<form
			@submit.prevent="submit()"
			action="https://app.styqr.fr/auth/signup"
			class="h-full"
			method="post"
			x-ref="signupForm"
		>
			<input type="hidden" name="_token" value="o0wmXqZBFMTG9tLMQr6mPrXlshD6qJFusytvpyCh" autocomplete="off">			<div class="flex w-full flex-col items-center justify-between gap-10">
				<div class="flex w-5/6 flex-col justify-center gap-7 lg:w-4/6">
					<div class="flex flex-col justify-center lg:justify-start">
						<template x-if="$store.config.isBase || $store.config.isMaeva">
							<span
								:class="{
								    'opensans-semibold': $store.config.isMaeva,
								    'poppins-medium': $store.config.isBase
								}"
								class="text-center text-3xl text-styqrblack lg:text-left"
							>Bienvenue</span>
						</template>
						<template x-if="$store.config.isGDF">
							<span class="mulish-light text-center text-3xl text-black lg:text-left">
								Bienvenue sur <br><span class="mulish-semibold">Mon Livret d'accueil Gîtes de France®</span></span>
						</template>
						<template x-if="$store.config.isGDF">
							<span class="mulish-regular opensans-regular mulish-regular mt-7 text-center text-lg text-black lg:text-left">
								Cette plateforme est <span class="mulish-bold">exclusivement dédiés aux propriétaires Gîtes de France®</span>.  Si vous ne parvenez pas à créer votre compte contactez-nous via le chat en ligne.							</span>
						</template>
						<template x-if="$store.config.isBase || $store.config.isMaeva">
							<span
								class="poppins-regular opensans-regular text-center text-lg text-styqrmediumgrey lg:text-left">Créez votre compte sur StyQR							</span>
						</template>
					</div>

					
					<div class="absolute left-[0px] h-1 w-1 overflow-hidden">
						<label for="company">Company</label>
						<input
							autocomplete="off"
							id="company"
							name="company"
							tabindex="-1"
							type="text"
						>
					</div>

					
					<div x-show="currentStep === 1" x-transition>
						<div class="flex flex-col gap-7">
							<template x-if="$store.config.isBase">
								<div class="flex flex-col gap-4">
									<a
										class="poppins-regular flex h-14 w-full cursor-pointer items-center justify-center gap-4 rounded-md bg-white text-base text-styqrblack transition-all duration-100 hover:bg-[#EDEDED]"
										href="https://app.styqr.fr/auth/google/redirect"
									>
										<div class="h-9 w-9">
											<img
												src="https://app.styqr.fr/build/assets/google-CfoTaO6A.svg"
												x-cloak
											/>
										</div>
										Google connexion									</a>
									<a
										class="poppins-regular flex h-14 w-full cursor-pointer items-center justify-center gap-4 rounded-md bg-white text-base text-styqrblack transition-all duration-100 hover:bg-[#3B5998] hover:text-white"
										href="https://app.styqr.fr/auth/facebook/redirect"
									>
										<div class="h-9 w-9">
											<img
												src="https://app.styqr.fr/build/assets/fb-CZSFXdFF.svg"
												x-cloak
											/>
										</div>
										Facebook connect									</a>
									<div class="flex items-center">
										<div class="h-[2px] w-full bg-white"></div>
										<span class="poppins-regular opensans-regular px-6 text-base text-styqrblack">ou</span>
										<div class="h-[2px] w-full bg-white"></div>
									</div>
								</div>
							</template>
							<div
	class="inputWrapper flex w-full flex-col"
	x-data="inputWrapper({
    align: 'left' ?? 'left',
    type: 'text',
    customTW: JSON.parse('[\u0022bg-white\u0022]'),
    inputName: 'email',
    inputValue: '',
    formUniqId: null,
    backgroundColor: 'bg-white',
    additionalInfoIsSet: false,
    isDisabled: false,
    rules: 'required|email|max:100',
    errorMessages: [],
})"
>
			<label
			class="multi-black poppins-medium opensans-regular mulish-semibold mb-2 text-base"
			for="email-"
		>
			Adresse mail
		</label>
	
	<div class="relative flex items-center">
		<input
			:class="{
			    'text-center': align === 'center',
			    'border-styqrred border-2':
			        !isValid,
			    'cursor-not-allowed': isDisabled,
			    'bg-maevaverylightgrey': $store.config.isMaeva && !backgroundColor,
			    'bg-styqrverylightgrey focus:border-styqrpurple/30 focus:ring-styqrpurple/30 focus:ring-2': $store.config.env ===
			        window
			        .STYQR_ENV_BASE && !backgroundColor,
			    'bg-gdfverylightgrey': $store.config.isGDF && !backgroundColor,
			    [backgroundColor]: !!backgroundColor,

			    'rounded-md  focus:outline-none   placeholder:italic border-[1px] border-solid border-styqrmediumgrey/10 ': [
			        window.STYQR_ENV_MAEVA, window.STYQR_ENV_BASE, window.STYQR_ENV_GDF
			    ].includes($store.config.env),
			}"
			:disabled="isDisabled"
			:type="type"
			:value="inputValue"
			@blur="additionalInfoIsSet ? showAdditionalInfo = false : null; rules ? $validate(rules) : null"
			@change="$dispatch('inputupdated', { 
                name: 'email', 
                value: $event.target.value,
                formUniqId: formUniqId
            })"
			@focus="additionalInfoIsSet ? showAdditionalInfo = true : null"
			@keyup="if (type !== 'date') $dispatch('inputupdated', { 
                name: 'email', 
                value: $event.target.value,
                formUniqId: formUniqId
            })"
			class="trans-active poppins-regular opensans-regular mulish-regular h-12 w-full pl-4 text-sm placeholder:text-sm placeholder:font-normal"
			data-name="email-"
			id="email-"
			lang="fr"
			maxlength="500"
			name="email"
			placeholder="Entrez votre adresse mail"
			x-ref="email"
		>

		<!-- TODO, change the way we pass custom prop, use $attributes ? -->
		
	</div>

	<template x-if="!isValid && errorMessages.length">
		<div class="mt-1 flex flex-col gap-1">
			<template x-for="error in errorMessages">
				<div class="poppins-light opensans-regular text-xs text-styqrred">
					<span x-text="error"></span>
				</div>
			</template>
		</div>
	</template>
	</div>

	<script>
		function inputWrapper({
			align,
			type,
			customTW,
			inputName,
			inputValue,
			formUniqId,
			backgroundColor,
			additionalInfoIsSet,
			rules,
			errorMessages,
			isDisabled,
		}) {
			return {
				align,
				type,
				customTW,
				inputName,
				inputValue,
				formUniqId,
				backgroundColor,
				additionalInfoIsSet,
				showAdditionalInfo: false,
				rules,
				isValid: true,
				errorMessages,
				isDisabled,
				init() {
					if (this.formUniqId) {
						if (this.$refs[
								`${this.inputName}-${this.formUniqId}`
							] !== undefined) {
							this.$refs[
								`${this.inputName}-${this.formUniqId}`
							].classList.add(...Object
								.values(this.customTW));
						}
					} else {
						if (this.$refs[this.inputName] !==
							undefined) {
							this.$refs[this.inputName].classList
								.add(...Object.values(this
									.customTW));
						}
					}

					if (errorMessages.length) {
						this.isValid = false
					}

					window.addEventListener('setinput', (
						event) => {

						Object.entries(event.detail)
							.forEach(([key, value]) => {
								if (key === this
									.inputName) {
									if (event.detail
										.formUniqId) {
										if (this
											.formUniqId ===
											event
											.detail
											.formUniqId
										) {
											this.inputValue =
												value;
										}
									} else {
										this.inputValue =
											value;
									}
								}
							});
					});

					window.addEventListener('inputvalidation', (
						event) => {
						if (event.detail.inputName === this
							.inputName) {
							this.isValid = event.detail
								.isValid;
							this.errorMessages = event
								.detail.errorMessages;
						}
					});
				}
			};
		}
	</script>
							<button
								:class="{
								    'bg-styqrred hover:bg-styqrdarkred text-white': $store.config.isBase,
								    'bg-maevayellow text-styqrblack': $store.config.isMaeva,
								    'bg-gdfgreen text-white rounded-full': $store.config.isGDF
								}"
								:disabled="isCheckingEmail"
								@click="checkEmailAndContinue()"
								class="poppins-medium opensans-bold mulish-semibold h-14 min-w-56 rounded px-6 text-center text-base shadow-lg transition-all duration-100"
								type="button"
							>
								<span x-show="!isCheckingEmail">Continuer</span>
								<span
									class="loader-spinner"
									x-cloak
									x-show="isCheckingEmail"
								></span>
							</button>
						</div>
					</div>

					
					<div x-show="currentStep === 2" x-transition x-cloak>
						<div class="flex flex-col gap-7">
							<div class="flex items-center gap-3 rounded-lg bg-white px-4 py-3">
								<span
									:class="{
									    'text-styqrmediumgrey': $store.config.isBase,
									    'text-maevamediumgrey': $store.config.isMaeva,
									    'text-gdfmediumgrey': $store.config.isGDF
									}"
									class="poppins-regular opensans-regular flex-1 text-sm"
									x-show="!isEditingEmail"
									x-text="emailValue"
								></span>
								<input
									@keydown.enter.prevent="isEditingEmail = false"
									class="poppins-regular opensans-regular flex-1 bg-transparent text-sm text-styqrblack outline-none"
									type="email"
									x-model="emailValue"
									x-ref="editEmailInput"
									x-show="isEditingEmail"
								/>
								<button
									:class="{
									    'text-styqrred': $store.config.isBase,
									    'text-maevablue': $store.config.isMaeva,
									    'text-gdfgreen': $store.config.isGDF
									}"
									@click="if (isEditingEmail) { isEditingEmail = false; } else { isEditingEmail = true; $nextTick(() => $refs.editEmailInput.focus()); }"
									class="poppins-regular text-sm underline"
									type="button"
									x-text="isEditingEmail ? 'OK' : 'Modifier'"
								></button>
							</div>
							<input name="email" type="hidden" x-bind:value="emailValue" />
							<div
	class="inputWrapper flex w-full flex-col"
	x-data="inputWrapper({
    align: 'left' ?? 'left',
    type: 'text',
    customTW: JSON.parse('[\u0022bg-white\u0022]'),
    inputName: 'fname',
    inputValue: '',
    formUniqId: null,
    backgroundColor: 'bg-white',
    additionalInfoIsSet: false,
    isDisabled: false,
    rules: 'required|max:50',
    errorMessages: [],
})"
>
			<label
			class="multi-black poppins-medium opensans-regular mulish-semibold mb-2 text-base"
			for="fname-"
		>
			Prénom
		</label>
	
	<div class="relative flex items-center">
		<input
			:class="{
			    'text-center': align === 'center',
			    'border-styqrred border-2':
			        !isValid,
			    'cursor-not-allowed': isDisabled,
			    'bg-maevaverylightgrey': $store.config.isMaeva && !backgroundColor,
			    'bg-styqrverylightgrey focus:border-styqrpurple/30 focus:ring-styqrpurple/30 focus:ring-2': $store.config.env ===
			        window
			        .STYQR_ENV_BASE && !backgroundColor,
			    'bg-gdfverylightgrey': $store.config.isGDF && !backgroundColor,
			    [backgroundColor]: !!backgroundColor,

			    'rounded-md  focus:outline-none   placeholder:italic border-[1px] border-solid border-styqrmediumgrey/10 ': [
			        window.STYQR_ENV_MAEVA, window.STYQR_ENV_BASE, window.STYQR_ENV_GDF
			    ].includes($store.config.env),
			}"
			:disabled="isDisabled"
			:type="type"
			:value="inputValue"
			@blur="additionalInfoIsSet ? showAdditionalInfo = false : null; rules ? $validate(rules) : null"
			@change="$dispatch('inputupdated', { 
                name: 'fname', 
                value: $event.target.value,
                formUniqId: formUniqId
            })"
			@focus="additionalInfoIsSet ? showAdditionalInfo = true : null"
			@keyup="if (type !== 'date') $dispatch('inputupdated', { 
                name: 'fname', 
                value: $event.target.value,
                formUniqId: formUniqId
            })"
			class="trans-active poppins-regular opensans-regular mulish-regular h-12 w-full pl-4 text-sm placeholder:text-sm placeholder:font-normal"
			data-name="fname-"
			id="fname-"
			lang="fr"
			maxlength="500"
			name="fname"
			placeholder="Entrez votre prénom"
			x-ref="fname"
		>

		<!-- TODO, change the way we pass custom prop, use $attributes ? -->
		
	</div>

	<template x-if="!isValid && errorMessages.length">
		<div class="mt-1 flex flex-col gap-1">
			<template x-for="error in errorMessages">
				<div class="poppins-light opensans-regular text-xs text-styqrred">
					<span x-text="error"></span>
				</div>
			</template>
		</div>
	</template>
	</div>

							<div
	class="inputWrapper flex w-full flex-col"
	x-data="inputWrapper({
    align: 'left' ?? 'left',
    type: 'text',
    customTW: JSON.parse('[\u0022bg-white\u0022]'),
    inputName: 'lname',
    inputValue: '',
    formUniqId: null,
    backgroundColor: 'bg-white',
    additionalInfoIsSet: false,
    isDisabled: false,
    rules: 'required|max:50',
    errorMessages: [],
})"
>
			<label
			class="multi-black poppins-medium opensans-regular mulish-semibold mb-2 text-base"
			for="lname-"
		>
			Nom
		</label>
	
	<div class="relative flex items-center">
		<input
			:class="{
			    'text-center': align === 'center',
			    'border-styqrred border-2':
			        !isValid,
			    'cursor-not-allowed': isDisabled,
			    'bg-maevaverylightgrey': $store.config.isMaeva && !backgroundColor,
			    'bg-styqrverylightgrey focus:border-styqrpurple/30 focus:ring-styqrpurple/30 focus:ring-2': $store.config.env ===
			        window
			        .STYQR_ENV_BASE && !backgroundColor,
			    'bg-gdfverylightgrey': $store.config.isGDF && !backgroundColor,
			    [backgroundColor]: !!backgroundColor,

			    'rounded-md  focus:outline-none   placeholder:italic border-[1px] border-solid border-styqrmediumgrey/10 ': [
			        window.STYQR_ENV_MAEVA, window.STYQR_ENV_BASE, window.STYQR_ENV_GDF
			    ].includes($store.config.env),
			}"
			:disabled="isDisabled"
			:type="type"
			:value="inputValue"
			@blur="additionalInfoIsSet ? showAdditionalInfo = false : null; rules ? $validate(rules) : null"
			@change="$dispatch('inputupdated', { 
                name: 'lname', 
                value: $event.target.value,
                formUniqId: formUniqId
            })"
			@focus="additionalInfoIsSet ? showAdditionalInfo = true : null"
			@keyup="if (type !== 'date') $dispatch('inputupdated', { 
                name: 'lname', 
                value: $event.target.value,
                formUniqId: formUniqId
            })"
			class="trans-active poppins-regular opensans-regular mulish-regular h-12 w-full pl-4 text-sm placeholder:text-sm placeholder:font-normal"
			data-name="lname-"
			id="lname-"
			lang="fr"
			maxlength="500"
			name="lname"
			placeholder="Entrez votre nom"
			x-ref="lname"
		>

		<!-- TODO, change the way we pass custom prop, use $attributes ? -->
		
	</div>

	<template x-if="!isValid && errorMessages.length">
		<div class="mt-1 flex flex-col gap-1">
			<template x-for="error in errorMessages">
				<div class="poppins-light opensans-regular text-xs text-styqrred">
					<span x-text="error"></span>
				</div>
			</template>
		</div>
	</template>
	</div>

							<div
	class="inputWrapper flex w-full flex-col"
	x-data="inputWrapper({
    align: 'left' ?? 'left',
    type: 'password',
    customTW: JSON.parse('[\u0022bg-white\u0022]'),
    inputName: 'password',
    inputValue: '',
    formUniqId: null,
    backgroundColor: 'bg-white',
    additionalInfoIsSet: true,
    isDisabled: false,
    rules: 'required|min:8|max:20|pwd',
    errorMessages: [],
})"
>
			<label
			class="multi-black poppins-medium opensans-regular mulish-semibold mb-2 text-base"
			for="password-"
		>
			Mot de passe
		</label>
	
	<div class="relative flex items-center">
		<input
			:class="{
			    'text-center': align === 'center',
			    'border-styqrred border-2':
			        !isValid,
			    'cursor-not-allowed': isDisabled,
			    'bg-maevaverylightgrey': $store.config.isMaeva && !backgroundColor,
			    'bg-styqrverylightgrey focus:border-styqrpurple/30 focus:ring-styqrpurple/30 focus:ring-2': $store.config.env ===
			        window
			        .STYQR_ENV_BASE && !backgroundColor,
			    'bg-gdfverylightgrey': $store.config.isGDF && !backgroundColor,
			    [backgroundColor]: !!backgroundColor,

			    'rounded-md  focus:outline-none   placeholder:italic border-[1px] border-solid border-styqrmediumgrey/10 ': [
			        window.STYQR_ENV_MAEVA, window.STYQR_ENV_BASE, window.STYQR_ENV_GDF
			    ].includes($store.config.env),
			}"
			:disabled="isDisabled"
			:type="type"
			:value="inputValue"
			@blur="additionalInfoIsSet ? showAdditionalInfo = false : null; rules ? $validate(rules) : null"
			@change="$dispatch('inputupdated', { 
                name: 'password', 
                value: $event.target.value,
                formUniqId: formUniqId
            })"
			@focus="additionalInfoIsSet ? showAdditionalInfo = true : null"
			@keyup="if (type !== 'date') $dispatch('inputupdated', { 
                name: 'password', 
                value: $event.target.value,
                formUniqId: formUniqId
            })"
			class="trans-active poppins-regular opensans-regular mulish-regular h-12 w-full pl-4 text-sm placeholder:text-sm placeholder:font-normal"
			data-name="password-"
			id="password-"
			lang="fr"
			maxlength="500"
			name="password"
			placeholder="Entrez votre mot de passe"
			x-ref="password"
		>

		<!-- TODO, change the way we pass custom prop, use $attributes ? -->
					<button
				@click="type === 'password' ? type = 'text' : type = 'password'"
				class="absolute right-5 top-1/2 -translate-y-1/2 transform cursor-pointer text-styqrmediumgrey"
				type="button"
			>
				<div>
					<img
						class="aspect-[1/1] w-4"
						src="https://app.styqr.fr/build/assets/eye-regular-D2tz0aXv.svg"
						x-cloak
						x-show="type === 'password'"
					>

				</div>
				<div>
					<img
						class="aspect-[1/1] w-4"
						src="https://app.styqr.fr/build/assets/eye-slash-regular-CCrAfMiw.svg"
						x-cloak
						x-show="type === 'text'"
					>
				</div>
			</button>
		
	</div>

	<template x-if="!isValid && errorMessages.length">
		<div class="mt-1 flex flex-col gap-1">
			<template x-for="error in errorMessages">
				<div class="poppins-light opensans-regular text-xs text-styqrred">
					<span x-text="error"></span>
				</div>
			</template>
		</div>
	</template>
			<div
			class="flex"
			x-cloak
			x-collapse
			x-show="additionalInfoIsSet && showAdditionalInfo"
		>
			<div class="poppins-light opensans-regular text-xs text-styqrmediumgrey"><p>Pour assurer la sécurité de votre compte, veuillez choisir un mot de passe respectant les critères suivants :
							</p>
							<ul class="list-disc pl-4">
								<li>Entre 8 et 20 caractères</li>
								<li>Au moins une majuscule (A-Z)</li>
								<li>Au moins une minuscule (a-z)</li>
								<li>Au moins un chiffre (0-9)</li>
								<li>Au moins un caractère spécial (ex: !@#$%^&*_-?)</li>
							</ul></div>
		</div>
	</div>

															<span class="poppins-medium opensans-bold text-base text-styqrblack">
									Quel type d'hébergement proposez-vous ?								</span>
								<div class="flex w-full flex-col gap-2">
									<div class="flex flex-col flex-wrap lg:flex-row">
										<template x-for="(option, index) in categories">
											<label
												:key="index"
												class="poppins-light opensans-regular mb-3 mt-3 flex basis-1/2 items-center gap-4 text-sm"
											>
												<input
													:value="option['id']"
													class="hidden"
													name="user_category_id"
													type="radio"
													x-model="selectedCategory"
												/>
												<div
													:class="{
													    'border-styqrpurple bg-styqrpurple/5': $store.config.isBase,
													    'border-maevablue bg-maevablue/5': $store.config.isMaeva
													}"
													class="flex h-6 w-6 cursor-pointer items-center justify-center rounded-md border-2"
												>
													<div
														:class="{
														    'bg-styqrpurple': $store.config.isBase,
														    'bg-maevablue': $store.config.isMaeva
														}"
														class="checkbox-inside h-3 w-3 rounded"
														x-show="selectedCategory == option['id']"
														x-transition
													></div>
												</div>
												<div
													:class="{
													    'bg-styqrpurple/5': $store.config.isBase,
													    'bg-maevalightgrey': $store.config.isMaeva
													}"
													class="flex h-9 w-9 items-center justify-center rounded-full bg-styqrpurple/5"
												>
													<img :src="option.img" class="h-5 w-5 object-contain" />
												</div>
												<span x-text="categoriesLabel[option['id']]"></span>
											</label>
										</template>
									</div>
								</div>
								<div
									:class="{
									    'text-styqrred': $store.config.isBase || $store.config.isMaeva,
									    'text-gdfred': $store.config.isGDF
									}"
									class="poppins-light opensans-regular text-xs"
									x-cloak
									x-show="!fieldsValidationStatus.category"
								>
									<span>La catégorie est obligatoire.</span>
								</div>

																						<div
	@recaptcha.window="execute"
	x-data="recaptcha()"
></div>


							<button
								:class="{
								    'bg-styqrred hover:bg-styqrdarkred  text-white ': $store.config.isBase,
								    'bg-maevayellow text-styqrblack': $store.config.isMaeva,
								    'bg-gdfgreen text-white rounded-full': $store.config.isGDF
								}"
								class="poppins-medium opensans-bold mulish-semibold h-14 w-56 rounded text-center text-base shadow-lg transition-all duration-100"
								type="submit"
							>
								<span>Créer un compte</span>
							</button>
							<template x-if="$store.config.isBase">
								<p class="poppins-light text-[15px] text-styqrmediumgrey">
									En cliquant sur ‘Créer mon livret’, vous certifiez avoir pris connaissance et accepter sans réserve <a
							class="text-styqrblack underline"
							href="https://styqr.fr/conditions-generales-de-vente-et-dutilisation-cgvu/"
							target="_blank"
						> les Conditions
							générales d’utilisation et vente de StyQR.</a><br><br>

						Pour en savoir plus sur la façon dont StyQR recueille et protège vos données personnelles, veuillez consulter
						notre
						<a
							class="text-styqrblack underline"
							href="https://styqr.fr/politique-de-confidentialite/"
							target="_blank"
						>politique de confidentialité </a>.
								</p>
							</template>
							<template x-if="$store.config.isGDF">
								<p class="mulish-light text-[13px] text-gdfmediumgrey">
									<span>En cliquant sur ‘Créer mon livret’, vous certifiez avoir pris connaissance et accepter 
                            sans réserve 
                            <a
                                class="text-gdfgreen underline"
                                href="https://monlivretdaccueilgitesdefrance.fr/cgvu/"
                                target="_blank"
                            >les Conditions générales d’utilisation et vente de Gîtes de France ®</a> <br><br>
                            Pour en savoir plus sur la façon dont Gîtes de France ® recueille et protège vos données 
                            personnelles, veuillez consulter notre <a
							class="text-gdfgreen underline"
							href="https://monlivretdaccueilgitesdefrance.fr/politique-de-confidentialite-gdf/"
							target="_blank"
                            >
                                politique de confidentialité.
                            </a> 
                        </span>
								</p>
							</template>
						</div>
					</div>

				</div>

				<div class="flex w-5/6 flex-col justify-center gap-7 lg:w-4/6">
					<div class="h-[2px] w-full bg-white"></div>
					<span
						:class="{
						    'text-gdfmediumgrey': $store.config.isGDF,
						    'text-styqrmediumgrey': $store.config.isBase || $store.config.isMaeva
						}"
						class="poppins-regular opensans-regular mulish-regular text-sm"
					>
						Déjà un compte ?						<a
							:class="{
							    'text-styqrblack': $store.config.isBase,
							    'text-gdfgreen': $store.config.isGDF
							}"
							class="text-styqrblack underline hover:font-semibold"
							href="https://app.styqr.fr/auth/login"
						>Connectez-vous</a>
					</span>
					<div class="poppins-regular opensans-regular mulish-regular flex gap-16 text-[15px] text-styqrblack">
						<a
							class="hover:underline"
							href="https://styqr.fr/politique-de-confidentialite/"
							target="_blank"
							x-cloak
							x-show="$store.config.isBase"
						>Politique de confidentialité</a>
						<a
							class="hover:underline"
							href="https://monlivretdaccueilgitesdefrance.fr/politique-de-confidentialite-gdf/"
							target="_blank"
							x-cloak
							x-show="$store.config.isGDF"
						>Politique de confidentialité</a>
						<a
							class="hover:underline"
							href="https://styqr.fr/conditions-generales-de-vente-et-dutilisation-cgvu/"
							target="_blank"
							x-cloak
							x-show="$store.config.isBase"
						>CGU</a>
						<a
							class="hover:underline"
							href="https://monlivretdaccueilgitesdefrance.fr/cgvu/"
							target="_blank"
							x-cloak
							x-show="$store.config.isGDF"
						>CGVU</a>
						<section
	class="flag-switcher"
	x-data="{
		open: false,
		locale: 'fr',
		flags: JSON.parse('{\u0022fr\u0022:\u0022https:\\\/\\\/app.styqr.fr\\\/build\\\/assets\\\/fr-Chxwg8cX.svg\u0022,\u0022en\u0022:\u0022https:\\\/\\\/app.styqr.fr\\\/build\\\/assets\\\/en-BjR-HC0K.svg\u0022,\u0022es\u0022:\u0022https:\\\/\\\/app.styqr.fr\\\/build\\\/assets\\\/es-CUIqbuJg.svg\u0022,\u0022pt\u0022:\u0022https:\\\/\\\/app.styqr.fr\\\/build\\\/assets\\\/pt-DHBetvJq.svg\u0022,\u0022it\u0022:\u0022https:\\\/\\\/app.styqr.fr\\\/build\\\/assets\\\/it-BUD2l8q-.svg\u0022,\u0022de\u0022:\u0022https:\\\/\\\/app.styqr.fr\\\/build\\\/assets\\\/de-D0RCRAJZ.svg\u0022}'),
		dropdownStyle: {},
		init() {
			const value = `; ${document.cookie}`;
			const parts = value.split('; admin-locale=');
			if (parts.length === 2) {
				const cookieLocale = parts.pop().split(';').shift();
				if (this.flags[cookieLocale]) {
					this.locale = cookieLocale;
				}
			}
		},
		toggle() {
			if (!this.open) {
				const rect = this.$refs.trigger.getBoundingClientRect();
				this.dropdownStyle = {
					position: 'fixed',
					left: rect.left + (rect.width / 2) + 'px',
					top: (rect.top - 8) + 'px',
					transform: 'translate(-50%, -100%)',
					zIndex: 9999
				};
			}
			this.open = !this.open;
		},
		selectLocale(lang) {
			this.locale = lang;
			this.open = false;
			document.cookie = 'admin-locale=' + lang + '; path=/';
			location.reload();
		}
	}"
	@click.outside="open = false"
>
	<div class="inline-flex items-center justify-center">
		<button
			class="flex items-center gap-1"
			type="button"
			x-ref="trigger"
			@click="toggle()"
		>
			<img
				:alt="locale"
				:src="flags[locale]"
				class="h-[20px] w-[20px] cursor-pointer rounded-full"
			>
			<svg
				:class="open ? 'rotate-180' : ''"
				class="h-3 w-3 text-gray-400 transition-transform"
				fill="none"
				stroke="currentColor"
				stroke-width="2"
				viewBox="0 0 24 24"
			>
				<path d="M19 9l-7 7-7-7" stroke-linecap="round" stroke-linejoin="round" />
			</svg>
		</button>
	</div>
	<div
		class="flex flex-col gap-2 rounded-xl bg-white p-2.5 shadow-xl"
		x-show="open"
		x-transition
		:style="dropdownStyle"
	>
		<template
			:key="lang"
			x-for="lang in Object.keys(flags)"
		>
			<button
				class="flex items-center transition-opacity hover:opacity-75"
				type="button"
				x-show="lang !== locale"
				@click="selectLocale(lang)"
			>
				<img
					:alt="lang"
					:src="flags[lang]"
					class="h-[20px] w-[20px] cursor-pointer rounded-full"
				>
			</button>
		</template>
	</div>
</section>

					</div>
				</div>
			</div>
		</form>
	</div>

	<div
		:class="{
		    'bg-white ': $store.config.isBase,
		    'bg-maevalightyellow': $store.config.isMaeva,
		    'bg-gdfverylightgrey': $store.config.isGDF
		}"
		class="fixed right-0 top-0 hidden h-[100vh] w-1/2 lg:block"
	>
		<div class="flex h-full w-full flex-col items-center justify-center gap-8">
			<img
				class="w-5/6"
				src="https://app.styqr.fr/build/assets/signup-CMMRwQnV.png"
			/>
			<a
				href="https://fr.trustpilot.com/review/styqr.fr"
				target="_blank"
				x-cloak
				x-show="$store.config.isBase"
			>
				<img src="https://app.styqr.fr/build/assets/trustpilot-8P1Qo29L.svg" />
			</a>
			<div
				class="flex justify-center"
				x-show="$store.config.isBase"
			>
				<div class="flex gap-4">
					<a
						class="poppins-regular opensans-regular text-xs text-styqrmediumgrey underline"
						href="https://styqr.fr/decouvrez-nos-fonctionnalites/"
					>Découvrez StyQR</a>
					<a
						class="poppins-regular opensans-regular text-xs text-styqrmediumgrey underline"
						href="https://styqr.fr/nos-tarifs/"
					>Nos tarifs</a>

				</div>
			</div>
		</div>
	</div>
</div>

	<script>
		function signup({
			categories
		}) {

			return {
				categories,
				selectedCategory: null,
				currentStep: 1,
				isCheckingEmail: false,
				isEditingEmail: false,
				emailValue: '',
				fieldsValidationStatus: {
					fname: false,
					lname: false,
					email: false,
					password: false,
					category: true,
				},
				categoriesLabel: {
					'1': 'Camping',
					'2': 'Chambre d\u0027h\u00f4tes',
					'3': 'Conciergerie',
					'4': 'Gestionnaire de locations',
					'5': 'Particulier',
					'6': 'G\u00eete',
					'7': 'H\u00f4tel',
				},
				init() {
					window.addEventListener('inputvalidation', (event) => {
						this.setFieldsValidationStatus(event.detail.inputName, event.detail.isValid)
					})
					window.addEventListener('inputupdated', (event) => {
						if (event.detail.name === 'email') {
							this.emailValue = event.detail.value;
						}
					})
				},
				setFieldsValidationStatus(field, isValid) {
					this.fieldsValidationStatus[field] = isValid
				},
				async checkEmailAndContinue() {
					const emailInput = this.$refs.signupForm.querySelector('[name=email]');
					if (emailInput) {
						this.emailValue = emailInput.value;
						emailInput.dispatchEvent(new Event('blur'));
					}

					await this.$nextTick();

					if (!this.fieldsValidationStatus.email || !this.emailValue) {
						return;
					}

					this.isCheckingEmail = true;
					try {
						const response = await fetch("https://app.styqr.fr/auth/check-email", {
							method: 'POST',
							headers: {
								'Accept': 'application/json',
								'Content-Type': 'application/json',
								'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || "o0wmXqZBFMTG9tLMQr6mPrXlshD6qJFusytvpyCh",
								'X-Requested-With': 'XMLHttpRequest',
							},
							body: JSON.stringify({ email: this.emailValue }),
						});
						if (!response.ok) {
							this.currentStep = 2;
							return;
						}
						const data = await response.json();
						if (data.exists) {
							window.location.href = "https://app.styqr.fr/auth/login" + '?email=' + encodeURIComponent(this.emailValue);
							return;
						}
						this.currentStep = 2;
					} catch (error) {
						console.error('Email check failed:', error);
						this.currentStep = 2;
					} finally {
						this.isCheckingEmail = false;
					}
				},
				submit() {
					if (this.currentStep !== 2) return;
					if (!this.selectedCategory) {
						this.fieldsValidationStatus.category = false;
					} else {
						this.fieldsValidationStatus.category = true;
					}
					if (this.$store.config.isGDF) {
						this.fieldsValidationStatus.category = true;
					}
					Object.keys(this.fieldsValidationStatus).forEach(field => {
						if (field === 'email') return; // email already validated in step 1
						const element = this.$refs.signupForm.querySelector(`[name=${field}]`);
						if (element) {
							element.dispatchEvent(new Event('blur'));
						}
					})
					const formIsIncomplete = Object.values(this.fieldsValidationStatus).some(status => !status)
					if (formIsIncomplete) {
						const invalidInput = this.$refs.signupForm.querySelector(`[name=fname]`);
						if (invalidInput) {
							invalidInput.scrollIntoView({
								behavior: 'smooth',
								block: 'center'
							});
						}
						return;
					}
					this.$dispatch('recaptcha');
				}
			}
		}
	</script>

<!DOCTYPE html>
<html lang="fr">

<head>

	<style>
		[x-cloak] {
			display: none !important;
		}
		/* Cover iOS safe-area (status bar / Dynamic Island) with white bg */
		body::before {
			content: '';
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			height: env(safe-area-inset-top, 0px);
			background: white;
			z-index: 9999;
		}
		/* Booklet setup wrapper: mobile 2-row navbar = 6.5rem, lg 1-row navbar = 4.5rem, xl scroll container = 0 */
		.booklet-setup-wrapper {
			margin-top: calc(6.5rem + env(safe-area-inset-top, 0px));
		}
		@media (min-width: 1030px) {
			.booklet-setup-wrapper {
				margin-top: calc(4.5rem + env(safe-area-inset-top, 0px));
			}
		}
		@media (min-width: 1280px) {
			.booklet-setup-wrapper {
				margin-top: 0;
			}
			#main-scroll-container {
				position: relative;
				margin-top: 4.5rem;
				height: calc(100dvh - 4.5rem);
				overflow-y: auto;
			}
		}
		/* Common navbar wrapper: mobile navbar = 3.5rem */
		.common-navbar-wrapper {
			margin-top: calc(3.5rem + env(safe-area-inset-top, 0px));
		}
		@media (min-width: 1024px) {
			.common-navbar-wrapper {
				margin-top: 0;
			}
		}
		/* Hide PWA preview when assistant panel is open */
		@media (min-width: 1280px) {
			html.assistant-open .xl\:w-1\/3 {
				display: none !important;
			}
			html.assistant-open .xl\:w-2\/3 {
				width: 100% !important;
				flex: 1 1 100% !important;
			}
		}
	</style>
	<meta
		content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
		name="viewport"
	>

	<title>StyQR – Le livret d'accueil digital</title>

	<meta
		content="Créez et personnalisez facilement un livret d'accueil numérique pour informer et accompagner vos voyageurs avant, pendant et après leur séjour."
		name="description"
	>

	<meta
		content="#F6F7FB"
		name="theme-color"
	/>

	<link rel="preload" as="style" href="https://app.styqr.fr/build/assets/app-D5hV7hem.css" /><link rel="preload" as="style" href="https://app.styqr.fr/build/assets/flatpickr-CksuuEqD.css" /><link rel="preload" as="style" href="https://app.styqr.fr/build/assets/app-DxmiEZ9-.css" /><link rel="modulepreload" href="https://app.styqr.fr/build/assets/app-CPF6RuC4.js" /><link rel="modulepreload" href="https://app.styqr.fr/build/assets/flatpickr.min-DMF0-Uig.js" /><link rel="stylesheet" href="https://app.styqr.fr/build/assets/app-D5hV7hem.css" /><link rel="stylesheet" href="https://app.styqr.fr/build/assets/flatpickr-CksuuEqD.css" /><link rel="stylesheet" href="https://app.styqr.fr/build/assets/app-DxmiEZ9-.css" /><script type="module" src="https://app.styqr.fr/build/assets/app-CPF6RuC4.js"></script>
	
	
	<link
		href="https://fonts.googleapis.com"
		rel="preconnect"
	>
	<link
		crossorigin
		href="https://fonts.gstatic.com"
		rel="preconnect"
	>
	<link
		href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css"
		rel="stylesheet"
	/>

	<link
		href="https://unpkg.com/filepond/dist/filepond.css"
		rel="stylesheet"
	>
	<link
		href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css"
		rel="stylesheet"
	>
	<link
		href="https://unpkg.com/filepond-plugin-media-preview/dist/filepond-plugin-media-preview.min.css"
		rel="stylesheet"
	>
	<link
		href="https://cdn.jsdelivr.net/npm/tippy.js@6/dist/tippy.min.css"
		rel="stylesheet"
	/>

	<link
		href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
		rel="stylesheet"
	>
	<link
		href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
		rel="stylesheet"
	>
	<link
		href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&display=swap"
		rel="stylesheet"
	>

	<link
		href="https://app.styqr.fr/build/assets/favicon-varM8o3K.png"
		rel="icon"
		type="image/png"
	/>

	<meta
		content="o0wmXqZBFMTG9tLMQr6mPrXlshD6qJFusytvpyCh"
		name="csrf-token"
	>
	<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KWWGGZ9');</script>
<!-- End Google Tag Manager -->
</head>

<body
	:class="{
	    'bg-styqrverylightgrey': $store.config.isBase,
	    'bg-maevaverylightgrey': $store.config.isMaeva,
	    'bg-gdfverylightgrey': $store.config.isGDF &&
	        '1' &&
	        '' &&
	        '1' &&
	        '1'
	}"
	x-data
	x-init="$nextTick(() => {
    const loader = document.getElementById('page-loader');
    if (loader) {
        loader.style.opacity = '0';
        setTimeout(() => loader.remove(), 10);
    }
})"
>
	
	<div
		class="fixed inset-0 z-[9999] flex items-center justify-center bg-[#F6F7FB] transition-opacity duration-[35ms]"
		id="page-loader"
		x-init="document.body.setAttribute('data-env', $store.config.env);"
	>
		<div class="flex flex-col items-center gap-4">
			<span class="loader-spinner !h-10 !w-10 !border-[5px]"></span>
			<span class="text-sm font-medium text-gray-400">Chargement...</span>
		</div>
	</div>

		
	<div
	class="flex justify-center"
	x-data="{}"
>
	<div
		aria-modal="true"
		class="fixed inset-0 z-[2000] overflow-y-auto"
		role="dialog"
		style="display: none"
		x-on:keydown.escape.prevent.stop="$store.confirmModal.open = false"
		x-show="$store.confirmModal.open"
	>
		<div
			class="fixed inset-0 bg-black/25"
			x-show="$store.confirmModal.open"
			x-transition.opacity
		></div>

		<div
			class="relative flex min-h-screen items-center justify-center p-4"
			x-show="$store.confirmModal.open"
			x-transition
		>
			<div
				class="relative max-w-xl rounded-xl bg-white p-12 shadow-lg"
				x-on:click.stop
				x-trap.noscroll.inert="$store.confirmModal.open"
			>
				<div class="flex flex-col items-center justify-evenly gap-7">
					<span
						class="multi-black poppins-bold opensans-bold mulish-bold text-center text-2xl"
						x-text="$store.confirmModal.title"
					>Confirmation</span>
					<span
						:class="{
						    'text-styqrmediumgrey': $store.config.isBase,
						    'text-maevadarkgrey': $store.config.isMaeva,
						    'text-black': $store.config.isGDF
						}"
						class="poppins-regular opensans-regular mulish-regular text-left"
						x-html="$store.confirmModal.message"
					></span>

					<div class="flex flex-col gap-7 md:flex-row">
						<button
							:class="{
							    'bg-maevalightgrey hover:bg-maevalightgrey': $store.config.isMaeva,
							    'bg-styqrverylightgrey hover:bg-styqrlightgrey': $store.config.isBase,
							    'bg-gdfverylightgrey hover:bg-gdfdarkgrey ': $store.config.isGDF,
							}"
							@click="$store.confirmModal.onCancel()"
							class="poppins-medium opensans-bold mulish-bold h-14 w-60 rounded bg-styqrverylightgrey text-center text-base transition-all duration-100 focus:outline-none"
							type="button"
							x-show="$store.confirmModal.showButton.cancel"
						>
							<span x-text="$store.confirmModal.cancelText"></span>
						</button>
						<button
							:class="{
							    'bg-maevablue hover:bg-maevablue': $store.config.isMaeva,
							    'bg-styqrgreen hover:bg-styqrdarkgreen': $store.config.isBase,
							    'bg-gdfgreen hover:bg-gdfdarkgreen ': $store.config.isGDF,
							}"
							@click="$store.confirmModal.onOk()"
							class="poppins-medium opensans-bold mulish-bold h-14 w-60 rounded bg-styqrgreen text-center text-base text-white transition-all duration-100 hover:bg-styqrdarkgreen focus:outline-none"
							type="button"
							x-show="$store.confirmModal.showButton.ok"
						>
							<span x-text="$store.confirmModal.okText"></span>
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
	<div
	@notify.window="add($event)"
	aria-live="polite"
	class="fixed right-0 top-0 z-[1000] flex w-full max-w-sm flex-col space-y-4 pb-4 pr-4 sm:justify-start"
	role="status"
	x-data="{
    notifications: [],
    add(e) {
        this.notifications.push({
            id: e.timeStamp,
            type: e.detail.type,
            content: e.detail.content,
        })
    },
    remove(notification) {
        this.notifications = this.notifications.filter(i => i.id !== notification.id)
    },
}"
>
	<!-- Notification -->
	<template
		:key="notification.id"
		x-for="notification in notifications"
	>
		<div
			class="pointer-events-auto relative w-full max-w-sm rounded-lg border border-gray-200 bg-white p-2 shadow-lg"
			x-data="{
    show: false,
    typeToTitle: {
        'error': 'Erreur',
        'success': 'R\u00e9ussite',
        'info': 'Information',
    },
    init() {
        this.$nextTick(() => this.show = true)
        setTimeout(() => this.transitionOut(), 5000)
    },
    transitionOut() {
        this.show = false

        setTimeout(() => this.remove(this.notification), 500)
    },
}"
			x-show="show"
			x-transition.duration.500ms
		>
			<div class="flex items-start gap-4">
				<div class="flex flex-1 gap-2 py-1.5 pl-2.5">
					<!-- Icons -->
					<div
						class="flex-shrink-0"
						x-show="notification.type === 'info'"
					>
						<svg
							class="mt-0.5 size-4 text-gray-600"
							fill="currentColor"
							viewBox="0 0 16 16"
							xmlns="http://www.w3.org/2000/svg"
						>
							<path
								clip-rule="evenodd"
								d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0ZM9 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM6.75 8a.75.75 0 0 0 0 1.5h.75v1.75a.75.75 0 0 0 1.5 0v-2.5A.75.75 0 0 0 8.25 8h-1.5Z"
								fill-rule="evenodd"
							/>
						</svg>
						<span class="sr-only">Information:</span>
					</div>

					<div
						class="flex-shrink-0"
						x-show="notification.type === 'success'"
					>
						<svg
							class="mt-0.5 size-4 text-green-600"
							fill="currentColor"
							viewBox="0 0 16 16"
							xmlns="http://www.w3.org/2000/svg"
						>
							<path
								clip-rule="evenodd"
								d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z"
								fill-rule="evenodd"
							></path>
						</svg>
						<span class="sr-only">Réussite:</span>
					</div>

					<div
						class="flex-shrink-0"
						x-show="notification.type === 'error'"
					>
						<svg
							class="mt-0.5 size-4 text-red-600"
							fill="currentColor"
							viewBox="0 0 16 16"
							xmlns="http://www.w3.org/2000/svg"
						>
							<path
								clip-rule="evenodd"
								d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
								fill-rule="evenodd"
							></path>
						</svg>
						<span class="sr-only">Erreur:</span>
					</div>

					<!-- Text -->
					<div class="flex flex-col gap-y-2">
						<p
							class="text-sm font-medium capitalize text-gray-800"
							x-text="typeToTitle[notification.type]"
						></p>

						<div
							class="text-sm text-gray-600"
							x-text="notification.content"
						></div>
					</div>
				</div>
				<!-- Remove button -->
				<div class="flex items-center">
					<button
						@click="transitionOut()"
						class="inline-flex items-center justify-center rounded-md p-1.5 font-medium text-gray-400 hover:bg-gray-800/5 hover:text-gray-800"
						type="button"
					>
						<svg
							aria-hidden
							class="size-5"
							fill="currentColor"
							viewBox="0 0 20 20"
						>
							<path
								clip-rule="evenodd"
								d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
								fill-rule="evenodd"
							></path>
						</svg>
						<span class="sr-only">Fermer la notification</span>
					</button>
				</div>
			</div>
		</div>
	</template>
</div>
	<div
	x-data="stykyModal()"
	x-show="isOpen"
	x-cloak
	@styky:open.window="open($event.detail)"
	@keydown.escape.window="isOpen ? close() : null"
	class="fixed inset-0 z-[3000] flex items-center justify-center overflow-y-auto py-4"
	role="dialog"
	aria-modal="true"
	aria-labelledby="styky-modal-title"
>
	
	<div class="absolute inset-0 bg-black/40" @click="close()"></div>

	
	<div
		x-show="isOpen"
		:class="isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95'"
		class="relative z-[3001] my-auto w-full max-w-lg rounded-2xl bg-white shadow-2xl mx-4 flex flex-col max-h-[90dvh] transition-all duration-200"
	>
		
		<div class="flex items-center justify-between rounded-t-2xl bg-gradient-to-r from-styqrpurple to-styqrpurple/80 px-5 py-3">
			<div class="flex items-center gap-3">
				<div class="flex h-8 w-8 items-center justify-center rounded-full bg-white/20">
					<svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
						<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 0 0-2.455 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" />
					</svg>
				</div>
				<span id="styky-modal-title" class="poppins-semibold text-base text-white">StyKy</span>
				<span class="rounded-full bg-white/20 px-2 py-0.5 text-xs text-white/90 uppercase" x-text="language"></span>
			</div>
			<button
				@click="close()"
				class="flex h-7 w-7 items-center justify-center rounded-full text-white/70 transition-colors hover:bg-white/20 hover:text-white"
				type="button"
				aria-label="Fermer"
			>
				<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
			</button>
		</div>

		
		<div class="flex flex-col gap-4 p-5 overflow-y-auto">

			
			<div x-show="contextType !== 'subtitle' && hasExistingContent" class="flex gap-1 rounded-xl bg-gray-100 p-1">
				<button
					@click="mode = 'create'; resetResult()"
					:class="mode === 'create' ? 'bg-white shadow-sm text-styqrpurple' : 'text-gray-500 hover:text-gray-700'"
					class="flex flex-1 items-center justify-center gap-2 rounded-lg px-3 py-2 text-sm poppins-medium transition-all"
					type="button"
				>
					<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Z" /></svg>
					Créer				</button>
				<button
					@click="mode = 'rewrite'; resetResult()"
					:class="mode === 'rewrite' ? 'bg-white shadow-sm text-styqrpurple' : 'text-gray-500 hover:text-gray-700'"
					class="flex flex-1 items-center justify-center gap-2 rounded-lg px-3 py-2 text-sm poppins-medium transition-all"
					type="button"
				>
					<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182" /></svg>
					Réécrire				</button>
			</div>

			
			<template x-if="mode === 'create'">
				<div class="flex flex-col gap-4">
					
					<div class="flex flex-col gap-2">
						<label for="styky-category" class="poppins-medium text-sm text-gray-700">Thème</label>
						<div class="flex items-center gap-2">
							<span
								x-show="category && !isCategoryEditing"
								@click="isCategoryEditing = true; $nextTick(() => $refs.categoryInput.focus())"
								class="inline-flex items-center gap-1.5 rounded-lg bg-styqrpurple/10 px-3 py-1.5 text-sm poppins-medium text-styqrpurple cursor-pointer"
							>
								<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" /></svg>
								<span x-text="category"></span>
								<button type="button" @click.stop="category = ''; isCategoryEditing = true; $nextTick(() => $refs.categoryInput.focus())" class="ml-1 text-styqrpurple/60 hover:text-styqrpurple">
									<svg class="h-3 w-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
								</button>
							</span>
							<input
								id="styky-category"
								x-ref="categoryInput"
								x-show="!category || isCategoryEditing"
								x-model="category"
								@blur="if(category.trim()) isCategoryEditing = false"
								@keydown.enter="if(category.trim()) isCategoryEditing = false"
								class="h-10 w-full rounded-xl border border-gray-200 bg-gray-50 px-4 text-sm transition-colors focus:border-styqrpurple/30 focus:outline-none focus:ring-2 focus:ring-styqrpurple/30"
								placeholder="Ex: arrivée et départ, wifi, équipements..."
								type="text"
							>
						</div>
					</div>

					
					<div x-show="suggestions.length > 0" class="flex flex-col gap-2">
						<label class="poppins-medium text-sm text-gray-700">Suggestions</label>
						<div class="flex flex-wrap gap-2">
							<template x-for="suggestion in suggestions" :key="suggestion">
								<button
									@click="prompt = suggestion"
									:class="{
										'border-styqrpurple bg-styqrpurple/10 text-styqrpurple': prompt === suggestion,
										'border-gray-200 bg-white text-gray-600 hover:bg-gray-50 hover:border-gray-300': prompt !== suggestion
									}"
									class="rounded-lg border px-3 py-1.5 text-sm transition-colors poppins-regular"
									type="button"
									x-text="suggestion"
								></button>
							</template>
						</div>
					</div>

					
					<div class="flex flex-col gap-2">
						<label for="styky-prompt" class="poppins-medium text-sm text-gray-700">Que souhaitez-vous rédiger ?</label>
						<textarea
							id="styky-prompt"
							x-model="prompt"
							@keydown.enter.meta="generate()"
							@keydown.enter.ctrl="generate()"
							class="h-24 w-full resize-none rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-sm transition-colors focus:border-styqrpurple/30 focus:outline-none focus:ring-2 focus:ring-styqrpurple/30"
							:placeholder="promptPlaceholder"
						></textarea>
					</div>

					
					<div x-show="contextType !== 'subtitle'" class="flex flex-col gap-2">
						<label class="poppins-medium text-sm text-gray-700">Longueur du texte</label>
						<div class="flex gap-2">
							<template x-for="option in [{value:'court',label:'Court',desc:'~200 mots'},{value:'moyen',label:'Moyen',desc:'~500 mots'},{value:'long',label:'Long',desc:'~800 mots'}]">
								<button
									@click="length = option.value"
									:class="{
										'border-styqrpurple bg-styqrpurple/10 text-styqrpurple': length === option.value,
										'border-gray-200 bg-gray-50 text-gray-600 hover:bg-gray-100': length !== option.value
									}"
									class="flex flex-1 flex-col items-center gap-0.5 rounded-xl border px-3 py-2 transition-colors"
									type="button"
								>
									<span class="text-sm poppins-medium" x-text="option.label"></span>
									<span class="text-xs opacity-60" x-text="option.desc"></span>
								</button>
							</template>
						</div>
					</div>

					
					<div x-show="contextType === 'subtitle'" class="rounded-xl bg-amber-50 px-4 py-2.5 text-xs text-amber-700">
						Le texte généré sera court (2 lignes max), adapté pour un sous-titre.					</div>
				</div>
			</template>

			
			<template x-if="mode === 'rewrite'">
				<div class="flex flex-col gap-4">
					
					<div class="flex flex-col gap-2">
						<label class="poppins-medium text-sm text-gray-700">Texte actuel</label>
						<div class="wysiwyg-rendered max-h-32 overflow-y-auto rounded-xl border border-gray-200 bg-gray-50 p-3 text-sm text-gray-600" x-html="existingContent"></div>
					</div>

					
					<div class="flex flex-col gap-2">
						<label class="poppins-medium text-sm text-gray-700">Que souhaitez-vous faire ? <span class="text-gray-400 poppins-regular">(plusieurs choix possibles)</span></label>
						<div class="grid grid-cols-2 gap-2">
							<template x-for="action in rewriteActions" :key="action.id">
								<button
									@click="toggleRewriteAction(action.id)"
									:class="{
										'border-styqrpurple bg-styqrpurple/10 text-styqrpurple ring-1 ring-styqrpurple/20': selectedRewriteActions.includes(action.id),
										'border-gray-200 bg-white text-gray-600 hover:bg-gray-50 hover:border-gray-300': !selectedRewriteActions.includes(action.id)
									}"
									class="flex items-center gap-2 rounded-xl border px-3 py-2.5 text-left text-sm transition-all poppins-regular"
									type="button"
								>
									<span x-text="action.icon" class="text-base"></span>
									<span x-text="action.label"></span>
								</button>
							</template>
						</div>
					</div>

					
					<div x-show="selectedRewriteActions.length > 0" class="flex flex-col gap-2 transition-all duration-150">
						<label class="poppins-medium text-sm text-gray-700">Instructions supplémentaires <span class="text-gray-400 poppins-regular">(optionnel)</span></label>
						<input
							x-model="rewriteExtraInstructions"
							class="h-10 w-full rounded-xl border border-gray-200 bg-gray-50 px-4 text-sm transition-colors focus:border-styqrpurple/30 focus:outline-none focus:ring-2 focus:ring-styqrpurple/30"
							placeholder="Ex: Garder les emojis existants, style accueillant..."
							type="text"
						>
					</div>
				</div>
			</template>

			
			<button
				@click="mode === 'rewrite' ? rewrite() : generate()"
				:disabled="isGenerating || (mode === 'create' && !prompt.trim()) || (mode === 'rewrite' && selectedRewriteActions.length === 0)"
				:class="{
					'bg-gradient-to-r from-styqrpurple to-styqrpurple/80 hover:from-styqrpurple/90 hover:to-styqrpurple/70 shadow-md shadow-styqrpurple/20': !isGenerating && ((mode === 'create' && prompt.trim()) || (mode === 'rewrite' && selectedRewriteActions.length > 0)),
					'bg-gray-300 cursor-not-allowed': isGenerating || (mode === 'create' && !prompt.trim()) || (mode === 'rewrite' && selectedRewriteActions.length === 0)
				}"
				class="flex h-14 w-full items-center justify-center gap-2 rounded-xl text-base text-white transition-colors poppins-medium"
				type="button"
			>
				<template x-if="!isGenerating">
					<span class="flex items-center gap-2">
						<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09Z" /></svg>
						<span x-text="mode === 'rewrite' ? 'Réécrire avec StyKy' : 'Générer avec StyKy'"></span>
					</span>
				</template>
				<template x-if="isGenerating">
					<span class="flex items-center gap-2">
						<span class="inline-block h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white"></span>
						<span x-text="mode === 'rewrite' ? 'Réécriture...' : 'Génération...'"></span>
					</span>
				</template>
			</button>

			
			<div
				x-show="generatedContent"
				:class="generatedContent ? 'opacity-100 scale-100' : 'opacity-0 scale-95'"
				class="flex flex-col gap-3 transition-all duration-200"
			>
				<label class="poppins-medium text-sm text-gray-700">Aperçu :</label>
				<div
					class="wysiwyg-rendered max-h-48 overflow-y-auto rounded-xl border border-gray-200 bg-gray-50 p-4 text-sm"
					x-html="generatedContent"
				></div>
				<div class="flex gap-2">
					<button
						@click="insertContent()"
						class="flex-1 rounded-lg bg-styqrgreen px-4 py-3 text-sm text-white transition-colors hover:bg-styqrgreen/90 poppins-medium"
						type="button"
						x-text="mode === 'rewrite' ? 'Remplacer dans l\'éditeur' : 'Insérer dans l\'éditeur'"
					></button>
					<button
						@click="mode === 'rewrite' ? rewrite() : generate()"
						:disabled="isGenerating"
						class="rounded-lg border border-gray-200 px-4 py-3 text-sm text-gray-600 transition-colors hover:bg-gray-50 poppins-medium"
						type="button"
					>
						Régénérer					</button>
				</div>
			</div>

			
			<div
				x-show="error"
				class="rounded-xl bg-red-50 px-4 py-3 text-sm text-red-600 transition-opacity duration-150"
				x-text="error"
			></div>
		</div>
	</div>
</div>

	<script>
		function stykyModal() {
			const suggestionsByContext = {
				subtitle: [
					"Phrase d\u0027accroche chaleureuse",
					"Description courte du lieu",
					"Bienvenue personnalis\u00e9e",
				],
				module: [
					"Instructions d\u0027utilisation",
					"Mode d\u0027emploi",
					"Horaires et acc\u00e8s",
					"R\u00e8gles et consignes",
					"Conseils pratiques",
				],
				welcome: [
					"Message de bienvenue",
					"Pr\u00e9sentation du logement",
					"Informations essentielles du s\u00e9jour",
				],
			};

			const rewriteActions = [
				{ id: 'fix_spelling', label: "Corriger les fautes", icon: '✓', placeholder: "Ex: Corriger aussi la ponctuation..." },
				{ id: 'add_emojis', label: "Ajouter des emojis", icon: '😊', placeholder: "Ex: Style fun et color\u00e9..." },
				{ id: 'improve_style', label: "Am\u00e9liorer le style", icon: '✨', placeholder: "Ex: Rendre plus fluide et engageant..." },
				{ id: 'shorten', label: "Rendre plus court", icon: '📝', placeholder: "Ex: Garder uniquement l\u0027essentiel..." },
				{ id: 'expand', label: "Rendre plus d\u00e9taill\u00e9", icon: '📖', placeholder: "Ex: Ajouter plus de d\u00e9tails pratiques..." },
				{ id: 'tone_professional', label: "Ton professionnel", icon: '👔', placeholder: "Ex: Style h\u00f4telier haut de gamme..." },
				{ id: 'tone_casual', label: "Ton d\u00e9contract\u00e9", icon: '🏖️', placeholder: "Ex: Ambiance vacances relax..." },
				{ id: 'tone_warm', label: "Ton chaleureux", icon: '🏡', placeholder: "Ex: Comme un h\u00f4te bienveillant..." },
			];

			return {
				isOpen: false,
				mode: 'create',
				prompt: '',
				category: '',
				length: "moyen",
				contextType: '',
				suggestions: [],
				promptPlaceholder: "D\u00e9crivez ce que vous souhaitez r\u00e9diger...",
				generatedContent: '',
				isGenerating: false,
				error: '',
				targetEditorId: null,
				language: 'fr',
				existingContent: '',
				hasExistingContent: false,
				isCategoryEditing: false,

				// Rewrite mode
				rewriteActions: rewriteActions,
				selectedRewriteActions: [],
				rewriteExtraInstructions: '',

				open(detail) {
					this.targetEditorId = detail?.editorId || null;
					this.contextType = detail?.contextType || '';
					this.category = detail?.category || '';
					this.isCategoryEditing = !detail?.category;
					this.language = detail?.language || 'fr';
					this.existingContent = detail?.existingContent || '';
					this.hasExistingContent = this.existingContent.trim().length > 0
						&& this.existingContent.trim() !== '<p></p>';
					this.prompt = '';
					this.generatedContent = '';
					this.error = '';
					this.selectedRewriteActions = [];
					this.rewriteExtraInstructions = '';

					// Default to rewrite if content exists (and not subtitle)
					if (this.hasExistingContent && this.contextType !== 'subtitle') {
						this.mode = 'rewrite';
					} else {
						this.mode = 'create';
					}

					// Set suggestions based on context
					this.suggestions = suggestionsByContext[this.contextType] || suggestionsByContext['module'] || [];

					// Adapt defaults based on context
					if (this.contextType === 'subtitle') {
						this.length = 'court';
						this.promptPlaceholder = 'Ex: Phrase d\'accroche pour accueillir les voyageurs...';
					} else if (this.contextType === 'welcome') {
						this.length = 'moyen';
						this.promptPlaceholder = 'Ex: Message de bienvenue chaleureux pour les voyageurs...';
					} else {
						this.length = 'moyen';
						this.promptPlaceholder = this.category
							? 'Ex: Décris les informations sur ' + this.category.toLowerCase() + '...'
							: 'Décrivez ce que vous souhaitez rédiger...';
					}

					this.isOpen = true;
				},

				close() {
					this.isOpen = false;
				},

				resetResult() {
					this.generatedContent = '';
					this.error = '';
				},

				toggleRewriteAction(actionId) {
					const idx = this.selectedRewriteActions.indexOf(actionId);
					if (idx === -1) {
						this.selectedRewriteActions.push(actionId);
					} else {
						this.selectedRewriteActions.splice(idx, 1);
					}
					this.generatedContent = '';
					this.error = '';
				},

				async generate() {
					if (!this.prompt.trim() || this.isGenerating) return;

					this.isGenerating = true;
					this.error = '';
					this.generatedContent = '';

					let finalPrompt = this.prompt;
					if (this.contextType === 'subtitle') {
						finalPrompt = this.prompt + '. IMPORTANT : génère uniquement 1 à 2 phrases courtes maximum, adapté pour un sous-titre. Pas de titre <h2>, pas de liste, juste du texte dans un <p>.';
					}

					await this._callApi({
						prompt: finalPrompt,
						locale: this.language || 'fr',
						category: this.category,
						length: this.length,
						mode: 'create',
					});
				},

				async rewrite() {
					if (this.selectedRewriteActions.length === 0 || this.isGenerating) return;

					this.isGenerating = true;
					this.error = '';
					this.generatedContent = '';

					await this._callApi({
						mode: 'rewrite',
						locale: this.language || 'fr',
						category: this.category,
						rewrite_actions: this.selectedRewriteActions,
						existing_content: this.existingContent,
						extra_instructions: this.rewriteExtraInstructions || '',
					});
				},

				async _callApi(payload) {
					try {
						const response = await fetch("https:\/\/app.styqr.fr\/api\/styky\/generate", {
							method: 'POST',
							headers: {
								'Content-Type': 'application/json',
								'X-CSRF-TOKEN': 'o0wmXqZBFMTG9tLMQr6mPrXlshD6qJFusytvpyCh',
								'X-Requested-With': 'XMLHttpRequest',
								'Accept': 'application/json',
							},
							body: JSON.stringify(payload),
						});

						if (!response.ok) {
							if (response.status === 419) {
								this.error = 'Session expirée. Veuillez recharger la page.';
							} else if (response.status === 429) {
								this.error = 'Trop de requêtes. Veuillez patienter quelques instants.';
							} else {
								this.error = 'Erreur serveur (' + response.status + '). Réessayez.';
							}
							return;
						}

						const data = await response.json();

						if (data.success) {
							this.generatedContent = data.content;
							this.$nextTick(() => {
								setTimeout(() => {
									const container = this.$el.closest('.overflow-y-auto');
									if (container) container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
								}, 100);
							});
						} else {
							this.error = data.error || 'Erreur lors de la génération';
						}
					} catch (err) {
						this.error = 'Erreur de connexion. Réessayez.';
						console.error('StyKy error:', err);
					} finally {
						this.isGenerating = false;
					}
				},

				insertContent() {
					if (!this.generatedContent) return;

					const editorId = this.targetEditorId;

					try {
						window.dispatchEvent(new CustomEvent('styky:insert', {
							detail: {
								content: this.generatedContent,
								editorId: editorId,
								replace: this.mode === 'rewrite',
							}
						}));
					} catch (e) {
						console.error('StyKy insert error:', e);
					}

					window.dispatchEvent(new CustomEvent('notify', {
						detail: {
							content: 'Contenu inséré dans l\'éditeur',
							type: 'success',
						}
					}));

					this.close();

					// Scroll to the editor where content was inserted
					if (editorId) {
						setTimeout(() => {
							const el = document.getElementById('wysiwyg-editor-' + editorId);
							if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
						}, 250);
					}
				},
			};
		}
	</script>
	<div
	x-data="wysiwygEmojiPicker()"
	x-show="open"
	x-transition:enter="transition ease-out duration-150"
	x-transition:enter-start="opacity-0 scale-95"
	x-transition:enter-end="opacity-100 scale-100"
	x-transition:leave="transition ease-in duration-100"
	x-transition:leave-start="opacity-100 scale-100"
	x-transition:leave-end="opacity-0 scale-95"
	@emoji:open.window="openPicker($event.detail)"
	@keydown.escape.window="open = false"
	class="fixed inset-0 z-[9999] flex items-center justify-center"
	x-cloak
>
	
	<div class="absolute inset-0 bg-black/20" @click="open = false"></div>

	
	<div class="relative z-10 flex w-full max-w-sm flex-col rounded-2xl bg-white shadow-2xl" @click.stop>
		
		<div class="flex items-center justify-between border-b px-4 py-3">
			<span class="poppins-semibold text-sm text-styqrblack">Insérer un emoji</span>
			<button @click="open = false" type="button" class="rounded-lg p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600">
				<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
			</button>
		</div>

		
		<div class="px-4 py-2">
			<input
				x-model="search"
				x-ref="searchInput"
				type="text"
				placeholder="Rechercher..."
				class="h-9 w-full rounded-lg border border-gray-200 px-3 text-sm outline-none transition-colors focus:border-gray-400"
			/>
		</div>

		
		<div class="flex flex-wrap gap-1 px-4 pb-2">
			<template x-for="cat in categories" :key="cat.key">
				<button
					@click="activeCategory = cat.key; search = ''"
					:class="activeCategory === cat.key ? 'bg-gray-200 text-styqrblack' : 'text-gray-400 hover:bg-gray-100'"
					class="shrink-0 rounded-md px-2 py-1 text-lg transition-colors"
					type="button"
					:title="cat.label"
					x-text="cat.icon"
				></button>
			</template>
		</div>

		
		<div class="h-64 overflow-y-auto px-4 py-2">
			<div class="grid grid-cols-8 gap-1">
				<template x-for="emoji in filteredEmojis" :key="emoji">
					<button
						@click="selectEmoji(emoji)"
						class="flex h-9 w-9 items-center justify-center rounded-lg text-xl transition-colors hover:bg-gray-100"
						type="button"
						x-text="emoji"
					></button>
				</template>
			</div>
			<div x-show="filteredEmojis.length === 0" class="flex h-32 items-center justify-center text-sm text-gray-400">
				Aucun résultat
			</div>
		</div>
	</div>
</div>

	<div
	x-data="wysiwygImageModal()"
	x-show="isOpen"
	x-cloak
	@wysiwyg:open-image.window="open($event.detail)"
	@keydown.escape.window="if (isOpen) close()"
>
	
	<div
		class="fixed inset-0 z-[3000] bg-black/40"
		@click="close()"
		x-transition:enter="transition ease-out duration-200"
		x-transition:enter-start="opacity-0"
		x-transition:enter-end="opacity-100"
		x-transition:leave="transition ease-in duration-150"
		x-transition:leave-start="opacity-100"
		x-transition:leave-end="opacity-0"
	></div>

	
	<div
		class="fixed inset-x-4 top-[5%] bottom-[5%] z-[3001] mx-auto flex max-w-3xl flex-col overflow-hidden rounded-2xl bg-white shadow-2xl lg:inset-x-0 lg:w-[750px]"
		x-transition:enter="transition ease-out duration-200"
		x-transition:enter-start="opacity-0 scale-95"
		x-transition:enter-end="opacity-100 scale-100"
		x-transition:leave="transition ease-in duration-150"
		x-transition:leave-start="opacity-100 scale-100"
		x-transition:leave-end="opacity-0 scale-95"
	>
		
		<div class="flex items-center justify-between border-b px-6 py-4">
			<span class="poppins-semibold text-lg text-gray-800">Ajouter des images</span>
			<button
				@click="close()"
				class="flex h-8 w-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
				type="button"
			>
				<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
			</button>
		</div>

		
		<div class="flex border-b px-6">
			<button
				@click="activeTab = 'upload'"
				:class="activeTab === 'upload' ? 'border-styqrpurple text-styqrpurple' : 'border-transparent text-gray-500 hover:text-gray-700'"
				class="border-b-2 px-4 py-3 text-sm poppins-medium transition-colors"
				type="button"
			>Importer</button>
			<button
				@click="activeTab = 'url'"
				:class="activeTab === 'url' ? 'border-styqrpurple text-styqrpurple' : 'border-transparent text-gray-500 hover:text-gray-700'"
				class="border-b-2 px-4 py-3 text-sm poppins-medium transition-colors"
				type="button"
			>URL</button>
			<button
				@click="activeTab = 'unsplash'"
				:class="activeTab === 'unsplash' ? 'border-styqrpurple text-styqrpurple' : 'border-transparent text-gray-500 hover:text-gray-700'"
				class="border-b-2 px-4 py-3 text-sm poppins-medium transition-colors"
				type="button"
			>Unsplash</button>
		</div>

		
		<div class="flex-1 overflow-y-auto p-6">

			
			<div x-show="activeTab === 'upload'" class="flex flex-col gap-4">
				
				<div
					@dragover.prevent="isDragging = true"
					@dragleave.prevent="isDragging = false"
					@drop.prevent="isDragging = false; handleDrop($event)"
					:class="{
						'border-styqrpurple bg-styqrpurple/5': isDragging,
						'border-gray-300': !isDragging,
						'min-h-[180px]': uploadedUrls.length === 0 && !isUploading,
					}"
					class="flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed py-4 transition-colors"
					@click="$refs.fileInput.click()"
				>
					<div x-show="!isUploading" class="flex flex-col items-center gap-2 text-center">
						<svg x-show="uploadedUrls.length === 0" class="h-10 w-10 text-gray-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5" /></svg>
						<p class="text-sm text-gray-600">
							<span x-show="uploadedUrls.length === 0">Glissez des images ici ou <span class="text-styqrpurple poppins-medium">parcourir</span></span>
							<span x-show="uploadedUrls.length > 0" class="text-styqrpurple poppins-medium">+ Ajouter d'autres images</span>
						</p>
						<p x-show="uploadedUrls.length === 0" class="text-xs text-gray-400">JPEG, PNG, GIF, WebP - Max 10 Mo par image</p>
					</div>
					<div x-show="isUploading" class="flex items-center gap-3">
						<span class="inline-block h-5 w-5 animate-spin rounded-full border-2 border-gray-200 border-t-styqrpurple"></span>
						<p class="text-sm text-gray-600">Envoi en cours...</p>
					</div>
				</div>
				<input
					x-ref="fileInput"
					@change="handleFileSelect($event)"
					type="file"
					accept="image/*"
					multiple
					class="hidden"
				>
				<p x-show="uploadError" class="text-sm text-red-500" x-text="uploadError"></p>

				
				<div x-show="uploadedUrls.length > 0" class="grid grid-cols-4 gap-2">
					<template x-for="(url, index) in uploadedUrls" :key="url + '-' + index">
						<div class="group relative aspect-square overflow-hidden rounded-lg border border-gray-200">
							<img :src="url" class="h-full w-full object-cover">
							<button
								@click.stop="removeUploadedImage(index)"
								class="absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-black/50 text-white opacity-0 transition-opacity group-hover:opacity-100"
								type="button"
							>
								<svg class="h-3 w-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
							</button>
						</div>
					</template>
				</div>

				
				<div x-show="uploadedUrls.length > 1">
					<div class="flex flex-col gap-2">
	<span class="text-xs poppins-medium uppercase tracking-wide text-gray-500">Disposition</span>
	<div class="flex gap-2">
					<button
				@click="selectedLayout = 1"
				:class="selectedLayout === 1 ? 'border-styqrpurple bg-styqrpurple/5 text-styqrpurple' : 'border-gray-200 text-gray-400 hover:border-gray-300'"
				class="flex items-center gap-1.5 rounded-lg border-2 px-3 py-2 transition-colors"
				type="button"
			>
				<div class="flex gap-0.5">
											<div class="h-4 rounded-sm bg-current" style="width: 24px"></div>
									</div>
				<span class="text-xs poppins-medium">1/ligne</span>
			</button>
					<button
				@click="selectedLayout = 2"
				:class="selectedLayout === 2 ? 'border-styqrpurple bg-styqrpurple/5 text-styqrpurple' : 'border-gray-200 text-gray-400 hover:border-gray-300'"
				class="flex items-center gap-1.5 rounded-lg border-2 px-3 py-2 transition-colors"
				type="button"
			>
				<div class="flex gap-0.5">
											<div class="h-4 rounded-sm bg-current" style="width: 12px"></div>
											<div class="h-4 rounded-sm bg-current" style="width: 12px"></div>
									</div>
				<span class="text-xs poppins-medium">2/ligne</span>
			</button>
					<button
				@click="selectedLayout = 3"
				:class="selectedLayout === 3 ? 'border-styqrpurple bg-styqrpurple/5 text-styqrpurple' : 'border-gray-200 text-gray-400 hover:border-gray-300'"
				class="flex items-center gap-1.5 rounded-lg border-2 px-3 py-2 transition-colors"
				type="button"
			>
				<div class="flex gap-0.5">
											<div class="h-4 rounded-sm bg-current" style="width: 8px"></div>
											<div class="h-4 rounded-sm bg-current" style="width: 8px"></div>
											<div class="h-4 rounded-sm bg-current" style="width: 8px"></div>
									</div>
				<span class="text-xs poppins-medium">3/ligne</span>
			</button>
					<button
				@click="selectedLayout = 4"
				:class="selectedLayout === 4 ? 'border-styqrpurple bg-styqrpurple/5 text-styqrpurple' : 'border-gray-200 text-gray-400 hover:border-gray-300'"
				class="flex items-center gap-1.5 rounded-lg border-2 px-3 py-2 transition-colors"
				type="button"
			>
				<div class="flex gap-0.5">
											<div class="h-4 rounded-sm bg-current" style="width: 6px"></div>
											<div class="h-4 rounded-sm bg-current" style="width: 6px"></div>
											<div class="h-4 rounded-sm bg-current" style="width: 6px"></div>
											<div class="h-4 rounded-sm bg-current" style="width: 6px"></div>
									</div>
				<span class="text-xs poppins-medium">4/ligne</span>
			</button>
			</div>
</div>
				</div>

				<button
					x-show="uploadedUrls.length > 0"
					@click="insertFromUpload()"
					class="rounded-xl bg-styqrpurple px-5 py-2.5 text-sm text-white transition-colors hover:bg-styqrpurple/90 poppins-medium"
					type="button"
				>
					<span x-text="uploadedUrls.length === 1 ? 'Inserer l\'image' : 'Inserer ' + uploadedUrls.length + ' images'"></span>
				</button>
			</div>

			
			<div x-show="activeTab === 'url'" class="flex flex-col gap-4">
				<div class="flex flex-col gap-2">
					<label class="text-sm poppins-medium text-gray-700">URL de l'image</label>
					<input
						x-model="imageUrl"
						@keydown.enter="imageUrl.trim() && insertSingleImage(imageUrl.trim())"
						class="h-10 w-full rounded-xl border border-gray-200 bg-gray-50 px-4 text-sm transition-colors focus:border-styqrpurple/30 focus:outline-none focus:ring-2 focus:ring-styqrpurple/30"
						placeholder="https://example.com/image.jpg"
						type="url"
					>
				</div>
				<div x-show="imageUrl.trim()" class="flex justify-center rounded-xl border border-gray-200 bg-gray-50 p-4">
					<img :src="imageUrl" class="max-h-40 max-w-full rounded-lg object-contain" x-on:error="$el.style.display='none'" x-on:load="$el.style.display=''" />
				</div>
				<button
					x-show="imageUrl.trim()"
					@click="insertSingleImage(imageUrl.trim())"
					class="rounded-xl bg-styqrpurple px-5 py-2.5 text-sm text-white transition-colors hover:bg-styqrpurple/90 poppins-medium"
					type="button"
				>Inserer l'image</button>
			</div>

			
			<div x-show="activeTab === 'unsplash'" class="flex flex-col gap-4">
				
				<div class="relative">
					<svg class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" /></svg>
					<input
						x-model="searchQuery"
						@keydown.enter="searchUnsplash()"
						class="h-10 w-full rounded-xl border border-gray-200 bg-gray-50 pl-10 pr-4 text-sm transition-colors focus:border-styqrpurple/30 focus:outline-none focus:ring-2 focus:ring-styqrpurple/30"
						placeholder="Rechercher des photos..."
						type="text"
					>
				</div>
				
				<div class="flex flex-wrap gap-2">
					<template x-for="cat in categories" :key="cat">
						<button
							@click="searchQuery = cat; searchUnsplash()"
							:class="{ 'bg-styqrpurple text-white': searchQuery === cat, 'bg-gray-100 text-gray-600 hover:bg-gray-200': searchQuery !== cat }"
							class="rounded-full px-3 py-1 text-xs transition-colors poppins-medium"
							type="button"
							x-text="cat"
						></button>
					</template>
				</div>

				
				<div class="max-h-[300px] overflow-y-auto" @scroll="handleUnsplashScroll($event)">
					<div x-show="isSearching && photos.length === 0" class="flex justify-center py-8">
						<span class="inline-block h-6 w-6 animate-spin rounded-full border-2 border-gray-200 border-t-styqrpurple"></span>
					</div>
					<div x-show="!isSearching && photos.length === 0 && hasSearched" class="py-8 text-center text-sm text-gray-500">
						Aucune photo trouvee.
					</div>
					<div class="grid grid-cols-3 gap-2">
						<template x-for="photo in photos" :key="photo.id">
							<div
								@click="togglePhotoSelection(photo)"
								:class="{ 'ring-2 ring-styqrpurple ring-offset-2': isPhotoSelected(photo) }"
								class="group relative cursor-pointer overflow-hidden rounded-lg aspect-square transition-all hover:shadow-md"
							>
								<img :src="photo.small" :alt="photo.alt" class="h-full w-full object-cover transition-transform group-hover:scale-105" loading="lazy">
								<div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent px-1.5 pb-1 pt-4">
									<span class="text-[9px] text-white/80" x-text="photo.author"></span>
								</div>
								<div
									x-show="isPhotoSelected(photo)"
									class="absolute right-1.5 top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-styqrpurple text-white shadow"
								>
									<svg class="h-3 w-3" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
								</div>
							</div>
						</template>
					</div>
					<div x-show="isSearching && photos.length > 0" class="flex justify-center py-3">
						<span class="inline-block h-5 w-5 animate-spin rounded-full border-2 border-gray-200 border-t-styqrpurple"></span>
					</div>
				</div>

				
				<div x-show="selectedPhotos.length > 1">
					<div class="flex flex-col gap-2">
	<span class="text-xs poppins-medium uppercase tracking-wide text-gray-500">Disposition</span>
	<div class="flex gap-2">
					<button
				@click="selectedLayout = 1"
				:class="selectedLayout === 1 ? 'border-styqrpurple bg-styqrpurple/5 text-styqrpurple' : 'border-gray-200 text-gray-400 hover:border-gray-300'"
				class="flex items-center gap-1.5 rounded-lg border-2 px-3 py-2 transition-colors"
				type="button"
			>
				<div class="flex gap-0.5">
											<div class="h-4 rounded-sm bg-current" style="width: 24px"></div>
									</div>
				<span class="text-xs poppins-medium">1/ligne</span>
			</button>
					<button
				@click="selectedLayout = 2"
				:class="selectedLayout === 2 ? 'border-styqrpurple bg-styqrpurple/5 text-styqrpurple' : 'border-gray-200 text-gray-400 hover:border-gray-300'"
				class="flex items-center gap-1.5 rounded-lg border-2 px-3 py-2 transition-colors"
				type="button"
			>
				<div class="flex gap-0.5">
											<div class="h-4 rounded-sm bg-current" style="width: 12px"></div>
											<div class="h-4 rounded-sm bg-current" style="width: 12px"></div>
									</div>
				<span class="text-xs poppins-medium">2/ligne</span>
			</button>
					<button
				@click="selectedLayout = 3"
				:class="selectedLayout === 3 ? 'border-styqrpurple bg-styqrpurple/5 text-styqrpurple' : 'border-gray-200 text-gray-400 hover:border-gray-300'"
				class="flex items-center gap-1.5 rounded-lg border-2 px-3 py-2 transition-colors"
				type="button"
			>
				<div class="flex gap-0.5">
											<div class="h-4 rounded-sm bg-current" style="width: 8px"></div>
											<div class="h-4 rounded-sm bg-current" style="width: 8px"></div>
											<div class="h-4 rounded-sm bg-current" style="width: 8px"></div>
									</div>
				<span class="text-xs poppins-medium">3/ligne</span>
			</button>
					<button
				@click="selectedLayout = 4"
				:class="selectedLayout === 4 ? 'border-styqrpurple bg-styqrpurple/5 text-styqrpurple' : 'border-gray-200 text-gray-400 hover:border-gray-300'"
				class="flex items-center gap-1.5 rounded-lg border-2 px-3 py-2 transition-colors"
				type="button"
			>
				<div class="flex gap-0.5">
											<div class="h-4 rounded-sm bg-current" style="width: 6px"></div>
											<div class="h-4 rounded-sm bg-current" style="width: 6px"></div>
											<div class="h-4 rounded-sm bg-current" style="width: 6px"></div>
											<div class="h-4 rounded-sm bg-current" style="width: 6px"></div>
									</div>
				<span class="text-xs poppins-medium">4/ligne</span>
			</button>
			</div>
</div>
				</div>

				<button
					x-show="selectedPhotos.length > 0"
					@click="confirmUnsplash()"
					class="rounded-xl bg-styqrpurple px-5 py-2.5 text-sm text-white transition-colors hover:bg-styqrpurple/90 poppins-medium"
					type="button"
				>
					<span x-text="selectedPhotos.length === 1 ? 'Inserer la photo' : 'Inserer ' + selectedPhotos.length + ' photos'"></span>
				</button>
			</div>
		</div>
	</div>
</div>

	<div
	x-data="wysiwygVideoModal()"
	x-show="isOpen"
	x-cloak
	@wysiwyg:open-video.window="open($event.detail)"
	@keydown.escape.window="if (isOpen) close()"
>
	
	<div
		class="fixed inset-0 z-[3000] bg-black/40"
		@click="close()"
		x-transition:enter="transition ease-out duration-200"
		x-transition:enter-start="opacity-0"
		x-transition:enter-end="opacity-100"
		x-transition:leave="transition ease-in duration-150"
		x-transition:leave-start="opacity-100"
		x-transition:leave-end="opacity-0"
	></div>

	
	<div
		class="fixed inset-x-4 top-[15%] z-[3001] mx-auto flex max-w-lg flex-col overflow-hidden rounded-2xl bg-white shadow-2xl lg:inset-x-0 lg:w-[500px]"
		x-transition:enter="transition ease-out duration-200"
		x-transition:enter-start="opacity-0 scale-95"
		x-transition:enter-end="opacity-100 scale-100"
		x-transition:leave="transition ease-in duration-150"
		x-transition:leave-start="opacity-100 scale-100"
		x-transition:leave-end="opacity-0 scale-95"
	>
		
		<div class="flex items-center justify-between border-b px-6 py-4">
			<span class="poppins-semibold text-lg text-gray-800">Ajouter une video</span>
			<button
				@click="close()"
				class="flex h-8 w-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
				type="button"
			>
				<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
			</button>
		</div>

		
		<div class="flex flex-col gap-5 p-6">
			
			<div class="flex flex-col gap-2">
				<label class="text-sm poppins-medium text-gray-700">URL de la video</label>
				<input
					x-model="videoUrl"
					@input="detectPlatform()"
					@keydown.enter="videoUrl.trim() && insertVideo()"
					class="h-10 w-full rounded-xl border border-gray-200 bg-gray-50 px-4 text-sm transition-colors focus:border-styqrpurple/30 focus:outline-none focus:ring-2 focus:ring-styqrpurple/30"
					placeholder="https://www.youtube.com/watch?v=..."
					type="url"
				>
			</div>

			
			<div x-show="detectedPlatform" class="flex items-center gap-3 rounded-xl bg-gray-50 px-4 py-3">
				
				<template x-if="detectedPlatform === 'youtube'">
					<div class="flex items-center gap-2">
						<svg class="h-6 w-6 text-red-600" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
						<span class="text-sm poppins-medium text-gray-700">YouTube</span>
					</div>
				</template>
				
				<template x-if="detectedPlatform === 'vimeo'">
					<div class="flex items-center gap-2">
						<svg class="h-6 w-6 text-[#1ab7ea]" viewBox="0 0 24 24" fill="currentColor"><path d="M23.977 6.416c-.105 2.338-1.739 5.543-4.894 9.609-3.268 4.247-6.026 6.37-8.29 6.37-1.409 0-2.578-1.294-3.553-3.881L5.322 11.4C4.603 8.816 3.834 7.522 3.01 7.522c-.179 0-.806.378-1.881 1.132L0 7.197a315.065 315.065 0 0 0 3.501-3.123C5.08 2.701 6.266 1.984 7.055 1.91c1.867-.18 3.016 1.1 3.447 3.838.465 2.953.789 4.789.971 5.507.539 2.45 1.131 3.674 1.776 3.674.502 0 1.256-.796 2.265-2.385 1.004-1.589 1.54-2.797 1.612-3.628.144-1.371-.395-2.061-1.614-2.061-.574 0-1.167.121-1.777.391 1.186-3.868 3.434-5.757 6.762-5.637 2.473.06 3.628 1.664 3.493 4.797l-.013.01z"/></svg>
						<span class="text-sm poppins-medium text-gray-700">Vimeo</span>
					</div>
				</template>
				
				<template x-if="detectedPlatform === 'drive'">
					<div class="flex items-center gap-2">
						<svg class="h-6 w-6" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
						<span class="text-sm poppins-medium text-gray-700">Google Drive</span>
					</div>
				</template>
				
				<template x-if="detectedPlatform === 'other'">
					<div class="flex items-center gap-2">
						<svg class="h-6 w-6 text-gray-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z" /></svg>
						<span class="text-sm poppins-medium text-gray-700">Video (lien direct)</span>
					</div>
				</template>

				<span x-show="embedUrl" class="ml-auto text-xs text-green-600 poppins-medium">Lien valide</span>
				<span x-show="!embedUrl && videoUrl.trim()" class="ml-auto text-xs text-red-500 poppins-medium">Lien non reconnu</span>
			</div>

			
			<div x-show="embedUrl" class="overflow-hidden rounded-xl border border-gray-200">
				
				<template x-if="detectedPlatform === 'youtube' && videoId">
					<div class="relative w-full aspect-video bg-black">
						<img :src="'https://img.youtube.com/vi/' + videoId + '/hqdefault.jpg'" alt="" class="w-full h-full object-cover opacity-85" />
						<div class="absolute inset-0 flex items-center justify-center">
							<svg width="68" height="48" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55C3.97 2.33 2.27 4.81 1.48 7.74.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24S67.94 13.05 66.52 7.74z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>
						</div>
					</div>
				</template>
				
				<template x-if="detectedPlatform === 'vimeo'">
					<div class="relative w-full aspect-video" style="background:linear-gradient(135deg,#1ab7ea 0%,#0e71b8 100%)">
						<div class="absolute inset-0 flex flex-col items-center justify-center gap-2">
							<svg width="60" height="60" viewBox="0 0 24 24" fill="white" opacity="0.9"><path d="M8 5v14l11-7z"/></svg>
							<span class="text-white text-sm poppins-semibold opacity-90">Vimeo</span>
						</div>
					</div>
				</template>
				
				<template x-if="detectedPlatform === 'drive'">
					<div class="relative w-full aspect-video" style="background:linear-gradient(135deg,#4285F4 0%,#34A853 100%)">
						<div class="absolute inset-0 flex flex-col items-center justify-center gap-2">
							<svg width="60" height="60" viewBox="0 0 24 24" fill="white" opacity="0.9"><path d="M8 5v14l11-7z"/></svg>
							<span class="text-white text-sm poppins-semibold opacity-90">Google Drive</span>
						</div>
					</div>
				</template>
			</div>

			
			<div class="flex flex-wrap gap-2 text-xs text-gray-400">
				<span>Plateformes supportées :</span>
				<span class="rounded bg-gray-100 px-2 py-0.5 text-gray-500">YouTube</span>
				<span class="rounded bg-gray-100 px-2 py-0.5 text-gray-500">Vimeo</span>
				<span class="rounded bg-gray-100 px-2 py-0.5 text-gray-500">Google Drive</span>
			</div>

			
			<button
				x-show="embedUrl"
				@click="insertVideo()"
				class="rounded-xl bg-styqrpurple px-5 py-2.5 text-sm text-white transition-colors hover:bg-styqrpurple/90 poppins-medium"
				type="button"
			>Insérer la video</button>
		</div>
	</div>
</div>


	<script>
		window.STYQR_ENV_BASE = "base";
		window.STYQR_ENV_MAEVA = "maeva";
		window.STYQR_ENV_GDF = "gdf";

		/**
		 * Converts a hex color + opacity (0-100) to an rgba string.
		 * @param {string} hex - Hex color (e.g. '#FF0000')
		 * @param {number} opacity - Opacity from 0 to 100
		 * @returns {string} rgba string
		 */
		window.hexToRgba = function(hex, opacity) {
			const cleaned = hex.replace('#', '');
			const r = parseInt(cleaned.substring(0, 2), 16);
			const g = parseInt(cleaned.substring(2, 4), 16);
			const b = parseInt(cleaned.substring(4, 6), 16);
			const a = opacity / 100;
			return `rgba(${r}, ${g}, ${b}, ${a})`;
		};

		document.addEventListener('alpine:init', () => {

			const gaData = null;
			if (gaData && Object.keys(gaData).length > 0) {
				dataLayer.push(gaData);
			}

			const gaFlashData = null;
			if (gaFlashData) {
				dataLayer.push(gaFlashData);
			}


			Alpine.store('menu', {
				open: false,
				shouldValidateBeforePageChange: false,
			})

			Alpine.store('loading-overlay', {
				visible: false,
			})


			Alpine.store('config', {
				env: "base",
				isGDF: "base" === window.STYQR_ENV_GDF,
				isMaeva: "base" === window.STYQR_ENV_MAEVA,
				isBase: "base" === window.STYQR_ENV_BASE,
			})

			Alpine.store('api', {
				csrfToken: "o0wmXqZBFMTG9tLMQr6mPrXlshD6qJFusytvpyCh",
				scrollTarget: null,
				_refreshingToken: null,

				async refreshCsrfToken() {
					if (!this._refreshingToken) {
						this._refreshingToken = fetch('/refresh-csrf', {
							headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
						})
						.then(r => r.ok ? r.json() : Promise.reject(r))
						.then(data => {
							this.csrfToken = data.token;
							const meta = document.querySelector('meta[name=csrf-token]');
							if (meta) meta.setAttribute('content', data.token);
						})
						.finally(() => { this._refreshingToken = null; });
					}
					return this._refreshingToken;
				},

				async apiFetch(url, options = {}) {
					const res = await fetch(url, options);
					if (res.status === 419) {
						await this.refreshCsrfToken();
						if (options.headers && !(options.headers instanceof Headers)) {
							options.headers['X-CSRF-TOKEN'] = this.csrfToken;
						}
						return fetch(url, options);
					}
					return res;
				},

				getPwaOrigin() {
					const iframe = document.getElementById('booklet-preview-desktop') || document.getElementById('booklet-preview-mobile');
					if (iframe) {
						const src = iframe.src || iframe.dataset.src;
						if (src) {
							try { return new URL(src).origin; } catch(e) {}
						}
					}
					return window.location.origin;
				},

				refreshPreview() {
					const iframe = document.getElementById('booklet-preview-desktop') || document.getElementById('booklet-preview-mobile');
					if (iframe && iframe.contentWindow) {
						const origin = this.getPwaOrigin();
						iframe.contentWindow.postMessage({ type: 'reloadBooklet' }, origin);

						if (this.scrollTarget) {
							const target = this.scrollTarget;
							setTimeout(() => {
								iframe.contentWindow.postMessage({ type: 'scrollTo', target }, origin);
							}, 500);
						}
					}
				},

				// Send a targeted event to the PWA preview (for real-time updates)
				sendToPreview(type, payload = {}) {
					const iframe = document.getElementById('booklet-preview-desktop') || document.getElementById('booklet-preview-mobile');
					if (iframe && iframe.contentWindow) {
						iframe.contentWindow.postMessage({ type, ...payload }, this.getPwaOrigin());
					}
				},

				async post(route, data = {}) {
					const formData = data instanceof FormData ? data : this.toFormData(data);

					const response = await fetch(route, {
						method: 'POST',
						body: formData,
						headers: {
							'X-CSRF-TOKEN': this.csrfToken,
							'X-Requested-With': 'XMLHttpRequest',
							'Accept': 'application/json'
						},
					});

					const result = await response.json();

					if (result.success) {
						this.refreshPreview();
					}

					return result;
				},

				async postJson(route, data = {}) {
					const response = await fetch(route, {
						method: 'POST',
						body: JSON.stringify(data),
						headers: {
							'Content-Type': 'application/json',
							'Accept': 'application/json',
							'X-CSRF-TOKEN': this.csrfToken,
							'X-Requested-With': 'XMLHttpRequest',
						},
					});

					const result = await response.json();

					if (result.success) {
						this.refreshPreview();
					}

					return result;
				},

				toFormData(obj) {
					const formData = new FormData();
					Object.entries(obj).forEach(([key, value]) => {
						formData.append(key, value ?? '');
					});
					return formData;
				},

				toBase64(file) {
					return new Promise((resolve, reject) => {
						const reader = new FileReader();
						reader.readAsDataURL(file);
						reader.onload = () => resolve(reader.result);
						reader.onerror = reject;
					});
				}
			})

			Alpine.store('confirmModal', {
				open: false,
				onOk() {},
				onCancel() {},
				showButton: {
					cancel: true,
					ok: true,
				}
			});

			Alpine.store('formHasBeenModified', {

			})

			Alpine.magic('confirm', () => {
				return ({
					message = 'Voulez vous vraiment effectuer cette action ?',
					okText = 'OK',
					cancelText = "Annuler",
					title = "Confirmer",
					showButton = {
						cancel: true,
						ok: true,
					}
				}) => new Promise((resolve, reject) => {
					const confirmModal = Alpine.store('confirmModal')
					confirmModal.open = true
					confirmModal.message = message
					confirmModal.okText = okText
					confirmModal.cancelText = cancelText
					confirmModal.title = title
					confirmModal.showButton = showButton

					confirmModal.onOk = () => {
						confirmModal.open = false
						resolve(true)
					};

					confirmModal.onCancel = () => {
						confirmModal.open = false
						resolve(false)
					};
				});
			})


			Alpine.directive('tooltip', (el, {
				expression
			}, {
				evaluate
			}) => {
				tippy(el, {
					content: evaluate(expression),
					appendTo: 'parent',
					allowHTML: true,
					theme: 'styqr',
					delay: [null, 1500]
				})
			})
			Alpine.magic('validate', (el) => {
				return (rules) => {
					const value = el.value.trim();
					const rulesList = rules.split('|');
					let inputIsValid = true;
					const errorMessages = [];

					const errorMessagesMap = {
						required: "Ce champ est obligatoire.",
						min: (min) => `La valeur doit comporter au moins ${min} caractères.`,
						max: (max) => `La valeur ne doit pas dépasser ${max} caractères.`,
						pwd: "Le mot de passe n'est pas au bon format.",
						email: "L'adresse email n'est pas valide."
					};

					const validationMethods = {
						required() {
							return value !== '';
						},
						min(arg) {
							const minLength = parseInt(arg);
							return value.length >= minLength;
						},
						max(arg) {
							const maxLength = parseInt(arg);
							return value.length <= maxLength;
						},
						pwd() {
							const regex =
								/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[^A-Za-z0-9\s]).{8,}$/;

							return regex.test(value);
						},
						email() {
							const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
							return regex.test(value);
						}
					};

					rulesList.forEach(rule => {
						let [ruleName, arg] = rule.split(':');

						if (validationMethods[ruleName]) {
							const isValid = validationMethods[ruleName](arg);
							if (!isValid) {
								inputIsValid = false;
								if (errorMessagesMap[ruleName]) {
									errorMessages.push(typeof errorMessagesMap[ruleName] ===
										'function' ?
										errorMessagesMap[ruleName](arg) :
										errorMessagesMap[ruleName]);
								}
							}
						}
					});


					window.dispatchEvent(new CustomEvent('inputvalidation', {
						detail: {
							inputName: el.name,
							isValid: inputIsValid,
							errorMessages
						}
					}));

					return inputIsValid;
				};
			});
		})
	</script>

		<script src="https://www.google.com/recaptcha/api.js?render=explicit"></script>

	<script>
		window.recaptcha = () => {
			return {
				init() {
					grecaptcha.ready(() => {
						grecaptcha.render(this.$el, {
							sitekey: '6Lfur1IcAAAAAMkE1DxTfo86Azv4cWdF47m-7Iwn',
							size: 'invisible',
							callback: this.onComplete.bind(this)
						});
					});
				},
				execute() {
					grecaptcha.execute();
				},
				onComplete() {
					this.$el.closest('form').submit();
				}
			};
		};
	</script>

	
	<script type="text/javascript">
	window.$crisp = [];
	window.CRISP_WEBSITE_ID = "9c703196-0a4c-4ae3-ae89-b574d074cb94";
	(function() {
		d = document;
		s = d.createElement("script");
		s.src = "https://client.crisp.chat/l.js";
		s.async = 1;
		d.getElementsByTagName("head")[0].appendChild(s);
	})();
</script>
	

	<script
		defer
		src="https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/scripts/choices.min.js"
	></script>
	<script
		defer
		src="https://cdn.jsdelivr.net/npm/simple-datatables@latest"
	></script>
	<script
		defer
		src="https://cdn.jsdelivr.net/npm/@popperjs/core@2/dist/umd/popper.min.js"
	></script>
	<script
		defer
		src="https://cdn.jsdelivr.net/npm/tippy.js@6/dist/tippy.umd.min.js"
	></script>
	<script defer src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
	<script defer src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script>
	<script defer src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
	<script defer src="https://unpkg.com/filepond-plugin-media-preview/dist/filepond-plugin-media-preview.min.js"></script>
	<script defer src="https://unpkg.com/filepond/dist/filepond.js"></script>
	<script
		defer
		src="https://cdn.jsdelivr.net/npm/libphonenumber-js@1.11.20/bundle/libphonenumber-js.min.js"
	></script>
	<script
		async
		defer
		src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBKOPyB7mYU5mPo2A9I8oY934Py0XAiTLc&libraries=places&loading=async"
	></script>

	
	<script>
function wysiwygEmojiPicker() {
	const emojiData = {
		smileys: {
			icon: '😀', label: 'Smileys',
			emojis: '😀😃😄😁😆😅🤣😂🙂🙃😉😊😇🥰😍🤩😘😗☺😚😙🥲😋😛😜🤪😝🤑🤗🤭🤫🤔🫡🤐🫢😐😑😶🫥😏😒🙄😬🤥🫨😌😔😪🤤😴😷🤒🤕🤢🤮🤧🥵🥶🥴😵🤯🤠🥳🥸😎🤓🧐😕🫤😟🙁☹😮😯😲😳🥺🥹😦😧😨😰😥😢😭😱😖😣😞😓😩😫🥱😤😡😠🤬😈👿💀☠💩🤡👹👺👻👽👾🤖😺😸😹😻😼😽🙀😿😾'
		},
		gestures: {
			icon: '👋', label: 'Gestes',
			emojis: '👋🤚🖐✋🖖🫱🫲🫳🫴👌🤌🤏✌🤞🫰🤟🤘🤙👈👉👆🖕👇☝🫵👍👎✊👊🤛🤜👏🙌🫶👐🤲🤝🙏✍💅🤳💪🦾🦿🦵🦶👂🦻👃🧠🫀🫁🦷🦴👀👁👅👄🫦'
		},
		people: {
			icon: '👶', label: 'Personnes',
			emojis: '👶🧒👦👧🧑👱👨🧔👩🧓👴👵🙍🙎🙅🙆💁🙋🧏🙇🤦🤷👮🕵💂🥷👷🫅🤴👸👳👲🧕🤵👰🤰🫃🫄🤱👼🎅🤶🦸🦹🧙🧚🧛🧜🧝🧞🧟💆💇🚶🧍🧎🏃💃🕺🕴👯🧖🧗🤸🏌🏇⛷🏂🏋🤼🤽🤾🤺⛹🏊🚣🧘🛀🛌'
		},
		nature: {
			icon: '🌿', label: 'Nature',
			emojis: '🐶🐱🐭🐹🐰🦊🐻🐼🐻‍❄️🐨🐯🦁🐮🐷🐽🐸🐵🙈🙉🙊🐒🐔🐧🐦🐤🐣🐥🦆🦅🦉🦇🐺🐗🐴🦄🐝🪱🐛🦋🐌🐞🐜🪰🪲🪳🦟🦗🕷🦂🐢🐍🦎🦖🦕🐙🦑🦐🦞🦀🪸🐡🐠🐟🐬🐳🐋🦈🦭🐊🐅🐆🦓🦍🦧🐘🦛🦏🐪🐫🦒🦘🦬🐃🐂🐄🐎🐖🐏🐑🦙🐐🦌🐕🐩🦮🐕‍🦺🐈🐈‍⬛🪶🐓🦃🦤🦚🦜🦢🦩🕊🐇🦝🦨🦡🦫🦦🦥🐁🐀🐿🦔🌵🎄🌲🌳🌴🪵🌱🌿☘🍀🎍🪴🎋🍃🍂🍁🪻🪺🍄🐚🪨🌾💐🌷🌹🥀🌺🌸🌼🌻🌞🌝🌛🌜🌚🌕🌖🌗🌘🌑🌒🌓🌔🌙🌎🌍🌏🪐💫⭐🌟✨⚡☄💥🔥🌪🌈☀🌤⛅🌥☁🌦🌧⛈🌩🌨❄☃⛄🌬💨💧💦🫧☔☂🌊🌫'
		},
		food: {
			icon: '🍔', label: 'Nourriture',
			emojis: '🍇🍈🍉🍊🍋🍌🍍🥭🍎🍏🍐🍑🍒🍓🫐🥝🍅🫒🥥🥑🍆🥔🥕🌽🌶🫑🥒🥬🥦🧄🧅🍄🥜🫘🌰🍞🥐🥖🫓🥨🥯🥞🧇🧀🍖🍗🥩🥓🍔🍟🍕🌭🥪🌮🌯🫔🥙🧆🥚🍳🥘🍲🫕🥣🥗🍿🧈🧂🥫🍱🍘🍙🍚🍛🍜🍝🍠🍢🍣🍤🍥🥮🍡🥟🥠🥡🦀🦞🦐🦑🦪🍦🍧🍨🍩🍪🎂🍰🧁🥧🍫🍬🍭🍮🍯🍼🥛☕🫖🍵🍶🍾🍷🍸🍹🍺🍻🥂🥃🫗🥤🧋🧃🧉🧊🥢🍽🍴🥄'
		},
		travel: {
			icon: '✈️', label: 'Voyage',
			emojis: '🚗🚕🚙🚌🚎🏎🚓🚑🚒🚐🛻🚚🚛🚜🏍🛵🚲🛴🛹🛼🚏🛣🛤🛞⛽🛞🚨🚥🚦🛑🚧⚓🛟⛵🛶🚤🛳⛴🛥🚢✈🛩🛫🛬🪂💺🚁🚟🚠🚡🛰🚀🛸🧳🏠🏡🏢🏣🏤🏥🏦🏨🏩🏪🏫🏬🏭🏗🏚🏘🗼🗽⛪🕌🛕🕍⛩🕋⛲⛺🌁🌃🏙🌄🌅🌆🌇🌉♨🎠🛝🎡🎢💈🎪🗻🏔⛰🌋🏕🏖🏜🏝🏞'
		},
		objects: {
			icon: '💡', label: 'Objets',
			emojis: '⌚📱📲💻⌨🖥🖨🖱🖲🕹🗜💽💾💿📀📼📷📸📹🎥📽🎞📞☎📟📠📺📻🎙🎚🎛🧭⏱⏲⏰🕰⌛⏳📡🔋🪫🔌💡🔦🕯🪔🧯🗑🛢💸💵💴💶💷🪙💰💳🪪💎⚖🪜🧰🪛🔧🔩⚙🪤🧲🔫💣🪓🔪🗡⚔🛡🚬⚰🪦⚱🏺🔮📿🧿🪬💈⚗🔭🔬🕳🩹🩺🩻🩼💊💉🩸🧬🦠🧫🧪🌡🧹🪠🧺🧻🚰🚿🛁🛀🧼🪥🪒🧽🪣🧴🔑🗝🚪🪑🛋🛏🛌🧸🪆🖼🪞🪟🛍🛒🎁🎈🎏🎀🪄🪅🎊🎉🎎🏮🎐🧧✉📩📨📧💌📥📦📫📪📬📭📮🗳✏✒🖋🖊🖌🖍📝💼📁📂🗂📅📆🗒🗓📇📈📉📊📋📌📍📎🖇📏📐✂🗃🗄🗑🔒🔓🔏🔐'
		},
		symbols: {
			icon: '❤️', label: 'Symboles',
			emojis: '❤🩷🧡💛💚💙🩵💜🖤🩶🤍🤎💔❤‍🔥❤‍🩹❣💕💞💓💗💖💘💝💟☮✝☪🕉☸✡🔯🕎☯☦🛐⛎♈♉♊♋♌♍♎♏♐♑♒♓🆔⚛🉑☢☣📴📳🈶🈚🈸🈺🈷✴🆚💮🉐㊙㊗🈴🈵🈹🈲🅰🅱🆎🆑🅾🆘❌⭕🛑⛔📛🚫💯💢♨🚷🚯🚳🚱🔞📵🚭❗❕❓❔‼⁉🔅🔆〽⚠🚸🔱⚜🔰♻✅🈯💹❇✳❎🌐💠Ⓜ🌀💤🏧🚾♿🅿🛗🈳🈂🛂🛃🛄🛅🚹🚺🚼⚧🚻🚮🎦📶🈁🔣ℹ🔤🔡🔠🆖🆗🆙🆒🆕🆓0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟🔢#️⃣*️⃣⏏▶⏩⏭⏯◀⏪⏮🔼⏫🔽⏬⏸⏹⏺⏏🎦🔅🔆📶🔀🔁🔂🔃🔄🔙🔚🔛🔜🔝'
		},
		flags: {
			icon: '🏳️', label: 'Drapeaux',
			emojis: '🏁🚩🎌🏴🏳🏳️‍🌈🏳️‍⚧️🇫🇷🇬🇧🇺🇸🇩🇪🇪🇸🇮🇹🇵🇹🇧🇷🇨🇦🇦🇺🇯🇵🇨🇳🇰🇷🇮🇳🇷🇺🇲🇽🇦🇷🇨🇴🇨🇱🇵🇪🇻🇪🇨🇺🇧🇪🇳🇱🇨🇭🇦🇹🇸🇪🇳🇴🇩🇰🇫🇮🇮🇪🇵🇱🇨🇿🇬🇷🇹🇷🇪🇬🇿🇦🇲🇦🇹🇳🇸🇦🇦🇪🇮🇱🇹🇭🇻🇳🇮🇩🇵🇭🇲🇾🇸🇬🇳🇿'
		},
	};

	// French + English keyword mapping for search
	const searchMap = {
		// Smileys & émotions
		'sourire': '😀😃😄😁😊☺🙂', 'smile': '😀😃😄😁😊☺🙂', 'happy': '😀😃😄😁😊😆',
		'rire': '😆😅🤣😂', 'laugh': '😆😅🤣😂', 'lol': '🤣😂', 'mdr': '🤣😂',
		'coeur': '❤🩷🧡💛💚💙🩵💜🖤💕💞💓💗💖💘💝', 'heart': '❤🩷🧡💛💚💙🩵💜🖤💕💞💓💗💖💘💝', 'amour': '❤💕💞💓💗💖💘💝😍🥰😘', 'love': '❤💕💞💓💗💖💘💝😍🥰😘',
		'triste': '😢😭😞😔🥺😿', 'sad': '😢😭😞😔🥺😿', 'pleurer': '😢😭', 'cry': '😢😭😿',
		'colere': '😠😡🤬👿', 'angry': '😠😡🤬👿', 'enerve': '😠😡🤬', 'rage': '🤬😡',
		'peur': '😨😱😰', 'fear': '😨😱😰', 'effraye': '😨😱😰', 'scared': '😨😱😰',
		'malade': '🤒🤕🤢🤮🤧😷', 'sick': '🤒🤕🤢🤮🤧😷', 'fievre': '🤒🤕🌡',
		'surprise': '😮😯😲😳🤯', 'etonne': '😮😯😲😳🤯', 'shocked': '😮😲😳🤯',
		'cool': '😎🤓🧐', 'swag': '😎🤙🕶',
		'bisou': '😘😗😚😙💋', 'kiss': '😘😗😚😙💋',
		'clin': '😉😜🤪', 'wink': '😉😜🤪',
		'diable': '😈👿👹👺', 'devil': '😈👿👹👺', 'demon': '😈👿👹',
		'mort': '💀☠👻', 'dead': '💀☠👻', 'fantome': '👻', 'ghost': '👻',
		'clown': '🤡', 'robot': '🤖', 'alien': '👽👾',
		'gene': '😅😬🫣🫠', 'shy': '🫣🙈😊', 'timide': '🫣🙈😊',
		'fatigue': '😴😪🥱😩', 'tired': '😴😪🥱😩', 'dormir': '😴💤🛌', 'sleep': '😴💤🛌',
		'reflechir': '🤔💭🧐', 'think': '🤔💭🧐', 'penser': '🤔💭',
		'content': '😊😁🥰🤗', 'joy': '😊😁🥰😆', 'joie': '😊😁🥰😆🎉',
		'plaisir': '😏😋🤤😜', 'yummy': '😋🤤', 'delicieux': '😋🤤',
		'nerd': '🤓🧐📚', 'geek': '🤓🧐🖥',
		'hug': '🤗🫂', 'calin': '🤗🫂🥰',
		'confused': '😕🫤😟🤷', 'perdu': '😕🫤😟🤷',
		'secret': '🤫🤐🫢', 'chut': '🤫🤐',
		'arghhh': '😤😡🤬', 'grr': '😤😠😡',
		'vomi': '🤮🤢', 'puke': '🤮🤢',
		// Gestes & mains
		'pouce': '👍👎', 'thumb': '👍👎', 'bravo': '👏🙌🎉👍', 'clap': '👏',
		'ok': '👌👍✅🆗', 'merci': '🙏🤝', 'prier': '🙏', 'pray': '🙏', 'thanks': '🙏🤝',
		'main': '👋🤚🖐✋🖖🫱🫲👐🤲', 'hand': '👋🤚🖐✋🖖🫱🫲👐🤲', 'wave': '👋',
		'doigt': '👈👉👆👇☝🫵🖕', 'finger': '👈👉👆👇☝🫵', 'point': '👈👉👆👇☝🫵',
		'poing': '✊👊🤛🤜', 'fist': '✊👊🤛🤜', 'force': '💪✊🦾', 'strong': '💪🦾',
		'victoire': '✌🤞🏆🥇', 'peace': '✌🤞', 'rock': '🤘🤟🎸',
		'applaudir': '👏🙌', 'salut': '👋🤚', 'hello': '👋🤚', 'bonjour': '👋🤚☀',
		'bye': '👋🤚', 'au revoir': '👋🤚',
		'ecrire': '✍🖊📝', 'write': '✍🖊📝',
		'muscle': '💪🦾🏋', 'bras': '💪🦾',
		'oreille': '👂🦻', 'ear': '👂🦻', 'nez': '👃', 'nose': '👃',
		'oeil': '👁👀', 'eye': '👁👀', 'yeux': '👀👁', 'voir': '👀👁🔍',
		'bouche': '👄💋🫦', 'mouth': '👄💋🫦', 'langue': '👅😛😜😝', 'tongue': '👅😛',
		'cerveau': '🧠💭', 'brain': '🧠💭',
		// Personnes & métiers
		'bebe': '👶🍼🧒', 'baby': '👶🍼', 'enfant': '🧒👦👧',
		'homme': '👨🧔🤵', 'man': '👨🧔', 'femme': '👩👸💃', 'woman': '👩👸💃',
		'famille': '👨‍👩‍👧‍👦👪🏠', 'family': '👨‍👩‍👧‍👦👪',
		'couple': '💑👫👬👭💏', 'amoureux': '💑💏❤😍',
		'vieux': '🧓👴👵', 'old': '🧓👴👵',
		'police': '👮🚔🚨🔫', 'policier': '👮🚔🚨',
		'docteur': '🧑‍⚕️👨‍⚕️👩‍⚕️🩺💉', 'doctor': '🧑‍⚕️🩺💉', 'medecin': '🧑‍⚕️🩺💉',
		'pompier': '🧑‍🚒🚒🔥', 'firefighter': '🧑‍🚒🚒',
		'cuisinier': '🧑‍🍳👨‍🍳👩‍🍳🍳', 'chef': '🧑‍🍳👨‍🍳🍳', 'cook': '🧑‍🍳🍳',
		'professeur': '🧑‍🏫👨‍🏫👩‍🏫📚', 'teacher': '🧑‍🏫📚',
		'etudiant': '🧑‍🎓👨‍🎓👩‍🎓📖', 'student': '🧑‍🎓📖',
		'scientifique': '🧑‍🔬🔬🧪', 'scientist': '🧑‍🔬🔬🧪',
		'artiste': '🧑‍🎨🎨🖌🖼', 'artist': '🧑‍🎨🎨🖌',
		'musicien': '🧑‍🎤🎤🎵🎸', 'singer': '🧑‍🎤🎤🎵',
		'astronaute': '🧑‍🚀🚀🌌', 'astronaut': '🧑‍🚀🚀',
		'fermier': '🧑‍🌾👨‍🌾🌾🚜', 'farmer': '🧑‍🌾🌾',
		'ninja': '🥷', 'pirate': '🏴‍☠️🦜⚓',
		'prince': '🤴👑', 'princesse': '👸👑💎', 'princess': '👸👑',
		'ange': '👼😇', 'angel': '👼😇',
		'zombie': '🧟', 'vampire': '🧛🦇', 'sorcier': '🧙🪄', 'wizard': '🧙🪄',
		'fee': '🧚✨🪄', 'fairy': '🧚✨', 'sirene': '🧜🌊', 'mermaid': '🧜🌊',
		'superhero': '🦸💥', 'heros': '🦸💥🦹',
		'danser': '💃🕺🪩', 'dance': '💃🕺🪩', 'danse': '💃🕺🪩',
		// Nature & météo
		'soleil': '☀🌞🌤🌅🌄', 'sun': '☀🌞🌤🌅🌄', 'sunny': '☀🌞🌤',
		'pluie': '🌧☔🌦💧', 'rain': '🌧☔🌦💧', 'rainy': '🌧☔🌦',
		'neige': '❄☃⛄🌨', 'snow': '❄☃⛄🌨', 'froid': '❄🥶⛄🌨', 'cold': '❄🥶⛄',
		'chaud': '🥵☀🔥🌡', 'hot': '🥵☀🔥🌡', 'chaleur': '🥵☀🔥🌡',
		'feu': '🔥🧯🕯', 'fire': '🔥🧯🕯', 'flamme': '🔥',
		'eau': '💧💦🌊🏊', 'water': '💧💦🌊', 'goutte': '💧💦',
		'vent': '💨🌬🌪', 'wind': '💨🌬🌪', 'orage': '⛈🌩⚡', 'storm': '⛈🌩⚡', 'thunder': '⛈🌩⚡',
		'nuage': '☁⛅🌥🌦🌧', 'cloud': '☁⛅🌥🌦🌧',
		'arc-en-ciel': '🌈', 'rainbow': '🌈',
		'lune': '🌙🌕🌖🌗🌘🌑🌒🌓🌔🌛🌜🌝🌚', 'moon': '🌙🌕🌛🌜🌝🌚',
		'eclair': '⚡🌩', 'lightning': '⚡🌩', 'tonnerre': '⛈🌩',
		'brouillard': '🌫', 'fog': '🌫',
		'tornade': '🌪', 'tornado': '🌪',
		'terre': '🌍🌎🌏🗺', 'earth': '🌍🌎🌏', 'monde': '🌍🌎🌏🗺', 'world': '🌍🌎🌏',
		'planete': '🪐🌍🌎🌏', 'planet': '🪐🌍', 'espace': '🌌🚀🛸🪐⭐', 'space': '🌌🚀🛸🪐',
		'volcan': '🌋🔥', 'volcano': '🌋',
		'desert': '🏜🐪☀🌵',
		'ocean': '🌊🐋🐬🦈🏊', 'mer': '🌊🐋🐬🦈🏖',
		'ile': '🏝🌴🏖', 'island': '🏝🌴',
		'foret': '🌲🌳🍃🌿', 'forest': '🌲🌳🍃',
		'coucher': '🌅🌇🌆', 'sunset': '🌅🌇', 'lever': '🌅🌄☀', 'sunrise': '🌄☀',
		'nuit': '🌙🌌🌃🌉✨', 'night': '🌙🌌🌃',
		// Animaux
		'chien': '🐶🐕🐩🦮🐕‍🦺', 'dog': '🐶🐕🐩', 'chiot': '🐶🐕', 'puppy': '🐶',
		'chat': '🐱🐈🐈‍⬛', 'cat': '🐱🐈🐈‍⬛', 'chaton': '🐱🐈',
		'oiseau': '🐦🐤🐣🐥🦆🦅🦉🕊🦜🦢🦩🦚', 'bird': '🐦🐤🦆🦅🦉🕊',
		'poisson': '🐟🐠🐡🎣🦈🐬🐳🐋', 'fish': '🐟🐠🐡🎣🦈',
		'papillon': '🦋', 'butterfly': '🦋', 'abeille': '🐝', 'bee': '🐝',
		'cheval': '🐴🐎🏇🦄', 'horse': '🐴🐎🏇🦄', 'licorne': '🦄', 'unicorn': '🦄',
		'singe': '🐵🐒🙈🙉🙊', 'monkey': '🐵🐒🙈🙉🙊',
		'cochon': '🐷🐽🐖', 'pig': '🐷🐽🐖', 'vache': '🐮🐄🐂', 'cow': '🐮🐄',
		'lapin': '🐰🐇', 'rabbit': '🐰🐇', 'ours': '🐻🐻‍❄️🧸', 'bear': '🐻🐻‍❄️🧸',
		'serpent': '🐍', 'snake': '🐍', 'tortue': '🐢', 'turtle': '🐢',
		'lion': '🦁👑', 'tigre': '🐯🐅', 'tiger': '🐯🐅',
		'elephant': '🐘', 'girafe': '🦒', 'giraffe': '🦒',
		'renard': '🦊', 'fox': '🦊', 'loup': '🐺', 'wolf': '🐺',
		'panda': '🐼🐻', 'koala': '🐨',
		'souris': '🐭🐁🐀', 'mouse': '🐭🐁🐀', 'rat': '🐀🐁',
		'grenouille': '🐸', 'frog': '🐸', 'crocodile': '🐊',
		'pingouin': '🐧', 'penguin': '🐧',
		'baleine': '🐋🐳', 'whale': '🐋🐳', 'dauphin': '🐬', 'dolphin': '🐬',
		'requin': '🦈', 'shark': '🦈',
		'pieuvre': '🐙', 'octopus': '🐙', 'crevette': '🦐', 'shrimp': '🦐',
		'crabe': '🦀', 'crab': '🦀', 'homard': '🦞', 'lobster': '🦞',
		'escargot': '🐌', 'snail': '🐌', 'coccinelle': '🐞', 'ladybug': '🐞',
		'fourmi': '🐜', 'ant': '🐜', 'araignee': '🕷🕸', 'spider': '🕷🕸',
		'mouche': '🪰', 'fly': '🪰', 'moustique': '🦟', 'mosquito': '🦟',
		'dinosaure': '🦕🦖', 'dinosaur': '🦕🦖', 'dragon': '🐉🐲',
		'mouton': '🐑🐏', 'sheep': '🐑🐏', 'chevre': '🐐', 'goat': '🐐',
		'chameau': '🐫🐪', 'camel': '🐫🐪',
		'aigle': '🦅', 'eagle': '🦅', 'hibou': '🦉', 'owl': '🦉',
		'perroquet': '🦜', 'parrot': '🦜', 'flamant': '🦩', 'flamingo': '🦩',
		'cygne': '🦢', 'swan': '🦢', 'paon': '🦚', 'peacock': '🦚',
		'canard': '🦆', 'duck': '🦆', 'poule': '🐔🐓🥚', 'chicken': '🐔🐓',
		'cerf': '🦌', 'deer': '🦌', 'biche': '🦌',
		'gorille': '🦍', 'gorilla': '🦍', 'orangoutan': '🦧',
		'hippopotame': '🦛', 'hippo': '🦛', 'rhinoceros': '🦏', 'rhino': '🦏',
		'zebre': '🦓', 'zebra': '🦓',
		'herisson': '🦔', 'hedgehog': '🦔', 'ecureuil': '🐿', 'squirrel': '🐿',
		'chauve-souris': '🦇', 'bat': '🦇',
		'scorpion': '🦂', 'lezard': '🦎', 'lizard': '🦎',
		'patte': '🐾', 'paw': '🐾', 'empreinte': '🐾👣',
		// Plantes
		'fleur': '🌸🌹🌺🌻🌷💐🌼🪻🥀', 'flower': '🌸🌹🌺🌻🌷💐🌼🪻🥀',
		'rose': '🌹🥀🩷', 'tournesol': '🌻', 'sunflower': '🌻', 'tulipe': '🌷', 'tulip': '🌷',
		'arbre': '🌲🌳🌴🎄🪵', 'tree': '🌲🌳🌴🎄🪵',
		'feuille': '🍃🍂🍁🌿☘🍀', 'leaf': '🍃🍂🍁🌿☘🍀',
		'plante': '🌱🌿🪴🌵🌾', 'plant': '🌱🌿🪴🌵🌾',
		'champignon': '🍄', 'mushroom': '🍄',
		'cactus': '🌵', 'bambou': '🎋', 'bamboo': '🎋',
		'trefle': '☘🍀', 'clover': '☘🍀', 'chance': '🍀🤞🎰',
		'bouquet': '💐🌹🌷', 'jardin': '🌱🌿🪴🌻🌷', 'garden': '🌱🌿🪴🌻',
		'herbe': '🌱🌿🌾', 'grass': '🌱🌿',
		// Nourriture & boissons
		'pizza': '🍕', 'burger': '🍔🍟', 'frites': '🍟', 'fries': '🍟',
		'gateau': '🎂🍰🧁🥧', 'cake': '🎂🍰🧁🥧', 'patisserie': '🧁🍰🥐🍩',
		'fruit': '🍇🍈🍉🍊🍋🍌🍍🍎🍏🍐🍑🍒🍓🫐🥝', 'pomme': '🍎🍏', 'apple': '🍎🍏',
		'banane': '🍌', 'banana': '🍌', 'orange': '🍊🟠', 'citron': '🍋', 'lemon': '🍋',
		'fraise': '🍓', 'strawberry': '🍓', 'cerise': '🍒', 'cherry': '🍒',
		'raisin': '🍇', 'grape': '🍇', 'pasteque': '🍉', 'watermelon': '🍉',
		'ananas': '🍍', 'pineapple': '🍍', 'peche': '🍑', 'peach': '🍑',
		'mangue': '🥭', 'mango': '🥭', 'kiwi': '🥝', 'noix coco': '🥥', 'coconut': '🥥',
		'avocat': '🥑', 'avocado': '🥑', 'tomate': '🍅', 'tomato': '🍅',
		'cafe': '☕🫖', 'coffee': '☕', 'the': '🍵🫖', 'tea': '🍵🫖',
		'vin': '🍷🍾🥂', 'wine': '🍷🍾🥂', 'biere': '🍺🍻', 'beer': '🍺🍻',
		'cocktail': '🍸🍹🧉', 'champagne': '🍾🥂',
		'glace': '🍦🍧🍨🧊', 'icecream': '🍦🍧🍨',
		'chocolat': '🍫🍩', 'bonbon': '🍬🍭', 'candy': '🍬🍭', 'sweet': '🍬🍭🍩🧁',
		'pain': '🍞🥐🥖🫓🥨🥯', 'bread': '🍞🥐🥖', 'croissant': '🥐', 'baguette': '🥖',
		'legume': '🥕🥦🥬🥒🌽🧅🧄🥔🍆🫑', 'vegetable': '🥕🥦🥬🥒🌽',
		'carotte': '🥕', 'carrot': '🥕', 'brocoli': '🥦', 'broccoli': '🥦',
		'mais': '🌽', 'corn': '🌽', 'salade': '🥗🥬', 'salad': '🥗🥬',
		'fromage': '🧀', 'cheese': '🧀', 'oeuf': '🥚🍳', 'egg': '🥚🍳',
		'viande': '🥩🍖🍗🥓', 'meat': '🥩🍖🍗', 'poulet': '🍗🐔',
		'sushi': '🍣🍱', 'riz': '🍚🍙', 'rice': '🍚🍙', 'nouille': '🍜🍝', 'noodle': '🍜🍝',
		'taco': '🌮', 'burrito': '🌯', 'sandwich': '🥪',
		'soupe': '🍲🥣', 'soup': '🍲🥣',
		'cookie': '🍪', 'biscuit': '🍪',
		'miel': '🍯🐝', 'honey': '🍯',
		'sel': '🧂', 'salt': '🧂', 'piment': '🌶🥵', 'pepper': '🌶',
		'restaurant': '🍽🍴🥢🧑‍🍳',
		'petit-dejeuner': '🥞🧇🍳☕🥐', 'breakfast': '🥞🧇🍳☕',
		// Transport & voyage
		'voiture': '🚗🚕🚙🏎', 'car': '🚗🚕🚙🏎', 'auto': '🚗🚕🚙',
		'avion': '✈🛩🛫🛬', 'plane': '✈🛩🛫🛬', 'flight': '✈🛩🛫🛬',
		'train': '🚂🚃🚄🚅🚆🚇🚈🚉', 'bus': '🚌🚎🚍', 'metro': '🚇🚈',
		'bateau': '🚢⛵🛶🚤⛴🛳', 'boat': '🚢⛵🛶🚤', 'ship': '🚢⛵🛳',
		'velo': '🚲🚴🏍🛵', 'bike': '🚲🚴', 'moto': '🏍🛵', 'motorcycle': '🏍🛵',
		'fusee': '🚀', 'rocket': '🚀', 'helicoptere': '🚁', 'helicopter': '🚁',
		'maison': '🏠🏡🏘', 'house': '🏠🏡🏘', 'home': '🏠🏡',
		'hotel': '🏨🏩', 'plage': '🏖🏝☀🌊🏄', 'beach': '🏖🏝🌊🏄',
		'montagne': '🏔⛰🗻🏕', 'mountain': '🏔⛰🗻',
		'taxi': '🚕🚖', 'ambulance': '🚑🏥', 'camion': '🚛🚚', 'truck': '🚛🚚',
		'trottinette': '🛴', 'scooter': '🛴🛵', 'skateboard': '🛹',
		'essence': '⛽🛞', 'fuel': '⛽', 'parking': '🅿🚗',
		'feu rouge': '🚦🚥', 'traffic': '🚦🚥🚗',
		'voyage': '🧳✈🗺🏖🌍', 'travel': '🧳✈🗺🌍', 'vacances': '🏖🏝✈🌴🧳', 'vacation': '🏖🏝✈',
		'carte': '🗺🧭📍', 'map': '🗺🧭📍',
		'camping': '🏕⛺🔥🌲', 'tent': '⛺🏕',
		'eglise': '⛪🕊', 'church': '⛪', 'mosquee': '🕌', 'mosque': '🕌',
		'chateau': '🏰🏯👑', 'castle': '🏰🏯',
		'statue': '🗽🗿', 'monument': '🗽🗿🏛',
		'pont': '🌉🌁', 'bridge': '🌉🌁',
		'usine': '🏭', 'factory': '🏭', 'bureau': '🏢💼🖥', 'office': '🏢💼',
		'ecole': '🏫📚✏🧑‍🏫', 'school': '🏫📚✏',
		'banque': '🏦💰💳', 'bank': '🏦💰',
		'magasin': '🏪🛍🛒', 'shop': '🏪🛍🛒', 'boutique': '🏪🛍',
		'ancre': '⚓🚢', 'anchor': '⚓',
		// Communication & tech
		'telephone': '📱📲☎📞', 'phone': '📱📲☎📞', 'appel': '📱📞☎',
		'mail': '📧📩✉📨💌', 'email': '📧📩✉📨💌', 'lettre': '✉📩📨💌', 'message': '💬📩✉📧',
		'ordinateur': '💻🖥⌨🖱', 'computer': '💻🖥⌨🖱', 'pc': '💻🖥',
		'photo': '📷📸🖼🎞', 'camera': '📷📸🎥📹🎬',
		'musique': '🎵🎶🎼🎹🎸🎷🎺🎻🥁🎤🎧', 'music': '🎵🎶🎼🎹🎸🎷🎺🎻🥁',
		'video': '📹🎥🎬📽🎞', 'film': '🎬🎥📽🎞🍿', 'cinema': '🎬🎥🍿',
		'television': '📺📡', 'tv': '📺📡',
		'radio': '📻🎙',
		'batterie': '🔋🪫🔌', 'battery': '🔋🪫',
		'wifi': '📶📡', 'internet': '📶🌐💻',
		'micro': '🎙🎤', 'microphone': '🎙🎤',
		'casque': '🎧', 'headphone': '🎧',
		'imprimante': '🖨📄', 'printer': '🖨',
		'disque': '💿💾📀🖴', 'disk': '💿💾📀',
		'satellite': '📡🛰',
		'joystick': '🕹🎮', 'manette': '🎮🕹',
		'clavier': '⌨🖥', 'keyboard': '⌨',
		'ecran': '🖥📺💻📱', 'screen': '🖥📺💻',
		'guitare': '🎸🎵', 'guitar': '🎸', 'piano': '🎹🎵', 'violon': '🎻', 'violin': '🎻',
		'trompette': '🎺', 'trumpet': '🎺', 'saxophone': '🎷', 'tambour': '🥁', 'drum': '🥁',
		// Sport & activités
		'sport': '⚽🏀🏈⚾🎾🏐🏉🥏🎱🏆', 'football': '⚽🏈', 'basket': '🏀', 'basketball': '🏀',
		'tennis': '🎾🏸', 'natation': '🏊🤽', 'swim': '🏊🤽', 'nager': '🏊🤽',
		'ski': '⛷🎿🏂', 'surf': '🏄🌊', 'snowboard': '🏂',
		'trophee': '🏆🥇🥈🥉🏅🎖', 'trophy': '🏆🥇🥈🥉', 'medaille': '🏅🎖🥇🥈🥉', 'medal': '🏅🎖🥇',
		'golf': '⛳🏌', 'rugby': '🏉',
		'boxe': '🥊🥋', 'boxing': '🥊', 'karate': '🥋',
		'baseball': '⚾🥎', 'volleyball': '🏐',
		'ping-pong': '🏓', 'badminton': '🏸',
		'escrime': '🤺', 'fencing': '🤺',
		'escalade': '🧗🏔', 'climbing': '🧗',
		'yoga': '🧘🧘‍♀️🧘‍♂️', 'meditation': '🧘🙏',
		'course': '🏃🏃‍♂️🏃‍♀️🏅', 'run': '🏃🏅', 'courir': '🏃🏅',
		'marcher': '🚶🚶‍♂️🚶‍♀️', 'walk': '🚶',
		'gym': '🏋🏋‍♂️🏋‍♀️💪', 'musculation': '🏋💪',
		'jeu': '🎮🎲🃏🎯🎰🧩', 'game': '🎮🎲🃏🎯', 'jouer': '🎮🎲🎯',
		'carte jeu': '🃏🎴', 'des': '🎲', 'dice': '🎲',
		'cible': '🎯', 'target': '🎯', 'billard': '🎱', 'pool': '🎱',
		'puzzle': '🧩',
		'peche': '🎣🐟', 'fishing': '🎣',
		'equitation': '🏇🐴', 'riding': '🏇',
		'bowling': '🎳',
		// Symboles & signes
		'star': '⭐🌟✨💫', 'etoile': '⭐🌟✨💫',
		'check': '✅✔☑', 'valide': '✅✔☑👍', 'croix': '❌✖❎',
		'fleche': '➡⬅⬆⬇↗↘↙↖↕↔', 'arrow': '➡⬅⬆⬇↗↘↙↖',
		'rond': '🔴🟠🟡🟢🔵🟣⚫⚪🟤', 'cercle': '🔴🟠🟡🟢🔵🟣⚫⚪⭕',
		'attention': '⚠🚨❗❕🔔', 'warning': '⚠🚨❗❕',
		'interdit': '🚫⛔🚷🚯🚳🚱🔞📵', 'stop': '🛑⛔🚫✋',
		'info': 'ℹ💡❓❔', 'question': '❓❔🤔',
		'argent': '💰💵💴💶💷💲🪙💳', 'money': '💰💵💴💶💷💲🪙💳', 'euro': '💶💰', 'dollar': '💵💲💰',
		'cadeau': '🎁🎀🎊🎉', 'gift': '🎁🎀', 'present': '🎁🎀',
		'fete': '🎉🎊🥳🎈🎆🎇🪅🎂', 'party': '🎉🎊🥳🎈', 'celebration': '🎉🎊🥳🎆',
		'noel': '🎄🎅🤶🎁⛄❄🌟', 'christmas': '🎄🎅🤶🎁⛄❄',
		'halloween': '🎃👻💀🦇🕷🕸🧛🧟', 'citrouille': '🎃', 'pumpkin': '🎃',
		'anniversaire': '🎂🎈🎉🥳🎁🕯', 'birthday': '🎂🎈🎉🥳🎁',
		'mariage': '💒💍👰🤵💕', 'wedding': '💒💍👰🤵',
		'paques': '🐰🥚🐣🌷', 'easter': '🐰🥚🐣',
		'nouvel an': '🎆🎇🥂🎉🕛', 'new year': '🎆🎇🥂🎉',
		'feu artifice': '🎆🎇✨', 'firework': '🎆🎇',
		'ballon': '🎈🏐⚽🏀', 'balloon': '🎈',
		'confetti': '🎊🎉',
		'ruban': '🎀🎗', 'ribbon': '🎀🎗',
		'carre': '🟥🟧🟨🟩🟦🟪⬛⬜🟫', 'square': '🟥🟧🟨🟩🟦🟪⬛⬜',
		'rouge': '🔴🟥❤🩷', 'red': '🔴🟥❤',
		'bleu': '🔵🟦💙🩵', 'blue': '🔵🟦💙',
		'vert': '🟢🟩💚', 'green': '🟢🟩💚',
		'jaune': '🟡🟨💛', 'yellow': '🟡🟨💛',
		'violet': '🟣🟪💜', 'purple': '🟣🟪💜',
		'noir': '⚫⬛🖤🏴', 'black': '⚫⬛🖤',
		'blanc': '⚪⬜🤍', 'white': '⚪⬜🤍',
		'orange couleur': '🟠🟧🧡',
		'marron': '🟤🟫🤎', 'brown': '🟤🟫🤎',
		'plus': '➕✚', 'moins': '➖', 'minus': '➖',
		'multiplier': '✖❌', 'diviser': '➗',
		'infini': '♾', 'infinity': '♾',
		'recycler': '♻🔄', 'recycle': '♻',
		'radioactif': '☢', 'danger': '☢☣⚠🚨',
		'paix': '☮✌🕊', 'religion': '✝☪🕉☸✡🛐',
		'zodiaque': '♈♉♊♋♌♍♎♏♐♑♒♓', 'zodiac': '♈♉♊♋♌♍♎♏♐♑♒♓',
		'musique note': '🎵🎶🎼♩♪', 'note': '🎵🎶📝',
		'haut-parleur': '🔊🔉🔈📢📣', 'speaker': '🔊📢', 'son': '🔊🔉🔈🔔',
		'silence': '🔇🤫', 'mute': '🔇',
		'cloche': '🔔🛎🔕', 'bell': '🔔🛎',
		// Objets & quotidien
		'porte': '🚪', 'door': '🚪', 'cle': '🔑🗝', 'key': '🔑🗝',
		'chaise': '🪑', 'chair': '🪑', 'lit': '🛏🛌🛋', 'bed': '🛏🛌',
		'canape': '🛋', 'sofa': '🛋', 'lampe': '💡🔦🕯🪔', 'lamp': '💡🔦',
		'ampoule': '💡', 'bougie': '🕯🪔', 'candle': '🕯🪔',
		'miroir': '🪞', 'mirror': '🪞', 'fenetre': '🪟', 'window': '🪟',
		'montre': '⌚⏱⏲⏰🕰', 'watch': '⌚⏱⏲⏰', 'horloge': '⏰🕰⌛⏳', 'clock': '⏰🕰',
		'livre': '📖📚📕📗📘📙📓📔', 'book': '📖📚📕📗📘📙',
		'crayon': '✏✒🖋🖊', 'pencil': '✏✒🖋🖊', 'stylo': '🖊🖋✒', 'pen': '🖊🖋✒',
		'ciseaux': '✂', 'scissors': '✂',
		'sac': '🛍👜👛🎒💼🧳', 'bag': '🛍👜👛🎒💼',
		'valise': '🧳💼', 'suitcase': '🧳',
		'parapluie': '☂☔🌂', 'umbrella': '☂☔🌂',
		'poubelle': '🗑', 'trash': '🗑', 'corbeille': '🗑',
		'outils': '🧰🔧🔩🪛🪜🔨', 'tools': '🧰🔧🔩🪛',
		'marteau': '🔨', 'hammer': '🔨', 'tournevis': '🪛', 'screwdriver': '🪛',
		'peinture': '🖌🎨🖍', 'paint': '🖌🎨', 'art': '🎨🖼🖌🖍',
		'lunettes': '👓🕶🥽', 'glasses': '👓🕶🥽',
		'chapeau': '🎩🧢👒🪖', 'hat': '🎩🧢👒',
		'couronne': '👑', 'crown': '👑', 'roi': '🤴👑', 'king': '🤴👑', 'reine': '👸👑', 'queen': '👸👑',
		'diamant': '💎', 'diamond': '💎', 'bijou': '💍💎', 'jewelry': '💍💎👑',
		'bague': '💍', 'ring': '💍',
		'toilettes': '🚽🚾🧻', 'wc': '🚽🚾', 'toilet': '🚽🚾',
		'douche': '🚿🛁🧼', 'shower': '🚿', 'bain': '🛁🛀', 'bath': '🛁🛀',
		'savon': '🧼', 'soap': '🧼',
		'medicament': '💊💉🩹🩺', 'medicine': '💊💉🩹🩺', 'hopital': '🏥💊🩺🚑', 'hospital': '🏥🚑🩺',
		'dent': '🦷🪥', 'tooth': '🦷🪥', 'brosse': '🪥🧹',
		'os': '🦴', 'bone': '🦴',
		'cadenas': '🔒🔓🔐', 'lock': '🔒🔓🔐', 'securite': '🔒🛡🔐', 'security': '🔒🛡',
		'bouclier': '🛡', 'shield': '🛡',
		'epee': '⚔🗡', 'sword': '⚔🗡',
		'bombe': '💣🧨', 'bomb': '💣🧨', 'explosion': '💥💣🧨',
		'cigarette': '🚬🚭',
		'loupe': '🔍🔎', 'search': '🔍🔎', 'chercher': '🔍🔎',
		'ampoule idee': '💡✨', 'idea': '💡✨🤔', 'idee': '💡✨',
		'papier': '📄📃📝📋', 'paper': '📄📃📝',
		'dossier': '📁📂🗂', 'folder': '📁📂🗂', 'fichier': '📄📁📂',
		'calendrier': '📅📆🗓', 'calendar': '📅📆🗓', 'date': '📅📆',
		'epingle': '📌📍', 'pin': '📌📍',
		'trombone': '📎🖇', 'clip': '📎🖇',
		'regle': '📏📐', 'ruler': '📏📐',
		'calculatrice': '🧮', 'calculator': '🧮',
		'boite': '📦📥📤', 'box': '📦', 'colis': '📦📮',
		'courrier': '📮📬📭📫📪', 'mailbox': '📮📬📭',
		'journal': '📰📄', 'newspaper': '📰',
		'tableau': '🖼🎨📊📋', 'picture': '🖼📷',
		'jumelles': '🔭🧐', 'telescope': '🔭',
		'microscope': '🔬🧑‍🔬',
		'aimant': '🧲', 'magnet': '🧲',
		'echelle': '🪜', 'ladder': '🪜',
		'corde': '🪢', 'rope': '🪢', 'noeud': '🪢🎀',
		'sablier': '⌛⏳', 'hourglass': '⌛⏳', 'temps': '⏰⌛⏳🕐',
		'time': '⏰⌛⏳🕐', 'heure': '🕐🕑🕒🕓🕔🕕🕖🕗🕘🕙🕚🕛',
		// Vêtements
		'vetement': '👔👕👖👗🧥🥻', 'clothes': '👔👕👖👗🧥',
		'tshirt': '👕', 'chemise': '👔', 'shirt': '👔👕',
		'pantalon': '👖', 'pants': '👖', 'jean': '👖',
		'robe': '👗', 'dress': '👗',
		'manteau': '🧥🧣', 'coat': '🧥', 'veste': '🧥🧣',
		'echarpe': '🧣', 'scarf': '🧣', 'gant': '🧤', 'glove': '🧤',
		'chaussette': '🧦', 'sock': '🧦',
		'chaussure': '👞👟🥾👠👡🩴', 'shoe': '👞👟🥾👠',
		'botte': '👢🥾', 'boot': '👢🥾', 'talon': '👠👡',
		'cravate': '👔🎀', 'tie': '👔',
		'maillot': '👙🩱🩲🏊', 'swimsuit': '👙🩱',
		'costume': '🤵👔💼', 'suit': '🤵👔',
		// Drapeaux
		'france': '🇫🇷', 'drapeau': '🏁🚩🎌🏴🏳🏳️‍🌈', 'flag': '🏁🚩🎌🏴🏳',
		'europe': '🇪🇺🇫🇷🇩🇪🇪🇸🇮🇹🇧🇪🇳🇱🇵🇹🇦🇹🇬🇷',
		'usa': '🇺🇸', 'amerique': '🇺🇸🗽', 'angleterre': '🇬🇧', 'england': '🇬🇧',
		'espagne': '🇪🇸', 'spain': '🇪🇸', 'italie': '🇮🇹', 'italy': '🇮🇹',
		'allemagne': '🇩🇪', 'germany': '🇩🇪', 'portugal': '🇵🇹',
		'japon': '🇯🇵', 'japan': '🇯🇵', 'chine': '🇨🇳', 'china': '🇨🇳',
		'bresil': '🇧🇷', 'brazil': '🇧🇷', 'canada': '🇨🇦',
		'maroc': '🇲🇦', 'tunisie': '🇹🇳', 'algerie': '🇩🇿',
		'belgique': '🇧🇪', 'suisse': '🇨🇭', 'switzerland': '🇨🇭',
	};

	return {
		open: false,
		targetId: null,
		search: '',
		activeCategory: 'smileys',

		get categories() {
			return Object.entries(emojiData).map(([key, val]) => ({ key, icon: val.icon, label: val.label }));
		},

		get filteredEmojis() {
			if (this.search.trim()) {
				const q = this.search.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
				// Search in keyword map first
				let results = '';
				for (const [keyword, emojis] of Object.entries(searchMap)) {
					if (keyword.includes(q)) results += emojis;
				}
				// Also search all emojis from all categories
				if (!results) {
					results = Object.values(emojiData).map(c => c.emojis).join('');
				}
				return [...new Set([...results])].filter(c => c.trim());
			}
			const cat = emojiData[this.activeCategory];
			return cat ? [...cat.emojis].filter(c => c.trim()) : [];
		},

		openPicker(detail) {
			this.targetId = detail.targetId;
			this.search = '';
			this.activeCategory = 'smileys';
			this.open = true;
			this.$nextTick(() => this.$refs.searchInput?.focus());
		},

		selectEmoji(emoji) {
			window.dispatchEvent(new CustomEvent('emoji:selected', {
				detail: { targetId: this.targetId, emoji }
			}));
			this.open = false;
		},
	};
}
</script>
	<script>
		function wysiwygImageModal() {
			return {
				isOpen: false,
				activeTab: 'upload',
				targetEditorId: null,

				// Upload tab
				isDragging: false,
				isUploading: false,
				uploadedUrls: [],
				uploadError: '',

				// URL tab
				imageUrl: '',

				// Unsplash tab
				searchQuery: '',
				photos: [],
				selectedPhotos: [],
				isSearching: false,
				hasSearched: false,
				currentPage: 1,
				totalPages: 0,
				categories: ['Plage', 'Montagne', 'Ville', 'Nature', 'Restaurant', 'Hotel', 'Piscine', 'Jardin', 'Interieur', 'Terrasse'],

				// Layout
				selectedLayout: 1,

				open(detail) {
					this.targetEditorId = detail?.editorId || null;
					this.isOpen = true;
					this.resetAll();

					const category = detail?.category;
					if (category && category.trim()) {
						this.activeTab = 'unsplash';
						this.searchQuery = category.trim();
						this.$nextTick(() => this.searchUnsplash());
					}
				},

				close() {
					this.isOpen = false;
				},

				resetAll() {
					this.activeTab = 'upload';
					this.isDragging = false;
					this.isUploading = false;
					this.uploadedUrls = [];
					this.uploadError = '';
					this.imageUrl = '';
					this.searchQuery = '';
					this.photos = [];
					this.selectedPhotos = [];
					this.isSearching = false;
					this.hasSearched = false;
					this.currentPage = 1;
					this.totalPages = 0;
					this.selectedLayout = 1;
				},

				handleDrop(event) {
					const files = event.dataTransfer?.files;
					if (files?.length) this.uploadFiles(Array.from(files));
				},

				handleFileSelect(event) {
					const files = event.target.files;
					if (files?.length) this.uploadFiles(Array.from(files));
					event.target.value = '';
				},

				async uploadFiles(files) {
					const imageFiles = files.filter(f => f.type.startsWith('image/'));
					if (!imageFiles.length) {
						this.uploadError = 'Aucune image valide selectionnee.';
						return;
					}
					const oversized = imageFiles.filter(f => f.size > 10 * 1024 * 1024);
					if (oversized.length) {
						this.uploadError = oversized.length + ' image(s) depasse(nt) 10 Mo.';
						return;
					}

					this.uploadError = '';
					this.isUploading = true;

					const results = await Promise.allSettled(
						imageFiles.map(f => this.uploadSingleFile(f))
					);

					let errorCount = 0;
					results.forEach(r => {
						if (r.status === 'fulfilled' && r.value) {
							this.uploadedUrls.push(r.value);
						} else {
							errorCount++;
						}
					});

					this.isUploading = false;

					if (errorCount > 0 && this.uploadedUrls.length === 0) {
						this.uploadError = 'Erreur lors de l\'envoi des images.';
					} else if (errorCount > 0) {
						this.uploadError = errorCount + ' image(s) n\'ont pas pu etre envoyee(s).';
					}

					this.autoSuggestLayout(this.uploadedUrls.length);
				},

				async uploadSingleFile(file) {
					const formData = new FormData();
					formData.append('image', file);

					try {
						const response = await fetch("https:\/\/app.styqr.fr\/api\/wysiwyg\/upload-image", {
							method: 'POST',
							body: formData,
							headers: {
								'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content,
								'X-Requested-With': 'XMLHttpRequest',
								'Accept': 'application/json',
							},
						});

						const data = await response.json();
						return data.success ? data.url : null;
					} catch (err) {
						console.error('WYSIWYG upload error:', err);
						return null;
					}
				},

				removeUploadedImage(index) {
					this.uploadedUrls.splice(index, 1);
					this.autoSuggestLayout(this.uploadedUrls.length);
				},

				insertFromUpload() {
					if (!this.uploadedUrls.length) return;
					this.insertImages(this.uploadedUrls);
				},

				async searchUnsplash() {
					if (!this.searchQuery.trim()) return;
					this.isSearching = true;
					this.currentPage = 1;
					this.photos = [];
					this.selectedPhotos = [];

					try {
						const response = await fetch(
							"https:\/\/app.styqr.fr\/api\/unsplash\/search" + '?query=' + encodeURIComponent(this.searchQuery) + '&page=1',
							{ headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' } }
						);
						const data = await response.json();
						if (data.photos) {
							this.photos = data.photos;
							this.totalPages = data.total_pages;
						}
					} catch (err) {
						console.error('Unsplash search error:', err);
					} finally {
						this.isSearching = false;
						this.hasSearched = true;
					}
				},

				async loadMoreUnsplash() {
					if (this.isSearching || this.currentPage >= this.totalPages) return;
					this.isSearching = true;
					this.currentPage++;
					try {
						const response = await fetch(
							"https:\/\/app.styqr.fr\/api\/unsplash\/search" + '?query=' + encodeURIComponent(this.searchQuery) + '&page=' + this.currentPage,
							{ headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' } }
						);
						const data = await response.json();
						if (data.photos) this.photos = [...this.photos, ...data.photos];
					} catch (err) {
						console.error('Unsplash load more error:', err);
					} finally {
						this.isSearching = false;
					}
				},

				handleUnsplashScroll(event) {
					const el = event.target;
					if (el.scrollTop + el.clientHeight >= el.scrollHeight - 100) {
						this.loadMoreUnsplash();
					}
				},

				togglePhotoSelection(photo) {
					const idx = this.selectedPhotos.findIndex(p => p.id === photo.id);
					if (idx >= 0) {
						this.selectedPhotos.splice(idx, 1);
					} else {
						this.selectedPhotos.push(photo);
					}
					this.autoSuggestLayout(this.selectedPhotos.length);
				},

				isPhotoSelected(photo) {
					return this.selectedPhotos.some(p => p.id === photo.id);
				},

				async confirmUnsplash() {
					if (!this.selectedPhotos.length) return;

					const trackPromises = this.selectedPhotos.map(photo =>
						fetch("https:\/\/app.styqr.fr\/api\/unsplash\/download", {
							method: 'POST',
							headers: {
								'Content-Type': 'application/json',
								'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content,
								'X-Requested-With': 'XMLHttpRequest',
							},
							body: JSON.stringify({
								download_url: photo.download_url,
								photo_url: photo.url,
							}),
						}).catch(err => console.error('Download tracking error:', err))
					);

					Promise.allSettled(trackPromises);

					this.insertImages(this.selectedPhotos.map(p => p.url));
				},

				autoSuggestLayout(count) {
					if (count >= 4) this.selectedLayout = 4;
					else if (count >= 3) this.selectedLayout = 3;
					else if (count >= 2) this.selectedLayout = 2;
					else this.selectedLayout = 1;
				},

				insertImages(urls) {
					window.dispatchEvent(new CustomEvent('wysiwyg:insert-image', {
						detail: { urls, layout: this.selectedLayout, editorId: this.targetEditorId }
					}));
					this.close();
				},

				insertSingleImage(url) {
					window.dispatchEvent(new CustomEvent('wysiwyg:insert-image', {
						detail: { urls: [url], layout: 1, editorId: this.targetEditorId }
					}));
					this.close();
				},
			};
		}
	</script>
	<script>
		function wysiwygVideoModal() {
			return {
				isOpen: false,
				videoUrl: '',
				targetEditorId: null,
				detectedPlatform: null,
				embedUrl: null,
				videoId: null,

				open(detail) {
					this.targetEditorId = detail?.editorId || null;
					this.isOpen = true;
					this.videoUrl = '';
					this.detectedPlatform = null;
					this.embedUrl = null;
					this.videoId = null;
				},

				close() {
					this.isOpen = false;
				},

				detectPlatform() {
					const url = this.videoUrl.trim();
					this.videoId = null;
					if (!url) {
						this.detectedPlatform = null;
						this.embedUrl = null;
						return;
					}

					if (url.match(/youtube\.com|youtu\.be/i)) {
						this.detectedPlatform = 'youtube';
						const match = url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
						this.videoId = match ? match[1] : null;
						this.embedUrl = match ? `https://www.youtube.com/embed/${match[1]}` : null;
					} else if (url.match(/vimeo\.com/i)) {
						this.detectedPlatform = 'vimeo';
						const match = url.match(/vimeo\.com\/(\d+)/);
						this.embedUrl = match ? `https://player.vimeo.com/video/${match[1]}` : null;
					} else if (url.match(/drive\.google\.com/i)) {
						this.detectedPlatform = 'drive';
						const match = url.match(/drive\.google\.com\/file\/d\/([a-zA-Z0-9_-]+)/);
						this.embedUrl = match ? `https://drive.google.com/file/d/${match[1]}/preview` : null;
					} else {
						this.detectedPlatform = 'other';
						this.embedUrl = null;
					}
				},

				insertVideo() {
					if (!this.embedUrl) return;

					window.dispatchEvent(new CustomEvent('wysiwyg:insert-video', {
						detail: {
							url: this.videoUrl,
							embedUrl: this.embedUrl,
							platform: this.detectedPlatform,
							editorId: this.targetEditorId,
						}
					}));

					this.close();
				},
			};
		}
	</script>

	
	<script
		defer
		src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"
	></script>
	<script
		defer
		src="https://cdn.jsdelivr.net/npm/@alpinejs/sort@3.x.x/dist/cdn.min.js"
	></script>
	<script
		defer
		src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"
	></script>
	<div
	x-data="imageCropModal()"
	x-show="isOpen"
	x-cloak
	class="fixed inset-0 z-[9999] flex items-center justify-center p-4"
	@keydown.escape.window="cancel()"
>
	
	<div class="absolute inset-0 bg-black/60" @click="cancel()"></div>

	<div
		class="relative flex w-full max-w-xl max-h-[90vh] flex-col overflow-hidden rounded-2xl bg-white shadow-2xl"
		x-show="isOpen"
		x-transition:enter="transition ease-out duration-200"
		x-transition:enter-start="opacity-0 scale-95"
		x-transition:enter-end="opacity-100 scale-100"
		x-transition:leave="transition ease-in duration-150"
		x-transition:leave-start="opacity-100 scale-100"
		x-transition:leave-end="opacity-0 scale-95"
	>
		
		<div class="flex items-center justify-between border-b border-gray-100 px-6 py-4">
			<h3 class="poppins-semibold opensans-bold mulish-bold text-lg text-styqrblack">Recadrer l&#039;image</h3>
			<button @click="cancel()" class="flex h-8 w-8 items-center justify-center rounded-full text-styqrmediumgrey transition-colors hover:bg-gray-100 hover:text-styqrblack">
				<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
					<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
				</svg>
			</button>
		</div>

		
		<div class="flex items-center justify-center bg-gray-50 px-4 py-4 sm:px-6 sm:py-6">
			<div class="relative h-[50vh] max-h-[460px] w-full overflow-hidden rounded-lg">
				<img x-ref="cropImage" class="block max-w-full" />
			</div>
		</div>

		
		<div class="flex items-center gap-3 px-6 py-3">
			<svg class="h-4 w-4 shrink-0 text-styqrmediumgrey" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
				<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607ZM13.5 10.5h-6" />
			</svg>
			<input
				type="range"
				min="0.1"
				max="3"
				step="0.01"
				x-model="zoomLevel"
				@input="applyZoom()"
				class="h-1.5 w-full cursor-pointer appearance-none rounded-full bg-gray-200 accent-styqrpurple"
			/>
			<svg class="h-4 w-4 shrink-0 text-styqrmediumgrey" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
				<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607ZM10.5 7.5v6m3-3h-6" />
			</svg>
		</div>

		
		<div class="flex items-center justify-end gap-3 border-t border-gray-100 px-6 py-4">
			<button
				@click="cancel()"
				class="poppins-medium opensans-medium mulish-medium rounded-lg px-5 py-2.5 text-sm text-styqrmediumgrey transition-colors hover:bg-gray-100 hover:text-styqrblack"
			>Annuler</button>
			<button
				@click="confirm()"
				:class="{
					'bg-styqrpurple hover:bg-styqrpurple/90': $store.config.isBase,
					'bg-maevablue hover:bg-maevablue/90': $store.config.isMaeva,
					'bg-gdfgreen hover:bg-gdfgreen/90': $store.config.isGDF
				}"
				class="poppins-medium opensans-medium mulish-medium rounded-lg px-5 py-2.5 text-sm text-white shadow-sm transition-colors"
			>Confirmer</button>
		</div>
	</div>
</div>

<script>
	function imageCropModal() {
		return {
			isOpen: false,
			cropper: null,
			zoomLevel: 1,
			onConfirmCallback: null,
			outputSize: 512,

			init() {
				window.StyQRImageCropper = {
					open: (source, options = {}) => this.open(source, options),
				};
			},

			async open(source, { aspectRatio = 1, outputSize = 512, onConfirm } = {}) {
				this.outputSize = outputSize;
				this.onConfirmCallback = onConfirm;
				this.zoomLevel = 1;

				if (source instanceof File) {
					this._initCropper(URL.createObjectURL(source), aspectRatio);
				} else if (source.startsWith('blob:') || source.startsWith('data:')) {
					this._initCropper(source, aspectRatio);
				} else {
					// External URL — proxy through server to avoid CORS
					try {
						const proxyUrl = "https:\/\/app.styqr.fr\/my\/media\/proxy-image" + '?url=' + encodeURIComponent(source);
						const response = await fetch(proxyUrl, { credentials: 'same-origin' });
						if (!response.ok) throw new Error('Proxy returned ' + response.status);
						const blob = await response.blob();
						this._initCropper(URL.createObjectURL(blob), aspectRatio);
					} catch (e) {
						console.error('Failed to load image for cropping', e);
					}
				}
			},

			_initCropper(url, aspectRatio) {

				if (this.cropper) {
					this.cropper.destroy();
					this.cropper = null;
				}

				const img = this.$refs.cropImage;
				img.src = url;
				this.isOpen = true;

				img.onload = () => {
					this.$nextTick(() => {
						this.cropper = new Cropper(img, {
							aspectRatio: aspectRatio,
							viewMode: 0,
							dragMode: 'move',
							autoCropArea: 1,
							cropBoxResizable: false,
							cropBoxMovable: false,
							toggleDragModeOnDblclick: false,
							guides: false,
							center: true,
							highlight: false,
							background: true,
							responsive: true,
							restore: false,
							minContainerWidth: 200,
							minContainerHeight: 200,
							ready: () => {
								this.zoomLevel = 1;
							},
						});
					});
				};
			},

			applyZoom() {
				if (this.cropper) {
					this.cropper.zoomTo(parseFloat(this.zoomLevel));
				}
			},

			confirm() {
				if (!this.cropper || !this.onConfirmCallback) return;

				const canvas = this.cropper.getCroppedCanvas({
					width: this.outputSize,
					height: this.outputSize,
					imageSmoothingEnabled: true,
					imageSmoothingQuality: 'high',
				});

				canvas.toBlob((blob) => {
					const croppedFile = new File([blob], 'cropped.png', { type: 'image/png' });
					this.onConfirmCallback(croppedFile);
					this.close();
				}, 'image/png');
			},

			cancel() {
				this.close();
			},

			close() {
				this.isOpen = false;
				if (this.cropper) {
					this.cropper.destroy();
					this.cropper = null;
				}
				this.onConfirmCallback = null;
			},
		};
	}
</script>

	<script
		defer
		src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
	></script>

</body>

</html>

	<style>
		::-webkit-scrollbar {
			width: 10px;
			height: 10px;
		}

		::-webkit-scrollbar-track {
			background: #f4f4f4;
			border-radius: 10px;
		}

		::-webkit-scrollbar-thumb {
			background: linear-gradient(45deg, #7A49C7, #a077f1);
			border-radius: 10px;
		}
	</style>