// Simulateur Scentium — composants étapes (version B2B clients)
const { useState, useEffect, useRef, useMemo } = React;

// ====== Helpers ======
const lerp = (a,b,t)=>a+(b-a)*t;
const clamp = (v,a,b)=>Math.max(a,Math.min(b,v));

// Mix accent global selon état
window.simBlendAccent = function(state){
  const palettes = {
    coolLight: [180, 0.06, 0.78],
    coolShade: [220, 0.08, 0.45],
    warmLight: [40,  0.10, 0.78],
    warmShade: [25,  0.14, 0.45],
  };
  const w = state.warm ?? .5;
  const s = state.shade ?? .5;
  const tl = palettes.coolLight, tr = palettes.warmLight;
  const bl = palettes.coolShade, br = palettes.warmShade;
  const top = tl.map((v,i)=>lerp(v, tr[i], w));
  const bot = bl.map((v,i)=>lerp(v, br[i], w));
  const out = top.map((v,i)=>lerp(v, bot[i], s));
  const [h, c, l] = out;
  return `oklch(${l} ${c} ${h})`;
};

// ====== INTRO ======
window.SimIntro = function SimIntro({ onStart }){
  return (
    <div className="sim-screen sim-intro">
      <div className="sim-eyebrow">Scentium · Simulateur olfactif</div>
      <h1 className="sim-h1">
        Quelle fragrance pour<br/>votre <em>espace</em> ?
      </h1>
      <p className="sim-lede">
        5 questions simples pour identifier la signature olfactive<br/>
        qui correspond à votre activité et à vos clients.
      </p>
      <button className="sim-cta sim-cta-primary" onClick={onStart}>
        <span>Commencer</span>
        <span className="sim-arrow">↗</span>
      </button>
      <div className="sim-meta-line">
        <span>5 étapes</span>
        <span>·</span>
        <span>≈ 2 minutes</span>
        <span>·</span>
        <span>68 fragrances</span>
      </div>
    </div>
  );
};

// ====== ÉTAPE 1 — Secteur d'activité ======
window.SimStepMoment = function SimStepMoment({ value, onPick }){
  const opts = [
    { id:'matin', label:'Hôtellerie',      sub:'Hôtels, lobbies, résidences',      warm:.55, shade:.5 },
    { id:'jour',  label:'Commerce',         sub:'Boutiques, retail, concept stores', warm:.4,  shade:.3 },
    { id:'soir',  label:'Bien-être',        sub:'Spas, salons, centres de soins',   warm:.65, shade:.55 },
    { id:'nuit',  label:'Restauration',     sub:'Restaurants, bars, lounges',        warm:.75, shade:.7 },
  ];
  return (
    <div className="sim-step">
      <div className="sim-step-head">
        <div className="sim-eyebrow">01 · Votre secteur</div>
        <h2 className="sim-h2">Dans quel <em>secteur</em> exercez-vous ?</h2>
      </div>
      <div className="sim-grid sim-grid-4">
        {opts.map(o=>(
          <button key={o.id}
            className={"sim-card "+(value===o.id?'is-on':'')}
            onClick={()=>onPick({moment:o.id, warm:o.warm, shade:o.shade})}>
            <div className="sim-card-num">0{opts.indexOf(o)+1}</div>
            <div className="sim-card-title">{o.label}</div>
            <div className="sim-card-sub">{o.sub}</div>
          </button>
        ))}
      </div>
    </div>
  );
};

// ====== ÉTAPE 2 — Ambiance souhaitée ======
window.SimStepLieu = function SimStepLieu({ value, onPick }){
  const opts = [
    { id:'atrium',  label:'Chic & raffinée',    sub:'Élégance discrète, matériaux nobles' },
    { id:'salon',   label:'Chaleureuse',         sub:'Confort, cocooning, douceur' },
    { id:'chambre', label:'Zen & apaisante',     sub:'Calme, sérénité, bien-être' },
    { id:'jardin',  label:'Fraîche & naturelle', sub:'Vitalité, air libre, verdure' },
    { id:'cave',    label:'Intense & caractère', sub:'Profondeur, singularité, prestige' },
    { id:'plage',   label:'Légère & aérienne',   sub:'Fraîcheur, transparence, liberté' },
  ];
  return (
    <div className="sim-step">
      <div className="sim-step-head">
        <div className="sim-eyebrow">02 · L'ambiance</div>
        <h2 className="sim-h2">Quelle <em>ambiance</em> voulez-vous créer ?</h2>
      </div>
      <div className="sim-grid sim-grid-3">
        {opts.map((o,i)=>(
          <button key={o.id}
            className={"sim-card sim-card-tall "+(value===o.id?'is-on':'')}
            onClick={()=>onPick({lieu:o.id})}>
            <div className="sim-card-num">{String(i+1).padStart(2,'0')}</div>
            <div className="sim-card-title">{o.label}</div>
            <div className="sim-card-sub">{o.sub}</div>
          </button>
        ))}
      </div>
    </div>
  );
};

