/* ============================================================================ 8LovePatterns — ÉCRAN DE RÉSULTAT GRATUIT (page de valeur perçue) ---------------------------------------------------------------------------- Refonte orientée valeur perçue avant achat. De haut en bas : 1. HERO illustré, quasi pleine page : ancre qui plonge (asset commun) + perso du mécanisme (art existant) + nom, force %, palier d'Ancre NOMMÉ, phrase vécue. 2. Bande SCIENCE « 70 years of attachment research » (3 fondateurs). 3. PROFIL GRATUIT COMPLET du mécanisme (zone "free") — réassemblé par le tunnel sécurisé /api/get-report-free et rendu par window.LP_RENDER, donc STRICTEMENT le même contenu free que rapport.html (_content/*.js). 4. Ligne de valeur perçue. 5. Sceau thérapeute (placeholder structuré, sans nom/photo inventés). 6. Avis clients (placeholder structuré, aucun faux avis). 7. Rapport complet payant + garantie 7 jours + CTA. Le moteur ne change pas, seul l'affichage. Le garde-fou sécurité (alerte) passe toujours avant. L'objet technique n'apparaît qu'avec ?lpdev=1. ========================================================================== */ const { useState: rsUseState, useEffect: rsUseEffect, useRef: rsUseRef, useMemo: rsUseMemo } = React; /* ---- Micro-textes (FR validé du document + EN fidèle) -------------------- */ const LP_RESULT_TEXTS = { intro: { fr:"Tes réponses dessinent un mécanisme précis.", en:"Your answers draw a precise mechanism." }, presence:{ fr:"Présent chez toi à {N} %", en:"Present in you at {N}%" }, presenceMixte:{ fr:"Présents chez toi à {N} % chacun", en:"Present in you at {N}% each" }, melange: { fr:"Un autre mécanisme est très proche derrière. Ton rapport en tient compte.", en:"Another mechanism is right behind it. Your report takes it into account." }, mixte: { fr:"Deux mécanismes cohabitent chez toi à parts égales. C'est rare, et ça change la lecture.", en:"Two mechanisms live in you in equal measure. It is rare, and it changes the reading." }, surface: { fr:"Surface", en:"Surface" }, fond: { fr:"Fond", en:"Bottom" }, anchorLabel:{ fr:"Ton Ancre", en:"Your Anchor" }, porteTitle: { fr:"Ton rapport complet est prêt", en:"Your complete report is ready" }, porteAccroche:{ fr:"Ce que tu viens de lire, c'est la surface. Ton rapport complet descend là où ça se joue vraiment.", en:"What you just read is the surface. Your complete report goes down to where it really plays out." }, cards: [ { title:{ fr:"Ton deuxième mécanisme", en:"Your second mechanism" }, teaser:{ fr:"Un autre schéma est presque aussi fort chez toi. Il change toute la lecture.", en:"Another pattern is almost as strong in you. It changes the whole reading." } }, { title:{ fr:"Ta boucle complète", en:"Your complete loop" }, teaser:{ fr:"Le scénario exact que tu rejoues, étape par étape, et où il se casse.", en:"The exact scenario you keep replaying, step by step, and where it breaks." } }, { title:{ fr:"Ton levier de sabotage", en:"Your sabotage lever" }, teaser:{ fr:"La façon précise dont ton mécanisme abîme tes relations, mesurée par tes réponses.", en:"The precise way your mechanism damages your relationships, measured by your answers." } }, { title:{ fr:"Ta carte des 8 schémas", en:"Your map of the 8 patterns" }, teaser:{ fr:"Tes scores détaillés sur les huit mécanismes.", en:"Your detailed scores across the eight mechanisms." } }, { title:{ fr:"En couple : ta dynamique", en:"In a relationship: your dynamic" }, teaser:{ fr:"Comment ton schéma danse avec celui de l'autre, et pourquoi vous tournez en rond.", en:"How your pattern dances with the other person's, and why you keep going in circles." } }, { title:{ fr:"Ton premier pas", en:"Your first step" }, teaser:{ fr:"Le seul geste à faire cette semaine, adapté à ta profondeur d'Ancre.", en:"The one thing to do this week, adapted to your Anchor depth." } }, ], cta: { fr:"Obtenir mon rapport complet", en:"Get my full report" }, retake: { fr:"Refaire le test", en:"Retake the test" }, guarantee: { fr:"Garantie 7 jours, remboursé si le rapport ne te parle pas.", en:"7-day money-back guarantee if the report doesn't speak to you." }, pendingTitle:{ fr:"Ton rapport est en préparation.", en:"Your report is in preparation." }, pendingBody: { fr:"Le rapport complet rédigé arrive très bientôt. Ton résultat est gardé en attendant.", en:"The complete written report is coming very soon. Your result is kept safe in the meantime." }, pendingBack: { fr:"Revenir à mon résultat", en:"Back to my result" }, patterns: { 'Incendiaire': { signature:{ fr:"Tu mets le feu pour vérifier qu'on t'aime.", en:"You set fires to check that you are loved." } }, 'Miroir': { signature:{ fr:"Tu te reflètes pour te sentir exister dans le lien.", en:"You mirror the other to feel you exist in the bond." } }, 'Fugitif': { signature:{ fr:"Tu pars avant qu'on puisse te quitter.", en:"You leave before anyone can leave you." } }, 'Bastion': { signature:{ fr:"Tu te protèges si bien qu'on ne t'atteint plus.", en:"You protect yourself so well that no one reaches you anymore." } }, 'Guetteur': { signature:{ fr:"Tu surveilles l'amour au lieu de le vivre.", en:"You watch over love instead of living it." } }, 'Sauveur': { signature:{ fr:"Tu te rends indispensable pour être sûr d'être gardé.", en:"You make yourself indispensable to be sure you are kept." } }, 'Caméléon': { signature:{ fr:"Tu deviens ce qu'on attend pour ne pas être rejeté.", en:"You become what is expected so you will not be rejected." } }, 'Alchimiste': { signature:{ fr:"Tu comprends tout pour ne rien sentir.", en:"You understand everything so you feel nothing." } }, }, }; /* ---- Paliers d'Ancre NOMMÉS (mapping validé, surface -> fond) ------------ * v0 Clear · v1 Slipping · v2 Snagged · v3 Hooked · v4 Buried. La phrase vécue de chaque palier reste celle du repo (window.LP_TEST.paliers). */ const LP_ANCHOR_TIERS = ['Clear', 'Slipping', 'Snagged', 'Hooked', 'Buried']; /* ---- pattern key -> code archétype (art assets/archetypes/.png) ----- */ const LP_PATTERN_CODE = { 'Miroir':'mir', 'Fugitif':'fug', 'Bastion':'bas', 'Guetteur':'gue', 'Sauveur':'sau', 'Caméléon':'cam', 'Alchimiste':'alc', 'Incendiaire':'inc', }; /* ---- Bande science : 3 fondateurs (portraits illustrés fournis) ---------- */ const LP_SCIENCE = [ { img:'bowlby', name:'John Bowlby', lines:['Father of attachment theory.', 'Proved the bonds we form early shape how we love for life.'] }, { img:'ainsworth', name:'Mary Ainsworth', lines:['Mapped the attachment styles.', 'Showed why some people cling, some pull away, some feel secure.'] }, { img:'hazan-shaver', name:'Hazan & Shaver', lines:['Brought it to adult love.', 'Found that romance runs on the same attachment system.'] }, ]; /* ---- helpers -------------------------------------------------------------- */ function lpFill(s, map){ return s.replace(/\{(\w+)\}/g, (m,k)=> map[k]!=null ? map[k] : m); } /* Apparition progressive : 100% CSS (.lp-reveal), état final VISIBLE comme base.*/ function Reveal({ children, style, delay=0 }){ return
{children}
; } /* ---- result_v2 bridge ---------------------------------------------------- The live engine emits CAPITALIZED, accented pattern keys ('Miroir', ...). The secure report system keys on lowercase ASCII ids ('miroir', ...). We bridge here when persisting / posting the result the server reads. */ const LP_PROFILE_KEY = { 'Miroir':'miroir', 'Fugitif':'fugitif', 'Bastion':'bastion', 'Guetteur':'guetteur', 'Sauveur':'sauveur', 'Caméléon':'cameleon', 'Alchimiste':'alchimiste', 'Incendiaire':'incendiaire', }; function lpToProfileKey(k){ return LP_PROFILE_KEY[k] || (typeof k === 'string' ? k.toLowerCase() : k); } function lpResultV2(R){ return Object.assign({}, R, { pattern_dominant: lpToProfileKey(R.pattern_dominant), pattern_secondaire: lpToProfileKey(R.pattern_secondaire), ancre_variante: lpToProfileKey(R.ancre_variante), }); } const LP_RESULT_V2_KEY = 'lovepattern_result_v2'; /* =========================================================================== COUCHE MOUVEMENT (premium, sobre) ---------------------------------------------------------------------------- Principe de sûreté (cf. .lp-reveal) : l'état VISIBLE est toujours la base. Le mouvement n'est ajouté QUE sous prefers-reduced-motion: no-preference, et les révélations au scroll ne s'arment que si JS + IntersectionObserver sont là. Donc reduced-motion / pas-de-JS / horloge figée => contenu visible. Transform + opacity uniquement (GPU), 0 reflow, aucun asset réseau ajouté. ======================================================================== */ function lpReducedMotion(){ try { return !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches); } catch(e){ return false; } } function useReducedMotion(){ const [r, setR] = rsUseState(lpReducedMotion()); rsUseEffect(()=>{ let mq; try { mq = window.matchMedia('(prefers-reduced-motion: reduce)'); } catch(e){ return; } const on = ()=> setR(mq.matches); mq.addEventListener ? mq.addEventListener('change', on) : mq.addListener(on); return ()=>{ mq.removeEventListener ? mq.removeEventListener('change', on) : mq.removeListener(on); }; }, []); return r; } /* Compte de 0 -> target à l'arrivée ; instantané si reduced-motion. */ function useCountUp(target, duration){ const reduced = useReducedMotion(); const [val, setVal] = rsUseState(reduced ? target : 0); rsUseEffect(()=>{ if(reduced){ setVal(target); return; } let raf, start=null; const d = duration || 900; const step = (t)=>{ if(start==null) start=t; const p = Math.min(1, (t-start)/d); const eased = 1 - Math.pow(1-p, 3); // ease-out cubic setVal(Math.round(eased * target)); if(p < 1) raf = requestAnimationFrame(step); }; raf = requestAnimationFrame(step); return ()=> { if(raf) cancelAnimationFrame(raf); }; }, [target, reduced]); return val; } /* Révélation au scroll. Base = visible ; on n'arme l'état caché que si motion autorisé ET IntersectionObserver dispo. */ function InView({ children, delay=0, y=16, style, className='' }){ const ref = rsUseRef(null); const [armed] = rsUseState(()=> !lpReducedMotion() && typeof IntersectionObserver !== 'undefined'); const [inView, setInView] = rsUseState(false); rsUseEffect(()=>{ if(!armed){ return; } const node = ref.current; if(!node) return; const io = new IntersectionObserver((entries)=>{ entries.forEach(e=>{ if(e.isIntersecting){ setInView(true); io.disconnect(); } }); }, { rootMargin:'0px 0px -8% 0px', threshold:0.08 }); io.observe(node); return ()=> io.disconnect(); }, [armed]); const cls = 'lp-inview' + (armed?' is-armed':'') + (inView?' is-in':'') + (className?(' '+className):''); return
{children}
; } /* Feuille de styles d'animation, injectée une fois par l'écran de résultat. */ function ResultMotionStyles(){ return ; } /* =========================================================================== 1. EN-TÊTE — le mécanisme révélé (HÉROS) + échelle d'Ancre (secondaire) ---------------------------------------------------------------------------- Hiérarchie : le PERSO en pied du mécanisme domine (grand, entier), avec son nom + sa force %. L'échelle de profondeur d'Ancre (Clear -> Buried) est un panneau secondaire compact, à côté en desktop / dessous en mobile. ======================================================================== */ function AnchorLadderHero({ isMixte, dominantName, secondaireName, code, force, intro, presence, rows, surface, fond }){ const [persoOk, setPersoOk] = rsUseState(true); const [anchorOk, setAnchorOk] = rsUseState(true); const dotBg = (v)=> `color-mix(in srgb, var(--fam-ancre) ${24 + v*16}%, var(--paper))`; const shownForce = useCountUp(force, 1000); // % qui se compte à l'arrivée const hereV = (rows.find(r=> r.here) || { v:0 }).v; const anchorDelay = 350 + hereV*70 + 360; // l'ancre se pose après que sa ligne soit montée return (
{/* HÉROS : grand perso en pied + nom + force % */}
{persoOk ? {dominantName}setPersoOk(false)} style={{ width:'auto', height:'clamp(270px,44vw,410px)', maxWidth:'100%', display:'block', margin:'0 auto', filter:'drop-shadow(0 26px 30px rgba(15,20,45,.28))' }}/> : null}

{intro}

{isMixte ? {dominantName}&{secondaireName} : dominantName}

{lpFill(presence, { N: shownForce })}
{/* SECONDAIRE : échelle de profondeur d'Ancre, compacte */}
Your Anchor depth
{surface}
{/* rail vertical : surface claire -> fond sombre (se dessine du haut) */}
); } /* =========================================================================== 2. BANDE SCIENCE — 70 years of attachment research ======================================================================== */ function ScienceBand(){ return (
70 years of attachment research
{LP_SCIENCE.map((s,i)=> )}
); } function ScienceCard({ s }){ const [imgOk, setImgOk] = rsUseState(true); const initials = s.name.split(/\s|&/).filter(Boolean).map(w=>w[0]).slice(0,2).join(''); return (
{/* portrait illustré en pied (fond transparent) : contain, posé en bas */}
{imgOk ? {s.name}setImgOk(false)} style={{ maxHeight:'100%', maxWidth:'94%', width:'auto', height:'auto', objectFit:'contain', filter:'drop-shadow(0 12px 16px rgba(15,20,45,.18))' }}/> :
{initials}
}

{s.name}

{s.lines.map((l,i)=>(

{l}

))}
); } /* =========================================================================== PROFIL GRATUIT COMPLET — zone "free" du mécanisme ---------------------------------------------------------------------------- Affiche les blocs zone:'free' de _content/.js (prose, visuels anchorScale/loop/spilloverTable), au mot près, rendus par window.LP_RENDER. Deux sources, dans l'ordre : 1. /api/get-report-free (vérité serveur, avec timeout) ; 2. fallback CLIENT si le tunnel ne répond pas : window.LP_FREE_ASSEMBLE + window.LP_FREE_CONTENT (free uniquement, jamais de payant), donc le profil gratuit s'affiche partout, même sans la fonction Netlify. Le bloc 'cta' final est retiré : la porte payante est gérée plus bas. ======================================================================== */ function FreeReport({ R }){ const lang = (window.useLang && window.useLang().lang) || 'en'; const mountRef = rsUseRef(null); const [state, setState] = rsUseState('loading'); // loading | done | empty rsUseEffect(()=>{ let alive = true; setState('loading'); const resultV2 = lpResultV2(R); const profil = resultV2.pattern_dominant; const wantLang = lang === 'fr' ? 'fr' : 'en'; /* rend les blocs free d'un rapport assemblé (serveur OU client) */ function renderReport(report){ const blocks = ((report && report.free) || []).filter(b=> b && b.type !== 'cta'); const mount = mountRef.current; if(!blocks.length || !window.LP_RENDER || !mount) return false; window.LP_RENDER._accent = (report.meta && report.meta.accent) || '#46934A'; window.LP_RENDER._code = (report.meta && report.meta.code) || 'mir'; mount.innerHTML = ''; blocks.forEach(b=>{ try { mount.appendChild(window.LP_RENDER.renderBlock(b, {})); } catch(e){} }); return true; } /* fallback : assemblage du free côté client (aucun contenu payant impliqué) */ function clientFallback(){ try { if(window.LP_FREE_ASSEMBLE && window.LP_FREE_CONTENT && window.LP_FREE_CONTENT[profil]){ const report = window.LP_FREE_ASSEMBLE(window.LP_FREE_CONTENT[profil], resultV2, { lang: wantLang }); if(alive && renderReport(report)){ setState('done'); return; } } } catch(e){} if(alive) setState('empty'); } /* 1) tunnel serveur d'abord, avec timeout pour ne pas rester bloqué */ const ctrl = (typeof AbortController !== 'undefined') ? new AbortController() : null; const to = setTimeout(()=>{ if(ctrl) ctrl.abort(); }, 6000); fetch('/api/get-report-free', { method:'POST', headers:{ 'content-type':'application/json' }, body: JSON.stringify({ result: resultV2, lang: wantLang }), signal: ctrl ? ctrl.signal : undefined }) .then(r=>{ if(!r.ok) throw new Error('status '+r.status); return r.json(); }) .then(report=>{ clearTimeout(to); if(!alive) return; if(!renderReport(report)) clientFallback(); else setState('done'); }) .catch(()=>{ clearTimeout(to); clientFallback(); }); return ()=>{ alive = false; clearTimeout(to); if(ctrl){ try { ctrl.abort(); } catch(e){} } }; }, [R, lang]); return (
{state==='loading' && (
)}
); } /* =========================================================================== AVIS CLIENTS — placeholder structuré (aucun faux avis) ======================================================================== */ function ReviewsPlaceholder(){ return (
[ Customer reviews, to be added ]
{[0,1,2].map(i=>(
[ Customer name ]

[ Review text to be added ]

))}
); } /* =========================================================================== 7. RAPPORT COMPLET PAYANT + garantie 7 jours + CTA ======================================================================== */ function PaidReportBlock({ X, tx, onCta, onRestart, pattern }){ /* Analytics (cookieless, non-blocking): the premium offer / price became visible. Fires once, when the block actually scrolls into view. */ const paywallRef = rsUseRef(null); const paywallFiredRef = rsUseRef(false); rsUseEffect(()=>{ const fire = ()=>{ if(paywallFiredRef.current) return; paywallFiredRef.current = true; window.LP_PH && window.LP_PH('paywall_viewed', pattern ? { pattern } : {}); }; const node = paywallRef.current; if(!node || typeof IntersectionObserver === 'undefined'){ fire(); return; } const io = new IntersectionObserver((entries)=>{ entries.forEach(e=>{ if(e.isIntersecting){ fire(); io.disconnect(); } }); }, { threshold:0.2 }); io.observe(node); return ()=> io.disconnect(); }, []); return (

{tx(X.porteTitle)}

{tx(X.porteAccroche)}

{X.cards.map((c,i)=>(
{tx(c.title)}

{tx(c.teaser)}

))}
{tx(X.guarantee)}
); } /* ---- écran provisoire d'achat --------------------------------------------- */ function PendingReport({ onBack }){ const tx = useTx(); const X = LP_RESULT_TEXTS; return (

{tx(X.pendingTitle)}

{tx(X.pendingBody)}

); } /* =========================================================================== L'ÉCRAN DE RÉSULTAT GRATUIT (assemblage des 7 sections) ======================================================================== */ function TestResult({ answers, ancreVariant, onRestart, go }){ const tx = useTx(); const T = window.LP_TEST; const X = LP_RESULT_TEXTS; const R = rsUseMemo(()=> window.LP_ENGINE.computeResultat(answers, ancreVariant), [answers, ancreVariant]); const [gateDone,setGateDone] = rsUseState(R.securite!=='alerte'); const [pending,setPending] = rsUseState(false); const dev = /[?&]lpdev=1/.test(window.location.search); /* Persist the engine result (profile-key shape the server reads) for the CTA and for rapport.html's success_url round-trip. */ rsUseEffect(()=>{ try { localStorage.setItem(LP_RESULT_V2_KEY, JSON.stringify(lpResultV2(R))); } catch(e){} }, [R]); /* Analytics (cookieless, non-blocking): the free result is on screen. Fires once, only after the safety gate has been cleared and we are not on the interim purchase screen — i.e. when the real result hero is shown. */ const resultViewedRef = rsUseRef(false); rsUseEffect(()=>{ if(gateDone && !pending && !resultViewedRef.current){ resultViewedRef.current = true; window.LP_PH && window.LP_PH('result_viewed', { pattern: R.pattern_dominant }); } }, [gateDone, pending, R]); function startPlanCheckout(){ try { if (window.LP_STRIPE && typeof window.LP_STRIPE.checkoutSession === 'function') { window.LP_STRIPE.checkoutSession(lpResultV2(R)); return; } } catch(e){} setPending(true); /* fallback if stripe-config is unavailable */ } /* Sécurité = alerte : l'écran de soutien passe TOUJOURS avant (inchangé). */ if(R.securite==='alerte' && !gateDone){ return setGateDone(true)} go={go}/>; } if(pending) return setPending(false)}/>; const patOf = k => T.patterns.find(p=>p.key===k) || { key:k, fr:k, en:k }; const isMixte = R.profil_type==='mixte'; const code = LP_PATTERN_CODE[R.pattern_dominant] || 'mir'; /* les 5 paliers nommés (surface -> fond) + phrase vécue du repo, palier joué surligné */ const ladderRows = LP_ANCHOR_TIERS.map((nm, v)=> ({ v, name: nm, phrase: tx(T.paliers.find(p=>p.v===v) || { fr:'', en:'' }), here: v === R.ancre_position, })); return (
{/* EN-TÊTE COMPACT — échelle de profondeur de l'Ancre */} {/* 1 — PROFIL GRATUIT COMPLET (zone "free") */} {/* 2 — PREUVE : bande science (3 fondateurs) + avis clients */} {/* 3 — CTA rapport complet + garantie 7 jours */} {/* objet technique : uniquement en mode développement (?lpdev=1) */} {dev && (
Objet résultat (dev) 
{JSON.stringify(R, null, 2)}
)}
); } Object.assign(window, { TestResult, LP_RESULT_TEXTS });