// Résultats — top 3 + pyramide + CTA (version B2B)
const { useState: useStateR, useEffect: useEffectR, useMemo: useMemoR } = React;

// Map catalog IDs to WordPress fragrance slugs
const FRAG_SLUGS = {
  'CRC-068': 'caracas',
  'OAM-021': 'oud-ambre',
  'CIP-044': 'agrumes-du-soleil',
  'IRS-019': 'iris-jasmin',
  'FIG-031': 'jardins-polynesiens',
  'VET-052': 'vetiver-oriental',
  'ROS-007': 'eau-de-rose',
  'SEL-088': 'algue-marine',
};

function fragUrl(frag) {
  var slug = FRAG_SLUGS[frag.id];
  if (slug) return '/fragrances/' + slug + '/';
  // fallback: try name-based slug
  var n = frag.name.toLowerCase().replace(/[^a-z0-9]+/g, '-');
  if (frag.italic) n += '-' + frag.italic.toLowerCase().replace(/[^a-z0-9]+/g, '-');
  return '/fragrances/' + n + '/';
}

window.SimResults = function SimResults({ state, onRestart }){
  const ranked = useMemoR(()=> window.SCENTIUM_MATCH(state), [state]);
  const top = ranked.slice(0,3);
  const [focused, setFocused] = useStateR(0);
  const main = top[focused];

  // Profil espace
  const profile = useMemoR(()=>{
    const t = [];
    if((state.warm??.5) > .6) t.push('chaleureuse');
    else if((state.warm??.5) < .4) t.push('fra\u00eeche');
    else t.push('temp\u00e9r\u00e9e');
    if((state.shade??.5) > .6) t.push('ombr\u00e9e');
    else if((state.shade??.5) < .4) t.push('lumineuse');
    if((state.intense??.5) > .65) t.push('immersive');
    else if((state.intense??.5) < .35) t.push('discr\u00e8te');
    if((state.wood??.5) > .6) t.push('bois\u00e9e');
    else if((state.wood??.5) < .4) t.push('florale');
    if((state.sweet??.5) > .6) t.push('et gourmande');
    else if((state.sweet??.5) < .4) t.push('et s\u00e8che');
    return t.join(', ');
  }, [state]);

  return (
    <div className="sim-results">
      <div className="sim-results-head">
        <div className="sim-eyebrow">Votre profil olfactif</div>
        <h2 className="sim-h2">Une ambiance <em>{profile}</em>.</h2>
        <p className="sim-lede sim-lede-tight">
          Trois fragrances compos&eacute;es en France correspondent &agrave; votre espace.
          Contactez-nous pour recevoir un &eacute;chantillon.
        </p>
      </div>

      <div className="sim-results-stage">
        {/* Top 3 */}
        <aside className="sim-rank">
          {top.map((f,i)=>(
            <button key={f.id}
              className={"sim-rank-row "+(focused===i?'is-on':'')}
              onClick={()=>setFocused(i)}
              style={{'--accent':f.accent, '--accent-soft':f.accentSoft}}>
              <div className="sim-rank-pos">0{i+1}</div>
              <div className="sim-rank-meta">
                <div className="sim-rank-ref">SC-{f.id}</div>
                <div className="sim-rank-name">
                  {f.name}{f.italic && <em> {f.italic}</em>}
                </div>
                <div className="sim-rank-fam">{f.family}</div>
              </div>
              <div className="sim-rank-score">
                <div className="sim-rank-pct">{f.score}<small>%</small></div>
                <div className="sim-rank-pct-lbl">match</div>
              </div>
            </button>
          ))}
        </aside>

        {/* Carte focus */}
        <article className="sim-focus" key={main.id}
          style={{'--accent':main.accent, '--accent-soft':main.accentSoft}}>
          <div className="sim-focus-bg"></div>
          <div className="sim-focus-inner">
            <div className="sim-focus-top">
              <div className="sim-eyebrow">SC-{main.id} &middot; Coll. 2026</div>
              <div className="sim-focus-score">
                <div className="sim-focus-score-num">{main.score}<small>%</small></div>
                <div className="sim-focus-score-lbl">d'affinit&eacute;<br/>avec votre espace</div>
              </div>
            </div>

            <h3 className="sim-focus-name">
              {main.name}{main.italic && <em> {main.italic}</em>}
            </h3>
            <div className="sim-focus-sig">{main.sig}</div>

            {/* Pyramide */}
            <div className="sim-pyramid">
              <div className="sim-pyr-row">
                <div className="sim-pyr-stage">T&ecirc;te</div>
                <div className="sim-pyr-ingr">{main.notes.tete}</div>
              </div>
              <div className="sim-pyr-row">
                <div className="sim-pyr-stage">C&oelig;ur</div>
                <div className="sim-pyr-ingr">{main.notes.coeur}</div>
              </div>
              <div className="sim-pyr-row">
                <div className="sim-pyr-stage">Fond</div>
                <div className="sim-pyr-ingr">{main.notes.fond}</div>
              </div>
            </div>

            {/* Coords */}
            <div className="sim-coords">
              {[
                ['Chaleur', main.coords.warm],
                ['Profondeur', main.coords.shade],
                ['Intensit\u00e9', main.coords.intense],
                ['Caract\u00e8re', main.coords.sweet],
                ['Densit\u00e9', main.coords.wood],
              ].map(([k,v])=>(
                <div key={k} className="sim-coord">
                  <span className="sim-coord-lbl">{k}</span>
                  <span className="sim-coord-bar"><i style={{width:`${v*100}%`}}/></span>
                  <span className="sim-coord-val">{Math.round(v*100)}</span>
                </div>
              ))}
            </div>

            <div className="sim-focus-cta">
              <a href={fragUrl(main)} className="sim-cta sim-cta-primary">
                <span>D&eacute;couvrir {main.name}</span><span className="sim-arrow">&nearr;</span>
              </a>
              <a href="/contact/" className="sim-cta sim-cta-ghost">
                <span>&Ecirc;tre contact&eacute;</span><span className="sim-arrow">&rarr;</span>
              </a>
            </div>
          </div>
        </article>
      </div>

      <div className="sim-results-foot">
        <button className="sim-link" onClick={onRestart}>
          &larrhk; Refaire la simulation
        </button>
        <a className="sim-link" href="/contact/">Nous contacter &rarr;</a>
      </div>
    </div>
  );
};