// ====== ÉTAPE 3 — Famille olfactive ======
window.SimStepMatiere = function SimStepMatiere({ value, onPick }){
  const opts = [
    { id:'bois',   label:'Boisé',     sub:'Cèdre, vétiver, santal',         wood:.85 },
    { id:'fleur',  label:'Floral',    sub:'Rose, iris, jasmin',              wood:.2 },
    { id:'cuir',   label:'Cuir',      sub:'Caractère, élégance brute',      wood:.7 },
    { id:'agrume', label:'Frais',     sub:'Agrumes, menthe, notes vertes',   wood:.3 },
    { id:'épice',  label:'Épicé',     sub:'Cannelle, poivre, cardamome',    wood:.6 },
    { id:'ambre',  label:'Oriental',  sub:'Ambre, résines, vanille',         wood:.7 },
    { id:'vert',   label:'Vert',      sub:'Feuilles, herbes, thé',           wood:.4 },
    { id:'eau',    label:'Marin',     sub:'Notes océaniques, sel, minéral',  wood:.35 },
  ];
  return (
    <div className="sim-step">
      <div className="sim-step-head">
        <div className="sim-eyebrow">03 · La famille olfactive</div>
        <h2 className="sim-h2">Vers quelle <em>direction</em> penchez-vous ?</h2>
      </div>
      <div className="sim-grid sim-grid-4">
        {opts.map((o,i)=>(
          <button key={o.id}
            className={"sim-card sim-card-mat "+(value===o.id?'is-on':'')}
            onClick={()=>onPick({matiere:o.id, wood:o.wood})}>
            <div className="sim-card-title">{o.label}</div>
            <div className="sim-card-sub">{o.sub}</div>
          </button>
        ))}
      </div>
    </div>
  );
};

// ====== ÉTAPE 4 — Réglages ======
window.SimStepSensors = function SimStepSensors({ state, onChange }){
  const intense = state.intense ?? .5;
  const sweet = state.sweet ?? .5;
  const woodLocal = state.wood ?? .5;

  const Slider = ({label, leftLabel, rightLabel, value, onSet})=>(
    <div className="sim-slider">
      <div className="sim-slider-head">
        <span className="sim-eyebrow-sm">{label}</span>
        <span className="sim-slider-val">{Math.round(value*100)}</span>
      </div>
      <div className="sim-slider-track">
        <input type="range" min="0" max="100" value={Math.round(value*100)}
          onChange={e=>onSet(+e.target.value/100)} />
        <div className="sim-slider-fill" style={{width:`${value*100}%`}}></div>
        <div className="sim-slider-thumb" style={{left:`${value*100}%`}}></div>
      </div>
      <div className="sim-slider-poles">
        <span>{leftLabel}</span>
        <span>{rightLabel}</span>
      </div>
    </div>
  );

  return (
    <div className="sim-step">
      <div className="sim-step-head">
        <div className="sim-eyebrow">04 · Vos préférences</div>
        <h2 className="sim-h2">Ajustez selon vos <em>envies</em>.</h2>
      </div>
      <div className="sim-sliders">
        <Slider label="Puissance de diffusion" leftLabel="Discret, en fond" rightLabel="Présent, immersif"
          value={intense} onSet={v=>onChange({intense:v})}/>
        <Slider label="Caractère" leftLabel="Sec, épuré" rightLabel="Doux, gourmand"
          value={sweet} onSet={v=>onChange({sweet:v})}/>
        <Slider label="Texture" leftLabel="Léger, aérien" rightLabel="Dense, profond"
          value={woodLocal} onSet={v=>onChange({wood:v})}/>
      </div>
    </div>
  );
};

// ====== ÉTAPE 5 — Objectif ======
window.SimStepMood = function SimStepMood({ value, onPick }){
  const opts = [
    { id:'calme',   label:'Détente',     sub:'Vos clients se sentent apaisés' },
    { id:'désir',   label:'Séduction',   sub:'Créer une attraction irrésistible' },
    { id:'audace',  label:'Prestige',    sub:'Affirmer une image haut de gamme' },
    { id:'mémoire', label:'Mémorabilité',sub:'Qu\'on se souvienne de votre lieu' },
    { id:'évasion', label:'Évasion',     sub:'Transporter dans un autre univers' },
  ];
  return (
    <div className="sim-step">
      <div className="sim-step-head">
        <div className="sim-eyebrow">05 · L'objectif</div>
        <h2 className="sim-h2">Que voulez-vous que vos <em>clients</em> ressentent ?</h2>
      </div>
      <div className="sim-grid sim-grid-mood">
        {opts.map((o,i)=>(
          <button key={o.id}
            className={"sim-card sim-card-mood "+(value===o.id?'is-on':'')}
            onClick={()=>onPick({mood:o.id})}>
            <div className="sim-card-num">{String(i+1).padStart(2,'0')}</div>
            <div className="sim-card-title">{o.label}</div>
            <div className="sim-card-sub">{o.sub}</div>
          </button>
        ))}
      </div>
    </div>
  );
};

Object.assign(window, {
  SimIntro: window.SimIntro,
  SimStepMoment: window.SimStepMoment,
  SimStepLieu: window.SimStepLieu,
  SimStepMatiere: window.SimStepMatiere,
  SimStepSensors: window.SimStepSensors,
  SimStepMood: window.SimStepMood,
});