/* =====================================================================
   VILLAVERDE · App shell — navegación, rail, topbar, guión, tweaks
   ===================================================================== */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primary": "#A4154B",
  "titleFont": "Cormorant Garamond",
  "showGuion": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const steps = VV.STEPS;
  const [idx, setIdx] = useState(() => {
    const s = +(localStorage.getItem('vv_step') || 0);
    return isNaN(s) ? 0 : Math.min(Math.max(s, 0), steps.length - 1);
  });
  const [visited, setVisited] = useState(() => new Set([steps[0].id]));
  const [dock, setDock] = useState(false);
  const stageRef = useRef(null);

  const cur = steps[idx];

  useEffect(() => {
    localStorage.setItem('vv_step', idx);
    setVisited(prev => new Set(prev).add(cur.id));
    setDock(false);
    if (stageRef.current) stageRef.current.scrollTop = 0;
  }, [idx]);

  // aplica tweaks a las variables de marca
  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--vv-crimson', t.primary);
    r.style.setProperty('--vv-display', `'${t.titleFont}', Georgia, serif`);
  }, [t.primary, t.titleFont]);

  const go = (i) => setIdx(Math.min(Math.max(i, 0), steps.length - 1));
  const goId = (id) => { const i = steps.findIndex(s => s.id === id); if (i >= 0) go(i); };

  useEffect(() => {
    const onKey = (e) => {
      if (e.target.tagName === 'INPUT') return;
      if (e.key === 'ArrowRight') go(idx + 1);
      if (e.key === 'ArrowLeft') go(idx - 1);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [idx]);

  const render = () => {
    switch (cur.id) {
      case 'bienvenida':  return <SecBienvenida onNext={() => go(idx + 1)} />;
      case 'salon':       return <SecSalon />;
      case 'manteleria':  return <SecManteleria />;
      case 'menu':        return <SecMenu />;
      case 'cortesias':   return <SecCortesias />;
      case 'paquetes':    return <SecPaquetes onGo={goId} />;
      case 'cotizador':   return <SecCotizador />;
      case 'testimonios': return <SecTestimonios />;
      case 'fechas':      return <SecFechas />;
      case 'cierre':      return <SecCierre onGo={goId} />;
      default: return null;
    }
  };

  return (
    <div className="vv-app">
      <Rail steps={steps} current={cur.id} visited={visited} onGo={go} />

      <div className="vv-main">
        <div className="vv-topbar">
          <div className="vv-topbar__crumb">
            Paso {cur.n} / {steps.length} <span style={{ opacity: .4 }}>·</span> <b>{cur.title}</b>
          </div>
          <div className="vv-navbtns">
            <button className="vv-navbtn" onClick={() => go(idx - 1)} disabled={idx === 0}>
              <Icon name="left" size={16} /> Anterior
            </button>
            <button className="vv-navbtn vv-navbtn--primary" onClick={() => go(idx + 1)} disabled={idx === steps.length - 1}>
              Siguiente <Icon name="right" size={16} />
            </button>
          </div>
        </div>

        <div className="vv-stage vv-scroll" ref={stageRef}
          style={{ paddingBottom: t.showGuion ? 'var(--dock-h)' : 0 }}>
          <div key={cur.id}>{render()}</div>
        </div>

        {t.showGuion && (
          <GuionDock stepId={cur.id} stepTitle={cur.title} open={dock} onToggle={() => setDock(o => !o)} />
        )}
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Marca" />
        <TweakColor label="Color primario" value={t.primary}
          options={['#A4154B', '#B30E66', '#7C0E37', '#9F1239']}
          onChange={(v) => setTweak('primary', v)} />
        <TweakSelect label="Tipografía de títulos" value={t.titleFont}
          options={['Cormorant Garamond', 'Playfair Display', 'EB Garamond']}
          onChange={(v) => setTweak('titleFont', v)} />
        <TweakSection label="Presentación" />
        <TweakToggle label="Mostrar guión del asesor" value={t.showGuion}
          onChange={(v) => setTweak('showGuion', v)} />
      </TweaksPanel>

      <Lightbox />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);