{/* --- TAB: PRESENTATION --- */} {activeTab === 'presentation' && (

{/* Hero Section */}

Haute Performance

Quand votre vie a du sens,
l'action devient naturelle.

Sortez du mode "Il faut / Je dois". Votre inconscient ne cherche pas la survie, il cherche la **certitude**.

{/* The Conflict Infographic */}

01. Le Conflit Intérieur

TÊTE

Logique
"Il faut que..."

Conflit

CŒUR

Émotion
"Ça n'a pas de sens"

Conséquence : Fatigue, procrastination, freinage inconscient.

{/* The Solution */}

La Solution : La Super-Intention

L'art de donner un sens profond à une action et de le programmer dans votre inconscient.

« Quand je [ACTION],
je me sens [ÉTAT POSITIF],
et ça m'aide à [MISSION DE VIE]. »

)} {/* --- TAB: EXERCISE WIZARD --- */} {activeTab === 'exercise' && (

{/* Progress Bar */}

{[0, 1, 2, 3].map((s) => (

= s ? 'bg-amber-500 shadow-[0_0_10px_rgba(245,158,11,0.8)]' : 'bg-slate-800'}`}>

))}

{/* Step 0: The Action */} {step === 0 && (

Étape 1 : Identifier la contrainte

Quelle est l'action qui te pèse ?

Celle où tu te dis "Il faut", "Je dois". Celle qui crée de la friction. Sois précis.

handleInput('action', e.target.value)} autoFocus />

"Benoît : Ne juge pas ta résistance. Elle est une information, pas un défaut. Ton inconscient freine car il manque de données sur le sens."

)} {/* Step 1: The Feeling */} {step === 1 && (

Étape 2 : Le Bénéfice Émotionnel

Que veux-tu ressentir VRAIMENT ?

Imagine que cette action est terminée et réussie. Au-delà du résultat matériel, quel est l'état intérieur que cela te procure ? Paix ? Fierté ? Liberté ?

handleInput('feeling', e.target.value)} autoFocus />

"Le cerveau ne distingue pas travail et loisir. Il distingue Sens et Contrainte. Donne-lui l'émotion qu'il recherche."

)} {/* Step 2: The Mission */} {step === 2 && (

Étape 3 : La Grande Vision

En quoi ça sert ta mission ?

Relie cette petite action à ton grand projet de vie. Qui deviens-tu en faisant cela ?

handleInput('mission', e.target.value)}
                      autoFocus
                    />
                  </div>
                </div>
              )}

{/* Step 3: Power Song & Finish */}
              {step === 3 && (
                <div className="animate-fadeIn">
                   <div className="flex items-center gap-3 mb-6 text-amber-500">
                    <Music className="w-6 h-6" />
                    <span className="uppercase tracking-widest text-xs font-bold">Étape 4 : L'Ancrage Auditif</span>
                  </div>
                  <h3 className="text-3xl font-serif text-white mb-4">Ta "Power Song"</h3>
                  <p className="text-slate-400 mb-8">
                    Quelle musique déclenche instantanément cet état de puissance en toi ? C'est le déclencheur pour ton Cœur.
                  </p>
                  
                  <div className="relative group mb-8">
                     <div className="absolute -inset-0.5 bg-gradient-to-r from-amber-500 to-amber-700 rounded-lg blur opacity-20 group-hover:opacity-40 transition duration-1000"></div>
                     <input 
                      type="text" 
                      placeholder="Ex: Eye of the Tiger, Hans Zimmer, Eminem..."
                      className="relative w-full bg-slate-950 border border-slate-700 text-amber-100 p-4 rounded-lg focus:outline-none focus:border-amber-500 focus:ring-1 focus:ring-amber-500 text-lg transition-all"
                      value={inputs.powerSong}
                      onChange={(e) => handleInput('powerSong', e.target.value)}
                    />
                  </div>
                  
                  <div className="bg-amber-900/20 p-6 rounded-xl border border-amber-500/30 text-center">
                    <p className="text-amber-200 font-serif mb-2">Posture de Puissance requise</p>
                    <p className="text-slate-400 text-sm">Dos droit. Épaules ouvertes. Regard au loin. Respire.</p>
                  </div>
                </div>
              )}

{/* Navigation Buttons */}
              <div className="flex justify-between mt-8 pt-6 border-t border-white/5">
                {step > 0 ? (
                  <button onClick={prevStep} className="text-slate-500 hover:text-white transition px-4 py-2">Retour</button>
                ) : <div></div>}
                
                {step < 3 ? (
                  <button 
                    onClick={nextStep} 
                    disabled={
                      (step === 0 && !inputs.action) ||
                      (step === 1 && !inputs.feeling) ||
                      (step === 2 && !inputs.mission)
                    }
                    className="bg-amber-500 text-slate-900 px-6 py-2 rounded-lg font-bold hover:bg-amber-400 disabled:opacity-50 disabled:cursor-not-allowed transition flex items-center gap-2"
                  >
                    Suivant <ChevronRight size={18} />
                  </button>
                ) : (
                  <button 
                    onClick={() => setActiveTab('result')}
                    className="bg-gradient-to-r from-amber-400 to-amber-600 text-slate-900 px-8 py-3 rounded-lg font-bold hover:shadow-[0_0_20px_rgba(245,158,11,0.6)] transition transform hover:scale-105 flex items-center gap-2"
                  >
                    Générer ma Super-Intention <Sparkles size={18} />
                  </button>
                )}
              </div>
            </div>
          </div>
        )}

{/* --- TAB: RESULT (The Talisman) --- */}
        {activeTab === 'result' && (
          <div className="flex flex-col items-center animate-zoomIn">
            <h2 className="text-2xl font-serif text-amber-100 mb-6 text-center">Ton Talisman de Transformation</h2>
            
            {/* THE CARD - Designed to be screenshotted */}
            <div className="relative w-full max-w-sm aspect-[9/16] bg-slate-950 rounded-xl overflow-hidden shadow-2xl border-[6px] border-double border-amber-600 p-8 flex flex-col justify-between group transform transition hover:scale-[1.01]">
              
              {/* Card Background Texture */}
              <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,_rgba(251,191,36,0.15),_transparent_70%)]"></div>
              <div className="absolute inset-0 opacity-20 bg-[url('https://www.transparenttextures.com/patterns/stardust.png')]"></div>
              
              {/* Card Top */}
              <div className="text-center z-10">
                 <div className="mx-auto w-12 h-12 border border-amber-500 rounded-full flex items-center justify-center mb-4">
                   <Zap className="text-amber-400 w-6 h-6" />
                 </div>
                 <h3 className="text-amber-500 uppercase tracking-[0.3em] text-xs font-bold mb-1">Super-Intention</h3>
                 <div className="h-[1px] w-12 bg-amber-500 mx-auto opacity-50"></div>
              </div>

{/* Card Core Content */}
              <div className="z-10 text-center space-y-6 my-auto">
                <div>
                  <p className="text-slate-500 text-xs uppercase mb-1">Quand je...</p>
                  <p className="text-white font-serif text-xl leading-snug border-b border-amber-900/50 pb-2">{inputs.action || "..."}</p>
                </div>
                
                <div>
                  <p className="text-slate-500 text-xs uppercase mb-1">Je me sens...</p>
                  <p className="text-amber-300 font-serif text-2xl font-bold leading-snug drop-shadow-lg">{inputs.feeling || "..."}</p>
                </div>

<div>
                   <p className="text-slate-500 text-xs uppercase mb-1">Et cela sert...</p>
                   <p className="text-slate-300 italic text-sm leading-relaxed px-2">{inputs.mission || "..."}</p>
                </div>
              </div>

{/* Card Bottom */}
              <div className="z-10 text-center space-y-4">
                 <div className="flex items-center justify-center gap-2 text-amber-500/80 text-xs border border-amber-500/20 rounded-full py-1 px-3 mx-auto w-fit">
                    <Music size={10} />
                    <span className="uppercase tracking-wide">{inputs.powerSong || "Ma Power Song"}</span>
                 </div>
                 
                 <div className="pt-4 border-t border-white/5">
                   <p className="font-serif text-[10px] text-slate-500 uppercase tracking-widest">Institut d'Hypnose & de Performance</p>
                   <p className="text-[9px] text-amber-700/50 mt-1">Benoît Sanglier</p>
                 </div>
              </div>

{/* Corner Ornaments */}
              <div className="absolute top-2 left-2 w-8 h-8 border-t border-l border-amber-500/50 rounded-tl-lg"></div>
              <div className="absolute top-2 right-2 w-8 h-8 border-t border-r border-amber-500/50 rounded-tr-lg"></div>
              <div className="absolute bottom-2 left-2 w-8 h-8 border-b border-l border-amber-500/50 rounded-bl-lg"></div>
              <div className="absolute bottom-2 right-2 w-8 h-8 border-b border-r border-amber-500/50 rounded-br-lg"></div>
            </div>

<div className="mt-8 space-y-4 text-center max-w-md">
              <p className="text-slate-400 text-sm">
                Ceci est ton fond d'écran de puissance. Fais une capture d'écran maintenant.
              </p>
              <div className="flex justify-center gap-4">
                 <button className="flex items-center gap-2 bg-slate-800 hover:bg-slate-700 text-white px-4 py-2 rounded-lg text-sm transition">
                   <Share2 size={16} /> Partager
                 </button>
                 <button onClick={() => window.print()} className="flex items-center gap-2 bg-amber-600 hover:bg-amber-500 text-white px-4 py-2 rounded-lg text-sm transition">
                   <Download size={16} /> Sauvegarder
                 </button>
              </div>
              <button onClick={() => {setStep(0); setActiveTab('exercise');}} className="text-amber-500/50 hover:text-amber-500 text-xs mt-4 underline decoration-amber-500/30">
                Recommencer avec une autre action
              </button>
            </div>

</div>
        )}

</main>

export default SuperIntentionApp;
				</div>    </div>

</div><script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://da32ev14kd4yl.cloudfront.net/lib/select2/js/select2.min.js?v=1521"></script>
<script src="https://da32ev14kd4yl.cloudfront.net/lib/select2/js/lang/en.js?v=1521"></script>
<script src="https://da32ev14kd4yl.cloudfront.net/lib/select2/js/lang/fr.js?v=1521"></script>
<script src="https://da32ev14kd4yl.cloudfront.net/assets/js/common/jquery/jquery.gritter.min.js?v=1521"></script>
<script src="https://da32ev14kd4yl.cloudfront.net/assets/js/common/i18next.min.js?v=1521"></script>
<script src="https://da32ev14kd4yl.cloudfront.net/assets/js/common/locales/locale.fr_FR.js?v=1521"></script>
<script src="https://da32ev14kd4yl.cloudfront.net/assets/js/common/sprintf.min.js?v=1521"></script>
<script src="https://da32ev14kd4yl.cloudfront.net/assets/js/common/helpers/gui_helper.js?v=1521"></script>
<script src="https://da32ev14kd4yl.cloudfront.net/assets/js/common/globalFunctions.js?v=1521"></script>
<script src="https://da32ev14kd4yl.cloudfront.net/assets/js/common/handlers/modal-helper.js?v=1521"></script>
<script src="https://da32ev14kd4yl.cloudfront.net/assets/js/common/handlers/modal-handler.js?v=1521"></script>
<script src="https://da32ev14kd4yl.cloudfront.net/assets/js/common/input-clearable.js?v=1521"></script>
<script src="https://da32ev14kd4yl.cloudfront.net/assets/js/common/clipboard.min.js?v=1521"></script>
<script src="https://da32ev14kd4yl.cloudfront.net/assets/js/common/clipboard-copy.js?v=1521"></script>
<script src="https://da32ev14kd4yl.cloudfront.net/assets/js/common/helpers/ajax-content-helper.js?v=1521"></script>
<script src="https://da32ev14kd4yl.cloudfront.net/assets/js/common/helpers/ajax-form-helper.js?v=1521"></script>
<script src="https://da32ev14kd4yl.cloudfront.net/assets/js/common/handlers/ajax-content-handler.js?v=1521"></script>
<script src="https://da32ev14kd4yl.cloudfront.net/assets/js/common/helpers/element-state-helper.js?v=1521"></script>
<script src="https://da32ev14kd4yl.cloudfront.net/assets/js/common/helpers/history-helper.js?v=1521"></script>
<script src="https://da32ev14kd4yl.cloudfront.net/assets/js/common/helpers/form-helper.js?v=1521"></script>
<script src="https://da32ev14kd4yl.cloudfront.net/assets/js/common/handlers/pager-handler.js?v=1521"></script>
<script src="https://da32ev14kd4yl.cloudfront.net/assets/js/common/handlers/show-text-handler.js?v=1521"></script>
<script src="https://da32ev14kd4yl.cloudfront.net/assets/js/site/jquery.uniform.min.js?v=1521"></script>
<script src="https://da32ev14kd4yl.cloudfront.net/assets/js/common/load-image.min.js?v=1521"></script>
<script src="https://da32ev14kd4yl.cloudfront.net/assets/js/common/bootstrap-image-gallery.js?v=1521"></script>
<script src="https://cdn.jsdelivr.net/npm/mediaelement@4.1.3/build/mediaelement-and-player.min.js"></script>
<script src="https://da32ev14kd4yl.cloudfront.net/assets/js/site/app2.js?v=1521"></script>
<script src="https://da32ev14kd4yl.cloudfront.net/assets/js/common/iframeResizer.contentWindow.min.js?v=1521"></script>
<script src="https://js.stripe.com/v3/"></script>
<script type="text/javascript"> </script>
</body>
</html>

Institut d'Hypnose& de Performance

Quand votre vie a du sens,l'action devient naturelle.